From ea16383f98c0ce0f1b6157bb7d5388945085c4a3 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Thu, 5 Sep 2024 08:29:27 +0200
Subject: [PATCH] wip

---
 src/app/[...slug]/layout.tsx       | 264 +++++++++++++++--------------
 src/app/[...slug]/page.tsx         |  18 +-
 src/app/globals.css                |  27 ++-
 src/components/Header.tsx          |   0
 src/components/Nav/NavCategory.tsx |   6 +-
 src/components/Search/index.tsx    |  21 +--
 src/components/mdx/Toc/Toc.tsx     |   8 +-
 src/components/mdx/index.tsx       |  13 +-
 8 files changed, 181 insertions(+), 176 deletions(-)
 create mode 100644 src/components/Header.tsx

diff --git a/src/app/[...slug]/layout.tsx b/src/app/[...slug]/layout.tsx
index 8a0a4c0c..e2bf2d36 100644
--- a/src/app/[...slug]/layout.tsx
+++ b/src/app/[...slug]/layout.tsx
@@ -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[] }
@@ -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>
     </>
   )
diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
index aeb52b18..f8d9ea17 100644
--- a/src/app/[...slug]/page.tsx
+++ b/src/app/[...slug]/page.tsx
@@ -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'}
     </>
   )
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index e2b124f9..8ef709ec 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -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 {
@@ -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;
+  }
 }
 
 /**
@@ -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;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Nav/NavCategory.tsx b/src/components/Nav/NavCategory.tsx
index bdea861b..87f57a04 100644
--- a/src/components/Nav/NavCategory.tsx
+++ b/src/components/Nav/NavCategory.tsx
@@ -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}
@@ -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>
         )}
@@ -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,
       )}
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 1eae7d1a..f4ee3b0a 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -40,31 +40,28 @@ function Search() {
         />
       )}
       <div className="relative grow">
-        <div className="flex h-16 flex-auto items-center justify-between px-4 text-on-surface-variant/50 transition-colors duration-200 hover:text-[inherit]">
+        <div className="flex flex-auto items-center justify-between">
           <button
             type="button"
             onClick={() => setShowSearchModal(true)}
             className={cn(
-              'group flex w-full items-center space-x-3 py-2 font-medium leading-6 sm:space-x-4',
-
-              'interative-bg-surface-container',
+              'group flex w-full items-center gap-2 rounded-l-full rounded-r-full p-2 px-4',
+              'interactive-bg-surface-container',
+              'text-on-surface-variant/50 hover:text-[inherit]',
             )}
             onFocus={() => setShowSearchModal(true)}
           >
-            <Icon icon="search" className={cn('h-6 w-6')} />
+            <Icon icon="search" className={cn('size-6')} />
             <span>
               Quick search
               <span className="hidden sm:inline"> for anything</span>
             </span>
-            <span
-              style={{ opacity: 1 }}
-              className={cn('hidden rounded-md border px-1.5 py-0.5 text-sm leading-5 sm:block')}
-            >
+            <span className="ml-auto hidden rounded-md border px-1.5 py-0.5 text-sm leading-5 sm:block">
               <span className="sr-only">Press </span>
-              <kbd className="font-sans">
-                <abbr title="Forward slash" className="no-underline">
+              <kbd>
+                <kbd title="Forward slash" className="no-underline">
                   /
-                </abbr>
+                </kbd>
               </kbd>
               <span className="sr-only"> to search</span>
             </span>
diff --git a/src/components/mdx/Toc/Toc.tsx b/src/components/mdx/Toc/Toc.tsx
index f691862a..0a127868 100644
--- a/src/components/mdx/Toc/Toc.tsx
+++ b/src/components/mdx/Toc/Toc.tsx
@@ -50,16 +50,16 @@ export function Toc({ toc }: { toc: DocToC[] }) {
   // }, [toc])
 
   return (
-    <div className="max-h-(screen-16) sticky top-16 flex flex-col justify-between overflow-y-auto pb-6">
-      <label className="mb-2 mt-12 text-sm font-semibold uppercase tracking-wide text-on-surface-variant/50 lg:text-xs">
+    <div className="mt-8 text-xs">
+      <p className="mb-3 font-semibold uppercase tracking-wide text-on-surface-variant/50">
         On This Page
-      </label>
+      </p>
       {toc.map(({ title, id, level }, index) => (
         <h4 key={`${title}-${index}`}>
           <a
             aria-label={title}
             className={cn(
-              'block py-1 text-xs font-normal leading-6 text-on-surface-variant/50 hover:underline',
+              'block text-balance py-2 text-on-surface-variant/50 hover:underline',
               index === activeIndex && 'text-on-surface',
             )}
             style={{ marginLeft: `${(level - 1) * 1}rem` }}
diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
index 5e75739f..e1f3f98d 100644
--- a/src/components/mdx/index.tsx
+++ b/src/components/mdx/index.tsx
@@ -19,13 +19,13 @@ function Heading({ id, Tag, ...props }: { id?: string; Tag: Hn } & ComponentProp
   return (
     <a
       href={`#${id}`}
-      className="tracking-light my-6 mt-8 block text-3xl font-bold text-on-surface no-underline hover:underline"
+      className="tracking-light my-6 mt-8 block text-balance text-3xl font-bold text-on-surface no-underline hover:underline"
     >
       <Tag id={id} {...props} />
     </a>
   )
 }
-export const h1 = (props: ComponentProps<'h1'>) => <h1 className="hidden" {...props} />
+export const h1 = (props: ComponentProps<'h1'>) => <></>
 export const h2 = ({ id, ...props }: Omit<ComponentProps<typeof Heading>, 'Tag'>) => (
   <Heading id={id} Tag="h2" {...props} />
 )
@@ -108,8 +108,15 @@ export const summary = (props: ComponentProps<'summary'>) => (
   <summary className="my-2 -ml-4 cursor-pointer select-none" {...props} />
 )
 
+// https://sandpack.codesandbox.io/docs/getting-started/usage
 export const Sandpack = (props: ComponentProps<typeof SP>) => (
   <div className="sandpack">
-    <SP {...props} />
+    <SP
+      {...props}
+      options={{
+        ...props.options,
+        // editorHeight: 350
+      }}
+    />
   </div>
 )