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

feat: light theme code blocks

Browse Source
This commit is contained in:
iCrawl
2022-08-23 14:00:02 +02:00
parent 5b4672bad3
commit 28bc4f42c6
6 changed files with 32 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/src/components/CodeListing.tsx
View File

@@ -17,10 +17,12 @@ export enum CodeListingSeparatorType {
const useStyles = createStyles((theme) => ({
outer: {
display: 'flex',
alignItems: 'center',
gap: 16,
[theme.fn.smallerThan('sm')]: {
flexDirection: 'column',
alignItems: 'unset',
},
},
}));

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

@@ -1,4 +1,16 @@
import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea, Skeleton, Divider } from '@mantine/core';
import {
Group,
Stack,
Title,
Text,
Box,
MediaQuery,
Aside,
ScrollArea,
Skeleton,
Divider,
useMantineColorScheme,
} from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/router';
import { Fragment, type PropsWithChildren } from 'react';
@@ -12,7 +24,7 @@ import {
VscSymbolParameter,
} from 'react-icons/vsc';
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { vscDarkPlus, ghcolors } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { HyperlinkedText } from './HyperlinkedText';
import { Section } from './Section';
import { TableOfContentItems } from './TableOfContentItems';
@@ -63,6 +75,7 @@ export function DocContainer({
}: DocContainerProps) {
const router = useRouter();
const matches = useMediaQuery('(max-width: 768px)');
const { colorScheme } = useMantineColorScheme();
return (
<Group>
@@ -88,7 +101,7 @@ export function DocContainer({
<SyntaxHighlighter
wrapLongLines
language="typescript"
style={vscDarkPlus}
style={colorScheme === 'dark' ? vscDarkPlus : ghcolors}
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
>
{excerpt}

2
packages/website/src/components/MethodItem.tsx
View File

@@ -11,10 +11,12 @@ import { Visibility } from '~/DocModel/Visibility';
const useStyles = createStyles((theme) => ({
outer: {
display: 'flex',
alignItems: 'center',
gap: 16,
[theme.fn.smallerThan('sm')]: {
flexDirection: 'column',
alignItems: 'unset',
},
},
}));

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

@@ -107,7 +107,7 @@ const useStyles = createStyles(
paddingLeft: 324,
[theme.fn.smallerThan('lg')]: {
paddingRight: 24,
paddingRight: 54,
},
[theme.fn.smallerThan('md')]: {
@@ -115,6 +115,7 @@ const useStyles = createStyles(
},
[theme.fn.smallerThan('sm')]: {
paddingRight: 24,
height: 300,
},
},
@@ -328,7 +329,7 @@ export function SidebarLayout({
<Box sx={(theme) => ({ height: 200, [theme.fn.smallerThan('sm')]: { height: 300 } })}></Box>
<Box
component="footer"
sx={{ paddingRight: data?.member?.kind !== 'Class' && data?.member?.kind !== 'Interface' ? 24 : 324 }}
sx={{ paddingRight: data?.member?.kind !== 'Class' && data?.member?.kind !== 'Interface' ? 54 : 324 }}
className={classes.footer}
pt={50}
>

8
packages/website/src/components/tsdoc/TSDoc.tsx
View File

@@ -1,9 +1,9 @@
import { Anchor, Box, Code, Text } from '@mantine/core';
import { Anchor, Box, Code, Text, useMantineColorScheme } from '@mantine/core';
import { DocNodeKind, StandardTags } from '@microsoft/tsdoc';
import Link from 'next/link';
import { Fragment, type ReactNode } from 'react';
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { vscDarkPlus, ghcolors } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { BlockComment } from './BlockComment';
import type { DocBlockJSON } from '~/DocModel/comment/CommentBlock';
import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
@@ -14,6 +14,8 @@ import type { DocPlainTextJSON } from '~/DocModel/comment/PlainTextCommentNode';
import type { DocCommentJSON } from '~/DocModel/comment/RootComment';
export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
const { colorScheme } = useMantineColorScheme();
let numberOfExamples = 0;
let exampleIndex = 0;
@@ -74,7 +76,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
wrapLines
wrapLongLines
language={language}
style={vscDarkPlus}
style={colorScheme === 'dark' ? vscDarkPlus : ghcolors}
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
>
{code}

7
packages/website/src/pages/index.tsx
View File

@@ -1,9 +1,9 @@
import { createStyles, Container, Title, Button, Group, Text, Center, Box } from '@mantine/core';
import { createStyles, Container, Title, Button, Group, Text, Center, Box, useMantineColorScheme } from '@mantine/core';
import Image from 'next/future/image';
import Link from 'next/link';
import { FiExternalLink } from 'react-icons/fi';
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { vscDarkPlus, ghcolors } from 'react-syntax-highlighter/dist/cjs/styles/prism';
const useStyles = createStyles((theme) => ({
outer: {
@@ -60,6 +60,7 @@ const useStyles = createStyles((theme) => ({
export default function IndexRoute() {
const { classes } = useStyles();
const { colorScheme } = useMantineColorScheme();
return (
<Container className={classes.outer} size="lg">
@@ -91,7 +92,7 @@ export default function IndexRoute() {
<SyntaxHighlighter
wrapLongLines
language="typescript"
style={vscDarkPlus}
style={colorScheme === 'dark' ? vscDarkPlus : ghcolors}
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
>
{`import { Client, GatewayIntentBits } from 'discord.js';