From 103e1bd8439c1c8bb236fa1775b9fa9036457666 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Tue, 23 Aug 2022 10:11:07 +0200
Subject: [PATCH] feat: add footer links

---
 .../website/src/components/SidebarLayout.tsx  | 70 +++++++++++++++----
 packages/website/src/pages/docs/[...slug].tsx | 14 ++--
 2 files changed, 65 insertions(+), 19 deletions(-)

diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index 5acef0f86..ed750e945 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -17,10 +17,11 @@ import {
 	Menu,
 	ActionIcon,
 	useMantineColorScheme,
-	Center,
 	Stack,
 	Skeleton,
 	LoadingOverlay,
+	Container,
+	Title,
 } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
@@ -314,21 +315,60 @@ export function SidebarLayout({
 							paddingLeft: 24,
 						},
 					})}
-					pt={70}
+					pt={50}
 				>
-					<Center>
-						<Link href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" passHref>
-							<a title="Vercel">
-								<Image
-									src="/powered-by-vercel.svg"
-									alt="Vercel"
-									width={0}
-									height={0}
-									style={{ height: '100%', width: '100%', maxWidth: 250 }}
-								/>
-							</a>
-						</Link>
-					</Center>
+					<Container>
+						<Group position="apart">
+							<Link href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" passHref>
+								<a title="Vercel">
+									<Image
+										src="/powered-by-vercel.svg"
+										alt="Vercel"
+										width={0}
+										height={0}
+										style={{ height: '100%', width: '100%', maxWidth: 200 }}
+									/>
+								</a>
+							</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>
 			</article>
 		</AppShell>
diff --git a/packages/website/src/pages/docs/[...slug].tsx b/packages/website/src/pages/docs/[...slug].tsx
index 858d4ebdf..dbae04ba8 100644
--- a/packages/website/src/pages/docs/[...slug].tsx
+++ b/packages/website/src/pages/docs/[...slug].tsx
@@ -1,7 +1,7 @@
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 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 { ApiFunction, ApiItemKind, type ApiPackage } from '@microsoft/api-extractor-model';
 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}>
 						{(transitionStyles) => (
-							<Button leftIcon={<VscChevronUp size={20} />} style={transitionStyles} onClick={() => scrollTo({ y: 0 })}>
-								Scroll to top
-							</Button>
+							<ActionIcon
+								variant="filled"
+								color="blurple"
+								size={30}
+								style={transitionStyles}
+								onClick={() => scrollTo({ y: 0 })}
+							>
+								<VscChevronUp size={20} />
+							</ActionIcon>
 						)}
 					</Transition>
 				</Affix>