Styling and astro refactor of sidenotes

src/lib/constants/blocks/table.ts

@@ -4,13 +4,34 @@ export const TABLE_VARIANTS = [
     value: 'default',
   },
   {
-    label: 'Random',
-    value: 'random',
+    label: 'Matrix',
+    value: 'matrix',
   },
-  {
-    label: 'Icon',
-    value: 'icon',
-  },
-]
+] as const
 
 export type TableVariant = (typeof TABLE_VARIANTS)[number]['value']
+
+export const COLUMN_TYPES = [
+  {
+    label: 'Default',
+    value: 'default',
+  },
+  {
+    label: 'Number',
+    value: 'num',
+  },
+  {
+    label: 'Key',
+    value: 'key',
+  },
+  {
+    label: 'Sentence',
+    value: 'text',
+  },
+  {
+    label: 'Row header',
+    value: 'rowheader',
+  },
+] as const
+
+export type ColumnType = (typeof COLUMN_TYPES)[number]['value']

src/lib/markdoc/index.ts

@@ -20,7 +20,7 @@ export async function render(
     headings: [],
     ids: new Set(),
     footnotes: [],
-    sidenotes: [],
+    sidenoteCount: 0,
     markers: new Set(),
     problems: [],
   }
@@ -41,7 +41,6 @@ export async function render(
     tree,
     headings: state.headings,
     footnotes: state.footnotes,
-    sidenotes: state.sidenotes,
     diagnostics: problems.list,
   }
 }

src/lib/markdoc/tags.ts

@@ -95,9 +95,8 @@ export function createTags(state: NodeState, resolveLink: ResolveLink): Record<s
             message: `Two sidenotes use the marker "${marker}".`,
           })
         state.markers.add(marker)
-        const n = state.sidenotes.length + 1
+        const n = (state.sidenoteCount += 1)
         const children = inlineOf(text(node.attributes.note))
-        state.sidenotes.push({ n, marker, type: noteType, children })
         return [
           new Tag('a', { class: 'sidenote-ref', id: `snref-${n}`, href: `#sn-${n}` }, [marker]),
           new Tag(
@@ -136,15 +135,33 @@ export function createTags(state: NodeState, resolveLink: ResolveLink): Record<s
     },
     tableWrapper: {
       ...generated.tableWrapper,
+      /* Keystatic makes an array attribute required; a table without column
+         types is the normal case. */
+      attributes: {
+        ...generated.tableWrapper?.attributes,
+        columns: { ...generated.tableWrapper?.attributes?.columns, required: false },
+      },
+      transform(node, config) {
+        const { columns, ...attributes } = node.transformAttributes(config) as {
+          columns?: string[]
+        }
+        const children = node.transformChildren(config)
+        if (columns?.length) applyColumns(children, columns, state)
+        return new Tag('TableWrapper', attributes, children)
+      },
+      /* The children of a Keystatic wrapper are free-form block content, so
+         "exactly one table" can only be a build-time check. */
       validate(node) {
-        const tables = node.children.filter((child) => child.tag === 'table').length
+        const tables = node.children.filter(
+          (child) => child.type === 'table' || child.tag === 'table',
+        ).length
         return tables === 1
           ? []
           : [
               {
                 id: 'table-wrapper-children',
-                level: 'warning' as const,
-                message: `A table wrapper should hold exactly one table, this one holds ${tables}.`,
+                level: 'error' as const,
+                message: `A table wrapper holds exactly one table, this one holds ${tables}.`,
               },
             ]
       },

src/lib/markdoc/types.ts

@@ -13,13 +13,6 @@ export type Footnote = {
   children: RenderableTreeNode[]
 }
 
-export type Sidenote = {
-  n: number
-  marker: string
-  type: string
-  children: RenderableTreeNode[]
-}
-
 export type Problem = {
   level: Level
   message: string
@@ -29,7 +22,7 @@ export type NodeState = {
   headings: Heading[]
   ids: Set<string>
   footnotes: Footnote[]
-  sidenotes: Sidenote[]
+  sidenoteCount: number
   markers: Set<string>
   problems: Problem[]
 }
@@ -42,7 +35,6 @@ export type Rendered = {
   tree: RenderableTreeNode
   headings: Heading[]
   footnotes: Footnote[]
-  sidenotes: Sidenote[]
   diagnostics: Diagnostic[]
 }