Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-09 16:13:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(guide): next 13

Browse Source
This commit is contained in:
iCrawl
2023-03-25 22:52:47 +01:00
parent d9a9500b40
commit fbd599d586
42 changed files with 2145 additions and 1698 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/guide/.eslintrc.json
View File

@@ -1,11 +1,12 @@
{ {
"extends": ["../../.eslintrc.json", "neon/react", "neon/astro", "neon/prettier"], "extends": ["../../.eslintrc.json", "neon/react", "neon/next", "neon/edge", "neon/prettier"],
"settings": { "settings": {
"react": { "react": {
"version": "detect" "version": "detect"
} }
}, },
"rules": { "rules": {
"react/jsx-filename-extension": [1, { "extensions": [".tsx", ".astro"] }] "react/react-in-jsx-scope": 0,
"react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
} }
} }

4
apps/guide/.gitignore vendored
View File

@@ -13,13 +13,13 @@ pids
# Env # Env
.env .env
.env*.local
# Dist # Dist
dist/ dist/
typings/ typings/
.cache/ .cache/
build/ build/
api/
src/styles/unocss.css src/styles/unocss.css
.next/ .next/
@@ -28,4 +28,6 @@ src/styles/unocss.css
coverage/ coverage/
.vercel .vercel
public/searchIndex public/searchIndex
.vscode
lighthouse-results/ lighthouse-results/
.contentlayer

1
apps/guide/.prettierrc.cjs
View File

@@ -1,7 +1,6 @@
module.exports = { module.exports = {
...require('../../.prettierrc.json'), ...require('../../.prettierrc.json'),
plugins: [ plugins: [
'prettier-plugin-astro',
'prettier-plugin-tailwindcss', // MUST come last 'prettier-plugin-tailwindcss', // MUST come last
], ],
pluginSearchDirs: false, pluginSearchDirs: false,

117
apps/guide/astro.config.ts
View File

@@ -1,117 +0,0 @@
import { fileURLToPath, URL } from 'node:url';
import image from '@astrojs/image';
import mdx from '@astrojs/mdx';
import prefetch from '@astrojs/prefetch';
import react from '@astrojs/react';
import { remarkCodeHike } from '@code-hike/mdx';
import { defineConfig } from 'astro/config';
import compress from 'astro-compress';
import critters from 'astro-critters';
import { type Node, toString } from 'hast-util-to-string';
import { h } from 'hastscript';
import { escape } from 'html-escaper';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeSlug from 'rehype-slug';
import shikiThemeDarkPlus from 'shiki/themes/dark-plus.json' assert { type: 'json' };
import Unocss from 'unocss/astro';
const LinkIcon = h(
'svg',
{
width: '1rem',
height: '1rem',
viewBox: '0 0 24 24',
fill: 'none',
stroke: 'currentColor',
strokeWidth: '2',
strokeLinecap: 'round',
strokeLinejoin: 'round',
},
h('path', {
// eslint-disable-next-line id-length
d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
}),
h('path', {
// eslint-disable-next-line id-length
d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
}),
);
const createSROnlyLabel = (text: string) => {
const node = h('span.sr-only', `Section titled ${escape(text)}`);
node.properties!['is:raw'] = true;
return node;
};
const rootDir = new URL('../../', import.meta.url);
export default defineConfig({
integrations: [
react(),
mdx({
remarkPlugins: [[remarkCodeHike, { autoImport: false, theme: shikiThemeDarkPlus, lineNumbers: true }]],
rehypePlugins: [
rehypeSlug,
[
rehypeAutolinkHeadings,
{
properties: {
class:
'relative inline-flex w-6 h-6 place-items-center place-content-center outline-0 text-black dark:text-white ml-2',
},
behavior: 'after',
group: ({ tagName }: { tagName: string }) =>
h('div', {
class: `[&>*]:inline-block [&>h1]:m-0 [&>h2]:m-0 [&>h3]:m-0 [&>h4]:m-0 level-${tagName}`,
tabIndex: -1,
}),
content: (heading: Node) => [
h(
`span.anchor-icon`,
{
ariaHidden: 'true',
},
LinkIcon,
),
createSROnlyLabel(toString(heading)),
],
},
],
],
}),
image({
serviceEntryPoint: '@astrojs/image/sharp',
}),
prefetch({
throttle: 3,
}),
Unocss({
configFile: fileURLToPath(new URL('unocss.config.ts', rootDir)),
}),
critters(),
compress(),
],
markdown: {
syntaxHighlight: false,
},
vite: {
resolve: {
alias: {
'ariakit/button': fileURLToPath(new URL('node_modules/ariakit/esm/button/index.js', rootDir)),
'ariakit/disclosure': fileURLToPath(new URL('node_modules/ariakit/esm/disclosure/index.js', rootDir)),
'ariakit/separator': fileURLToPath(new URL('node_modules/ariakit/esm/separator/index.js', rootDir)),
'ariakit-utils/dom': fileURLToPath(new URL('node_modules/ariakit-utils/esm/dom.js', rootDir)),
'ariakit-utils/events': fileURLToPath(new URL('node_modules/ariakit-utils/esm/events.js', rootDir)),
'ariakit-utils/focus': fileURLToPath(new URL('node_modules/ariakit-utils/esm/focus.js', rootDir)),
'ariakit-utils/misc': fileURLToPath(new URL('node_modules/ariakit-utils/esm/misc.js', rootDir)),
'ariakit-utils/platform': fileURLToPath(new URL('node_modules/ariakit-utils/esm/platform.js', rootDir)),
'ariakit-react-utils/hooks': fileURLToPath(new URL('node_modules/ariakit-react-utils/esm/hooks.js', rootDir)),
'ariakit-react-utils/misc': fileURLToPath(new URL('node_modules/ariakit-react-utils/esm/misc.js', rootDir)),
'ariakit-react-utils/system': fileURLToPath(new URL('node_modules/ariakit-react-utils/esm/system.js', rootDir)),
'react-icons/fi': fileURLToPath(new URL('node_modules/react-icons/fi/index.esm.js', rootDir)),
'react-icons/vsc': fileURLToPath(new URL('node_modules/react-icons/vsc/index.esm.js', rootDir)),
'react-use': fileURLToPath(new URL('node_modules/react-use/esm/index.js', rootDir)),
},
},
},
});

101
apps/guide/contentlayer.config.ts Normal file
View File

@@ -0,0 +1,101 @@
import { remarkCodeHike } from '@code-hike/mdx';
import { defineDocumentType, makeSource } from 'contentlayer/source-files';
// import { type Node, toString } from 'hast-util-to-string';
// import { h } from 'hastscript';
// import { escape } from 'html-escaper';
// import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeSlug from 'rehype-slug';
import remarkGfm from 'remark-gfm';
import themeGitHubDarkDimmed from './src/assets/github-dark-dimmed.json';
export const Content = defineDocumentType(() => ({
name: 'Content',
filePathPattern: `**/*.mdx`,
contentType: 'mdx',
fields: {
title: {
type: 'string',
required: true,
},
summary: {
type: 'string',
},
image: {
type: 'string',
},
},
computedFields: {
slug: {
type: 'string',
resolve: (doc) => doc._raw.flattenedPath,
},
url: {
type: 'string',
resolve: (post) => `/posts/${post._raw.flattenedPath}`,
},
},
}));
// const LinkIcon = h(
// 'svg',
// {
// width: '1rem',
// height: '1rem',
// viewBox: '0 0 24 24',
// fill: 'none',
// stroke: 'currentColor',
// strokeWidth: '2',
// strokeLinecap: 'round',
// strokeLinejoin: 'round',
// },
// h('path', {
// // eslint-disable-next-line id-length
// d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
// }),
// h('path', {
// // eslint-disable-next-line id-length
// d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
// }),
// );
// const createSROnlyLabel = (text: any) => {
// const node = h('span.sr-only', `Section titled ${escape(text)}`);
// node.properties!['is:raw'] = true;
// return node;
// };
export default makeSource({
contentDirPath: 'src/content',
documentTypes: [Content],
mdx: {
remarkPlugins: [remarkGfm, [remarkCodeHike, { theme: themeGitHubDarkDimmed, lineNumbers: true }]],
rehypePlugins: [
rehypeSlug,
// [
// rehypeAutolinkHeadings,
// {
// properties: {
// class:
// 'relative inline-flex w-6 h-6 place-items-center place-content-center outline-0 text-black dark:text-white ml-2',
// },
// behavior: 'after',
// group: async ({ tagName }: { tagName: string }) =>
// h('div', {
// class: `[&>*]:inline-block [&>h1]:m-0 [&>h2]:m-0 [&>h3]:m-0 [&>h4]:m-0 level-${tagName}`,
// tabIndex: -1,
// }),
// content: (heading: Node) => [
// h(
// `span.anchor-icon`,
// {
// ariaHidden: 'true',
// },
// LinkIcon,
// ),
// createSROnlyLabel(toString(heading)),
// ],
// },
// ],
],
},
});

5
apps/guide/next-env.d.ts vendored Normal file
View File

@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

32
apps/guide/next.config.js Normal file
View File

@@ -0,0 +1,32 @@
// import { fileURLToPath } from 'node:url';
// import bundleAnalyzer from '@next/bundle-analyzer';
// import { withContentlayer } from 'next-contentlayer';
const { fileURLToPath } = require('node:url');
const bundleAnalyzer = require('@next/bundle-analyzer');
const { withContentlayer } = require('next-contentlayer');
const withBundleAnalyzer = bundleAnalyzer({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withContentlayer(
withBundleAnalyzer({
reactStrictMode: true,
eslint: {
ignoreDuringBuilds: true,
},
// Until Next.js fixes their type issues
typescript: {
ignoreBuildErrors: true,
},
experimental: {
appDir: true,
fallbackNodePolyfills: false,
},
images: {
dangerouslyAllowSVG: true,
contentDispositionType: 'attachment',
contentSecurityPolicy: "default-src 'self'; frame-src 'none'; sandbox;",
},
}),
);

47
apps/guide/package.json
View File

@@ -7,14 +7,20 @@
"test": "vitest run", "test": "vitest run",
"test:lighthouse": "lighthouse http://localhost:3000 --output-path=./lighthouse-results", "test:lighthouse": "lighthouse http://localhost:3000 --output-path=./lighthouse-results",
"build:local": "yarn build:prod", "build:local": "yarn build:prod",
"build:prod": "yarn workspaces foreach -ptR run build && astro build", "build:prod": "yarn workspaces foreach -ptR run build && yarn build:css && yarn build:next",
"dev": "yarn workspaces foreach -ptR run build && astro dev", "build:next": "next build",
"preview": "astro preview", "build:css": "yarn generate:css",
"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro --format=pretty", "build:analyze": "cross-env-shell ANALYZE=true yarn build:prod",
"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro --fix --format=pretty", "preview": "next start",
"dev": "concurrently 'yarn dev:css' 'yarn dev:next'",
"dev:next": "next dev",
"dev:css": "yarn generate:css --watch",
"generate:css": "unocss 'src/**/*.tsx' '../../packages/ui/src/lib/components/**/*.tsx' --out-file ./src/styles/unocss.css --config ../../unocss.config.ts",
"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --format=pretty",
"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --fix --format=pretty",
"fmt": "yarn format" "fmt": "yarn format"
}, },
"type": "module", "type": "commonjs",
"contributors": [ "contributors": [
"Crawl <icrawltogo@gmail.com>" "Crawl <icrawltogo@gmail.com>"
], ],
@@ -40,31 +46,38 @@
"@code-hike/mdx": "^0.8.1", "@code-hike/mdx": "^0.8.1",
"@discordjs/ui": "workspace:^", "@discordjs/ui": "workspace:^",
"@vercel/analytics": "^0.1.11", "@vercel/analytics": "^0.1.11",
"@vercel/edge-config": "^0.1.5",
"@vercel/og": "^0.4.1",
"ariakit": "^2.0.0-next.43", "ariakit": "^2.0.0-next.43",
"cmdk": "^0.2.0",
"contentlayer": "^0.3.0",
"next": "^13.2.4",
"next-contentlayer": "^0.3.0",
"next-themes": "^0.2.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-custom-scrollbars-2": "^4.5.0", "react-custom-scrollbars-2": "^4.5.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-icons": "^4.8.0", "react-icons": "^4.8.0",
"react-use": "^17.4.0" "react-use": "^17.4.0",
"rehype-autolink-headings": "^6.1.1",
"rehype-ignore": "^1.0.4",
"rehype-raw": "^6.1.1",
"rehype-slug": "^5.1.0",
"remark-gfm": "^3.0.1",
"sharp": "^0.32.0"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/image": "^0.16.2", "@next/bundle-analyzer": "^13.2.4",
"@astrojs/mdx": "^0.18.2",
"@astrojs/prefetch": "^0.2.1",
"@astrojs/react": "^2.1.0",
"@testing-library/react": "^14.0.0", "@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3", "@testing-library/user-event": "^14.4.3",
"@types/node": "18.15.9", "@types/node": "18.15.9",
"@types/react": "^18.0.29", "@types/react": "^18.0.29",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"@types/react-syntax-highlighter": "^15.5.6",
"@unocss/cli": "^0.50.6", "@unocss/cli": "^0.50.6",
"@unocss/reset": "^0.50.6", "@unocss/reset": "^0.50.6",
"@vitejs/plugin-react": "^3.1.0", "@vitejs/plugin-react": "^3.1.0",
"@vitest/coverage-c8": "^0.29.7", "@vitest/coverage-c8": "^0.29.7",
"astro": "^2.1.7", "concurrently": "^7.6.0",
"astro-compress": "^1.1.35",
"astro-critters": "^1.1.31",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^8.36.0", "eslint": "^8.36.0",
"eslint-config-neon": "^0.1.41", "eslint-config-neon": "^0.1.41",
@@ -77,10 +90,6 @@
"prettier": "^2.8.7", "prettier": "^2.8.7",
"prettier-plugin-astro": "^0.8.0", "prettier-plugin-astro": "^0.8.0",
"prettier-plugin-tailwindcss": "^0.2.5", "prettier-plugin-tailwindcss": "^0.2.5",
"rehype-autolink-headings": "^6.1.1",
"rehype-slug": "^5.1.0",
"sharp": "^0.32.0",
"shiki": "^0.14.1",
"typescript": "^5.0.2", "typescript": "^5.0.2",
"unocss": "^0.50.6", "unocss": "^0.50.6",
"vercel": "^28.18.1", "vercel": "^28.18.1",

12
apps/guide/src/app/error.tsx Normal file
View File

@@ -0,0 +1,12 @@
'use client';
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">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>
);
}

