NuroDev’s gists

NuroDev / defineHead.tsx

Created November 19, 2022 07:51

🧠 Define head ─ Next.js 13 utility function, based on `next-seo` to generate head elements based on provided props

	import { type ReactNode } from 'react';

	interface NextHeadProps {
	params?: Record<string, string \| number \| boolean>;
	}

	interface HeadProps {
	description?: string;
	title?: string;
	titleTemplate?: `%s${string}`;

NuroDev / page.tsx

Created November 8, 2022 15:07

❗️ Next.js inferred generateStaticParams ─ Infer the type of static router parameters by, optionally, passing in your `generateStaticParams` function

	type GenerateStaticParamsFn<TParams extends Array<unknown>> = () => TParams \| Promise<TParams>;

	type ArrayElement<A> = A extends ReadonlyArray<infer T> ? T : never;

	type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

	interface NextPageProps<
	TGenerateStaticParams extends GenerateStaticParamsFn<TParams> \| undefined = undefined,
	TParams extends Array<unknown> = Array<unknown>,
	> {

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

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 / 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 / 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 / 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 / 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 / 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 / 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',

Ben NuroDev