@hutusi/amytis 1.5.6 → 1.7.0

package/src/components/LanguageProvider.tsx

@@ -27,11 +27,6 @@ export function LanguageProvider({ children }: { children: React.ReactNode }) {
     const rafId = requestAnimationFrame(() => {
       if (savedLang && translations[savedLang]) {
         setLanguageState(savedLang);
-      } else {
-        const browserLang = navigator.language.split('-')[0] as Language;
-        if (translations[browserLang]) {
-          setLanguageState(browserLang);
-        }
       }
       setIsHydrated(true);
     });

package/src/components/LanguageSwitch.tsx

@@ -1,17 +1,128 @@
 'use client';
 
 import { useLanguage } from './LanguageProvider';
+import { Language } from '@/i18n/translations';
+import { siteConfig } from '../../site.config';
 
-export default function LanguageSwitch() {
-  const { language, setLanguage } = useLanguage();
+const LOCALE_LABELS: Record<string, string> = {
+  en: 'EN',
+  zh: '中文',
+};
 
+// Short labels for the compact navbar pill
+const LOCALE_LABELS_SHORT: Record<string, string> = {
+  en: 'EN',
+  zh: '中',
+};
+
+interface LanguageSwitchProps {
+  /** pill — compact segmented pill for the navbar (default)
+   *  text — lightweight typographic links for the footer */
+  variant?: 'pill' | 'text';
+}
+
+export default function LanguageSwitch({ variant = 'pill' }: LanguageSwitchProps) {
+  const { language, setLanguage, isHydrated } = useLanguage();
+  const locales = siteConfig.i18n.locales;
+
+  if (locales.length < 2) return null;
+
+  // SSR placeholder — reserve space to avoid layout shift
+  if (!isHydrated) {
+    return <div className={variant === 'pill' ? 'w-[52px] h-8' : 'w-16 h-4'} aria-hidden="true" />;
+  }
+
+  const currentIndex = locales.indexOf(language);
+  const nextLocale = locales[(currentIndex + 1) % locales.length] as Language;
+
+  // ── Text variant: quiet typographic links for the footer ──────────────────
+  if (variant === 'text') {
+    if (locales.length === 2) {
+      const [a, b] = locales as Language[];
+      return (
+        <span className="flex items-center gap-1.5" role="group" aria-label="Language">
+          <button
+            type="button"
+            onClick={() => setLanguage(a)}
+            aria-pressed={language === a}
+            className={`text-xs font-sans tracking-wide transition-colors duration-150 ${
+              language === a
+                ? 'text-foreground/80 font-medium cursor-default'
+                : 'text-muted/50 hover:text-foreground/70 cursor-pointer'
+            }`}
+          >
+            {LOCALE_LABELS[a] ?? a.toUpperCase()}
+          </button>
+          <span className="text-muted/25 select-none" aria-hidden="true">·</span>
+          <button
+            type="button"
+            onClick={() => setLanguage(b)}
+            aria-pressed={language === b}
+            className={`text-xs font-sans tracking-wide transition-colors duration-150 ${
+              language === b
+                ? 'text-foreground/80 font-medium cursor-default'
+                : 'text-muted/50 hover:text-foreground/70 cursor-pointer'
+            }`}
+          >
+            {LOCALE_LABELS[b] ?? b.toUpperCase()}
+          </button>
+        </span>
+      );
+    }
+    // 3+ locales text fallback: cycle on click
+    return (
+      <button
+        type="button"
+        onClick={() => setLanguage(nextLocale)}
+        className="text-xs font-sans text-muted/60 hover:text-foreground/80 transition-colors duration-150"
+        aria-label={`Switch to ${LOCALE_LABELS[nextLocale] ?? nextLocale}`}
+      >
+        {LOCALE_LABELS[language] ?? language.toUpperCase()}
+      </button>
+    );
+  }
+
+  // ── Pill variant: compact segmented pill for the navbar ───────────────────
+  if (locales.length === 2) {
+    const [a, b] = locales as Language[];
+    return (
+      <button
+        onClick={() => setLanguage(nextLocale)}
+        className="group flex items-center rounded-full border border-muted/20 bg-transparent hover:border-accent/40 transition-all duration-200"
+        aria-label={`Switch language to ${LOCALE_LABELS[nextLocale] ?? nextLocale}`}
+        title={`Switch to ${LOCALE_LABELS[nextLocale] ?? nextLocale}`}
+      >
+        <span
+          className={`px-2 py-1 rounded-full text-[11px] font-sans font-bold tracking-wider transition-all duration-200 ${
+            language === a
+              ? 'text-accent bg-accent/10'
+              : 'text-muted/50 group-hover:text-foreground/60'
+          }`}
+        >
+          {LOCALE_LABELS_SHORT[a] ?? a.toUpperCase()}
+        </span>
+        <span className="text-muted/25 text-[10px] select-none -mx-0.5" aria-hidden="true">·</span>
+        <span
+          className={`px-2 py-1 rounded-full text-[11px] font-sans font-bold tracking-wider transition-all duration-200 ${
+            language === b
+              ? 'text-accent bg-accent/10'
+              : 'text-muted/50 group-hover:text-foreground/60'
+          }`}
+        >
+          {LOCALE_LABELS_SHORT[b] ?? b.toUpperCase()}
+        </span>
+      </button>
+    );
+  }
+
+  // 3+ locales pill fallback: show current, click cycles
   return (
     <button
-      onClick={() => setLanguage(language === 'en' ? 'zh' : 'en')}
-      className="p-2 rounded-md hover:bg-muted/20 transition-colors text-xs"
-      aria-label="Toggle Language"
+      onClick={() => setLanguage(nextLocale)}
+      className="w-8 h-8 flex items-center justify-center text-foreground/80 hover:text-accent transition-colors duration-200 text-[11px] font-sans font-bold tracking-wider"
+      aria-label={`Language: ${LOCALE_LABELS_SHORT[language] ?? language}. Click to switch to ${LOCALE_LABELS_SHORT[nextLocale] ?? nextLocale}`}
     >
-      {language === 'en' ? '中文' : 'EN'}
+      {LOCALE_LABELS_SHORT[language] ?? language.toUpperCase()}
     </button>
   );
 }

package/src/components/LocaleSwitch.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useLanguage } from './LanguageProvider';
+import { useEffect, useRef, ReactNode } from 'react';
+
+/**
+ * Shows the [data-locale] child matching the active language, hiding all others.
+ * Keeps MarkdownRenderer fully server-rendered — no fs/Node modules in client bundle.
+ */
+export default function LocaleSwitch({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const { language } = useLanguage();
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = ref.current;
+    if (!container) return;
+    const elements = container.querySelectorAll<HTMLElement>('[data-locale]');
+    let hasMatch = false;
+    elements.forEach((el) => {
+      if (el.dataset.locale === language) hasMatch = true;
+    });
+    const effectiveLang = hasMatch ? language : elements[0]?.dataset.locale;
+    elements.forEach((el) => {
+      el.style.display = el.dataset.locale === effectiveLang ? '' : 'none';
+    });
+  }, [language]);
+
+  return <div ref={ref}>{children}</div>;
+}

