Skip to content

Commit

Permalink
feat: footer
Browse files Browse the repository at this point in the history
  • Loading branch information
iCrawl committed Aug 22, 2022
1 parent 00990c9 commit f7ce9f8
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 27 deletions.
35 changes: 29 additions & 6 deletions packages/website/src/components/DocContainer.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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">
Expand Down
66 changes: 59 additions & 7 deletions packages/website/src/components/SidebarLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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)}
Expand All @@ -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>
Expand All @@ -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>
);
}
14 changes: 0 additions & 14 deletions packages/website/src/util/icon.tsx

This file was deleted.

1 comment on commit f7ce9f8

@vercel
Copy link

@vercel vercel bot commented on f7ce9f8 Aug 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.