23
apps/guide/src/app/global-error.tsx Normal file
View File

@@ -0,0 +1,23 @@
'use client';
import { Providers } from './providers';
import { inter } from '~/util/fonts';
export default function GlobalError({ error }: { error: Error }) {
console.error(error);
return (
<html className={inter.variable} lang="en" suppressHydrationWarning>
<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">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>
</main>
</Providers>
</body>
</html>
);
}

21
apps/guide/src/app/guide/[[...slug]]/page.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { allContents } from 'contentlayer/generated';
import { notFound } from 'next/navigation';
import { Mdx } from '~/components/Mdx';
export async function generateStaticParams() {
return allContents.map((content) => ({ slug: content.slug }));
}
export default function Page({ params }: { params: { slug: string[] } }) {
const content = allContents.find((content) => content.slug === params.slug?.join('/'));
if (!content) {
notFound();
}
return (
<article className="prose mx-auto max-w-4xl py-8">
<Mdx code={content?.body.code ?? ''} />
</article>
);
}

82
apps/guide/src/app/layout.tsx Normal file
View File

@@ -0,0 +1,82 @@
import { Analytics } from '@vercel/analytics/react';
import type { Metadata } from 'next/types';
import type { PropsWithChildren } from 'react';
import { Providers } from './providers';
import { DESCRIPTION } from '~/util/constants';
import { inter, jetBrainsMono } from '~/util/fonts';
import '@unocss/reset/tailwind-compat.css';
import '~/styles/unocss.css';
import '~/styles/cmdk.css';
import '@code-hike/mdx/styles.css';
import '~/styles/main.css';
export const metadata: Metadata = {
title: 'discord.js',
description: DESCRIPTION,
viewport: {
minimumScale: 1,
initialScale: 1,
width: 'device-width',
},
icons: {
other: [
{
url: '/favicon-32x32.png',
sizes: '32x32',
type: 'image/png',
},
{
url: '/favicon-16x16.png',
sizes: '16x16',
type: 'image/png',
},
],
apple: [
'/apple-touch-icon.png',
{
url: '/safari-pinned-tab.svg',
rel: 'mask-icon',
},
],
},
manifest: '/site.webmanifest',
themeColor: '#5865f2',
colorScheme: 'light dark',
appleWebApp: {
title: 'discord.js',
},
applicationName: 'discord.js',
openGraph: {
siteName: 'discord.js',
type: 'website',
title: 'discord.js',
description: DESCRIPTION,
images: 'https://discordjs.dev/api/open-graph.png',
},
twitter: {
card: 'summary_large_image',
creator: '@iCrawlToGo',
},
other: {
'msapplication-TileColor': '#090a16',
},
};
export default function RootLayout({ children }: PropsWithChildren) {
return (
<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
<body className="dark:bg-dark-800 bg-light-600">
<Providers>{children}</Providers>
<Analytics />
</body>
</html>
);
}

