mordoc 0.1.13 → 1.0.0

package/src/app/header/Header.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router';
+import { useMordocData } from '../data-context.js';
+import { detectCurrentLang, buildLangPrefix, stripLangPrefix } from '../lang-utils.js';
+import { SearchBar } from './SearchBar.js';
+import { Topnav } from './Topnav.js';
+import { LanguagePicker } from './LanguagePicker.js';
+import styles from './Header.module.css';
+
+type Theme = 'light' | 'dark';
+
+interface HeaderProps {
+  sidenavOpen: boolean;
+  onMenuToggle: () => void;
+  onSearchOpen: () => void;
+  /** When false, the hamburger/close menu button is not rendered (e.g. on landing pages that have no sidenav). */
+  showMenu?: boolean;
+  /** Structural layout class injected by App.module.css (.headerArea) */
+  className?: string;
+}
+
+function HamburgerIcon() {
+  return (
+    <svg
+      width="var(--menu-btn-icon, 20px)"
+      height="var(--menu-btn-icon, 20px)"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <line x1="3" y1="6" x2="21" y2="6" />
+      <line x1="3" y1="12" x2="21" y2="12" />
+      <line x1="3" y1="18" x2="21" y2="18" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      width="var(--menu-btn-icon, 20px)"
+      height="var(--menu-btn-icon, 20px)"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+function MoonIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      style={{ width: 'var(--toggle-icon-size)', height: 'var(--toggle-icon-size)' }}
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  );
+}
+
+function SunIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      style={{ width: 'var(--toggle-icon-size)', height: 'var(--toggle-icon-size)' }}
+    >
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
+  );
+}
+
+export function Header({ sidenavOpen, onMenuToggle, onSearchOpen, showMenu = true, className }: HeaderProps) {
+  const { site, assets, language, navigation } = useMordocData();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [theme, setTheme] = useState<Theme>(() => {
+    try {
+      const stored = localStorage.getItem('mordoc-theme');
+      if (stored === 'light' || stored === 'dark') return stored as Theme;
+    } catch (e) {}
+    return 'light';
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+    localStorage.setItem('mordoc-theme', theme);
+  }, [theme]);
+
+  const currentLang = detectCurrentLang(location.pathname, language, site.defaultLanguage);
+  const currentContentPath = stripLangPrefix(location.pathname, currentLang, site.defaultLanguage);
+  const logo = theme === 'dark' ? (assets.logoDark ?? assets.logo) : assets.logo;
+
+  function handleLangChange(newLang: string) {
+    const prefix = buildLangPrefix(newLang, site.defaultLanguage);
+    const target =
+      currentContentPath === '/' ? prefix || '/' : `${prefix}${currentContentPath}`;
+    navigate(target);
+  }
+
+  const hasTopnav = navigation.kind === 'topnav';
+
+  return (
+    <header className={`${styles.header}${className ? ` ${className}` : ''}`}>
+      {/* Top bar */}
+      <div className={styles.inner}>
+        {/* Brand — hamburger + logo */}
+        <div className={styles.brand}>
+          {showMenu && (
+            <button
+              className={styles.menuBtn}
+              onClick={onMenuToggle}
+              aria-label={sidenavOpen ? 'Close menu' : 'Open menu'}
+              aria-expanded={sidenavOpen}
+            >
+              {sidenavOpen ? <CloseIcon /> : <HamburgerIcon />}
+            </button>
+          )}
+          <Link to="/" className={styles.logo}>
+            {logo ? (
+              <img src={logo} alt={site.name} className={styles.logoImage} />
+            ) : (
+              <span className={styles.logoText}>{site.name}</span>
+            )}
+          </Link>
+        </div>
+
+        {/* Centered search */}
+        <div className={styles.search}>
+          <SearchBar onOpen={onSearchOpen} />
+        </div>
+
+        {/* Right actions */}
+        <div className={styles.actions}>
+          {language && language.languages.length > 1 && (
+            <LanguagePicker
+              languages={language.languages}
+              currentLang={currentLang}
+              onChange={handleLangChange}
+            />
+          )}
+          <button
+            onClick={() => setTheme((t) => (t === 'light' ? 'dark' : 'light'))}
+            aria-label={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
+            className={styles.themeToggle}
+          >
+            {theme === 'light' ? <MoonIcon /> : <SunIcon />}
+          </button>
+        </div>
+      </div>
+
+      {/* Topnav second row — desktop only, only when topnav navigation is configured */}
+      {hasTopnav && (
+        <div className={styles.topnavRow}>
+          <Topnav />
+        </div>
+      )}
+    </header>
+  );
+}

package/src/app/header/LanguagePicker.module.css

@@ -0,0 +1,97 @@
+/* ============================================================
+   LANGUAGE PICKER TOKENS
+   ============================================================ */
+:root {
+  --lang-height:    36px;
+  --lang-px:        10px;
+  --lang-gap:       6px;
+  --lang-radius:    6px;
+  --lang-font-size: 14px;
+  --lang-icon-size: 16px;
+  --lang-fg:        #383838;
+  --lang-fg-hover:  #1c1c1c;
+  --lang-bg-hover:  #f5f5f5;
+}
+
+:global(.dark) {
+  --lang-fg:       #9e9e9e;
+  --lang-fg-hover: #ebebeb;
+  --lang-bg-hover: #1f1f1f;
+}
+
+.wrapper {
+  position: relative;
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lang-gap);
+  height: var(--lang-height);
+  padding: 0 var(--lang-px);
+  border: 0;
+  background: transparent;
+  border-radius: var(--lang-radius);
+  font-family: inherit;
+  font-size: var(--lang-font-size);
+  font-weight: 500;
+  color: var(--lang-fg);
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.trigger:hover {
+  color: var(--lang-fg-hover);
+  background-color: var(--lang-bg-hover);
+}
+
+.trigger:focus-visible {
+  outline: 2px solid var(--accent-emphasis);
+  outline-offset: 2px;
+}
+
+/* Hide language code on small phones — globe icon only */
+@media (max-width: 479px) {
+  .code {
+    display: none;
+  }
+
+  .trigger {
+    padding: 0 8px;
+  }
+}
+
+.dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 120px;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  z-index: 100;
+}
+
+.option {
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-sm);
+  font-size: var(--lang-font-size);
+  font-weight: 500;
+  color: var(--color-fg-muted);
+  cursor: pointer;
+  transition: background-color 0.1s, color 0.1s;
+}
+
+.option:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-fg);
+}
+
+.optionActive {
+  color: var(--accent-emphasis);
+  background: var(--accent-subtle);
+}

