@jant/core 0.6.16 → 0.7.0

package/src/ui/layouts/BaseLayout.tsx

@@ -11,8 +11,10 @@
 import type { FC, PropsWithChildren } from "hono/jsx";
 import type { Context } from "hono";
 import { raw } from "hono/utils/html";
+import { escapeHtml } from "../../lib/html.js";
 import { msg } from "@lingui/core/macro";
 import {
+  getPreconnectHints,
   getPublicAssetBasePath,
   toAssetPath,
   toPublicAssetPath,
@@ -21,8 +23,12 @@ import { getJantIconHref } from "../../lib/jant-branding.js";
 import { getPublicUrlForProvider } from "../../lib/image.js";
 import { getThemeBrowserColors, resolveBuiltinTheme } from "../../lib/theme.js";
 import { toAbsoluteAssetUrl, toPublicPath } from "../../lib/url.js";
+import type { LanguageAlternate } from "../../lib/view-language.js";
+import { toLanguagePrefix } from "../../i18n/locales.js";
 import {
   CLIENT_AUTH_JS_FILE,
+  CLIENT_AUTHOR_CSS_FILE,
+  CLIENT_COMPOSE_PRELOAD,
   CLIENT_CJK_CSS_FILE,
   CLIENT_CJK_JP_CSS_FILE,
   CLIENT_CJK_KR_CSS_FILE,
@@ -30,10 +36,13 @@ import {
   CLIENT_CSS_FILE,
   CLIENT_JS_FILE,
   CORE_VERSION,
-  IS_VITE_DEV,
 } from "../../lib/version.js";
+import { IS_VITE_DEV } from "../../lib/build-env.js";
 import { I18nProvider } from "../../i18n/index.js";
-import { resolveCjkFontProfile } from "../font-themes.js";
+import {
+  getCjkFontCssVariables,
+  resolveCjkFontProfile,
+} from "../font-themes.js";
 import { resetIconCollector } from "../shared/icon-collector.js";
 import { Icon } from "../shared/Icon.js";
 import { IconSprite } from "../shared/IconSprite.js";
@@ -43,6 +52,17 @@ export interface ToastProps {
   type?: "success" | "error";
 }
 
+/** One `<link rel="alternate" type="application/atom+xml">` autodiscovery target. */
+export interface PageFeedLink {
+  /** Public path (or absolute URL) of the feed. */
+  href: string;
+  /**
+   * Label feed readers show for this feed, e.g. a collection's title. Omitted
+   * when blank, so the reader falls back to the feed document's own title.
+   */
+  title?: string;
+}
+
 export interface BaseLayoutProps {
   title: string;
   description?: string;
@@ -81,7 +101,32 @@ export interface BaseLayoutProps {
    * thread at both the reply URL and the thread-root URL).
    */
   canonicalHref?: string;
-  noindex?: boolean;
+  /**
+   * Absolute URLs of this page in the site's other languages, rendered as
+   * `<link rel="alternate" hreflang>`. Set on pages that exist once per
+   * language (list surfaces) or that have translations (posts).
+   */
+  alternateLanguages?: LanguageAlternate[];
+  /**
+   * The feed this page itself publishes — a collection's feed on a collection
+   * page, the filtered archive feed on `/archive`. Rendered ahead of the
+   * site-wide feed links, since a reader subscribing from a page means the
+   * page they are on.
+   */
+  pageFeed?: PageFeedLink;
+  /**
+   * Crawler policy for this page, overriding the site-wide setting.
+   *
+   * `true` is the blunt form for utility pages that should leave no trace:
+   * `noindex, nofollow`. `"follow"` keeps the URL out of the index while
+   * letting a crawler walk its links — for a page that is one URL out of a
+   * combinatorial family (a filtered archive) but whose links lead to the
+   * real pages.
+   *
+   * A site-wide noindex always wins: a page may be stricter than the site
+   * setting, never looser.
+   */
+  noindex?: boolean | "follow";
   isAuthenticated?: boolean;
   clientBundle?: "public" | "full";
 }
@@ -105,6 +150,8 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   articlePublishedTime,
   articleModifiedTime,
   canonicalHref,
+  alternateLanguages,
+  pageFeed,
   noindex,
   isAuthenticated = false,
   clientBundle,
@@ -130,8 +177,17 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
     getJantIconHref("socialImage", appConfig?.sitePathPrefix || "");
   const resolvedFaviconVersion =
     faviconVersion ?? (appConfig?.faviconVersion || undefined);
-  const resolvedNoindex = noindex ?? appConfig?.noindex;
+  // A site-wide noindex is the strictest statement available, so it wins
+  // outright — a per-page policy can only narrow further, never relax.
+  const resolvedNoindex = appConfig?.noindex ? true : (noindex ?? false);
   const sitePathPrefix = appConfig?.sitePathPrefix || "";
+  // Where "here" is for links the client builds. The server has `toViewPath`
+  // for this; without the same base in the DOM, a client-rendered link to a
+  // per-language surface silently drops the reader into the primary view.
+  const viewLang = c?.get("viewLang");
+  const viewBasePath = viewLang
+    ? `${sitePathPrefix}/${toLanguagePrefix(viewLang)}`
+    : sitePathPrefix;
   const assetBasePath = IS_VITE_DEV
     ? "/"
     : appConfig?.assetBasePath || getPublicAssetBasePath(sitePathPrefix);
@@ -145,6 +201,13 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
       appConfig?.s3PublicUrl,
       appConfig?.localPublicUrl,
     ) ?? "";
+  // Empty unless assets or media live on their own host; the two collapse to
+  // one set of hints when they share a host.
+  const preconnectHints = getPreconnectHints({
+    assetBasePath,
+    mediaBaseUrl: mediaBase,
+    siteUrl: appConfig?.siteUrl,
+  });
   const currentUrl = c ? c.get("publicRequestUrl") : undefined;
   const rawPath = c?.req?.path ?? "/";
   const manifestStartPath = sitePathPrefix
@@ -177,11 +240,22 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   const browserThemeColors = getThemeBrowserColors(activeTheme);
   const resolvedClientBundle =
     clientBundle ?? (isAuthenticated ? "full" : "public");
-  const cjkSerifFont = appConfig?.cjkSerifFont ?? "off";
-  const cjkFontProfile = resolveCjkFontProfile(
-    appConfig?.siteLanguage ?? resolvedLang,
-    cjkSerifFont,
-  );
+  // Derived from the language of *this page*, not the site's: on a post page
+  // that is the post's own language, on a language-filtered list it is the view
+  // language, and otherwise it falls back to the site language. Simplified,
+  // Traditional, Japanese and Korean render the same code points with different
+  // glyphs, so a page in one must not inherit another's font stack.
+  const cjkFontProfile = resolveCjkFontProfile(resolvedLang);
+  const cjkFontDeclarations = Object.entries(
+    getCjkFontCssVariables(resolvedLang),
+  )
+    .map(([name, value]) => `  ${name}: ${value};`)
+    .join("\n");
+  // `:root:root` matches the specificity `buildThemeStyle` uses, so ordering
+  // alone decides the winner.
+  const cjkFontStyle = cjkFontDeclarations
+    ? `:root:root {\n${cjkFontDeclarations}\n}`
+    : "";
   const cjkStylesheetPath =
     cjkFontProfile === "zh-Hans"
       ? IS_VITE_DEV
@@ -200,6 +274,16 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
               ? assetPath("/src/style-cjk-kr.css")
               : toPublicAssetPath(CLIENT_CJK_KR_CSS_FILE, assetBasePath)
             : null;
+  // The composer, the editor chrome, the settings pages and the draft preview
+  // bar are the bulk of the hand-written component CSS, and none of it renders
+  // for a signed-out visitor. Linking it only here keeps it off the critical
+  // path of every public page.
+  const authorStylesheetPath =
+    resolvedClientBundle === "full"
+      ? IS_VITE_DEV
+        ? assetPath("/src/style-author.css")
+        : toPublicAssetPath(CLIENT_AUTHOR_CSS_FILE, assetBasePath)
+      : null;
   const clientScriptPath = IS_VITE_DEV
     ? resolvedClientBundle === "full"
       ? assetPath("/src/client-auth.ts")
@@ -211,6 +295,15 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
         resolvedClientBundle === "full" ? CLIENT_AUTH_JS_FILE : CLIENT_JS_FILE,
         assetBasePath,
       );
