@jant/core 0.6.16 → 0.7.0

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

@@ -5,6 +5,10 @@ vi.stubGlobal("__JANT_DEV__", false);
 vi.stubGlobal("__JANT_VERSION__", "test-version");
 vi.stubGlobal("__CLIENT_JS_FILE__", "/_assets/client.js");
 vi.stubGlobal("__CLIENT_AUTH_JS_FILE__", "/_assets/client-auth.js");
+vi.stubGlobal("__CLIENT_COMPOSE_PRELOAD__", [
+  "/_assets/client-compose.js",
+  "/_assets/chunks/create-editor.js",
+]);
 
 function createContext(
   mainRssFeed: "featured" | "latest",
@@ -17,8 +21,11 @@ function createContext(
     themeId?: string;
     defaultThemeId?: string;
     siteLanguage?: string;
-    cjkSerifFont?: string;
+    /** Language of the page being rendered (post language or view language). */
+    lang?: string;
     rssFeedsEnabled?: boolean;
+    storageDriver?: string;
+    r2PublicUrl?: string;
   },
 ) {
   const values = {
@@ -29,15 +36,16 @@ function createContext(
       siteUrl: overrides?.siteUrl ?? "https://example.com",
       siteAvatarUrl: overrides?.siteAvatarUrl,
       siteLanguage: overrides?.siteLanguage ?? "en",
-      cjkSerifFont: overrides?.cjkSerifFont ?? "off",
       noindex: false,
       customCSS: "",
       themeMode: overrides?.themeMode ?? "auto",
       themeId: overrides?.themeId ?? overrides?.defaultThemeId ?? "linen",
       defaultThemeId: overrides?.defaultThemeId ?? "linen",
       assetBasePath: overrides?.assetBasePath ?? "/_assets",
+      storageDriver: overrides?.storageDriver ?? "r2",
+      r2PublicUrl: overrides?.r2PublicUrl,
     },
-    lang: "en",
+    lang: overrides?.lang ?? overrides?.siteLanguage ?? "en",
     i18n: {
       _: (descriptor: { message?: string }) => descriptor.message ?? "",
     },
@@ -320,6 +328,72 @@ describe("BaseLayout", () => {
     expect(html).not.toContain('href="/feed"');
   });
 
+  it("preloads the composer's files on signed-in pages, under the asset base path", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured", {
+          sitePathPrefix: "/blog",
+          siteUrl: "https://example.com/blog",
+          assetBasePath: "/blog/_assets",
+        }),
+        isAuthenticated: true,
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain(`src="/blog/_assets/client-auth.js"`);
+    expect(html).toContain(
+      `<link rel="modulepreload" href="/blog/_assets/client-compose.js"`,
+    );
+    expect(html).toContain(
+      `<link rel="modulepreload" href="/blog/_assets/chunks/create-editor.js"`,
+    );
+  });
+
+  it("preloads nothing for readers, who never open the composer", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured"),
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain(`src="/_assets/client.js"`);
+    expect(html).not.toContain("modulepreload");
+  });
+
+  it("links the author stylesheet only once someone is signed in", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const render = (isAuthenticated: boolean) =>
+      renderToString(
+        BaseLayout({
+          title: "Jant",
+          c: createContext("featured", {
+            sitePathPrefix: "/blog",
+            siteUrl: "https://example.com/blog",
+            assetBasePath: "/blog/_assets",
+          }),
+          ...(isAuthenticated ? { isAuthenticated } : {}),
+          children: "Test",
+        }),
+      );
+
+    // The composer, editor and settings CSS is the bulk of the hand-written
+    // component styles and none of it renders for a visitor; shipping it on a
+    // public page would put it back on the critical path of every page view.
+    expect(render(false)).not.toContain("client-author.css");
+    expect(render(true)).toContain(
+      '<link rel="stylesheet" href="/blog/_assets/client-author.css"',
+    );
+    // Both pages still share the one reader stylesheet.
+    expect(render(false)).toContain(`href="/blog/_assets/client.css"`);
+    expect(render(true)).toContain(`href="/blog/_assets/client.css"`);
+  });
+
   it("uses the public asset base path from appConfig in production", async () => {
     const { BaseLayout } = await loadBaseLayout();
     const html = renderToString(
@@ -339,48 +413,153 @@ 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 () => {
+  it("preconnects to the asset host when assets are served from a CDN", async () => {
     const { BaseLayout } = await loadBaseLayout();
     const html = renderToString(
       BaseLayout({
         title: "Jant",
         c: createContext("featured", {
-          siteLanguage: "zh-Hant",
-          cjkSerifFont: "off",
+          siteUrl: "https://example.com",
+          assetBasePath: "https://cdn.example.com/jant",
         }),
         children: "Test",
       }),
     );
 
-    expect(html).toContain("client-cjk-tc.css");
-    expect(html).not.toContain("client-cjk.css");
+    expect(html).toContain(
+      '<link rel="preconnect" href="https://cdn.example.com"/>',
+    );
+    expect(html).toContain(
+      '<link rel="preconnect" href="https://cdn.example.com" crossorigin="anonymous"/>',
+    );
+    // Before the stylesheet it warms the connection for.
+    expect(html.indexOf('rel="preconnect"')).toBeLessThan(
+      html.indexOf('rel="stylesheet"'),
+    );
+  });
+
+  it("preconnects to the media host as well when it is a separate one", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured", {
+          siteUrl: "https://example.com",
+          assetBasePath: "https://cdn.example.com/jant",
+          r2PublicUrl: "https://media.example.com",
+        }),
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain(
+      '<link rel="preconnect" href="https://media.example.com"/>',
+    );
+    expect(html).not.toContain(
+      '<link rel="preconnect" href="https://media.example.com" crossorigin="anonymous"/>',
+    );
   });
 
-  it("uses the manual CJK fallback only for an unadapted content language", async () => {
+  it("preconnects once to a host that serves both assets and media", async () => {
     const { BaseLayout } = await loadBaseLayout();
-    const fallbackHtml = renderToString(
+    const html = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured", {
+          siteUrl: "https://example.com",
+          assetBasePath: "https://cdn.example.com/_assets",
+          r2PublicUrl: "https://cdn.example.com/media",
+        }),
+        children: "Test",
+      }),
+    );
+
+    expect(html.match(/rel="preconnect"/g)).toHaveLength(2);
+  });
+
+  it("preconnects to nothing when assets and media share the site's origin", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const sameOrigin = renderToString(
       BaseLayout({
         title: "Jant",
         c: createContext("featured", {
-          siteLanguage: "en",
-          cjkSerifFont: "zh-Hans",
+          siteUrl: "https://example.com",
+          assetBasePath: "https://example.com/_assets",
+          r2PublicUrl: "https://example.com/media",
         }),
         children: "Test",
       }),
     );
-    const contentLanguageHtml = renderToString(
+    const samePath = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured", { assetBasePath: "/_assets" }),
+        children: "Test",
+      }),
+    );
+
+    expect(sameOrigin).not.toContain('rel="preconnect"');
+    expect(samePath).not.toContain('rel="preconnect"');
+  });
+
+  it("loads the CJK stylesheet for the site language", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured", { siteLanguage: "zh-Hant" }),
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain("client-cjk-tc.css");
+    expect(html).not.toContain("client-cjk.css");
+  });
+
+  it("follows the page language rather than the site language", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    // A Traditional Chinese post on a Simplified Chinese site: the Han glyphs
+    // must come from the post's own language, not the site's.
+    const html = renderToString(
       BaseLayout({
         title: "Jant",
         c: createContext("featured", {
-          siteLanguage: "zh-Hant",
-          cjkSerifFont: "zh-Hans",
+          siteLanguage: "zh-Hans",
+          lang: "zh-Hant",
         }),
         children: "Test",
       }),
     );
 
-    expect(fallbackHtml).toContain("client-cjk.css");
-    expect(contentLanguageHtml).toContain("client-cjk-tc.css");
+    expect(html).toContain("client-cjk-tc.css");
+    expect(html).not.toContain("client-cjk.css");
+  });
+
+  it("emits the CJK font variables for the page language", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured", { siteLanguage: "en", lang: "ja" }),
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain("--font-cjk-serif-fallback");
+    expect(html).toContain("client-cjk-jp.css");
+  });
+
+  it("emits no CJK font variables for a non-CJK page language", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured", { siteLanguage: "en" }),
+        children: "Test",
+      }),
+    );
+
+    expect(html).not.toContain("--font-cjk-serif-fallback");
   });
 
   it("exposes the active theme id on the root html element", async () => {

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

@@ -1,124 +1,148 @@
+/**
+ * The site chrome around every public page.
+ *
+ * The header's links are language-scoped: a page inside a language view —
+ * /en/archive, or a Japanese post at its language-neutral URL — hands the
+ * header a `basePath` carrying the view's prefix, and the logo, drawer brand,
+ * and search icon must stay inside that view rather than leading back to the
+ * primary language.
+ */
+
 import type { Context } from "hono";
 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,
-  };
-}
+import type { SiteLayoutProps } from "../../../types.js";
+import { SiteHeader, SiteLayout } from "../SiteLayout.js";
 
