From 183255b5b5661a246966ac92783a350713244a05 Mon Sep 17 00:00:00 2001
From: Adil Kairolla <adil.kairolla.t@gmail.com>
Date: Tue, 26 Nov 2024 13:13:49 +0500
Subject: [PATCH 1/6] feat: Add table of contents

---
 app/components/Doc.tsx                        |  15 +-
 app/components/DocContent.tsx                 | 157 ++++++++++++
 app/components/DocPagination.tsx              |  75 ++++++
 app/components/DocsLayout.tsx                 | 225 +-----------------
 app/components/Markdown.tsx                   |  58 +++--
 app/components/Partners.tsx                   |  74 ++++++
 app/components/Toc.tsx                        |  71 ++++++
 app/routes/$libraryId/$version.docs.$.tsx     |   6 +-
 .../$version.docs.framework.$framework.$.tsx  |   6 +-
 app/routes/$libraryId/$version.docs.tsx       |   1 -
 app/routes/_libraries/blog.$.tsx              |   2 +-
 tailwind.config.cjs                           |   3 +
 12 files changed, 430 insertions(+), 263 deletions(-)
 create mode 100644 app/components/DocContent.tsx
 create mode 100644 app/components/DocPagination.tsx
 create mode 100644 app/components/Partners.tsx
 create mode 100644 app/components/Toc.tsx

diff --git a/app/components/Doc.tsx b/app/components/Doc.tsx
index 680102059..b1d587f6f 100644
--- a/app/components/Doc.tsx
+++ b/app/components/Doc.tsx
@@ -2,19 +2,14 @@ import { FaEdit } from 'react-icons/fa'
 import { DocTitle } from '~/components/DocTitle'
 import { Markdown } from '~/components/Markdown'
 