+  // The composer loads on first use; fetching its files now means the first
+  // open costs no round trip. Dev serves modules straight from source, so
+  // there is nothing to preload there.
+  const composePreloadPaths =
+    !IS_VITE_DEV && resolvedClientBundle === "full"
+      ? CLIENT_COMPOSE_PRELOAD.map((file) =>
+          toPublicAssetPath(file, assetBasePath),
+        )
+      : [];
   const faviconAssetVersion = resolvedFaviconVersion || CORE_VERSION;
   const resolvedFaviconHref =
     faviconHref ??
@@ -290,6 +383,8 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
     appConfig?.mainRssFeed === "latest"
       ? { href: featuredFeedHref, title: featuredFeedTitle }
       : { href: latestFeedHref, title: latestFeedTitle };
+  const pageFeedHref = feedsEnabled ? pageFeed?.href.trim() || null : null;
+  const pageFeedTitle = pageFeed?.title?.trim() || undefined;
 
   return (
     <>
@@ -299,6 +394,8 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
         data-theme={appConfig?.themeId}
         data-theme-mode={themeMode}
         data-site-path-prefix={sitePathPrefix}
+        data-view-base-path={viewBasePath}
+        data-view-lang={viewLang ?? undefined}
         data-asset-base-path={assetBasePath}
         data-media-base={mediaBase}
       >
@@ -308,6 +405,13 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
             name="viewport"
             content="width=device-width, initial-scale=1.0"
           />
+          {preconnectHints.map((hint) => (
+            <link
+              rel="preconnect"
+              href={hint.href}
+              {...(hint.crossorigin ? { crossorigin: "anonymous" } : {})}
+            />
+          ))}
           {themeMode === "dark" ? (
             <meta name="theme-color" content={browserThemeColors.dark} />
           ) : themeMode === "light" ? (
@@ -381,7 +485,14 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
             <meta name="twitter:image:alt" content={socialImageAltText} />
           )}
           {resolvedNoindex && (
-            <meta name="robots" content="noindex, nofollow" />
+            <meta
+              name="robots"
+              content={
+                resolvedNoindex === "follow"
+                  ? "noindex, follow"
+                  : "noindex, nofollow"
+              }
+            />
           )}
           {!resolvedNoindex && jsonLd != null && (
             <script
@@ -397,6 +508,21 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
             />
           )}
           {canonicalHref && <link rel="canonical" href={canonicalHref} />}
+          {/* Emitted as raw HTML on purpose: hono/jsx deduplicates `<link>`
+              elements by `href` alone, which silently drops the self-referential
+              alternate (it shares the canonical link's URL) and any `x-default`
+              (it shares the primary language's). Both are required for an
+              hreflang set to be honoured. Values are escaped here. */}
+          {alternateLanguages && alternateLanguages.length > 0
+            ? raw(
+                alternateLanguages
+                  .map(
+                    (alternate) =>
+                      `<link rel="alternate" hreflang="${escapeHtml(alternate.hreflang)}" href="${escapeHtml(alternate.href)}"/>`,
+                  )
+                  .join(""),
+              )
+            : null}
           <link rel="icon" href={resolvedFaviconHref} sizes="16x16 32x32" />
           <link rel="apple-touch-icon" href={resolvedAppleTouchHref} />
           <link
@@ -408,6 +534,14 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
               sitePathPrefix,
             )}
           />
