feat: local and preview detection

This commit is contained in:
iCrawl
2024-03-03 02:27:52 +01:00
parent 2848591e21
commit 79fbda3aac
33 changed files with 1069 additions and 1035 deletions

View File

@@ -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",

View File

@@ -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(
(

View File

@@ -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">

View File

@@ -1,6 +1,3 @@
// 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';
@@ -8,6 +5,8 @@ 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' },

View File

@@ -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: {

View File

@@ -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>

View File

@@ -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) => {

View File

@@ -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';

View File

@@ -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',
};

View File

@@ -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('.', '-')}`);
}

View File

@@ -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';

View File

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

View File

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

View File

@@ -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;