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

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

2
apps/guide/src/components/Navbar.tsx
View File

@@ -18,7 +18,7 @@ export function Navbar({ pages }: { pages?: MDXPage[] | undefined }) {
return (
<>
<header className="dark:bg-dark-600 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 top-0 left-0 z-20 w-full border-b">
<div className="h-18 block px-6">
<div className="flex h-full flex-row place-content-between place-items-center">
<Button

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>

74
apps/website/src/components/Footer.tsx Normal file
View File

@@ -0,0 +1,74 @@
import Image from 'next/image';
import vercelLogo from '~/assets/powered-by-vercel.svg';
export default function Footer() {
return (
<footer className="dark:bg-dark-800 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>
);
}

2
apps/website/src/components/Header.tsx
View File

@@ -64,7 +64,7 @@ export default function Header() {
);
return (
<header className="dark:bg-dark-600 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 top-0 left-0 z-20 w-full border-b">
<div className="h-18 block px-6">
<div className="flex h-full flex-row place-content-between place-items-center">
<Button

6
apps/website/src/components/Nav.tsx
View File

@@ -1,12 +1,14 @@
'use client';
import dynamic from 'next/dynamic';
import { Scrollbars } from 'react-custom-scrollbars-2';
import { PackageSelect } from './PackageSelect';
import { Sidebar } from './Sidebar';
import type { SidebarSectionItemData } from './Sidebar';
import { VersionSelect } from './VersionSelect';
import { useNav } from '~/contexts/nav';
const PackageSelect = dynamic(async () => import('./PackageSelect'));
const VersionSelect = dynamic(async () => import('./VersionSelect'));
export function Nav({ members }: { members: SidebarSectionItemData[] }) {
const { opened } = useNav();

4
apps/website/src/components/OverloadSwitcher.tsx
View File

@@ -10,7 +10,7 @@ export interface OverloadSwitcherProps {
overloads: ReactNode[];
}
export function OverloadSwitcher({ overloads, children }: PropsWithChildren<{ overloads: ReactNode[] }>) {
export default function OverloadSwitcher({ overloads, children }: PropsWithChildren<{ overloads: ReactNode[] }>) {
const [overloadIndex, setOverloadIndex] = useState(1);
const overloadedNode = overloads[overloadIndex - 1]!;
const menu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
@@ -18,7 +18,7 @@ export function OverloadSwitcher({ overloads, children }: PropsWithChildren<{ ov
return (
<div className="flex flex-col place-items-start gap-2">
<MenuButton
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 rounded p-3 outline-0 focus:ring"
className="bg-light-700 hover:bg-light-800 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 rounded p-3 outline-0 focus:ring"
state={menu}
>
<div className="flex flex-row place-content-between place-items-center gap-2">

4
apps/website/src/components/PackageSelect.tsx
View File

@@ -6,7 +6,7 @@ import { usePathname } from 'next/navigation';
import { useMemo } from 'react';
import { PACKAGES } from '~/util/constants';
export function PackageSelect() {
export default function PackageSelect() {
const pathname = usePathname();
const packageName = pathname?.split('/').slice(3, 4)[0];
@@ -43,7 +43,7 @@ export function PackageSelect() {
return (
<>
<MenuButton
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 rounded p-3 outline-0 focus:ring"
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={packageMenu}
>
<div className="flex flex-row place-content-between place-items-center">

3
apps/website/src/components/Sidebar.tsx
View File

@@ -84,7 +84,6 @@ function resolveIcon(item: string) {
export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
const pathname = usePathname();
const asPathWithoutQueryAndAnchor = `/${pathname?.split('/').splice(-1) ?? ''}`;
const { setOpened } = useNav();
const groupItems = useMemo(() => groupMembers(members), [members]);
@@ -98,7 +97,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
{groupItems[group].map((member, index) => (
<ItemLink
className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
asPathWithoutQueryAndAnchor === member.href
pathname === member.href
? 'bg-blurple text-white'
: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
}`}

4
apps/website/src/components/VersionSelect.tsx
View File

@@ -7,7 +7,7 @@ import { useMemo } from 'react';
import useSWR from 'swr';
import { fetcher } from '~/util/fetcher';
export function VersionSelect() {
export default function VersionSelect() {
const pathname = usePathname();
const packageName = pathname?.split('/').slice(3, 4)[0];
const branchName = pathname?.split('/').slice(4, 5)[0];
@@ -36,7 +36,7 @@ export function VersionSelect() {
return (
<>
<MenuButton
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 rounded p-3 outline-0 focus:ring"
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={versionMenu}
>
<div className="flex flex-row place-content-between place-items-center">

4
apps/website/src/components/model/function/Function.tsx
View File

@@ -1,8 +1,10 @@
import type { ApiFunction } from '@microsoft/api-extractor-model';
import { OverloadSwitcher } from '../../OverloadSwitcher';
import dynamic from 'next/dynamic';
import { FunctionBody } from './FunctionBody';
import { Header } from '~/components/documentation/Header';
const OverloadSwitcher = dynamic(async () => import('../../OverloadSwitcher'));
export function Function({ item }: { item: ApiFunction }) {
const header = <Header kind={item.kind} name={item.name} />;

4
apps/website/src/components/model/method/Method.tsx
View File

@@ -4,10 +4,12 @@ import type {
ApiMethod,
ApiMethodSignature,
} from '@microsoft/api-extractor-model';
import { OverloadSwitcher } from '../../OverloadSwitcher';
import dynamic from 'next/dynamic';
import { MethodDocumentation } from './MethodDocumentation';
import { MethodHeader } from './MethodHeader';
const OverloadSwitcher = dynamic(async () => import('../../OverloadSwitcher'));
export function Method({
method,
inheritedFrom,

2
packages/ui/src/lib/components/Section.tsx
View File

@@ -29,7 +29,7 @@ export function Section({
return (
<div className={`flex flex-col ${className}`}>
<Disclosure
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 rounded p-3 outline-0 focus:ring"
className="hover:bg-light-800 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 rounded bg-white p-3 outline-0 focus:ring"
state={disclosure}
>
<div className="flex flex-row place-content-between place-items-center">