Add bilingual homepage and self-hosted fonts

2026-08-14 11:00:11 +09:00
parent e50458595b
commit 3645a2cc2d
11 changed files with 288 additions and 169 deletions
@@ -1,5 +1,7 @@
 ---
 import { nav } from '../lib/docs.js';
+import '@fontsource/ibm-plex-mono/latin-400.css';
+import '@fontsource/ibm-plex-mono/latin-600.css';
 import '../style.css';

 const {
@@ -8,10 +10,15 @@ const {
  active = '',
  playground = false,
  frontpage = false,
+  locale,
 } = Astro.props;

 const pathname = Astro.url.pathname;
-const language = active ? 'ja' : 'en';
+const language = locale ?? (pathname.startsWith('/docs/') ? 'ja' : 'en');
+const homeHref = language === 'ja' ? '/ja/' : '/';
+const alternateHref = language === 'ja' ? '/' : '/ja/';
+const alternateLabel = language === 'ja' ? 'English' : '日本語';
+const alternateAriaLabel = language === 'ja' ? 'Switch to English' : '日本語に切り替える';

 function isCurrent(path) {
  return pathname === path || (path !== '/' && pathname.startsWith(path));
@@ -35,18 +42,22 @@ function renderNav(items, prefix = []) {
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
+    {frontpage && <link rel="alternate" hreflang="en" href="/" />}
+    {frontpage && <link rel="alternate" hreflang="ja" href="/ja/" />}
+    {frontpage && <link rel="alternate" hreflang="x-default" href="/" />}
    <title>{title}</title>
  </head>
  <body>
    <header class="topbar">
-      <a class="brand" href="/" aria-label="Decodal home">
+      <a class="brand" href={homeHref} aria-label="Decodal home">
        <strong>Decodal</strong>
        <span>Deferred Constraint Data Language</span>
      </a>
      <nav class="topnav" aria-label="Primary navigation">
        <a class:list={{ current: isCurrent('/docs/') }} aria-current={isCurrent('/docs/') ? 'page' : undefined} href="/docs/introduction/">Manual</a>
        <a class:list={{ current: isCurrent('/playground/') }} aria-current={isCurrent('/playground/') ? 'page' : undefined} href="/playground/">Playground</a>
-        <a href="https://gitea.hareworks.net/Hare/Decodal">Source</a>
+        <a class="source-link" href="https://gitea.hareworks.net/Hare/Decodal">Source</a>
+        {frontpage && <a class="language-switch" href={alternateHref} hreflang={language === 'ja' ? 'en' : 'ja'} aria-label={alternateAriaLabel}>{alternateLabel}</a>}
      </nav>
    </header>
    <div class:list={{ layout: true, 'wide-layout': playground || frontpage, 'playground-layout': playground }}>