mirror of
https://github.com/discordjs/discord.js.git
synced 2024-08-21 03:14:43 +12:00
refactor(website): redesign (#9286)
This commit is contained in:
parent
d1ebe4a52c
commit
47da24ff5c
25 changed files with 64 additions and 79 deletions
|
@ -15,7 +15,7 @@
|
|||
"build:analyze": "yarn run --top-level docs --force && cross-env-shell ANALYZE=true NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
|
||||
"preview": "next start",
|
||||
"dev": "yarn run --top-level docs && concurrently 'yarn dev:css' 'yarn dev:next'",
|
||||
"dev:next": "next dev",
|
||||
"dev:next": "yarn workspaces foreach -ptR run build && 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",
|
||||
|
|
|
@ -172,19 +172,5 @@ function Member({ member }: { member?: ApiItem }) {
|
|||
export default async function Page({ params }: { params: ItemRouteParams }) {
|
||||
const member = await fetchMember(params);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
(member?.kind === 'Class' || member?.kind === 'Interface') && (member as ApiClass | ApiInterface).members.length
|
||||
? 'xl:pr-64'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
<article className="dark:bg-dark-800 bg-light-600">
|
||||
<div className="dark:bg-dark-600 min-h-[calc(100vh_-_64px)] bg-white p-6 pb-20 shadow">
|
||||
{member ? <Member member={member} /> : null}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
);
|
||||
return <div className="relative top-6">{member ? <Member member={member} /> : null}</div>;
|
||||
}
|
||||
|
|
|
@ -69,14 +69,18 @@ export default async function PackageLayout({ children, params }: PropsWithChild
|
|||
|
||||
return (
|
||||
<Providers>
|
||||
<main>
|
||||
<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
|
||||
<Header />
|
||||
<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
|
||||
<article className="lg:pl-76 pt-16">
|
||||
<div className="relative z-10">{children}</div>
|
||||
<div className="h-76 md:h-52" />
|
||||
</article>
|
||||
<Footer />
|
||||
<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:flex lg:max-w-full">
|
||||
<div className="lg:top-23 lg:sticky lg:h-[calc(100vh_-_100px)]">
|
||||
<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
|
||||
</div>
|
||||
|
||||
<div className="min-w-xs mx-auto w-full max-w-5xl pb-10">
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<CmdKDialog />
|
||||
</Providers>
|
||||
|
|
|
@ -27,11 +27,9 @@ export default async function Page({ params }: { params: VersionRouteParams }) {
|
|||
const readmeSource = await loadREADME(packageName);
|
||||
|
||||
return (
|
||||
<article className="dark:bg-dark-600 bg-white p-10">
|
||||
<div className="prose max-w-none">
|
||||
{/* @ts-expect-error async component */}
|
||||
<MDXRemote components={{ pre: SyntaxHighlighter }} options={mdxOptions} source={readmeSource} />
|
||||
</div>
|
||||
</article>
|
||||
<div className="prose max-w-none">
|
||||
{/* @ts-expect-error async component */}
|
||||
<MDXRemote components={{ pre: SyntaxHighlighter }} options={mdxOptions} source={readmeSource} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -42,7 +42,10 @@ export const metadata: Metadata = {
|
|||
|
||||
manifest: '/site.webmanifest',
|
||||
|
||||
themeColor: '#5865f2',
|
||||
themeColor: [
|
||||
{ media: '(prefers-color-scheme: light)', color: '#f1f3f5' },
|
||||
{ media: '(prefers-color-scheme: dark)', color: '#181818' },
|
||||
],
|
||||
colorScheme: 'light dark',
|
||||
|
||||
appleWebApp: {
|
||||
|
|
|
@ -2,10 +2,7 @@ import { FiLink } from '@react-icons/all-files/fi/FiLink';
|
|||
|
||||
export function Anchor({ href }: { href: string }) {
|
||||
return (
|
||||
<a
|
||||
className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
|
||||
href={href}
|
||||
>
|
||||
<a className="focus:ring-width-2 focus:ring-blurple mr-1 inline-block rounded outline-0 focus:ring" href={href}>
|
||||
<FiLink size={20} />
|
||||
</a>
|
||||
);
|
||||
|
|
|
@ -50,7 +50,7 @@ export function CmdKDialog() {
|
|||
() =>
|
||||
searchResults?.map((item, idx) => (
|
||||
<Command.Item
|
||||
className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white [&[aria-selected]]:ring"
|
||||
className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-2 my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white [&[aria-selected]]:ring"
|
||||
key={`${item.id}-${idx}`}
|
||||
onSelect={() => {
|
||||
router.push(item.path);
|
||||
|
@ -114,12 +114,12 @@ export function CmdKDialog() {
|
|||
return (
|
||||
<Dialog className="fixed top-1/4 left-1/2 z-50 -translate-x-1/2" state={dialog!}>
|
||||
<Command
|
||||
className="dark:bg-dark-300 min-w-xs sm:min-w-lg max-w-xs rounded bg-white sm:max-w-lg"
|
||||
className="dark:bg-dark/50 min-w-xs sm:min-w-lg dark:border-dark-100 border-light-900 max-w-xs rounded border bg-white/50 shadow backdrop-blur-md sm:max-w-lg"
|
||||
label="Command Menu"
|
||||
shouldFilter={false}
|
||||
>
|
||||
<Command.Input
|
||||
className="dark:bg-dark-300 caret-blurple placeholder:text-dark-300/75 focus:ring-width-2 focus:ring-blurple w-full rounded border-0 bg-white p-4 text-lg outline-0 outline-0 focus:ring dark:placeholder:text-white/75"
|
||||
className="dark:bg-dark/50 caret-blurple placeholder:text-dark-300/75 dark:border-dark-100 border-light-900 rounded-b-0 w-full rounded border-0 border-b bg-white/50 p-4 text-lg outline-0 dark:placeholder:text-white/75"
|
||||
onValueChange={setSearch}
|
||||
placeholder="Quick search..."
|
||||
value={search}
|
||||
|
|
|
@ -3,7 +3,7 @@ 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">
|
||||
<footer className="dark:bg-dark-800 bg-light-600 md:pl-12 md:pr-12">
|
||||
<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
|
||||
|
|
|
@ -64,9 +64,9 @@ export default function Header() {
|
|||
);
|
||||
|
||||
return (
|
||||
<header className="dark:bg-dark-400 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
|
||||
<header className="dark:bg-dark/50 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/50 shadow backdrop-blur-md">
|
||||
<div className="block h-16 px-6">
|
||||
<div className="flex h-full flex-row place-content-between place-items-center">
|
||||
<div className="flex h-full flex-row place-content-between place-items-center gap-8">
|
||||
<Button
|
||||
aria-label="Menu"
|
||||
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
|
||||
|
@ -74,21 +74,21 @@ export default function Header() {
|
|||
>
|
||||
<VscMenu size={24} />
|
||||
</Button>
|
||||
<div className="hidden md:flex md:flex-row md:overflow-hidden">{breadcrumbs}</div>
|
||||
<div className="flex flex-row place-items-center gap-4">
|
||||
<Button
|
||||
as="div"
|
||||
className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
|
||||
onClick={() => dialog?.toggle()}
|
||||
>
|
||||
<div className="flex flex-row place-items-center gap-4">
|
||||
<VscSearch size={18} />
|
||||
<span className="opacity-65">Search...</span>
|
||||
<div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
|
||||
<FiCommand size={18} /> K
|
||||
</div>
|
||||
<div className="hidden lg:flex lg:flex-row lg:overflow-hidden">{breadcrumbs}</div>
|
||||
<Button
|
||||
as="div"
|
||||
className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple w-56 grow rounded bg-white px-4 py-2.5 outline-0 focus:ring sm:grow-0"
|
||||
onClick={() => dialog?.toggle()}
|
||||
>
|
||||
<div className="flex flex-row place-items-center gap-4 md:justify-between">
|
||||
<VscSearch size={18} />
|
||||
<span className="opacity-65">Search...</span>
|
||||
<div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
|
||||
<FiCommand size={18} /> K
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</Button>
|
||||
<div className="flex flex-row place-items-center gap-4">
|
||||
<Button
|
||||
aria-label="GitHub"
|
||||
as="a"
|
||||
|
|
|
@ -14,12 +14,13 @@ export function Nav({ members }: { members: SidebarSectionItemData[] }) {
|
|||
|
||||
return (
|
||||
<nav
|
||||
className={`dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[65px] left-0 bottom-0 z-20 h-[calc(100vh_-_65px)] w-full border-r bg-white ${
|
||||
className={`dark:bg-dark/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${
|
||||
opened ? 'block' : 'hidden'
|
||||
} lg:w-76 lg:max-w-76 lg:block`}
|
||||
} lg:min-w-xs lg:sticky lg:block lg:h-full lg:w-full lg:max-w-xs`}
|
||||
>
|
||||
<Scrollbars
|
||||
autoHide
|
||||
className="[&>div]:overscroll-none"
|
||||
hideTracksWhenNotNeeded
|
||||
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
|
||||
renderTrackVertical={(props) => (
|
||||
|
@ -27,7 +28,7 @@ export function Nav({ members }: { members: SidebarSectionItemData[] }) {
|
|||
)}
|
||||
universal
|
||||
>
|
||||
<div className="flex flex-col gap-3 px-3 pt-3">
|
||||
<div className="flex flex-col gap-4 p-3">
|
||||
<PackageSelect />
|
||||
<VersionSelect />
|
||||
</div>
|
||||
|
|
|
@ -4,7 +4,7 @@ export function Panel({ children }: PropsWithChildren) {
|
|||
return (
|
||||
<>
|
||||
{children}
|
||||
<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
|
||||
<div className="border-light-900 dark:border-dark-100 border-t-2" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -25,10 +25,9 @@ export function Property({
|
|||
|
||||
return (
|
||||
<div className="scroll-mt-30 flex flex-col gap-4" id={item.displayName}>
|
||||
<div className="md:-ml-8.5 flex flex-col gap-2 md:flex-row md:place-items-center">
|
||||
<Anchor href={`#${item.displayName}`} />
|
||||
<div className="flex flex-col gap-2 md:-ml-9">
|
||||
{isDeprecated || item.isReadonly || item.isOptional ? (
|
||||
<div className="flex flex-row gap-1">
|
||||
<div className="flex flex-row gap-1 md:ml-7">
|
||||
{isDeprecated ? (
|
||||
<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
|
||||
Deprecated
|
||||
|
@ -47,6 +46,7 @@ export function Property({
|
|||
</div>
|
||||
) : null}
|
||||
<div className="flex flex-row flex-wrap place-items-center gap-1">
|
||||
<Anchor href={`#${item.displayName}`} />
|
||||
<h4 className="break-all font-mono text-lg font-bold">
|
||||
{item.displayName}
|
||||
{item.isOptional ? '?' : ''}
|
||||
|
|
|
@ -28,7 +28,7 @@ export function PropertyList({ item }: { item: ApiItemContainerMixin }) {
|
|||
item={prop.item as ApiPropertyItem}
|
||||
separator={PropertySeparatorType.Type}
|
||||
/>
|
||||
<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
|
||||
<div className="border-light-900 dark:border-dark-100 border-t-2" />
|
||||
</Fragment>
|
||||
);
|
||||
}),
|
||||
|
|
|
@ -89,7 +89,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
|
|||
const groupItems = useMemo(() => groupMembers(members), [members]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 p-3 pb-32 lg:pb-12">
|
||||
<div className="flex flex-col gap-3 p-3">
|
||||
{(Object.keys(groupItems) as (keyof GroupedMembers)[])
|
||||
.filter((group) => groupItems[group].length)
|
||||
.map((group, idx) => (
|
||||
|
|
|
@ -25,7 +25,7 @@ export function MemberContainerDocumentation({
|
|||
{hasProperties(item) ? <PropertiesSection item={item} /> : null}
|
||||
{hasMethods(item) ? <MethodsSection item={item} /> : null}
|
||||
|
||||
<Outline members={serializeMembers(item)} />
|
||||
{/* <Outline members={serializeMembers(item)} /> */}
|
||||
</Documentation>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -8,7 +8,7 @@ export function DocumentationSection(opts: PropsWithChildren<SectionOptions & {
|
|||
return (
|
||||
<Section {...props}>
|
||||
{children}
|
||||
{separator ? <div className="border-light-900 dark:border-dark-100 -mx-8 mt-6 border-t-2" /> : null}
|
||||
{separator ? <div className="border-light-900 dark:border-dark-100 mt-6 border-t-2" /> : null}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -31,7 +31,7 @@ export function MethodsSection({ item }: { item: ApiItemContainerMixin }) {
|
|||
}`}
|
||||
>
|
||||
<Method inheritedFrom={inherited as ApiDeclaredItem & ApiItemContainerMixin} method={method} />
|
||||
<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
|
||||
<div className="border-light-900 dark:border-dark-100 border-t-2" />
|
||||
</Fragment>
|
||||
)),
|
||||
[members],
|
||||
|
|
|
@ -74,7 +74,7 @@ export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.E
|
|||
|
||||
case DocNodeKind.FencedCode: {
|
||||
const { language, code } = tsdoc as DocFencedCode;
|
||||
return <SyntaxHighlighter code={code} key={idx} lang={language ?? 'typescript'} />;
|
||||
return <SyntaxHighlighter code={code.trim()} key={idx} lang={language ?? 'typescript'} />;
|
||||
}
|
||||
|
||||
case DocNodeKind.Comment: {
|
||||
|
|
|
@ -22,7 +22,7 @@ export function Class({ clazz }: { clazz: ApiClass }) {
|
|||
{clazz.typeParameters.length ? <TypeParameterSection item={clazz} /> : null}
|
||||
{constructor ? <ConstructorSection item={constructor} /> : null}
|
||||
<Members item={clazz} />
|
||||
<Outline members={serializeMembers(clazz)} />
|
||||
{/* <Outline members={serializeMembers(clazz)} /> */}
|
||||
</Documentation>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@ export function Interface({ item }: { item: ApiInterface }) {
|
|||
<HierarchyText item={item} type="Extends" />
|
||||
{item.typeParameters.length ? <TypeParameterSection item={item} /> : null}
|
||||
<Members item={item} />
|
||||
<Outline members={serializeMembers(item)} />
|
||||
{/* <Outline members={serializeMembers(item)} /> */}
|
||||
</Documentation>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,13 +1,11 @@
|
|||
import type { ApiVariable } from '@microsoft/api-extractor-model';
|
||||
import { Documentation } from '../documentation/Documentation';
|
||||
import { ObjectHeader } from '../documentation/ObjectHeader';
|
||||
import { SummarySection } from '../documentation/section/SummarySection';
|
||||
|
||||
export function Variable({ item }: { item: ApiVariable }) {
|
||||
return (
|
||||
<Documentation>
|
||||
<ObjectHeader item={item} />
|
||||
<SummarySection item={item} />
|
||||
</Documentation>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -4,14 +4,12 @@ import { Panel } from '../../Panel';
|
|||
import { Documentation } from '../../documentation/Documentation';
|
||||
import { ObjectHeader } from '../../documentation/ObjectHeader';
|
||||
import { DocumentationSection } from '../../documentation/section/DocumentationSection';
|
||||
import { SummarySection } from '../../documentation/section/SummarySection';
|
||||
import { EnumMember } from './EnumMember';
|
||||
|
||||
export function Enum({ item }: { item: ApiEnum }) {
|
||||
return (
|
||||
<Documentation>
|
||||
<ObjectHeader item={item} />
|
||||
<SummarySection item={item} />
|
||||
<DocumentationSection icon={<VscSymbolEnum size={20} />} padded title="Members">
|
||||
<div className="flex flex-col gap-4">
|
||||
{item.members.map((member, idx) => (
|
||||
|
|
|
@ -26,12 +26,11 @@ export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignatur
|
|||
|
||||
return (
|
||||
<div className="scroll-mt-30 flex flex-col" id={key}>
|
||||
<div className="flex flex-col gap-2 md:-ml-9 md:flex-row md:place-items-center">
|
||||
<Anchor href={`#${key}`} />
|
||||
<div className="flex flex-col gap-2 md:-ml-9">
|
||||
{isDeprecated ||
|
||||
(method.kind === ApiItemKind.Method && (method as ApiMethod).isProtected) ||
|
||||
(method.kind === ApiItemKind.Method && (method as ApiMethod).isStatic) ? (
|
||||
<div className="flex flex-row gap-1">
|
||||
<div className="flex flex-row gap-1 md:ml-7">
|
||||
{isDeprecated ? (
|
||||
<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
|
||||
Deprecated
|
||||
|
@ -49,7 +48,8 @@ export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignatur
|
|||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex flex-row flex-wrap gap-1">
|
||||
<div className="flex flex-row flex-wrap place-items-center gap-1">
|
||||
<Anchor href={`#${key}`} />
|
||||
<h4 className="break-all font-mono text-lg font-bold">{getShorthandName(method)}</h4>
|
||||
<h4 className="font-mono text-lg font-bold">:</h4>
|
||||
<h4 className="break-all font-mono text-lg font-bold">
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
[data-backdrop] {
|
||||
background-color: rgb(0 0 0 / 35%);
|
||||
background-color: rgb(0 0 0 / 15%);
|
||||
}
|
||||
|
|
|
@ -22,7 +22,7 @@ export function Section({
|
|||
background = false,
|
||||
gutter = false,
|
||||
children,
|
||||
className,
|
||||
className = '',
|
||||
}: PropsWithChildren<SectionOptions>) {
|
||||
const disclosure = useDisclosureState({ defaultOpen: !defaultClosed });
|
||||
|
||||
|
|
Loading…
Reference in a new issue