-export function Doc({
-  title,
-  content,
-  repo,
-  branch,
-  filePath,
-}: {
+type DocProps = {
   title: string
-  content: string
   repo: string
   branch: string
   filePath: string
-}) {
+} & ({ code: string; markup?: never } | { markup: string; code?: never })
+
+export function Doc({ title, repo, branch, filePath, code, markup }: DocProps) {
   return (
     <div className="p-4 lg:p-6 overflow-auto w-full bg-white/70 dark:bg-black/30 m-2 md:m-4 xl:m-8 rounded-xl">
       {title ? <DocTitle>{title}</DocTitle> : null}
@@ -22,7 +17,7 @@ export function Doc({
       <div className="h-px bg-gray-500 opacity-20" />
       <div className="h-4" />
       <div className="prose prose-gray prose-sm prose-p:leading-7 dark:prose-invert max-w-none">
-        <Markdown code={content} />
+        <Markdown code={code} markup={markup} />
       </div>
       <div className="h-12" />
       <div className="w-full h-px bg-gray-500 opacity-30" />
diff --git a/app/components/DocContent.tsx b/app/components/DocContent.tsx
new file mode 100644
index 000000000..964655602
--- /dev/null
+++ b/app/components/DocContent.tsx
@@ -0,0 +1,157 @@
+import * as React from 'react'
+import { FaTimes } from 'react-icons/fa'
+import { twMerge } from 'tailwind-merge'
+import { useLoaderData, useMatches } from '@tanstack/react-router'
+import { marked } from 'marked'
+import markedAlert from 'marked-alert'
+import { gfmHeadingId, getHeadingList } from 'marked-gfm-heading-id'
+import { Toc } from '~/components/Toc'
+import { Doc } from '~/components/Doc'
+import { Carbon } from '~/components/Carbon'
+import { Partners } from '~/components/Partners'
+import { useMenuConfig } from '~/components/DocsLayout'
+import { DocPagination } from '~/components/DocPagination'
+import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
+import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
+import { Library } from '~/libraries'
+import { useLocalStorage } from '~/utils/useLocalStorage'
+
+export function DocContent({
+  title,
+  content,
+  branch,
+  filePath,
+  library,
+}: {
+  title: string
+  content: string
+  branch: string
+  filePath: string
+  library: Library
+}) {
+  const matches = useMatches()
+  const [showBytes, setShowBytes] = useLocalStorage('showBytes', true)
+  const { config } = useLoaderData({ from: '/$libraryId/$version/docs' })
+  const menuConfig = useMenuConfig({
+    config,
+    frameworks: library.frameworks,
+    repo: library.repo,
+  })
+
+  const { markup, headings } = React.useMemo(() => {
+    const markup = marked.use(
+      { gfm: true },
+      gfmHeadingId(),
+      markedAlert()
+    )(content) as string
+
+    const headings = getHeadingList()
+
+    return { markup, headings }
+  }, [content])
+
+  const isExample = matches.some((d) => d.pathname.includes('/examples/'))
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          `max-w-full min-w-0 flex relative justify-center w-full min-h-[88dvh] lg:min-h-0`,
+          !isExample && 'mx-auto w-[900px]'
+        )}
+      >
+        <Doc
+          title={title}
+          repo={library.repo}
+          branch={branch}
+          markup={markup}
+          filePath={filePath}
+        />
+        <DocPagination
+          config={menuConfig}
+          colorFrom={library.colorFrom}
+          colorTo={library.colorTo}
+          textColor={library.textColor}
+        />
+      </div>
+      <div className="-ml-2 pl-2 w-64 hidden md:block sticky top-0 max-h-screen overflow-y-auto">
+        <div className="ml-auto flex flex-col space-y-4">
+          <Partners libraryId={library.id} repo={library.repo} />
+
+          {headings.length ? (
+            <Toc
+              headings={headings}
+              colorFrom={library.colorFrom}
+              colorTo={library.colorTo}
+            />
+          ) : null}
+
+          <div className="p-4 bg-white dark:bg-gray-900/30 border-b border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border-t border-l rounded-l-lg">
+            {library.id === 'query' ? (
+              <DocsCalloutQueryGG />
+            ) : (
+              <DocsCalloutBytes />
+            )}
+          </div>
+
+          <div className="bg-white dark:bg-gray-900/20 border-gray-500/20 shadow-xl flex flex-col border-t border-l border-b p-4 space-y-2 rounded-l-lg">
+            <Carbon />
+            <div
+              className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500 italic
+                dark:bg-opacity-20 self-center opacity-50 hover:opacity-100 transition-opacity"
+            >
+              This ad helps to keep us from burning out and rage-quitting OSS
+              just *that* much more, so chill. 😉
+            </div>
+          </div>
+        </div>
+      </div>
+      {showBytes ? (
+        <div className="w-[300px] max-w-[350px] fixed md:hidden top-1/2 right-2 z-30 -translate-y-1/2 shadow-lg">
+          <div className="bg-white dark:bg-gray-900/30 border border-black/10 dark:border-white/10 p-4 md:p-6 rounded-lg">
+            {library.id === 'query' ? (
+              <DocsCalloutQueryGG />
+            ) : (
+              <DocsCalloutBytes />
+            )}
+            <button
+              className="absolute top-0 right-0 p-2 hover:text-red-500 opacity:30 hover:opacity-100"
+              onClick={() => {
+                setShowBytes(false)
+              }}
+            >
+              <FaTimes />
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          className="right-0 top-1/2 -translate-y-[50px] fixed lg:hidden"
+          onClick={() => {
+            setShowBytes(true)
+          }}
+        >
+          <div
+            className="origin-bottom-right -rotate-90 text-xs bg-white dark:bg-gray-800 border border-gray-100
+            hover:bg-rose-600 hover:text-white p-1 px-2 rounded-t-md shadow-md dark:border-0"
+          >
+            {library.id === 'query' ? (
+              <>
+                <strong>
+                  <span role="img" aria-label="crystal ball">
+                    &#128302;
+                  </span>{' '}
+                  Skip the docs?
+                </strong>
+              </>
+            ) : (
+              <>
+                Subscribe to <strong>Bytes</strong>
+              </>
+            )}
+          </div>
+        </button>
+      )}
+    </>
+  )
+}
diff --git a/app/components/DocPagination.tsx b/app/components/DocPagination.tsx
new file mode 100644
index 000000000..02c10cf08
--- /dev/null
+++ b/app/components/DocPagination.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react'
+import { Link, useMatches } from '@tanstack/react-router'
+import { FaArrowLeft, FaArrowRight } from 'react-icons/fa'
+import { last } from '~/utils/utils'
+import { MenuItem } from '~/utils/config'
+
+type DocPaginationProps = {
+  config: MenuItem[]
+  colorFrom: string
+  colorTo: string
+  textColor: string
+}
+
+export function DocPagination({
+  config,
+  colorFrom,
+  colorTo,
+  textColor,
+}: DocPaginationProps) {
+  const matches = useMatches()
+
+  const flatMenu = React.useMemo(
+    () => config.flatMap((d) => d?.children),
+    [config]
+  )
+
+  const lastMatch = last(matches)
+  const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
+
+  const relativePathname = lastMatch.pathname.replace(
+    docsMatch!.pathname + '/',
+    ''
+  )
+
+  const index = flatMenu.findIndex((d) => d?.to === relativePathname)
+  const prevItem = flatMenu[index - 1]
+  const nextItem = flatMenu[index + 1]
+
+  return (
+    <div className="fixed flex items-center flex-wrap bottom-2 left-0 lg:left-[250px] z-10 right-0 text-xs md:text-sm px-1">
+      <div className="w-1/2 px-1 flex justify-end flex-wrap">
+        {prevItem ? (
+          <Link
+            to={prevItem.to}
+            params
+            className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
+          >
+            <div className="flex gap-2 items-center font-bold">
+              <FaArrowLeft />
+              {prevItem.label}
+            </div>
+          </Link>
+        ) : null}
+      </div>
+      <div className="w-1/2 px-1 flex justify-start flex-wrap">
+        {nextItem ? (
+          <Link
+            to={nextItem.to}
+            params
+            className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
+          >
+            <div className="flex gap-2 items-center font-bold">
+              <span
+                className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
+              >
+                {nextItem.label}
+              </span>{' '}
+              <FaArrowRight className={textColor} />
+            </div>
+          </Link>
+        ) : null}
+      </div>
+    </div>
+  )
+}
diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
index ad909667c..3b28159ae 100644
--- a/app/components/DocsLayout.tsx
+++ b/app/components/DocsLayout.tsx
@@ -1,34 +1,18 @@
 import * as React from 'react'
 import { CgClose, CgMenuLeft } from 'react-icons/cg'
-import {
-  FaArrowLeft,
-  FaArrowRight,
-  FaDiscord,
-  FaGithub,
-  FaTimes,
-} from 'react-icons/fa'
-import {
-  Link,
-  useMatches,
-  useNavigate,
-  useParams,
-} from '@tanstack/react-router'
+import { FaDiscord, FaGithub } from 'react-icons/fa'
+import { Link, useNavigate, useParams } from '@tanstack/react-router'
 import { OramaSearchBox } from '@orama/react-components'
-import { Carbon } from '~/components/Carbon'
 import { Select } from '~/components/Select'
-import { useLocalStorage } from '~/utils/useLocalStorage'
 import { DocsLogo } from '~/components/DocsLogo'
-import { last, capitalize } from '~/utils/utils'
+import { capitalize } from '~/utils/utils'
 import type { SelectOption } from '~/components/Select'
 import type { ConfigSchema, MenuItem } from '~/utils/config'
 import { create } from 'zustand'
 import { searchBoxParams, searchButtonParams } from '~/components/Orama'
 import { Framework, getFrameworkOptions } from '~/libraries'
-import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
-import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
 import { ClientOnlySearchButton } from './ClientOnlySearchButton'
 import { twMerge } from 'tailwind-merge'
-import { partners } from '~/utils/partners'
 
 // Let's use zustand to wrap the local storage logic. This way
 // we'll get subscriptions for free and we can use it in other
@@ -167,7 +151,7 @@ function useCurrentVersion(versions: string[]) {
   }
 }
 
-const useMenuConfig = ({
+export const useMenuConfig = ({
   config,
   repo,
   frameworks,
@@ -294,7 +278,6 @@ type DocsLayoutProps = {
   version: string
   colorFrom: string
   colorTo: string
-  textColor: string
   config: ConfigSchema
   frameworks: Framework[]
   versions: string[]
@@ -307,7 +290,6 @@ export function DocsLayout({
   version,
   colorFrom,
   colorTo,
-  textColor,
   config,
   frameworks,
   versions,
@@ -321,31 +303,8 @@ export function DocsLayout({
   const versionConfig = useVersionConfig({ versions })
   const menuConfig = useMenuConfig({ config, frameworks, repo })
 
-  const matches = useMatches()
-  const lastMatch = last(matches)
-
-  const isExample = matches.some((d) => d.pathname.includes('/examples/'))
-
   const detailsRef = React.useRef<HTMLElement>(null!)
 
-  const flatMenu = React.useMemo(
-    () => menuConfig.flatMap((d) => d?.children),
-    [menuConfig]
-  )
-
-  const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
-
-  const relativePathname = lastMatch.pathname.replace(
-    docsMatch!.pathname + '/',
-    ''
-  )
-
-  const index = flatMenu.findIndex((d) => d?.to === relativePathname)
-  const prevItem = flatMenu[index - 1]
-  const nextItem = flatMenu[index + 1]
-
-  const [showBytes, setShowBytes] = useLocalStorage('showBytes', true)
-
   const [mounted, setMounted] = React.useState(false)
 
   React.useEffect(() => {
@@ -559,181 +518,7 @@ export function DocsLayout({
       </div>
       {smallMenu}
       {largeMenu}
-      <div
-        className={twMerge(
-          `max-w-full min-w-0 flex relative justify-center w-full min-h-[88dvh] lg:min-h-0`,
-          !isExample && 'mx-auto w-[1000px]'
-        )}
-      >
-        {children}
-        <div className="fixed flex items-center flex-wrap bottom-2 left-0 lg:left-[250px] z-10 right-0 text-xs md:text-sm px-1">
-          <div className="w-1/2 px-1 flex justify-end flex-wrap">
-            {prevItem ? (
-              <Link
-                to={prevItem.to}
-                params
-                className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
-              >
-                <div className="flex gap-2 items-center font-bold">
-                  <FaArrowLeft />
-                  {prevItem.label}
-                </div>
-              </Link>
-            ) : null}
-          </div>
-          <div className="w-1/2 px-1 flex justify-start flex-wrap">
-            {nextItem ? (
-              <Link
-                to={nextItem.to}
-                params
-                className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
-              >
-                <div className="flex gap-2 items-center font-bold">
-                  <span
-                    className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
-                  >
-                    {nextItem.label}
-                  </span>{' '}
-                  <FaArrowRight className={textColor} />
-                </div>
-              </Link>
-            ) : null}
-          </div>
-        </div>
-      </div>
-      <div className="-ml-2 pl-2 w-64 hidden md:block sticky top-0 max-h-screen overflow-y-auto">
-        <div className="ml-auto flex flex-col space-y-4">
-          <div className="bg-white dark:bg-gray-900/30 border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border border-r-0 border-t-0 rounded-bl-lg">
-            <div className="uppercase font-black text-center p-3 opacity-50">
-              Our Partners
-            </div>
-            {!partners.some((d) => d.libraries?.includes(libraryId as any)) ? (
-              <div className="hover:bg-gray-500/10 dark:hover:bg-gray-500/10 transition-colors">
-                <a
-                  href={`mailto:partners@tanstack.com?subject=TanStack ${
-                    repo.split('/')[1]
-                  } Partnership`}
-                  className="p-2 block text-xs"
-                >
-                  <span className="opacity-50 italic">
-                    Wow, it looks like you could be our first partner for this
-                    library!
-                  </span>{' '}
-                  <span className="text-blue-500 font-black">
-                    Chat with us!
-                  </span>
-                </a>
-              </div>
-            ) : (
-              partners
-                .filter((d) => d.sidebarImgLight)
-                .filter((d) => d.libraries?.includes(libraryId as any))
-                .map((partner) => {
-                  return (
-                    <div
-                      key={partner.name}
-                      className="overflow-hidden hover:bg-gray-500/10 dark:hover:bg-gray-500/10 transition-colors"
-                    >
-                      <a
-                        href={partner.href}
-                        target="_blank"
-                        className="px-4 flex items-center justify-center cursor-pointer"
-                        rel="noreferrer"
-                      >
-                        <div className="mx-auto max-w-[150px]">
-                          <img
-                            src={partner.sidebarImgLight}
-                            alt={partner.name}
-                            className={twMerge(
-                              'w-full',
-                              partner.sidebarImgClass,
-                              'dark:hidden'
-                            )}
-                          />
-                          <img
-                            src={
-                              partner.sidebarImgDark || partner.sidebarImgLight
-                            }
-                            alt={partner.name}
-                            className={twMerge(
-                              'w-full',
-                              partner.sidebarImgClass,
-                              'hidden dark:block'
-                            )}
-                          />
-                        </div>
-                      </a>
-                    </div>
-                  )
-                })
-            )}
-          </div>
-          <div className="p-4 bg-white dark:bg-gray-900/30 border-b border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border-t border-l rounded-l-lg">
-            {libraryId === 'query' ? (
-              <DocsCalloutQueryGG />
-            ) : (
-              <DocsCalloutBytes />
-            )}
-          </div>
-
-          <div className="bg-white dark:bg-gray-900/20 border-gray-500/20 shadow-xl flex flex-col border-t border-l border-b p-4 space-y-2 rounded-l-lg">
-            <Carbon />
-            <div
-              className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500 italic
-                dark:bg-opacity-20 self-center opacity-50 hover:opacity-100 transition-opacity"
-            >
-              This ad helps to keep us from burning out and rage-quitting OSS
-              just *that* much more, so chill. 😉
-            </div>
-          </div>
-        </div>
-      </div>
-      {showBytes ? (
-        <div className="w-[300px] max-w-[350px] fixed md:hidden top-1/2 right-2 z-30 -translate-y-1/2 shadow-lg">
-          <div className="bg-white dark:bg-gray-900/30 border border-black/10 dark:border-white/10 p-4 md:p-6 rounded-lg">
-            {libraryId === 'query' ? (
-              <DocsCalloutQueryGG />
-            ) : (
-              <DocsCalloutBytes />
-            )}
-            <button
-              className="absolute top-0 right-0 p-2 hover:text-red-500 opacity:30 hover:opacity-100"
-              onClick={() => {
-                setShowBytes(false)
-              }}
-            >
-              <FaTimes />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <button
-          className="right-0 top-1/2 -translate-y-[50px] fixed lg:hidden"
-          onClick={() => {
-            setShowBytes(true)
-          }}
-        >
-          <div
-            className="origin-bottom-right -rotate-90 text-xs bg-white dark:bg-gray-800 border border-gray-100
-            hover:bg-rose-600 hover:text-white p-1 px-2 rounded-t-md shadow-md dark:border-0"
-          >
-            {libraryId === 'query' ? (
-              <>
-                <strong>
-                  <span role="img" aria-label="crystal ball">
-                    &#128302;
-                  </span>{' '}
-                  Skip the docs?
-                </strong>
-              </>
-            ) : (
-              <>
-                Subscribe to <strong>Bytes</strong>
-              </>
-            )}
-          </div>
-        </button>
-      )}
+      {children}
     </div>
   )
 }
diff --git a/app/components/Markdown.tsx b/app/components/Markdown.tsx
index d46905cda..0bd83ff96 100644
--- a/app/components/Markdown.tsx
+++ b/app/components/Markdown.tsx
@@ -206,33 +206,41 @@ const getHighlighter = cache(async (language: string, themes: string[]) => {
   return highlighter
 })
 
-export function Markdown({ code }: { code: string }) {
-  const jsx = React.useMemo(() => {
-    const markup = marked.use(
-      { gfm: true },
-      gfmHeadingId(),
-      markedAlert()
-    )(code) as string
-
-    const options: HTMLReactParserOptions = {
-      replace: (domNode) => {
-        if (domNode instanceof Element && domNode.attribs) {
-          const replacer = markdownComponents[domNode.name]
-          if (replacer) {
-            return React.createElement(
-              replacer,
-              attributesToProps(domNode.attribs),
-              domToReact(domNode.children, options)
-            )
-          }
-        }
+const options: HTMLReactParserOptions = {
+  replace: (domNode) => {
+    if (domNode instanceof Element && domNode.attribs) {
+      const replacer = markdownComponents[domNode.name]
+      if (replacer) {
+        return React.createElement(
+          replacer,
+          attributesToProps(domNode.attribs),
+          domToReact(domNode.children, options)
+        )
+      }
+    }
+
+    return
+  },
+}
+
+type MarkdownProps = { code?: string; markup?: string }
 
-        return
-      },
+export function Markdown({ code, markup }: MarkdownProps) {
+  return React.useMemo(() => {
+    if (code) {
+      const markup = marked.use(
+        { gfm: true },
+        gfmHeadingId(),
+        markedAlert()
+      )(code) as string
+
+      return parse(markup, options)
     }
 
-    return parse(markup, options)
-  }, [code])
+    if (markup) {
+      return parse(markup, options)
+    }
 
-  return jsx
+    return null
+  }, [code, markup])
 }
diff --git a/app/components/Partners.tsx b/app/components/Partners.tsx
new file mode 100644
index 000000000..cf4c49308
--- /dev/null
+++ b/app/components/Partners.tsx
@@ -0,0 +1,74 @@
+import { twMerge } from 'tailwind-merge'
+import { partners } from '~/utils/partners'
+
+type PartnersProps = {
+  libraryId: string
+  repo: string
+}
+
+export function Partners({ libraryId, repo }: PartnersProps) {
+  return (
+    <div className="bg-white dark:bg-gray-900/30 border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border border-r-0 border-t-0 rounded-bl-lg">
+      <div className="uppercase font-black text-center p-3 opacity-50">
+        Our Partners
+      </div>
+
+      {!partners.some((d) => d.libraries?.includes(libraryId as any)) ? (
+        <div className="hover:bg-gray-500/10 dark:hover:bg-gray-500/10 transition-colors">
+          <a
+            href={`mailto:partners@tanstack.com?subject=TanStack ${
+              repo.split('/')[1]
+            } Partnership`}
+            className="p-2 block text-xs"
+          >
+            <span className="opacity-50 italic">
+              Wow, it looks like you could be our first partner for this
+              library!
+            </span>{' '}
+            <span className="text-blue-500 font-black">Chat with us!</span>
+          </a>
+        </div>
+      ) : (
+        partners
+          .filter((d) => d.sidebarImgLight)
+          .filter((d) => d.libraries?.includes(libraryId as any))
+          .map((partner) => {
+            return (
+              <div
+                key={partner.name}
+                className="overflow-hidden hover:bg-gray-500/10 dark:hover:bg-gray-500/10 transition-colors"
+              >
+                <a
+                  href={partner.href}
+                  target="_blank"
+                  className="px-4 flex items-center justify-center cursor-pointer"
+                  rel="noreferrer"
+                >
+                  <div className="mx-auto max-w-[150px]">
+                    <img
+                      src={partner.sidebarImgLight}
+                      alt={partner.name}
+                      className={twMerge(
+                        'w-full',
+                        partner.sidebarImgClass,
+                        'dark:hidden'
+                      )}
+                    />
+                    <img
+                      src={partner.sidebarImgDark || partner.sidebarImgLight}
+                      alt={partner.name}
+                      className={twMerge(
+                        'w-full',
+                        partner.sidebarImgClass,
+                        'hidden dark:block'
+                      )}
+                    />
+                  </div>
+                </a>
+              </div>
+            )
+          })
+      )}
+    </div>
+  )
+}
diff --git a/app/components/Toc.tsx b/app/components/Toc.tsx
new file mode 100644
index 000000000..275a3475f
--- /dev/null
+++ b/app/components/Toc.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+import { HeadingData } from 'marked-gfm-heading-id'
+import { useLocation } from '@tanstack/react-router'
+
+const headingLevels: Record<number, string> = {
+  1: 'pl-1',
+  2: 'pl-2',
+  3: 'pl-6',
+  4: 'pl-10',
+  5: 'pl-14',
+  6: 'pl-16',
+}
+
+export function Toc({
+  colorFrom,
+  colorTo,
+  headings,
+}: {
+  headings: HeadingData[]
+  colorFrom: string
+  colorTo: string
+}) {
+  const location = useLocation()
+
+  const [hash, setHash] = React.useState('')
+  const [isCollapsed, setIsCollapsed] = React.useState(true)
+
+  React.useEffect(() => {
+    setHash(location.hash)
+  }, [location])
+
+  function toggleCollapse() {
+    setIsCollapsed((prev) => !prev)
+  }
+
+  return (
+    <nav className="bg-white dark:bg-gray-900/30 border-b border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border-t border-l rounded-l-lg">
+      <button
+        className="uppercase p-3 font-black text-center opacity-50 hover:text-white"
+        onClick={toggleCollapse}
+      >
+        On this page
+      </button>
+      <ul
+        className={twMerge(
+          'flex flex-col overflow-y-auto gap-0.5 text-[.85em]',
+          isCollapsed ? 'max-h-[0px]' : 'p-1 max-h-[600px]'
+        )}
+      >
+        {headings.map((heading) => (
+          <li
+            key={heading.id}
+            className={twMerge(
+              'cursor-pointer pr-2 py-[.1rem] w-full rounded-lg hover:bg-gray-500 hover:bg-opacity-10',
+              headingLevels[heading.level]
+            )}
+          >
+            <a
+              href={`#${heading.id}`}
+              className={`truncate block aria-current:bg-gradient-to-r ${colorFrom} ${colorTo} aria-current:bg-clip-text aria-current:text-transparent`}
+              aria-current={hash === `${heading.id}` ? 'location' : undefined}
+            >
+              {heading.text}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
diff --git a/app/routes/$libraryId/$version.docs.$.tsx b/app/routes/$libraryId/$version.docs.$.tsx
index de31e616b..cf6649518 100644
--- a/app/routes/$libraryId/$version.docs.$.tsx
+++ b/app/routes/$libraryId/$version.docs.$.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
-import { Doc } from '~/components/Doc'
+import { DocContent } from '~/components/DocContent'
 import { loadDocs } from '~/utils/docs'
 import { getBranch, getLibrary } from '~/libraries'
 
@@ -38,10 +38,10 @@ function Docs() {
   const branch = getBranch(library, version)
 
   return (
-    <Doc
+    <DocContent
       title={title}
       content={content}
-      repo={library.repo}
+      library={library}
       branch={branch}
       filePath={filePath}
     />
diff --git a/app/routes/$libraryId/$version.docs.framework.$framework.$.tsx b/app/routes/$libraryId/$version.docs.framework.$framework.$.tsx
index dd68d322b..3ee018a59 100644
--- a/app/routes/$libraryId/$version.docs.framework.$framework.$.tsx
+++ b/app/routes/$libraryId/$version.docs.framework.$framework.$.tsx
@@ -1,6 +1,6 @@
 import { seo } from '~/utils/seo'
 import { createFileRoute } from '@tanstack/react-router'
-import { Doc } from '~/components/Doc'
+import { DocContent } from '~/components/DocContent'
 import { loadDocs } from '~/utils/docs'
 import { getBranch, getLibrary } from '~/libraries'
 import { capitalize } from '~/utils/utils'
@@ -44,10 +44,10 @@ function Docs() {
   const branch = getBranch(library, version)
 
   return (
-    <Doc
+    <DocContent
       title={title}
       content={content}
-      repo={library.repo}
+      library={library}
       branch={branch}
       filePath={filePath}
     />
diff --git a/app/routes/$libraryId/$version.docs.tsx b/app/routes/$libraryId/$version.docs.tsx
index 9740cdaf6..8c2592b8f 100644
--- a/app/routes/$libraryId/$version.docs.tsx
+++ b/app/routes/$libraryId/$version.docs.tsx
@@ -44,7 +44,6 @@ function DocsRoute() {
       version={version === 'latest' ? library.latestVersion : version!}
       colorFrom={library.colorFrom}
       colorTo={library.colorTo}
-      textColor={library.textColor}
       config={config}
       frameworks={library.frameworks}
       versions={library.availableVersions}
diff --git a/app/routes/_libraries/blog.$.tsx b/app/routes/_libraries/blog.$.tsx
index bb0658b9b..56e75b46a 100644
--- a/app/routes/_libraries/blog.$.tsx
+++ b/app/routes/_libraries/blog.$.tsx
@@ -73,7 +73,7 @@ ${content}`
   return (
     <Doc
       title={title}
-      content={blogContent}
+      code={blogContent}
       repo={'tanstack/tanstack.com'}
       branch={'main'}
       filePath={filePath}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 1ac4dc8ae..e61293d3c 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -20,6 +20,9 @@ module.exports = {
         inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.04)',
         none: 'none',
       },
+      aria: {
+        current: 'current="location"',
+      },
       colors: {
         // red: {
         //   default: '#FF4255',

From dce341bb7c1f11cdfb0f0a6a1dec12786248e0f9 Mon Sep 17 00:00:00 2001
From: Adil Kairolla <adil.kairolla.t@gmail.com>
Date: Tue, 26 Nov 2024 13:13:49 +0500
Subject: [PATCH 2/6] fix: Fix merge artifacts

---
 app/components/DocContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/DocContent.tsx b/app/components/DocContent.tsx
index 964655602..f61c8831d 100644
--- a/app/components/DocContent.tsx
+++ b/app/components/DocContent.tsx
@@ -57,7 +57,7 @@ export function DocContent({
       <div
         className={twMerge(
           `max-w-full min-w-0 flex relative justify-center w-full min-h-[88dvh] lg:min-h-0`,
-          !isExample && 'mx-auto w-[900px]'
+          !isExample && 'mx-auto w-[1000px]'
         )}
       >
         <Doc

From 14845270c18bf6236e237c8ce79c6e14b0796315 Mon Sep 17 00:00:00 2001
From: Adil Kairolla <adil.kairolla.t@gmail.com>
Date: Wed, 27 Nov 2024 14:45:29 +0500
Subject: [PATCH 3/6] feat: update Toc hover colors for light theme

---
 app/components/Toc.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Toc.tsx b/app/components/Toc.tsx
index 275a3475f..025afaefb 100644
--- a/app/components/Toc.tsx
+++ b/app/components/Toc.tsx
@@ -37,7 +37,7 @@ export function Toc({
   return (
     <nav className="bg-white dark:bg-gray-900/30 border-b border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border-t border-l rounded-l-lg">
       <button
-        className="uppercase p-3 font-black text-center opacity-50 hover:text-white"
+        className="uppercase p-3 font-black text-center opacity-50 hover:bg-gray-500/10 dark:hover:bg-gray-500/10 transition-colors hover:opacity-100"
         onClick={toggleCollapse}
       >
         On this page

From d64001894232b896df65ac622cb44a22ba70d90c Mon Sep 17 00:00:00 2001
From: Adil Kairolla <adil.kairolla.t@gmail.com>
Date: Thu, 28 Nov 2024 04:52:39 +0500
Subject: [PATCH 4/6] feat: Remove toc from right side bar, add toc to the page
 doc

---
 app/components/Doc.tsx                        |  94 ++++++--
 app/components/DocContent.tsx                 | 157 ------------
 app/components/DocPagination.tsx              |  75 ------
 app/components/DocsLayout.tsx                 | 225 +++++++++++++++++-
 app/components/Markdown.tsx                   |  14 +-
 app/components/Partners.tsx                   |  74 ------
 app/components/Toc.tsx                        |  50 ++--
 app/routes/$libraryId/$version.docs.$.tsx     |   9 +-
 .../$version.docs.framework.$framework.$.tsx  |   9 +-
 app/routes/$libraryId/$version.docs.tsx       |   1 +
 app/routes/_libraries/blog.$.tsx              |   4 +-
 app/routes/_libraries/blog.index.tsx          |   2 +-
 12 files changed, 337 insertions(+), 377 deletions(-)
 delete mode 100644 app/components/DocContent.tsx
 delete mode 100644 app/components/DocPagination.tsx
 delete mode 100644 app/components/Partners.tsx

diff --git a/app/components/Doc.tsx b/app/components/Doc.tsx
index b1d587f6f..eaaf40709 100644
--- a/app/components/Doc.tsx
+++ b/app/components/Doc.tsx
@@ -1,35 +1,91 @@
+import * as React from 'react'
 import { FaEdit } from 'react-icons/fa'
+import { marked } from 'marked'
+import markedAlert from 'marked-alert'
+import { gfmHeadingId, getHeadingList } from 'marked-gfm-heading-id'
 import { DocTitle } from '~/components/DocTitle'
 import { Markdown } from '~/components/Markdown'
+import { Toc } from './Toc'
+import { twMerge } from 'tailwind-merge'
 
 type DocProps = {
   title: string
+  content: string
   repo: string
   branch: string
   filePath: string
-} & ({ code: string; markup?: never } | { markup: string; code?: never })
+  shouldRenderToc?: boolean
+  colorFrom?: string
+  colorTo?: string
+}
+
+export function Doc({
+  title,
+  content,
+  repo,
+  branch,
+  filePath,
+  shouldRenderToc = false,
+  colorFrom,
+  colorTo,
+}: DocProps) {
+  const { markup, headings } = React.useMemo(() => {
+    const markup = marked.use(
+      { gfm: true },
+      gfmHeadingId(),
+      markedAlert()
+    )(content) as string
+
+    const headings = getHeadingList()
+
+    return { markup, headings }
+  }, [content])
+
+  const isTocVisible = shouldRenderToc && headings && headings.length > 1
 
-export function Doc({ title, repo, branch, filePath, code, markup }: DocProps) {
   return (
-    <div className="p-4 lg:p-6 overflow-auto w-full bg-white/70 dark:bg-black/30 m-2 md:m-4 xl:m-8 rounded-xl">
-      {title ? <DocTitle>{title}</DocTitle> : null}
-      <div className="h-4" />
-      <div className="h-px bg-gray-500 opacity-20" />
-      <div className="h-4" />
-      <div className="prose prose-gray prose-sm prose-p:leading-7 dark:prose-invert max-w-none">
-        <Markdown code={code} markup={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"
+    <div
+      className={twMerge(
+        'flex w-max bg-white/70 dark:bg-black/30  m-2 md:m-4 xl:m-8 rounded-xl',
+        isTocVisible && 'w-full'
+      )}
+    >
+      <div
+        className={twMerge(
+          'flex overflow-auto flex-col w-full p-4 lg:p-6 max-w-[936px]',
+          isTocVisible && 'border-r border-gray-500/20 !pr-0'
+        )}
+      >
+        {title ? <DocTitle>{title}</DocTitle> : null}
+        <div className="h-4" />
+        <div className="h-px bg-gray-500 opacity-20" />
+        <div className="h-4" />
+        <div
+          className={twMerge(
+            'prose prose-gray prose-sm prose-p:leading-7 dark:prose-invert max-w-none',
+            isTocVisible && 'pr-4 lg:pr-6'
+          )}
         >
-          <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" />
+
+      {isTocVisible && (
+        <div className="max-w-52 w-full hidden 2xl:block transition-all">
+          <Toc headings={headings} colorFrom={colorFrom} colorTo={colorTo} />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/app/components/DocContent.tsx b/app/components/DocContent.tsx
deleted file mode 100644
index f61c8831d..000000000
--- a/app/components/DocContent.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import * as React from 'react'
-import { FaTimes } from 'react-icons/fa'
-import { twMerge } from 'tailwind-merge'
-import { useLoaderData, useMatches } from '@tanstack/react-router'
-import { marked } from 'marked'
-import markedAlert from 'marked-alert'
-import { gfmHeadingId, getHeadingList } from 'marked-gfm-heading-id'
-import { Toc } from '~/components/Toc'
-import { Doc } from '~/components/Doc'
-import { Carbon } from '~/components/Carbon'
-import { Partners } from '~/components/Partners'
-import { useMenuConfig } from '~/components/DocsLayout'
-import { DocPagination } from '~/components/DocPagination'
-import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
-import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
-import { Library } from '~/libraries'
-import { useLocalStorage } from '~/utils/useLocalStorage'
-
-export function DocContent({
-  title,
-  content,
-  branch,
-  filePath,
-  library,
-}: {
-  title: string
-  content: string
-  branch: string
-  filePath: string
-  library: Library
-}) {
-  const matches = useMatches()
-  const [showBytes, setShowBytes] = useLocalStorage('showBytes', true)
-  const { config } = useLoaderData({ from: '/$libraryId/$version/docs' })
-  const menuConfig = useMenuConfig({
-    config,
-    frameworks: library.frameworks,
-    repo: library.repo,
-  })
-
-  const { markup, headings } = React.useMemo(() => {
-    const markup = marked.use(
-      { gfm: true },
-      gfmHeadingId(),
-      markedAlert()
-    )(content) as string
-
-    const headings = getHeadingList()
-
-    return { markup, headings }
-  }, [content])
-
-  const isExample = matches.some((d) => d.pathname.includes('/examples/'))
-
-  return (
-    <>
-      <div
-        className={twMerge(
-          `max-w-full min-w-0 flex relative justify-center w-full min-h-[88dvh] lg:min-h-0`,
-          !isExample && 'mx-auto w-[1000px]'
-        )}
-      >
-        <Doc
-          title={title}
-          repo={library.repo}
-          branch={branch}
-          markup={markup}
-          filePath={filePath}
-        />
-        <DocPagination
-          config={menuConfig}
-          colorFrom={library.colorFrom}
-          colorTo={library.colorTo}
-          textColor={library.textColor}
-        />
-      </div>
-      <div className="-ml-2 pl-2 w-64 hidden md:block sticky top-0 max-h-screen overflow-y-auto">
-        <div className="ml-auto flex flex-col space-y-4">
-          <Partners libraryId={library.id} repo={library.repo} />
-
-          {headings.length ? (
-            <Toc
-              headings={headings}
-              colorFrom={library.colorFrom}
-              colorTo={library.colorTo}
-            />
-          ) : null}
-
-          <div className="p-4 bg-white dark:bg-gray-900/30 border-b border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border-t border-l rounded-l-lg">
-            {library.id === 'query' ? (
-              <DocsCalloutQueryGG />
-            ) : (
-              <DocsCalloutBytes />
-            )}
-          </div>
-
-          <div className="bg-white dark:bg-gray-900/20 border-gray-500/20 shadow-xl flex flex-col border-t border-l border-b p-4 space-y-2 rounded-l-lg">
-            <Carbon />
-            <div
-              className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500 italic
-                dark:bg-opacity-20 self-center opacity-50 hover:opacity-100 transition-opacity"
-            >
-              This ad helps to keep us from burning out and rage-quitting OSS
-              just *that* much more, so chill. 😉
-            </div>
-          </div>
-        </div>
-      </div>
-      {showBytes ? (
-        <div className="w-[300px] max-w-[350px] fixed md:hidden top-1/2 right-2 z-30 -translate-y-1/2 shadow-lg">
-          <div className="bg-white dark:bg-gray-900/30 border border-black/10 dark:border-white/10 p-4 md:p-6 rounded-lg">
-            {library.id === 'query' ? (
-              <DocsCalloutQueryGG />
-            ) : (
-              <DocsCalloutBytes />
-            )}
-            <button
-              className="absolute top-0 right-0 p-2 hover:text-red-500 opacity:30 hover:opacity-100"
-              onClick={() => {
-                setShowBytes(false)
-              }}
-            >
-              <FaTimes />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <button
-          className="right-0 top-1/2 -translate-y-[50px] fixed lg:hidden"
-          onClick={() => {
-            setShowBytes(true)
-          }}
-        >
-          <div
-            className="origin-bottom-right -rotate-90 text-xs bg-white dark:bg-gray-800 border border-gray-100
-            hover:bg-rose-600 hover:text-white p-1 px-2 rounded-t-md shadow-md dark:border-0"
-          >
-            {library.id === 'query' ? (
-              <>
-                <strong>
-                  <span role="img" aria-label="crystal ball">
-                    &#128302;
-                  </span>{' '}
-                  Skip the docs?
-                </strong>
-              </>
-            ) : (
-              <>
-                Subscribe to <strong>Bytes</strong>
-              </>
-            )}
-          </div>
-        </button>
-      )}
-    </>
-  )
-}
diff --git a/app/components/DocPagination.tsx b/app/components/DocPagination.tsx
deleted file mode 100644
index 02c10cf08..000000000
--- a/app/components/DocPagination.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from 'react'
-import { Link, useMatches } from '@tanstack/react-router'
-import { FaArrowLeft, FaArrowRight } from 'react-icons/fa'
-import { last } from '~/utils/utils'
-import { MenuItem } from '~/utils/config'
-
-type DocPaginationProps = {
-  config: MenuItem[]
-  colorFrom: string
-  colorTo: string
-  textColor: string
-}
-
-export function DocPagination({
-  config,
-  colorFrom,
-  colorTo,
-  textColor,
-}: DocPaginationProps) {
-  const matches = useMatches()
-
-  const flatMenu = React.useMemo(
-    () => config.flatMap((d) => d?.children),
-    [config]
-  )
-
-  const lastMatch = last(matches)
-  const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
-
-  const relativePathname = lastMatch.pathname.replace(
-    docsMatch!.pathname + '/',
-    ''
-  )
-
-  const index = flatMenu.findIndex((d) => d?.to === relativePathname)
-  const prevItem = flatMenu[index - 1]
-  const nextItem = flatMenu[index + 1]
-
-  return (
-    <div className="fixed flex items-center flex-wrap bottom-2 left-0 lg:left-[250px] z-10 right-0 text-xs md:text-sm px-1">
-      <div className="w-1/2 px-1 flex justify-end flex-wrap">
-        {prevItem ? (
-          <Link
-            to={prevItem.to}
-            params
-            className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
-          >
-            <div className="flex gap-2 items-center font-bold">
-              <FaArrowLeft />
-              {prevItem.label}
-            </div>
-          </Link>
-        ) : null}
-      </div>
-      <div className="w-1/2 px-1 flex justify-start flex-wrap">
-        {nextItem ? (
-          <Link
-            to={nextItem.to}
-            params
-            className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
-          >
-            <div className="flex gap-2 items-center font-bold">
-              <span
-                className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
-              >
-                {nextItem.label}
-              </span>{' '}
-              <FaArrowRight className={textColor} />
-            </div>
-          </Link>
-        ) : null}
-      </div>
-    </div>
-  )
-}
diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
index 3b28159ae..004cfec2f 100644
--- a/app/components/DocsLayout.tsx
+++ b/app/components/DocsLayout.tsx
@@ -1,18 +1,34 @@
 import * as React from 'react'
 import { CgClose, CgMenuLeft } from 'react-icons/cg'
-import { FaDiscord, FaGithub } from 'react-icons/fa'
-import { Link, useNavigate, useParams } from '@tanstack/react-router'
+import {
+  FaArrowLeft,
+  FaArrowRight,
+  FaDiscord,
+  FaGithub,
+  FaTimes,
+} from 'react-icons/fa'
+import {
+  Link,
+  useMatches,
+  useNavigate,
+  useParams,
+} from '@tanstack/react-router'
 import { OramaSearchBox } from '@orama/react-components'
+import { Carbon } from '~/components/Carbon'
 import { Select } from '~/components/Select'
+import { useLocalStorage } from '~/utils/useLocalStorage'
 import { DocsLogo } from '~/components/DocsLogo'
-import { capitalize } from '~/utils/utils'
+import { last, capitalize } from '~/utils/utils'
 import type { SelectOption } from '~/components/Select'
 import type { ConfigSchema, MenuItem } from '~/utils/config'
 import { create } from 'zustand'
 import { searchBoxParams, searchButtonParams } from '~/components/Orama'
 import { Framework, getFrameworkOptions } from '~/libraries'
+import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
+import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
 import { ClientOnlySearchButton } from './ClientOnlySearchButton'
 import { twMerge } from 'tailwind-merge'
+import { partners } from '~/utils/partners'
 
 // Let's use zustand to wrap the local storage logic. This way
 // we'll get subscriptions for free and we can use it in other
@@ -151,7 +167,7 @@ function useCurrentVersion(versions: string[]) {
   }
 }
 
-export const useMenuConfig = ({
+const useMenuConfig = ({
   config,
   repo,
   frameworks,
@@ -278,6 +294,7 @@ type DocsLayoutProps = {
   version: string
   colorFrom: string
   colorTo: string
+  textColor: string
   config: ConfigSchema
   frameworks: Framework[]
   versions: string[]
@@ -290,6 +307,7 @@ export function DocsLayout({
   version,
   colorFrom,
   colorTo,
+  textColor,
   config,
   frameworks,
   versions,
@@ -303,8 +321,31 @@ export function DocsLayout({
   const versionConfig = useVersionConfig({ versions })
   const menuConfig = useMenuConfig({ config, frameworks, repo })
 
+  const matches = useMatches()
+  const lastMatch = last(matches)
+
+  const isExample = matches.some((d) => d.pathname.includes('/examples/'))
+
   const detailsRef = React.useRef<HTMLElement>(null!)
 
+  const flatMenu = React.useMemo(
+    () => menuConfig.flatMap((d) => d?.children),
+    [menuConfig]
+  )
+
+  const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
+
+  const relativePathname = lastMatch.pathname.replace(
+    docsMatch!.pathname + '/',
+    ''
+  )
+
+  const index = flatMenu.findIndex((d) => d?.to === relativePathname)
+  const prevItem = flatMenu[index - 1]
+  const nextItem = flatMenu[index + 1]
+
+  const [showBytes, setShowBytes] = useLocalStorage('showBytes', true)
+
   const [mounted, setMounted] = React.useState(false)
 
   React.useEffect(() => {
@@ -518,7 +559,181 @@ export function DocsLayout({
       </div>
       {smallMenu}
       {largeMenu}
-      {children}
+      <div
+        className={twMerge(
+          `max-w-full min-w-0 flex relative justify-center w-full min-h-[88dvh] lg:min-h-0`,
+          !isExample && 'mx-auto w-[1208px]'
+        )}
+      >
+        {children}
+        <div className="fixed flex items-center flex-wrap bottom-2 left-0 lg:left-[250px] z-10 right-0 text-xs md:text-sm px-1">
+          <div className="w-1/2 px-1 flex justify-end flex-wrap">
+            {prevItem ? (
+              <Link
+                to={prevItem.to}
+                params
+                className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
+              >
+                <div className="flex gap-2 items-center font-bold">
+                  <FaArrowLeft />
+                  {prevItem.label}
+                </div>
+              </Link>
+            ) : null}
+          </div>
+          <div className="w-1/2 px-1 flex justify-start flex-wrap">
+            {nextItem ? (
+              <Link
+                to={nextItem.to}
+                params
+                className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
+              >
+                <div className="flex gap-2 items-center font-bold">
+                  <span
+                    className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
+                  >
+                    {nextItem.label}
+                  </span>{' '}
+                  <FaArrowRight className={textColor} />
+                </div>
+              </Link>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      <div className="-ml-2 pl-2 w-64 shrink-0 hidden md:block sticky top-0 max-h-screen overflow-y-auto">
+        <div className="ml-auto flex flex-col space-y-4">
+          <div className="bg-white dark:bg-gray-900/30 border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border border-r-0 border-t-0 rounded-bl-lg">
+            <div className="uppercase font-black text-center p-3 opacity-50">
+              Our Partners
+            </div>
+            {!partners.some((d) => d.libraries?.includes(libraryId as any)) ? (
+              <div className="hover:bg-gray-500/10 dark:hover:bg-gray-500/10 transition-colors">
+                <a
+                  href={`mailto:partners@tanstack.com?subject=TanStack ${
+                    repo.split('/')[1]
+                  } Partnership`}
+                  className="p-2 block text-xs"
+                >
+                  <span className="opacity-50 italic">
+                    Wow, it looks like you could be our first partner for this
+                    library!
+                  </span>{' '}
+                  <span className="text-blue-500 font-black">
+                    Chat with us!
+                  </span>
+                </a>
+              </div>
+            ) : (
+              partners
+                .filter((d) => d.sidebarImgLight)
+                .filter((d) => d.libraries?.includes(libraryId as any))
+                .map((partner) => {
+                  return (
+                    <div
+                      key={partner.name}
+                      className="overflow-hidden hover:bg-gray-500/10 dark:hover:bg-gray-500/10 transition-colors"
+                    >
+                      <a
+                        href={partner.href}
+                        target="_blank"
+                        className="px-4 flex items-center justify-center cursor-pointer"
+                        rel="noreferrer"
+                      >
+                        <div className="mx-auto max-w-[150px]">
+                          <img
+                            src={partner.sidebarImgLight}
+                            alt={partner.name}
+                            className={twMerge(
+                              'w-full',
+                              partner.sidebarImgClass,
+                              'dark:hidden'
+                            )}
+                          />
+                          <img
+                            src={
+                              partner.sidebarImgDark || partner.sidebarImgLight
+                            }
+                            alt={partner.name}
+                            className={twMerge(
+                              'w-full',
+                              partner.sidebarImgClass,
+                              'hidden dark:block'
+                            )}
+                          />
+                        </div>
+                      </a>
+                    </div>
+                  )
+                })
+            )}
+          </div>
+          <div className="p-4 bg-white dark:bg-gray-900/30 border-b border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border-t border-l rounded-l-lg">
+            {libraryId === 'query' ? (
+              <DocsCalloutQueryGG />
+            ) : (
+              <DocsCalloutBytes />
+            )}
+          </div>
+
+          <div className="bg-white dark:bg-gray-900/20 border-gray-500/20 shadow-xl flex flex-col border-t border-l border-b p-4 space-y-2 rounded-l-lg">
+            <Carbon />
+            <div
+              className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500 italic
+                dark:bg-opacity-20 self-center opacity-50 hover:opacity-100 transition-opacity"
+            >
+              This ad helps to keep us from burning out and rage-quitting OSS
+              just *that* much more, so chill. 😉
+            </div>
+          </div>
+        </div>
+      </div>
+      {showBytes ? (
+        <div className="w-[300px] max-w-[350px] fixed md:hidden top-1/2 right-2 z-30 -translate-y-1/2 shadow-lg">
+          <div className="bg-white dark:bg-gray-900/30 border border-black/10 dark:border-white/10 p-4 md:p-6 rounded-lg">
+            {libraryId === 'query' ? (
+              <DocsCalloutQueryGG />
+            ) : (
+              <DocsCalloutBytes />
+            )}
+            <button
+              className="absolute top-0 right-0 p-2 hover:text-red-500 opacity:30 hover:opacity-100"
+              onClick={() => {
+                setShowBytes(false)
+              }}
+            >
+              <FaTimes />
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          className="right-0 top-1/2 -translate-y-[50px] fixed lg:hidden"
+          onClick={() => {
+            setShowBytes(true)
+          }}
+        >
+          <div
+            className="origin-bottom-right -rotate-90 text-xs bg-white dark:bg-gray-800 border border-gray-100
+            hover:bg-rose-600 hover:text-white p-1 px-2 rounded-t-md shadow-md dark:border-0"
+          >
+            {libraryId === 'query' ? (
+              <>
+                <strong>
+                  <span role="img" aria-label="crystal ball">
+                    &#128302;
+                  </span>{' '}
+                  Skip the docs?
+                </strong>
+              </>
+            ) : (
+              <>
+                Subscribe to <strong>Bytes</strong>
+              </>
+            )}
+          </div>
+        </button>
+      )}
     </div>
   )
 }
diff --git a/app/components/Markdown.tsx b/app/components/Markdown.tsx
index 0bd83ff96..ef76af3b9 100644
--- a/app/components/Markdown.tsx
+++ b/app/components/Markdown.tsx
@@ -223,24 +223,24 @@ const options: HTMLReactParserOptions = {
   },
 }
 
-type MarkdownProps = { code?: string; markup?: string }
+type MarkdownProps = { rawContent?: string; htmlMarkup?: string }
 
-export function Markdown({ code, markup }: MarkdownProps) {
+export function Markdown({ rawContent, htmlMarkup }: MarkdownProps) {
   return React.useMemo(() => {
-    if (code) {
+    if (rawContent) {
       const markup = marked.use(
         { gfm: true },
         gfmHeadingId(),
         markedAlert()
-      )(code) as string
+      )(rawContent) as string
 
       return parse(markup, options)
     }
 
-    if (markup) {
-      return parse(markup, options)
+    if (htmlMarkup) {
+      return parse(htmlMarkup, options)
     }
 
     return null
-  }, [code, markup])
+  }, [rawContent, htmlMarkup])
 }
diff --git a/app/components/Partners.tsx b/app/components/Partners.tsx
deleted file mode 100644
index cf4c49308..000000000
--- a/app/components/Partners.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { twMerge } from 'tailwind-merge'
-import { partners } from '~/utils/partners'
-
-type PartnersProps = {
-  libraryId: string
-  repo: string
-}
-
-export function Partners({ libraryId, repo }: PartnersProps) {
-  return (
-    <div className="bg-white dark:bg-gray-900/30 border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border border-r-0 border-t-0 rounded-bl-lg">
-      <div className="uppercase font-black text-center p-3 opacity-50">
-        Our Partners
-      </div>
-
-      {!partners.some((d) => d.libraries?.includes(libraryId as any)) ? (
-        <div className="hover:bg-gray-500/10 dark:hover:bg-gray-500/10 transition-colors">
-          <a
-            href={`mailto:partners@tanstack.com?subject=TanStack ${
-              repo.split('/')[1]
-            } Partnership`}
-            className="p-2 block text-xs"
-          >
-            <span className="opacity-50 italic">
-              Wow, it looks like you could be our first partner for this
-              library!
-            </span>{' '}
-            <span className="text-blue-500 font-black">Chat with us!</span>
-          </a>
-        </div>
-      ) : (
-        partners
-          .filter((d) => d.sidebarImgLight)
-          .filter((d) => d.libraries?.includes(libraryId as any))
-          .map((partner) => {
-            return (
-              <div
-                key={partner.name}
-                className="overflow-hidden hover:bg-gray-500/10 dark:hover:bg-gray-500/10 transition-colors"
-              >
-                <a
-                  href={partner.href}
-                  target="_blank"
-                  className="px-4 flex items-center justify-center cursor-pointer"
-                  rel="noreferrer"
-                >
-                  <div className="mx-auto max-w-[150px]">
-                    <img
-                      src={partner.sidebarImgLight}
-                      alt={partner.name}
-                      className={twMerge(
-                        'w-full',
-                        partner.sidebarImgClass,
-                        'dark:hidden'
-                      )}
-                    />
-                    <img
-                      src={partner.sidebarImgDark || partner.sidebarImgLight}
-                      alt={partner.name}
-                      className={twMerge(
-                        'w-full',
-                        partner.sidebarImgClass,
-                        'hidden dark:block'
-                      )}
-                    />
-                  </div>
-                </a>
-              </div>
-            )
-          })
-      )}
-    </div>
-  )
-}
diff --git a/app/components/Toc.tsx b/app/components/Toc.tsx
index 025afaefb..bf5296590 100644
--- a/app/components/Toc.tsx
+++ b/app/components/Toc.tsx
@@ -4,7 +4,7 @@ import { HeadingData } from 'marked-gfm-heading-id'
 import { useLocation } from '@tanstack/react-router'
 
 const headingLevels: Record<number, string> = {
-  1: 'pl-1',
+  1: 'pl-2',
   2: 'pl-2',
   3: 'pl-6',
   4: 'pl-10',
@@ -12,57 +12,45 @@ const headingLevels: Record<number, string> = {
   6: 'pl-16',
 }
 
-export function Toc({
-  colorFrom,
-  colorTo,
-  headings,
-}: {
+type TocProps = {
   headings: HeadingData[]
-  colorFrom: string
-  colorTo: string
-}) {
+  colorFrom?: string
+  colorTo?: string
+}
+
+export function Toc({ headings, colorFrom, colorTo }: TocProps) {
   const location = useLocation()
 
   const [hash, setHash] = React.useState('')
-  const [isCollapsed, setIsCollapsed] = React.useState(true)
 
   React.useEffect(() => {
     setHash(location.hash)
   }, [location])
 
-  function toggleCollapse() {
-    setIsCollapsed((prev) => !prev)
-  }
-
   return (
-    <nav className="bg-white dark:bg-gray-900/30 border-b border-gray-500/20 shadow-xl divide-y divide-gray-500/20 flex flex-col border-t border-l rounded-l-lg">
-      <button
-        className="uppercase p-3 font-black text-center opacity-50 hover:bg-gray-500/10 dark:hover:bg-gray-500/10 transition-colors hover:opacity-100"
-        onClick={toggleCollapse}
-      >
-        On this page
-      </button>
+    <nav className="flex flex-col p-2 gap-1 sticky top-2 max-h-screen">
+      <h3 className="text-[.9em] font-medium px-2">On this page</h3>
+
       <ul
-        className={twMerge(
-          'flex flex-col overflow-y-auto gap-0.5 text-[.85em]',
-          isCollapsed ? 'max-h-[0px]' : 'p-1 max-h-[600px]'
-        )}
+        className={twMerge('flex flex-col overflow-y-auto gap-0.5 text-[.8em]')}
       >
-        {headings.map((heading) => (
+        {headings?.map((heading) => (
           <li
             key={heading.id}
             className={twMerge(
-              'cursor-pointer pr-2 py-[.1rem] w-full rounded-lg hover:bg-gray-500 hover:bg-opacity-10',
+              'cursor-pointer py-[.1rem] w-full rounded-lg hover:bg-gray-500 hover:bg-opacity-10',
               headingLevels[heading.level]
             )}
           >
             <a
+              title={heading.id}
               href={`#${heading.id}`}
+              aria-current={hash === heading.id && 'location'}
               className={`truncate block aria-current:bg-gradient-to-r ${colorFrom} ${colorTo} aria-current:bg-clip-text aria-current:text-transparent`}
-              aria-current={hash === `${heading.id}` ? 'location' : undefined}
-            >
-              {heading.text}
-            </a>
+              dangerouslySetInnerHTML={{
+                __html: heading.text,
+              }}
+            />
           </li>
         ))}
       </ul>
diff --git a/app/routes/$libraryId/$version.docs.$.tsx b/app/routes/$libraryId/$version.docs.$.tsx
index cf6649518..951a91c56 100644
--- a/app/routes/$libraryId/$version.docs.$.tsx
+++ b/app/routes/$libraryId/$version.docs.$.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
-import { DocContent } from '~/components/DocContent'
+import { Doc } from '~/components/Doc'
 import { loadDocs } from '~/utils/docs'
 import { getBranch, getLibrary } from '~/libraries'
 
@@ -38,12 +38,15 @@ function Docs() {
   const branch = getBranch(library, version)
 
   return (
-    <DocContent
+    <Doc
       title={title}
       content={content}
-      library={library}
+      repo={library.repo}
       branch={branch}
       filePath={filePath}
+      colorFrom={library.colorFrom}
+      colorTo={library.colorTo}
+      shouldRenderToc
     />
   )
 }
diff --git a/app/routes/$libraryId/$version.docs.framework.$framework.$.tsx b/app/routes/$libraryId/$version.docs.framework.$framework.$.tsx
index 3ee018a59..0df92261a 100644
--- a/app/routes/$libraryId/$version.docs.framework.$framework.$.tsx
+++ b/app/routes/$libraryId/$version.docs.framework.$framework.$.tsx
@@ -1,6 +1,6 @@
 import { seo } from '~/utils/seo'
 import { createFileRoute } from '@tanstack/react-router'
-import { DocContent } from '~/components/DocContent'
+import { Doc } from '~/components/Doc'
 import { loadDocs } from '~/utils/docs'
 import { getBranch, getLibrary } from '~/libraries'
 import { capitalize } from '~/utils/utils'
@@ -44,12 +44,15 @@ function Docs() {
   const branch = getBranch(library, version)
 
   return (
-    <DocContent
+    <Doc
       title={title}
       content={content}
-      library={library}
+      repo={library.repo}
       branch={branch}
       filePath={filePath}
+      colorFrom={library.colorFrom}
+      colorTo={library.colorTo}
+      shouldRenderToc
     />
   )
 }
diff --git a/app/routes/$libraryId/$version.docs.tsx b/app/routes/$libraryId/$version.docs.tsx
index 8c2592b8f..9740cdaf6 100644
--- a/app/routes/$libraryId/$version.docs.tsx
+++ b/app/routes/$libraryId/$version.docs.tsx
@@ -44,6 +44,7 @@ function DocsRoute() {
       version={version === 'latest' ? library.latestVersion : version!}
       colorFrom={library.colorFrom}
       colorTo={library.colorTo}
+      textColor={library.textColor}
       config={config}
       frameworks={library.frameworks}
       versions={library.availableVersions}
diff --git a/app/routes/_libraries/blog.$.tsx b/app/routes/_libraries/blog.$.tsx
index 56e75b46a..06ad75981 100644
--- a/app/routes/_libraries/blog.$.tsx
+++ b/app/routes/_libraries/blog.$.tsx
@@ -66,14 +66,14 @@ export default function BlogPost() {
 
   const blogContent = `_by ${formatAuthors(authors)} on ${format(
     new Date(published || 0),
-    'MMM dd, yyyy',
+    'MMM dd, yyyy'
   )}._
 ${content}`
 
   return (
     <Doc
       title={title}
-      code={blogContent}
+      content={blogContent}
       repo={'tanstack/tanstack.com'}
       branch={'main'}
       filePath={filePath}
diff --git a/app/routes/_libraries/blog.index.tsx b/app/routes/_libraries/blog.index.tsx
index cacc280d1..085aef5a3 100644
--- a/app/routes/_libraries/blog.index.tsx
+++ b/app/routes/_libraries/blog.index.tsx
@@ -116,7 +116,7 @@ function BlogIndex() {
                     <div
                       className={`text-sm mt-4 text-black dark:text-white leading-7`}
                     >
-                      <Markdown code={excerpt || ''} />
+                      <Markdown rawContent={excerpt || ''} />
                     </div>
                   </div>
                   <div>

From 41ec4d8889db193d6f2d0c8a1da1270c6e6b6edc Mon Sep 17 00:00:00 2001
From: Adil Kairolla <adil.kairolla.t@gmail.com>
Date: Thu, 28 Nov 2024 14:16:47 +0500
Subject: [PATCH 5/6] fix: Fix document width

---
 app/components/Doc.tsx | 64 ++++++++++++++++++++++--------------------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/app/components/Doc.tsx b/app/components/Doc.tsx
index eaaf40709..a351224c9 100644
--- a/app/components/Doc.tsx
+++ b/app/components/Doc.tsx
@@ -44,48 +44,50 @@ export function Doc({
   const isTocVisible = shouldRenderToc && headings && headings.length > 1
 
   return (
-    <div
-      className={twMerge(
-        'flex w-max bg-white/70 dark:bg-black/30  m-2 md:m-4 xl:m-8 rounded-xl',
-        isTocVisible && 'w-full'
-      )}
-    >
+    <div className="w-full p-2 md:p-4 xl:p-8">
       <div
         className={twMerge(
-          'flex overflow-auto flex-col w-full p-4 lg:p-6 max-w-[936px]',
-          isTocVisible && 'border-r border-gray-500/20 !pr-0'
+          'flex bg-white/70 dark:bg-black/30 mx-auto rounded-xl max-w-[936px]',
+          isTocVisible && 'max-w-full'
         )}
       >
-        {title ? <DocTitle>{title}</DocTitle> : null}
-        <div className="h-4" />
-        <div className="h-px bg-gray-500 opacity-20" />
-        <div className="h-4" />
         <div
           className={twMerge(
-            'prose prose-gray prose-sm prose-p:leading-7 dark:prose-invert max-w-none',
-            isTocVisible && 'pr-4 lg:pr-6'
+            'flex overflow-auto flex-col w-full p-4 lg:p-6',
+            isTocVisible && 'border-r border-gray-500/20 !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
+            className={twMerge(
+              'prose prose-gray prose-sm prose-p:leading-7 dark:prose-invert max-w-none',
+              isTocVisible && 'pr-4 lg:pr-6'
+            )}
           >
-            <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="max-w-52 w-full hidden 2xl:block transition-all">
-          <Toc headings={headings} colorFrom={colorFrom} colorTo={colorTo} />
-        </div>
-      )}
+        {isTocVisible && (
+          <div className="max-w-52 w-full hidden 2xl:block transition-all">
+            <Toc headings={headings} colorFrom={colorFrom} colorTo={colorTo} />
+          </div>
+        )}
+      </div>
     </div>
   )
 }

From d99481a4ca4ae7da3d9112b9602ee74e85b4a8ad Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Fri, 29 Nov 2024 12:25:07 +1300
Subject: [PATCH 6/6] style: prettier format

---
 .../$version.docs.framework.$framework.examples.$.tsx       | 6 +++---
 app/routes/$libraryId/route.tsx                             | 4 ++--
 app/routes/_libraries/dedicated-support.tsx                 | 2 +-
 app/routes/_libraries/index.tsx                             | 6 +++---
 app/routes/_libraries/query.$version.index.tsx              | 2 +-
 app/routes/_libraries/start.$version.index.tsx              | 2 +-
 app/routes/_libraries/support.tsx                           | 2 +-
 app/routes/_libraries/table.$version.index.tsx              | 2 +-
 8 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx b/app/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx
index a9b8af7fa..d0f0d9c4c 100644
--- a/app/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx
+++ b/app/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx
@@ -9,7 +9,7 @@ import { seo } from '~/utils/seo'
 import { capitalize, slugToTitle } from '~/utils/utils'
 
 export const Route = createFileRoute(
-  '/$libraryId/$version/docs/framework/$framework/examples/$',
+  '/$libraryId/$version/docs/framework/$framework/examples/$'
 )({
   head: ({ params }) => {
     const library = getLibrary(params.libraryId)
@@ -17,10 +17,10 @@ export const Route = createFileRoute(
     return {
       meta: seo({
         title: `${capitalize(params.framework)} ${library.name} ${slugToTitle(
-          params._splat || '',
+          params._splat || ''
         )} Example | ${library.name} Docs`,
         description: `An example showing how to implement ${slugToTitle(
-          params._splat || '',
+          params._splat || ''
         )} in ${capitalize(params.framework)} using ${library.name}.`,
       }),
     }
diff --git a/app/routes/$libraryId/route.tsx b/app/routes/$libraryId/route.tsx
index 4dfc91475..bd34aa43e 100644
--- a/app/routes/$libraryId/route.tsx
+++ b/app/routes/$libraryId/route.tsx
@@ -15,8 +15,8 @@ export const Route = createFileRoute('/$libraryId')({
               .map(
                 (framework) =>
                   `${framework.charAt(0).toUpperCase()}${framework.slice(
-                    1,
-                  )} ${library.name.replace('TanStack ', '')}`,
+                    1
+                  )} ${library.name.replace('TanStack ', '')}`
               )
               .join(', ')}`
           : '',
diff --git a/app/routes/_libraries/dedicated-support.tsx b/app/routes/_libraries/dedicated-support.tsx
index c613d599c..13250811d 100644
--- a/app/routes/_libraries/dedicated-support.tsx
+++ b/app/routes/_libraries/dedicated-support.tsx
@@ -22,7 +22,7 @@ export const Route = createFileRoute('/_libraries/dedicated-support')({
     let indices = shuffle(
       Array.from({ length: teamMembers.length - 1 })
         .fill(0)
-        .map((_, i) => i + 1),
+        .map((_, i) => i + 1)
     )
 
     return indices
diff --git a/app/routes/_libraries/index.tsx b/app/routes/_libraries/index.tsx
index 7e9e67f97..e6b19816d 100644
--- a/app/routes/_libraries/index.tsx
+++ b/app/routes/_libraries/index.tsx
@@ -190,7 +190,7 @@ function Index() {
                   params
                   className={twMerge(
                     `border-4 border-transparent rounded-lg shadow-lg p-4 md:p-8 text-white transition-all bg-white dark:bg-gray-900 dark:border dark:border-gray-800`,
-                    library.cardStyles,
+                    library.cardStyles
                   )}
                   style={{
                     zIndex: i,
@@ -204,7 +204,7 @@ function Index() {
                         return (
                           <div
                             className={twMerge(
-                              `text-2xl font-extrabold`,
+                              `text-2xl font-extrabold`
                               // isPending && `[view-transition-name:library-name]`
                             )}
                             style={{
@@ -220,7 +220,7 @@ function Index() {
                       <div
                         className={twMerge(
                           `uppercase text-white bg-yellow-500 rounded-full px-2 py-1 text-xs font-black animate-pulse`,
-                          library.bgStyle,
+                          library.bgStyle
                         )}
                       >
                         {library.badge}
diff --git a/app/routes/_libraries/query.$version.index.tsx b/app/routes/_libraries/query.$version.index.tsx
index c4f7c996a..873a204e3 100644
--- a/app/routes/_libraries/query.$version.index.tsx
+++ b/app/routes/_libraries/query.$version.index.tsx
@@ -333,7 +333,7 @@ export default function VersionIndex() {
                       'ReactBricks',
                       'Nozzle.io',
                       'Uber',
-                    ],
+                    ]
                   )
                   .map((d, i) => (
                     <span key={i} className="opacity-70 even:opacity-40">
diff --git a/app/routes/_libraries/start.$version.index.tsx b/app/routes/_libraries/start.$version.index.tsx
index 92509f40b..eaa07c876 100644
--- a/app/routes/_libraries/start.$version.index.tsx
+++ b/app/routes/_libraries/start.$version.index.tsx
@@ -324,7 +324,7 @@ export default function VersionIndex() {
           </a>
           <a
             href={`https://twitter.com/intent/post?text=${encodeURIComponent(
-              `TanStack Start is in BETA! It's a new full-stack React framework from @Tan_Stack and you can check it out at https://tanstack.com/start/`,
+              `TanStack Start is in BETA! It's a new full-stack React framework from @Tan_Stack and you can check it out at https://tanstack.com/start/`
             )}`}
             target="_blank"
             className={`flex items-center gap-2 py-2 px-4 bg-cyan-500 rounded text-white uppercase font-extrabold`}
diff --git a/app/routes/_libraries/support.tsx b/app/routes/_libraries/support.tsx
index b2f5cbfa4..fb3008f89 100644
--- a/app/routes/_libraries/support.tsx
+++ b/app/routes/_libraries/support.tsx
@@ -56,7 +56,7 @@ function LoginComp() {
                     >
                       {d}
                     </div>
-                  ),
+                  )
                 )}
               </div>
             </Link>
diff --git a/app/routes/_libraries/table.$version.index.tsx b/app/routes/_libraries/table.$version.index.tsx
index 0e64174a5..b8d928a34 100644
--- a/app/routes/_libraries/table.$version.index.tsx
+++ b/app/routes/_libraries/table.$version.index.tsx
@@ -312,7 +312,7 @@ export default function TableVersionIndex() {
                   'TicketMaster',
                   'Comcast Business',
                   'Nozzle.io',
-                ],
+                ]
               )
               .map((d, i) => (
                 <span key={i} className="opacity-70 even:opacity-40">