feat: add footer links

This commit is contained in:
iCrawl
2022-08-23 10:11:07 +02:00
parent ffafde0b6b
commit 103e1bd843
2 changed files with 65 additions and 19 deletions

View File

@@ -17,10 +17,11 @@ import {
Menu, Menu,
ActionIcon, ActionIcon,
useMantineColorScheme, useMantineColorScheme,
Center,
Stack, Stack,
Skeleton, Skeleton,
LoadingOverlay, LoadingOverlay,
Container,
Title,
} from '@mantine/core'; } from '@mantine/core';
import { NextLink } from '@mantine/next'; import { NextLink } from '@mantine/next';
import type { MDXRemoteSerializeResult } from 'next-mdx-remote'; import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
@@ -314,21 +315,60 @@ export function SidebarLayout({
paddingLeft: 24, paddingLeft: 24,
}, },
})} })}
pt={70} pt={50}
> >
<Center> <Container>
<Link href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" passHref> <Group position="apart">
<a title="Vercel"> <Link href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" passHref>
<Image <a title="Vercel">
src="/powered-by-vercel.svg" <Image
alt="Vercel" src="/powered-by-vercel.svg"
width={0} alt="Vercel"
height={0} width={0}
style={{ height: '100%', width: '100%', maxWidth: 250 }} height={0}
/> style={{ height: '100%', width: '100%', maxWidth: 200 }}
</a> />
</Link> </a>
</Center> </Link>
<Group align="flex-start" spacing={48}>
<Stack spacing={8}>
<Title order={4}>Community</Title>
<Stack spacing={0}>
<Link href="https://discord.gg/djs" passHref>
<Anchor component="a" target="_blank" rel="noopener noreferrer">
Discord
</Anchor>
</Link>
<Link href="https://github.com/discordjs/discord.js/discussions" passHref>
<Anchor component="a" target="_blank" rel="noopener noreferrer">
GitHub discussions
</Anchor>
</Link>
</Stack>
</Stack>
<Stack spacing={8}>
<Title order={4}>Project</Title>
<Stack spacing={0}>
<Link href="https://github.com/discordjs/discord.js" passHref>
<Anchor component="a" target="_blank" rel="noopener noreferrer">
discord.js
</Anchor>
</Link>
<Link href="https://discordjs.guide" passHref>
<Anchor component="a" target="_blank" rel="noopener noreferrer">
discord.js guide
</Anchor>
</Link>
<Link href="https://discord-api-types.dev" passHref>
<Anchor component="a" target="_blank" rel="noopener noreferrer">
discord-api-types
</Anchor>
</Link>
</Stack>
</Stack>
</Group>
</Group>
</Container>
</Box> </Box>
</article> </article>
</AppShell> </AppShell>

View File

@@ -1,7 +1,7 @@
import { readFile } from 'node:fs/promises'; import { readFile } from 'node:fs/promises';
import { join } from 'node:path'; import { join } from 'node:path';
import { cwd } from 'node:process'; import { cwd } from 'node:process';
import { Affix, Box, Button, LoadingOverlay, Transition } from '@mantine/core'; import { ActionIcon, Affix, Box, LoadingOverlay, Transition } from '@mantine/core';
import { useMediaQuery, useWindowScroll } from '@mantine/hooks'; import { useMediaQuery, useWindowScroll } from '@mantine/hooks';
import { ApiFunction, ApiItemKind, type ApiPackage } from '@microsoft/api-extractor-model'; import { ApiFunction, ApiItemKind, type ApiPackage } from '@microsoft/api-extractor-model';
import { MDXRemote } from 'next-mdx-remote'; import { MDXRemote } from 'next-mdx-remote';
@@ -255,9 +255,15 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
> >
<Transition transition="slide-up" mounted={scroll.y > 200}> <Transition transition="slide-up" mounted={scroll.y > 200}>
{(transitionStyles) => ( {(transitionStyles) => (
<Button leftIcon={<VscChevronUp size={20} />} style={transitionStyles} onClick={() => scrollTo({ y: 0 })}> <ActionIcon
Scroll to top variant="filled"
</Button> color="blurple"
size={30}
style={transitionStyles}
onClick={() => scrollTo({ y: 0 })}
>
<VscChevronUp size={20} />
</ActionIcon>
)} )}
</Transition> </Transition>
</Affix> </Affix>