Skip to content

Instantly share code, notes, and snippets.

View NuroDev's full-sized avatar
🌈

Ben NuroDev

🌈
View GitHub Profile
@NuroDev
NuroDev / [...nextauth].ts
Created April 8, 2022 22:26
🔒 Dynamic OAuth Providers - Only load OAuth providers into NextAuth.js if their required client ID / secrete keys are present as environment variables
// pages/api/auth/[...nextauth].ts
import NextAuth from 'next-auth';
import TwitterProvider from 'next-auth/providers/twitter';
import type { OAuthConfig, OAuthUserConfig, Provider } from 'next-auth/providers';
/**
* Supported Provider Type
*
@NuroDev
NuroDev / generateSVGAvatar.ts
Last active June 28, 2022 00:42
🌈 Avatar Generator - Generate an SVG with a background color based on a hash of a provided string
import { createHash } from "node:crypto";
const COLOR_NAMES = ["red", "green", "blue"];
const COLOR_SHADES = [500, 600, 700];
const COLORS: Record<
typeof COLOR_NAMES[number],
Record<typeof COLOR_SHADES[number], string>
> = {
@NuroDev
NuroDev / ExampleButton.tsx
Last active July 8, 2022 09:54
👩‍🎨 TypeTheme ─ Theme based class names styling using Tailwind CSS
import clsx from 'clsx';
type Theme<TThemeType extends string> = {
[TType in TThemeType]: string;
} & {
default: string;
};
export const getTheme = <TThemeType extends string>(
theme: TThemeType | 'default' = 'default',
@NuroDev
NuroDev / asyncTimeout.ts
Last active July 8, 2022 12:08
🛑 Async Timeout ─ Asynchronous wrapper for the standard JavaScript setTimeout function
const setTimeoutAsync = <
TCallback extends Function = () => void | Promise<void>
>(
cb: TCallback,
delay: number
) =>
new Promise((resolve) =>
setTimeout(() => {
resolve(cb());
}, delay)
@NuroDev
NuroDev / Toaster.component.tsx
Created July 13, 2022 14:02
🌙 Themed Toaster ─ Wrapper for `react-hot-toast` to add theming support using `next-themes` & `react-use`
import { Toaster as RHToaster } from 'react-hot-toast';
import { useMedia } from 'react-use';
import { useTheme } from 'next-themes';
import type { WithProps } from '~/types';
enum ThemeType {
LIGHT = 'light',
DARK = 'dark',
SYSTEM = 'system',
@NuroDev
NuroDev / incidents.ts
Created July 19, 2022 15:29
🚨 Planetscale Incidents ─ TypeScript Planetscale status API proxy endpoint
// api/database/incidents.ts
interface Incident {
id: string;
url: string;
name: string;
}
interface UnresolvedIncidentsResponse {
page: {
@NuroDev
NuroDev / chunkify.ts
Created August 8, 2022 18:37
✂️ Chunkify - Splits a provided array into chunks of arrays
/**
* Chunkify
*
* @description Splits up an array into chnks of arrays of a specified size
*
* @param {Array} array - The input array that will be chunkified
* @param {number} [chunkSize] - The size of each chunk (**Default**: 10)
*/
export function chunkify<T>(array: Array<T>, chunkSize: number = 10) {
let results = new Array<Array<T>>();
@NuroDev
NuroDev / bytes.ts
Last active August 19, 2022 11:15
📏 Bytes ─ TypeScript ESM fork of the `bytes` NPM package
type ByteFormatStr = 'b' | 'gb' | 'kb' | 'mb' | 'pb' | 'tb';
interface ByteOptions {
decimalPlaces?: number;
fixedDecimals?: boolean;
thousandsSeparator?: string;
unit?: ByteFormatStr;
unitSeparator?: string;
}
@NuroDev
NuroDev / ComposeProviders.component.tsx
Created August 27, 2022 10:08
🤏 Compose Providers ─ Cleaner pattern for handling multiple context providers
// https://twitter.com/bidah/status/1563197138854588417
import reduceRight from 'lodash/reduceRight';
import type { ElementType, ReactNode } from 'react';
interface ComposeProvidersProps {
components: Array<ElementType>;
children: ReactNode;
}
@NuroDev
NuroDev / flipEntries.ts
Created September 29, 2022 20:27
🔃 Flip Entries ─ Take the elements of an object & swap the keys with values
function flipEntries <TValue = unknown> (obj: Record<string, TValue>) {
return Object.fromEntries(Object.entries(obj).map(([key, value]) => Array.isArray(value) ? [...value.map((v) => [v, key])] : [[value, key]]).flat())
}