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: more fallback cases

Browse Source
This commit is contained in:
iCrawl
2022-08-23 02:13:10 +02:00
parent 2ecb862e76
commit 6062d361fb
7 changed files with 94 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/website/src/components/DocContainer.tsx
View File

@@ -68,7 +68,7 @@ export function DocContainer({
return (
<Group>
<Stack sx={{ flexGrow: 1, maxWidth: '100%' }}>
<Skeleton visible={router.isFallback}>
<Skeleton visible={router.isFallback} radius="xs">
<Title sx={{ wordBreak: 'break-all' }} order={2} ml="xs">
<Group>
{generateIcon(kind)}
@@ -77,13 +77,13 @@ export function DocContainer({
</Title>
</Skeleton>
<Skeleton visible={router.isFallback}>
<Skeleton visible={router.isFallback} radius="xs">
<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
</Section>
</Skeleton>
<Skeleton visible={router.isFallback}>
<Skeleton visible={router.isFallback} radius="xs">
<Box px="xs" pb="xs">
<SyntaxHighlighter
wrapLongLines
@@ -123,7 +123,7 @@ export function DocContainer({
</Group>
) : null}
<Skeleton visible={router.isFallback}>
<Skeleton visible={router.isFallback} radius="xs">
<Stack>
{typeParams?.length ? (
<Section

131
packages/website/src/components/SidebarLayout.tsx
View File

@@ -19,6 +19,8 @@ import {
useMantineColorScheme,
Center,
Stack,
Skeleton,
LoadingOverlay,
} from '@mantine/core';
import { NextLink } from '@mantine/next';
import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
@@ -149,67 +151,76 @@ export function SidebarLayout({
navbarOffsetBreakpoint="md"
asideOffsetBreakpoint="md"
navbar={
<Navbar hiddenBreakpoint="md" hidden={!opened} width={{ md: 300 }}>
{packageName && data ? (
<>
<Navbar.Section p="xs">
<Stack spacing="xs">
<Menu
onOpen={() => setOpenedLibPicker(true)}
onClose={() => setOpenedLibPicker(false)}
radius="xs"
width="target"
>
<Menu.Target>
<UnstyledButton className={classes.control}>
<Group position="apart">
<Group>
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
<VscPackage size={20} />
</ThemeIcon>
<Text weight="600" size="md">
{packageName}
</Text>
<>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
<LoadingOverlay
sx={{ position: 'fixed', top: 70, width: 300 }}
visible={router.isFallback}
overlayBlur={2}
/>
</MediaQuery>
<Navbar hiddenBreakpoint="md" hidden={!opened} width={{ md: 300 }}>
{packageName && data ? (
<>
<Navbar.Section p="xs">
<Stack spacing="xs">
<Menu
onOpen={() => setOpenedLibPicker(true)}
onClose={() => setOpenedLibPicker(false)}
radius="xs"
width="target"
>
<Menu.Target>
<UnstyledButton className={classes.control}>
<Group position="apart">
<Group>
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
<VscPackage size={20} />
</ThemeIcon>
<Text weight="600" size="md">
{packageName}
</Text>
</Group>
<VscChevronDown className={classes.iconLib} size={20} />
</Group>
<VscChevronDown className={classes.iconLib} size={20} />
</Group>
</UnstyledButton>
</Menu.Target>
<Menu.Dropdown>{libraryMenuItems}</Menu.Dropdown>
</Menu>
</UnstyledButton>
</Menu.Target>
<Menu.Dropdown>{libraryMenuItems}</Menu.Dropdown>
</Menu>
<Menu
onOpen={() => setOpenedVersionPicker(true)}
onClose={() => setOpenedVersionPicker(false)}
radius="xs"
width="target"
>
<Menu.Target>
<UnstyledButton className={classes.control}>
<Group position="apart">
<Group>
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
<VscVersions size={20} />
</ThemeIcon>
<Text weight="600" size="md">
{branchName}
</Text>
<Menu
onOpen={() => setOpenedVersionPicker(true)}
onClose={() => setOpenedVersionPicker(false)}
radius="xs"
width="target"
>
<Menu.Target>
<UnstyledButton className={classes.control}>
<Group position="apart">
<Group>
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
<VscVersions size={20} />
</ThemeIcon>
<Text weight="600" size="md">
{branchName}
</Text>
</Group>
<VscChevronDown className={classes.iconVersion} size={20} />
</Group>
<VscChevronDown className={classes.iconVersion} size={20} />
</Group>
</UnstyledButton>
</Menu.Target>
<Menu.Dropdown>{versionMenuItems}</Menu.Dropdown>
</Menu>
</Stack>
</Navbar.Section>
</UnstyledButton>
</Menu.Target>
<Menu.Dropdown>{versionMenuItems}</Menu.Dropdown>
</Menu>
</Stack>
</Navbar.Section>
<Navbar.Section px="xs" pb="xs" grow component={ScrollArea}>
<SidebarItems members={data.members} setOpened={setOpened} />
</Navbar.Section>
</>
) : null}
</Navbar>
<Navbar.Section px="xs" pb="xs" grow component={ScrollArea}>
<SidebarItems members={data.members} setOpened={setOpened} />
</Navbar.Section>
</>
) : null}
</Navbar>
</>
}
header={
<Header
@@ -227,7 +238,7 @@ export function SidebarLayout({
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<Burger
opened={opened}
onClick={() => setOpened((o) => !o)}
onClick={() => (router.isFallback ? null : setOpened((o) => !o))}
size="sm"
color={theme.colors.gray![6]}
mr="xl"
@@ -235,7 +246,9 @@ export function SidebarLayout({
</MediaQuery>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
<Breadcrumbs>{breadcrumbs}</Breadcrumbs>
<Skeleton visible={router.isFallback} radius="xs">
<Breadcrumbs>{breadcrumbs}</Breadcrumbs>
</Skeleton>
</MediaQuery>
</Box>
<Group>

4
packages/website/src/components/model/Class.tsx
View File

@@ -21,10 +21,10 @@ export function Class({ data }: { data: ApiClassJSON }) {
properties={data.properties}
>
{data.constructor ? <ConstructorSection data={data.constructor} /> : null}
<Skeleton visible={router.isFallback}>
<Skeleton visible={router.isFallback} radius="xs">
<PropertiesSection data={data.properties} />
</Skeleton>
<Skeleton visible={router.isFallback}>
<Skeleton visible={router.isFallback} radius="xs">
<MethodsSection data={data.methods} />
</Skeleton>
</DocContainer>

2
packages/website/src/components/model/Enum.tsx
View File

@@ -13,7 +13,7 @@ export function Enum({ data }: { data: ApiEnumJSON }) {
return (
<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
<Skeleton visible={router.isFallback}>
<Skeleton visible={router.isFallback} radius="xs">
<Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}>
<Stack>
{data.members.map((member) => (

2
packages/website/src/components/model/Function.tsx
View File

@@ -15,7 +15,7 @@ export function Function({ data }: { data: ApiFunctionJSON }) {
summary={data.summary}
typeParams={data.typeParameters}
>
<Skeleton visible={router.isFallback}>
<Skeleton visible={router.isFallback} radius="xs">
<ParametersSection data={data.parameters} />
</Skeleton>
</DocContainer>

4
packages/website/src/components/model/Interface.tsx
View File

@@ -17,10 +17,10 @@ export function Interface({ data }: { data: ApiInterfaceJSON }) {
methods={data.methods}
properties={data.properties}
>
<Skeleton visible={router.isFallback}>
<Skeleton visible={router.isFallback} radius="xs">
<PropertiesSection data={data.properties} />
</Skeleton>
<Skeleton visible={router.isFallback}>
<Skeleton visible={router.isFallback} radius="xs">
<MethodsSection data={data.methods} />
</Skeleton>
</DocContainer>

14
packages/website/src/pages/docs/[...slug].tsx
View File

@@ -1,11 +1,12 @@
import { readFile } from 'node:fs/promises';
import { join } from 'node:path';
import { Affix, Box, Button, Transition } from '@mantine/core';
import { Affix, Box, Button, LoadingOverlay, Transition } from '@mantine/core';
import { useMediaQuery, useWindowScroll } from '@mantine/hooks';
import { ApiFunction, ApiPackage } from '@microsoft/api-extractor-model';
import { MDXRemote } from 'next-mdx-remote';
import { serialize } from 'next-mdx-remote/serialize';
import Head from 'next/head';
import { useRouter } from 'next/router';
import type { GetStaticPaths, GetStaticProps } from 'next/types';
import { VscChevronUp } from 'react-icons/vsc';
import rehypeHighlight from 'rehype-highlight';
@@ -206,10 +207,19 @@ const member = (props?: ApiItemJSON | undefined) => {
}
};
export default function Slug(props: Partial<SidebarLayoutProps & { error?: string }>) {
export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: string }>) {
const router = useRouter();
const [scroll, scrollTo] = useWindowScroll();
const matches = useMediaQuery('(max-width: 1200px)', true, { getInitialValueInEffect: false });
if (router.isFallback) {
return (
<SidebarLayout>
<LoadingOverlay visible overlayBlur={2} />
</SidebarLayout>
);
}
return props.error ? (
<Box sx={{ display: 'flex', maxWidth: '100%', height: '100%' }}>{props.error}</Box>
) : (