feat: body content for all 106 features, rich tooltips, full-width tables

- Add body descriptions to every feature in features.json (1-3 paragraphs
  each covering escape sequence syntax, usage, and cross-terminal differences)
- Feature detail pages render body content with tags as links
- Rich tooltips on feature names show spec URL and tags
- Terminal header tooltips show version on category/tag pages
- Feature tables use full page width with fixed column proportions
  (Backend 20%, Version 10%, Support 10%, Notes 60%)

Author: beorn

docs/.vitepress/config.ts

@@ -109,7 +109,19 @@ function buildSidebar() {
     device: "Device Status",
   }
 
-  const categoryOrder = ["sgr", "cursor", "text", "erase", "editing", "modes", "scrollback", "reset", "extensions", "charsets", "device"]
+  const categoryOrder = [
+    "sgr",
+    "cursor",
+    "text",
+    "erase",
+    "editing",
+    "modes",
+    "scrollback",
+    "reset",
+    "extensions",
+    "charsets",
+    "device",
+  ]
 
   // Determine categories and features from features.json
   const categories = new Map<string, Array<{ id: string; name: string; slug: string }>>()

docs/[category]/[id].md

@@ -10,6 +10,7 @@ const { params } = useData()
 const p = params.value
 
 const backendResults = JSON.parse(p.backendResults)
+const featureTags = JSON.parse(p.featureTags || '[]')
 
 function icon(result) {
   if (result === 'yes') return '✓'
@@ -32,9 +33,12 @@ function cls(result) {
 
 <p class="feature-meta">
   Category: <a :href="'/' + p.featureCategory">{{ p.featureCategory }}</a>
+  <span v-if="featureTags.length"> · Tags: <template v-for="(tag, i) in featureTags" :key="tag.id"><a :href="'/' + tag.id">{{ tag.label }}</a><template v-if="i < featureTags.length - 1">, </template></template></span>
   <span v-if="p.specUrl"> · <a :href="p.specUrl" target="_blank" rel="noopener">Specification ↗</a></span>
 </p>
 
+<div v-if="p.featureBody" class="feature-body" v-html="p.featureBody"></div>
+
 <p class="feature-score">
   Supported by <strong>{{ p.yesCount }}</strong> of <strong>{{ p.totalCount }}</strong> backends ({{ Math.round(p.yesCount / p.totalCount * 100) }}%)
 </p>
@@ -71,7 +75,7 @@ function cls(result) {
 
 <style>
 .feature-page {
-  max-width: 800px;
+  max-width: 100%;
 }
 
 .feature-meta {
@@ -84,18 +88,45 @@ function cls(result) {
   color: var(--vp-c-brand-1);
 }
 
+.feature-body {
+  color: var(--vp-c-text-2);
+  font-size: 0.95em;
+  line-height: 1.7;
+  margin: 1em 0 1.5em;
+}
+
+.feature-body code {
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.9em;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+}
+
 .feature-score {
   font-size: 1.1em;
   margin: 1em 0;
 }
 
 .support-table {
   width: 100%;
+  table-layout: fixed;
   border-collapse: collapse;
   font-size: 0.9em;
   margin: 1em 0;
 }
 
+/* Column proportions: Backend 20%, Version 10%, Support 10%, Notes 60% */
+.support-table th:nth-child(1),
+.support-table td:nth-child(1) { width: 20%; }
+.support-table th:nth-child(2),
+.support-table td:nth-child(2) { width: 10%; }
+.support-table th:nth-child(3),
+.support-table td:nth-child(3) { width: 10%; }
+.support-table th:nth-child(4),
+.support-table td:nth-child(4) { width: 60%; }
+
 .support-table th,
 .support-table td {
   padding: 8px 12px;
@@ -131,6 +162,8 @@ function cls(result) {
 .note-cell {
   color: var(--vp-c-text-2);
   font-size: 0.95em;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .cell-yes { color: #10b981; }

docs/[category]/[id].paths.ts

@@ -1,12 +1,14 @@
-import { loadCensus, featureSlug, terminalSlug } from "../data/load-census"
+import { loadCensus, featureSlug, terminalSlug, loadFeaturesMeta, tagLabel as getTagLabel } from "../data/load-census"
 
 export default {
   paths() {
     const data = loadCensus()
+    const featuresMeta = loadFeaturesMeta()
 
     return data.features.map((f) => {
       const slug = featureSlug(f.id)
       const desc = data.featureDescriptions[f.id]
+      const meta = featuresMeta[f.id]
 
       // Build per-backend results for this feature
       const backendResults: Array<{
@@ -44,6 +46,12 @@ export default {
       const yesCount = backendResults.filter((r) => r.result === "yes").length
       const totalCount = backendResults.length
 
+      // Build tags with labels for display
+      const tags = (meta?.tags ?? []).map((t: string) => ({
+        id: t,
+        label: getTagLabel(t),
+      }))
+
       return {
         params: {
           category: f.category,
@@ -52,6 +60,8 @@ export default {
           featureName: desc?.name ?? f.name,
           featureCategory: f.category,
           specUrl: desc?.url ?? f.spec ?? "",
+          featureBody: meta?.body ?? "",
+          featureTags: JSON.stringify(tags),
           backendResults: JSON.stringify(backendResults),
           yesCount: String(yesCount),
           totalCount: String(totalCount),

docs/data/census.data.ts

@@ -63,6 +63,7 @@ interface FeatureMeta {
   url?: string
   tags?: string[]
   group?: string
+  body?: string
 }
 
 function loadFeatureDescriptions(): Record<string, FeatureMeta> {
@@ -79,7 +80,7 @@ function loadFeatureDescriptions(): Record<string, FeatureMeta> {
       if (typeof val === "string") result[id] = { name: val }
       else {
         const v = val as any
-        result[id] = { name: v.name, slug: v.slug, url: v.url, tags: v.tags, group: v.group }
+        result[id] = { name: v.name, slug: v.slug, url: v.url, tags: v.tags, group: v.group, body: v.body }
       }
     }
     return result

docs/data/load-census.ts

@@ -27,6 +27,7 @@ export interface FeatureMeta {
   url?: string
   tags?: string[]
   group?: string
+  body?: string
 }
 
 let _featuresMeta: Record<string, FeatureMeta> | null = null

docs/data/results/alacritty-0.26.0.json

@@ -127,4 +127,4 @@
     "sgr.underline.color": "got null not, expected null",
     "sgr.fg.standard": "got null not, expected null"
   }
-}
+}

docs/data/results/ghostty-native-1.3.1.json

@@ -123,4 +123,4 @@
     "sgr.hidden": "not supported",
     "sgr.underline.color": "got null not, expected null"
   }
-}
+}

docs/data/results/kitty-0.40.0.json

@@ -126,4 +126,4 @@
     "sgr.hidden": "not supported",
     "sgr.underline.color": "got null not, expected null"
   }
-}
+}

docs/data/results/vt100-0.1.0.json

@@ -130,4 +130,4 @@
     "sgr.hidden": "not supported",
     "sgr.underline.color": "got false, expected truthy"
   }
-}
+}

docs/data/results/wezterm-0.1.0-fork.5.json

@@ -128,4 +128,4 @@
     "sgr.fg.bright": "got 9, expected greater than 150",
     "sgr.bg.bright": "got 0, expected greater than 150"
   }
-}
+}