feat: toc config for specific content from frontmatter

Author: byronogis

packages/astro-friday/src/collection.ts

@@ -15,6 +15,21 @@ export function getSchema(config: ResolvedConfig) {
     keywords: z.union([z.string(), z.array(z.string())]).optional().default([]).transform(val => Array.isArray(val) ? val : [val]),
     draft: z.boolean().default(false),
     lang: z.string().optional().default('en'),
+    /**
+     * Table of contents (TOC) generation for posts
+     */
+    toc: z.object({
+      /**
+       * Enable or disable the table of contents (TOC) generation for posts.
+       */
+      enable: z.boolean().optional(),
+      /**
+       * The heading levels to include in the TOC.
+       *
+       * @example [2, 4] will include headings from h2 to h4.
+       */
+      range: z.tuple([z.number().min(1).max(6), z.number().min(1).max(6)]).optional(),
+    }).optional(),
   })
 }
 

packages/astro-friday/src/components/ArticleTOC.astro

@@ -1,13 +1,16 @@
 ---
 import type { MarkdownHeading } from 'astro'
+import type { Schema } from '../collection'
 import ArticleTOCPlain from './ArticleTOCPlain.astro'
 
 interface Props {
   headings: MarkdownHeading[]
+  toc: Required<Omit<NonNullable<Schema['toc']>, 'enable'>>
 }
 
 const {
   headings,
+  toc,
 } = Astro.props
 
 ---
@@ -41,6 +44,7 @@ const {
 
   <ArticleTOCPlain
     {headings}
+    {toc}
     class:list={[
       'lg:(op-0 [:root:has(.displaying-table-of-contents:hover)_&]:(op-100) transition duration-700)',
       'lg:(of-y-auto overscroll-contain max-h-70vh scrollbar-none)',

packages/astro-friday/src/components/ArticleTOCPlain.astro

@@ -1,9 +1,10 @@
 ---
 import type { MarkdownHeading } from 'astro'
-import config from 'virtual:astro-friday-config'
+import type { Schema } from '../collection'
 
 interface Props {
   headings: MarkdownHeading[]
+  toc: Required<Omit<NonNullable<Schema['toc']>, 'enable'>>
   isResolved?: boolean
   class?: string
 }
@@ -14,11 +15,12 @@ interface MarkdownHeadingNested extends MarkdownHeading {
 
 const {
   headings,
+  toc,
   isResolved,
   class: className,
 } = Astro.props
 
-const includeHeadings = headings.filter(i => i.depth >= config.post.toc.range[0] && i.depth <= config.post.toc.range[1])
+const includeHeadings = headings.filter(i => i.depth >= toc.range[0] && i.depth <= toc.range[1])
 
 const resolvedHeadings = isResolved
   ? (includeHeadings as MarkdownHeadingNested[])
@@ -69,6 +71,7 @@ function resolveHeadings(headings_: MarkdownHeading[]): MarkdownHeadingNested[]
       {heading.children && heading.children.length > 0 && (
         <Astro.self
           headings={heading.children}
+          {toc}
           isResolved={true}
         />
       )}

packages/astro-friday/src/config.ts

@@ -3,6 +3,7 @@ import type nprogress from 'astro-nprogress'
 import type { Props as SEO } from 'astro-seo'
 import type { glob } from 'astro/loaders'
 import type { SetRequiredDeep } from 'type-fest'
+import type { Schema } from './collection'
 import type { ArtConfig, NavItem, ProjectItem } from './types'
 import path from 'node:path'
 import { defu } from 'defu'
@@ -190,24 +191,14 @@ export interface Config {
      */
     pathStyle?: 'collection/id' | 'id'
     /**
-     * Table of contents (TOC) generation for posts
+     * Table of contents (TOC) generation for all content
+     *
+     * NOTE: this is just a default config for all content, can be overridden in
+     * specific content frontmatter
+     *
+     * @default { enable: true, range: [2, 4] }
      */
-    toc?: {
-      /**
-       * Enable or disable the table of contents (TOC) generation for posts.
-       *
-       * @default true
-       */
-      enable?: boolean
-      /**
-       * The heading levels to include in the TOC.
-       *
-       * @example [2, 4] will include headings from h2 to h4.
-       *
-       * @default [2, 4]
-       */
-      range?: [number, number]
-    }
+    toc?: Partial<Schema['toc']>
   }
   /**
    * Define content collections

packages/astro-friday/src/routes/post/[...slug].astro

@@ -30,6 +30,11 @@ const {
   headings,
   // @ts-expect-error never
 } = await render(entry)
+
+const toc = {
+  ...config.post.toc,
+  ...entry.data.toc,
+}
 ---
 
 <DefaultLayout
@@ -71,7 +76,7 @@ const {
   }}
 >
   <ArticleDetail {entry}>
-    { config.post.toc.enable && headings.length ? (<ArticleTOC {headings} />) : null }
+    { toc.enable && headings.length ? (<ArticleTOC {headings} {toc} />) : null }
 
     <Content />
   </ArticleDetail>

packages/astro-friday/src/routes/project/index.astro

@@ -25,7 +25,7 @@ const headings = Object.entries(categorizedProjects).map(([category, _projects])
 
 <DefaultLayout>
   <div class="mx-auto max-w-300">
-  <ArticleTOC {headings} />
+  <ArticleTOC {headings} toc={config.post.toc} />
 
   {
     Object.entries(categorizedProjects || {}).map(([category, projects], _cidx) => (