redirect to 1st nav item

src/app/[[...slug]]/layout.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react'
 
 import { DocsContext } from './DocsContext'
-import { getData } from '@/utils/docs'
+import { getData, getDocs } from '@/utils/docs'
 import { MenuContext } from './MenuContext'
 import { Menu } from './Menu'
-import Nav from '@/components/Nav'
+import Nav, { buildNav, getFirstNavItem } from '@/components/Nav'
 import Link from 'next/link'
 import Search from '@/components/Search'
 import ToggleTheme from '@/components/ToggleTheme'
 import Toc from '@/components/Toc'
+import { redirect } from 'next/navigation'
 
 export type Props = {
  params: { slug: string[] }
@@ -17,6 +18,22 @@ export type Props = {
 
 export default async function Layout({ params, children }: Props) {
  const slug = params.slug
+
+ if (!slug) {
+ // redirection if no slug
+ const MDX = process.env.MDX
+ if (!MDX) throw new Error('MDX env var not set')
+
+ const docs = await getDocs(MDX, null)
+ const nav = buildNav(docs)
+ const first = getFirstNavItem(nav) // 1st item in the nav
+ const redirectUrl = first?.url
+
+ if (redirectUrl) {
+ return redirect(redirectUrl)
+ }
+ }
+
  const { docs, doc } = await getData(...slug)
 
  const asPath = slug.join('/')

src/app/[[...slug]]/page.tsx

@@ -59,6 +59,7 @@ export async function generateStaticParams() {
 
  const docs = await getDocs(MDX, null, true)
  const paths = docs.map(({ slug }) => ({ slug }))
+ paths.unshift({ slug: [] })
  // console.log('paths', paths)
  return paths
 }

src/components/Nav.tsx

@@ -26,23 +26,25 @@ function NavItem({ doc, asPath }: NavItemProps) {
 
 type NavList = Record<string, Doc | Record<string, Doc>>
 
-function Nav({ docs, asPath }: { docs: Doc[]; asPath: string }) {
- const nav = React.useMemo(
- () =>
- docs.reduce((acc, doc) => {
- const [...rest] = doc.slug
- const [page, category] = rest.reverse()
+export function buildNav(docs: Doc[]) {
+ function group(acc: NavList = {}, doc: Doc) {
+ const [...rest] = doc.slug
+ const [page, category] = rest.reverse()
 
-  if (category && !acc[category]) acc[category] = {}
+ if (category && !acc[category]) acc[category] = {}
 
-  // @ts-ignore
-  if (category) acc[category][page] = doc
-  else acc[page] = doc
+ // @ts-ignore
+ if (category) acc[category][page] = doc
+ else acc[page] = doc
 
- return acc
- }, {} as NavList),
- [docs]
- )
+ return acc
+ }
+
+ return docs.reduce(group, {})
+}
+
+function Nav({ docs, asPath }: { docs: Doc[]; asPath: string }) {
+ const nav = React.useMemo(() => buildNav(docs), [docs])
 
  return (
  <ul>
@@ -65,3 +67,21 @@ function Nav({ docs, asPath }: { docs: Doc[]; asPath: string }) {
 }
 
 export default Nav
+
+export function getFirstNavItem(nav: NavList): Doc | null {
+ let firstItem: Doc | null = null
+ let lowestNav = Infinity
+
+ Object.values(nav).forEach((group) => {
+ if (typeof group === 'object' && !('nav' in group)) {
+ Object.values(group).forEach((item) => {
+ if ('nav' in item && item.nav < lowestNav) {
+ lowestNav = item.nav
+ firstItem = item
+ }
+ })
+ }
+ })
+
+ return firstItem
+}

tailwind.config.ts

@@ -2,11 +2,7 @@ import type { Config } from 'tailwindcss'
 
 const config: Config = {
  darkMode: 'class',
- content: [
- './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
- './src/components/**/*.{js,ts,jsx,tsx,mdx}',
- './src/app/**/*.{js,ts,jsx,tsx,mdx}',
- ],
+ content: ['./src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}'],
  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio')],
 }
 export default config