mirror of
https://github.com/discordjs/discord.js.git
synced 2026-03-09 16:13:31 +01:00
build(website): build site from db data
This commit is contained in:
@@ -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": {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
>
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
>
|
||||
|
||||
@@ -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
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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} />
|
||||
|
||||
Reference in New Issue
Block a user