@jant/core 0.6.15 → 0.7.0

package/src/ui/shared/PostFooter.tsx

@@ -14,6 +14,7 @@ import type {
 } from "../../types.js";
 import { useLingui } from "../../i18n/context.js";
 import { sanitizeUrl } from "../../lib/url.js";
+import { useViewer } from "../../lib/viewer-context.js";
 import { Icon } from "./Icon.js";
 
 interface PostFooterProps {
@@ -97,7 +98,11 @@ export const CompactCollectionTags: FC<{
 interface PostPublishedLinkProps {
   post: Pick<
     PostView,
-    "permalink" | "publishedAt" | "publishedAtFormatted" | "publishedAtTime"
+    | "permalink"
+    | "publishedAt"
+    | "publishedAtFormatted"
+    | "publishedAtTime"
+    | "status"
   >;
   className: string;
 }
@@ -107,17 +112,33 @@ export const PostPublishedLink: FC<PostPublishedLinkProps> = ({
   className,
 }) => {
   const { i18n } = useLingui();
-  const publishedLabel = i18n._(
-    msg({
-      message: "Published on {date} at {time}",
-      comment:
-        "@context: Tooltip text for the published timestamp in post metadata",
-    }),
-    {
-      date: post.publishedAtFormatted,
-      time: post.publishedAtTime,
-    },
-  );
+  // A draft has never been published; `publishedAt` is standing in for its
+  // last edit. The link still matters (it is how you open the post), so keep
+  // it and tell the truth about what the date means.
+  const publishedLabel =
+    post.status === "draft"
+      ? i18n._(
+          msg({
+            message: "Last edited on {date} at {time}",
+            comment:
+              "@context: Tooltip text for the timestamp on an unpublished draft",
+          }),
+          {
+            date: post.publishedAtFormatted,
+            time: post.publishedAtTime,
+          },
+        )
+      : i18n._(
+          msg({
+            message: "Published on {date} at {time}",
+            comment:
+              "@context: Tooltip text for the published timestamp in post metadata",
+          }),
+          {
+            date: post.publishedAtFormatted,
+            time: post.publishedAtTime,
+          },
+        );
 
   return (
     <a href={post.permalink} class={className}>
@@ -158,6 +179,7 @@ export const PostMenuTriggerButton: FC<{ className?: string }> = ({
 
 export const PostFooter: FC<PostFooterProps> = ({ post, detail, display }) => {
   const { i18n } = useLingui();
+  const { isAuthor } = useViewer();
   const featuredLabel =
     post.featuredAtFormatted && post.featuredAtTime
       ? i18n._(
@@ -180,6 +202,9 @@ export const PostFooter: FC<PostFooterProps> = ({ post, detail, display }) => {
         );
   const safeExternalUrl =
     post.format === "link" && post.url ? sanitizeUrl(post.url) : "";
+  // Drafts get an ordinary footer — the Draft badge above already says what
+  // they are, and their lifecycle actions live in the post menu next to Edit
+  // and Delete rather than in a bespoke button row.
   const showTimestamp = !display?.hideTimestamp;
   const hideActions = !!display?.hideActions;
   const hideReply = !!display?.hideReply;
@@ -195,16 +220,21 @@ export const PostFooter: FC<PostFooterProps> = ({ post, detail, display }) => {
       data-post-meta
     >
       <div class="post-footer-meta">
-        <span
-          class="post-footer-featured"
-          tabindex={0}
-          role="img"
-          aria-label={featuredLabel}
-          data-tooltip={featuredLabel}
-          data-align="center"
-        >
-          <Icon name="featured-sparkle" />
-        </span>
+        {/* Shown only under `article[data-post-featured]`, which the post menu
+            toggles in place — so the author's card keeps the icon ready and a
+            reader's carries it only when the post really is featured. */}
+        {(isAuthor || post.featured) && (
+          <span
+            class="post-footer-featured"
+            tabindex={0}
+            role="img"
+            aria-label={featuredLabel}
+            data-tooltip={featuredLabel}
+            data-align="center"
+          >
+            <Icon name="featured-sparkle" />
+          </span>
+        )}
         {showTimestamp && (
           <PostPublishedLink post={post} className="u-url post-footer-link" />
         )}
@@ -231,7 +261,9 @@ export const PostFooter: FC<PostFooterProps> = ({ post, detail, display }) => {
           showIcon={detail}
         />
       </div>
-      {!hideActions && (
+      {/* Both triggers are revealed by `body[data-authenticated]` alone, so for
+          a reader this whole group is markup nothing can ever surface. */}
+      {!hideActions && isAuthor && (
         <div class="post-menu-actions">
           {showReply && (
             <button

package/src/ui/shared/__tests__/archive-labels.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from "vitest";
+import {
+  describeArchiveFilters,
+  getArchiveViewTitle,
+  hasActiveArchiveFilter,
+} from "../archive-labels.js";
+import { buildCollectionVocabulary } from "../../../lib/filter-dimensions.js";
+
+const i18n = {
+  _: (descriptor: { message?: string } | string) =>
+    typeof descriptor === "string" ? descriptor : (descriptor.message ?? ""),
+};
+
+const ctx = {
+  collections: buildCollectionVocabulary([
+    { id: "col_books", slug: "books", title: "Books" },
+  ]),
+};
+
+describe("describeArchiveFilters", () => {
+  it("returns nothing when no filter is active", () => {
+    expect(describeArchiveFilters({}, i18n)).toEqual([]);
+    expect(hasActiveArchiveFilter({})).toBe(false);
+  });
+
+  it("leads with the collection, which identifies a view best", () => {
+    expect(
+      describeArchiveFilters(
+        { collection: ["col_books"], format: "quote", year: 2024 },
+        i18n,
+        ctx,
+      ),
+    ).toEqual(["Books", "Quotes", "2024"]);
+  });
+
+  it("lets title presence absorb the format it refines", () => {
+    expect(
+      describeArchiveFilters({ format: "note", title: false }, i18n),
+    ).toEqual(["Untitled"]);
+    expect(
+      describeArchiveFilters({ format: "note", title: true }, i18n),
+    ).toEqual(["Titled"]);
+  });
+
+  it("names a single media kind but summarises several", () => {
+    expect(describeArchiveFilters({ media: ["image"] }, i18n)).toEqual([
+      "Images",
+    ]);
+    expect(describeArchiveFilters({ media: ["image", "video"] }, i18n)).toEqual(
+      ["With media"],
+    );
+    expect(describeArchiveFilters({ media: "none" }, i18n)).toEqual([
+      "Without media",
+    ]);
+    expect(describeArchiveFilters({ media: "any" }, i18n)).toEqual([
+      "With media",
+    ]);
+  });
+
+  it("describes the thread and visibility dimensions", () => {
+    expect(describeArchiveFilters({ replies: true }, i18n)).toEqual([
+      "Threads",
+    ]);
+    expect(describeArchiveFilters({ replies: false }, i18n)).toEqual([
+      "Single posts",
+    ]);
+    expect(describeArchiveFilters({ visibility: "private" }, i18n)).toEqual([
+      "Private",
+    ]);
+  });
+
+  it("says nothing about a collection it cannot name", () => {
+    // The id resolves to no title here, so the dimension is left undescribed
+    // rather than described with a raw id.
+    expect(describeArchiveFilters({ collection: ["col_gone"] }, i18n)).toEqual(
+      [],
+    );
+  });
+});
+
+describe("getArchiveViewTitle", () => {
+  it("names the unfiltered view", () => {
+    expect(getArchiveViewTitle({}, i18n)).toBe("All posts");
+  });
+
+  it("stops at two parts, since a tab truncates from the right", () => {
+    expect(
+      getArchiveViewTitle(
+        {
+          collection: ["col_books"],
+          format: "quote",
+          year: 2024,
+          replies: true,
+        },
+        i18n,
+        ctx,
+      ),
+    ).toBe("Books, Quotes");
+  });
+});

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

@@ -1,7 +1,7 @@
 import { renderToString } from "hono/jsx/dom/server";
 import { describe, expect, it } from "vitest";
 import type { MediaView } from "../../../types.js";
-import { MediaGallery } from "../MediaGallery.js";
+import { getGalleryRowHeight, MediaGallery } from "../MediaGallery.js";
 
 const HASH = "LEHV6nWB2yk8pyo0adR*.7kCMdnj";
 
@@ -51,7 +51,7 @@ describe("MediaGallery", () => {
 
     expect(html).toContain("aspect-ratio:900/1600");
     expect(html).toMatch(
-      /width:min\(100%, ?calc\(24rem ?\* ?0\.5625\), ?var\(--layout-content-width\)\)/,
+      /width:min\(100%, ?calc\(24rem ?\* ?0\.5625\), ?var\(--layout-reading-width\)\)/,
     );
     expect(html).not.toContain("object-contain");
   });
@@ -140,4 +140,212 @@ describe("MediaGallery", () => {
     expect(html).not.toContain("media-gallery-nav");
     expect(html).not.toContain('tabindex="0"');
   });
+
+  // Attachments render beside `e-content`, so without these a parser reading
+  // the h-entry sees a post with no media. Placement matters as much as
+  // presence: mf2 takes a `u-*` value from the element's own attribute, so a
+  // mark on the wrong element publishes the wrong URL.
+  describe("microformats", () => {
+    it("marks the image thumbnail, not the link to the original", () => {
+      const html = renderToString(
+        MediaGallery({
+          attachments: [
+            createMediaView({
+              width: 1600,
+              height: 900,
+              altText: "A harbour at dusk",
+            }),
+          ],
+        }),
+      );
+
+      expect(html).toMatch(
+        /<img[^>]*src="\/media\/thumb\.jpg"[^>]*class="u-photo /,
+      );
+      expect(html).toContain('alt="A harbour at dusk"');
+      // The anchor holds the full-size original — a click target, not the
+      // post's photo.
+      expect(html).not.toMatch(/<a[^>]*class="u-photo/);
+    });
+
+    it("marks a video by its file URL and its poster by the poster frame", () => {
+      const html = renderToString(
+        MediaGallery({
+          attachments: [
+            createMediaView({
+              id: "media-video",
+              url: "/media/clip.mp4",
+              mimeType: "video/mp4",
+              posterUrl: "/media/clip.jpg",
+              width: 1280,
+              height: 720,
+              durationSeconds: 120,
+            }),
+          ],
+        }),
+      );
+
+      expect(html).toMatch(
+        /<a[^>]*href="\/media\/clip\.mp4"[^>]*class="u-video/,
+      );
+      expect(html).toMatch(/<video[^>]*class="u-photo /);
+    });
+
+    it("leaves a posterless video unmarked as a photo", () => {
+      // The fallback poster is a blurhash data URL. Publishing one as
+      // `u-photo` would hand a consumer a smear instead of a picture.
+      const html = renderToString(
+        MediaGallery({
+          attachments: [
+            createMediaView({
+              id: "media-video",
+              url: "/media/clip.mp4",
+              mimeType: "video/mp4",
+              blurhash: HASH,
+              width: 1280,
+              height: 720,
+              durationSeconds: 120,
+            }),
+          ],
+        }),
+      );
+
+      expect(html).toContain("u-video");
+      expect(html).not.toContain("u-photo");
+    });
+
+    it("marks audio on the source element that carries the URL", () => {
+      const html = renderToString(
+        MediaGallery({
+          attachments: [
+            createMediaView({
+              id: "media-audio",
+              url: "/media/track.mp3",
+              mimeType: "audio/mpeg",
+            }),
+          ],
+        }),
+      );
+
+      // `<audio>` has no `src` of its own here, so the mark belongs on
+      // `<source>` or it would resolve to nothing.
+      expect(html).toMatch(
+        /<source[^>]*class="u-audio"[^>]*src="\/media\/track\.mp3"/,
+      );
+    });
+
+    it("leaves documents and attached texts unmarked", () => {
+      const html = renderToString(
+        MediaGallery({
+          attachments: [
+            createMediaView({
+              id: "media-doc",
+              url: "/media/report.pdf",
+              mimeType: "application/pdf",
+              originalName: "report.pdf",
+            }),
+            createMediaView({
+              id: "media-text",
+              url: "/media/notes.md",
+              mimeType: "text/markdown",
+              summary: "Field notes",
+            }),
+          ],
+        }),
+      );
+
+      expect(html).not.toContain("u-photo");
+      expect(html).not.toContain("u-video");
+      expect(html).not.toContain("u-audio");
+    });
+  });
+});
+
+describe("getGalleryRowHeight", () => {
+  it("holds the widest item to the strip budget instead of the opener's wish", () => {
+    // A portrait screenshot asks for 320 / 0.46 = 692px of height. Granting it
+    // would make the 16:9 video beside it 1231px wide — wider than the whole
+    // content column. The 520px per-item budget decides instead.
+    expect(getGalleryRowHeight([1170 / 2532, 16 / 9])).toBe(293);
+  });
+
+  it("lets a portrait opener run to the cap when nothing after it is wide", () => {
+    expect(getGalleryRowHeight([1170 / 2532, 900 / 1600])).toBe(384);
+  });
+
+  it("never exceeds the 24rem height a lone visual already gets", () => {
+    // Otherwise a second attachment would make the first picture grow.
+    expect(getGalleryRowHeight([9 / 16, 9 / 16, 9 / 16])).toBe(384);
+  });
+
+  it("floors an all-landscape strip rather than letting it go squat", () => {
+    expect(getGalleryRowHeight([16 / 9, 16 / 9])).toBe(240);
+  });
+
+  it("falls back to the floor when the strip carries no visuals", () => {
+    expect(getGalleryRowHeight([])).toBe(240);
+  });
+});
+
+describe("MediaGallery row geometry", () => {
+  const portrait = createMediaView({ id: "m-1", width: 1170, height: 2532 });
+  const video = createMediaView({
+    id: "m-2",
+    url: "/media/clip.mp4",
+    thumbnailUrl: "/media/clip.mp4",
+    mimeType: "video/mp4",
+    width: 1920,
+    height: 1080,
+  });
+  const text = createMediaView({
+    id: "m-3",
+    mimeType: "text/html; charset=utf-8",
+    summary: "haha hahah",
+    chars: 10,
+  });
+
+  it("sizes pictures the same whether or not a text file rides along", () => {
+    const withoutText = renderToString(
+      MediaGallery({ attachments: [portrait, video] }),
+    );
+    const withText = renderToString(
+      MediaGallery({ attachments: [portrait, video, text] }),
+    );
+
+    expect(withoutText).toContain("height:293px");
+    expect(withText).toContain("height:293px");
+    // ...and the video stays inside its 520px budget in both.
+    expect(withoutText).toContain("width:521px");
+    expect(withText).toContain("width:521px");
+  });
+
+  it("crops a clip in a row like the pictures beside it, and letterboxes a lone one", () => {
+    // `.media-video-wrap video` in site-media.css sets no fit, so the markup
+    // is the only place it is decided — for a clip that autoplays too.
+    const shortClip = createMediaView({
+      ...video,
+      id: "m-4",
+      durationSeconds: 8,
+      size: 2_000_000,
+    });
+
+    for (const clip of [video, shortClip]) {
+      const inRow = renderToString(
+        MediaGallery({ attachments: [portrait, clip] }),
+      );
+      const alone = renderToString(MediaGallery({ attachments: [clip] }));
+
+      expect(inRow).toMatch(/<video[^>]*class="[^"]*\bobject-cover\b/);
+      expect(alone).toMatch(/<video[^>]*class="[^"]*\bobject-contain\b/);
+    }
+  });
+
+  it("sizes non-visual cards from the row height, 3:4 portrait", () => {
+    const html = renderToString(
+      MediaGallery({ attachments: [portrait, video, text] }),
+    );
+
+    // 293 * 0.75, rounded.
+    expect(html).toContain("width:220px;height:293px");
+  });
 });

package/src/ui/shared/__tests__/navigation-labels.test.ts

@@ -1,8 +1,8 @@
 import type { I18n, MessageDescriptor } from "@lingui/core";
 import { describe, expect, it } from "vitest";
+import { SYSTEM_NAV_KEY_VALUES } from "../../../types.js";
 import {
   getNavItemDisplayLabel,
-  getSystemNavDescription,
   getSystemNavDisplayLabel,
 } from "../navigation-labels.js";
 
@@ -13,6 +13,17 @@ const i18n = {
 } satisfies Pick<I18n, "_">;
 
 describe("getNavItemDisplayLabel", () => {
+  it("gives every system key a default label", () => {
+    for (const key of SYSTEM_NAV_KEY_VALUES) {
+      const label = getNavItemDisplayLabel(
+        { type: "system", systemKey: key, label: "", url: `/${key}` },
+        i18n,
+      );
+
+      expect(label, `system key "${key}" has no default label`).not.toBe("");
+    }
+  });
+
   it("translates system items with empty label (default)", () => {
     expect(
       getNavItemDisplayLabel(
@@ -48,7 +59,7 @@ describe("getNavItemDisplayLabel", () => {
         { type: "system", systemKey: "rss", label: "", url: "/feed" },
         i18n,
       ),
-    ).toBe("translated:Feed");
+    ).toBe("translated:RSS");
   });
 
   it("translates prefixed public archive system items", () => {
@@ -63,7 +74,7 @@ describe("getNavItemDisplayLabel", () => {
         i18n,
         "/blog",
       ),
-    ).toBe("translated:Archive");
+    ).toBe("translated:All");
   });
 
   it("uses custom label for system item when label is non-empty", () => {
@@ -131,24 +142,7 @@ describe("system nav labels", () => {
     expect(getSystemNavDisplayLabel("collections", i18n)).toBe(
       "translated:Collections",
     );
-    expect(getSystemNavDisplayLabel("archive", i18n)).toBe(
-      "translated:Archive",
-    );
-    expect(getSystemNavDisplayLabel("rss", i18n)).toBe("translated:Feed");
-  });
-
-  it("translates system nav descriptions", () => {
-    expect(getSystemNavDescription("latest", i18n)).toBe(
-      "translated:Link to your latest posts. Your homepage shows this feed.",
-    );
-    expect(getSystemNavDescription("featured", i18n)).toBe(
-      "translated:Link to posts you've marked as featured.",
-    );
-    expect(getSystemNavDescription("archive", i18n)).toBe(
-      "translated:Link to the post archive",
-    );
-    expect(getSystemNavDescription("rss", i18n)).toBe(
-      "translated:Add a link to your main RSS feed. Change what /feed returns in General.",
-    );
+    expect(getSystemNavDisplayLabel("archive", i18n)).toBe("translated:All");
+    expect(getSystemNavDisplayLabel("rss", i18n)).toBe("translated:RSS");
   });
 });

package/src/ui/shared/__tests__/pagination.test.ts

@@ -8,40 +8,54 @@ describe("getPageNumbers", () => {
     expect(getPageNumbers(3, 7)).toEqual([1, 2, 3, 4, 5, 6, 7]);
   });
 
-  it("shows ellipsis for gaps in large page ranges", () => {
-    // Page 1 of 20: 1, 2, ..., 20
-    const result = getPageNumbers(1, 20);
-    expect(result).toEqual([1, 2, 0, 20]);
+  it("shows the first five pages near the start", () => {
+    // Page 1 of 19: 1, 2, 3, 4, 5, ..., 19
+    expect(getPageNumbers(1, 19)).toEqual([1, 2, 3, 4, 5, 0, 19]);
+    expect(getPageNumbers(2, 19)).toEqual([1, 2, 3, 4, 5, 0, 19]);
+    // Page 4 shows page 2 rather than an ellipsis standing in for it alone
+    expect(getPageNumbers(4, 19)).toEqual([1, 2, 3, 4, 5, 0, 19]);
   });
 
   it("shows ellipsis on both sides for middle pages", () => {
-    // Page 10 of 20: 1, ..., 9, 10, 11, ..., 20
-    const result = getPageNumbers(10, 20);
-    expect(result).toEqual([1, 0, 9, 10, 11, 0, 20]);
+    // Page 10 of 19: 1, ..., 9, 10, 11, ..., 19
+    expect(getPageNumbers(5, 19)).toEqual([1, 0, 4, 5, 6, 0, 19]);
+    expect(getPageNumbers(10, 19)).toEqual([1, 0, 9, 10, 11, 0, 19]);
+    expect(getPageNumbers(15, 19)).toEqual([1, 0, 14, 15, 16, 0, 19]);
   });
 
-  it("shows ellipsis only on right for early pages", () => {
-    // Page 3 of 20: 1, 2, 3, 4, ..., 20
-    const result = getPageNumbers(3, 20);
-    expect(result).toEqual([1, 2, 3, 4, 0, 20]);
+  it("shows the last five pages near the end", () => {
+    // Page 19 of 19: 1, ..., 15, 16, 17, 18, 19
+    expect(getPageNumbers(16, 19)).toEqual([1, 0, 15, 16, 17, 18, 19]);
+    expect(getPageNumbers(18, 19)).toEqual([1, 0, 15, 16, 17, 18, 19]);
+    expect(getPageNumbers(19, 19)).toEqual([1, 0, 15, 16, 17, 18, 19]);
   });
 
-  it("shows ellipsis only on left for late pages", () => {
-    // Page 18 of 20: 1, ..., 17, 18, 19, 20
-    const result = getPageNumbers(18, 20);
-    expect(result).toEqual([1, 0, 17, 18, 19, 20]);
+  it("handles the smallest range that needs an ellipsis", () => {
+    expect(getPageNumbers(4, 8)).toEqual([1, 2, 3, 4, 5, 0, 8]);
+    expect(getPageNumbers(5, 8)).toEqual([1, 0, 4, 5, 6, 7, 8]);
   });
 
-  it("handles last page", () => {
-    // Page 20 of 20: 1, ..., 19, 20
-    const result = getPageNumbers(20, 20);
-    expect(result).toEqual([1, 0, 19, 20]);
-  });
+  it("keeps seven slots and never hides a single page behind an ellipsis", () => {
+    for (const totalPages of [8, 9, 19, 120]) {
+      for (let currentPage = 1; currentPage <= totalPages; currentPage++) {
+        const pages = getPageNumbers(currentPage, totalPages);
+        const shown = pages.filter((page) => page !== 0);
 
-  it("handles page 2 of large range", () => {
-    // Page 2 of 20: 1, 2, 3, ..., 20
-    const result = getPageNumbers(2, 20);
-    expect(result).toEqual([1, 2, 3, 0, 20]);
+        expect(pages).toHaveLength(7);
+        expect(shown[0]).toBe(1);
+        expect(shown[shown.length - 1]).toBe(totalPages);
+        expect(shown).toContain(currentPage);
+        pages.forEach((page, i) => {
+          const prev = pages[i - 1] ?? Number.NaN;
+          if (page === 0) {
+            const next = pages[i + 1] ?? Number.NaN;
+            expect(next - prev).toBeGreaterThanOrEqual(3);
+          } else if (i > 0 && prev !== 0) {
+            expect(page).toBe(prev + 1);
+          }
+        });
+      }
+    }
   });
 });
 

package/src/ui/shared/__tests__/post-footer.test.ts

@@ -49,11 +49,13 @@ function renderPostFooter(
   detail = false,
   locale: "en" = "en",
   display?: PostFooterDisplayOptions,
+  isAuthenticated = true,
 ): string {
   const i18n = createI18n(locale);
   const c = {
     get(key: string) {
       if (key === "i18n") return i18n;
+      if (key === "isAuthenticated") return isAuthenticated;
       return undefined;
     },
   } as unknown as Context;
@@ -159,4 +161,34 @@ describe("PostFooter", () => {
     expect(html).not.toContain("data-reply-trigger");
     expect(html).toContain("data-post-menu-trigger");
   });
+
+  it("omits the action group for a reader, who can never see it", () => {
+    const html = renderPostFooter(
+      createPostView(),
+      false,
+      "en",
+      undefined,
+      false,
+    );
+
+    expect(html).not.toContain("data-post-menu-trigger");
+    expect(html).not.toContain("data-reply-trigger");
+    expect(html).not.toContain("post-menu-actions");
+    // The reader still gets the footer itself.
+    expect(html).toContain('href="/hello-world"');
+  });
+
+  it("keeps the featured mark for the author and drops it for a reader", () => {
+    const featured = createPostView({ featured: true });
+
+    expect(renderPostFooter(createPostView())).toContain(
+      "post-footer-featured",
+    );
+    expect(
+      renderPostFooter(createPostView(), false, "en", undefined, false),
+    ).not.toContain("post-footer-featured");
+    expect(renderPostFooter(featured, false, "en", undefined, false)).toContain(
+      "post-footer-featured",
+    );
+  });
 });