20
apps/guide/src/app/loading.tsx Normal file
View File

@@ -0,0 +1,20 @@
export default function Loading() {
return (
<div className="mx-4 flex min-h-screen flex-col items-center justify-center gap-4">
<svg
className="h-9 w-9 animate-spin text-black dark:text-white"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-75 dark:opacity-100"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
fill="currentColor"
/>
</svg>
<div className="text-lg font-medium">Loading...</div>
</div>
);
}

16
apps/guide/src/app/not-found.tsx Normal file
View File

@@ -0,0 +1,16 @@
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">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
<Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
href="/docs/packages"
>
Take me back
</Link>
</div>
);
}

26
apps/guide/src/app/page.tsx Normal file
View File

@@ -0,0 +1,26 @@
import Image from 'next/image';
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="flex flex-row place-content-center">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
rel="noopener noreferrer"
target="_blank"
title="Vercel"
>
<Image
alt="Vercel"
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
placeholder="blur"
priority
src={vercelLogo}
/>
</a>
</div>
</div>
);
}

8
apps/guide/src/app/providers.tsx Normal file
View File

@@ -0,0 +1,8 @@
'use client';
import { ThemeProvider } from 'next-themes';
import type { PropsWithChildren } from 'react';
export function Providers({ children }: PropsWithChildren) {
return <ThemeProvider attribute="class">{children}</ThemeProvider>;
}

597
apps/guide/src/assets/github-dark-dimmed.json Normal file
View File

