From a668aea1fdbd82e0403b25cf15549deadeac92fa Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Mon, 3 Mar 2025 18:22:19 +1300
Subject: [PATCH 1/3] refactor: move `space-y-` margin utils to the single
 caller's source

---
 app/components/DocContainer.tsx  | 2 +-
 app/routes/_libraries/blog.$.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/DocContainer.tsx b/app/components/DocContainer.tsx
index 7f2566469..62260beec 100644
--- a/app/components/DocContainer.tsx
+++ b/app/components/DocContainer.tsx
@@ -9,7 +9,7 @@ export function DocContainer({
     <div
       {...props}
       className={twMerge(
-        'w-full max-w-full space-y-2 md:space-y-6 lg:space-y-8 p-2 md:p-6 lg:p-8',
+        'w-full max-w-full p-2 md:p-6 lg:p-8',
         props.className
       )}
     >
diff --git a/app/routes/_libraries/blog.$.tsx b/app/routes/_libraries/blog.$.tsx
index d0a9bdf4e..e0bdc4e7c 100644
--- a/app/routes/_libraries/blog.$.tsx
+++ b/app/routes/_libraries/blog.$.tsx
@@ -82,7 +82,7 @@ ${content}`
 
   return (
     <DocContainer>
-      <div>
+      <div className="mb-2 md:mb-6 lg:mb-8">
         <Link
           from="/blog/$"
           to="/blog"

From af40de070eaf9a430d1120ca330762638b660226 Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Mon, 3 Mar 2025 18:40:27 +1300
Subject: [PATCH 2/3] feat: add mobile table of contents

---
 app/components/Doc.tsx       | 83 +++++++++++++++++++-----------------
 app/components/TocMobile.tsx | 50 ++++++++++++++++++++++
 2 files changed, 94 insertions(+), 39 deletions(-)
 create mode 100644 app/components/TocMobile.tsx

diff --git a/app/components/Doc.tsx b/app/components/Doc.tsx
index 60d5c7633..eab308320 100644
--- a/app/components/Doc.tsx
+++ b/app/components/Doc.tsx
@@ -7,6 +7,7 @@ import { DocTitle } from '~/components/DocTitle'
 import { Markdown } from '~/components/Markdown'
 import { Toc } from './Toc'
 import { twMerge } from 'tailwind-merge'
+import { TocMobile } from './TocMobile'
 
 type DocProps = {
   title: string
@@ -89,55 +90,59 @@ export function Doc({
   }, [])
 
   return (
-    <div
-      className={twMerge(
-        'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[936px]',
-        isTocVisible && 'max-w-full'
-      )}
-    >
+    <React.Fragment>
+      {shouldRenderToc ? <TocMobile headings={headings} /> : null}
       <div
         className={twMerge(
-          'flex overflow-auto flex-col w-full p-4 lg:p-6',
-          isTocVisible && '!pr-0'
+          'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[936px]',
+          isTocVisible && 'max-w-full',
+          shouldRenderToc && 'lg:pt-0'
         )}
       >
-        {title ? <DocTitle>{title}</DocTitle> : null}
-        <div className="h-4" />
-        <div className="h-px bg-gray-500 opacity-20" />
-        <div className="h-4" />
         <div
-          ref={markdownContainerRef}
           className={twMerge(
-            'prose prose-gray prose-sm prose-p:leading-7 dark:prose-invert max-w-none',
-            isTocVisible && 'pr-4 lg:pr-6',
-            'styled-markdown-content'
+            'flex overflow-auto flex-col w-full p-4 lg:p-6',
+            isTocVisible && '!pr-0'
           )}
         >
-          <Markdown htmlMarkup={markup} />
-        </div>
-        <div className="h-12" />
-        <div className="w-full h-px bg-gray-500 opacity-30" />
-        <div className="py-4 opacity-70">
-          <a
-            href={`https://github.com/${repo}/tree/${branch}/${filePath}`}
-            className="flex items-center gap-2"
+          {title ? <DocTitle>{title}</DocTitle> : null}
+          <div className="h-4" />
+          <div className="h-px bg-gray-500 opacity-20" />
+          <div className="h-4" />
+          <div
+            ref={markdownContainerRef}
+            className={twMerge(
+              'prose prose-gray prose-sm prose-p:leading-7 dark:prose-invert max-w-none',
+              isTocVisible && 'pr-4 lg:pr-6',
+              'styled-markdown-content'
+            )}
           >
-            <FaEdit /> Edit on GitHub
-          </a>
+            <Markdown htmlMarkup={markup} />
+          </div>
+          <div className="h-12" />
+          <div className="w-full h-px bg-gray-500 opacity-30" />
+          <div className="py-4 opacity-70">
+            <a
+              href={`https://github.com/${repo}/tree/${branch}/${filePath}`}
+              className="flex items-center gap-2"
+            >
+              <FaEdit /> Edit on GitHub
+            </a>
+          </div>
+          <div className="h-24" />
         </div>
-        <div className="h-24" />
-      </div>
 
-      {isTocVisible && (
-        <div className="border-l border-gray-500/20 max-w-52 w-full hidden 2xl:block transition-all">
-          <Toc
-            headings={headings}
-            activeHeadings={activeHeadings}
-            colorFrom={colorFrom}
-            colorTo={colorTo}
-          />
-        </div>
-      )}
-    </div>
+        {isTocVisible && (
+          <div className="border-l border-gray-500/20 max-w-52 w-full hidden 2xl:block transition-all">
+            <Toc
+              headings={headings}
+              activeHeadings={activeHeadings}
+              colorFrom={colorFrom}
+              colorTo={colorTo}
+            />
+          </div>
+        )}
+      </div>
+    </React.Fragment>
   )
 }
