Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@abernier
abernier committed Sep 5, 2024
1 parent 95fcd0a commit ea16383
Show file tree
Hide file tree
Showing 8 changed files with 181 additions and 176 deletions.
264 changes: 134 additions & 130 deletions src/app/[...slug]/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import Link from 'next/link'
import { PiDiscordLogoLight } from 'react-icons/pi'
import { VscGithubAlt } from 'react-icons/vsc'
import { DocsContext } from './DocsContext'
import { Menu } from './Menu'
import { MenuContext } from './MenuContext'

export type Props = {
params: { slug: string[] }
Expand All @@ -31,139 +29,145 @@ export default async function Layout({ params, children }: Props) {
const NEXT_PUBLIC_LIBNAME = process.env.NEXT_PUBLIC_LIBNAME
const NEXT_PUBLIC_LIBNAME_SHORT = process.env.NEXT_PUBLIC_LIBNAME_SHORT

return (
<>
<DocsContext value={{ docs, doc }}>
<MenuContext>
<Menu
header={
<>
<div className="flex h-full flex-none items-center p-2 pl-4 sm:pl-6 lg:w-60 xl:w-72 xl:pl-4">
<Link href="/" aria-label="Poimandres Docs">
<span className="font-bold">
{NEXT_PUBLIC_LIBNAME_SHORT && (
<span className="inline lg:hidden">{NEXT_PUBLIC_LIBNAME_SHORT}</span>
)}
<span
className={cn(
NEXT_PUBLIC_LIBNAME_SHORT ? 'hidden' : undefined,
'lg:inline',
)}
>
{NEXT_PUBLIC_LIBNAME}
</span>
</span>
</Link>
<span className="font-normal">
.<a href="https://docs.pmnd.rs">docs</a>
</span>
</div>
const header = (
<div className="flex h-16 items-center gap-[--rgrid-m] px-[--rgrid-m]">
<div className="flex items-center">
<Link href="/" aria-label="Poimandres Docs">
<span className="font-bold">
{NEXT_PUBLIC_LIBNAME_SHORT && (
<span className="inline lg:hidden">{NEXT_PUBLIC_LIBNAME_SHORT}</span>
)}
<span className={cn(NEXT_PUBLIC_LIBNAME_SHORT ? 'hidden' : undefined, 'lg:inline')}>
{NEXT_PUBLIC_LIBNAME}
</span>
</span>
</Link>
<span className="font-normal">
.<a href="https://docs.pmnd.rs">docs</a>
</span>
</div>

<Search />
<Search />

<div className="flex gap-0">
{process.env.GITHUB && (
<Link
href={process.env.GITHUB}
className="hidden size-9 items-center justify-center sm:flex"
target="_blank"
>
<VscGithubAlt />
</Link>
)}
{process.env.DISCORD && (
<Link
href={process.env.DISCORD}
className="hidden size-9 items-center justify-center sm:flex"
target="_blank"
>
<PiDiscordLogoLight />
</Link>
)}
{/* <ToggleTheme className="hidden size-9 items-center justify-center sm:flex" /> */}
</div>
</>
}
nav={<Nav docs={docs} asPath={asPath} />}
aside={<Toc toc={doc.tableOfContents.filter(({ level }) => level > 0)} />}
footer={
<>
{(!!currentPage || doc.sourcecode) && (
<div className="mx-auto mt-24 flex max-w-3xl flex-col gap-4 pb-10 text-right">
{doc.sourcecode && (
<p>
<a
target="_blank"
rel="noopener noreferrer"
className={cn(
'mb-2 text-base hover:underline',
'font-mono text-on-surface-variant/50',
)}
href={doc.sourcecodeURL || '#no-sourcecode-url'}
>
{doc.sourcecode}
</a>
</p>
)}

{!!currentPage && (
<p>
<a
target="_blank"
rel="noopener noreferrer"
className={cn(
'mb-2 text-base hover:underline',
'text-on-surface-variant/50',
)}
href={currentPage.editURL || '#no-edit-url'}
>
Edit this page
</a>
</p>
)}
</div>
<div className="flex gap-0">
{process.env.GITHUB && (
<Link
href={process.env.GITHUB}
className="flex size-9 items-center justify-center"
target="_blank"
>
<VscGithubAlt />
</Link>
)}
{process.env.DISCORD && (
<Link
href={process.env.DISCORD}
className="flex size-9 items-center justify-center"
target="_blank"
>
<PiDiscordLogoLight />
</Link>
)}
{/* <ToggleTheme className="hidden size-9 items-center justify-center sm:flex" /> */}
</div>
</div>
)
const footer = (
<>
{(!!currentPage || doc.sourcecode) && (
<div className="mx-auto mt-24 flex max-w-3xl flex-col gap-4 pb-10 text-right">
{doc.sourcecode && (
<p>
<a
target="_blank"
rel="noopener noreferrer"
className={cn(
'mb-2 text-base hover:underline',
'font-mono text-on-surface-variant/50',
)}
href={doc.sourcecodeURL || '#no-sourcecode-url'}
>
{doc.sourcecode}
</a>
</p>
)}

{!!currentPage && (
<p>
<a
target="_blank"
rel="noopener noreferrer"
className={cn('mb-2 text-base hover:underline', 'text-on-surface-variant/50')}
href={currentPage.editURL || '#no-edit-url'}
>
Edit this page
</a>
</p>
)}
</div>
)}

{(!!previousPage || !!nextPage) && (
<nav className="mx-auto mt-12 flex w-full max-w-3xl justify-between">
{!!previousPage && (
<div className="">
<label
className={cn(
'mb-2 text-xs font-bold uppercase leading-4',
'text-on-surface-variant/50',
)}
>
Previous
</label>
<div className="text-xl">
<Link href={previousPage.url}>{previousPage.title}</Link>
</div>
</div>
)}
{!!nextPage && (
<div className="ml-auto text-right">
<label
className={cn(
'mb-2 text-xs font-bold uppercase leading-4',
'text-on-surface-variant/50',
)}
>
Next
</label>
<div className="text-xl">
<Link href={nextPage.url}>{nextPage.title}</Link>
</div>
</div>
)}
</nav>
{(!!previousPage || !!nextPage) && (
<nav className="mx-auto mt-12 flex w-full max-w-3xl justify-between">
{!!previousPage && (
<div className="">
<label
className={cn(
'mb-2 text-xs font-bold uppercase leading-4',
'text-on-surface-variant/50',
)}
</>
}
>
{children}
</Menu>
</MenuContext>
>
Previous
</label>
<div className="text-xl">
<Link href={previousPage.url}>{previousPage.title}</Link>
</div>
</div>
)}
{!!nextPage && (
<div className="ml-auto text-right">
<label
className={cn(
'mb-2 text-xs font-bold uppercase leading-4',
'text-on-surface-variant/50',
)}
>
Next
</label>
<div className="text-xl">
<Link href={nextPage.url}>{nextPage.title}</Link>
</div>
</div>
)}
</nav>
)}
</>
)
const nav = <Nav docs={docs} asPath={asPath} />
const toc = <Toc toc={doc.tableOfContents.filter(({ level }) => level > 0)} />

return (
<>
<DocsContext value={{ docs, doc }}>
{/* <MenuContext> */}
<div className="[--side-w:theme(spacing.72)]">
<header className="border-b border-outline-variant/50 bg-surface/95 backdrop-blur-xl">
{header}
</header>
<div className="lg:flex lg:gap-[--rgrid-g]">
<nav className="hidden lg:block lg:w-[--side-w] lg:flex-none">{nav}</nav>
<main
className={cn('lg:min-w-0 lg:flex-1 lg:pr-[--rgrid-m] xl:flex xl:gap-[--rgrid-g]')}
>
<div className="fooo lg:min-w-0 lg:flex-1">
{children}
{footer}
</div>
<aside className="hidden lg:flex-none xl:block xl:w-[--side-w]">{toc}</aside>
</main>
</div>
</div>
{/* </MenuContext> */}
</DocsContext>
</>
)
Expand Down
18 changes: 8 additions & 10 deletions src/app/[...slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,15 @@ export default async function Page({ params }: Props) {

return (
<>
<div className="mx-auto max-w-3xl">
<div className={cn('post-header mb-6 border-b pb-4', 'border-outline-variant/50')}>
<h1 className="mb-2 text-5xl font-bold tracking-tighter">{doc.title}</h1>
{!!doc?.description?.length && (
<p className={cn('text-base leading-5', 'text-on-surface-variant/50')}>
{doc.description}
</p>
)}
</div>
<div className="content-container">{doc ? <Post doc={doc} /> : 'empty doc'}</div>
<div className={cn('my-6 border-b', 'border-outline-variant/50')}>
<h1 className="text-5xl font-bold tracking-tighter">{doc.title}</h1>
{!!doc?.description?.length && (
<p className={cn('my-2 text-base leading-5', 'text-on-surface-variant/50')}>
{doc.description}
</p>
)}
</div>
{doc ? <Post doc={doc} /> : 'empty doc'}
</>
)
}
Expand Down
27 changes: 13 additions & 14 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
--header-height: 4rem; /* TODO: make this value dynamic */
scroll-margin-top: var(--header-height);
font-size: 17px;

@apply [--rgrid-m:theme(spacing.4)] lg:[--rgrid-m:theme(spacing.6)];
@apply [--rgrid-g:theme(spacing.4)] lg:[--rgrid-g:theme(spacing.12)];
}

body {
Expand All @@ -21,20 +24,16 @@ body {
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */
@supports (position: sticky) {
@media (min-width: theme('screens.lg')) {
.sticky\?lg\:h-screen {
height: 100vh !important;
}
.sticky\?lg\:h-\(screen-16\) {
height: calc(100vh - theme('spacing.16'));
}
}
main :target {
scroll-margin-top: theme('spacing.20'); /* <Search />'s h-16 + more spacing */
}

.content-container :target {
scroll-margin-top: theme('spacing.20'); /* <Search />'s h-16 + more spacing */
.fooo > * {
@apply me-auto ms-auto block max-w-[calc(100%-2*var(--rgrid-m))] lg:max-w-4xl;

&.sandpack {
@apply xl:max-w-none;
}
}

/**
Expand All @@ -48,8 +47,8 @@ pre[class*='language-'] {
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
/* word-break: normal; */
/* word-wrap: normal; */
line-height: 1.5;
tab-size: 4;
hyphens: none;
Expand Down
Empty file added src/components/Header.tsx
View file
Empty file.
6 changes: 3 additions & 3 deletions src/components/Nav/NavCategory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function NavCategory({
return (
<Collapsible.Root
className={cn(
'[--NavItem-pad:.75rem]',
'text-sm [--NavItem-pad:.75rem] [--arrow-size:theme(spacing.4)]',
!docsEntries.some(([, doc]) => doc.url === `/${asPath}`) && 'opacity-50',
)}
open={open}
Expand All @@ -56,7 +56,7 @@ export function NavCategory({
className={cn('absolute right-0 top-1/2 transition-transform', open && 'rotate-90')}
>
<div className="-translate-y-1/2 p-[--NavItem-pad]">
<IoIosArrowDown className="size-4 -rotate-90" />
<IoIosArrowDown className="size-[--arrow-size] -rotate-90" />
</div>
</Collapsible.Trigger>
)}
Expand Down Expand Up @@ -89,7 +89,7 @@ function NavItem({
<Link
{...props}
className={cn(
'block cursor-pointer rounded-r-xl p-[--NavItem-pad] pl-6',
'block cursor-pointer rounded-r-xl p-[--NavItem-pad] pl-[--rgrid-m] pr-[calc(2*var(--NavItem-pad)+var(--arrow-size))]',
active ? 'interactive-bg-primary-container' : 'interactive-bg-surface',
className,
)}
Expand Down
Loading

0 comments on commit ea16383

Please sign in to comment.