@jant/core 0.6.14 → 0.6.16

package/src/ui/font-themes.ts

@@ -10,6 +10,11 @@
  */
 
 import type { MessageDescriptor } from "@lingui/core";
+import {
+  getCjkFontFromLanguageTag,
+  isCjkSerifFont,
+  type CjkSerifFont,
+} from "../i18n/detect.js";
 
 /**
  * A font theme definition with heading + body pairing.
@@ -29,29 +34,35 @@ export interface FontTheme {
   description: MessageDescriptor;
 }
 
-const DEFAULT_CJK_SERIF_FALLBACK =
-  '"Songti SC", STSong, SimSun, "Songti TC", PMingLiU, MingLiU, "Noto Serif SC", "Noto Serif CJK SC", "Noto Serif TC", "Noto Serif CJK TC"';
+const DEFAULT_CJK_SERIF_FALLBACK = '"Jant Language Fallback"';
+const DEFAULT_CJK_SANS_FALLBACK = '"Jant Language Fallback"';
 const HANS_CJK_SERIF_FALLBACK =
   '"Songti SC", STSong, SimSun, "Noto Serif SC", "Noto Serif CJK SC", "Songti TC", PMingLiU, MingLiU, "Noto Serif TC", "Noto Serif CJK TC"';
+const HANS_CJK_SANS_FALLBACK =
+  '"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC"';
 const HANT_CJK_SERIF_FALLBACK =
   '"Songti TC", PMingLiU, MingLiU, "Noto Serif TC", "Noto Serif CJK TC", "Songti SC", STSong, SimSun, "Noto Serif SC", "Noto Serif CJK SC"';
+const HANT_CJK_SANS_FALLBACK =
+  '"PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC"';
 const JP_CJK_SERIF_FALLBACK =
-  '"Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", "MS PMincho", "MS Mincho", serif';
+  '"Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", "MS PMincho", "MS Mincho"';
+const JP_CJK_SANS_FALLBACK =
+  '"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", "Noto Sans CJK JP", Meiryo';
 const KO_CJK_SERIF_FALLBACK =
-  '"Batang", "Noto Serif KR", "Noto Serif CJK KR", "NanumMyeongjo", serif';
+  'Batang, "Noto Serif KR", "Noto Serif CJK KR", NanumMyeongjo';
+const KO_CJK_SANS_FALLBACK =
+  '"Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic"';
 const CJK_SERIF_FALLBACK_VAR = "var(--font-cjk-serif-fallback)";
+const CJK_SANS_FALLBACK_VAR = "var(--font-cjk-sans-fallback)";
 
 /** System sans-serif stack */
-const SANS =
-  'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang TC", "PingFang SC", "Hiragino Sans CNS", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft YaHei", "Noto Sans CJK TC", "Noto Sans CJK SC", sans-serif';
+const SANS = `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, ${CJK_SANS_FALLBACK_VAR}, sans-serif`;
 
 /** Humanist sans stack with self-hosted Latin and system CJK fallback */
-const HUMANIST_SANS =
-  '"Source Sans 3 Variable", "Source Sans 3", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang TC", "PingFang SC", "Hiragino Sans CNS", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft YaHei", "Noto Sans CJK TC", "Noto Sans CJK SC", sans-serif';
+const HUMANIST_SANS = `"Source Sans 3 Variable", "Source Sans 3", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, ${CJK_SANS_FALLBACK_VAR}, sans-serif`;
 
 /** Narrower newsroom sans for headlines and labels */
-const NEWSROOM_SANS =
-  '"News Cycle", "Franklin Gothic Medium", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, "PingFang TC", "PingFang SC", "Hiragino Sans CNS", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft YaHei", "Noto Sans CJK TC", "Noto Sans CJK SC", sans-serif';
+const NEWSROOM_SANS = `"News Cycle", "Franklin Gothic Medium", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, ${CJK_SANS_FALLBACK_VAR}, sans-serif`;
 
 /**
  * Editorial serif stack
@@ -81,8 +92,7 @@ const TUFTE_SERIF = `et-book, Palatino, "Palatino Linotype", "Palatino LT STD",
  *
  * Futura (macOS); Century Gothic (Windows); clean geometric proportions
  */
