create TOC page instead of nested navigation

e2b-dev · Sep 27, 2024 · a88a2ca · a88a2ca
1 parent e75d090
commit a88a2ca
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 105 deletions.
diff --git a/apps/web/prebuild.js b/apps/web/prebuild.js
@@ -1,20 +1,39 @@
 const fs = require('fs')
 const path = require('path')
 
-function walkDir(dir, basePath = '') {
+function walkDir(dirName, dir, basePath = '', depth = 1) {
   const entries = fs.readdirSync(dir, { withFileTypes: true })
 
   return entries
     .map((entry) => {
       const relativePath = path.join(basePath, entry.name)
 
       if (entry.isDirectory()) {
-        let route = { title: entry.name }
-        const links = walkDir(path.join(dir, entry.name), relativePath)
+        let route = {
+          title: depth === 1 ? entry.name.toLocaleUpperCase() : entry.name,
+        }
+        const entryName = entry.name
+        const childPath = path.join(dir, entry.name)
+        const links = walkDir(entryName, childPath, relativePath, depth + 1)
         if (links.length > 0) {
-          route.links = links
-        } else {
-          route.href = '/' + relativePath
+          if (depth === 1) {
+            route.href = '.' + relativePath
+            route.links = links
+          } else if (depth === 2) {
+            route.href = '/docs/api-reference/' + relativePath
+            const mdxFilePath = path.join(childPath, 'page.mdx')
+            console.log(`Generating ${mdxFilePath}`)
+            const mdxContent = `# ${dirName} ${entryName}\n\n${links
+              .map(
+                (link) =>
+                  `- [${
+                    link.title.charAt(0).toUpperCase() +
+                    link.title.slice(1).toLowerCase()
+                  }](./${entryName}/${link.title})`
+              )
+              .join('\n')}`
+            fs.writeFileSync(mdxFilePath, mdxContent)
+          }
         }
         return route
       }
@@ -29,7 +48,7 @@ function generateApiRefRoutes() {
     return []
   }
 
-  return walkDir(apiRefPath)
+  return walkDir('api-reference', apiRefPath)
 }
 
 const apiRefRoutes = generateApiRefRoutes()

diff --git a/apps/web/src/components/Footer.tsx b/apps/web/src/components/Footer.tsx
@@ -5,15 +5,15 @@ import { usePathname } from 'next/navigation'
 
 import { Button } from '@/components/Button'
 import { routes } from '@/components/Navigation/routes'
-import { DiscordIcon } from '@/components/icons/DiscordIcon'
-import { GitHubIcon } from '@/components/icons/GitHubIcon'
 import { TwitterIcon } from '@/components/icons/TwitterIcon'
+import { GitHubIcon } from '@/components/icons/GitHubIcon'
+import { DiscordIcon } from '@/components/icons/DiscordIcon'
 
 function PageLink({
-  label,
-  page,
-  previous = false,
-}: {
+                    label,
+                    page,
+                    previous = false,
+                  }: {
   label: string
   page: { href: string; title: string }
   previous?: boolean
@@ -43,27 +43,10 @@ function PageLink({
 function PageNavigation() {
   let initialPathname = usePathname()
   // Running on the server, there's bug with usePathname() and basePath https://github.com/vercel/next.js/issues/52700
-  if (typeof window === 'undefined' && initialPathname === '/')
-    initialPathname = '/docs'
+  if (typeof window === 'undefined' && initialPathname === '/') initialPathname = '/docs'
 
-  const allPages = routes.flatMap((group) => {
-    if ('links' in group) {
-      return group.links.flatMap((link) => {
-        if ('links' in link) {
-          return {
-            title: link.title,
-            href: link.href,
-            icon: link.icon,
-          }
-        }
-        return link
-      })
-    }
-    return [group]
-  })
-  const currentPageIndex = allPages.findIndex(
-    (page) => page.href === initialPathname
-  )
+  const allPages = routes.flatMap(group => group.links)
+  const currentPageIndex = allPages.findIndex(page => page.href === initialPathname)
 
   if (currentPageIndex === -1) return null
 
@@ -76,31 +59,41 @@ function PageNavigation() {
     <div className="flex">
       {previousPage && (
         <div className="flex flex-col items-start gap-3">
-          <PageLink label="Previous" page={previousPage} previous />
+          <PageLink
+            label="Previous"
+            page={previousPage}
+            previous
+          />
         </div>
       )}
       {nextPage && (
         <div className="ml-auto flex flex-col items-end gap-3">
-          <PageLink label="Next" page={nextPage} />
+          <PageLink
+            label="Next"
+            page={nextPage}
+          />
         </div>
       )}
     </div>
   )
 }
 
 function SocialLink({
-  href,
-  icon: Icon,
-  children,
-}: {
+                      href,
+                      icon: Icon,
+                      children,
+                    }: {
   href: string
   icon: React.ComponentType<{ className?: string }>
   children: React.ReactNode
 }) {
   return (
-    <Link href={href} className="group">
+    <Link
+      href={href}
+      className="group"
+    >
       <span className="sr-only">{children}</span>
-      <Icon className="h-5 w-5 fill-zinc-700 transition group-hover:fill-zinc-900 dark:group-hover:fill-zinc-500" />
+      <Icon className="h-5 w-5 fill-zinc-700 transition group-hover:fill-zinc-900 dark:group-hover:fill-zinc-500"/>
     </Link>
   )
 }
@@ -110,21 +103,29 @@ function SmallPrint() {
     <div className="flex flex-col w-full items-center px-10 justify-between gap-5 pt-8 dark:border-white/5 sm:flex-row">
       <div className="flex flex-col items-center justify-start lg:items-start">
         <p className="text-xs text-zinc-600 dark:text-zinc-400">
-          &copy; FoundryLabs, Inc. {new Date().getFullYear()}. All rights
-          reserved.
+          &copy; FoundryLabs, Inc. {new Date().getFullYear()}. All rights reserved.
         </p>
         <p className="text-xs text-zinc-600 dark:text-zinc-400">
           548 Market Street #83122, San Francisco, CA 94104
         </p>
       </div>
       <div className="flex gap-4">
-        <SocialLink href="https://twitter.com/e2b_dev" icon={TwitterIcon}>
+        <SocialLink
+          href="https://twitter.com/e2b_dev"
+          icon={TwitterIcon}
+        >
           Follow us on Twitter
         </SocialLink>
-        <SocialLink href="https://github.com/e2b-dev" icon={GitHubIcon}>
+        <SocialLink
+          href="https://github.com/e2b-dev"
+          icon={GitHubIcon}
+        >
           Follow us on GitHub
         </SocialLink>
-        <SocialLink href="https://discord.gg/U7KEcGErtQ" icon={DiscordIcon}>
+        <SocialLink
+          href="https://discord.gg/U7KEcGErtQ"
+          icon={DiscordIcon}
+        >
           Join our Discord server
         </SocialLink>
       </div>
@@ -135,8 +136,8 @@ function SmallPrint() {
 export function Footer() {
   return (
     <footer className="mx-auto w-full max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
-      <PageNavigation />
-      <SmallPrint />
+      <PageNavigation/>
+      <SmallPrint/>
     </footer>
   )
 }
@@ -145,8 +146,8 @@ export function FooterMain() {
   return (
     <footer className="flex w-full space-y-10 pb-16">
       <div className="flex flex-col w-full items-center justify-center border-t border-zinc-900/5 dark:border-white/5">
-        <SmallPrint />
+        <SmallPrint/>
       </div>
     </footer>
   )
-}
+}