add missing page header styling

Author: noxify

content/docs/test-collection/components/stepper.mdx

@@ -3,6 +3,7 @@ title: Stepper
 ---
 
 import { Preview } from "@/components/preview"
+import { APIReference } from "renoun/components"
 
 ## Source
 
@@ -37,3 +38,7 @@ The component uses
 
   </Stepper>
 </Preview>
+
+## API Reference
+
+<APIReference source="./src/components/ui/stepper.tsx" />

content/docs/test-collection/components/table.mdx

@@ -3,6 +3,7 @@ title: Table
 ---
 
 import { Preview } from "@/components/preview"
+import { APIReference } from "renoun/components"
 
 ## Source
 
@@ -172,3 +173,9 @@ The component uses
     ]}
   />
 </Preview>
+
+## API Reference
+
+<APIReference source="./src/components/table-builder.tsx" />
+
+<APIReference source="./src/components/data-table-builder.tsx" />

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

@@ -158,7 +158,12 @@ async function DirectoryContent({ source }: { source: EntryType }) {
                   "w-full max-w-full",
                 )}
               >
-                <h1>{source.getTitle()}</h1>
+                <h1
+                  className="no-prose mb-2 scroll-m-20 text-4xl font-light tracking-tight lg:text-5xl"
+                  data-pagefind-meta="title"
+                >
+                  {source.getTitle()}
+                </h1>
               </div>
 
               <SectionGrid sections={sections} />

src/collections.ts

@@ -29,6 +29,8 @@ export const docSchema = {
   headings: headingSchema,
 }
 
+export const allowedExtensions = ["mdx", "tsx", "ts"]
+
 export const AriaDocsCollection = new Directory({
   path: "content/docs/aria-docs",
   // base path is required, otherwise we can't build the correct slugs in the `generateStaticParams`
@@ -38,6 +40,8 @@ export const AriaDocsCollection = new Directory({
       docSchema,
       (path) => import(`@content/docs/aria-docs/${path}.mdx`),
     ),
+    tsx: withSchema((path) => import(`@content/docs/aria-docs/${path}.tsx`)),
+    ts: withSchema((path) => import(`@content/docs/aria-docs/${path}.ts`)),
   },
 })
 
@@ -50,6 +54,8 @@ export const RenounDocsCollection = new Directory({
       docSchema,
       (path) => import(`@content/docs/renoun-docs/${path}.mdx`),
     ),
+    tsx: withSchema((path) => import(`@content/docs/renoun-docs/${path}.tsx`)),
+    ts: withSchema((path) => import(`@content/docs/renoun-docs/${path}.ts`)),
   },
 })
 
@@ -62,6 +68,12 @@ export const TestCollection = new Directory({
       docSchema,
       (path) => import(`@content/docs/test-collection/${path}.mdx`),
     ),
+    tsx: withSchema(
+      (path) => import(`@content/docs/test-collection/${path}.tsx`),
+    ),
+    ts: withSchema(
+      (path) => import(`@content/docs/test-collection/${path}.ts`),
+    ),
   },
 })
 
@@ -76,12 +88,10 @@ export type DirectoryType = Awaited<
 
 export async function getDirectoryContent(source: EntryType) {
   // first, try to get the file based on the given path
-  try {
-    return await CollectionInfo.getDirectory(source.getPathSegments())
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  } catch (e: unknown) {
-    return null
-  }
+
+  return await CollectionInfo.getDirectory(source.getPathSegments()).catch(
+    () => null,
+  )
 }
 
 /**
@@ -94,20 +104,15 @@ export async function getDirectoryContent(source: EntryType) {
  */
 export async function getFileContent(source: EntryType) {
   // first, try to get the file based on the given path
-  try {
-    return await CollectionInfo.getFile(source.getPathSegments(), "mdx")
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  } catch (e: unknown) {
-    try {
+
+  return await CollectionInfo.getFile(source.getPathSegments(), "mdx").catch(
+    async () => {
       return await CollectionInfo.getFile(
         [...source.getPathSegments(), "index"],
         "mdx",
-      )
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    } catch (e: unknown) {
-      return null
-    }
-  }
+      ).catch(() => null)
+    },
+  )
 }
 
 /**

src/components/data-table-builder.tsx

@@ -22,12 +22,12 @@ import {
 import { DataTableColumnHeader } from "./data-table-column-header"
 import { DataTablePagination } from "./data-table-pagination"
 
-interface DataTableProps<TData> {
+export interface DataTableProps<TData> {
   columns: { id: string; title: string }[]
   data: TData[]
 }
 
-export default function DataTableBuilder<TData>({
+export function DataTableBuilder<TData>({
   columns,
   data,
 }: DataTableProps<TData>) {

src/components/table-builder.tsx

@@ -9,11 +9,16 @@ import {
   TableRow,
 } from "./ui/table"
 
-export default function TableBuilder({
+export interface TableBuilderColumnProps {
+  title: string
+  options?: React.ComponentProps<typeof TableHead>
+}
+
+export function TableBuilder({
   columns,
   data,
 }: {
-  columns: { title: string; options?: React.ComponentProps<typeof TableHead> }[]
+  columns: TableBuilderColumnProps[]
   data: {
     value: ReactNode
     options?: React.ComponentProps<typeof TableCell>

src/mdx-components.tsx

@@ -11,10 +11,10 @@ import {
 import { ExternalLinkIcon } from "lucide-react"
 import { CodeBlock, CodeInline } from "renoun/components"
 
-import DataTableBuilder from "./components/data-table-builder"
+import { DataTableBuilder } from "./components/data-table-builder"
 import MermaidWrapper from "./components/mermaid-wrapper"
 import RailroadWrapper from "./components/railroad-wrapper"
-import TableBuilder from "./components/table-builder"
+import { TableBuilder } from "./components/table-builder"
 import { Alert, AlertDescription, AlertTitle } from "./components/ui/alert"
 import { Stepper, StepperItem } from "./components/ui/stepper"
 import {