feat: local and preview detection

.github/workflows/documentation.yml

@@ -76,6 +76,7 @@ jobs:
           for PACKAGE in "${PACKAGES[@]}"; do
             cd "packages/${PACKAGE}"
             ../../main/packages/api-extractor/bin/api-extractor run --local --minify
+            ../../main/packages/scripts/bin/generateSplitDocumentation
             cd ../..
           done
 

apps/guide/package.json

@@ -65,12 +65,12 @@
 		"sharp": "^0.33.2"
 	},
 	"devDependencies": {
-		"@next/bundle-analyzer": "14.1.0",
+		"@next/bundle-analyzer": "14.1.1",
 		"@testing-library/react": "^14.2.1",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/html-escaper": "^3.0.2",
 		"@types/node": "18.18.8",
-		"@types/react": "^18.2.60",
+		"@types/react": "^18.2.61",
 		"@types/react-dom": "^18.2.19",
 		"@unocss/eslint-plugin": "^0.58.5",
 		"@unocss/postcss": "^0.58.5",

apps/website/package.json

@@ -56,9 +56,9 @@
 		"cmdk": "^0.2.1",
 		"geist": "^1.2.2",
 		"jotai": "^2.7.0",
-		"lucide-react": "^0.343.0",
+		"lucide-react": "^0.344.0",
 		"meilisearch": "^0.37.0",
-		"next": "14.1.1-canary.80",
+		"next": "14.1.2-canary.2",
 		"next-mdx-remote": "^4.4.1",
 		"next-themes": "^0.2.1",
 		"overlayscrollbars": "^2.5.0",
@@ -71,18 +71,18 @@
 		"vaul": "^0.9.0"
 	},
 	"devDependencies": {
-		"@next/bundle-analyzer": "14.1.1-canary.80",
+		"@next/bundle-analyzer": "14.1.2-canary.2",
 		"@react-aria/optimize-locales-plugin": "^1.0.2",
 		"@shikijs/rehype": "1.1.7",
 		"@tailwindcss/typography": "^0.5.10",
 		"@testing-library/react": "^14.2.1",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/node": "18.18.8",
-		"@types/react": "^18.2.60",
+		"@types/react": "^18.2.61",
 		"@types/react-dom": "^18.2.19",
 		"@vitejs/plugin-react": "^4.2.1",
 		"@vitest/coverage-v8": "^1.3.1",
-		"autoprefixer": "^10.4.17",
+		"autoprefixer": "^10.4.18",
 		"cpy-cli": "^5.0.0",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.57.0",

apps/website/src/app/docs/packages/[packageName]/[version]/[item]/opengraph-image.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-unknown-property */
 import { ImageResponse } from 'next/og';
+import { fetchNode } from '~/util/fetchNode';
 import { resolveKind } from '~/util/resolveNodeKind';
 
 export const runtime = 'edge';
@@ -16,14 +17,7 @@ export default async function Image({
 }: {
 	readonly params: { readonly item: string; readonly packageName: string; readonly version: string };
 }) {
-	const normalizeItem = params.item.split(encodeURIComponent(':')).join('.').toLowerCase();
-
-	const isMainVersion = params.version === 'main';
-	const fileContent = await fetch(
-		`${process.env.BLOB_STORAGE_URL}/rewrite/${params.packageName}/${params.version}.${normalizeItem}.api.json`,
-		{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
-	);
-	const node = await fileContent.json();
+	const node = await fetchNode({ item: params.item, packageName: params.packageName, version: params.version });
 
 	return new ImageResponse(
 		(

apps/website/src/app/docs/packages/[packageName]/[version]/[item]/page.tsx

@@ -1,8 +1,6 @@
-// import { readFile } from 'node:fs/promises';
-// import { join } from 'node:path';
-// import { inspect } from 'node:util';
 import type { Metadata } from 'next';
 import { DocItem } from '~/components/DocItem';
+import { fetchNode } from '~/util/fetchNode';
 
 export async function generateMetadata({
 	params,
@@ -25,22 +23,7 @@ export default async function Page({
 }: {
 	readonly params: { readonly item: string; readonly packageName: string; readonly version: string };
 }) {
-	const normalizeItem = params.item.split(encodeURIComponent(':')).join('.').toLowerCase();
-
-	// const fileContent = await readFile(
-	// 	join(process.cwd(), `../../packages/${params.packageName}/docs/split/${params.version}.${normalizeItem}.api.json`),
-	// 	'utf8',
-	// );
-	// const node = JSON.parse(fileContent);
-
-	const isMainVersion = params.version === 'main';
-	const fileContent = await fetch(
-		`${process.env.BLOB_STORAGE_URL}/rewrite/${params.packageName}/${params.version}.${normalizeItem}.api.json`,
-		{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
-	);
-	const node = await fileContent.json();
-
-	// console.log(inspect(node, { depth: 0 }));
+	const node = await fetchNode({ item: params.item, packageName: params.packageName, version: params.version });
 
 	return (
 		<main className="flex w-full flex-col gap-8 pb-12 md:pb-0">

apps/website/src/app/docs/packages/[packageName]/[version]/layout.tsx

@@ -1,13 +1,12 @@
-// import { readFile } from 'node:fs/promises';
-// import { join } from 'node:path';
-// import { inspect } from 'node:util';
 import type { Metadata } from 'next';
 import dynamic from 'next/dynamic';
 import type { PropsWithChildren } from 'react';
 import { Navigation } from '~/components/Navigation';
 import { OverlayScrollbarsComponent } from '~/components/OverlayScrollbars';
 import { Drawer } from '~/components/ui/Drawer';
 import { Footer } from '~/components/ui/Footer';
+import { ENV } from '~/util/env';
+import { fetchDependencies } from '~/util/fetchDependencies';
 
 // eslint-disable-next-line promise/prefer-await-to-then
 const CmdK = dynamic(async () => import('~/components/ui/CmdK').then((mod) => mod.CmdK), { ssr: false });
@@ -29,30 +28,16 @@ export default async function Layout({
 	params,
 	children,
 }: PropsWithChildren<{ readonly params: { readonly packageName: string; readonly version: string } }>) {
-	// const fileContent = await readFile(
-	// 	join(process.cwd(), `../../packages/${params.packageName}/docs/split/${params.version}.dependencies.api.json`),
-	// 	'utf8',
-	// );
-	// const dependencies = JSON.parse(fileContent);
-
-	const isMainVersion = params.version === 'main';
-	const fileContent = await fetch(
-		`${process.env.BLOB_STORAGE_URL}/rewrite/${params.packageName}/${params.version}.dependencies.api.json`,
-		{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
-	);
-	const parsedDependencies = await fileContent.json();
-	const dependencies = Object.entries<string>(parsedDependencies)
-		.filter(([key]) => key.startsWith('@discordjs/') && !key.includes('api-extractor'))
-		.map(([key, value]) => `${key.replace('@discordjs/', '').replaceAll('.', '-')}-${value.replaceAll('.', '-')}`);
-
-	// console.log(inspect(dependencies, { depth: 0 }));
+	const dependencies = await fetchDependencies({ packageName: params.packageName, version: params.version });
 
 	return (
 		// eslint-disable-next-line react/no-unknown-property
-		<div vaul-drawer-wrapper="" className="mx-auto flex max-w-screen-xl flex-col gap-12 p-6 md:flex-row">
-			<div className="sticky top-6 hidden flex-shrink-0 self-start md:block">
+		<div vaul-drawer-wrapper="" className="mx-auto flex max-w-screen-2xl flex-col gap-12 p-6 md:flex-row">
+			<div
+				className={`sticky hidden flex-shrink-0 self-start md:block ${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'top-[64px]' : 'top-6'}`}
+			>
 				<OverlayScrollbarsComponent
-					className="max-h-[calc(100dvh-48px)]"
+					className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'max-h-[calc(100dvh-48px-40px)]' : 'max-h-[calc(100dvh-48px)]'}`}
 					defer
 					options={{
 						overflow: { x: 'hidden' },

apps/website/src/app/docs/packages/[packageName]/[version]/page.tsx

@@ -23,7 +23,7 @@ export default async function Page({ params }: { readonly params: { readonly pac
 	);
 
 	return (
-		<div className="prose prose-neutral mx-auto max-w-screen-lg dark:prose-invert">
+		<div className="prose prose-neutral mx-auto max-w-screen-xl dark:prose-invert">
 			<MDXRemote
 				options={{
 					mdxOptions: {

apps/website/src/app/layout.tsx

@@ -5,6 +5,7 @@ import type { Metadata, Viewport } from 'next';
 import type { PropsWithChildren } from 'react';
 import { LocalizedStringProvider } from 'react-aria-components/i18n';
 import { DESCRIPTION } from '~/util/constants';
+import { ENV } from '~/util/env';
 import { Providers } from './providers';
 
 import '~/styles/main.css';
@@ -80,9 +81,21 @@ export const metadata: Metadata = {
 export default async function RootLayout({ children }: PropsWithChildren) {
 	return (
 		<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable} antialiased`} suppressHydrationWarning>
-			<body className="bg-white dark:bg-[#121212]">
+			<body className="relative bg-white dark:bg-[#121212]">
 				<LocalizedStringProvider locale="en-US" />
-				<Providers>{children}</Providers>
+				<Providers>
+					{ENV.IS_LOCAL_DEV ? (
+						<div className="sticky top-0 z-10 flex h-10 place-content-center place-items-center bg-red-500 text-lg text-white">
+							Local test environment
+						</div>
+					) : null}
+					{ENV.IS_PREVIEW ? (
+						<div className="sticky top-0 z-10 flex h-10 place-content-center place-items-center bg-red-500 text-lg text-white">
+							Preview deployment
+						</div>
+					) : null}
+					{children}
+				</Providers>
 				<Analytics />
 			</body>
 		</html>

apps/website/src/components/Navigation.tsx

@@ -2,6 +2,7 @@ import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted'
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
+import { fetchSitemap } from '~/util/fetchSitemap';
 import { fetchVersions } from '~/util/fetchVersions';
 import { resolveNodeKind } from './DocKind';
 import { NavigationItem } from './NavigationItem';
@@ -26,13 +27,7 @@ export async function Navigation({
 	readonly packageName: string;
 	readonly version: string;
 }) {
-	const isMainVersion = version === 'main';
-	const fileContent = await fetch(
-		`${process.env.BLOB_STORAGE_URL}/rewrite/${packageName}/${version}.sitemap.api.json`,
-		{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
-	);
-	const node = await fileContent.json();
-
+	const node = await fetchSitemap({ packageName, version });
 	const versions = await fetchVersions(packageName);
 
 	const groupedNodes = node.reduce((acc: any, node: any) => {

apps/website/src/middleware.ts

@@ -1,8 +1,13 @@
 import { sql } from '@vercel/postgres';
 import { NextResponse, type NextRequest } from 'next/server';
 import { PACKAGES } from './util/constants';
+import { ENV } from './util/env';
 
 async function fetchLatestVersion(packageName: string): Promise<string> {
+	if (ENV.IS_LOCAL_DEV) {
+		return 'main';
+	}
+
 	const { rows } = await sql`select version from documentation where name = ${packageName} order by version desc`;
 
 	return rows.map((row) => row.version).at(1) ?? 'main';

apps/website/src/util/env.ts

@@ -0,0 +1,4 @@
+export const ENV = {
+	IS_LOCAL_DEV: process.env.VERCEL_ENV === 'development' || process.env.NEXT_PUBLIC_LOCAL_DEV === 'true',
+	IS_PREVIEW: process.env.VERCEL_ENV === 'preview',
+};

apps/website/src/util/fetchDependencies.ts

@@ -0,0 +1,30 @@
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { ENV } from './env';
+
+export async function fetchDependencies({
+	packageName,
+	version,
+}: {
+	readonly packageName: string;
+	readonly version: string;
+}) {
+	if (ENV.IS_LOCAL_DEV) {
+		const fileContent = await readFile(
+			join(process.cwd(), `../../packages/${packageName}/docs/${packageName}/split/${version}.dependencies.api.json`),
+			'utf8',
+		);
+
+		return JSON.parse(fileContent);
+	}
+
+	const isMainVersion = version === 'main';
+	const fileContent = await fetch(
+		`${process.env.BLOB_STORAGE_URL}/rewrite/${packageName}/${version}.dependencies.api.json`,
+		{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
+	);
+	const parsedDependencies = await fileContent.json();
+	return Object.entries<string>(parsedDependencies)
+		.filter(([key]) => key.startsWith('@discordjs/') && !key.includes('api-extractor'))
+		.map(([key, value]) => `${key.replace('@discordjs/', '').replaceAll('.', '-')}-${value.replaceAll('.', '-')}`);
+}

apps/website/src/util/fetchLatestVersion.ts

@@ -1,6 +1,11 @@
 import { sql } from '@vercel/postgres';
+import { ENV } from './env';
 
 export async function fetchLatestVersion(packageName: string): Promise<string> {
+	if (ENV.IS_LOCAL_DEV) {
+		return 'main';
+	}
+
 	const { rows } = await sql`select version from documentation where name = ${packageName} order by version desc`;
 
 	return rows.map((row) => row.version).at(1) ?? 'main';

apps/website/src/util/fetchNode.ts

@@ -0,0 +1,30 @@
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { ENV } from './env';
+
+export async function fetchNode({
+	item,
+	packageName,
+	version,
+}: {
+	readonly item: any;
+	readonly packageName: string;
+	readonly version: string;
+}) {
+	const normalizeItem = item.split(encodeURIComponent(':')).join('.').toLowerCase();
+
+	if (ENV.IS_LOCAL_DEV) {
+		const fileContent = await readFile(
+			join(process.cwd(), `../../packages/${packageName}/docs/split/${version}.${normalizeItem}.api.json`),
+			'utf8',
+		);
+		return JSON.parse(fileContent);
+	}
+
+	const isMainVersion = version === 'main';
+	const fileContent = await fetch(
+		`${process.env.BLOB_STORAGE_URL}/rewrite/${packageName}/${version}.${normalizeItem}.api.json`,
+		{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
+	);
+	return fileContent.json();
+}

apps/website/src/util/fetchSitemap.ts

@@ -0,0 +1,26 @@
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { ENV } from './env';
+
+export async function fetchSitemap({
+	packageName,
+	version,
+}: {
+	readonly packageName: string;
+	readonly version: string;
+}) {
+	if (ENV.IS_LOCAL_DEV) {
+		const fileContent = await readFile(
+			join(process.cwd(), `../../packages/${packageName}/docs/split/${version}.sitemap.api.json`),
+			'utf8',
+		);
+		return JSON.parse(fileContent);
+	}
+
+	const isMainVersion = version === 'main';
+	const fileContent = await fetch(
+		`${process.env.BLOB_STORAGE_URL}/rewrite/${packageName}/${version}.sitemap.api.json`,
+		{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
+	);
+	return fileContent.json();
+}

apps/website/src/util/fetchVersions.ts

@@ -1,6 +1,11 @@
 import { sql } from '@vercel/postgres';
+import { ENV } from './env';
 
 export async function fetchVersions(packageName: string) {
+	if (ENV.IS_LOCAL_DEV) {
+		return [{ version: 'main' }];
+	}
+
 	try {
 		const { rows } = await sql<{
 			version: string;

package.json

@@ -51,7 +51,7 @@
 	"devDependencies": {
 		"@commitlint/cli": "^19.0.3",
 		"@commitlint/config-angular": "^19.0.3",
-		"@favware/cliff-jumper": "^2.2.3",
+		"@favware/cliff-jumper": "^3.0.0",
 		"@favware/npm-deprecate": "^1.0.7",
 		"@types/lodash.merge": "^4.6.9",
 		"@unocss/eslint-plugin": "^0.58.5",

packages/brokers/package.json

@@ -73,7 +73,7 @@
 	"devDependencies": {
 		"@discordjs/api-extractor": "workspace:^",
 		"@discordjs/scripts": "workspace:^",
-		"@favware/cliff-jumper": "^2.2.3",
+		"@favware/cliff-jumper": "^3.0.0",
 		"@types/node": "18.18.8",
 		"@vitest/coverage-v8": "^1.3.1",
 		"cross-env": "^7.0.3",

packages/builders/package.json

@@ -75,7 +75,7 @@
 	"devDependencies": {
 		"@discordjs/api-extractor": "workspace:^",
 		"@discordjs/scripts": "workspace:^",
-		"@favware/cliff-jumper": "^2.2.3",
+		"@favware/cliff-jumper": "^3.0.0",
 		"@types/node": "16.18.60",
 		"@vitest/coverage-v8": "^1.3.1",
 		"cross-env": "^7.0.3",

packages/collection/package.json

@@ -62,7 +62,7 @@
 	"devDependencies": {
 		"@discordjs/api-extractor": "workspace:^",
 		"@discordjs/scripts": "workspace:^",
-		"@favware/cliff-jumper": "^2.2.3",
+		"@favware/cliff-jumper": "^3.0.0",
 		"@types/node": "18.18.8",
 		"@vitest/coverage-v8": "^1.3.1",
 		"cross-env": "^7.0.3",