-function renderSiteLayout(
-  props: Partial<Parameters<typeof SiteLayout>[0]> = {},
-): string {
+function provideI18n(): void {
   const i18n = createI18n("en");
   const c = {
     get(key: string) {
-      if (key === "i18n") return i18n;
-      return undefined;
+      return key === "i18n" ? i18n : undefined;
     },
   } as unknown as Context;
-
   I18nProvider({ c, children: "" });
+}
+
+function renderHeader(
+  props: Partial<Parameters<typeof SiteHeader>[0]> = {},
+): string {
+  provideI18n();
 
   return renderToString(
-    SiteLayout({
+    SiteHeader({
       siteName: "Jant",
       links: [],
       currentPath: "/",
-      children: "Feed",
       ...props,
     }),
   );
 }
 
-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")],
-      });
+function renderLayout(props: Partial<SiteLayoutProps> = {}): string {
+  provideI18n();
 
-      expect(html).toContain(
-        `class="site-header-more-divider site-header-more-divider-responsive site-header-more-divider-show-${tier}"`,
-      );
-    },
+  return renderToString(
+    SiteLayout({
+      siteName: "Jant",
+      links: [],
+      currentPath: "/",
+      children: "",
+      ...props,
+    }),
   );
+}
 
-  it("omits the More divider when no header link can overflow", () => {
-    const html = renderSiteLayout({
-      links: [
-        createNavItem(0, "header"),
-        createNavItem(1, "header"),
-        createNavItem(2, "more"),
-      ],
-    });
+describe("SiteHeader", () => {
+  it("keeps the logo and search inside a language view", () => {
+    const html = renderHeader({ basePath: "/ja", currentPath: "/ja" });
 
-    expect(html).not.toContain("site-header-more-divider");
+    expect(html).toContain('href="/ja" class="site-logo"');
+    expect(html).toContain('href="/ja/search"');
+    expect(html).toContain('href="/ja" class="site-nav-drawer-brand"');
   });
 
-  it("renders the mobile compose FAB for authenticated timeline pages", () => {
-    const html = renderSiteLayout({
-      currentPath: "/latest",
-      isAuthenticated: true,
-    });
-
-    expect(html).toContain('class="site-mobile-compose-fab"');
-    expect(html).toContain('aria-label="New post"');
-    expect(html).toContain("openNew()");
+  it("marks a language view's home as the home page", () => {
+    expect(renderHeader({ basePath: "/ja", currentPath: "/ja" })).toContain(
+      "site-header-top-home",
+    );
+    expect(
+      renderHeader({ basePath: "/ja", currentPath: "/ja/archive" }),
+    ).not.toContain("site-header-top-home");
   });
 
-  it("does not render the mobile compose FAB for collection pages", () => {
-    const html = renderSiteLayout({
-      currentPath: "/collections/writing",
-      isAuthenticated: true,
-      children: "Collection",
-    });
+  it("links to the root without a base path", () => {
+    const html = renderHeader({});
 
-    expect(html).not.toContain('class="site-mobile-compose-fab"');
+    expect(html).toContain('href="/" class="site-logo"');
+    expect(html).toContain('href="/search"');
   });
 
-  it("renders the mobile compose FAB with collection context on collection detail pages", () => {
-    const html = renderSiteLayout({
-      currentPath: "/collections/writing",
-      isAuthenticated: true,
-      composeCollectionId: "col_abc123",
-      children: "Collection",
+  it("composes the deployment prefix with the language prefix", () => {
+    const html = renderHeader({
+      sitePathPrefix: "/blog",
+      basePath: "/blog/ja",
+      currentPath: "/blog/ja",
     });
 
-    expect(html).toContain('class="site-mobile-compose-fab"');
-    expect(html).toContain("col_abc123");
-    expect(html).toContain("collectionId");
+    expect(html).toContain('href="/blog/ja" class="site-logo"');
+    expect(html).toContain('href="/blog/ja/search"');
   });
+});
 
-  it("does not render the mobile compose FAB for signed-out readers", () => {
-    const html = renderSiteLayout({
-      currentPath: "/featured",
-      isAuthenticated: false,
-      children: "Feed",
-    });
+describe("SiteLayout", () => {
+  // The floating compose button is fixed to the bottom of a phone screen, so
+  // the page has to keep room for it after its last element — the footer and
+  // the Jant credit included, not only the posts. The modifier that keeps the
+  // room and the button itself must never render apart.
+  it.each([
+    {
+      name: "an author's home page",
+      props: { isAuthenticated: true, currentPath: "/" },
+      expected: true,
+    },
+    {
+      name: "an author's collection page",
+      props: {
+        isAuthenticated: true,
+        currentPath: "/notes",
+        composeCollectionId: "col_01h455vb4pex5vsknk084sn02q",
+      },
+      expected: true,
+    },
+    {
+      name: "an author's archive",
+      props: { isAuthenticated: true, currentPath: "/archive" },
+      expected: false,
+    },
+    {
+      name: "an author's home page without the composer",
+      props: {
+        isAuthenticated: true,
+        currentPath: "/",
+        showComposeDialog: false,
+      },
+      expected: false,
+    },
+    {
+      name: "a reader's home page",
+      props: { isAuthenticated: false, currentPath: "/" },
+      expected: false,
+    },
+  ])(
+    "keeps room for the compose button exactly when it shows: $name",
+    ({ props, expected }) => {
+      const html = renderLayout({
+        siteFooterHtml: "<p>Footer</p>",
+        ...props,
+      });
 
-    expect(html).not.toContain('class="site-mobile-compose-fab"');
-  });
+      expect(html.includes('class="site-mobile-compose-fab"')).toBe(expected);
+      expect(
+        html.includes('class="site-page site-page-mobile-compose-enabled"'),
+      ).toBe(expected);
+    },
+  );
 });