Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-13 10:03: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

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,