@terra-symposium/docs 0.1.73 → 0.1.75

package/site/src/lib/catalog.ts

@@ -1,151 +1,165 @@
 /// <reference types="vite/client" />
 
 import type { DocsNavNode } from '../../../src/components/navigation.js';
+import { getHue } from '@terra-symposium/styling';
 
 type SidebarFrontmatter = {
-	label?: string;
-	order?: number;
-	hidden?: boolean;
+  label?: string;
+  order?: number;
+  hidden?: boolean;
 };
 
 type DocsFrontmatter = {
-	title?: string;
-	description?: string;
-	hue?: number | null;
-	label?: string;
-	order?: number;
-	hidden?: boolean;
-	visibility?: 'visible' | 'hidden';
-	sidebar?: SidebarFrontmatter;
+  title?: string;
+  description?: string;
+  hue?: number | null;
+  label?: string;
+  order?: number;
+  hidden?: boolean;
+  visibility?: 'visible' | 'hidden';
+  sidebar?: SidebarFrontmatter;
 };
 
 type ContentModule = {
-	Content?: unknown;
-	default?: unknown;
-	frontmatter?: DocsFrontmatter;
+  Content?: unknown;
+  default?: unknown;
+  frontmatter?: DocsFrontmatter;
 };
 
 export type SitePage = {
-	file: string;
-	slug: string;
-	title: string;
-	sidebarLabel?: string;
-	description: string;
-	hue?: number | null;
-	hidden: boolean;
-	order: number;
-	content: unknown;
-	markdown: string;
+  file: string;
+  slug: string;
+  title: string;
+  sidebarLabel?: string;
+  description: string;
+  hue?: number | null;
+  hidden: boolean;
+  order: number;
+  content: unknown;
+  markdown: string;
 };
 
 const modules = import.meta.glob<ContentModule>('/docs/**/*.{md,mdx}', { eager: true });
 const sources = import.meta.glob<string>('/docs/**/*.{md,mdx}', {
-	query: '?raw',
-	import: 'default',
-	eager: true,
+  query: '?raw',
+  import: 'default',
+  eager: true,
 });
 const base = import.meta.env.BASE_URL;
 
 function titleFromSource(source: string, slug: string): string {
-	const body = source.replace(/^---\s*\n[\s\S]*?\n---\s*\n/, '');
-	const heading = /^#\s+(.+?)\s*#*\s*$/m.exec(body)?.[1]?.trim();
-	if (heading) return heading;
-	const name = slug.split('/').at(-1) || 'Overview';
-	return name.replace(/[-_]+/g, ' ').replace(/\b\p{L}/gu, (letter) => letter.toUpperCase());
+  const body = source.replace(/^---\s*\n[\s\S]*?\n---\s*\n/, '');
+  const heading = /^#\s+(.+?)\s*#*\s*$/m.exec(body)?.[1]?.trim();
+  if (heading) return heading;
+  const name = slug.split('/').at(-1) || 'Overview';
+  return name.replace(/[-_]+/g, ' ').replace(/\b\p{L}/gu, (letter) => letter.toUpperCase());
 }
 
 function routeForFile(file: string): string {
-	const relative = file.replace(/^\/?docs\//, '').replace(/\.(?:md|mdx)$/i, '');
-	return relative.replace(/(?:^|\/)index$/i, '').replace(/^\/+|\/+$/g, '');
+  const relative = file.replace(/^\/?docs\//, '').replace(/\.(?:md|mdx)$/i, '');
+  return relative.replace(/(?:^|\/)index$/i, '').replace(/^\/+|\/+$/g, '');
 }
 
 const routes = new Map<string, string>();
 export const sitePages: SitePage[] = Object.entries(modules)
-	.map(([file, module]) => {
-		const slug = routeForFile(file);
-		const previous = routes.get(slug);
-		if (previous) {
-			throw new Error(`Duplicate Docs route "${slug || '/'}": ${previous} and ${file}`);
-		}
-		routes.set(slug, file);
-		const markdown = sources[file] ?? '';
-		const frontmatter = module.frontmatter ?? {};
-		return {
-			file,
-			slug,
-			title: frontmatter.title ?? titleFromSource(markdown, slug),
-			...((frontmatter.sidebar?.label ?? frontmatter.label) ? { sidebarLabel: frontmatter.sidebar?.label ?? frontmatter.label } : {}),
-			description: frontmatter.description ?? '',
-			...(frontmatter.hue !== undefined ? { hue: frontmatter.hue } : {}),
-			hidden: frontmatter.sidebar?.hidden ?? frontmatter.hidden ?? frontmatter.visibility === 'hidden',
-			order: frontmatter.sidebar?.order ?? frontmatter.order ?? Number.MAX_SAFE_INTEGER,
-			content: module.Content ?? module.default,
-			markdown: markdown.replace(/^---\s*\n[\s\S]*?\n---\s*\n/, ''),
-		};
-	})
-	.sort((left, right) => left.order - right.order || left.file.localeCompare(right.file));
+  .map(([file, module]) => {
+    const slug = routeForFile(file);
+    const previous = routes.get(slug);
+    if (previous) {
+      throw new Error(`Duplicate Docs route "${slug || '/'}": ${previous} and ${file}`);
+    }
+    routes.set(slug, file);
+    const markdown = sources[file] ?? '';
+    const frontmatter = module.frontmatter ?? {};
+    return {
+      file,
+      slug,
+      title: frontmatter.title ?? titleFromSource(markdown, slug),
+      ...((frontmatter.sidebar?.label ?? frontmatter.label)
+        ? { sidebarLabel: frontmatter.sidebar?.label ?? frontmatter.label }
+        : {}),
+      description: frontmatter.description ?? '',
+      ...(frontmatter.hue !== undefined ? { hue: frontmatter.hue } : {}),
+      hidden:
+        frontmatter.sidebar?.hidden ?? frontmatter.hidden ?? frontmatter.visibility === 'hidden',
+      order: frontmatter.sidebar?.order ?? frontmatter.order ?? Number.MAX_SAFE_INTEGER,
+      content: module.Content ?? module.default,
+      markdown: markdown.replace(/^---\s*\n[\s\S]*?\n---\s*\n/, ''),
+    };
+  })
+  .sort((left, right) => left.order - right.order || left.file.localeCompare(right.file));
 
 if (sitePages.length === 0) {
-	throw new Error('No Markdown files found in docs/. Add docs/index.md to start a Terra Docs site.');
+  throw new Error(
+    'No Markdown files found in docs/. Add docs/index.md to start a Terra Docs site.',
+  );
 }
 
 type MutableNode = Omit<DocsNavNode, 'children'> & { children: Map<string, MutableNode> };
 const rootNodes = new Map<string, MutableNode>();
 
 function label(value: string): string {
-	return value.replace(/[-_]+/g, ' ').replace(/\b\p{L}/gu, (letter) => letter.toUpperCase());
+  return value.replace(/[-_]+/g, ' ').replace(/\b\p{L}/gu, (letter) => letter.toUpperCase());
 }
 
 for (const page of sitePages.filter((item) => !item.hidden && item.slug !== '404')) {
-	const segments = page.slug.split('/').filter(Boolean);
-	let currentNodes = rootNodes;
-	let current: MutableNode | undefined;
-	let prefix = '';
-	if (segments.length === 0) {
-		const overview = currentNodes.get('overview') ?? {
-			id: 'overview', title: 'Overview', children: new Map(),
-		};
-		if (!currentNodes.has('overview')) currentNodes.set('overview', overview);
-		Object.assign(overview, pageMetadata(page, pageHref('', base)));
-		continue;
-	}
-	for (const segment of segments) {
-		prefix = prefix ? `${prefix}/${segment}` : segment;
-		let node = currentNodes.get(segment);
-		if (!node) {
-			node = { id: prefix, title: label(segment), children: new Map() };
-			currentNodes.set(segment, node);
-		}
-		current = node;
-		currentNodes = node.children;
-	}
-	if (current) Object.assign(current, pageMetadata(page, pageHref(page.slug, base)));
+  const segments = page.slug.split('/').filter(Boolean);
+  let currentNodes = rootNodes;
+  let current: MutableNode | undefined;
+  let prefix = '';
+  if (segments.length === 0) {
+    const overview = currentNodes.get('overview') ?? {
+      id: 'overview',
+      title: 'Overview',
+      hue: getHue('Overview'),
+      children: new Map(),
+    };
+    if (!currentNodes.has('overview')) currentNodes.set('overview', overview);
+    Object.assign(overview, pageMetadata(page, pageHref('', base)));
+    continue;
+  }
+  for (const segment of segments) {
+    prefix = prefix ? `${prefix}/${segment}` : segment;
+    let node = currentNodes.get(segment);
+    if (!node) {
+      node = {
+        id: prefix,
+        title: label(segment),
+        ...(prefix === segment ? { hue: getHue(label(segment)) } : {}),
+        children: new Map(),
+      };
+      currentNodes.set(segment, node);
+    }
+    current = node;
+    currentNodes = node.children;
+  }
+  if (current) Object.assign(current, pageMetadata(page, pageHref(page.slug, base)));
 }
 
 function pageMetadata(page: SitePage, href: string): Partial<MutableNode> {
-	return {
-		id: page.slug || 'index',
-		title: page.sidebarLabel ?? page.title,
-		href,
-		...(page.description ? { description: page.description } : {}),
-		...(page.hue !== undefined ? { hue: page.hue } : {}),
-	};
+  return {
+    id: page.slug || 'index',
+    title: page.sidebarLabel ?? page.title,
+    href,
+    ...(page.description ? { description: page.description } : {}),
+    ...(page.hue !== undefined ? { hue: page.hue } : {}),
+  };
 }
 
 function materialize(nodes: Map<string, MutableNode>): DocsNavNode[] {
-	return [...nodes.values()].map(({ children, ...node }) => ({
-		...node,
-		...(children.size ? { children: materialize(children) } : {}),
-	}));
+  return [...nodes.values()].map(({ children, ...node }) => ({
+    ...node,
+    ...(children.size ? { children: materialize(children) } : {}),
+  }));
 }
 
 export const siteNavigation = materialize(rootNodes);
 
 export function pageHref(slug: string, base = '/'): string {
-	const prefix = base === '/' ? '' : `/${base.replace(/^\/+|\/+$/g, '')}`;
-	return slug ? `${prefix}/${slug}/` : `${prefix}/`;
+  const prefix = base === '/' ? '' : `/${base.replace(/^\/+|\/+$/g, '')}`;
+  return slug ? `${prefix}/${slug}/` : `${prefix}/`;
 }
 
 export function pageForSlug(slug: string): SitePage | undefined {
-	return sitePages.find((page) => page.slug === slug);
+  return sitePages.find((page) => page.slug === slug);
 }

package/site/src/styles/search.css

@@ -1,56 +1,127 @@
 .terra-docs-search {
-	position: fixed;
-	top: 0.65rem;
-	right: 1rem;
-	z-index: 80;
-	font: inherit;
+  position: fixed;
+  top: 0.65rem;
+  right: 1rem;
+  z-index: 80;
+  font: inherit;
 }
 
 .terra-docs-search-trigger {
-	display: flex;
-	align-items: center;
-	gap: 0.55rem;
-	min-height: 2.4rem;
-	padding: 0.35rem 0.55rem;
-	border: 1px solid rgb(var(--primary-6));
-	border-radius: 0.45rem;
-	background: rgb(var(--primary-2));
-	color: rgb(var(--primary-11));
-	font-size: 0.85rem;
-	cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-height: 2.4rem;
+  padding: 0.35rem 0.55rem;
+  border: 1px solid rgb(var(--primary-6));
+  border-radius: 0.45rem;
+  background: rgb(var(--primary-2));
+  color: rgb(var(--primary-11));
+  font-size: 0.85rem;
+  cursor: pointer;
 }
 
-.terra-docs-search-trigger:hover { background: rgb(var(--primary-3)); }
-.terra-docs-search-trigger > span:first-child { font-size: 1.25rem; line-height: 1; }
-.terra-docs-search-trigger kbd { padding: 0.05rem 0.25rem; border: 1px solid rgb(var(--primary-6)); border-radius: 0.25rem; font-size: 0.7rem; }
+.terra-docs-search-trigger:hover {
+  background: rgb(var(--primary-3));
+}
+.terra-docs-search-trigger > span:first-child {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+.terra-docs-search-trigger kbd {
+  padding: 0.05rem 0.25rem;
+  border: 1px solid rgb(var(--primary-6));
+  border-radius: 0.25rem;
+  font-size: 0.7rem;
+}
 
 .terra-docs-search-dialog {
-	width: min(42rem, calc(100vw - 2rem));
-	max-width: none;
-	max-height: min(75vh, 42rem);
-	padding: 0;
-	border: 1px solid rgb(var(--primary-7));
-	border-radius: 0.75rem;
-	background: rgb(var(--primary-2));
-	color: rgb(var(--primary-12));
-	box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 0.35);
+  width: min(42rem, calc(100vw - 2rem));
+  max-width: none;
+  max-height: min(75vh, 42rem);
+  padding: 0;
+  border: 1px solid rgb(var(--primary-7));
+  border-radius: 0.75rem;
+  background: rgb(var(--primary-2));
+  color: rgb(var(--primary-12));
+  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 0.35);
 }
 
-.terra-docs-search-dialog::backdrop { background: rgb(0 0 0 / 0.58); backdrop-filter: blur(2px); }
-.terra-docs-search-panel { overflow: hidden; }
-.terra-docs-search-input-row { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid rgb(var(--primary-5)); }
-.terra-docs-search-input-row > span { font-size: 1.3rem; }
-.terra-docs-search-input-row input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
-.terra-docs-search-input-row button { border: 1px solid rgb(var(--primary-6)); border-radius: 0.3rem; background: transparent; color: inherit; font-size: 0.7rem; cursor: pointer; }
-.terra-docs-search-results { max-height: calc(75vh - 4rem); overflow: auto; padding: 0.5rem; }
-.terra-docs-search-results > p { padding: 1rem; color: rgb(var(--primary-10)); font-size: 0.9rem; }
-.terra-docs-search-results > a { display: grid; gap: 0.25rem; padding: 0.75rem; border-radius: 0.45rem; color: inherit; text-decoration: none; }
-.terra-docs-search-results > a:hover, .terra-docs-search-results > a:focus { outline: 0; background: rgb(var(--primary-4)); }
-.terra-docs-search-results > a span, .terra-docs-search-results > a small { color: rgb(var(--primary-10)); }
-.terra-docs-search-results > a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.terra-docs-search-dialog::backdrop {
+  background: rgb(0 0 0 / 0.58);
+  backdrop-filter: blur(2px);
+}
+.terra-docs-search-panel {
+  overflow: hidden;
+}
+.terra-docs-search-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-bottom: 1px solid rgb(var(--primary-5));
+}
+.terra-docs-search-input-row > span {
+  font-size: 1.3rem;
+}
+.terra-docs-search-input-row input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+.terra-docs-search-input-row button {
+  border: 1px solid rgb(var(--primary-6));
+  border-radius: 0.3rem;
+  background: transparent;
+  color: inherit;
+  font-size: 0.7rem;
+  cursor: pointer;
+}
+.terra-docs-search-results {
+  max-height: calc(75vh - 4rem);
+  overflow: auto;
+  padding: 0.5rem;
+}
+.terra-docs-search-results > p {
+  padding: 1rem;
+  color: rgb(var(--primary-10));
+  font-size: 0.9rem;
+}
+.terra-docs-search-results > a {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.75rem;
+  border-radius: 0.45rem;
+  color: inherit;
+  text-decoration: none;
+}
+.terra-docs-search-results > a:hover,
+.terra-docs-search-results > a:focus {
+  outline: 0;
+  background: rgb(var(--primary-4));
+}
+.terra-docs-search-results > a span,
+.terra-docs-search-results > a small {
+  color: rgb(var(--primary-10));
+}
+.terra-docs-search-results > a small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 @media (max-width: 640px) {
-	.terra-docs-search { top: 0.5rem; right: 0.5rem; }
-	.terra-docs-search-trigger { min-height: 2.1rem; }
-	.terra-docs-search-trigger kbd { display: none; }
+  .terra-docs-search {
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+  .terra-docs-search-trigger {
+    min-height: 2.1rem;
+  }
+  .terra-docs-search-trigger kbd {
+    display: none;
+  }
 }