build(website): build site from db data

This commit is contained in:
iCrawl
2023-04-01 02:50:24 +02:00
parent 34bc36ac4b
commit 311cab2d3f
63 changed files with 740 additions and 641 deletions

View File

@@ -48,7 +48,7 @@
"@react-icons/all-files": "^4.1.0",
"@vercel/analytics": "^0.1.11",
"@vercel/edge-config": "^0.1.5",
"@vercel/og": "^0.4.2",
"@vercel/og": "^0.5.0",
"ariakit": "^2.0.0-next.43",
"cmdk": "^0.2.0",
"contentlayer": "^0.3.1",
@@ -71,16 +71,16 @@
"@next/bundle-analyzer": "^13.2.4",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/node": "18.15.10",
"@types/react": "^18.0.30",
"@types/node": "18.15.11",
"@types/react": "^18.0.31",
"@types/react-dom": "^18.0.11",
"@unocss/cli": "^0.50.6",
"@unocss/reset": "^0.50.6",
"@vitejs/plugin-react": "^3.1.0",
"@vitest/coverage-c8": "^0.29.8",
"concurrently": "^7.6.0",
"concurrently": "^8.0.1",
"cross-env": "^7.0.3",
"eslint": "^8.36.0",
"eslint": "^8.37.0",
"eslint-config-neon": "^0.1.41",
"eslint-formatter-pretty": "^5.0.0",
"happy-dom": "^8.9.0",
@@ -90,10 +90,10 @@
"lighthouse": "^10.1.0",
"prettier": "^2.8.7",
"prettier-plugin-astro": "^0.8.0",
"prettier-plugin-tailwindcss": "^0.2.5",
"typescript": "^5.0.2",
"prettier-plugin-tailwindcss": "^0.2.6",
"typescript": "^5.0.3",
"unocss": "^0.50.6",
"vercel": "^28.18.2",
"vercel": "^28.18.3",
"vitest": "^0.29.8"
},
"engines": {

View File

@@ -4,7 +4,7 @@ export default function Error({ error }: { error: Error }) {
console.error(error);
return (
<div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
<div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

View File

@@ -11,7 +11,7 @@ export default function GlobalError({ error }: { error: Error }) {
<body className="dark:bg-dark-800 bg-light-600">
<Providers>
<main className="mx-auto h-screen max-w-2xl">
<div className="mx-auto flex h-screen max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
<div className="mx-auto flex h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

View File

@@ -2,7 +2,7 @@ import Link from 'next/link';
export default function NotFound() {
return (
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
<Link

View File

@@ -3,7 +3,7 @@ import vercelLogo from '~/assets/powered-by-vercel.svg';
export default function Page() {
return (
<div className="mx-auto flex min-h-screen max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:place-content-center lg:py-0 lg:px-8">
<div className="mx-auto flex min-h-screen max-w-6xl flex-col place-items-center gap-12 px-8 py-16 lg:place-content-center lg:px-8 lg:py-0">
<div className="flex flex-row place-content-center">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"

View File

@@ -18,7 +18,7 @@ export function Navbar({ pages }: { pages?: MDXPage[] | undefined }) {
return (
<>
<header className="dark:bg-dark-400 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
<header className="dark:bg-dark-400 dark:border-dark-100 bg-light-600 border-light-800 fixed left-0 top-0 z-20 w-full border-b">
<div className="block h-16 px-6">
<div className="flex h-full flex-row place-content-between place-items-center">
<Button
@@ -55,7 +55,7 @@ export function Navbar({ pages }: { pages?: MDXPage[] | undefined }) {
</Button>
<Button
aria-label="Toggle theme"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
// onClick={() => toggleTheme()}
>
<VscColorMode size={24} />

View File

@@ -45,16 +45,16 @@ export function Outline({ headings }: { headings: MarkdownHeading[] }) {
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}
universal
>
<div className="flex flex-col break-all p-3 pb-8">
<div className="mt-4 ml-2 flex flex-row gap-2">
<div className="ml-2 mt-4 flex flex-row gap-2">
<VscListSelection size={25} />
<span className="font-semibold">Contents</span>
</div>
<div className="mt-4 ml-2 flex flex-col gap-2">
<div className="ml-2 mt-4 flex flex-col gap-2">
<div className="relative flex flex-col">
<div
className="bg-blurple absolute h-[10px] w-[10px] rounded-full border-2 border-black dark:border-white"

View File

@@ -1,7 +1,7 @@
export function PageButton({ url, title, direction }: { direction: 'next' | 'prev'; title: string; url: string }) {
return (
<a
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple flex transform-gpu cursor-pointer select-none appearance-none flex-row flex-col place-items-center gap-2 rounded py-3 px-4 leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple flex transform-gpu cursor-pointer select-none appearance-none flex-row flex-col place-items-center gap-2 rounded px-4 py-3 leading-none no-underline outline-0 focus:ring active:translate-y-px"
href={url}
>
<h3 className="text-md font-semibold">{title}</h3>

View File

@@ -4,7 +4,7 @@ import type { MDXPage } from './SidebarItems.jsx';
export function Sidebar({ pages, opened }: { opened: boolean; pages?: MDXPage[] | undefined }) {
return (
<nav
className={`h-[calc(100vh - 65px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[65px] left-0 bottom-0 z-20 w-full border-r bg-white ${
className={`h-[calc(100vh - 65px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed bottom-0 left-0 top-[65px] z-20 w-full border-r bg-white ${
opened ? 'block' : 'hidden'
} lg:w-76 lg:max-w-76 lg:block`}
>
@@ -13,7 +13,7 @@ export function Sidebar({ pages, opened }: { opened: boolean; pages?: MDXPage[]
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}
universal
>

View File

@@ -50,16 +50,17 @@
"@discordjs/ui": "workspace:^",
"@microsoft/api-extractor-model": "7.26.4",
"@microsoft/tsdoc": "0.14.2",
"@planetscale/database": "^1.6.0",
"@react-icons/all-files": "^4.1.0",
"@vercel/analytics": "^0.1.11",
"@vercel/edge-config": "^0.1.5",
"@vercel/og": "^0.4.2",
"@vercel/og": "^0.5.0",
"@vscode/codicons": "^0.0.32",
"ariakit": "^2.0.0-next.43",
"bright": "^0.7.0",
"cmdk": "^0.2.0",
"meilisearch": "^0.32.0",
"next": "^13.2.5-canary.20",
"next": "^13.2.5-canary.23",
"next-mdx-remote": "^4.4.1",
"next-themes": "^0.2.1",
"react": "^18.2.0",
@@ -77,26 +78,26 @@
"@next/bundle-analyzer": "^13.2.4",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/node": "18.15.10",
"@types/react": "^18.0.30",
"@types/node": "18.15.11",
"@types/react": "^18.0.31",
"@types/react-dom": "^18.0.11",
"@unocss/cli": "^0.50.6",
"@unocss/reset": "^0.50.6",
"@vitejs/plugin-react": "^3.1.0",
"@vitest/coverage-c8": "^0.29.8",
"concurrently": "^7.6.0",
"concurrently": "^8.0.1",
"cpy-cli": "^4.2.0",
"cross-env": "^7.0.3",
"eslint": "^8.36.0",
"eslint": "^8.37.0",
"eslint-config-neon": "^0.1.41",
"eslint-formatter-pretty": "^5.0.0",
"happy-dom": "^8.9.0",
"lighthouse": "^10.1.0",
"prettier": "^2.8.7",
"prettier-plugin-tailwindcss": "^0.2.5",
"typescript": "^5.0.2",
"prettier-plugin-tailwindcss": "^0.2.6",
"typescript": "^5.0.3",
"unocss": "^0.50.6",
"vercel": "^28.18.2",
"vercel": "^28.18.3",
"vitest": "^0.29.8"
},
"engines": {

View File

@@ -1,5 +1,8 @@
import { readFile } from 'node:fs/promises';
import { join } from 'node:path';
import { connect } from '@planetscale/database';
const sql = connect({ url: process.env.DATABASE_URL! });
export async function fetchVersions(packageName: string): Promise<string[]> {
const response = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`, {
@@ -24,9 +27,11 @@ export async function fetchModelJSON(packageName: string, version: string): Prom
}
}
const response = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${version}.api.json`, {
next: { revalidate: 3_600 },
});
const { rows } = await sql.execute('select data from documentation where name = ? and version = ?', [
packageName,
version,
]);
return response.json();
// @ts-expect-error: https://github.com/planetscale/database-js/issues/71
return rows[0].data;
}

View File

@@ -4,7 +4,7 @@ export default function Error({ error }: { error: Error }) {
console.error(error);
return (
<div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
<div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

View File

@@ -27,7 +27,7 @@ export default async function Page({ params }: { params: { package: string } })
const data = await getData(params.package);
return (
<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-col gap-8 py-6 px-4 lg:py-6 lg:px-6">
<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-col gap-8 px-4 py-6 lg:px-6 lg:py-6">
<h1 className="text-2xl font-semibold">Select a version:</h1>
<div className="flex flex-col gap-4">
{data.map((version, idx) => (

View File

@@ -10,7 +10,7 @@ export const runtime: ServerRuntime = 'edge';
export default function Page() {
return (
<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-col gap-8 py-6 px-4 lg:py-6 lg:px-6">
<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-col gap-8 px-4 py-6 lg:px-6 lg:py-6">
<h1 className="text-2xl font-semibold">Select a package:</h1>
<div className="flex flex-col gap-4">
<a

View File

@@ -4,7 +4,7 @@ export default function Error({ error }: { error: Error }) {
console.error(error);
return (
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

View File

@@ -11,7 +11,7 @@ export default function GlobalError({ error }: { error: Error }) {
<body className="dark:bg-dark-800 bg-light-600">
<Providers>
<main className="mx-auto min-h-screen max-w-2xl">
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

View File

@@ -2,7 +2,7 @@ import Link from 'next/link';
export default function NotFound() {
return (
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
<Link

View File

@@ -7,11 +7,11 @@ import { CODE_EXAMPLE } from '~/util/constants';
export default function Page() {
return (
<div className="mx-auto flex min-h-screen max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:place-content-center lg:py-0 lg:px-8">
<div className="mx-auto flex min-h-screen max-w-6xl flex-col place-items-center gap-12 px-8 py-16 lg:place-content-center lg:px-8 lg:py-0">
<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
<div className="flex max-w-lg flex-col gap-3 lg:mr-8">
<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
The <span className="bg-blurple relative rounded py-1 px-3 text-white">most popular</span> way to build
The <span className="bg-blurple relative rounded px-3 py-1 text-white">most popular</span> way to build
Discord <br /> bots.
</h1>
<p className="my-6 leading-normal text-neutral-700 dark:text-neutral-300">

View File

@@ -112,7 +112,7 @@ export function CmdKDialog() {
}, [search]);
return (
<Dialog className="fixed top-1/4 left-1/2 z-50 -translate-x-1/2" state={dialog!}>
<Dialog className="fixed left-1/2 top-1/4 z-50 -translate-x-1/2" state={dialog!}>
<Command
className="dark:bg-dark/50 min-w-xs sm:min-w-lg dark:border-dark-100 border-light-900 max-w-xs rounded border bg-white/50 shadow backdrop-blur-md sm:max-w-lg"
label="Command Menu"

View File

@@ -24,7 +24,7 @@ export function Nav({ members }: { members: SidebarSectionItemData[] }) {
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}
universal
>

View File

@@ -6,13 +6,13 @@ import { TableOfContentItems } from './TableOfContentItems';
export function Outline({ members }: { members: TableOfContentsSerialized[] }) {
return (
<aside className="dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[50px] right-0 bottom-0 z-20 hidden h-[calc(100vh_-_65px)] w-64 border-l bg-white pr-2 xl:block">
<aside className="dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed bottom-0 right-0 top-[50px] z-20 hidden h-[calc(100vh_-_65px)] w-64 border-l bg-white pr-2 xl:block">
<Scrollbars
autoHide
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}
universal
>

View File

@@ -87,7 +87,7 @@ export function TableOfContentItems({ serializedMembers }: TableOfContentsItemPr
return (
<div className="flex flex-col break-all p-3 pb-8">
<div className="mt-4 ml-2 flex flex-row gap-2">
<div className="ml-2 mt-4 flex flex-row gap-2">
<VscListSelection size={25} />
<span className="font-semibold">Contents</span>
</div>

View File

@@ -11,7 +11,7 @@ export default function ThemeSwitcher() {
return (
<Button
aria-label="Toggle theme"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
onClick={() => toggleTheme()}
>
<VscColorMode size={24} />