Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-15 19: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 ( return (
<Group> <Group>
<Stack sx={{ flexGrow: 1, maxWidth: '100%' }}> <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"> <Title sx={{ wordBreak: 'break-all' }} order={2} ml="xs">
<Group> <Group>
{generateIcon(kind)} {generateIcon(kind)}
@@ -77,13 +77,13 @@ export function DocContainer({
</Title> </Title>
</Skeleton> </Skeleton>
<Skeleton visible={router.isFallback}> <Skeleton visible={router.isFallback} radius="xs">
<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}> <Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>} {summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
</Section> </Section>
</Skeleton> </Skeleton>
<Skeleton visible={router.isFallback}> <Skeleton visible={router.isFallback} radius="xs">
<Box px="xs" pb="xs"> <Box px="xs" pb="xs">
<SyntaxHighlighter <SyntaxHighlighter
wrapLongLines wrapLongLines
@@ -123,7 +123,7 @@ export function DocContainer({
</Group> </Group>
) : null} ) : null}
<Skeleton visible={router.isFallback}> <Skeleton visible={router.isFallback} radius="xs">
<Stack> <Stack>
{typeParams?.length ? ( {typeParams?.length ? (
<Section <Section

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

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

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

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

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

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

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

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

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

@@ -1,11 +1,12 @@
import { readFile } from 'node:fs/promises'; import { readFile } from 'node:fs/promises';
import { join } from 'node:path'; 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 { useMediaQuery, useWindowScroll } from '@mantine/hooks';
import { ApiFunction, ApiPackage } from '@microsoft/api-extractor-model'; import { ApiFunction, ApiPackage } from '@microsoft/api-extractor-model';
import { MDXRemote } from 'next-mdx-remote'; import { MDXRemote } from 'next-mdx-remote';
import { serialize } from 'next-mdx-remote/serialize'; import { serialize } from 'next-mdx-remote/serialize';
import Head from 'next/head'; import Head from 'next/head';
import { useRouter } from 'next/router';
import type { GetStaticPaths, GetStaticProps } from 'next/types'; import type { GetStaticPaths, GetStaticProps } from 'next/types';
import { VscChevronUp } from 'react-icons/vsc'; import { VscChevronUp } from 'react-icons/vsc';
import rehypeHighlight from 'rehype-highlight'; 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 [scroll, scrollTo] = useWindowScroll();
const matches = useMediaQuery('(max-width: 1200px)', true, { getInitialValueInEffect: false }); const matches = useMediaQuery('(max-width: 1200px)', true, { getInitialValueInEffect: false });
if (router.isFallback) {
return (
<SidebarLayout>
<LoadingOverlay visible overlayBlur={2} />
</SidebarLayout>
);
}
return props.error ? ( return props.error ? (
<Box sx={{ display: 'flex', maxWidth: '100%', height: '100%' }}>{props.error}</Box> <Box sx={{ display: 'flex', maxWidth: '100%', height: '100%' }}>{props.error}</Box>
) : ( ) : (