@glossarist/concept-browser 0.7.106 → 0.7.108

package/src/utils/favicon-links.ts

@@ -0,0 +1,79 @@
+/**
+ * Favicon link-tag builder — shared SSOT for the `<link rel="icon">`
+ * block emitted in `<head>`.
+ *
+ * Used by:
+ *   - `src/layouts/Default.astro` (build-time SSG)
+ *
+ * Why this exists: a deployment at `/cie-eilv/` has its favicon files
+ * at `/cie-eilv/favicon.ico`, NOT `/favicon.ico`. Hardcoding `/` as
+ * the URL prefix (which 0.7.106 did) caused 404s on every sub-path
+ * deployment. This builder walks the configuration cascade via
+ * `resolveFaviconBase` and emits correctly-prefixed link tags.
+ */
+
+import { resolveFaviconBase } from './favicon-base';
+
+export interface FaviconLinkTag {
+  rel: string;
+  type?: string;
+  sizes?: string;
+  href: string;
+}
+
+/** Default favicon file set emitted by the CLI's `favicons` pipeline. */
+const DEFAULT_FAVICON_FILES: readonly FaviconLinkTag[] = [
+  { rel: 'icon',       type: 'image/x-icon',  href: 'favicon.ico' },
+  { rel: 'icon',       type: 'image/svg+xml', href: 'favicon.svg' },
+  { rel: 'icon',       type: 'image/png',     sizes: '16x16',  href: 'favicon-16x16.png' },
+  { rel: 'icon',       type: 'image/png',     sizes: '32x32',  href: 'favicon-32x32.png' },
+  { rel: 'icon',       type: 'image/png',     sizes: '48x48',  href: 'favicon-48x48.png' },
+  { rel: 'apple-touch-icon', sizes: '57x57',  href: 'apple-touch-icon-57x57.png' },
+  { rel: 'apple-touch-icon', sizes: '60x60',  href: 'apple-touch-icon-60x60.png' },
+  { rel: 'apple-touch-icon', sizes: '72x72',  href: 'apple-touch-icon-72x72.png' },
+  { rel: 'apple-touch-icon', sizes: '76x76',  href: 'apple-touch-icon-76x76.png' },
+  { rel: 'apple-touch-icon', sizes: '114x114',href: 'apple-touch-icon-114x114.png' },
+  { rel: 'apple-touch-icon', sizes: '120x120',href: 'apple-touch-icon-120x120.png' },
+  { rel: 'apple-touch-icon', sizes: '144x144',href: 'apple-touch-icon-144x144.png' },
+  { rel: 'apple-touch-icon', sizes: '152x152',href: 'apple-touch-icon-152x152.png' },
+  { rel: 'apple-touch-icon', sizes: '167x167',href: 'apple-touch-icon-167x167.png' },
+  { rel: 'apple-touch-icon', sizes: '180x180',href: 'apple-touch-icon-180x180.png' },
+  { rel: 'apple-touch-icon', sizes: '1024x1024',href: 'apple-touch-icon-1024x1024.png' },
+];
+
+export interface BuildFaviconLinksInput {
+  /** Explicit consumer override via `branding.favicon.base_path`. */
+  brandingFaviconBasePath?: string;
+  /** Consumer's declared sub-path via `site-config.yml:basePath`. */
+  siteConfigBasePath?: string;
+  /** Build-time BASE_PATH from Astro/Vite (`import.meta.env.BASE_URL`). */
+  astroBaseUrl?: string;
+}
+
+/**
+ * Build the list of default favicon link tags with BASE_PATH-aware URLs.
+ *
+ * Returns the tag descriptors; the caller (Default.astro) renders them
+ * into <link> elements.
+ */
+export function buildDefaultFaviconLinks(input: BuildFaviconLinksInput): FaviconLinkTag[] {
+  const base = resolveFaviconBase(input);
+  return DEFAULT_FAVICON_FILES.map(tag => ({
+    ...tag,
+    href: `${base}${tag.href}`,
+  }));
+}
+
+/**
+ * Render a single FaviconLinkTag to an HTML <link> string.
+ *
+ * Attribute order: rel, type (if present), sizes (if present), href.
+ * Deterministic for snapshot testing.
+ */
+export function renderFaviconLinkTag(tag: FaviconLinkTag): string {
+  const attrs: string[] = [`rel="${tag.rel}"`];
+  if (tag.type) attrs.push(`type="${tag.type}"`);
+  if (tag.sizes) attrs.push(`sizes="${tag.sizes}"`);
+  attrs.push(`href="${tag.href}"`);
+  return `<link ${attrs.join(' ')} />`;
+}

package/src/utils/font-stack.ts

