Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-10 00:23:30 +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>
</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>}
</Section>
@@ -97,7 +97,13 @@ export function DocContainer({
<Stack>
{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} />
</Section>
) : null}

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

@@ -8,7 +8,6 @@ const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({
width: '100%',
padding: `${theme.spacing.xs}px ${theme.spacing.xs}px`,
color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black,
fontSize: theme.fontSizes.sm,
'&:hover': {
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)}>
<Group position="apart">
<Group>
{icon ? (
<ThemeIcon variant="outline" size={30}>
{icon}
</ThemeIcon>
) : null}
{icon ? <ThemeIcon size={30}>{icon}</ThemeIcon> : null}
<Text weight={600} size="md">
{title}
</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 });
return data.length ? (
<Section title="Properties" icon={<VscSymbolProperty />} padded dense={matches}>
<Section title="Properties" icon={<VscSymbolProperty size={20} />} padded dense={matches}>
<PropertyList data={data} />
</Section>
) : null;
@@ -24,7 +24,7 @@ export function MethodsSection({ data }: { data: ApiClassJSON['methods'] | ApiIn
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return data.length ? (
<Section title="Methods" icon={<VscSymbolMethod />} padded dense={matches}>
<Section title="Methods" icon={<VscSymbolMethod size={20} />} padded dense={matches}>
<MethodList data={data} />
</Section>
) : null;
@@ -34,7 +34,7 @@ export function ParametersSection({ data }: { data: ParameterDocumentation[] })
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return data.length ? (
<Section title="Parameters" icon={<VscSymbolConstant />} padded dense={matches}>
<Section title="Parameters" icon={<VscSymbolConstant size={20} />} padded dense={matches}>
<ParameterTable data={data} />
</Section>
) : null;
@@ -53,7 +53,7 @@ export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
}, '')})`;
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">
<Group>
<Stack>

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

@@ -51,17 +51,17 @@ function groupMembers(members: Members): GroupedMembers {
function resolveIcon(item: keyof GroupedMembers) {
switch (item) {
case 'Classes':
return <VscSymbolClass />;
return <VscSymbolClass size={20} />;
case 'Enums':
return <VscSymbolEnum />;
return <VscSymbolEnum size={20} />;
case 'Interfaces':
return <VscSymbolInterface />;
return <VscSymbolInterface size={20} />;
case 'Types':
return <VscSymbolField />;
return <VscSymbolField size={20} />;
case 'Variables':
return <VscSymbolVariable />;
return <VscSymbolVariable size={20} />;
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}>
<Group position="apart">
<Group>
<ThemeIcon variant="outline" size={30}>
<VscPackage />
<ThemeIcon size={30}>
<VscPackage size={20} />
</ThemeIcon>
<Text weight="600" size="md">
{packageName}

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

@@ -1,5 +1,5 @@
import { createStyles, Group, Text, Box, Stack } from '@mantine/core';
import { VscListSelection } from 'react-icons/vsc';
import { createStyles, Group, Text, Box, Stack, ThemeIcon } from '@mantine/core';
import { VscListSelection, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
import type { ApiClassJSON, ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
const useStyles = createStyles((theme) => ({
@@ -13,13 +13,14 @@ const useStyles = createStyles((theme) => ({
fontSize: theme.fontSizes.sm,
padding: theme.spacing.xs,
paddingLeft: theme.spacing.md,
marginLeft: 8,
marginLeft: 14,
borderTopRightRadius: theme.radius.sm,
borderBottomRightRadius: theme.radius.sm,
borderLeft: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark![4] : theme.colors.gray![3]}`,
'&:hover': {
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 (
<Box>
<Group mb="md">
<VscListSelection size={20} />
<Text>Table of content</Text>
<Group mb="md" ml={2}>
<VscListSelection size={25} />
<Text>Table of contents</Text>
</Group>
<Stack>
<Stack spacing={0}>
{propertyItems.length ? (
<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}
</Box>
) : null}
{methodItems.length ? (
<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}
</Box>
) : null}

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

@@ -11,7 +11,7 @@ export function Enum({ data }: { data: ApiEnumJSON }) {
return (
<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>
{data.members.map((member) => (
<CodeListing

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

@@ -1,6 +1,7 @@
import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core';
import { useColorScheme } from '@mantine/hooks';
import type { AppProps } from 'next/app';
import Head from 'next/head';
import { useEffect, useState } from 'react';
import { RouterTransition } from '~/components/RouterTransition';
import '../styles/unocss.css';
@@ -17,34 +18,40 @@ export default function MyApp({ Component, pageProps }: AppProps) {
}, [preferredColorScheme]);
return (
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<MantineProvider
theme={{
fontFamily: 'Inter',
colorScheme,
colors: {
blurple: [
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
],
},
primaryColor: 'blurple',
}}
withCSSVariables
withNormalizeCSS
withGlobalStyles
>
<RouterTransition />
<Component {...pageProps} />
</MantineProvider>
</ColorSchemeProvider>
<>
<Head>
<title key="title">discord.js</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
</Head>
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<MantineProvider
theme={{
fontFamily: 'Inter',
colorScheme,
colors: {
blurple: [
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
'#5865F2',
],
},
primaryColor: 'blurple',
}}
withCSSVariables
withNormalizeCSS
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() {
return (
<Html>
<Html lang="en">
<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="icon" type="image/png" sizes="32x32" href="/favicon-32x32.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 { join } from 'node:path';
import { Box } from '@mantine/core';
import { ApiFunction } from '@microsoft/api-extractor-model';
import Head from 'next/head';
import type { GetStaticPaths, GetStaticProps } from 'next/types';
import type {
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>
) : (
<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>
);
}

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

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