feat: markdown syntax highlighting

This commit is contained in:
iCrawl
2022-08-23 08:48:44 +02:00
parent 17559becef
commit c826ad3ade
8 changed files with 70 additions and 11 deletions

View File

@@ -1,7 +1,7 @@
import { createStyles, Group, Text, NavLink, Box } from '@mantine/core';
import Link from 'next/link';
import { useRouter } from 'next/router';
import type { Dispatch, SetStateAction } from 'react';
import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
import {
VscSymbolClass,
VscSymbolEnum,
@@ -99,10 +99,13 @@ export function SidebarItems({
setOpened: Dispatch<SetStateAction<boolean>>;
}) {
const router = useRouter();
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
const { classes } = useStyles();
const groupItems = groupMembers(members);
const asPathWithoutQueryAndAnchor = router.asPath.split('?')[0]?.split('#')[0];
useEffect(() => {
setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0] ?? '');
}, [router.asPath]);
return (
<Box pb="xl">

View File

@@ -103,6 +103,7 @@ export function SidebarLayout({
children,
}: PropsWithChildren<Partial<SidebarLayoutProps>>) {
const router = useRouter();
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
const { data: versions } = useSWR<string[]>(
`https://docs.discordjs.dev/api/info?package=${packageName ?? 'builders'}`,
fetcher,
@@ -120,6 +121,10 @@ export function SidebarLayout({
setOpenedVersionPicker(false);
}, []);
useEffect(() => {
setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0]?.split(':')[0] ?? '');
}, [router.asPath]);
const { classes } = useStyles({ openedLib: openedLibPicker, openedVersion: openedVersionPicker });
const versionMenuItems =
@@ -129,8 +134,7 @@ export function SidebarLayout({
</Menu.Item>
)) ?? [];
const asPathWithoutQueryAndAnchor = router.asPath.split('?')[0]?.split('#')[0]?.split(':')[0];
const breadcrumbs = asPathWithoutQueryAndAnchor?.split('/').map((path, idx, original) => (
const breadcrumbs = asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => (
<Link key={idx} href={original.slice(0, idx + 1).join('/')} passHref>
<Anchor component="a">{path}</Anchor>
</Link>