@jant/core 0.6.0 → 0.6.2

package/src/ui/feed/ThreadPreview.tsx

@@ -130,7 +130,6 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
         {secondReplyItem}
         {gapItem}
         {penultimateItem}
-        <div class="thread-context-fade" aria-hidden="true" />
       </div>
       <button
         type="button"

package/src/ui/feed/__tests__/thread-preview.test.ts

@@ -230,7 +230,6 @@ describe("getThreadPreviewState", () => {
     expect(html).toContain("thread-context-shell");
     expect(html).toContain("data-thread-context");
     expect(html).toContain("data-collapsed");
-    expect(html).toContain("thread-context-fade");
     expect(html).toContain("data-thread-context-toggle");
     expect(html).toContain('aria-expanded="false"');
     expect(html).toMatch(/data-label-more="[^"]+"/);

package/src/ui/layouts/BaseLayout.tsx

@@ -19,7 +19,7 @@ import {
 } from "../../lib/asset-path.js";
 import { getJantIconHref } from "../../lib/jant-branding.js";
 import { getThemeBrowserColors, resolveBuiltinTheme } from "../../lib/theme.js";
-import { isFullUrl, toAbsoluteSiteUrl, toPublicPath } from "../../lib/url.js";
+import { toAbsoluteAssetUrl, toPublicPath } from "../../lib/url.js";
 import {
   CLIENT_AUTH_JS_FILE,
   CLIENT_CJK_CSS_FILE,
@@ -52,6 +52,26 @@ export interface BaseLayoutProps {
   faviconUrl?: string;
   faviconVersion?: string;
   socialImageUrl?: string;
+  /**
+   * Alt text describing an explicitly provided `socialImageUrl`. Ignored when
+   * the social image falls back to the site avatar or the Jant default.
+   */
+  socialImageAlt?: string;
+  /** Pixel width of an explicitly provided `socialImageUrl`, when known. */
+  socialImageWidth?: number;
+  /** Pixel height of an explicitly provided `socialImageUrl`, when known. */
+  socialImageHeight?: number;
+  /**
+   * JSON-LD structured data object (or array of objects) rendered as a
+   * `<script type="application/ld+json">`. Skipped when the page is noindex.
+   */
+  jsonLd?: unknown;
+  /** Open Graph object type. Defaults to "website". */
+  ogType?: "website" | "article";
+  /** ISO 8601 publish time, rendered as `article:published_time` for articles. */
+  articlePublishedTime?: string;
+  /** ISO 8601 modified time, rendered as `article:modified_time` for articles. */
+  articleModifiedTime?: string;
   /**
    * Absolute canonical URL for the current page. Rendered as
    * `<link rel="canonical">` when set. Use on pages whose primary content is
@@ -75,6 +95,13 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   faviconUrl,
   faviconVersion,
   socialImageUrl,
+  socialImageAlt,
+  socialImageWidth,
+  socialImageHeight,
+  jsonLd,
+  ogType,
+  articlePublishedTime,
+  articleModifiedTime,
   canonicalHref,
   noindex,
   isAuthenticated = false,
@@ -91,10 +118,13 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
 
   // Read favicon/noindex from appConfig when not provided as prop
   const appConfig = c ? c.get("appConfig") : undefined;
+  // Use `||` instead of `??` so empty strings (the unset state for
+  // `appConfig.siteAvatarUrl`) fall through to the Jant default; otherwise
+  // sites without a custom avatar render no og:image / twitter:image at all.
   const resolvedSocialImagePath =
-    socialImageUrl ??
-    faviconUrl ??
-    appConfig?.siteAvatarUrl ??
+    socialImageUrl ||
+    faviconUrl ||
+    appConfig?.siteAvatarUrl ||
     getJantIconHref("socialImage", appConfig?.sitePathPrefix || "");
   const resolvedFaviconVersion =
     faviconVersion ?? (appConfig?.faviconVersion || undefined);
@@ -179,16 +209,34 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
           sitePathPrefix,
         )
       : toPublicPath("/apple-touch-icon.png", sitePathPrefix));
-  const socialImageHref =
-    resolvedSocialImagePath &&
-    (isFullUrl(resolvedSocialImagePath) ||
-    resolvedSocialImagePath.startsWith("//")
-      ? resolvedSocialImagePath
-      : toAbsoluteSiteUrl(
-          resolvedSocialImagePath,
-          appConfig?.siteUrl || "",
-          sitePathPrefix,
-        ));
+  const socialImageHref = resolvedSocialImagePath
+    ? toAbsoluteAssetUrl(
+        resolvedSocialImagePath,
+        appConfig?.siteUrl || "",
+        sitePathPrefix,
+      )
+    : "";
+  // Dimensions / alt only describe an explicitly provided social image. The
+  // fallbacks (site avatar, Jant default) are square branding marks, so they
+  // keep the small `summary` card and a generic site-name alt.
+  const hasExplicitSocialImage = Boolean(socialImageUrl);
+  const socialImageAltText = hasExplicitSocialImage
+    ? socialImageAlt
+    : siteName || undefined;
+  const socialImageWidthValue = hasExplicitSocialImage
+    ? socialImageWidth
+    : undefined;
+  const socialImageHeightValue = hasExplicitSocialImage
+    ? socialImageHeight
+    : undefined;
+  // `summary_large_image` only looks good for genuine landscape content; a
+  // portrait or square image gets center-cropped into a thin banner.
+  const useLargeTwitterCard =
+    hasExplicitSocialImage &&
+    socialImageWidthValue !== undefined &&
+    socialImageHeightValue !== undefined &&
+    socialImageWidthValue > socialImageHeightValue &&
+    socialImageWidthValue >= 300;
   const mainFeedHref = appConfig ? toPublicPath("/feed", sitePathPrefix) : null;
   const latestFeedHref = appConfig
     ? toPublicPath("/feed/latest", sitePathPrefix)
@@ -261,16 +309,46 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
           <title>{title}</title>
           {description && <meta name="description" content={description} />}
           <meta property="og:title" content={title} />
-          <meta property="og:type" content="website" />
+          <meta property="og:type" content={ogType ?? "website"} />
+          {ogType === "article" && articlePublishedTime && (
+            <meta
+              property="article:published_time"
+              content={articlePublishedTime}
+            />
+          )}
+          {ogType === "article" && articleModifiedTime && (
+            <meta
+              property="article:modified_time"
+              content={articleModifiedTime}
+            />
+          )}
           {description && (
             <meta property="og:description" content={description} />
           )}
           {socialImageHref && (
             <meta property="og:image" content={socialImageHref} />
           )}
+          {socialImageHref && socialImageWidthValue !== undefined && (
+            <meta
+              property="og:image:width"
+              content={String(socialImageWidthValue)}
+            />
+          )}
+          {socialImageHref && socialImageHeightValue !== undefined && (
+            <meta
+              property="og:image:height"
+              content={String(socialImageHeightValue)}
+            />
+          )}
+          {socialImageHref && socialImageAltText && (
+            <meta property="og:image:alt" content={socialImageAltText} />
+          )}
           {siteName && <meta property="og:site_name" content={siteName} />}
           {currentUrl && <meta property="og:url" content={currentUrl} />}
-          <meta name="twitter:card" content="summary" />
+          <meta
+            name="twitter:card"
+            content={useLargeTwitterCard ? "summary_large_image" : "summary"}
+          />
           <meta name="twitter:title" content={title} />
           {description && (
             <meta name="twitter:description" content={description} />
@@ -278,9 +356,25 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
           {socialImageHref && (
             <meta name="twitter:image" content={socialImageHref} />
           )}
+          {socialImageHref && socialImageAltText && (
+            <meta name="twitter:image:alt" content={socialImageAltText} />
+          )}
           {resolvedNoindex && (
             <meta name="robots" content="noindex, nofollow" />
           )}
+          {!resolvedNoindex && jsonLd != null && (
+            <script
+              type="application/ld+json"
+              // JSON.stringify output with `<` / `>` escaped to \u-sequences
+              // so a value containing `</script>` cannot break out of the tag.
+              // JSON parsers decode the escapes transparently.
+              dangerouslySetInnerHTML={{
+                __html: JSON.stringify(jsonLd)
+                  .replace(/</g, "\\u003c")
+                  .replace(/>/g, "\\u003e"),
+              }}
+            />
+          )}
           {canonicalHref && <link rel="canonical" href={canonicalHref} />}
           <link rel="icon" href={resolvedFaviconHref} sizes="16x16 32x32" />
           <link rel="apple-touch-icon" href={resolvedAppleTouchHref} />

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

@@ -12,6 +12,7 @@ function createContext(
     assetBasePath?: string;
     sitePathPrefix?: string;
     siteUrl?: string;
+    siteAvatarUrl?: string;
     themeMode?: "auto" | "light" | "dark";
     themeId?: string;
     defaultThemeId?: string;
@@ -22,6 +23,7 @@ function createContext(
       mainRssFeed,
       sitePathPrefix: overrides?.sitePathPrefix ?? "",
       siteUrl: overrides?.siteUrl ?? "https://example.com",
+      siteAvatarUrl: overrides?.siteAvatarUrl,
       siteLanguage: "en",
       noindex: false,
       customCSS: "",
@@ -101,6 +103,27 @@ describe("BaseLayout", () => {
     );
   });
 
+  it("falls back to the bundled social image when appConfig.siteAvatarUrl is an empty string", async () => {
+    // resolve-config initializes siteAvatarUrl to "" (not undefined) when no
+    // avatar is configured. Regression test: the fallback chain must skip
+    // empty strings so og:image / twitter:image are never blank.
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "Jant",
+        c: createContext("featured", { siteAvatarUrl: "" }),
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain(
+      'meta property="og:image" content="https://example.com/_/brand/assets/jant-social-preview.png"',
+    );
+    expect(html).toContain(
+      'meta name="twitter:image" content="https://example.com/_/brand/assets/jant-social-preview.png"',
+    );
+  });
+
   it("uses an explicit social image when provided", async () => {
     const { BaseLayout } = await loadBaseLayout();
     const html = renderToString(
@@ -119,6 +142,129 @@ describe("BaseLayout", () => {
     );
   });
 
+  it("defaults og:type to website without article timestamps", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "Jant",
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain('meta property="og:type" content="website"');
+    expect(html).not.toContain("article:published_time");
+    expect(html).not.toContain("article:modified_time");
+  });
+
+  it("renders article og:type with published and modified timestamps", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "A post",
+        ogType: "article",
+        articlePublishedTime: "2026-01-02T03:04:05.000Z",
+        articleModifiedTime: "2026-03-04T05:06:07.000Z",
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain('meta property="og:type" content="article"');
+    expect(html).toContain(
+      'meta property="article:published_time" content="2026-01-02T03:04:05.000Z"',
+    );
+    expect(html).toContain(
+      'meta property="article:modified_time" content="2026-03-04T05:06:07.000Z"',
+    );
+  });
+
+  it("keeps the small twitter card and omits dimensions for the default social image", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "Jant",
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain('meta name="twitter:card" content="summary"');
+    expect(html).not.toContain('content="summary_large_image"');
+    expect(html).not.toContain("og:image:width");
+  });
+
+  it("renders dimensions, alt, and a large twitter card for a landscape post image", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "A post",
+        socialImageUrl: "https://cdn.example.com/photo.jpg",
+        socialImageWidth: 1600,
+        socialImageHeight: 900,
+        socialImageAlt: "A wide landscape photo",
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain('meta property="og:image:width" content="1600"');
+    expect(html).toContain('meta property="og:image:height" content="900"');
+    expect(html).toContain(
+      'meta property="og:image:alt" content="A wide landscape photo"',
+    );
+    expect(html).toContain(
+      'meta name="twitter:image:alt" content="A wide landscape photo"',
+    );
+    expect(html).toContain(
+      'meta name="twitter:card" content="summary_large_image"',
+    );
+  });
+
+  it("keeps the small twitter card for a portrait post image", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "A post",
+        socialImageUrl: "https://cdn.example.com/tall.jpg",
+        socialImageWidth: 600,
+        socialImageHeight: 900,
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain('meta name="twitter:card" content="summary"');
+    expect(html).not.toContain('content="summary_large_image"');
+  });
+
+  it("renders JSON-LD structured data and escapes script-breaking characters", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "A post",
+        jsonLd: {
+          "@type": "BlogPosting",
+          headline: "Mind the </script> gap",
+        },
+        children: "Test",
+      }),
+    );
+
+    expect(html).toContain('<script type="application/ld+json">');
+    expect(html).toContain("\\u003c/script\\u003e");
+    expect(html).not.toContain("</script> gap");
+  });
+
+  it("skips JSON-LD when the page is noindex", async () => {
+    const { BaseLayout } = await loadBaseLayout();
+    const html = renderToString(
+      BaseLayout({
+        title: "A post",
+        noindex: true,
+        jsonLd: { "@type": "WebSite" },
+        children: "Test",
+      }),
+    );
+
+    expect(html).not.toContain("application/ld+json");
+  });
+
   it("exposes the main and alternate feed links without duplicating featured", async () => {
     const { BaseLayout } = await loadBaseLayout();
     const html = renderToString(

package/src/ui/pages/PostPage.tsx

@@ -67,7 +67,6 @@ const ThreadDetail: FC<{ post: PostView; threadPosts: PostView[] }> = ({
             data-collapsed=""
           >
             {ancestors.map((tp) => renderThreadItem(tp, post.id))}
-            <div class="thread-context-fade" aria-hidden="true" />
           </div>
           <button
             type="button"

package/src/ui/shared/MediaGallery.tsx

@@ -289,12 +289,15 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                 ? JSON.stringify(lightboxItems)
                 : undefined
             }
-            class={`flex gap-2 ${singleVisual ? "" : "overflow-x-auto scroll-smooth snap-x snap-mandatory"}`}
+            class={`flex gap-2 ${singleVisual ? "" : "overflow-x-auto scroll-smooth"}`}
             style={
               singleVisual
                 ? undefined
                 : "scrollbar-width: none; -ms-overflow-style: none;"
             }
+            tabindex={singleVisual ? undefined : 0}
+            role={singleVisual ? undefined : "group"}
+            aria-label={singleVisual ? undefined : "Media gallery"}
           >
             {galleryItems.map((item) => {
               if (item._kind === "image") {
@@ -329,7 +332,7 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                     key={item.id}
                     href={item.url}
                     data-lightbox-index={item._lbIdx}
-                    class={`${singleVisual ? "" : "shrink-0 snap-start"} media-visual-frame`}
+                    class={`${singleVisual ? "" : "shrink-0"} media-visual-frame`}
                     style={{
                       ...(singleVisual
                         ? {
@@ -391,7 +394,7 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                   return (
                     <div
                       key={item.id}
-                      class={`${singleVisual ? "" : "shrink-0 snap-start"} media-video-wrap media-video-wrap-short`}
+                      class={`${singleVisual ? "" : "shrink-0"} media-video-wrap media-video-wrap-short`}
                       style={
                         singleVisual
                           ? {
@@ -464,7 +467,7 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                     key={item.id}
                     href={item.url}
                     data-lightbox-index={item._lbIdx}
-                    class={`${singleVisual ? "" : "shrink-0 snap-start"} media-video-wrap media-visual-frame`}
+                    class={`${singleVisual ? "" : "shrink-0"} media-video-wrap media-visual-frame`}
                     style={
                       singleVisual
                         ? {
@@ -502,7 +505,7 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                 return (
                   <div
                     key={item.id}
-                    class={`media-gallery-card media-audio-card shrink-0 snap-start${item.waveform ? " has-waveform" : ""}`}
+                    class={`media-gallery-card media-audio-card shrink-0${item.waveform ? " has-waveform" : ""}`}
                     style={{
                       width: `${docCardWidth}px`,
                       height: `${rowHeight}px`,
@@ -593,7 +596,7 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                     href={item.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="media-gallery-card shrink-0 snap-start"
+                    class="media-gallery-card shrink-0"
                     style={{
                       width: `${docCardWidth}px`,
                       height: `${rowHeight}px`,
@@ -627,7 +630,7 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                       ? `${postPermalink}/text/${item.id}`
                       : undefined
                   }
-                  class="media-gallery-card shrink-0 snap-start"
+                  class="media-gallery-card shrink-0"
                   style={{
                     width: `${docCardWidth}px`,
                     height: `${rowHeight}px`,
@@ -650,6 +653,46 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
               );
             })}
           </div>
+          {!singleVisual && (
+            <>
+              <button
+                type="button"
+                class="media-gallery-nav media-gallery-nav-prev"
+                tabindex={-1}
+                aria-label="Scroll to previous media"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M15 18l-6-6 6-6" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                class="media-gallery-nav media-gallery-nav-next"
+                tabindex={-1}
+                aria-label="Scroll to next media"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M9 18l6-6-6-6" />
+                </svg>
+              </button>
+            </>
+          )}
         </div>
       )}
     </>

package/src/ui/shared/__tests__/media-gallery.test.ts

@@ -108,4 +108,35 @@ describe("MediaGallery", () => {
     expect(html).not.toContain("media-video-play-overlay");
     expect(html).not.toContain("media-short-video-progress");
   });
+
+  it("adds scroll arrows and a focusable strip for multi-item galleries", () => {
+    const html = renderToString(
+      MediaGallery({
+        attachments: [
+          createMediaView({ id: "m-1", width: 1600, height: 900 }),
+          createMediaView({ id: "m-2", width: 1600, height: 900 }),
+          createMediaView({ id: "m-3", width: 1600, height: 900 }),
+        ],
+      }),
+    );
+
+    expect(html).toContain("media-gallery-nav-prev");
+    expect(html).toContain("media-gallery-nav-next");
+    expect(html).toContain('aria-label="Scroll to previous media"');
+    expect(html).toContain('aria-label="Scroll to next media"');
+    // The strip is a keyboard tab stop so Arrow keys can scroll it.
+    expect(html).toContain('tabindex="0"');
+    expect(html).toContain('role="group"');
+  });
+
+  it("omits scroll arrows and the tab stop for a single visual", () => {
+    const html = renderToString(
+      MediaGallery({
+        attachments: [createMediaView({ width: 1600, height: 900 })],
+      }),
+    );
+
+    expect(html).not.toContain("media-gallery-nav");
+    expect(html).not.toContain('tabindex="0"');
+  });
 });

package/dist/app-Bcr5_wZI.js

@@ -1,6 +0,0 @@
-import "./url-umUptr5z.js";
-import { t as createApp } from "./app-BIkkbVQk.js";
-import "./export-Bbn86HmS.js";
-import "./env-C7e2Nlnt.js";
-import "./github-sync-CBQPRZ8H.js";
-export { createApp };