@@ -0,0 +1,597 @@
{
"name": "github-dark-dimmed",
"colors": {
"focusBorder": "#316dca",
"foreground": "#adbac7",
"descriptionForeground": "#768390",
"errorForeground": "#e5534b",
"textLink.foreground": "#539bf5",
"textLink.activeForeground": "#539bf5",
"textBlockQuote.background": "#1c2128",
"textBlockQuote.border": "#444c56",
"textCodeBlock.background": "#636e7b66",
"textPreformat.foreground": "#768390",
"textSeparator.foreground": "#373e47",
"icon.foreground": "#768390",
"keybindingLabel.foreground": "#adbac7",
"button.background": "#347d39",
"button.foreground": "#ffffff",
"button.hoverBackground": "#46954a",
"button.secondaryBackground": "#3d444d",
"button.secondaryForeground": "#adbac7",
"button.secondaryHoverBackground": "#444c56",
"checkbox.background": "#2d333b",
"checkbox.border": "#444c56",
"dropdown.background": "#2d333b",
"dropdown.border": "#444c56",
"dropdown.foreground": "#adbac7",
"dropdown.listBackground": "#2d333b",
"input.background": "#22272e",
"input.border": "#444c56",
"input.foreground": "#adbac7",
"input.placeholderForeground": "#636e7b",
"badge.foreground": "#cdd9e5",
"badge.background": "#316dca",
"progressBar.background": "#316dca",
"titleBar.activeForeground": "#768390",
"titleBar.activeBackground": "#22272e",
"titleBar.inactiveForeground": "#768390",
"titleBar.inactiveBackground": "#1c2128",
"titleBar.border": "#444c56",
"activityBar.foreground": "#adbac7",
"activityBar.inactiveForeground": "#768390",
"activityBar.background": "#22272e",
"activityBarBadge.foreground": "#cdd9e5",
"activityBarBadge.background": "#316dca",
"activityBar.activeBorder": "#ec775c",
"activityBar.border": "#444c56",
"sideBar.foreground": "#adbac7",
"sideBar.background": "#1c2128",
"sideBar.border": "#444c56",
"sideBarTitle.foreground": "#adbac7",
"sideBarSectionHeader.foreground": "#adbac7",
"sideBarSectionHeader.background": "#1c2128",
"sideBarSectionHeader.border": "#444c56",
"list.hoverForeground": "#adbac7",
"list.inactiveSelectionForeground": "#adbac7",
"list.activeSelectionForeground": "#adbac7",
"list.hoverBackground": "#636e7b1a",
"list.inactiveSelectionBackground": "#636e7b66",
"list.activeSelectionBackground": "#636e7b66",
"list.focusForeground": "#adbac7",
"list.focusBackground": "#4184e426",
"list.inactiveFocusBackground": "#4184e426",
"list.highlightForeground": "#539bf5",
"tree.indentGuidesStroke": "#373e47",
"notificationCenterHeader.foreground": "#768390",
"notificationCenterHeader.background": "#2d333b",
"notifications.foreground": "#adbac7",
"notifications.background": "#2d333b",
"notifications.border": "#444c56",
"notificationsErrorIcon.foreground": "#e5534b",
"notificationsWarningIcon.foreground": "#c69026",
"notificationsInfoIcon.foreground": "#539bf5",
"pickerGroup.border": "#444c56",
"pickerGroup.foreground": "#768390",
"quickInput.background": "#2d333b",
"quickInput.foreground": "#adbac7",
"statusBar.foreground": "#768390",
"statusBar.background": "#22272e",
"statusBar.border": "#444c56",
"statusBar.focusBorder": "#316dca80",
"statusBar.noFolderBackground": "#22272e",
"statusBar.debuggingForeground": "#cdd9e5",
"statusBar.debuggingBackground": "#c93c37",
"statusBarItem.prominentBackground": "#636e7b66",
"statusBarItem.remoteForeground": "#adbac7",
"statusBarItem.remoteBackground": "#444c56",
"statusBarItem.hoverBackground": "#adbac714",
"statusBarItem.activeBackground": "#adbac71f",
"statusBarItem.focusBorder": "#316dca",
"editorGroupHeader.tabsBackground": "#1c2128",
"editorGroupHeader.tabsBorder": "#444c56",
"editorGroup.border": "#444c56",
"tab.activeForeground": "#adbac7",
"tab.inactiveForeground": "#768390",
"tab.inactiveBackground": "#1c2128",
"tab.activeBackground": "#22272e",
"tab.hoverBackground": "#22272e",
"tab.unfocusedHoverBackground": "#636e7b1a",
"tab.border": "#444c56",
"tab.unfocusedActiveBorderTop": "#444c56",
"tab.activeBorder": "#22272e",
"tab.unfocusedActiveBorder": "#22272e",
"tab.activeBorderTop": "#ec775c",
"breadcrumb.foreground": "#768390",
"breadcrumb.focusForeground": "#adbac7",
"breadcrumb.activeSelectionForeground": "#768390",
"breadcrumbPicker.background": "#2d333b",
"editor.foreground": "#adbac7",
"editor.background": "#22272e",
"editorWidget.background": "#2d333b",
"editor.foldBackground": "#636e7b1a",
"editor.lineHighlightBackground": "#636e7b1a",
"editorLineNumber.foreground": "#636e7b",
"editorLineNumber.activeForeground": "#adbac7",
"editorIndentGuide.background": "#adbac71f",
"editorIndentGuide.activeBackground": "#adbac73d",
"editorWhitespace.foreground": "#545d68",
"editorCursor.foreground": "#539bf5",
"editor.findMatchBackground": "#966600",
"editor.findMatchHighlightBackground": "#eac55f80",
"editor.linkedEditingBackground": "#539bf512",
"editor.selectionHighlightBackground": "#57ab5a40",
"editor.wordHighlightBackground": "#636e7b80",
"editor.wordHighlightBorder": "#636e7b99",
"editor.wordHighlightStrongBackground": "#636e7b4d",
"editor.wordHighlightStrongBorder": "#636e7b99",
"editorBracketMatch.background": "#57ab5a40",
"editorBracketMatch.border": "#57ab5a99",
"editorInlayHint.background": "#76839033",
"editorInlayHint.foreground": "#768390",
"editorInlayHint.typeBackground": "#76839033",
"editorInlayHint.typeForeground": "#768390",
"editorInlayHint.paramBackground": "#76839033",
"editorInlayHint.paramForeground": "#768390",
"editorGutter.modifiedBackground": "#ae7c1466",
"editorGutter.addedBackground": "#46954a66",
"editorGutter.deletedBackground": "#e5534b66",
"diffEditor.insertedLineBackground": "#347d3926",
"diffEditor.insertedTextBackground": "#57ab5a4d",
"diffEditor.removedLineBackground": "#c93c3726",
"diffEditor.removedTextBackground": "#f470674d",
"scrollbar.shadow": "#545d6833",
"scrollbarSlider.background": "#76839033",
"scrollbarSlider.hoverBackground": "#7683903d",
"scrollbarSlider.activeBackground": "#76839047",
"editorOverviewRuler.border": "#1c2128",
"minimapSlider.background": "#76839033",
"minimapSlider.hoverBackground": "#7683903d",
"minimapSlider.activeBackground": "#76839047",
"panel.background": "#1c2128",
"panel.border": "#444c56",
"panelTitle.activeBorder": "#ec775c",
"panelTitle.activeForeground": "#adbac7",
"panelTitle.inactiveForeground": "#768390",
"panelInput.border": "#444c56",
"debugIcon.breakpointForeground": "#e5534b",
"debugConsole.infoForeground": "#768390",
"debugConsole.warningForeground": "#c69026",
"debugConsole.errorForeground": "#ff938a",
"debugConsole.sourceForeground": "#daaa3f",
"debugConsoleInputIcon.foreground": "#b083f0",
"debugTokenExpression.name": "#6cb6ff",
"debugTokenExpression.value": "#96d0ff",
"debugTokenExpression.string": "#96d0ff",
"debugTokenExpression.boolean": "#6bc46d",
"debugTokenExpression.number": "#6bc46d",
"debugTokenExpression.error": "#ff938a",
"symbolIcon.arrayForeground": "#e0823d",
"symbolIcon.booleanForeground": "#539bf5",
"symbolIcon.classForeground": "#e0823d",
"symbolIcon.colorForeground": "#6cb6ff",
"symbolIcon.constructorForeground": "#dcbdfb",
"symbolIcon.enumeratorForeground": "#e0823d",
"symbolIcon.enumeratorMemberForeground": "#539bf5",
"symbolIcon.eventForeground": "#636e7b",
"symbolIcon.fieldForeground": "#e0823d",
"symbolIcon.fileForeground": "#c69026",
"symbolIcon.folderForeground": "#c69026",
"symbolIcon.functionForeground": "#b083f0",
"symbolIcon.interfaceForeground": "#e0823d",
"symbolIcon.keyForeground": "#539bf5",
"symbolIcon.keywordForeground": "#f47067",
"symbolIcon.methodForeground": "#b083f0",
"symbolIcon.moduleForeground": "#f47067",
"symbolIcon.namespaceForeground": "#f47067",
"symbolIcon.nullForeground": "#539bf5",
"symbolIcon.numberForeground": "#57ab5a",
"symbolIcon.objectForeground": "#e0823d",
"symbolIcon.operatorForeground": "#6cb6ff",
"symbolIcon.packageForeground": "#e0823d",
"symbolIcon.propertyForeground": "#e0823d",
"symbolIcon.referenceForeground": "#539bf5",
"symbolIcon.snippetForeground": "#539bf5",
"symbolIcon.stringForeground": "#6cb6ff",
"symbolIcon.structForeground": "#e0823d",
"symbolIcon.textForeground": "#6cb6ff",
"symbolIcon.typeParameterForeground": "#6cb6ff",
"symbolIcon.unitForeground": "#539bf5",
"symbolIcon.variableForeground": "#e0823d",
"symbolIcon.constantForeground": [
"#b4f1b4",
"#8ddb8c",
"#6bc46d",
"#57ab5a",
"#46954a",
"#347d39",
"#2b6a30",
"#245829",
"#1b4721",
"#113417"
],
"terminal.foreground": "#adbac7",
"terminal.ansiBlack": "#545d68",
"terminal.ansiRed": "#f47067",
"terminal.ansiGreen": "#57ab5a",
"terminal.ansiYellow": "#c69026",
"terminal.ansiBlue": "#539bf5",
"terminal.ansiMagenta": "#b083f0",
"terminal.ansiCyan": "#39c5cf",
"terminal.ansiWhite": "#909dab",
"terminal.ansiBrightBlack": "#636e7b",
"terminal.ansiBrightRed": "#ff938a",
"terminal.ansiBrightGreen": "#6bc46d",
"terminal.ansiBrightYellow": "#daaa3f",
"terminal.ansiBrightBlue": "#6cb6ff",
"terminal.ansiBrightMagenta": "#dcbdfb",
"terminal.ansiBrightCyan": "#56d4dd",
"terminal.ansiBrightWhite": "#cdd9e5",
"editorBracketHighlight.foreground1": "#6cb6ff",
"editorBracketHighlight.foreground2": "#6bc46d",
"editorBracketHighlight.foreground3": "#daaa3f",
"editorBracketHighlight.foreground4": "#ff938a",
"editorBracketHighlight.foreground5": "#fc8dc7",
"editorBracketHighlight.foreground6": "#dcbdfb",
"editorBracketHighlight.unexpectedBracket.foreground": "#768390",
"gitDecoration.addedResourceForeground": "#57ab5a",
"gitDecoration.modifiedResourceForeground": "#c69026",
"gitDecoration.deletedResourceForeground": "#e5534b",
"gitDecoration.untrackedResourceForeground": "#57ab5a",
"gitDecoration.ignoredResourceForeground": "#636e7b",
"gitDecoration.conflictingResourceForeground": "#cc6b2c",
"gitDecoration.submoduleResourceForeground": "#768390",
"debugToolBar.background": "#2d333b",
"editor.stackFrameHighlightBackground": "#ae7c1466",
"editor.focusedStackFrameHighlightBackground": "#46954a66",
"peekViewEditor.matchHighlightBackground": "#ae7c1466",
"peekViewResult.matchHighlightBackground": "#ae7c1466",
"peekViewEditor.background": "#636e7b1a",
"peekViewResult.background": "#22272e",
"settings.headerForeground": "#adbac7",
"settings.modifiedItemIndicator": "#ae7c1466",
"welcomePage.buttonBackground": "#373e47",
"welcomePage.buttonHoverBackground": "#444c56"
},
"semanticHighlighting": true,
"tokenColors": [
{
"scope": ["comment", "punctuation.definition.comment", "string.comment"],
"settings": {
"foreground": "#768390"
}
},
{
"scope": ["constant.other.placeholder", "constant.character"],
"settings": {
"foreground": "#f47067"
}
},
{
"scope": [
"constant",
"entity.name.constant",
"variable.other.constant",
"variable.other.enummember",
"variable.language",
"entity"
],
"settings": {
"foreground": "#6cb6ff"
}
},
{
"scope": ["entity.name", "meta.export.default", "meta.definition.variable"],
"settings": {
"foreground": "#f69d50"
}
},
{
"scope": [
"variable.parameter.function",
"meta.jsx.children",
"meta.block",
"meta.tag.attributes",
"entity.name.constant",
"meta.object.member",
"meta.embedded.expression"
],
"settings": {
"foreground": "#adbac7"
}
},
{
"scope": "entity.name.function",
"settings": {
"foreground": "#dcbdfb"
}
},
{
"scope": ["entity.name.tag", "support.class.component"],
"settings": {
"foreground": "#8ddb8c"
}
},
{
"scope": "keyword",
"settings": {
"foreground": "#f47067"
}
},
{
"scope": ["storage", "storage.type"],
"settings": {
"foreground": "#f47067"
}
},
{
"scope": ["storage.modifier.package", "storage.modifier.import", "storage.type.java"],
"settings": {
"foreground": "#adbac7"
}
},
{
"scope": ["string", "string punctuation.section.embedded source"],
"settings": {
"foreground": "#96d0ff"
}
},
{
"scope": "support",
"settings": {
"foreground": "#6cb6ff"
}
},
{
"scope": "meta.property-name",
"settings": {
"foreground": "#6cb6ff"
}
},
{
"scope": "variable",
"settings": {
"foreground": "#f69d50"
}
},
{
"scope": "variable.other",
"settings": {
"foreground": "#adbac7"
}
},
{
"scope": "invalid.broken",
"settings": {
"fontStyle": "italic",
"foreground": "#ff938a"
}
},
{
"scope": "invalid.deprecated",
"settings": {
"fontStyle": "italic",
"foreground": "#ff938a"
}
},
{
"scope": "invalid.illegal",
"settings": {
"fontStyle": "italic",
"foreground": "#ff938a"
}
},
{
"scope": "invalid.unimplemented",
"settings": {
"fontStyle": "italic",
"foreground": "#ff938a"
}
},
{
"scope": "carriage-return",
"settings": {
"fontStyle": "italic underline",
"background": "#f47067",
"foreground": "#cdd9e5",
"content": "^M"
}
},
{
"scope": "message.error",
"settings": {
"foreground": "#ff938a"
}
},
{
"scope": "string variable",
"settings": {
"foreground": "#6cb6ff"
}
},
{
"scope": ["source.regexp", "string.regexp"],
"settings": {
"foreground": "#96d0ff"
}
},
{
"scope": [
"string.regexp.character-class",
"string.regexp constant.character.escape",
"string.regexp source.ruby.embedded",
"string.regexp string.regexp.arbitrary-repitition"
],
"settings": {
"foreground": "#96d0ff"
}
},
{
"scope": "string.regexp constant.character.escape",
"settings": {
"fontStyle": "bold",
"foreground": "#8ddb8c"
}
},
{
"scope": "support.constant",
"settings": {
"foreground": "#6cb6ff"
}
},
{
"scope": "support.variable",
"settings": {
"foreground": "#6cb6ff"
}
},
{
"scope": "support.type.property-name.json",
"settings": {
"foreground": "#8ddb8c"
}
},
{
"scope": "meta.module-reference",
"settings": {
"foreground": "#6cb6ff"
}
},
{
"scope": "punctuation.definition.list.begin.markdown",
"settings": {
"foreground": "#f69d50"
}
},
{
"scope": ["markup.heading", "markup.heading entity.name"],
"settings": {
"fontStyle": "bold",
"foreground": "#6cb6ff"
}
},
{
"scope": "markup.quote",
"settings": {
"foreground": "#8ddb8c"
}
},
{
"scope": "markup.italic",
"settings": {
"fontStyle": "italic",
"foreground": "#adbac7"
}
},
{
"scope": "markup.bold",
"settings": {
"fontStyle": "bold",
"foreground": "#adbac7"
}
},
{
"scope": ["markup.underline"],
"settings": {
"fontStyle": "underline"
}
},
{
"scope": ["markup.strikethrough"],
"settings": {
"fontStyle": "strikethrough"
}
},
{
"scope": "markup.inline.raw",
"settings": {
"foreground": "#6cb6ff"
}
},
{
"scope": ["markup.deleted", "meta.diff.header.from-file", "punctuation.definition.deleted"],
"settings": {
"background": "#5d0f12",
"foreground": "#ff938a"
}
},
{
"scope": ["punctuation.section.embedded"],
"settings": {
"foreground": "#f47067"
}
},
{
"scope": ["markup.inserted", "meta.diff.header.to-file", "punctuation.definition.inserted"],
"settings": {
"background": "#113417",
"foreground": "#8ddb8c"
}
},
{
"scope": ["markup.changed", "punctuation.definition.changed"],
"settings": {
"background": "#682d0f",
"foreground": "#f69d50"
}
},
{
"scope": ["markup.ignored", "markup.untracked"],
"settings": {
"foreground": "#2d333b",
"background": "#6cb6ff"
}
},
{
"scope": "meta.diff.range",
"settings": {
"foreground": "#dcbdfb",
"fontStyle": "bold"
}
},
{
"scope": "meta.diff.header",
"settings": {
"foreground": "#6cb6ff"
}
},
{
"scope": "meta.separator",
"settings": {
"fontStyle": "bold",
"foreground": "#6cb6ff"
}
},
{
"scope": "meta.output",
"settings": {
"foreground": "#6cb6ff"
}
},
{
"scope": [
"brackethighlighter.tag",
"brackethighlighter.curly",
"brackethighlighter.round",
"brackethighlighter.square",
"brackethighlighter.angle",
"brackethighlighter.quote"
],
"settings": {
"foreground": "#768390"
}
},
{
"scope": "brackethighlighter.unmatched",
"settings": {
"foreground": "#ff938a"
}
},
{
"scope": ["constant.other.reference.link", "string.other.link"],
"settings": {
"foreground": "#96d0ff"
}
}
]
}