@@ -0,0 +1,77 @@
+/**
+ * Font stack builder — shared SSOT for `branding.fonts.*` fallback chains.
+ *
+ * Used by:
+ *   - `src/layouts/Default.astro`     (build-time SSG CSS variables)
+ *   - `src/config/use-site-config.ts` (runtime CSS variable overrides)
+ *
+ * Design principle: NO slot dictates a font category. The consumer picks
+ * `serif`, `sans-serif`, or `monospace` for each slot independently. The
+ * defaults below preserve the Glossarist visual identity (serif title +
+ * serif heading + sans-serif body + monospace code) but every slot can
+ * be overridden to any category.
+ *
+ * Slot semantics:
+ *   - title   : single most-prominent display text on the page
+ *               (home hero h1, concept name on detail page, group title)
+ *   - heading : h2–h6 section headings
+ *   - body    : paragraph text, lists, table cells
+ *   - mono    : code blocks, inline code, kbd
+ *
+ * Backward compat:
+ *   - `branding.fonts.header` is accepted as a deprecated alias for
+ *     `branding.fonts.heading` (both write to `--font-heading`, which
+ *     also surfaces as `--font-header` for legacy CSS).
+ */
+
+export type FontCategory = 'serif' | 'sans-serif' | 'monospace';
+
+export interface FontConfigLike {
+  family: string;
+  category?: FontCategory;
+}
+
+const FALLBACKS: Readonly<Record<FontCategory, string>> = {
+  serif: 'Georgia, serif',
+  'sans-serif': 'system-ui, sans-serif',
+  monospace: 'ui-monospace, "JetBrains Mono", Menlo, Monaco, monospace',
+};
+
+/**
+ * Build a CSS font-family stack from a FontConfig-like object.
+ *
+ * - If `font` is null/undefined or has no family, returns `undefined`
+ *   and the caller applies its slot-specific default.
+ * - If `font.category` is omitted, falls back to `defaultCategory`
+ *   so existing configs preserve prior behavior.
+ */
+export function fontStack(
+  font: FontConfigLike | null | undefined,
+  defaultCategory: FontCategory,
+): string | undefined {
+  if (!font?.family) return undefined;
+  const category: FontCategory = font.category ?? defaultCategory;
+  const fallback = FALLBACKS[category];
+  return `'${font.family}', ${fallback}`;
+}
+
+/** Default font stacks (used when the consumer declares nothing).
+ *  Preserves the Glossarist visual identity. NOT a dictate — every
+ *  slot can be overridden to any category via branding.fonts.*. */
+export const DEFAULT_FONTS = {
+  title: `'DM Serif Display', ${FALLBACKS.serif}`,
+  heading: `'DM Serif Display', ${FALLBACKS.serif}`,
+  body: `'DM Sans', ${FALLBACKS['sans-serif']}`,
+  mono: `'JetBrains Mono', ${FALLBACKS.monospace}`,
+} as const;
+
+/** Slot → default category, used when the consumer omits `category`.
+ *  These defaults preserve prior behavior and are NOT a constraint —
+ *  consumers can pick any category for any slot. */
+export const DEFAULT_CATEGORY = {
+  title: 'serif' as FontCategory,
+  heading: 'serif' as FontCategory,
+  body: 'sans-serif' as FontCategory,
+  mono: 'monospace' as FontCategory,
+} as const;
+

package/src/views/DatasetView.vue

@@ -321,7 +321,7 @@ function clearSection() {
 
     <!-- Header -->
     <div v-if="manifest" class="mb-8">
-      <h1 class="font-serif text-3xl text-ink-800 mb-2">{{ localizedTitle }}</h1>
+      <h1 class="font-title text-3xl text-ink-800 mb-2">{{ localizedTitle }}</h1>
       <p class="text-ink-400 leading-relaxed max-w-2xl">{{ localizedDescription }}</p>
       <div class="flex flex-wrap gap-2 mt-4">
         <span class="badge" :style="conceptCountBadgeStyle">{{ manifest.conceptCount.toLocaleString() }} {{ t('dataset.concepts') }}</span>

package/src/views/GroupView.vue

@@ -96,7 +96,7 @@ function openDataset(id: string) {
     <template v-else-if="group">
       <div class="flex items-baseline gap-3 mb-2">
         <span class="text-2xl">{{ groupMeta.glyph }}</span>
-        <h1 class="font-serif text-3xl text-ink-800 dark:text-ink-50">
+        <h1 class="font-title text-3xl text-ink-800 dark:text-ink-50">
           {{ group.label }}
         </h1>
       </div>

package/src/views/HomeView.vue

@@ -77,7 +77,7 @@ function goToGraph() { router.push({ name: 'graph' }); }
           <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-300 hidden sm:inline">{{ localizedSubtitle }}</span>
         </template>
       </div>
-      <h1 class="font-serif text-[2rem] sm:text-[2.75rem] text-ink-800 leading-[1.1] mb-4 tracking-tight">
+      <h1 class="font-title text-[2rem] sm:text-[2.75rem] text-ink-800 leading-[1.1] mb-4 tracking-tight">
         {{ localizedTitle }}
         <template v-if="localizedSubtitle"><br class="hidden sm:block" /> {{ localizedSubtitle }}</template>
       </h1>

package/tailwind.config.js

@@ -13,9 +13,11 @@ export default {
   theme: {
     extend: {
       fontFamily: {
+        title: ['var(--font-title, "DM Serif Display")', 'Georgia', 'serif'],
+        heading: ['var(--font-heading, "DM Serif Display")', 'Georgia', 'serif'],
         serif: ['var(--font-header, "DM Serif Display")', 'Georgia', 'serif'],
         sans: ['var(--font-body, "DM Sans")', 'system-ui', 'sans-serif'],
-        mono: ['"JetBrains Mono"', 'monospace'],
+        mono: ['var(--font-mono, "JetBrains Mono")', 'ui-monospace', 'monospace'],
       },
       colors: {
         ink: {