Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-14 02:23:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: use fallback with loading

Browse Source
This commit is contained in:
iCrawl
2022-08-23 01:43:10 +02:00
parent 360936140b
commit 2ecb862e76
7 changed files with 91 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea } from '@mantine/core'; import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea, Skeleton } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks'; import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/router';
import { Fragment, ReactNode } from 'react'; import { Fragment, ReactNode } from 'react';
import { import {
VscSymbolClass, VscSymbolClass,
@@ -61,32 +62,39 @@ export function DocContainer({
methods, methods,
properties, properties,
}: DocContainerProps) { }: DocContainerProps) {
const router = useRouter();
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return ( return (
<Group> <Group>
<Stack sx={{ flexGrow: 1, maxWidth: '100%' }}> <Stack sx={{ flexGrow: 1, maxWidth: '100%' }}>
<Title sx={{ wordBreak: 'break-all' }} order={2} ml="xs"> <Skeleton visible={router.isFallback}>
<Group> <Title sx={{ wordBreak: 'break-all' }} order={2} ml="xs">
{generateIcon(kind)} <Group>
{name} {generateIcon(kind)}
</Group> {name}
</Title> </Group>
</Title>
</Skeleton>
<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}> <Skeleton visible={router.isFallback}>
{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>} <Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
</Section> {summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
</Section>
</Skeleton>
<Box px="xs" pb="xs"> <Skeleton visible={router.isFallback}>
<SyntaxHighlighter <Box px="xs" pb="xs">
wrapLongLines <SyntaxHighlighter
language="typescript" wrapLongLines
style={vscDarkPlus} language="typescript"
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }} style={vscDarkPlus}
> codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
{excerpt} >
</SyntaxHighlighter> {excerpt}
</Box> </SyntaxHighlighter>
</Box>
</Skeleton>
{extendsTokens?.length ? ( {extendsTokens?.length ? (
<Group noWrap> <Group noWrap>
@@ -115,20 +123,22 @@ export function DocContainer({
</Group> </Group>
) : null} ) : null}
<Stack> <Skeleton visible={router.isFallback}>
{typeParams?.length ? ( <Stack>
<Section {typeParams?.length ? (
title="Type Parameters" <Section
icon={<VscSymbolParameter size={20} />} title="Type Parameters"
padded icon={<VscSymbolParameter size={20} />}
dense={matches} padded
defaultClosed dense={matches}
> defaultClosed
<TypeParamTable data={typeParams} /> >
</Section> <TypeParamTable data={typeParams} />
) : null} </Section>
<Stack>{children}</Stack> ) : null}
</Stack> <Stack>{children}</Stack>
</Stack>
</Skeleton>
</Stack> </Stack>
{(kind === 'Class' || kind === 'Interface') && (methods?.length || properties?.length) ? ( {(kind === 'Class' || kind === 'Interface') && (methods?.length || properties?.length) ? (
<MediaQuery smallerThan="lg" styles={{ display: 'none' }}> <MediaQuery smallerThan="lg" styles={{ display: 'none' }}>

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

@@ -1,8 +1,12 @@
import { Skeleton } from '@mantine/core';
import { useRouter } from 'next/router';
import { DocContainer } from '../DocContainer'; import { DocContainer } from '../DocContainer';
import { ConstructorSection, MethodsSection, PropertiesSection } from '../Sections'; import { ConstructorSection, MethodsSection, PropertiesSection } from '../Sections';
import type { ApiClassJSON } from '~/DocModel/ApiNodeJSONEncoder'; import type { ApiClassJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Class({ data }: { data: ApiClassJSON }) { export function Class({ data }: { data: ApiClassJSON }) {
const router = useRouter();
return ( return (
<DocContainer <DocContainer
name={data.name} name={data.name}
@@ -17,8 +21,12 @@ 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}
<PropertiesSection data={data.properties} /> <Skeleton visible={router.isFallback}>
<MethodsSection data={data.methods} /> <PropertiesSection data={data.properties} />
</Skeleton>
<Skeleton visible={router.isFallback}>
<MethodsSection data={data.methods} />
</Skeleton>
</DocContainer> </DocContainer>
); );
} }

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

@@ -1,5 +1,6 @@
import { Stack } from '@mantine/core'; import { Skeleton, Stack } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks'; import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/router';
import { VscSymbolEnumMember } from 'react-icons/vsc'; import { VscSymbolEnumMember } from 'react-icons/vsc';
import { CodeListing, CodeListingSeparatorType } from '../CodeListing'; import { CodeListing, CodeListingSeparatorType } from '../CodeListing';
import { DocContainer } from '../DocContainer'; import { DocContainer } from '../DocContainer';
@@ -7,23 +8,26 @@ import { Section } from '../Section';
import type { ApiEnumJSON } from '~/DocModel/ApiNodeJSONEncoder'; import type { ApiEnumJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Enum({ data }: { data: ApiEnumJSON }) { export function Enum({ data }: { data: ApiEnumJSON }) {
const router = useRouter();
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
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}>
<Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}> <Skeleton visible={router.isFallback}>
<Stack> <Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}>
{data.members.map((member) => ( <Stack>
<CodeListing {data.members.map((member) => (
key={member.name} <CodeListing
name={member.name} key={member.name}
separator={CodeListingSeparatorType.Value} name={member.name}
typeTokens={member.initializerTokens} separator={CodeListingSeparatorType.Value}
summary={member.summary} typeTokens={member.initializerTokens}
/> summary={member.summary}
))} />
</Stack> ))}
</Section> </Stack>
</Section>
</Skeleton>
</DocContainer> </DocContainer>
); );
} }

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

@@ -1,8 +1,12 @@
import { Skeleton } from '@mantine/core';
import { useRouter } from 'next/router';
import { DocContainer } from '../DocContainer'; import { DocContainer } from '../DocContainer';
import { ParametersSection } from '../Sections'; import { ParametersSection } from '../Sections';
import type { ApiFunctionJSON } from '~/DocModel/ApiNodeJSONEncoder'; import type { ApiFunctionJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Function({ data }: { data: ApiFunctionJSON }) { export function Function({ data }: { data: ApiFunctionJSON }) {
const router = useRouter();
return ( return (
<DocContainer <DocContainer
name={`${data.name}${data.overloadIndex && data.overloadIndex > 1 ? ` (${data.overloadIndex})` : ''}`} name={`${data.name}${data.overloadIndex && data.overloadIndex > 1 ? ` (${data.overloadIndex})` : ''}`}
@@ -11,7 +15,9 @@ export function Function({ data }: { data: ApiFunctionJSON }) {
summary={data.summary} summary={data.summary}
typeParams={data.typeParameters} typeParams={data.typeParameters}
> >
<ParametersSection data={data.parameters} /> <Skeleton visible={router.isFallback}>
<ParametersSection data={data.parameters} />
</Skeleton>
</DocContainer> </DocContainer>
); );
} }

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

@@ -1,8 +1,12 @@
import { Skeleton } from '@mantine/core';
import { useRouter } from 'next/router';
import { DocContainer } from '../DocContainer'; import { DocContainer } from '../DocContainer';
import { MethodsSection, PropertiesSection } from '../Sections'; import { MethodsSection, PropertiesSection } from '../Sections';
import type { ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder'; import type { ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Interface({ data }: { data: ApiInterfaceJSON }) { export function Interface({ data }: { data: ApiInterfaceJSON }) {
const router = useRouter();
return ( return (
<DocContainer <DocContainer
name={data.name} name={data.name}
@@ -13,8 +17,12 @@ export function Interface({ data }: { data: ApiInterfaceJSON }) {
methods={data.methods} methods={data.methods}
properties={data.properties} properties={data.properties}
> >
<PropertiesSection data={data.properties} /> <Skeleton visible={router.isFallback}>
<MethodsSection data={data.methods} /> <PropertiesSection data={data.properties} />
</Skeleton>
<Skeleton visible={router.isFallback}>
<MethodsSection data={data.methods} />
</Skeleton>
</DocContainer> </DocContainer>
); );
} }

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

@@ -121,7 +121,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
return { return {
paths: pkgs, paths: pkgs,
fallback: 'blocking', fallback: true,
}; };
}; };

2
packages/website/src/pages/docs/packages/[package]/index.tsx
View File

@@ -30,7 +30,7 @@ export const getStaticPaths: GetStaticPaths = () => {
return { return {
paths: versions, paths: versions,
fallback: 'blocking', fallback: false,
}; };
}; };