NuroDev’s gists

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 / 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 / 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 / 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 / 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 / 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 / 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 / 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 / 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 / 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())
	}

Ben NuroDev