fix(Docs): add pretty rendering for tables

Author: jakeaturner

admin/app/services/docs_service.ts

@@ -115,6 +115,24 @@ export class DocsService {
             class: { type: String }
           }
         },
+        table: {
+          render: 'Table',
+        },
+        thead: {
+          render: 'TableHead',
+        },
+        tbody: {
+          render: 'TableBody',
+        },
+        tr: {
+          render: 'TableRow',
+        },
+        th: {
+          render: 'TableHeader',
+        },
+        td: {
+          render: 'TableCell',
+        },
       },
     }
   }

admin/docs/home.md

@@ -46,11 +46,11 @@ Or explore the **[Getting Started Guide](/docs/getting-started)** for a walkthro
 
 | I want to... | Go here |
 |--------------|---------|
-| Download more content | [Install Apps](/apps) |
-| Add Wikipedia/reference content | [ZIM Manager](/settings/zim-manager) |
-| Download map regions | [Maps Manager](/settings/maps-manager) |
-| Check for updates | [System Update](/settings/updates) |
-| View system status | [Settings](/settings) |
+| Download more content | [Install Apps →](/apps) |
+| Add Wikipedia/reference content | [ZIM Manager →](/settings/zim-manager) |
+| Download map regions | [Maps Manager →](/settings/maps-manager) |
+| Check for updates | [System Update →](/settings/updates) |
+| View system status | [Settings →](/settings) |
 
 ---
 

admin/inertia/components/MarkdocRenderer.tsx

@@ -3,6 +3,7 @@ import Markdoc from '@markdoc/markdoc'
 import { Heading } from './markdoc/Heading'
 import { List } from './markdoc/List'
 import { ListItem } from './markdoc/ListItem'
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from './markdoc/Table'
 
 // Custom components for Markdoc tags
 const Callout = ({
@@ -36,6 +37,12 @@ const components = {
   Heading,
   List,
   ListItem,
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeader,
+  TableCell,
 }
 
 interface MarkdocRendererProps {

admin/inertia/components/markdoc/Table.tsx

@@ -0,0 +1,37 @@
+export function Table({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="overflow-x-auto my-6">
+      <table className="min-w-full divide-y divide-gray-300 border border-gray-300">
+        {children}
+      </table>
+    </div>
+  )
+}
+
+export function TableHead({ children }: { children: React.ReactNode }) {
+  return <thead className="bg-gray-50">{children}</thead>
+}
+
+export function TableBody({ children }: { children: React.ReactNode }) {
+  return <tbody className="divide-y divide-gray-200 bg-white">{children}</tbody>
+}
+
+export function TableRow({ children }: { children: React.ReactNode }) {
+  return <tr>{children}</tr>
+}
+
+export function TableHeader({ children }: { children: React.ReactNode }) {
+  return (
+    <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900 border-r border-gray-300 last:border-r-0">
+      {children}
+    </th>
+  )
+}
+
+export function TableCell({ children }: { children: React.ReactNode }) {
+  return (
+    <td className="px-6 py-4 text-sm text-gray-700 border-r border-gray-200 last:border-r-0">
+      {children}
+    </td>
+  )
+}