package/src/components/Navbar.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { siteConfig } from '../../site.config';
 import ThemeToggle from './ThemeToggle';
+import LanguageSwitch from './LanguageSwitch';
 import Search from '@/components/Search';
 import { useLanguage } from '@/components/LanguageProvider';
 import { resolveLocaleValue } from '@/lib/i18n';
@@ -19,12 +20,30 @@ interface NavbarProps {
   booksList?: NavItem[];
 }
 
+// Map from nav URL to feature key
+const FEATURE_URLS: Partial<Record<string, keyof typeof siteConfig.features>> = {
+  '/posts': 'posts',
+  '/flows': 'flows',
+  '/series': 'series',
+  '/books': 'books',
+};
+
 export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps) {
   const { t, language } = useLanguage();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const navItems = [...siteConfig.nav].sort((a, b) => a.weight - b.weight);
+  const navItems = [...siteConfig.nav]
+    .filter(item => {
+      const featureKey = FEATURE_URLS[item.url];
+      if (!featureKey) return true; // not a feature-gated item, always show
+      return siteConfig.features?.[featureKey]?.enabled !== false;
+    })
+    .sort((a, b) => a.weight - b.weight);
 
-  const getLabel = (name: string): string => {
+  const getLabel = (name: string, url: string): string => {
+    const featureKey = FEATURE_URLS[url];
+    if (featureKey && siteConfig.features?.[featureKey]?.name) {
+      return resolveLocaleValue(siteConfig.features[featureKey].name, language);
+    }
     const key = name.toLowerCase() as TranslationKey;
     const translated = t(key);
     return translated !== key ? translated : name;
@@ -74,14 +93,14 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
               const Component = isExternal ? 'a' : Link;
               const props = isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {};
 
-              if (item.name === 'Books' && booksList.length > 0) {
+              if (item.url === '/books' && booksList.length > 0) {
                 return (
                   <div key={item.url} className="relative group">
                     <Link
                       href={item.url}
                       className="text-sm font-sans font-medium text-foreground/80 hover:text-heading no-underline transition-colors duration-200 flex items-center gap-1 py-4"
                     >
-                      {getLabel(item.name)}
+                      {getLabel(item.name, item.url)}
                       <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-50 group-hover:rotate-180 transition-transform">
                         <path d="M6 9l6 6 6-6"/>
                       </svg>
@@ -110,14 +129,14 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
                 );
               }
 
-              if (item.name === 'Series' && seriesList.length > 0) {
+              if (item.url === '/series' && seriesList.length > 0) {
                 return (
                   <div key={item.url} className="relative group">
                     <Link
                       href={item.url}
                       className="text-sm font-sans font-medium text-foreground/80 hover:text-heading no-underline transition-colors duration-200 flex items-center gap-1 py-4"
                     >
-                      {getLabel(item.name)}
+                      {getLabel(item.name, item.url)}
                       <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-50 group-hover:rotate-180 transition-transform">
                         <path d="M6 9l6 6 6-6"/>
                       </svg>
@@ -153,7 +172,7 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
                   {...props}
                   className="text-sm font-sans font-medium text-foreground/80 hover:text-heading no-underline transition-colors duration-200 flex items-center gap-1"
                 >
-                  {getLabel(item.name)}
+                  {getLabel(item.name, item.url)}
                   {isExternal && (
                     <svg
                       width="12"
@@ -197,6 +216,7 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
             </svg>
           </button>
           <Search />
+          <LanguageSwitch />
           <ThemeToggle />
         </div>
       </div>
@@ -225,7 +245,7 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
                     className="flex items-center gap-2 px-3 py-3 text-base font-sans font-medium text-foreground/80 hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
                     onClick={() => setIsMenuOpen(false)}
                   >
-                    {getLabel(item.name)}
+                    {getLabel(item.name, item.url)}
                     {isExternal && (
                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-70">
                         <path d="M7 17l9.2-9.2M17 17V7H7" />
@@ -234,6 +254,9 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
                   </Component>
                 );
               })}
+              <div className="mt-2 pt-3 border-t border-muted/10 px-3">
+                <LanguageSwitch />
+              </div>
             </div>
           </div>
         </>

package/src/components/PostNavigation.tsx

@@ -0,0 +1,55 @@
+import Link from 'next/link';
+import { PostData } from '@/lib/markdown';
+import { t } from '@/lib/i18n';
+
+interface PostNavigationProps {
+  prev: PostData | null;
+  next: PostData | null;
+}
+
+export default function PostNavigation({ prev, next }: PostNavigationProps) {
+  if (!prev && !next) return null;
+
+  return (
+    <nav
+      className="mt-12 pt-12 border-t border-muted/20 grid grid-cols-1 sm:grid-cols-2 gap-3"
+      aria-label={t('post_navigation')}
+    >
+      {prev ? (
+        <Link
+          href={`/posts/${prev.slug}`}
+          className="group flex flex-col gap-1.5 p-4 rounded-xl border border-muted/15 hover:border-accent/30 hover:bg-accent/5 transition-all no-underline"
+        >
+          <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted flex items-center gap-1.5">
+            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+            {t('prev')}
+          </span>
+          <span className="text-sm font-serif font-semibold text-heading group-hover:text-accent transition-colors line-clamp-2 leading-snug">
+            {prev.title}
+          </span>
+          <span className="text-xs font-mono text-muted/60">{prev.date}</span>
+        </Link>
+      ) : <div />}
+
+      {next ? (
+        <Link
+          href={`/posts/${next.slug}`}
+          className="group flex flex-col gap-1.5 p-4 rounded-xl border border-muted/15 hover:border-accent/30 hover:bg-accent/5 transition-all no-underline sm:items-end sm:text-right"
+        >
+          <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted flex items-center gap-1.5">
+            {t('next')}
+            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+            </svg>
+          </span>
+          <span className="text-sm font-serif font-semibold text-heading group-hover:text-accent transition-colors line-clamp-2 leading-snug">
+            {next.title}
+          </span>
+          <span className="text-xs font-mono text-muted/60">{next.date}</span>
+        </Link>
+      ) : <div />}
+    </nav>
+  );
+}