Adding dynamic table

app/components/docs/Table.tsx

@@ -0,0 +1,45 @@
+import type { ComponentPropsWithoutRef } from 'react'
+
+export default function Table({
+	columns,
+	rows,
+	footnotes,
+	...props
+}: ComponentPropsWithoutRef<'table'> & {
+	columns: string[]
+	rows: string[][]
+	footnotes: string[]
+}) {
+	return (
+		<>
+			<table {...props}>
+				<thead>
+					<tr>
+						{columns.map((column, i) => (
+							<th key={i}>{column}</th>
+						))}
+					</tr>
+				</thead>
+				<tbody>
+					{rows.map((row, i) => (
+						<tr key={i}>
+							{row.map((cell, j) => (
+								<td key={j}>{cell}</td>
+							))}
+						</tr>
+					))}
+				</tbody>
+			</table>
+			{footnotes.length > 0 && (
+				<ol className="mt-2 list-none !pl-0 text-sm">
+					{footnotes.map((footnote, i) => (
+						<li key={i} className="flex gap-1">
+							<sup>{i + 1}</sup>
+							<span className="italic">{footnote}</span>
+						</li>
+					))}
+				</ol>
+			)}
+		</>
+	)
+}

app/components/layout/Content.tsx

@@ -30,6 +30,7 @@ import {
 import Ref from '~/components/docs/Ref.tsx'
 import { RoleVar } from '~/components/docs/RoleVar.tsx'
 import { ChildHeading, TableLink } from '~/components/docs/Spec.tsx'
+import Table from '~/components/docs/Table.tsx'
 import Tag from '~/components/docs/Tag.tsx'
 import ErrorPage from '~/components/layout/ErrorPage.tsx'
 import TableOfContents from '~/components/layout/TableOfContents.tsx'
@@ -42,7 +43,7 @@ import { CACHE_CONTROL } from '~/utils/http.server.ts'
 import { removeEndSlashes } from '~/utils/removeEndSlashes.ts'
 
 export async function publicLoader({ params }: LoaderFunctionArgs) {
-	let { product, ref, '*': splat } = params
+	const { product, ref, '*': splat } = params
 	invariant(product, 'expected `params.product`')
 	invariant(ref, 'expected `params.ref`')
 
@@ -83,7 +84,7 @@ export async function publicLoader({ params }: LoaderFunctionArgs) {
 }
 
 export async function privateLoader({ params }: LoaderFunctionArgs) {
-	let { product, ref, '*': splat } = params
+	const { product, ref, '*': splat } = params
 	invariant(product, 'expected `params.product`')
 	invariant(ref, 'expected `params.ref`')
 
@@ -125,8 +126,9 @@ export async function privateLoader({ params }: LoaderFunctionArgs) {
 }
 
 export const headers: HeadersFunction = ({ loaderHeaders }) => {
+	const cacheControl = loaderHeaders.get('Cache-Control') ?? CACHE_CONTROL.doc
 	return {
-		'Cache-Control': loaderHeaders.get('Cache-Control')!,
+		'Cache-Control': cacheControl,
 		'Vary': 'Cookie',
 	}
 }
@@ -223,6 +225,7 @@ export function Content({
 								TableLink,
 								Image,
 								CopyButton,
+								Table,
 								Tag,
 								Ref,
 								MediaRow,
@@ -279,7 +282,6 @@ export function Content({
 
 export function ErrorBoundary() {
 	const error = useRouteError()
-	console.log(error)
 	let status = 500
 	let message = 'Unknown error'
 

app/lib/docs/mdx/index.server.ts

@@ -1,4 +1,5 @@
 import { bundleMDX } from 'mdx-bundler'
+import path from 'path'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeSlug from 'rehype-slug'
 import remarkGfm from 'remark-gfm'
@@ -15,9 +16,10 @@ import rehypeWrapTable from './tables.server.ts'
 
 export async function parseMdx(mdx: string) {
 	// Pull all h2 & h3 headings
-	let headings: Heading[] = []
+	const headings: Heading[] = []
 	const { frontmatter, code } = await bundleMDX({
 		source: mdx,
+		cwd: path.join(process.cwd(), 'documentation'),
 		mdxOptions(options) {
 			options.remarkPlugins = [
 				...(options.remarkPlugins ?? []),