Site: folders open, component tables fit, everyone starts in modern

docs/.vitepress/theme/components/ComponentIndex.vue

@@ -46,7 +46,9 @@ const groups = computed(() =>
 
 const columns: DataTableColumn<Row>[] = [
   { key: 'name', header: 'Name', width: '10rem' },
-  { key: 'description', header: 'Description' },
+  // Cut to the window's width rather than scrolled sideways: the full
+  // paragraph is the page itself, and the title shows it on hover.
+  { key: 'description', header: 'Description', cellClass: 'overflow-hidden text-ellipsis' },
 ]
 </script>
 
@@ -55,13 +57,21 @@ const columns: DataTableColumn<Row>[] = [
     <h2 :id="group.name.toLowerCase()" class="m-0 text-doc-h2 font-bold">
       {{ group.name }}
     </h2>
-    <DataTable :rows="group.rows" :columns="columns" :caption="`${group.name} components`">
+    <DataTable
+      :rows="group.rows"
+      :columns="columns"
+      :caption="`${group.name} components`"
+      class="[&_table]:w-full [&_table]:table-fixed"
+    >
       <template #[`cell:name`]="{ row }">
         <a :href="row.href" class="flex items-center gap-1 text-link underline">
           <DocumentIcon class="shrink-0" />
           {{ row.name }}
         </a>
       </template>
+      <template #[`cell:description`]="{ row }">
+        <span :title="row.description">{{ row.description }}</span>
+      </template>
     </DataTable>
   </section>
 </template>

docs/.vitepress/theme/components/site/FolderTree.vue

@@ -5,8 +5,9 @@ import { DocumentIcon, FolderIcon, FolderOpenIcon, TriangleRightIcon } from 'row
 import type { NavNode } from './useSiteNav'
 
 /**
- * The Explorer window's left pane: the docs as a folder tree. Folders on the
- * way to the current page open by themselves; the rest open on demand.
+ * The Explorer window's left pane: the docs as a folder tree. Every folder
+ * starts open, so the whole site is in view; the reader can close any of
+ * them, and the folders on the way to the current page open again with it.
  *
  * A WAI-ARIA tree with one tab stop: ↑ ↓ move, → opens a folder or steps into
  * it, ← closes it or steps out, Enter opens the page, Home and End jump.
@@ -19,6 +20,22 @@ const props = defineProps<{
 const router = useRouter()
 const open = ref(new Set<string>())
 
+/** Every folder in the tree, at any depth. */
+const folderIds = (nodes: NavNode[]): string[] =>
+  nodes.flatMap((node) => (node.children.length > 0 ? [node.id, ...folderIds(node.children)] : []))
+
+// All open to begin with; once, so a folder the reader closed stays closed.
+let seeded = false
+watch(
+  () => props.tree,
+  (tree) => {
+    if (seeded || tree.length === 0) return
+    seeded = true
+    open.value = new Set([...open.value, ...folderIds(tree)])
+  },
+  { immediate: true }
+)
+
 // Every folder on the path to the page opens when the page changes, without
 // closing folders the reader opened themselves.
 watch(

docs/.vitepress/theme/components/site/useSiteTheme.ts

@@ -14,7 +14,9 @@ import { ref } from 'vue'
 export type SiteTheme = 'win98' | 'modern'
 export type SiteScheme = 'system' | 'light' | 'dark'
 
-export const THEME_KEY = 'rowkit-theme'
+// `-2` since the site opens in modern: a choice stored while Windows 98 was
+// the default is not kept, so every visitor starts in modern once.
+export const THEME_KEY = 'rowkit-theme-2'
 export const SCHEME_KEY = 'rowkit-scheme'
 
 export const siteTheme = ref<SiteTheme>('modern')