feat: footer

packages/website/src/components/DocContainer.tsx

@@ -1,7 +1,15 @@
 import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { Fragment, ReactNode } from 'react';
-import { VscListSelection, VscSymbolParameter } from 'react-icons/vsc';
+import {
+	VscSymbolClass,
+	VscSymbolMethod,
+	VscSymbolEnum,
+	VscSymbolInterface,
+	VscSymbolVariable,
+	VscListSelection,
+	VscSymbolParameter,
+} from 'react-icons/vsc';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { HyperlinkedText } from './HyperlinkedText';
@@ -12,7 +20,6 @@ import { TSDoc } from './tsdoc/TSDoc';
 import type { ApiClassJSON, ApiInterfaceJSON, ApiItemJSON } from '~/DocModel/ApiNodeJSONEncoder';
 import type { TypeParameterData } from '~/DocModel/TypeParameterMixin';
 import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
-import { generateIcon } from '~/util/icon';
 import type { TokenDocumentation } from '~/util/parse.server';
 
 export interface DocContainerProps {
@@ -29,6 +36,19 @@ export interface DocContainerProps {
 	properties?: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'] | null;
 }
 
+function generateIcon(kind: string) {
+	const icons = {
+		Class: <VscSymbolClass />,
+		Method: <VscSymbolMethod />,
+		Function: <VscSymbolMethod />,
+		Enum: <VscSymbolEnum />,
+		Interface: <VscSymbolInterface />,
+		TypeAlias: <VscSymbolVariable />,
+	};
+
+	return icons[kind as keyof typeof icons];
+}
+
 export function DocContainer({
 	name,
 	kind,
@@ -111,11 +131,14 @@ export function DocContainer({
 				</Stack>
 			</Stack>
 			{(kind === 'Class' || kind === 'Interface') && (methods?.length || properties?.length) ? (
-				<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
+				<MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
 					<Aside
-						sx={{ backgroundColor: 'transparent' }}
-						hiddenBreakpoint="md"
-						width={{ md: 200, lg: 300 }}
+						sx={(theme) => ({
+							zIndex: 1,
+							background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
+						})}
+						hiddenBreakpoint="lg"
+						width={{ lg: 300 }}
 						withBorder={false}
 					>
 						<ScrollArea p="xs">

packages/website/src/components/SidebarLayout.tsx

@@ -17,9 +17,11 @@ import {
 	Menu,
 	ActionIcon,
 	useMantineColorScheme,
+	Center,
 } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
+import Image from 'next/future/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { type PropsWithChildren, useState } from 'react';
@@ -108,16 +110,17 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
 
 	return (
 		<AppShell
-			styles={{
+			sx={{
 				main: {
 					background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
 					overflowX: 'auto',
 				},
 			}}
-			navbarOffsetBreakpoint="sm"
-			asideOffsetBreakpoint="sm"
+			padding={0}
+			navbarOffsetBreakpoint="md"
+			asideOffsetBreakpoint="md"
 			navbar={
-				<Navbar hiddenBreakpoint="sm" hidden={!opened} width={{ sm: 200, lg: 300 }}>
+				<Navbar hiddenBreakpoint="md" hidden={!opened} width={{ md: 300 }}>
 					{packageName && data ? (
 						<>
 							<Navbar.Section p="xs">
@@ -164,7 +167,7 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
 				<Header height={70} p="md">
 					<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '100%' }}>
 						<Box>
-							<MediaQuery largerThan="sm" styles={{ display: 'none' }}>
+							<MediaQuery largerThan="md" styles={{ display: 'none' }}>
 								<Burger
 									opened={opened}
 									onClick={() => setOpened((o) => !o)}
@@ -174,7 +177,7 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
 								/>
 							</MediaQuery>
 
-							<MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
+							<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
 								<Breadcrumbs>{breadcrumbs}</Breadcrumbs>
 							</MediaQuery>
 						</Box>
@@ -190,7 +193,56 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
 				</Header>
 			}
 		>
-			{children}
+			<article>
+				<Box
+					sx={{
+						position: 'relative',
+						minHeight: 'calc(100vh - 150px)',
+						zIndex: 1,
+						background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
+					}}
+					p="sm"
+					pb={80}
+				>
+					{children}
+				</Box>
+				<Box sx={{ height: 200 }}></Box>
+				<Box
+					sx={{
+						position: 'fixed',
+						bottom: 0,
+						left: 0,
+						right: 0,
+						height: 200,
+						background: theme.colorScheme === 'dark' ? theme.colors.dark![7] : theme.colors.gray![0],
+						paddingLeft: 324,
+						paddingRight: 324,
+
+						[theme.fn.smallerThan('lg')]: {
+							paddingRight: 14,
+						},
+
+						[theme.fn.smallerThan('md')]: {
+							paddingLeft: 24,
+						},
+					}}
+					pt={70}
+				>
+					<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>
+				</Box>
+			</article>
 		</AppShell>
 	);
 }