1
apps/guide/src/assets/powered-by-vercel.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="212" height="44" fill="none"><rect width="212" height="44" fill="#000" rx="8"/><path fill="#fff" d="M60.438 15.227V26.5h1.406v-4.023h2.836c2.117 0 3.625-1.493 3.625-3.602 0-2.148-1.477-3.648-3.61-3.648h-4.257Zm1.406 1.25h2.484c1.633 0 2.531.851 2.531 2.398 0 1.492-.93 2.352-2.53 2.352h-2.485v-4.75Zm11.5 10.171c2.399 0 3.883-1.656 3.883-4.359 0-2.71-1.484-4.36-3.883-4.36-2.398 0-3.883 1.65-3.883 4.36 0 2.703 1.485 4.36 3.883 4.36Zm0-1.21c-1.594 0-2.492-1.157-2.492-3.149 0-2 .898-3.148 2.492-3.148 1.594 0 2.492 1.148 2.492 3.148 0 1.992-.898 3.148-2.492 3.148Zm15.954-7.36h-1.352l-1.656 6.735h-.125l-1.883-6.735h-1.29l-1.882 6.735h-.125l-1.656-6.735h-1.36l2.36 8.422h1.36l1.874-6.516h.125l1.883 6.516h1.367l2.36-8.422Zm4.523 1.04c1.336 0 2.227.984 2.258 2.476h-4.64c.101-1.492 1.039-2.477 2.382-2.477Zm2.219 5.202c-.352.742-1.086 1.14-2.172 1.14-1.43 0-2.36-1.054-2.43-2.718v-.062h6.055v-.516c0-2.617-1.383-4.234-3.656-4.234-2.313 0-3.797 1.718-3.797 4.367 0 2.664 1.46 4.351 3.797 4.351 1.844 0 3.156-.89 3.547-2.328H96.04Zm3.242 2.18h1.344v-5.219c0-1.187.93-2.047 2.211-2.047.266 0 .75.047.86.078V17.97a5.77 5.77 0 0 0-.672-.04c-1.117 0-2.086.579-2.336 1.4h-.125v-1.25h-1.281V26.5Zm8.899-7.383c1.336 0 2.227.985 2.258 2.477h-4.641c.102-1.492 1.04-2.477 2.383-2.477Zm2.219 5.203c-.352.742-1.086 1.14-2.172 1.14-1.43 0-2.359-1.054-2.43-2.718v-.062h6.055v-.516c0-2.617-1.383-4.234-3.656-4.234-2.313 0-3.797 1.718-3.797 4.367 0 2.664 1.461 4.351 3.797 4.351 1.844 0 3.156-.89 3.547-2.328H110.4Zm6.36 2.328c1.164 0 2.164-.554 2.695-1.492h.125V26.5h1.281V14.734h-1.343v4.672h-.118c-.476-.922-1.468-1.476-2.64-1.476-2.141 0-3.539 1.718-3.539 4.36 0 2.648 1.382 4.358 3.539 4.358Zm.312-7.507c1.524 0 2.477 1.218 2.477 3.148 0 1.945-.946 3.148-2.477 3.148-1.539 0-2.461-1.18-2.461-3.148 0-1.96.93-3.148 2.461-3.148Zm14.462 7.507c2.133 0 3.531-1.726 3.531-4.359 0-2.648-1.391-4.36-3.531-4.36-1.156 0-2.18.571-2.641 1.477h-.125v-4.672h-1.344V26.5h1.282v-1.344h.125c.531.938 1.531 1.492 2.703 1.492Zm-.313-7.507c1.539 0 2.453 1.18 2.453 3.148 0 1.969-.914 3.148-2.453 3.148-1.531 0-2.484-1.203-2.484-3.148s.953-3.148 2.484-3.148Zm6.04 10.406c1.492 0 2.164-.578 2.882-2.531l3.29-8.938h-1.43l-2.305 6.93h-.125l-2.312-6.93h-1.453l3.117 8.43-.157.5c-.351 1.015-.773 1.383-1.546 1.383-.188 0-.399-.008-.563-.04V29.5c.188.031.422.047.602.047Zm17.391-3.047 3.898-11.273h-2.148l-2.813 8.921h-.132l-2.836-8.921h-2.227l3.938 11.273h2.32Zm8.016-7.18c1.164 0 1.93.813 1.969 2.078h-4.024c.086-1.25.899-2.078 2.055-2.078Zm1.984 4.828c-.281.633-.945.985-1.906.985-1.273 0-2.094-.89-2.141-2.313v-.101h5.969v-.625c0-2.696-1.461-4.313-3.898-4.313-2.477 0-4.016 1.727-4.016 4.477s1.516 4.414 4.031 4.414c2.016 0 3.446-.969 3.797-2.524h-1.836Zm3.547 2.352h1.938v-4.938c0-1.195.875-1.976 2.133-1.976.328 0 .843.055.992.11v-1.798c-.18-.054-.524-.085-.805-.085-1.101 0-2.023.625-2.258 1.468h-.132v-1.328h-1.868V26.5Zm13.501-5.672c-.203-1.797-1.532-3.047-3.727-3.047-2.57 0-4.078 1.649-4.078 4.422 0 2.813 1.516 4.469 4.086 4.469 2.164 0 3.508-1.203 3.719-2.992h-1.844c-.203.89-.875 1.367-1.883 1.367-1.32 0-2.117-1.047-2.117-2.844 0-1.773.789-2.797 2.117-2.797 1.063 0 1.703.594 1.883 1.422h1.844Zm5.117-1.508c1.164 0 1.93.813 1.969 2.078h-4.024c.086-1.25.899-2.078 2.055-2.078Zm1.985 4.828c-.282.633-.946.985-1.907.985-1.273 0-2.093-.89-2.14-2.313v-.101h5.968v-.625c0-2.696-1.461-4.313-3.898-4.313-2.477 0-4.016 1.727-4.016 4.477s1.516 4.414 4.032 4.414c2.015 0 3.445-.969 3.796-2.524h-1.835Zm3.625 2.352h1.937V14.648h-1.937V26.5ZM23.325 13l9.325 16H14l9.325-16Z"/><path stroke="#5E5E5E" d="M43.5 0v44"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