diff --git a/app/components/TocMobile.tsx b/app/components/TocMobile.tsx
new file mode 100644
index 000000000..43da1dc6e
--- /dev/null
+++ b/app/components/TocMobile.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { Link } from '@tanstack/react-router'
+import type { HeadingData } from 'marked-gfm-heading-id'
+import { FaCaretRight, FaCaretDown } from 'react-icons/fa6'
+
+interface TocMobileProps {
+  headings: Array<HeadingData>
+}
+
+export function TocMobile({ headings }: TocMobileProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const handleToggle = (event: React.SyntheticEvent<HTMLDetailsElement>) => {
+    setIsOpen(event.currentTarget.open)
+  }
+
+  if (headings.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="lg:hidden flex -mx-2 -mt-2 md:-mx-6 md:-mt-6 pb-3 md:pb-5">
+      <details className="w-full" onToggle={handleToggle}>
+        <summary className="px-4 py-3 text-sm font-medium w-full flex content-start items-center gap-2 bg-white/50 dark:bg-black/60 backdrop-blur-lg border-b border-gray-500 border-opacity-20">
+          <span>{isOpen ? <FaCaretDown /> : <FaCaretRight />}</span>
+          <span>On this page</span>
+        </summary>
+        <div className="px-2 py-2">
+          <ul className="list-none grid gap-2">
+            {headings.map((heading) => (
+              <li
+                key={heading.id}
+                style={{
+                  paddingLeft: `${(heading.level - 1) * 1.5}rem`,
+                }}
+              >
+                <Link
+                  to="."
+                  className="text-sm"
+                  hash={heading.id}
+                  dangerouslySetInnerHTML={{ __html: heading.text }}
+                />
+              </li>
+            ))}
+          </ul>
+        </div>
+      </details>
+    </div>
+  )
+}

From a494940c8a9689f8d41245e41f1f4ffb4ef1970f Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Mon, 3 Mar 2025 18:53:53 +1300
Subject: [PATCH 3/3] chore: more accessible and lessen the indentation

---
 app/components/TocMobile.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/components/TocMobile.tsx b/app/components/TocMobile.tsx
index 43da1dc6e..eb3caf4a5 100644
--- a/app/components/TocMobile.tsx
+++ b/app/components/TocMobile.tsx
@@ -21,7 +21,10 @@ export function TocMobile({ headings }: TocMobileProps) {
   return (
     <div className="lg:hidden flex -mx-2 -mt-2 md:-mx-6 md:-mt-6 pb-3 md:pb-5">
       <details className="w-full" onToggle={handleToggle}>
-        <summary className="px-4 py-3 text-sm font-medium w-full flex content-start items-center gap-2 bg-white/50 dark:bg-black/60 backdrop-blur-lg border-b border-gray-500 border-opacity-20">
+        <summary
+          className="px-4 py-3 text-sm font-medium w-full flex content-start items-center gap-2 bg-white/50 dark:bg-black/60 backdrop-blur-lg border-b border-gray-500 border-opacity-20"
+          aria-expanded={isOpen}
+        >
           <span>{isOpen ? <FaCaretDown /> : <FaCaretRight />}</span>
           <span>On this page</span>
         </summary>
@@ -29,9 +32,9 @@ export function TocMobile({ headings }: TocMobileProps) {
           <ul className="list-none grid gap-2">
             {headings.map((heading) => (
               <li
-                key={heading.id}
+                key={`mobile-toc-${heading.id}`}
                 style={{
-                  paddingLeft: `${(heading.level - 1) * 1.5}rem`,
+                  paddingLeft: `${(heading.level - 1) * 0.7}rem`,
                 }}
               >
                 <Link
@@ -39,6 +42,7 @@ export function TocMobile({ headings }: TocMobileProps) {
                   className="text-sm"
                   hash={heading.id}
                   dangerouslySetInnerHTML={{ __html: heading.text }}
+                  aria-label={heading.text.replace(/<\/?[^>]+(>|$)/g, '')}
                 />
               </li>
             ))}