+          {pageFeedHref && (
+            <link
+              rel="alternate"
+              type="application/atom+xml"
+              title={pageFeedTitle}
+              href={pageFeedHref}
+            />
+          )}
           {mainFeedHref && (
             <link
               rel="alternate"
@@ -438,6 +572,9 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
           {cjkStylesheetPath && (
             <link rel="stylesheet" href={cjkStylesheetPath} />
           )}
+          {authorStylesheetPath && (
+            <link rel="stylesheet" href={authorStylesheetPath} />
+          )}
           {/* Critical inline style: prevent mobile nav jitter by applying
               responsive header layout before external CSS/JS loads */}
           <style
@@ -445,6 +582,11 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
               __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}}`,
             }}
           />
+          {/* Emitted before the theme style so a font theme that names its own
+              CJK stack still wins. */}
+          {cjkFontStyle && (
+            <style dangerouslySetInnerHTML={{ __html: cjkFontStyle }} />
+          )}
           {themeStyle && (
             <style dangerouslySetInnerHTML={{ __html: themeStyle }} />
           )}
@@ -453,6 +595,9 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
           )}
           {customHeadHtml && raw(customHeadHtml)}
           <script type="module" src={clientScriptPath} />
+          {composePreloadPaths.map((href) => (
+            <link rel="modulepreload" href={href} />
+          ))}
         </head>
         <body
           class="bg-background text-foreground antialiased"

package/src/ui/layouts/SiteLayout.tsx

@@ -8,7 +8,11 @@
 import { msg } from "@lingui/core/macro";
 import type { FC, PropsWithChildren } from "hono/jsx";
 import { useLingui } from "../../i18n/context.js";
-import type { NavItemView, SiteLayoutProps } from "../../types.js";
+import type {
+  LanguageSwitcherOption,
+  NavItemView,
+  SiteLayoutProps,
+} from "../../types.js";
 import { toPublicPath } from "../../lib/url.js";
 import { ComposeDialog } from "../compose/ComposeDialog.js";
 import { ComposePrompt } from "../compose/ComposePrompt.js";
@@ -117,8 +121,17 @@ export interface SiteHeaderProps {
   links: NavItemView[];
   currentPath: string;
   sitePathPrefix?: string;
-  siteAvatarUrl?: string;
+  /**
+   * Public base for language-scoped links — the logo, search, and home
+   * detection. Equals `sitePathPrefix` outside a language view, and carries
+   * the language prefix inside one (`/blog/ja`), so a page in the Japanese
+   * view leads home to `/ja` rather than to the primary language.
+   */
+  basePath?: string;
+  siteAvatarThumbUrl?: string;
   showHeaderAvatar?: boolean;
+  /** Languages this site publishes in. Empty on a single-language site. */
+  languageSwitcher?: LanguageSwitcherOption[];
 }
 
 function linkCollapseTier(idx: number): string {
@@ -148,10 +161,13 @@ export const SiteHeader: FC<SiteHeaderProps> = ({
   links,
   currentPath,
   sitePathPrefix = "",
-  siteAvatarUrl,
+  basePath = sitePathPrefix,
+  siteAvatarThumbUrl,
   showHeaderAvatar,
+  languageSwitcher = [],
 }) => {
   const { i18n } = useLingui();
+  const homeHref = basePath || "/";
   const linksWithLabels = links.map((link) => ({
     ...link,
     displayLabel: getNavItemDisplayLabel(link, i18n, sitePathPrefix),
@@ -164,7 +180,7 @@ export const SiteHeader: FC<SiteHeaderProps> = ({
       comment: "@context: Search icon link in browse nav",
     }),
   );
-  const searchHref = toPublicPath("/search", sitePathPrefix);
+  const searchHref = toPublicPath("/search", basePath);
 
   const menuLabel = i18n._(
     msg({
@@ -180,6 +196,32 @@ export const SiteHeader: FC<SiteHeaderProps> = ({
   );
   const moreLabel = i18n._(NAV_MORE_LABEL);
 
+  // The switcher is a "take me to this language's site" control, so it names
+  // each language in that language — a reader looking for their own language
+  // should not have to read the current one to find it.
+  const languageLabel = i18n._(
+    msg({
+      message: "Language",
+      comment: "@context: Accessible label for the site language switcher",
+    }),
+  );
+  // Which language the reader is in, and whether that is worth saying out
+  // loud: the root is the site's default, everything else is a variant of it.
+  const currentLanguage = languageSwitcher.find((option) => option.isCurrent);
+  const offPrimaryLanguage = Boolean(
+    currentLanguage && !currentLanguage.isPrimary,
+  );
+  // The visible name is written in its own language, so the accessible name
+  // has to carry it too — a control read out as "Language" alone would lose
+  // the one thing it says.
+  const currentLanguageLabel = i18n._(
+    msg({
+      message: "Language: {language}",
+      comment:
+        "@context: Accessible label for the site language switcher when it names the language on screen",
+    }),
+    { language: currentLanguage?.label ?? "" },
+  );
   // Split custom links by placement.
   const headerLinks = linksWithLabels.filter(
     (l) => l.placement === "header" || !l.placement,
@@ -206,9 +248,9 @@ export const SiteHeader: FC<SiteHeaderProps> = ({
     .filter(Boolean)
     .join(" ");
   const isHomePage =
-    currentPath === toPublicPath("/", sitePathPrefix) ||
-    currentPath === toPublicPath("/featured", sitePathPrefix) ||
-    currentPath === toPublicPath("/latest", sitePathPrefix);
+    currentPath === homeHref ||
+    currentPath === toPublicPath("/featured", basePath) ||
+    currentPath === toPublicPath("/latest", basePath);
 
   return (
     <>
@@ -217,9 +259,9 @@ export const SiteHeader: FC<SiteHeaderProps> = ({
           <div
             class={`site-header-top site-header-top-bordered${isHomePage ? " site-header-top-home" : ""}`}
           >
-            <a href={toPublicPath("/", sitePathPrefix)} class="site-logo">
-              {showHeaderAvatar && siteAvatarUrl && (
-                <img src={siteAvatarUrl} class="site-logo-avatar" alt="" />
+            <a href={homeHref} class="site-logo">
+              {showHeaderAvatar && siteAvatarThumbUrl && (
+                <img src={siteAvatarThumbUrl} class="site-logo-avatar" alt="" />
               )}
               {siteName}
             </a>
@@ -357,6 +399,93 @@ export const SiteHeader: FC<SiteHeaderProps> = ({
             </div>
 
             <div class="site-header-right">
+              {languageSwitcher.length > 1 && (
+                <div
+                  class={`site-header-lang${
+                    offPrimaryLanguage ? " site-header-lang-named" : ""
+                  }`}
+                >
+                  <button
+                    type="button"
+                    class="site-header-more-btn site-header-lang-btn"
+                    id="site-nav-lang-trigger"
+                    aria-haspopup="menu"
+                    aria-expanded="false"
+                    aria-label={
+                      offPrimaryLanguage ? currentLanguageLabel : languageLabel
+                    }
+                  >
+                    {/* A globe, never a flag: flags name countries rather
+                        than languages. The primary language is the site as
+                        it comes, so the globe stands alone there; every
+                        other view is a variant of it, and a reader who
+                        landed on one — from a search result, a shared link,
+                        a post written in another language — is told which,
+                        without opening anything. */}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="15"
+                      height="15"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      aria-hidden="true"
+                      class="site-header-lang-globe"
+                    >
+                      <circle cx="12" cy="12" r="10" />
+                      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+                      <path d="M2 12h20" />
+                    </svg>
+                    {offPrimaryLanguage && (
+                      <span
+                        class="site-header-lang-name"
+                        lang={currentLanguage?.lang}
+                      >
+                        {currentLanguage?.label}
+                      </span>
+                    )}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      aria-hidden="true"
+                    >
+                      <path d="m6 9 6 6 6-6" />
+                    </svg>
+                  </button>
+                  <div
+                    id="site-nav-lang-popover"
+                    class="site-header-more-popover site-header-lang-popover"
+                    data-popover
+                    data-align="end"
+                    aria-hidden="true"
+                  >
+                    {languageSwitcher.map((option) => (
+                      <a
+                        key={option.lang}
+                        href={option.href}
+                        hreflang={option.lang}
+                        lang={option.lang}
+                        class={`site-header-more-link ${option.isCurrent ? "site-header-more-link-active" : ""}`}
+                        {...(option.isCurrent
+                          ? { "aria-current": "true" }
+                          : {})}
+                      >
+                        {option.label}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              )}
               <button
                 type="button"
                 class="site-header-hamburger"
@@ -401,13 +530,10 @@ export const SiteHeader: FC<SiteHeaderProps> = ({
         inert
       >
         <div class="site-nav-drawer-header">
-          <a
-            href={toPublicPath("/", sitePathPrefix)}
-            class="site-nav-drawer-brand"
-          >
-            {showHeaderAvatar && siteAvatarUrl && (
+          <a href={homeHref} class="site-nav-drawer-brand">
+            {showHeaderAvatar && siteAvatarThumbUrl && (
               <img
-                src={siteAvatarUrl}
+                src={siteAvatarThumbUrl}
                 class="site-nav-drawer-brand-avatar"
                 alt=""
               />
@@ -470,6 +596,24 @@ export const SiteHeader: FC<SiteHeaderProps> = ({
               ))}
             </>
           )}
+          {languageSwitcher.length > 1 && (
+            <>
+              <div class="site-nav-drawer-divider" />
+              <span class="site-nav-drawer-section-label">{languageLabel}</span>
+              {languageSwitcher.map((option) => (
+                <a
+                  key={option.lang}
+                  href={option.href}
+                  hreflang={option.lang}
+                  lang={option.lang}
+                  class={`site-nav-drawer-link site-nav-drawer-link-secondary ${option.isCurrent ? "site-nav-drawer-link-active" : ""}`}
+                  {...(option.isCurrent ? { "aria-current": "true" } : {})}
+                >
+                  {option.label}
+                </a>
+              ))}
+            </>
+          )}
         </nav>
       </div>
     </>
@@ -481,9 +625,10 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
   links,
   currentPath,
   sitePathPrefix = "",
+  basePath = sitePathPrefix,
   isAuthenticated,
   collections,
-  siteAvatarUrl,
+  siteAvatarThumbUrl,
   showHeaderAvatar,
   siteDescriptionHtml,
   siteFooterHtml,
@@ -495,6 +640,9 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
   composeOpenShortcutDiscovered = false,
   slashCommandDiscovered = false,
   composeCollectionId,
+  languageSwitcher,
+  composeLanguages,
+  composeContextLanguage,
   children,
 }) => {
   const { i18n } = useLingui();
@@ -507,35 +655,33 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
   );
 
   const isHomePage =
-    currentPath === toPublicPath("/", sitePathPrefix) ||
-    currentPath === toPublicPath("/featured", sitePathPrefix) ||
-    currentPath === toPublicPath("/latest", sitePathPrefix);
+    currentPath === (basePath || "/") ||
+    currentPath === toPublicPath("/featured", basePath) ||
+    currentPath === toPublicPath("/latest", basePath);
   const showMobileComposeFab = Boolean(
     (isHomePage || composeCollectionId) && isAuthenticated && showComposeDialog,
   );
-  const mobileComposeFabClick = composeCollectionId
-    ? `document.getElementById('compose-dialog')?.querySelector('jant-compose-dialog')?.openNew(${JSON.stringify(
-        { collectionId: composeCollectionId },
-      )})`
-    : "document.getElementById('compose-dialog')?.querySelector('jant-compose-dialog')?.openNew()";
-  const contentClass = [
-    "site-content",
-    isHomePage ? "site-content-home" : "",
-    showMobileComposeFab ? "site-content-mobile-compose-enabled" : "",
-  ]
+  const contentClass = ["site-content", isHomePage ? "site-content-home" : ""]
     .filter(Boolean)
     .join(" ");
+  // The page, not the content, keeps room for the button: the footer and the
+  // Jant credit come after the content, and they must end above it too.
+  const pageClass = showMobileComposeFab
+    ? "site-page site-page-mobile-compose-enabled"
+    : "site-page";
 
   return (
-    <div class="site-page">
+    <div class={pageClass}>
       {showHeader && (
         <SiteHeader
           siteName={siteName}
           links={links}
           currentPath={currentPath}
           sitePathPrefix={sitePathPrefix}
-          siteAvatarUrl={siteAvatarUrl}
+          basePath={basePath}
+          siteAvatarThumbUrl={siteAvatarThumbUrl}
           showHeaderAvatar={showHeaderAvatar}
+          languageSwitcher={languageSwitcher}
         />
       )}
 
@@ -582,7 +728,10 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
           type="button"
           class="site-mobile-compose-fab"
           aria-label={newPostLabel}
-          data-on:click={mobileComposeFabClick}
+          data-compose-open
+          {...(composeCollectionId
+            ? { "data-compose-collection-id": composeCollectionId }
+            : {})}
         >
           <ComposeFeatherIcon class="site-mobile-compose-fab-icon" />
         </button>
@@ -602,12 +751,21 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
 
       <jant-media-lightbox />
       <jant-text-preview />
-      {isAuthenticated && <jant-post-menu />}
+      {isAuthenticated && (
+        <jant-post-menu
+          languages={JSON.stringify(composeLanguages ?? []).replace(
+            /</g,
+            "\\u003c",
+          )}
+        />
+      )}
       {isAuthenticated && showComposeDialog && (
         <ComposeDialog
           collections={collections}
           uploadMaxFileSize={uploadMaxFileSize}
           slashCommandDiscovered={slashCommandDiscovered}
+          languages={composeLanguages}
+          contextLanguage={composeContextLanguage}
         />
       )}
     </div>