diff --git a/docs/.vitepress/theme/components/ComponentIndex.vue b/docs/.vitepress/theme/components/ComponentIndex.vue index 5831a96a..835cf6c3 100644 --- a/docs/.vitepress/theme/components/ComponentIndex.vue +++ b/docs/.vitepress/theme/components/ComponentIndex.vue @@ -46,7 +46,9 @@ const groups = computed(() => const columns: DataTableColumn[] = [ { 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' }, ] @@ -55,13 +57,21 @@ const columns: DataTableColumn[] = [

{{ group.name }}

- + + diff --git a/docs/.vitepress/theme/components/site/FolderTree.vue b/docs/.vitepress/theme/components/site/FolderTree.vue index 2539f9d9..cb8a55f7 100644 --- a/docs/.vitepress/theme/components/site/FolderTree.vue +++ b/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()) +/** 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( diff --git a/docs/.vitepress/theme/components/site/useSiteTheme.ts b/docs/.vitepress/theme/components/site/useSiteTheme.ts index 7d086d83..fcc1968f 100644 --- a/docs/.vitepress/theme/components/site/useSiteTheme.ts +++ b/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('modern')