@jant/core 0.6.13 → 0.6.15

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 =
@@ -434,7 +442,7 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
               responsive header layout before external CSS/JS loads */}
           <style
             dangerouslySetInnerHTML={{
-              __html: `.site-header-search-link,.site-header-hamburger,.site-header-more-responsive-only,.site-header-more-link-responsive,.site-header-more-divider-responsive{display:none!important}@media(max-width:1200px){.site-header-search-form{display:none!important}.site-header-search-link{display:inline-flex!important}}@media(max-width:960px){.site-header-link-collapse-lg{display:none!important}.site-header-more-responsive-only.site-header-more-tier-lg{display:inline-flex!important}.site-header-more-link-show-lg{display:flex!important}.site-header-more-divider-responsive{display:block!important}}@media(max-width:780px){.site-header-link-collapse-md{display:none!important}.site-header-more-responsive-only.site-header-more-tier-md{display:inline-flex!important}.site-header-more-link-show-md{display:flex!important}}@media(max-width:580px){.site-header-link-collapse-sm{display:none!important}.site-header-more-responsive-only.site-header-more-tier-sm{display:inline-flex!important}.site-header-more-link-show-sm{display:flex!important}}@media(max-width:480px){.site-header-nav,.site-header-more{display:none!important}.site-header-search-slot{display:flex!important}.site-header-hamburger{display:flex!important}.site-header-right{margin-left:.35rem}}`,
+              __html: `.site-header-search-link,.site-header-hamburger,.site-header-more-responsive-only,.site-header-more-link-responsive,.site-header-more-divider-responsive{display:none!important}@media(max-width:1200px){.site-header-search-form{display:none!important}.site-header-search-link{display:inline-flex!important}}@media(max-width:960px){.site-header-link-collapse-lg{display:none!important}.site-header-more-responsive-only.site-header-more-tier-lg{display:inline-flex!important}.site-header-more-link-show-lg{display:flex!important}.site-header-more-divider-show-lg{display:block!important}}@media(max-width:780px){.site-header-link-collapse-md{display:none!important}.site-header-more-responsive-only.site-header-more-tier-md{display:inline-flex!important}.site-header-more-link-show-md{display:flex!important}.site-header-more-divider-show-md{display:block!important}}@media(max-width:580px){.site-header-link-collapse-sm{display:none!important}.site-header-more-responsive-only.site-header-more-tier-sm{display:inline-flex!important}.site-header-more-link-show-sm{display:flex!important}.site-header-more-divider-show-sm{display:block!important}}@media(max-width:480px){.site-header-nav,.site-header-more{display:none!important}.site-header-search-slot{display:flex!important}.site-header-hamburger{display:flex!important}.site-header-right{margin-left:.35rem}}`,
             }}
           />
           {themeStyle && (
@@ -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/SiteLayout.tsx

@@ -134,6 +134,15 @@ function moreLinkRevealTier(idx: number): string {
   return "site-header-more-link-show-lg";
 }
 
+function getResponsiveOverflowTier(
+  headerLinkCount: number,
+): "sm" | "md" | "lg" | null {
+  if (headerLinkCount >= 5) return "lg";
+  if (headerLinkCount === 4) return "md";
+  if (headerLinkCount === 3) return "sm";
+  return null;
+}
+
 export const SiteHeader: FC<SiteHeaderProps> = ({
   siteName,
   links,
@@ -176,22 +185,17 @@ export const SiteHeader: FC<SiteHeaderProps> = ({
     (l) => l.placement === "header" || !l.placement,
   );
   const moreLinks = linksWithLabels.filter((l) => l.placement === "more");
-  const hasResponsiveOverflow = headerLinks.length > 2;
+  const responsiveOverflowTier = getResponsiveOverflowTier(headerLinks.length);
+  const hasResponsiveOverflow = responsiveOverflowTier !== null;
   const hasSupplementalMoreLinks = moreLinks.length > 0;
   const showMoreMenu = hasResponsiveOverflow || hasSupplementalMoreLinks;
 
   // Decide the widest breakpoint at which the "More" button must appear
   // when there are no supplemental links.
-  let responsiveTierClass = "";
-  if (hasResponsiveOverflow && !hasSupplementalMoreLinks) {
-    if (headerLinks.length >= 5) {
-      responsiveTierClass = "site-header-more-tier-lg";
-    } else if (headerLinks.length === 4) {
-      responsiveTierClass = "site-header-more-tier-md";
-    } else {
-      responsiveTierClass = "site-header-more-tier-sm";
-    }
-  }
+  const responsiveTierClass =
+    responsiveOverflowTier && !hasSupplementalMoreLinks
+      ? `site-header-more-tier-${responsiveOverflowTier}`
+      : "";
   const moreMenuClass = [
     "site-header-more",
     hasResponsiveOverflow && !hasSupplementalMoreLinks
@@ -297,8 +301,10 @@ export const SiteHeader: FC<SiteHeaderProps> = ({
                         </a>
                       );
                     })}
-                    {hasResponsiveOverflow && hasSupplementalMoreLinks && (
-                      <div class="site-header-more-divider site-header-more-divider-responsive" />
+                    {responsiveOverflowTier && hasSupplementalMoreLinks && (
+                      <div
+                        class={`site-header-more-divider site-header-more-divider-responsive site-header-more-divider-show-${responsiveOverflowTier}`}
+                      />
                     )}
                     {moreLinks.map((link) => (
                       <a

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/layouts/__tests__/SiteLayout.test.tsx

@@ -3,8 +3,24 @@ import { renderToString } from "hono/jsx/dom/server";
 import { describe, expect, it } from "vitest";
 import { I18nProvider } from "../../../i18n/context.js";
 import { createI18n } from "../../../i18n/i18n.js";
+import type { NavItemView } from "../../../types.js";
 import { SiteLayout } from "../SiteLayout.js";
 
+function createNavItem(
+  index: number,
+  placement: NavItemView["placement"],
+): NavItemView {
+  return {
+    id: `nav_${index}`,
+    type: "link",
+    label: `Link ${index}`,
+    url: `/link-${index}`,
+    placement,
+    isActive: false,
+    isExternal: false,
+  };
+}
+
 function renderSiteLayout(
   props: Partial<Parameters<typeof SiteLayout>[0]> = {},
 ): string {
@@ -30,6 +46,38 @@ function renderSiteLayout(
 }
 
 describe("SiteLayout", () => {
+  it.each([
+    [3, "sm"],
+    [4, "md"],
+    [5, "lg"],
+  ] as const)(
+    "reveals the More divider at the first breakpoint that overflows %i header links",
+    (headerLinkCount, tier) => {
+      const headerLinks = Array.from({ length: headerLinkCount }, (_, index) =>
+        createNavItem(index, "header"),
+      );
+      const html = renderSiteLayout({
+        links: [...headerLinks, createNavItem(headerLinkCount, "more")],
+      });
+
+      expect(html).toContain(
+        `class="site-header-more-divider site-header-more-divider-responsive site-header-more-divider-show-${tier}"`,
+      );
+    },
+  );
+
+  it("omits the More divider when no header link can overflow", () => {
+    const html = renderSiteLayout({
+      links: [
+        createNavItem(0, "header"),
+        createNavItem(1, "header"),
+        createNavItem(2, "more"),
+      ],
+    });
+
+    expect(html).not.toContain("site-header-more-divider");
+  });
+
   it("renders the mobile compose FAB for authenticated timeline pages", () => {
     const html = renderSiteLayout({
       currentPath: "/latest",

package/src/ui/pages/CollectionPage.tsx

@@ -19,6 +19,7 @@ import { toPublicPath } from "../../lib/url.js";
 import { TimelineFeed } from "../feed/TimelineFeed.js";
 import { getCollectionMutationLabels } from "../shared/collection-management-labels.js";
 import { getIconSvg } from "../../lib/icons.js";
+import { NAVIGATION_SETTINGS_PATH } from "../../lib/settings-paths.js";
 
 const escapeJson = (data: unknown) =>
   JSON.stringify(data).replace(/</g, "\\u003c");
@@ -35,7 +36,9 @@ export const CollectionPage: FC<CollectionPageProps> = ({
   defaultSort,
   showRatingSort,
   isAuthenticated,
+  isInNavigation = false,
   sitePathPrefix = "",
+  feedHref,
 }) => {
   const primaryCollection = collections[0];
   if (!primaryCollection) return null;
@@ -58,6 +61,10 @@ export const CollectionPage: FC<CollectionPageProps> = ({
     )}`,
     sitePathPrefix,
   );
+  const navigationSettingsUrl = toPublicPath(
+    NAVIGATION_SETTINGS_PATH,
+    sitePathPrefix,
+  );
   const sortUiId = isAggregate
     ? collections.map((collection) => collection.slug).join("-")
     : primaryCollection.id;
@@ -226,7 +233,9 @@ export const CollectionPage: FC<CollectionPageProps> = ({
             <div
               class="collection-page-description prose"
               dangerouslySetInnerHTML={{
-                __html: renderMarkdown(primaryCollection.description),
+                __html: renderMarkdown(primaryCollection.description, {
+                  namespace: primaryCollection.id,
+                }),
               }}
             />
           ) : null}
@@ -298,25 +307,30 @@ export const CollectionPage: FC<CollectionPageProps> = ({
                         "@context: Plural thread count label on collection detail page",
                     }),
                   )}
-              {pageLabel ? <span> / {pageLabel}</span> : null}{" "}
-              <a
-                href={toPublicPath(`${pagePath}/feed`, sitePathPrefix)}
-                class="feed-link"
-                title={i18n._(
-                  msg({
-                    message: "RSS feed",
-                    comment:
-                      "@context: Tooltip for the RSS feed link on a collection page",
-                  }),
-                )}
-                rel="noopener noreferrer"
-              >
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: getIconSvg("rss") ?? "",
-                  }}
-                />
-              </a>
+              {pageLabel ? <span> / {pageLabel}</span> : null}
+              {feedHref ? (
+                <>
+                  {" "}
+                  <a
+                    href={toPublicPath(feedHref, sitePathPrefix)}
+                    class="feed-link"
+                    title={i18n._(
+                      msg({
+                        message: "RSS feed",
+                        comment:
+                          "@context: Tooltip for the RSS feed link on a collection page",
+                      }),
+                    )}
+                    rel="noopener noreferrer"
+                  >
+                    <span
+                      dangerouslySetInnerHTML={{
+                        __html: getIconSvg("rss") ?? "",
+                      }}
+                    />
+                  </a>
+                </>
+              ) : null}
             </p>
             <span class="collection-page-meta-divider" aria-hidden="true">
               &middot;
@@ -450,6 +464,7 @@ export const CollectionPage: FC<CollectionPageProps> = ({
                 data-collection-page-actions
                 data-collection-id={primaryCollection.id}
                 data-collection-page-labels={escapeJson(mutationLabels)}
+                data-collection-in-navigation={String(isInNavigation)}
                 data-collection-page-redirect-url={toPublicPath(
                   getCollectionsDirectoryPath(),
                   sitePathPrefix,
@@ -510,6 +525,70 @@ export const CollectionPage: FC<CollectionPageProps> = ({
                       {mutationLabels.edit}
                     </span>
                   </a>
+                  <button
+                    type="button"
+                    class="collections-page-menu-item"
+                    role="menuitem"
+                    data-collection-page-action="add-to-navigation"
+                    hidden={isInNavigation}
+                  >
+                    <span
+                      class="collections-page-menu-item-icon"
+                      aria-hidden="true"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="M12 5v14" />
+                        <path d="M5 12h14" />
+                      </svg>
+                    </span>
+                    <span class="collections-page-menu-item-label">
+                      {mutationLabels.addToNavigation}
+                    </span>
+                  </button>
+                  <a
+                    href={navigationSettingsUrl}
+                    class="collections-page-menu-item"
+                    role="menuitem"
+                    data-collection-page-edit-navigation
+                    hidden={!isInNavigation}
+                  >
+                    <span
+                      class="collections-page-menu-item-icon"
+                      aria-hidden="true"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="M8 6h13" />
+                        <path d="M8 12h13" />
+                        <path d="M8 18h13" />
+                        <path d="M3 6h.01" />
+                        <path d="M3 12h.01" />
+                        <path d="M3 18h.01" />
+                      </svg>
+                    </span>
+                    <span class="collections-page-menu-item-label">
+                      {mutationLabels.editNavigation}
+                    </span>
+                  </a>
                   <button
                     type="button"
                     class="collections-page-menu-item collections-page-menu-item-danger"
@@ -556,7 +635,7 @@ export const CollectionPage: FC<CollectionPageProps> = ({
               ? i18n._(
                   msg({
                     message:
-                      "Nothing here yet. Add posts to one of these collections to fill this view.",
+                      "Nothing here yet. Add threads to one of these collections to fill this view.",
                     comment:
                       "@context: Empty state message on an aggregate collection page",
                   }),
@@ -564,7 +643,7 @@ export const CollectionPage: FC<CollectionPageProps> = ({
               : i18n._(
                   msg({
                     message:
-                      "This collection is empty. Add posts from the editor.",
+                      "This collection is empty. Add threads from the editor.",
                     comment: "@context: Empty state message",
                   }),
                 )}

package/src/ui/pages/CollectionsPage.tsx

@@ -14,13 +14,14 @@ import { CollectionsManager } from "../shared/CollectionsManager.js";
 export const CollectionsPage: FC<CollectionsPageProps> = ({
   items,
   isAuthenticated,
+  navigationCollectionIds = [],
   sitePathPrefix = "",
   siteOrigin = "",
 }) => {
   const { i18n } = useLingui();
   const emptyMessage = i18n._(
     msg({
-      message: "No collections yet. Start one to organize posts by topic.",
+      message: "No collections yet. Start one to organize threads by topic.",
       comment: "@context: Empty state message on collections page",
     }),
   );
@@ -30,6 +31,7 @@ export const CollectionsPage: FC<CollectionsPageProps> = ({
       <div class="py-6" data-page="collections">
         <CollectionsManager
           items={items}
+          navigationCollectionIds={navigationCollectionIds}
           sitePathPrefix={sitePathPrefix}
           siteOrigin={siteOrigin}
         />