16
apps/guide/src/components/Mdx.tsx Normal file
View File

@@ -0,0 +1,16 @@
'use client';
import { Alert, Section, DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui';
import { useMDXComponent } from 'next-contentlayer/hooks';
import { DocsLink } from '~/components/DocsLink';
import { ResultingCode } from '~/components/ResultingCode';
export function Mdx({ code }: { code: string }) {
const Component = useMDXComponent(code);
return (
<Component
components={{ Alert, Section, DiscordMessages, DiscordMessage, DiscordMessageEmbed, DocsLink, ResultingCode }}
/>
);
}

26
apps/guide/src/pages/additional-info/async-await.mdx → apps/guide/src/content/additional-info/async-await.mdx
View File

@@ -1,12 +1,8 @@
--- ---
layout: '../../layouts/SidebarLayout.astro'
title: Understanding async/await title: Understanding async/await
category: Additional info category: Additional info
--- ---
import { CH } from '@code-hike/mdx/components';
import { Alert } from '@discordjs/ui';
# Understanding async/await # Understanding async/await
If you aren't very familiar with ECMAScript 2017, you may not know about async/await. It's a useful way to handle Promises in a hoisted manner. It's also slightly faster and increases overall readability. If you aren't very familiar with ECMAScript 2017, you may not know about async/await. It's a useful way to handle Promises in a hoisted manner. It's also slightly faster and increases overall readability.
@@ -30,7 +26,7 @@ One important thing to know is that a Promise can only have one state simultaneo
[here](/additional-info/es6-syntax.md). [here](/additional-info/es6-syntax.md).
</Alert> </Alert>
<CH.Code client:load> <CH.Code>
```js ```js
function deleteMessages(amount) { function deleteMessages(amount) {
@@ -63,7 +59,7 @@ The following information is essential to know before working with async/await.
A simple example would be: A simple example would be:
<CH.Code client:load> <CH.Code>
```js ```js
async function declaredAsAsync() { async function declaredAsAsync() {
@@ -75,7 +71,7 @@ async function declaredAsAsync() {
or or
<CH.Code client:load> <CH.Code>
```js ```js
const declaredAsAsync = async () => { const declaredAsAsync = async () => {
@@ -87,7 +83,7 @@ const declaredAsAsync = async () => {
You can use that as well if you use the arrow function as an event listener. You can use that as well if you use the arrow function as an event listener.
<CH.Code client:load> <CH.Code>
```js ```js
client.on('event', async (first, last) => { client.on('event', async (first, last) => {
@@ -103,7 +99,7 @@ An important thing to know is that a function declared as _`async`_ will always
Now that you know how Promises work and what they are used for, let's look at an example that handles multiple Promises. Let's say you want to react with letters (regional indicators) in a specific order. For this example, here's a basic template for a discord.js bot with some ES6 adjustments. Now that you know how Promises work and what they are used for, let's look at an example that handles multiple Promises. Let's say you want to react with letters (regional indicators) in a specific order. For this example, here's a basic template for a discord.js bot with some ES6 adjustments.
<CH.Code client:load> <CH.Code>
```js ```js
const { Client, GatewayIntentBits } = require('discord.js'); const { Client, GatewayIntentBits } = require('discord.js');
@@ -129,7 +125,7 @@ client.login('your-token-goes-here');
If you don't know how Node.js asynchronous execution works, you would probably try something like this: If you don't know how Node.js asynchronous execution works, you would probably try something like this:
<CH.Code client:load> <CH.Code>
```js mark=4:7 ```js mark=4:7
client.on('interactionCreate', (interaction) => { client.on('interactionCreate', (interaction) => {
@@ -147,7 +143,7 @@ client.on('interactionCreate', (interaction) => {
But since all of these methods are started at the same time, it would just be a race to which server request finished first, so there would be no guarantee that it would react at all (if the message isn't fetched) or in the order you wanted it to. In order to make sure it reacts after the message is sent and in order (a, b, c), you'd need to use the _`.then()`_ callback from the Promises that these methods return. The code would look like this: But since all of these methods are started at the same time, it would just be a race to which server request finished first, so there would be no guarantee that it would react at all (if the message isn't fetched) or in the order you wanted it to. In order to make sure it reacts after the message is sent and in order (a, b, c), you'd need to use the _`.then()`_ callback from the Promises that these methods return. The code would look like this:
<CH.Code client:load> <CH.Code>
```js mark=4:12 ```js mark=4:12
client.on('interactionCreate', (interaction) => { client.on('interactionCreate', (interaction) => {
@@ -170,7 +166,7 @@ client.on('interactionCreate', (interaction) => {
In this piece of code, the Promises are [chain resolved](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Chaining) with each other, and if one of the Promises gets rejected, the function passed to _`.catch()`_ gets called. Here's the same code but with async/await: In this piece of code, the Promises are [chain resolved](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Chaining) with each other, and if one of the Promises gets rejected, the function passed to _`.catch()`_ gets called. Here's the same code but with async/await:
<CH.Code client:load> <CH.Code>
```js mark=1,4:7 ```js mark=1,4:7
client.on('interactionCreate', async (interaction) => { client.on('interactionCreate', async (interaction) => {
@@ -188,7 +184,7 @@ client.on('interactionCreate', async (interaction) => {
It's mostly the same code, but how would you catch Promise rejections now since _`.catch()`_ isn't there anymore? That is also a useful feature with async/await; the error will be thrown if you await it so that you can wrap the awaited Promises inside a try/catch, and you're good to go. It's mostly the same code, but how would you catch Promise rejections now since _`.catch()`_ isn't there anymore? That is also a useful feature with async/await; the error will be thrown if you await it so that you can wrap the awaited Promises inside a try/catch, and you're good to go.
<CH.Code client:load> <CH.Code>
```js mark=1,4:11 ```js mark=1,4:11
client.on('interactionCreate', async (interaction) => { client.on('interactionCreate', async (interaction) => {
@@ -213,7 +209,7 @@ So you may be asking, "How would I get the value the Promise resolved with?".
Let's look at an example where you want to delete a sent reply. Let's look at an example where you want to delete a sent reply.
<CH.Code client:load> <CH.Code>
```js mark=3:10 ```js mark=3:10
client.on('interactionCreate', (interaction) => { client.on('interactionCreate', (interaction) => {
@@ -233,7 +229,7 @@ client.on('interactionCreate', (interaction) => {
The return value of a _`.reply()`_ with the _`fetchReply`_ option set to _`true`_ is a Promise which resolves with the reply when it has been sent, but how would the same code with async/await look? The return value of a _`.reply()`_ with the _`fetchReply`_ option set to _`true`_ is a Promise which resolves with the reply when it has been sent, but how would the same code with async/await look?
<CH.Code client:load> <CH.Code>
```js mark=1,4:10 ```js mark=1,4:10
client.on('interactionCreate', async (interaction) => { client.on('interactionCreate', async (interaction) => {

12
apps/guide/src/pages/additional-info/collections.mdx → apps/guide/src/content/additional-info/collections.mdx
View File

@@ -1,12 +1,8 @@
--- ---
layout: '../../layouts/SidebarLayout.astro'
title: Collections title: Collections
category: Additional info category: Additional info
--- ---
import { CH } from '@code-hike/mdx/components';
import { Alert } from '@discordjs/ui';
# Collections # Collections
discord.js comes with a utility class known as _`Collection`_. discord.js comes with a utility class known as _`Collection`_.
@@ -28,7 +24,7 @@ This is the point of the _`Collection`_ class!
Many of the methods on _`Collection`_ correspond to their namesake in _`Array`_. One of them is _`find`_: Many of the methods on _`Collection`_ correspond to their namesake in _`Array`_. One of them is _`find`_:
<CH.Code client:load> <CH.Code>
```js ```js
// Assume we have an array of users and a collection of the same users. // Assume we have an array of users and a collection of the same users.
@@ -58,7 +54,7 @@ Methods that follow this philosophy of staying close to the _`Array`_ interface
Since _`Collection`_ extends _`Map`_, it is an [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols), and can be converted to an _`Array`_ through either _`Array.from()`_ or spread syntax (_`...collection`_). Since _`Collection`_ extends _`Map`_, it is an [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols), and can be converted to an _`Array`_ through either _`Array.from()`_ or spread syntax (_`...collection`_).
<CH.Code client:load> <CH.Code>
```js ```js
// For values. // For values.
@@ -86,7 +82,7 @@ Array.from(collection);
Some methods are not from _`Array`_ and are instead entirely new to standard JavaScript. Some methods are not from _`Array`_ and are instead entirely new to standard JavaScript.
<CH.Code client:load> <CH.Code>
```js ```js
// A random value. // A random value.
@@ -112,7 +108,7 @@ collection.sweep((user) => user.username === 'Bob');
A more complicated method is _`partition`_, which splits a single Collection into two new Collections based on the provided function. A more complicated method is _`partition`_, which splits a single Collection into two new Collections based on the provided function.
You can think of it as two \_`filter`\_s, but done at the same time: You can think of it as two \_`filter`\_s, but done at the same time:
<CH.Code client:load> <CH.Code>
```js ```js
// `bots` is a Collection of users where their `bot` property was true. // `bots` is a Collection of users where their `bot` property was true.

14
apps/guide/src/pages/creating-your-bot/creating-commands.mdx → apps/guide/src/content/creating-your-bot/creating-commands.mdx
View File

@@ -1,14 +1,8 @@
--- ---
layout: '../../layouts/SidebarLayout.astro'
title: Creating commands title: Creating commands
category: Creating your bot category: Creating your bot
--- ---
import { CH } from '@code-hike/mdx/components';
import { Alert, DiscordMessages, DiscordMessage } from '@discordjs/ui';
import { DocsLink } from '../../components/DocsLink.jsx';
import { ResultingCode } from '../../components/ResultingCode.jsx';
# Creating commands # Creating commands
<Alert title="Tip" type="success"> <Alert title="Tip" type="success">
@@ -62,7 +56,7 @@ Below is a deployment script you can use. Focus on these variables:
user's profile, etc. user's profile, etc.
</Alert> </Alert>
<CH.Code client:load> <CH.Code>
```js deploy-commands.js mark=4,6:10 ```js deploy-commands.js mark=4,6:10
const { REST, SlashCommandBuilder, Routes } = require('discord.js'); const { REST, SlashCommandBuilder, Routes } = require('discord.js');
@@ -107,7 +101,7 @@ Once you've registered your commands, you can listen for interactions via <DocsL
You should first check if an interaction is a chat input command via <DocsLink path="class/Interaction?scrollTo=isChatInputCommand" type="method">_`.isChatInputCommand()`_</DocsLink>, and then check the <DocsLink path="class/CommandInteraction?scrollTo=commandName">_`.commandName`_</DocsLink> property to know which command it is. You can respond to interactions with <DocsLink path="class/CommandInteraction?scrollTo=reply">_`.reply()`_</DocsLink>. You should first check if an interaction is a chat input command via <DocsLink path="class/Interaction?scrollTo=isChatInputCommand" type="method">_`.isChatInputCommand()`_</DocsLink>, and then check the <DocsLink path="class/CommandInteraction?scrollTo=commandName">_`.commandName`_</DocsLink> property to know which command it is. You can respond to interactions with <DocsLink path="class/CommandInteraction?scrollTo=reply">_`.reply()`_</DocsLink>.
<CH.Code client:load> <CH.Code>
```js mark=5:16 ```js mark=5:16
client.once('ready', () => { client.once('ready', () => {
@@ -134,7 +128,7 @@ client.login(token);
Note that servers are referred to as "guilds" in the Discord API and discord.js library. _`interaction.guild`_ refers to the guild the interaction was sent in (a <DocsLink path="class/Guild" /> instance), which exposes properties such as _`.name`_ or _`.memberCount`_. Note that servers are referred to as "guilds" in the Discord API and discord.js library. _`interaction.guild`_ refers to the guild the interaction was sent in (a <DocsLink path="class/Guild" /> instance), which exposes properties such as _`.name`_ or _`.memberCount`_.
<CH.Code client:load> <CH.Code>
```js focus=7 ```js focus=7
client.on('interactionCreate', async (interaction) => { client.on('interactionCreate', async (interaction) => {
@@ -184,7 +178,7 @@ You could also display the date the server was created, or the server's verifica
A "user" refers to a Discord user. _`interaction.user`_ refers to the user the interaction was sent by (a <DocsLink path="class/User" /> instance), which exposes properties such as _`.tag`_ or _`.id`_. A "user" refers to a Discord user. _`interaction.user`_ refers to the user the interaction was sent by (a <DocsLink path="class/User" /> instance), which exposes properties such as _`.tag`_ or _`.id`_.
<CH.Code client:load> <CH.Code>
```js focus=9 ```js focus=9
client.on('interactionCreate', async (interaction) => { client.on('interactionCreate', async (interaction) => {

18
apps/guide/src/pages/creating-your-bot/index.mdx → apps/guide/src/content/creating-your-bot/index.mdx
View File

@@ -1,14 +1,8 @@
--- ---
layout: '../../layouts/SidebarLayout.astro'
title: Initial files title: Initial files
category: Creating your bot category: Creating your bot
--- ---
import { CH } from '@code-hike/mdx/components';
import { Alert, Section } from '@discordjs/ui';
import { DocsLink } from '../../components/DocsLink.jsx';
import { ResultingCode } from '../../components/ResultingCode.jsx';
# Initial files # Initial files
Once you [add your bot to a server](/preparations/adding-your-bot-to-servers.md), the next step is to start coding and get it online! Let's start by creating a config file for your client token and a main file for your bot application. Once you [add your bot to a server](/preparations/adding-your-bot-to-servers.md), the next step is to start coding and get it online! Let's start by creating a config file for your client token and a main file for your bot application.
@@ -23,7 +17,7 @@ Open your application in the [Discord Developer Portal](https://discord.com/deve
Storing data in a _`config.json`_ file is a common way of keeping your sensitive values safe. Create a _`config.json`_ file in your project directory and paste in your token. You can access your token inside other files by using _`require()`_. Storing data in a _`config.json`_ file is a common way of keeping your sensitive values safe. Create a _`config.json`_ file in your project directory and paste in your token. You can access your token inside other files by using _`require()`_.
<CH.Code client:load> <CH.Code>
```json config.json ```json config.json
{ {
@@ -54,7 +48,7 @@ One way to pass in environment variables is via the command line interface. When
You can access the set values in your code via the _`process.env`_ global variable, accessible in any file. Note that values passed this way will always be strings and that you might need to parse them to a number, if using them to do calculations. You can access the set values in your code via the _`process.env`_ global variable, accessible in any file. Note that values passed this way will always be strings and that you might need to parse them to a number, if using them to do calculations.
<CH.Code client:load> <CH.Code>
```shellscript Command line ```shellscript Command line
A=123 B=456 DISCORD_TOKEN=your-token-goes-here node index.js A=123 B=456 DISCORD_TOKEN=your-token-goes-here node index.js
@@ -76,7 +70,7 @@ Another common approach is storing these values in a _`.env`_ file. This spares
You can use the [_`dotenv`_ package](https://www.npmjs.com/package/dotenv) for this. Once installed, require and use the package to load your _`.env`_ file and attach the variables to _`process.env`_: You can use the [_`dotenv`_ package](https://www.npmjs.com/package/dotenv) for this. Once installed, require and use the package to load your _`.env`_ file and attach the variables to _`process.env`_:
<CH.Code client:load> <CH.Code>
```sh npm ```sh npm
npm install dotenv npm install dotenv
@@ -117,7 +111,7 @@ console.log(process.env.DISCORD_TOKEN);
_`.gitignore`_](/creating-your-bot/#git-and-gitignore). _`.gitignore`_](/creating-your-bot/#git-and-gitignore).
</Alert> </Alert>
<Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded background gutter> <Section title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded background gutter>
While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe: While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe:
- Glitch: [Storing secrets in .env](https://glitch.happyfox.com/kb/article/18) - Glitch: [Storing secrets in .env](https://glitch.happyfox.com/kb/article/18)
@@ -132,7 +126,7 @@ Git is a fantastic tool to keep track of your code changes and allows you to upl
You can specify files that Git should ignore in its versioning systems with a _`.gitignore`_ file. Create a _`.gitignore`_ file in your project directory and add the names of the files and folders you want to ignore: You can specify files that Git should ignore in its versioning systems with a _`.gitignore`_ file. Create a _`.gitignore`_ file in your project directory and add the names of the files and folders you want to ignore:
<CH.Code client:load> <CH.Code>
``` ```
node_modules node_modules
@@ -155,7 +149,7 @@ Open your code editor and create a new file. We suggest that you save the file a
Here's the base code to get you started: Here's the base code to get you started:
<CH.Code client:load> <CH.Code>
```js ```js
// Require the necessary discord.js classes // Require the necessary discord.js classes

1
apps/guide/src/pages/index.mdx → apps/guide/src/content/index.mdx
View File

@@ -1,5 +1,4 @@
--- ---
layout: '../layouts/SidebarLayout.astro'
title: Introduction title: Introduction
category: Home category: Home
--- ---

3
apps/guide/src/pages/requesting-more-content.mdx → apps/guide/src/content/requesting-more-content.mdx
View File

@@ -1,11 +1,8 @@
--- ---
layout: '../layouts/SidebarLayout.astro'
title: Requesting more content title: Requesting more content
category: Home category: Home
--- ---
import { Alert } from '@discordjs/ui';
# Requesting more content # Requesting more content
Since this guide is made specifically for the discord.js community, we want to be sure to provide the most relevant and up-to-date content. We will, of course, make additions to the current pages and add new ones as we see fit, but fulfilling requests is how we know we're providing content you all want the most. Since this guide is made specifically for the discord.js community, we want to be sure to provide the most relevant and up-to-date content. We will, of course, make additions to the current pages and add new ones as we see fit, but fulfilling requests is how we know we're providing content you all want the most.

2
apps/guide/src/pages/test.mdx → apps/guide/src/content/test.mdx
View File

@@ -3,8 +3,6 @@ title: Test
category: Test category: Test
--- ---
import { DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui';
<DiscordMessages> <DiscordMessages>
<DiscordMessage <DiscordMessage
reply={{ reply={{

4
apps/guide/src/pages/whats-new.mdx → apps/guide/src/content/whats-new.mdx
View File

@@ -1,12 +1,8 @@
--- ---
layout: '../layouts/SidebarLayout.astro'
title: What's new title: What's new
category: Home category: Home
--- ---
import { CH } from '@code-hike/mdx/components';
import { DiscordMessages, DiscordMessage } from '@discordjs/ui';
# What's new # What's new
<DiscordMessages rounded> <DiscordMessages rounded>

2
apps/guide/src/env.d.ts vendored
View File

@@ -1,2 +0,0 @@
/* eslint-disable @typescript-eslint/triple-slash-reference */
/// <reference types="@astrojs/image/client" />

3
apps/guide/src/styles/ch.css
View File

@@ -1,3 +0,0 @@
.ch-frame-buttons {
display: none;
}

3
apps/guide/src/styles/cmdk.css Normal file
View File

@@ -0,0 +1,3 @@
[data-backdrop] {
background-color: rgb(0 0 0 / 35%);
}

18
apps/guide/src/styles/main.css
View File

@@ -1,16 +1,8 @@
@import url('https://rsms.me/inter/inter.css'); body {
font-family: var(--font-inter);
:root { min-height: 100vh;
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
} }
@supports (font-variation-settings: normal) { code {
:root { font-family: var(--font-mono);
font-family: 'Inter var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
}
} }

4
apps/guide/src/util/fetcher.ts Normal file
View File

@@ -0,0 +1,4 @@
export const fetcher = async (url: string) => {
const res = await fetch(url);
return res.json();
};

13
apps/guide/src/util/fonts.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Inter, JetBrains_Mono } from 'next/font/google';
export const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export const jetBrainsMono = JetBrains_Mono({
subsets: ['latin'],
display: 'swap',
variable: '--font-mono',
});

1
apps/guide/tsconfig.eslint.json
View File

@@ -10,7 +10,6 @@
"**/*.cjs", "**/*.cjs",
"**/*.mjs", "**/*.mjs",
"**/*.jsx", "**/*.jsx",
"**/*.astro",
"**/*.test.ts", "**/*.test.ts",
"**/*.test.js", "**/*.test.js",
"**/*.test.mjs", "**/*.test.mjs",

22
apps/guide/tsconfig.json
View File

@@ -9,11 +9,25 @@
"allowJs": false, "allowJs": false,
"incremental": true, "incremental": true,
"skipLibCheck": true, "skipLibCheck": true,
"types": ["@astrojs/image/client"], "sourceMap": true,
"plugins": [
{
"name": "next"
}
],
"paths": { "paths": {
"~/*": ["./src/*"] "~/*": ["./src/*"],
} "contentlayer/generated": ["./.contentlayer/generated"]
},
"strictNullChecks": true
}, },
"include": ["src/**/*.ts", "src/**/*.tsx", "types.d.ts"], "include": [
"src/**/*.ts",
"src/**/*.tsx",
"next-env.d.ts",
"types.d.ts",
".next/types/**/*.ts",
".contentlayer/generated"
],
"exclude": ["node_modules"] "exclude": ["node_modules"]
} }

3
apps/guide/vercel.json
View File

@@ -1,3 +0,0 @@
{
"cleanUrls": true
}

2
apps/website/src/app/error.tsx
View File

@@ -4,7 +4,7 @@ export default function Error({ error }: { error: Error }) {
console.error(error); console.error(error);
return ( 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 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">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1> <h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2> <h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div> </div>

4
apps/website/src/app/global-error.tsx
View File

@@ -10,8 +10,8 @@ export default function GlobalError({ error }: { error: Error }) {
<html className={inter.variable} lang="en" suppressHydrationWarning> <html className={inter.variable} lang="en" suppressHydrationWarning>
<body className="dark:bg-dark-800 bg-light-600"> <body className="dark:bg-dark-800 bg-light-600">
<Providers> <Providers>
<main className="mx-auto h-screen max-w-2xl"> <main className="mx-auto min-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 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">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1> <h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2> <h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div> </div>

2
apps/website/src/app/not-found.tsx
View File

@@ -2,7 +2,7 @@ import Link from 'next/link';
export default function NotFound() { export default function NotFound() {
return ( 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 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">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1> <h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2> <h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
<Link <Link

5
package.json
View File

@@ -72,5 +72,8 @@
"apps/*", "apps/*",
"packages/*" "packages/*"
], ],
"packageManager": "yarn@3.5.0" "packageManager": "yarn@3.5.0",
"dependencies": {
"@react-icons/all-files": "^4.1.0"
}
} }

43
unocss.config.ts
View File

@@ -1,4 +1,4 @@
import { defineConfig, presetTypography, presetUno, presetWebFonts } from 'unocss'; import { defineConfig, presetTypography, presetUno } from 'unocss';
export default defineConfig({ export default defineConfig({
theme: { theme: {
@@ -17,34 +17,27 @@ export default defineConfig({
}, },
}, },
fontFamily: { fontFamily: {
sans: ['var(--font-inter)'], sans: 'var(--font-inter)',
mono: ['var(--font-mono)'], mono: 'var(--font-mono)',
}, },
}, },
// safelist: [
// 'sr-only',
// 'relative',
// 'inline-flex',
// 'w-6',
// 'h-6',
// 'place-items-center',
// 'place-content-center',
// 'outline-0',
// 'text-black',
// 'dark:text-white',
// 'ml-2',
// 'inline-block',
// 'm-0',
// ],
presets: [ presets: [
presetUno({ dark: 'class' }), presetUno({ dark: 'class' }),
presetWebFonts({
provider: 'bunny',
fonts: {
mono: ['JetBrains Mono:400,600,700'],
'source-sans-pro': [
'Source Sans Pro:300,400,500,600',
{ name: 'ui-sans-serif', provider: 'none' },
{ name: 'system-ui', provider: 'none' },
{ name: '-apple-system', provider: 'none' },
{ name: 'BlinkMacSystemFont', provider: 'none' },
{ name: 'Segoe UI', provider: 'none' },
{ name: 'Roboto', provider: 'none' },
{ name: 'Helvetica Neue', provider: 'none' },
{ name: 'Arial', provider: 'none' },
{ name: 'sans-serif', provider: 'none' },
{ name: 'Apple Color Emoji', provider: 'none' },
{ name: 'Segoe UI Emoji', provider: 'none' },
{ name: 'Segoe UI Symbol', provider: 'none' },
{ name: 'Noto Color Emoji', provider: 'none' },
],
},
}),
presetTypography({ presetTypography({
cssExtend: { cssExtend: {
pre: { pre: {

2504
yarn.lock
View File

File diff suppressed because it is too large Load Diff