package/src/app/header/LanguagePicker.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useRef, useState } from 'react';
+import styles from './LanguagePicker.module.css';
+
+/**
+ * Maps ISO 639-1 (and common BCP-47) language codes to their native-script autonyms.
+ * Keys are lowercase. Add entries here as needed.
+ */
+const LANGUAGE_NAMES: Record<string, string> = {
+  af: 'Afrikaans',
+  am: 'አማርኛ',
+  ar: 'العربية',
+  az: 'Azərbaycan',
+  be: 'Беларуская',
+  bg: 'Български',
+  bn: 'বাংলা',
+  bs: 'Bosanski',
+  ca: 'Català',
+  cs: 'Čeština',
+  cy: 'Cymraeg',
+  da: 'Dansk',
+  de: 'Deutsch',
+  el: 'Ελληνικά',
+  en: 'English',
+  eo: 'Esperanto',
+  es: 'Español',
+  et: 'Eesti',
+  eu: 'Euskara',
+  fa: 'فارسی',
+  fi: 'Suomi',
+  fil: 'Filipino',
+  fr: 'Français',
+  ga: 'Gaeilge',
+  gl: 'Galego',
+  gu: 'ગુજરાતી',
+  he: 'עברית',
+  hi: 'हिन्दी',
+  hr: 'Hrvatski',
+  hu: 'Magyar',
+  hy: 'Հայերեն',
+  id: 'Indonesia',
+  is: 'Íslenska',
+  it: 'Italiano',
+  ja: '日本語',
+  ka: 'ქართული',
+  kk: 'Қазақша',
+  km: 'ភាសាខ្មែរ',
+  kn: 'ಕನ್ನಡ',
+  ko: '한국어',
+  lt: 'Lietuvių',
+  lv: 'Latviešu',
+  mk: 'Македонски',
+  ml: 'മലയാളം',
+  mn: 'Монгол',
+  mr: 'मराठी',
+  ms: 'Melayu',
+  my: 'မြန်မာ',
+  nb: 'Norsk',
+  ne: 'नेपाली',
+  nl: 'Nederlands',
+  pa: 'ਪੰਜਾਬੀ',
+  pl: 'Polski',
+  pt: 'Português',
+  ro: 'Română',
+  ru: 'Русский',
+  si: 'සිංහල',
+  sk: 'Slovenčina',
+  sl: 'Slovenščina',
+  sq: 'Shqip',
+  sr: 'Српски',
+  sv: 'Svenska',
+  sw: 'Kiswahili',
+  ta: 'தமிழ்',
+  te: 'తెలుగు',
+  th: 'ภาษาไทย',
+  tr: 'Türkçe',
+  uk: 'Українська',
+  ur: 'اردو',
+  uz: 'Oʻzbek',
+  vi: 'Tiếng Việt',
+  zh: '中文',
+  'zh-cn': '中文（简体）',
+  'zh-tw': '中文（繁體）',
+  zu: 'IsiZulu',
+};
+
+/** Returns the display name for a language code, falling back to the uppercased code. */
+function getLanguageName(code: string): string {
+  return LANGUAGE_NAMES[code.toLowerCase()] ?? code.toUpperCase();
+}
+
+interface LanguagePickerProps {
+  languages: string[];
+  currentLang: string;
+  onChange: (lang: string) => void;
+}
+
+function GlobeIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      style={{ width: 'var(--lang-icon-size)', height: 'var(--lang-icon-size)', flexShrink: 0 }}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <line x1="2" y1="12" x2="22" y2="12" />
+      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+    </svg>
+  );
+}
+
+export function LanguagePicker({ languages, currentLang, onChange }: LanguagePickerProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    function handlePointerDown(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+
+  return (
+    <div className={styles.wrapper} ref={ref}>
+      <button
+        className={styles.trigger}
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={`Language: ${getLanguageName(currentLang)}`}
+      >
+        <GlobeIcon />
+        <span className={styles.code}>{getLanguageName(currentLang)}</span>
+      </button>
+
+      {open && (
+        <ul className={styles.dropdown} role="listbox" aria-label="Select language">
+          {languages.map((lang) => (
+            <li
+              key={lang}
+              role="option"
+              aria-selected={lang === currentLang}
+              className={`${styles.option}${lang === currentLang ? ` ${styles.optionActive}` : ''}`}
+              onClick={() => {
+                onChange(lang);
+                setOpen(false);
+              }}
+            >
+              {getLanguageName(lang)}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/app/header/SearchBar.module.css

@@ -0,0 +1,92 @@
+/* ============================================================
+   SEARCH BAR TOKENS
+   ============================================================ */
+:root {
+  --search-width:        256px;
+  --search-height:       36px;
+  --search-radius:       8px;
+  --search-px:           12px;
+  --search-gap:          8px;
+  --search-font-size:    14px;
+  --search-icon-size:    16px;
+  --search-bg:           rgba(245, 245, 245, 0.5);
+  --search-bg-hover:     #f5f5f5;
+  --search-border:       #e5e5e5;
+  --search-border-hover: color-mix(in oklch, var(--accent) 30%, transparent);
+  --search-fg:           #666666;
+  --kbd-height:          20px;
+  --kbd-px:              6px;
+  --kbd-font-size:       10px;
+  --kbd-radius:          4px;
+}
+
+:global(.dark) {
+  --search-bg:       rgba(36, 36, 36, 0.5);
+  --search-bg-hover: #242424;
+  --search-border:   #2e2e2e;
+  --search-fg:       #9e9e9e;
+}
+
+@media (min-width: 768px) {
+  :root { --search-width: 220px; }
+}
+
+@media (min-width: 1024px) {
+  :root { --search-width: 256px; }
+}
+
+.searchBar {
+  display: flex;
+  align-items: center;
+  gap: var(--search-gap);
+  width: var(--search-width);
+  max-width: 100%;
+  height: var(--search-height);
+  padding: 0 var(--search-px);
+  background: var(--search-bg);
+  color: var(--search-fg);
+  border: 1px solid var(--search-border);
+  border-radius: var(--search-radius);
+  font-size: var(--search-font-size);
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.15s, border-color 0.15s;
+}
+
+.searchBar:hover {
+  background-color: var(--search-bg-hover);
+  border-color: var(--search-border-hover);
+}
+
+.searchBar:focus-visible {
+  outline: 2px solid var(--accent-emphasis);
+  outline-offset: 2px;
+}
+
+.icon {
+  width: var(--search-icon-size);
+  height: var(--search-icon-size);
+  flex-shrink: 0;
+  color: var(--search-fg);
+}
+
+.placeholder {
+  flex: 1;
+  color: var(--search-fg);
+}
+
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  height: var(--kbd-height);
+  padding: 0 var(--kbd-px);
+  border: 1px solid var(--search-border);
+  border-radius: var(--kbd-radius);
+  background: var(--toggle-bg);
+  font-family: ui-monospace, 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
+  font-size: var(--kbd-font-size);
+  font-weight: 500;
+  color: var(--search-fg);
+  flex-shrink: 0;
+}

package/src/app/header/SearchBar.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import styles from './SearchBar.module.css';
+
+export function SearchBar({ onOpen }: { onOpen: () => void }) {
+  const [shortcut, setShortcut] = useState('Ctrl K');
+
+  // Detect Mac after mount — navigator is unavailable during SSR.
+  // Starting with 'Ctrl K' keeps the server and initial client render
+  // identical, avoiding a hydration mismatch.
+  useEffect(() => {
+    if (/Mac|iPod|iPhone|iPad/.test(navigator.platform)) {
+      setShortcut('⌘K');
+    }
+  }, []);
+
+  return (
+    <button className={styles.searchBar} onClick={onOpen}>
+      <svg
+        className={styles.icon}
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <circle cx="11" cy="11" r="8" />
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+      </svg>
+      <span className={styles.placeholder}>Search...</span>
+      <kbd className={styles.kbd}>{shortcut}</kbd>
+    </button>
+  );
+}