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

fix(website): remove layout shift (#9062)

Browse Source 
Co-authored-by: Noel <buechler.noel@outlook.com>
This commit is contained in:
Suneet Tipirneni
2023-03-23 15:44:04 -04:00
committed by GitHub
parent 091824abc5
commit c8c02f957d
9 changed files with 35 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/website/src/components/documentation/section/ConstructorSection.tsx
View File

@@ -2,7 +2,7 @@ import type { ApiConstructor } from '@microsoft/api-extractor-model';
import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
import { useCallback } from 'react';
import { TSDoc } from '../tsdoc/TSDoc';
import { ResponsiveSection } from './ResponsiveSection';
import { DocumentationSection } from './DocumentationSection';
import { ParameterTable } from '~/components/ParameterTable';
export function ConstructorSection({ item }: { item: ApiConstructor }) {
@@ -19,12 +19,12 @@ export function ConstructorSection({ item }: { item: ApiConstructor }) {
);
return (
<ResponsiveSection icon={<VscSymbolMethod size={20} />} padded title="Constructor">
<DocumentationSection icon={<VscSymbolMethod size={20} />} padded title="Constructor">
<div className="flex flex-col gap-2">
<h4 className="break-all font-mono text-lg font-bold">{getShorthandName(item)}</h4>
{item.tsdocComment ? <TSDoc item={item} tsdoc={item.tsdocComment} /> : null}
<ParameterTable item={item} />
</div>
</ResponsiveSection>
</DocumentationSection>
);
}

14
apps/website/src/components/documentation/section/DocumentationSection.tsx Normal file
View File

@@ -0,0 +1,14 @@
import type { SectionOptions } from '@discordjs/ui';
import type { PropsWithChildren } from 'react';
import { Section } from '../../Section';
export function DocumentationSection(opts: PropsWithChildren<SectionOptions & { separator?: boolean }>) {
const { children, separator, ...props } = opts;
return (
<Section {...props}>
{children}
{separator ? <div className="border-light-900 dark:border-dark-100 -mx-8 mt-6 border-t-2" /> : null}
</Section>
);
}

6
apps/website/src/components/documentation/section/MethodsSection.tsx
View File

@@ -8,7 +8,7 @@ import type {
import { ApiItemKind } from '@microsoft/api-extractor-model';
import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
import { useMemo, Fragment } from 'react';
import { ResponsiveSection } from './ResponsiveSection';
import { DocumentationSection } from './DocumentationSection';
import { Method } from '~/components/model/method/Method';
import { resolveMembers } from '~/util/members';
@@ -38,8 +38,8 @@ export function MethodsSection({ item }: { item: ApiItemContainerMixin }) {
);
return (
<ResponsiveSection icon={<VscSymbolMethod size={20} />} padded title="Methods">
<DocumentationSection icon={<VscSymbolMethod size={20} />} padded title="Methods">
<div className="flex flex-col gap-4">{methodItems}</div>
</ResponsiveSection>
</DocumentationSection>
);
}

6
apps/website/src/components/documentation/section/ParametersSection.tsx
View File

@@ -1,12 +1,12 @@
import type { ApiParameterListMixin } from '@microsoft/api-extractor-model';
import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
import { ResponsiveSection } from './ResponsiveSection';
import { DocumentationSection } from './DocumentationSection';
import { ParameterTable } from '~/components/ParameterTable';
export function ParameterSection({ item }: { item: ApiParameterListMixin }) {
return (
<ResponsiveSection icon={<VscSymbolParameter size={20} />} padded title="Parameters">
<DocumentationSection icon={<VscSymbolParameter size={20} />} padded title="Parameters">
<ParameterTable item={item} />
</ResponsiveSection>
</DocumentationSection>
);
}

6
apps/website/src/components/documentation/section/PropertiesSection.tsx
View File

@@ -1,12 +1,12 @@
import type { ApiItemContainerMixin } from '@microsoft/api-extractor-model';
import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
import { ResponsiveSection } from './ResponsiveSection';
import { DocumentationSection } from './DocumentationSection';
import { PropertyList } from '~/components/PropertyList';
export function PropertiesSection({ item }: { item: ApiItemContainerMixin }) {
return (
<ResponsiveSection icon={<VscSymbolProperty size={20} />} padded title="Properties">
<DocumentationSection icon={<VscSymbolProperty size={20} />} padded title="Properties">
<PropertyList item={item} />
</ResponsiveSection>
</DocumentationSection>
);
}

24
apps/website/src/components/documentation/section/ResponsiveSection.tsx
View File

@@ -1,24 +0,0 @@
'use client';
import type { SectionOptions } from '@discordjs/ui';
import { Section } from '@discordjs/ui';
import type { PropsWithChildren } from 'react';
import { useMedia } from 'react-use';
export function ResponsiveSection(opts: PropsWithChildren<SectionOptions & { separator?: boolean }>) {
const matches = useMedia('(max-width: 768px)', true);
const { children, separator, ...rest } = opts;
const props = {
...rest,
dense: matches,
};
return (
<Section {...props}>
{children}
{separator ? <div className="border-light-900 dark:border-dark-100 -mx-8 mt-6 border-t-2" /> : null}
</Section>
);
}

6
apps/website/src/components/documentation/section/SummarySection.tsx
View File

@@ -1,16 +1,16 @@
import type { ApiDeclaredItem } from '@microsoft/api-extractor-model';
import { VscListSelection } from '@react-icons/all-files/vsc/VscListSelection';
import { TSDoc } from '../tsdoc/TSDoc';
import { ResponsiveSection } from './ResponsiveSection';
import { DocumentationSection } from './DocumentationSection';
export function SummarySection({ item }: { item: ApiDeclaredItem }) {
return (
<ResponsiveSection icon={<VscListSelection size={20} />} padded separator title="Summary">
<DocumentationSection icon={<VscListSelection size={20} />} padded separator title="Summary">
{item.tsdocComment?.summarySection ? (
<TSDoc item={item} tsdoc={item.tsdocComment} />
) : (
<p>No summary provided.</p>
)}
</ResponsiveSection>
</DocumentationSection>
);
}

6
apps/website/src/components/documentation/section/TypeParametersSection.tsx
View File

@@ -1,12 +1,12 @@
import type { ApiTypeParameterListMixin } from '@microsoft/api-extractor-model';
import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
import { ResponsiveSection } from './ResponsiveSection';
import { DocumentationSection } from './DocumentationSection';
import { TypeParamTable } from '~/components/TypeParamTable';
export function TypeParameterSection({ item }: { item: ApiTypeParameterListMixin }) {
return (
<ResponsiveSection icon={<VscSymbolParameter size={20} />} padded title="Type Parameters">
<DocumentationSection icon={<VscSymbolParameter size={20} />} padded title="Type Parameters">
<TypeParamTable item={item} />
</ResponsiveSection>
</DocumentationSection>
);
}

6
apps/website/src/components/model/enum/Enum.tsx
View File

@@ -4,7 +4,7 @@ import { Documentation } from '../../documentation/Documentation';
import { EnumMember } from './EnumMember';
import { Panel } from '~/components/Panel';
import { ObjectHeader } from '~/components/documentation/ObjectHeader';
import { ResponsiveSection } from '~/components/documentation/section/ResponsiveSection';
import { DocumentationSection } from '~/components/documentation/section/DocumentationSection';
import { SummarySection } from '~/components/documentation/section/SummarySection';
export function Enum({ item }: { item: ApiEnum }) {
@@ -12,7 +12,7 @@ export function Enum({ item }: { item: ApiEnum }) {
<Documentation>
<ObjectHeader item={item} />
<SummarySection item={item} />
<ResponsiveSection icon={<VscSymbolEnum size={20} />} padded title="Members">
<DocumentationSection icon={<VscSymbolEnum size={20} />} padded title="Members">
<div className="flex flex-col gap-4">
{item.members.map((member) => (
<Panel key={member.containerKey}>
@@ -20,7 +20,7 @@ export function Enum({ item }: { item: ApiEnum }) {
</Panel>
))}
</div>
</ResponsiveSection>
</DocumentationSection>
</Documentation>
);
}