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

refactor: icons and head

Browse Source
This commit is contained in:
iCrawl
2022-08-22 15:34:21 +02:00
parent abb968de81
commit 4fb4492b17
11 changed files with 105 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -53,7 +53,7 @@ export function DocContainer({
</Group> </Group>
</Title> </Title>
<Section title="Summary" icon={<VscListSelection />} 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>
@@ -97,7 +97,13 @@ export function DocContainer({
<Stack> <Stack>
{typeParams?.length ? ( {typeParams?.length ? (
<Section title="Type Parameters" icon={<VscSymbolParameter />} padded dense={matches} defaultClosed> <Section
title="Type Parameters"
icon={<VscSymbolParameter size={20} />}
padded
dense={matches}
defaultClosed
>
<TypeParamTable data={typeParams} /> <TypeParamTable data={typeParams} />
</Section> </Section>
) : null} ) : null}

7
packages/website/src/components/Section.tsx
View File

@@ -8,7 +8,6 @@ const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({
width: '100%', width: '100%',
padding: `${theme.spacing.xs}px ${theme.spacing.xs}px`, padding: `${theme.spacing.xs}px ${theme.spacing.xs}px`,
color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black, color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black,
fontSize: theme.fontSizes.sm,
'&:hover': { '&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0], backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
@@ -45,11 +44,7 @@ export function Section({
<UnstyledButton className={classes.control} onClick={() => setOpened((o) => !o)}> <UnstyledButton className={classes.control} onClick={() => setOpened((o) => !o)}>
<Group position="apart"> <Group position="apart">
<Group> <Group>
{icon ? ( {icon ? <ThemeIcon size={30}>{icon}</ThemeIcon> : null}
<ThemeIcon variant="outline" size={30}>
{icon}
</ThemeIcon>
) : null}
<Text weight={600} size="md"> <Text weight={600} size="md">
{title} {title}
</Text> </Text>

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

@@ -14,7 +14,7 @@ export function PropertiesSection({ data }: { data: ApiClassJSON['properties'] |
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return data.length ? ( return data.length ? (
<Section title="Properties" icon={<VscSymbolProperty />} padded dense={matches}> <Section title="Properties" icon={<VscSymbolProperty size={20} />} padded dense={matches}>
<PropertyList data={data} /> <PropertyList data={data} />
</Section> </Section>
) : null; ) : null;
@@ -24,7 +24,7 @@ export function MethodsSection({ data }: { data: ApiClassJSON['methods'] | ApiIn
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return data.length ? ( return data.length ? (
<Section title="Methods" icon={<VscSymbolMethod />} padded dense={matches}> <Section title="Methods" icon={<VscSymbolMethod size={20} />} padded dense={matches}>
<MethodList data={data} /> <MethodList data={data} />
</Section> </Section>
) : null; ) : null;
@@ -34,7 +34,7 @@ export function ParametersSection({ data }: { data: ParameterDocumentation[] })
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return data.length ? ( return data.length ? (
<Section title="Parameters" icon={<VscSymbolConstant />} padded dense={matches}> <Section title="Parameters" icon={<VscSymbolConstant size={20} />} padded dense={matches}>
<ParameterTable data={data} /> <ParameterTable data={data} />
</Section> </Section>
) : null; ) : null;
@@ -53,7 +53,7 @@ export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
}, '')})`; }, '')})`;
return data.parameters.length ? ( return data.parameters.length ? (
<Section title="Constructor" icon={<VscSymbolMethod />} padded dense={matches}> <Section title="Constructor" icon={<VscSymbolMethod size={20} />} padded dense={matches}>
<Stack id={`${data.name}`} className="scroll-mt-30" spacing="xs"> <Stack id={`${data.name}`} className="scroll-mt-30" spacing="xs">
<Group> <Group>
<Stack> <Stack>

12
packages/website/src/components/SidebarItems.tsx
View File

@@ -51,17 +51,17 @@ function groupMembers(members: Members): GroupedMembers {
function resolveIcon(item: keyof GroupedMembers) { function resolveIcon(item: keyof GroupedMembers) {
switch (item) { switch (item) {
case 'Classes': case 'Classes':
return <VscSymbolClass />; return <VscSymbolClass size={20} />;
case 'Enums': case 'Enums':
return <VscSymbolEnum />; return <VscSymbolEnum size={20} />;
case 'Interfaces': case 'Interfaces':
return <VscSymbolInterface />; return <VscSymbolInterface size={20} />;
case 'Types': case 'Types':
return <VscSymbolField />; return <VscSymbolField size={20} />;
case 'Variables': case 'Variables':
return <VscSymbolVariable />; return <VscSymbolVariable size={20} />;
case 'Functions': case 'Functions':
return <VscSymbolMethod />; return <VscSymbolMethod size={20} />;
} }
} }

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

@@ -130,8 +130,8 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
<UnstyledButton className={classes.control}> <UnstyledButton className={classes.control}>
<Group position="apart"> <Group position="apart">
<Group> <Group>
<ThemeIcon variant="outline" size={30}> <ThemeIcon size={30}>
<VscPackage /> <VscPackage size={20} />
</ThemeIcon> </ThemeIcon>
<Text weight="600" size="md"> <Text weight="600" size="md">
{packageName} {packageName}

37
packages/website/src/components/TableOfContentItems.tsx
View File

@@ -1,5 +1,5 @@
import { createStyles, Group, Text, Box, Stack } from '@mantine/core'; import { createStyles, Group, Text, Box, Stack, ThemeIcon } from '@mantine/core';
import { VscListSelection } from 'react-icons/vsc'; import { VscListSelection, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
import type { ApiClassJSON, ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder'; import type { ApiClassJSON, ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
const useStyles = createStyles((theme) => ({ const useStyles = createStyles((theme) => ({
@@ -13,13 +13,14 @@ const useStyles = createStyles((theme) => ({
fontSize: theme.fontSizes.sm, fontSize: theme.fontSizes.sm,
padding: theme.spacing.xs, padding: theme.spacing.xs,
paddingLeft: theme.spacing.md, paddingLeft: theme.spacing.md,
marginLeft: 8, marginLeft: 14,
borderTopRightRadius: theme.radius.sm, borderTopRightRadius: theme.radius.sm,
borderBottomRightRadius: theme.radius.sm, borderBottomRightRadius: theme.radius.sm,
borderLeft: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark![4] : theme.colors.gray![3]}`, borderLeft: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark![4] : theme.colors.gray![3]}`,
'&:hover': { '&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0], backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
}, },
}, },
})); }));
@@ -64,20 +65,38 @@ export function TableOfContentItems({
return ( return (
<Box> <Box>
<Group mb="md"> <Group mb="md" ml={2}>
<VscListSelection size={20} /> <VscListSelection size={25} />
<Text>Table of content</Text> <Text>Table of contents</Text>
</Group> </Group>
<Stack> <Stack spacing={0}>
{propertyItems.length ? ( {propertyItems.length ? (
<Box> <Box>
<Text>Properties</Text> <Group>
<ThemeIcon size={30}>
<VscSymbolProperty size={20} />
</ThemeIcon>
<Box p="sm" pl={0}>
<Text weight={600} size="md">
Properties
</Text>
</Box>
</Group>
{propertyItems} {propertyItems}
</Box> </Box>
) : null} ) : null}
{methodItems.length ? ( {methodItems.length ? (
<Box> <Box>
<Text>Methods</Text> <Group spacing="xs">
<ThemeIcon size={30}>
<VscSymbolMethod size={20} />
</ThemeIcon>
<Box p="sm" pl={0}>
<Text weight={600} size="md">
Methods
</Text>
</Box>
</Group>
{methodItems} {methodItems}
</Box> </Box>
) : null} ) : null}

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

@@ -11,7 +11,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}>
<Section title="Members" icon={<VscSymbolEnumMember />} padded dense={matches}> <Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}>
<Stack> <Stack>
{data.members.map((member) => ( {data.members.map((member) => (
<CodeListing <CodeListing

65
packages/website/src/pages/_app.tsx
View File

@@ -1,6 +1,7 @@
import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core'; import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core';
import { useColorScheme } from '@mantine/hooks'; import { useColorScheme } from '@mantine/hooks';
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import Head from 'next/head';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { RouterTransition } from '~/components/RouterTransition'; import { RouterTransition } from '~/components/RouterTransition';
import '../styles/unocss.css'; import '../styles/unocss.css';
@@ -17,34 +18,40 @@ export default function MyApp({ Component, pageProps }: AppProps) {
}, [preferredColorScheme]); }, [preferredColorScheme]);
return ( return (
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}> <>
<MantineProvider <Head>
theme={{ <title key="title">discord.js</title>
fontFamily: 'Inter', <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
colorScheme, </Head>
colors: { <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
blurple: [ <MantineProvider
'#5865F2', theme={{
'#5865F2', fontFamily: 'Inter',
'#5865F2', colorScheme,
'#5865F2', colors: {
'#5865F2', blurple: [
'#5865F2', '#5865F2',
'#5865F2', '#5865F2',
'#5865F2', '#5865F2',
'#5865F2', '#5865F2',
'#5865F2', '#5865F2',
], '#5865F2',
}, '#5865F2',
primaryColor: 'blurple', '#5865F2',
}} '#5865F2',
withCSSVariables '#5865F2',
withNormalizeCSS ],
withGlobalStyles },
> primaryColor: 'blurple',
<RouterTransition /> }}
<Component {...pageProps} /> withCSSVariables
</MantineProvider> withNormalizeCSS
</ColorSchemeProvider> withGlobalStyles
>
<RouterTransition />
<Component {...pageProps} />
</MantineProvider>
</ColorSchemeProvider>
</>
); );
} }

3
packages/website/src/pages/_document.tsx
View File

@@ -15,9 +15,8 @@ export default class _Document extends Document {
public override render() { public override render() {
return ( return (
<Html> <Html lang="en">
<Head> <Head>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

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

@@ -1,8 +1,8 @@
/* eslint-disable @typescript-eslint/no-throw-literal */
import { readFile } from 'node:fs/promises'; import { readFile } from 'node:fs/promises';
import { join } from 'node:path'; import { join } from 'node:path';
import { Box } from '@mantine/core'; import { Box } from '@mantine/core';
import { ApiFunction } from '@microsoft/api-extractor-model'; import { ApiFunction } from '@microsoft/api-extractor-model';
import Head from 'next/head';
import type { GetStaticPaths, GetStaticProps } from 'next/types'; import type { GetStaticPaths, GetStaticProps } from 'next/types';
import type { import type {
ApiClassJSON, ApiClassJSON,
@@ -150,7 +150,16 @@ export default function Slug(props: Partial<SidebarLayoutProps & { error?: strin
<Box sx={{ display: 'flex', maxWidth: '100%', height: '100%' }}>{props.error}</Box> <Box sx={{ display: 'flex', maxWidth: '100%', height: '100%' }}>{props.error}</Box>
) : ( ) : (
<MemberProvider member={props.data?.member}> <MemberProvider member={props.data?.member}>
<SidebarLayout {...props}>{props.data?.member ? member(props.data.member) : null}</SidebarLayout> <SidebarLayout {...props}>
{props.data?.member ? (
<>
<Head>
<title key="title">discord.js | {props.data.member.name}</title>
</Head>
{member(props.data.member)}
</>
) : null}
</SidebarLayout>
</MemberProvider> </MemberProvider>
); );
} }

14
packages/website/src/util/icon.tsx
View File

@@ -1,13 +1,13 @@
import { VscSymbolClass, VscSymbolMethod, VscSymbolEnum, VscSymbolInterface, VscSymbolVariable } from 'react-icons/vsc'; import { VscSymbolClass, VscSymbolMethod, VscSymbolEnum, VscSymbolInterface, VscSymbolVariable } from 'react-icons/vsc';
export function generateIcon(kind: string, className?: string) { export function generateIcon(kind: string) {
const icons = { const icons = {
Class: <VscSymbolClass className={className} />, Class: <VscSymbolClass />,
Method: <VscSymbolMethod className={className} />, Method: <VscSymbolMethod />,
Function: <VscSymbolMethod className={className} />, Function: <VscSymbolMethod />,
Enum: <VscSymbolEnum className={className} />, Enum: <VscSymbolEnum />,
Interface: <VscSymbolInterface className={className} />, Interface: <VscSymbolInterface />,
TypeAlias: <VscSymbolVariable className={className} />, TypeAlias: <VscSymbolVariable />,
}; };
return icons[kind as keyof typeof icons]; return icons[kind as keyof typeof icons];