-const GEOMETRIC_SANS =
-  '"Avenir Next", Avenir, Futura, "Century Gothic", Montserrat, "Noto Sans", "PingFang TC", "PingFang SC", "Hiragino Sans CNS", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft YaHei", "Noto Sans CJK TC", "Noto Sans CJK SC", sans-serif';
+const GEOMETRIC_SANS = `"Avenir Next", Avenir, Futura, "Century Gothic", Montserrat, "Noto Sans", ${CJK_SANS_FALLBACK_VAR}, sans-serif`;
 
 /**
  * Resolve all CSS variables a font theme contributes.
@@ -107,35 +117,73 @@ export function getFontThemeCssVariables(
 }
 
 /**
- * Resolve runtime CJK serif fallbacks for the configured CJK font setting.
+ * Resolve the language font profile for the current content language.
  *
- * @param cjkSerifFont - CJK serif font setting ("off", "zh-Hans", "zh-Hant", "ja", "ko")
- * @returns CSS variable overrides for CJK sites
+ * An adapted content language always wins. The explicit CJK setting is a
+ * fallback for sites whose primary content language does not have a profile.
  *
+ * @param siteLanguage - BCP 47 content language tag
+ * @param cjkFallback - Explicit CJK fallback setting
+ * @returns Resolved CJK font profile, or `undefined` for the default stack
  * @example
- * ```typescript
- * const vars = getCjkSerifCssVariables("zh-Hans");
- * // => { "--font-cjk-serif-fallback": '"Songti SC", ...' }
- * ```
+ * resolveCjkFontProfile("zh-TW", "zh-Hans") // "zh-Hant"
+ */
+export function resolveCjkFontProfile(
+  siteLanguage?: string,
+  cjkFallback?: string,
+): Exclude<CjkSerifFont, "off"> | undefined {
+  const contentProfile = siteLanguage
+    ? getCjkFontFromLanguageTag(siteLanguage)
+    : undefined;
+  if (contentProfile) return contentProfile;
+
+  return isCjkSerifFont(cjkFallback) && cjkFallback !== "off"
+    ? cjkFallback
+    : undefined;
+}
+
+/**
+ * Build serif and sans fallback variables for the resolved language profile.
+ *
+ * @param siteLanguage - BCP 47 content language tag
+ * @param cjkFallback - Explicit CJK fallback setting
+ * @returns CSS variables consumed by every font theme
+ * @example
+ * getCjkFontCssVariables("en", "zh-Hans")
+ * // => { "--font-cjk-serif-fallback": '"Songti SC", ...', ... }
  */
