Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-14 10:33:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): color scheme / dark and light mode improvements

Browse Source
This commit is contained in:
iCrawl
2023-03-24 06:02:00 +01:00
parent 1c4af93898
commit 52f8e0670c
18 changed files with 104 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx
View File

@@ -180,8 +180,8 @@ export default async function Page({ params }: { params: ItemRouteParams }) {
: ''
}
>
<article className="dark:bg-dark-600 bg-light-600">
<div className="dark:bg-dark-800 bg-white p-6 pb-20 shadow">{member ? <Member member={member} /> : null}</div>
<article className="dark:bg-dark-800 bg-light-600">
<div className="dark:bg-dark-600 bg-white p-6 pb-20 shadow">{member ? <Member member={member} /> : null}</div>
</article>
</div>
);

71
apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
View File

@@ -2,12 +2,10 @@ import { addPackageToModel } from '@discordjs/scripts';
import type { ApiFunction, ApiItem } from '@microsoft/api-extractor-model';
import { ApiModel } from '@microsoft/api-extractor-model';
import dynamic from 'next/dynamic';
import Image from 'next/image';
import { notFound } from 'next/navigation';
import type { PropsWithChildren } from 'react';
import { Providers } from './providers';
import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
import vercelLogo from '~/assets/powered-by-vercel.svg';
import { CmdKDialog } from '~/components/CmdK';
import { Nav } from '~/components/Nav';
import type { SidebarSectionItemData } from '~/components/Sidebar';
@@ -15,6 +13,7 @@ import { resolveItemURI } from '~/components/documentation/util';
import { N_RECENT_VERSIONS, PACKAGES } from '~/util/constants';
const Header = dynamic(async () => import('~/components/Header'));
const Footer = dynamic(async () => import('~/components/Footer'));
export interface VersionRouteParams {
package: string;
@@ -76,74 +75,8 @@ export default async function PackageLayout({ children, params }: PropsWithChild
<article className="pt-18 lg:pl-76">
<div className="relative z-10 min-h-[calc(100vh_-_70px)]">{children}</div>
<div className="h-76 md:h-52" />
<footer className="dark:bg-dark-600 h-76 lg:pl-84 bg-light-600 xl:pr-84 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16">
<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
<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" src={vercelLogo} />
</a>
<div className="flex flex-row gap-6 md:gap-12">
<div className="flex flex-col gap-2">
<div className="text-lg font-semibold">Community</div>
<div className="flex flex-col gap-1">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
href="https://discord.gg/djs"
rel="noopener noreferrer"
target="_blank"
>
Discord
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
href="https://github.com/discordjs/discord.js/discussions"
rel="noopener noreferrer"
target="_blank"
>
GitHub discussions
</a>
</div>
</div>
<div className="flex flex-col gap-2">
<div className="text-lg font-semibold">Project</div>
<div className="flex flex-col gap-1">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"
>
discord.js
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
href="https://discordjs.guide"
rel="noopener noreferrer"
target="_blank"
>
discord.js guide
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
href="https://discord-api-types.dev"
rel="noopener noreferrer"
target="_blank"
>
discord-api-types
</a>
</div>
</div>
</div>
</div>
</div>
</footer>
</article>
<Footer />
</main>
<CmdKDialog />
</Providers>

2
apps/website/src/app/docs/packages/[package]/page.tsx
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 h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-8 lg:px-6">
<div className="flex grow flex-col place-content-center gap-4">
<h1 className="text-2xl font-semibold">Select a version:</h1>
{data.map((version, idx) => (

2
apps/website/src/app/docs/packages/page.tsx
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-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-8 lg:px-6">
<div className="flex grow flex-col place-content-center gap-4">
<h1 className="text-2xl font-semibold">Select a package:</h1>
<a

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

@@ -8,7 +8,7 @@ export default function GlobalError({ error }: { error: Error }) {
return (
<html className={inter.variable} lang="en" suppressHydrationWarning>
<body className="dark:bg-dark-800 bg-white">
<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">

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

@@ -72,7 +72,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: PropsWithChildren) {
return (
<html className={inter.variable} lang="en" suppressHydrationWarning>
<body className="dark:bg-dark-800 bg-white">
<body className="dark:bg-dark-800 bg-light-600">
<Providers>{children}</Providers>
<Analytics />
</body>

4
apps/website/src/app/page.tsx
View File

@@ -7,7 +7,7 @@ import { CODE_EXAMPLE } from '~/util/constants';
export default function Page() {
return (
<div className="mx-auto flex 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-6">
<div className="mx-auto flex 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-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">
@@ -44,7 +44,7 @@ export default function Page() {
</a>
</div>
</div>
<div className="max-w-sm sm:max-w-6xl">
<div className="max-w-xs sm:max-w-6xl">
{/* @ts-expect-error async component */}
<SyntaxHighlighter code={CODE_EXAMPLE} />
</div>