-export function getCjkSerifCssVariables(
-  cjkSerifFont?: string,
+export function getCjkFontCssVariables(
+  siteLanguage?: string,
+  cjkFallback?: string,
 ): Record<string, string> {
-  switch (cjkSerifFont) {
+  switch (resolveCjkFontProfile(siteLanguage, cjkFallback)) {
     case "zh-Hans":
-      return { "--font-cjk-serif-fallback": HANS_CJK_SERIF_FALLBACK };
+      return {
+        "--font-cjk-serif-fallback": HANS_CJK_SERIF_FALLBACK,
+        "--font-cjk-sans-fallback": HANS_CJK_SANS_FALLBACK,
+      };
     case "zh-Hant":
-      return { "--font-cjk-serif-fallback": HANT_CJK_SERIF_FALLBACK };
+      return {
+        "--font-cjk-serif-fallback": HANT_CJK_SERIF_FALLBACK,
+        "--font-cjk-sans-fallback": HANT_CJK_SANS_FALLBACK,
+      };
     case "ja":
-      return { "--font-cjk-serif-fallback": JP_CJK_SERIF_FALLBACK };
+      return {
+        "--font-cjk-serif-fallback": JP_CJK_SERIF_FALLBACK,
+        "--font-cjk-sans-fallback": JP_CJK_SANS_FALLBACK,
+      };
     case "ko":
-      return { "--font-cjk-serif-fallback": KO_CJK_SERIF_FALLBACK };
+      return {
+        "--font-cjk-serif-fallback": KO_CJK_SERIF_FALLBACK,
+        "--font-cjk-sans-fallback": KO_CJK_SANS_FALLBACK,
+      };
     default:
       return {};
   }
 }
 
 export const DEFAULT_FONT_CJK_SERIF_FALLBACK = DEFAULT_CJK_SERIF_FALLBACK;
+export const DEFAULT_FONT_CJK_SANS_FALLBACK = DEFAULT_CJK_SANS_FALLBACK;
 
 export const BUILTIN_FONT_THEMES: FontTheme[] = [
   {

package/src/ui/layouts/BaseLayout.tsx

@@ -33,6 +33,7 @@ import {
   IS_VITE_DEV,
 } from "../../lib/version.js";
 import { I18nProvider } from "../../i18n/index.js";
+import { resolveCjkFontProfile } from "../font-themes.js";
 import { resetIconCollector } from "../shared/icon-collector.js";
 import { Icon } from "../shared/Icon.js";
 import { IconSprite } from "../shared/IconSprite.js";
@@ -177,20 +178,24 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   const resolvedClientBundle =
     clientBundle ?? (isAuthenticated ? "full" : "public");
   const cjkSerifFont = appConfig?.cjkSerifFont ?? "off";
+  const cjkFontProfile = resolveCjkFontProfile(
+    appConfig?.siteLanguage ?? resolvedLang,
+    cjkSerifFont,
+  );
   const cjkStylesheetPath =
-    cjkSerifFont === "zh-Hans"
+    cjkFontProfile === "zh-Hans"
       ? IS_VITE_DEV
         ? assetPath("/src/style-cjk.css")
         : toPublicAssetPath(CLIENT_CJK_CSS_FILE, assetBasePath)
-      : cjkSerifFont === "zh-Hant"
+      : cjkFontProfile === "zh-Hant"
         ? IS_VITE_DEV
           ? assetPath("/src/style-cjk-tc.css")
           : toPublicAssetPath(CLIENT_CJK_TC_CSS_FILE, assetBasePath)
-        : cjkSerifFont === "ja"
+        : cjkFontProfile === "ja"
           ? IS_VITE_DEV
             ? assetPath("/src/style-cjk-jp.css")
             : toPublicAssetPath(CLIENT_CJK_JP_CSS_FILE, assetBasePath)
-          : cjkSerifFont === "ko"
+          : cjkFontProfile === "ko"
             ? IS_VITE_DEV
               ? assetPath("/src/style-cjk-kr.css")
               : toPublicAssetPath(CLIENT_CJK_KR_CSS_FILE, assetBasePath)
@@ -248,11 +253,14 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
     socialImageHeightValue !== undefined &&
     socialImageWidthValue > socialImageHeightValue &&
     socialImageWidthValue >= 300;
-  const mainFeedHref = appConfig ? toPublicPath("/feed", sitePathPrefix) : null;
-  const latestFeedHref = appConfig
+  const feedsEnabled = appConfig?.rssFeedsEnabled === true;
+  const mainFeedHref = feedsEnabled
+    ? toPublicPath("/feed", sitePathPrefix)
+    : null;
+  const latestFeedHref = feedsEnabled
     ? toPublicPath("/latest/feed", sitePathPrefix)
     : null;
-  const featuredFeedHref = appConfig
+  const featuredFeedHref = feedsEnabled
     ? toPublicPath("/featured/feed", sitePathPrefix)
     : null;
   const mainFeedTitle =
@@ -451,7 +459,13 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
           {...(isAuthenticated ? { "data-authenticated": true } : {})}
         >
           {content}
-          <div id="toast-container" class="toast-container" popover="manual">
+          <div
+            id="toast-container"
+            class="toast-container"
+            popover="manual"
+            aria-live="polite"
+            aria-relevant="additions text"
+          >
             {toast && (
               <div
                 class={`toast ${toast.type === "error" ? "toast-error" : "toast-success"}`}

package/src/ui/layouts/__tests__/BaseLayout.test.tsx

@@ -16,15 +16,20 @@ function createContext(
     themeMode?: "auto" | "light" | "dark";
     themeId?: string;
     defaultThemeId?: string;
+    siteLanguage?: string;
+    cjkSerifFont?: string;
+    rssFeedsEnabled?: boolean;
   },
 ) {
   const values = {
     appConfig: {
       mainRssFeed,
+      rssFeedsEnabled: overrides?.rssFeedsEnabled ?? true,
       sitePathPrefix: overrides?.sitePathPrefix ?? "",
       siteUrl: overrides?.siteUrl ?? "https://example.com",
       siteAvatarUrl: overrides?.siteAvatarUrl,
-      siteLanguage: "en",
+      siteLanguage: overrides?.siteLanguage ?? "en",
+      cjkSerifFont: overrides?.cjkSerifFont ?? "off",
       noindex: false,
       customCSS: "",
       themeMode: overrides?.themeMode ?? "auto",
@@ -301,6 +306,20 @@ describe("BaseLayout", () => {
     expect(html).not.toContain('href="/latest/feed"');
   });
 
+  it("omits feed autodiscovery when feed publishing is disabled", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured", { rssFeedsEnabled: false }),
+        children: "Test",
+      }),
+    );
+
+    expect(html).not.toContain('type="application/atom+xml"');
+    expect(html).not.toContain('href="/feed"');
+  });
+
   it("uses the public asset base path from appConfig in production", async () => {
     const { BaseLayout } = await loadBaseLayout();
     const html = renderToString(
@@ -320,6 +339,50 @@ describe("BaseLayout", () => {
     expect(html).toContain('data-asset-base-path="/blog/_assets"');
   });
 
+  it("loads the content language font profile when the CJK fallback is off", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured", {
+          siteLanguage: "zh-Hant",
+          cjkSerifFont: "off",
+        }),
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain("client-cjk-tc.css");
+    expect(html).not.toContain("client-cjk.css");
+  });
+
+  it("uses the manual CJK fallback only for an unadapted content language", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const fallbackHtml = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured", {
+          siteLanguage: "en",
+          cjkSerifFont: "zh-Hans",
+        }),
+        children: "Test",
+      }),
+    );
+    const contentLanguageHtml = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured", {
+          siteLanguage: "zh-Hant",
+          cjkSerifFont: "zh-Hans",
+        }),
+        children: "Test",
+      }),
+    );
+
+    expect(fallbackHtml).toContain("client-cjk.css");
+    expect(contentLanguageHtml).toContain("client-cjk-tc.css");
+  });
+
   it("exposes the active theme id on the root html element", async () => {
     const { BaseLayout } = await loadBaseLayout();
     const html = renderToString(

package/src/ui/pages/ArchivePage.tsx

@@ -62,6 +62,7 @@ function buildFilterUrl(
     );
   }
   if (merged.view && merged.view !== "grid") params.set("view", merged.view);
+  if (merged.sort === "updated") params.set("sort", "updated");
 
   const qs = params.toString();
   return qs
@@ -127,7 +128,7 @@ function getFormatLabelPlural(format: string): string {
 const FORMAT_ICONS: Record<string, string> = {
   note: "notepad-text",
   link: "external-link",
-  quote: "text-quote",
+  quote: "quote",
 };
 
 /** Icon name mapping for media kinds. */
@@ -463,34 +464,118 @@ const ChipMediaSelect: FC<{
 // View Toggle
 // =============================================================================
 
+/**
+ * One option in a toolbar toggle. `label` is used for both the hover tooltip
+ * and the accessible name — an icon-only control has to explain itself to
+ * both audiences, and one string keeps them from drifting apart.
+ */
+const ToggleOption: FC<{
+  href: string;
+  icon: string;
+  label: string;
+  active: boolean;
+}> = ({ href, icon, label, active }) => (
+  <a
+    href={href}
+    class={`archive-view-btn${active ? " archive-view-btn-active" : ""}`}
+    role="radio"
+    aria-checked={active ? "true" : "false"}
+    aria-label={label}
+    title={label}
+  >
+    <Icon name={icon} class="[&>svg]:size-4" />
+  </a>
+);
+
 const ViewToggle: FC<{
   filters: ArchiveFilters;
   sitePathPrefix?: string;
 }> = ({ filters, sitePathPrefix = "" }) => {
+  const { i18n } = useLingui();
   const currentView: ArchiveView = filters.view ?? "grid";
-  const gridUrl = buildFilterUrl(filters, { view: undefined }, sitePathPrefix);
-  const listUrl = buildFilterUrl(filters, { view: "list" }, sitePathPrefix);
 
   return (
-    <div class="archive-view-toggle" role="radiogroup" aria-label="View mode">
-      <a
-        href={gridUrl}
-        class={`archive-view-btn${currentView === "grid" ? " archive-view-btn-active" : ""}`}
-        role="radio"
-        aria-checked={currentView === "grid" ? "true" : "false"}
-        aria-label="Grid view"
-      >
-        <Icon name="layout-grid" class="[&>svg]:size-4" />
-      </a>
-      <a
-        href={listUrl}
-        class={`archive-view-btn${currentView === "list" ? " archive-view-btn-active" : ""}`}
-        role="radio"
-        aria-checked={currentView === "list" ? "true" : "false"}
-        aria-label="List view"
-      >
-        <Icon name="list" class="[&>svg]:size-4" />
-      </a>
+    <div
+      class="archive-view-toggle"
+      role="radiogroup"
+      aria-label={i18n._(
+        msg({
+          message: "View mode",
+          comment: "@context: Archive grid/list toggle group label",
+        }),
+      )}
+    >
+      <ToggleOption
+        href={buildFilterUrl(filters, { view: undefined }, sitePathPrefix)}
+        icon="layout-grid"
+        active={currentView === "grid"}
+        label={i18n._(
+          msg({
+            message: "Show as a grid of tiles",
+            comment: "@context: Archive view option - grid",
+          }),
+        )}
+      />
+      <ToggleOption
+        href={buildFilterUrl(filters, { view: "list" }, sitePathPrefix)}
+        icon="list"
+        active={currentView === "list"}
+        label={i18n._(
+          msg({
+            message: "Show as a list with full posts",
+            comment: "@context: Archive view option - list",
+          }),
+        )}
+      />
+    </div>
+  );
+};
+
+/**
+ * Time-axis toggle. Sits next to the view toggle because it changes how the
+ * page is arranged, not which threads it contains — unlike the filter chips.
+ */
+const SortToggle: FC<{
+  filters: ArchiveFilters;
+  sitePathPrefix?: string;
+}> = ({ filters, sitePathPrefix = "" }) => {
+  const { i18n } = useLingui();
+  const sortsByActivity = filters.sort === "updated";
+
+  return (
+    <div
+      class="archive-view-toggle"
+      role="radiogroup"
+      aria-label={i18n._(
+        msg({
+          message: "Sort order",
+          comment: "@context: Archive sort toggle group label",
+        }),
+      )}
+    >
+      <ToggleOption
+        href={buildFilterUrl(filters, { sort: undefined }, sitePathPrefix)}
+        icon="clock"
+        active={!sortsByActivity}
+        label={i18n._(
+          msg({
+            message: "Sort by when each thread was published",
+            comment: "@context: Archive sort option - newest published first",
+          }),
+        )}
+      />
+      <ToggleOption
+        href={buildFilterUrl(filters, { sort: "updated" }, sitePathPrefix)}
+        icon="history"
+        active={sortsByActivity}
+        label={i18n._(
+          msg({
+            message: "Sort by when each thread was last added to",
+            comment:
+              "@context: Archive sort option - threads that recently gained a post first",
+          }),
+        )}
+      />
     </div>
   );
 };
@@ -948,7 +1033,10 @@ const FilterBar: FC<{
         )}
       </div>
 
-      <ViewToggle filters={filters} sitePathPrefix={sitePathPrefix} />
+      <div class="archive-toolbar-toggles">
+        <SortToggle filters={filters} sitePathPrefix={sitePathPrefix} />
+        <ViewToggle filters={filters} sitePathPrefix={sitePathPrefix} />
+      </div>
     </div>
   );
 };
@@ -1258,6 +1346,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
 }) => {
   const { i18n } = useLingui();
   const currentView: ArchiveView = filters.view ?? "grid";
+  const sortsByActivity = filters.sort === "updated";
   const paginationBaseUrl = buildFilterUrl(filters, {}, sitePathPrefix);
   const totalCountUnit =
     totalCount === 1
@@ -1295,6 +1384,18 @@ export const ArchivePage: FC<ArchivePageProps> = ({
         >
           <span class="archive-page-summary-count">{totalCount}</span>{" "}
           {totalCountUnit}
+          {sortsByActivity && (
+            <>
+              {" · "}
+              {i18n._(
+                msg({
+                  message: "newest changes first",
+                  comment:
+                    "@context: Archive page meta note explaining the active sort order",
+                }),
+              )}
+            </>
+          )}
           {feedHref && (
             <>
               {" "}
@@ -1347,7 +1448,13 @@ export const ArchivePage: FC<ArchivePageProps> = ({
                 <div key={`grid-${group.year}-${group.month}`} class="contents">
                   <ArchiveMonthHeader
                     class={`archive-month-header${groupIndex > 0 ? " archive-month-header-spaced" : ""}`}
-                    label={group.label}
+                    // Not translated, on purpose: `group.label` is built with
+                    // a hardcoded en-US month name, so a translated wrapper
+                    // would only produce "更新于 August 2026". Both halves
+                    // become translatable together, or neither does.
+                    label={
+                      sortsByActivity ? `Updated ${group.label}` : group.label
+                    }
                     count={group.totalCount}
                   />
                   {group.posts.map((post) => (