@jant/core 0.6.16 → 0.7.1

package/src/lib/markdown-manager.ts

@@ -1,12 +1,20 @@
 import {
   Extension,
   Node,
+  getSchema,
   type AnyExtension,
   type Extensions,
   type JSONContent,
 } from "@tiptap/core";
+import { Fragment, type Schema } from "@tiptap/pm/model";
 import { MarkdownManager } from "@tiptap/markdown";
 import CodeBlock from "@tiptap/extension-code-block";
+import { OrderedList } from "@tiptap/extension-list";
+import HardBreak from "@tiptap/extension-hard-break";
+import Paragraph from "@tiptap/extension-paragraph";
+import Bold from "@tiptap/extension-bold";
+import Italic from "@tiptap/extension-italic";
+import Strike from "@tiptap/extension-strike";
 import Link from "@tiptap/extension-link";
 import StarterKit from "@tiptap/starter-kit";
 import {
@@ -224,6 +232,333 @@ const SemanticLink = Link.extend({
   clearable: false,
 });
 
+const LINE_START_BLOCK_SYNTAX: ReadonlyArray<[RegExp, string]> = [
+  // `1986. A good year`, `2) Second`: an ordered-list marker
+  [/^([ \t]{0,3})(\d{1,9})([.)])(?=[ \t]|$)/, "$1$2\\$3"],
+  // `- note`, `+ note`: a bullet-list marker (`*` is escaped inline already)
+  [/^([ \t]{0,3})([-+])(?=[ \t]|$)/, "$1\\$2"],
+  // `# note`: an ATX heading
+  [/^([ \t]{0,3})(#{1,6})(?=[ \t]|$)/, "$1\\$2"],
+  // `---`, `===`: a thematic break or a setext underline for the line above
+  [/^([ \t]{0,3})([-=])(?=[-= \t]*$)/, "$1\\$2"],
+];
+
+/**
+ * Backslash-escape block syntax that a paragraph line happens to open with.
+ *
+ * Text nodes only get inline escaping, so a paragraph reading `1. Pony`, or a
+ * hard break followed by `- note`, came back from the Markdown as a list.
+ *
+ * @param markdown - A paragraph's rendered Markdown
+ * @returns The same Markdown with each line's leading block syntax escaped
+ * @example
+ * escapeLineStartBlockSyntax("Update:  \n1. Pony"); // "Update:  \n1\\. Pony"
+ */
+function escapeLineStartBlockSyntax(markdown: string): string {
+  return markdown
+    .split("\n")
+    .map((line) =>
+      LINE_START_BLOCK_SYNTAX.reduce(
+        (escaped, [pattern, replacement]) =>
+          escaped.replace(pattern, replacement),
+        line,
+      ),
+    )
+    .join("\n");
+}
+
+/** The HTML tag each emphasis mark falls back to. */
+const HTML_EMPHASIS_TAGS = {
+  bold: "strong",
+  italic: "em",
+  strike: "s",
+} as const;
+
+type EmphasisMarkType = keyof typeof HTML_EMPHASIS_TAGS;
+
+const EMPHASIS_MARK_TYPES = Object.keys(
+  HTML_EMPHASIS_TAGS,
+) as EmphasisMarkType[];
+
+/** Marks that write their own delimiter characters around the text. */
+const DELIMITED_MARK_TYPES = new Set<string>([
+  ...EMPHASIS_MARK_TYPES,
+  "code",
+  "link",
+]);
+
+/**
+ * Serialization-only mark attribute: write this run with HTML tags. It is
+ * set by `markEmphasisDelimiters` on a copy of the document and never stored.
+ */
+const HTML_EMPHASIS_ATTR = "markdownAsHtml";
+
+type FlankingClass = "space" | "punctuation" | "other";
+
+function classifyFlankingChar(char: string | undefined): FlankingClass {
+  if (char === undefined || /\s/u.test(char)) return "space";
+  return /[\p{P}\p{S}]/u.test(char) ? "punctuation" : "other";
+}
+
+function hasMark(node: JSONContent | undefined, type: string): boolean {
+  return node?.marks?.some((mark) => mark.type === type) ?? false;
+}
+
+/**
+ * Whether a `**`, `*`, or `~~` at one end of a run can open or close it.
+ *
+ * CommonMark's flanking rule, which GFM strikethrough shares: the character
+ * on the text side must not be whitespace, and when it is punctuation, the
+ * character on the outside must be whitespace or punctuation too. The rule is
+ * symmetric, so one check covers the opening and the closing delimiter.
+ *
+ * @param nodes - The inline nodes of one block
+ * @param index - The run's first node (`side: "start"`) or last (`"end"`)
+ * @param side - Which end of the run
+ * @param markType - The run's mark
+ * @returns True when Markdown delimiters work at this end
+ */
+function delimiterFlanks(
+  nodes: JSONContent[],
+  index: number,
+  side: "start" | "end",
+  markType: string,
+): boolean {
+  const node = nodes[index];
+  const neighbor = nodes[side === "start" ? index - 1 : index + 1];
+  const chars = [...(node?.text ?? "")];
+  const edge = side === "start" ? chars : chars.slice().reverse();
+  const innerChar = edge.find((char) => !/\s/u.test(char));
+
+  // Another mark opening or closing at the same edge writes its delimiter
+  // between ours and the text; it counts as punctuation.
+  const sharesEdge =
+    node?.marks?.some(
+      (mark) =>
+        mark.type !== markType &&
+        DELIMITED_MARK_TYPES.has(mark.type) &&
+        !hasMark(neighbor, mark.type),
+    ) ?? false;
+  const inner = sharesEdge ? "punctuation" : classifyFlankingChar(innerChar);
+
+  // The serializer moves whitespace at a run's edge outside the delimiter.
+  let outer: FlankingClass;
+  if (edge[0] !== undefined && /\s/u.test(edge[0])) outer = "space";
+  else if (!neighbor || neighbor.type === "hardBreak") outer = "space";
+  else if (neighbor.type === "text") {
+    const neighborChars = [...(neighbor.text ?? "")];
+    outer = classifyFlankingChar(
+      side === "start" ? neighborChars.at(-1) : neighborChars[0],
+    );
+  } else outer = "punctuation"; // `![…](…)`, `[^1]`
+
+  return inner !== "space" && (inner !== "punctuation" || outer !== "other");
+}
+
+function markEmphasisRuns(nodes: JSONContent[]): JSONContent[] {
+  const result = nodes.map((node) => ({ ...node }));
+
+  for (const markType of EMPHASIS_MARK_TYPES) {
+    let start = 0;
+    while (start < result.length) {
+      if (result[start]?.type !== "text" || !hasMark(result[start], markType)) {
+        start += 1;
+        continue;
+      }
+
+      // The serializer closes marks around any non-text node, so a run is
+      // consecutive text nodes.
+      let end = start;
+      while (
+        result[end + 1]?.type === "text" &&
+        hasMark(result[end + 1], markType)
+      ) {
+        end += 1;
+      }
+
+      if (
+        !delimiterFlanks(result, start, "start", markType) ||
+        !delimiterFlanks(result, end, "end", markType)
+      ) {
+        for (let index = start; index <= end; index += 1) {
+          const node = result[index] as JSONContent;
+          node.marks = node.marks?.map((mark) =>
+            mark.type === markType
+              ? {
+                  ...mark,
+                  attrs: { ...mark.attrs, [HTML_EMPHASIS_ATTR]: true },
+                }
+              : mark,
+          );
+        }
+      }
+
+      start = end + 1;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Flag the emphasis runs whose Markdown delimiters a CommonMark parser would
+ * leave as literal characters, so they serialize as HTML tags instead.
+ *
+ * Chinese and Japanese put no space around punctuation, so `**说话。**来的人`
+ * is common, and neither Hugo (goldmark) nor Jant's own parser reads the
+ * closing `**` after `。` followed by `来`. `<strong>…</strong>` reads the
+ * same in both, and the rest of the Markdown stays as it was.
+ *
+ * @param node - A TipTap document or descendant
+ * @returns A copy with unflankable runs flagged
+ * @example
+ * markEmphasisDelimiters(doc); // bold "说话。" before "来" gets the flag
+ */
+function markEmphasisDelimiters(node: JSONContent): JSONContent {
+  if (!node.content || node.type === "codeBlock") return node;
+
+  const content = node.content.map(markEmphasisDelimiters);
+  const hasInline = content.some(
+    (child) => child.type === "text" || child.type === "hardBreak",
+  );
+  return { ...node, content: hasInline ? markEmphasisRuns(content) : content };
+}
+
+function renderEmphasis(
+  node: JSONContent,
+  content: string,
+  markType: EmphasisMarkType,
+  delimiter: string,
+): string {
+  if (!node.attrs?.[HTML_EMPHASIS_ATTR]) {
+    return `${delimiter}${content}${delimiter}`;
+  }
+  const tag = HTML_EMPHASIS_TAGS[markType];
+  return `<${tag}>${content}</${tag}>`;
+}
+
+const MarkdownBold = Bold.extend({
+  renderMarkdown(node, helpers) {
+    return renderEmphasis(node, helpers.renderChildren(node), "bold", "**");
+  },
+});
+
+const MarkdownItalic = Italic.extend({
+  renderMarkdown(node, helpers) {
+    return renderEmphasis(node, helpers.renderChildren(node), "italic", "*");
+  },
+});
+
+const MarkdownStrike = Strike.extend({
+  renderMarkdown(node, helpers) {
+    return renderEmphasis(node, helpers.renderChildren(node), "strike", "~~");
+  },
+});
+
+/** Marked token for each HTML emphasis tag the parser accepts. */
+const HTML_EMPHASIS_TOKEN_TYPES: Record<string, "strong" | "em" | "del"> = {
+  strong: "strong",
+  b: "strong",
+  em: "em",
+  i: "em",
+  s: "del",
+  del: "del",
+};
+
+const HTML_EMPHASIS_OPEN_PATTERN = /<(?:strong|b|em|i|s|del)>/i;
+const HTML_EMPHASIS_PATTERN = /^<(strong|b|em|i|s|del)>([\s\S]*?)<\/\1>/i;
+
+/**
+ * Reads the HTML tags `markEmphasisDelimiters` writes back as marks.
+ *
+ * Only bare tags: `<strong onclick=…>` and every other tag stay text, as
+ * inline HTML always has. The content between the tags is Markdown.
+ */
+const MarkdownHtmlEmphasis = Extension.create({
+  name: "markdownHtmlEmphasis",
+
+  markdownTokenizer: {
+    name: "htmlEmphasis",
+    level: "inline",
+    start(src: string) {
+      return src.search(HTML_EMPHASIS_OPEN_PATTERN);
+    },
+    tokenize(src: string, _tokens, helpers) {
+      const match = HTML_EMPHASIS_PATTERN.exec(src);
+      if (!match) return undefined;
+
+      const [raw, tag = "", text = ""] = match;
+      const type = HTML_EMPHASIS_TOKEN_TYPES[tag.toLowerCase()];
+      if (!type) return undefined;
+      return { type, raw, text, tokens: helpers.inlineTokens(text) };
+    },
+  },
+});
+
+/**
+ * Hard breaks as two trailing spaces, except where that line would be blank.
+ *
+ * A break at the start of a paragraph, or right after another break, puts
+ * the spaces on a line of their own. A line of spaces is blank in Markdown:
+ * it ended the paragraph, and `-   ` left a list item empty with the text
+ * after it outside the list. The backslash form keeps something on the line.
+ */
+const MarkdownHardBreak = HardBreak.extend({
+  renderMarkdown(_node, _helpers, context) {
+    const previous = context?.previousNode;
+    return !previous || previous.type === "hardBreak" ? "\\\n" : "  \n";
+  },
+});
+
+const renderParagraphMarkdown = Paragraph.config.renderMarkdown;
+
+const MarkdownParagraph = Paragraph.extend({
+  renderMarkdown(node, helpers, context) {
+    const rendered =
+      renderParagraphMarkdown?.call(this, node, helpers, context) ?? "";
+    return escapeLineStartBlockSyntax(rendered);
+  },
+});
+
+/**
+ * Ordered lists with CommonMark markers: digits only.
+ *
+ * Tiptap's ordered list also reads letters and roman numerals as markers
+ * (`a.`, `IV.`, anything of one or two letters), so a line such as
+ * `PS. 补充一句` or `Mr. Smith went` became a list item and lost its first
+ * word. Its tokenizer also measured a marker's width without the `.`, which
+ * left one stray space on every line of a code block inside a list item.
+ *
+ * Jant's Markdown is CommonMark plus GFM (docs/internal/markdown-contract.md),
+ * the same dialect Hugo reads in an export, so list tokenizing goes back to
+ * marked: a tokenizer that never matches leaves the built-in one in charge,
+ * and marked's list items go to `listItem` the way bullet lists' do. Tiptap's
+ * plain-text paste plugin goes too; it applied the same markers, and the
+ * editors already parse pasted plain text as Markdown (`MarkdownClipboard`).
+ */
+const CommonMarkOrderedList = OrderedList.extend({
+  markdownTokenizer: {
+    name: "orderedList",
+    level: "block",
+    start: () => -1,
+    tokenize: () => undefined,
+  },
+
+  parseMarkdown: (token, helpers) => {
+    if (token.type !== "list" || !token.ordered) return [];
+    const start = typeof token.start === "number" ? token.start : 1;
+    return {
+      type: "orderedList",
+      ...(start === 1 ? {} : { attrs: { start } }),
+      content: token.items ? helpers.parseChildren(token.items) : [],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [];
+  },
+});
+
 const MarkdownFigureImageSupport = Extension.create({
   name: "markdownFigureImageSupport",
 
@@ -824,8 +1159,21 @@ export function createMarkdownContentExtensions(
       heading: { levels: [1, 2, 3] },
       link: false,
       codeBlock: false,
+      orderedList: false,
+      paragraph: false,
+      hardBreak: false,
+      bold: false,
+      italic: false,
+      strike: false,
       trailingNode: { notAfter: ["footnoteDefinition"] },
     }),
+    MarkdownParagraph,
+    MarkdownHardBreak,
+    MarkdownBold,
+    MarkdownItalic,
+    MarkdownStrike,
+    MarkdownHtmlEmphasis,
+    CommonMarkOrderedList,
     SemanticLink.configure({
       openOnClick: false,
       autolink: false,
@@ -1050,12 +1398,54 @@ export function getMarkdownManager(): MarkdownManager {
   return sharedMarkdownManager;
 }
 
+let sharedContentSchema: Schema | null = null;
+
+function getContentSchema(): Schema {
+  sharedContentSchema ??= getSchema(createMarkdownContentExtensions());
+  return sharedContentSchema;
+}
+
+/**
+ * Fill in the children a node's schema requires but the document left out.
+ *
+ * A list item must hold a paragraph, a blockquote a block, a doc a block.
+ * Documents that skipped one (an empty `1. ` item from an older Markdown
+ * parser, or JSON posted through the API) made the Markdown serializer throw.
+ * Each empty node that cannot be empty gets what `createAndFill` would give it.
+ *
+ * @param node - A TipTap document or descendant
+ * @returns A copy whose empty required containers are filled
+ * @example
+ * fillRequiredContent({ type: "listItem", content: [] });
+ * // { type: "listItem", content: [{ type: "paragraph" }] }
+ */
+export function fillRequiredContent(node: JSONContent): JSONContent {
+  const nodeType = node.type ? getContentSchema().nodes[node.type] : undefined;
+  if (!nodeType || nodeType.isLeaf) return node;
+
+  const content = node.content?.map(fillRequiredContent);
+  if ((content?.length ?? 0) === 0 && !nodeType.contentMatch.validEnd) {
+    const filled = nodeType.contentMatch.fillBefore(Fragment.empty, true);
+    if (filled) {
+      return { ...node, content: filled.toJSON() as JSONContent[] };
+    }
+  }
+
+  return content ? { ...node, content } : node;
+}
+
 export function parseMarkdownDocument(markdown: string): JSONContent {
-  return normalizeMarkdownDocument(getMarkdownManager().parse(markdown));
+  return fillRequiredContent(
+    normalizeMarkdownDocument(getMarkdownManager().parse(markdown)),
+  );
 }
 
 export function serializeMarkdownDocument(doc: JSONContent): string {
   return expandCodeBlockFences(
-    getMarkdownManager().serialize(normalizeFootnoteArtifacts(doc)),
+    getMarkdownManager().serialize(
+      normalizeFootnoteArtifacts(
+        markEmphasisDelimiters(fillRequiredContent(doc)),
+      ),
+    ),
   );
 }

package/src/lib/media-helpers.ts

@@ -58,9 +58,21 @@ export function buildMediaMap(
               fit: "scale-down",
             })
           : mediaUrl;
-        const posterUrl = m.posterKey
+        // A poster is a still frame at whatever resolution the source video
+        // had, so it needs the same transform as any other image — without it
+        // a 4K clip puts a multi-megabyte PNG in the feed. Matches the limits
+        // `toMediaView` uses for the same field.
+        const posterRawUrl = m.posterKey
           ? getMediaUrl(m.posterKey, publicUrl, sitePathPrefix)
           : null;
+        const posterUrl = posterRawUrl
+          ? getImageUrl(posterRawUrl, imageTransformUrl, {
+              width: 640,
+              quality: 80,
+              format: "auto",
+              fit: "scale-down",
+            })
+          : null;
         return {
           id: m.id,
           url: mediaUrl,

package/src/lib/navigation.ts

@@ -6,7 +6,9 @@
 
 import type { Context } from "hono";
 import type { Collection, NavItem, NavItemView } from "../types.js";
+import { isFeedNavKey } from "../types/constants.js";
 import { toNavItemViews } from "./view.js";
+import { languageScopeBasePath, viewBasePath } from "./view-language.js";
 import { render as renderMarkdown, toPlainText } from "./markdown.js";
 
 /**
@@ -15,7 +17,15 @@ import { render as renderMarkdown, toPlainText } from "./markdown.js";
 export interface NavigationData {
   links: NavItemView[];
   currentPath: string;
+  /** Deployment path prefix, such as `/blog`. */
   sitePathPrefix: string;
+  /**
+   * Public path prefix for reader-facing surfaces. Equals `sitePathPrefix`
+   * outside a language view, and carries the language prefix inside one
+   * (`/blog/en`). Pass this — not `sitePathPrefix` — to anything building
+   * links to the home page, archive, search, feeds or collections.
+   */
+  basePath: string;
   siteName: string;
   /** Plain-text description for meta tags and RSS/Atom feeds */
   siteDescription: string;
@@ -23,11 +33,37 @@ export interface NavigationData {
   siteDescriptionHtml?: string;
   isAuthenticated: boolean;
   collections: Collection[];
-  siteAvatarUrl?: string;
+  /** Header/drawer mark, already sized down — not the canonical asset. */
+  siteAvatarThumbUrl?: string;
   showHeaderAvatar?: boolean;
   siteFooterHtml?: string;
 }
 
+/**
+ * Collect the collections and smart collections already placed in navigation.
+ *
+ * The directory offers both kinds the same "Add to Navigation" action, so it
+ * needs one list to check against; TypeID prefixes (`col_`, `smc_`) keep the
+ * two apart without a second field.
+ *
+ * @param links - Navigation items as rendered for this request
+ * @returns TypeIDs of every collection and smart collection in navigation
+ * @example
+ * const placed = collectNavigationCollectionIds(navData.links);
+ * // ["col_01abc", "smc_01xyz"]
+ */
+export function collectNavigationCollectionIds(links: NavItemView[]): string[] {
+  return links.flatMap((item) => {
+    if (item.type === "collection" && item.collectionId) {
+      return [item.collectionId];
+    }
+    if (item.type === "smart_collection" && item.smartCollectionId) {
+      return [item.smartCollectionId];
+    }
+    return [];
+  });
+}
+
 /**
  * Fetch navigation data for public pages.
  *
@@ -49,20 +85,45 @@ export interface NavigationData {
  */
 export async function getNavigationData(
   c: Context,
-  options?: { preloadedItems?: NavItem[]; includeCollections?: boolean },
+  options?: {
+    preloadedItems?: NavItem[];
+    includeCollections?: boolean;
+    /**
+     * Content language whose view the page's chrome should live in. Post
+     * pages pass their post's language here: their URLs carry no language
+     * prefix, so `viewLang` is never set on them, yet a Japanese post's
+     * logo and nav should lead to `/ja`, not to the primary view.
+     */
+    languageScope?: string | null;
+  },
 ): Promise<NavigationData> {
+  const appConfig = c.var.appConfig;
+  const langBase =
+    options?.languageScope !== undefined
+      ? languageScopeBasePath(c, options.languageScope)
+      : viewBasePath(c);
+  // An empty prefix means the primary language's view, whose nav items already
+  // point where they should — so the whole primary-language site, multilingual
+  // or not, never pays for the translation lookup.
+  const scopeLanguage = langBase
+    ? (options?.languageScope ?? c.var.viewLang ?? null)
+    : null;
+
   // Callers that already fetched nav items can pass them in to avoid a
   // redundant DB round-trip.
   const savedItems =
-    options?.preloadedItems ?? (await c.var.services.navItems.list());
+    options?.preloadedItems ??
+    (await c.var.services.navItems.list({ language: scopeLanguage }));
   const currentPath = c.var.publicPath;
-  const appConfig = c.var.appConfig;
-  // Keep the saved RSS item untouched so its placement and custom label come
-  // back when feeds are re-enabled. Only the rendered projection is filtered.
+  // Keep the saved feed items untouched so their placement and custom labels
+  // come back when feeds are re-enabled. Only the rendered projection is
+  // filtered. Both entries go: `rss` addresses a feed that is off, and
+  // `subscribe` a page that 404s without one.
   const items = appConfig.rssFeedsEnabled
     ? savedItems
     : savedItems.filter(
-        (item: NavItem) => item.type !== "system" || item.systemKey !== "rss",
+        (item: NavItem) =>
+          item.type !== "system" || !isFeedNavKey(item.systemKey),
       );
 
   const siteName = appConfig.siteName;
@@ -80,8 +141,10 @@ export async function getNavigationData(
       })
     : undefined;
 
-  // Avatar URL and display flag come from appConfig
-  const siteAvatarUrl = appConfig.siteAvatarUrl || undefined;
+  // Avatar URL and display flag come from appConfig. The chrome takes the
+  // sized variant: the full-resolution asset belongs to the social card and
+  // the settings editor, not to a 32px mark on every page.
+  const siteAvatarThumbUrl = appConfig.siteAvatarThumbUrl || undefined;
   const showHeaderAvatar = appConfig.showHeaderAvatar;
 
   // Render footer markdown
@@ -107,6 +170,8 @@ export async function getNavigationData(
       ? await c.var.services.navItems.getCollectionFreshness(collectionNavIds)
       : undefined;
 
+  const basePath = `${appConfig.sitePathPrefix}${langBase}`;
+
   const links = toNavItemViews(
     items,
     currentPath,
@@ -114,6 +179,7 @@ export async function getNavigationData(
     appConfig.sitePathPrefix,
     collectionFreshness,
     appConfig.siteOrigin,
+    basePath,
   );
 
   // Only load collections when authenticated (for compose dialog)
@@ -125,13 +191,14 @@ export async function getNavigationData(
     links,
     currentPath,
     sitePathPrefix: appConfig.sitePathPrefix,
+    basePath,
     siteName,
     siteDescription,
     siteDescriptionHtml,
     isAuthenticated,
     collections,
-    siteAvatarUrl,
-    showHeaderAvatar: showHeaderAvatar && !!siteAvatarUrl,
+    siteAvatarThumbUrl,
+    showHeaderAvatar: showHeaderAvatar && !!siteAvatarThumbUrl,
     siteFooterHtml,
   };
 }

package/src/lib/pagination.ts

@@ -38,10 +38,18 @@ export function formatPageLabel(
   return `Page ${String(currentPage)}`;
 }
 
+/** Slots a numbered pagination control fills once there are more pages. */
+const PAGE_SLOT_COUNT = 7;
+
 /**
  * Computes which page numbers to display in a numbered pagination control.
- * Always includes: first page, last page, current page, and 1 page on each side of current.
- * Gaps between non-consecutive pages are represented by 0 (ellipsis marker).
+ *
+ * Seven or fewer pages are all shown. Past that, the control always fills
+ * exactly seven slots — the first page, the last page, and a three-page
+ * window around the current page — so it keeps the same width, and the
+ * Previous/Next links stay put, as the reader moves through pages. Skipped
+ * pages are represented by 0 (ellipsis marker). An ellipsis always stands in
+ * for at least two pages; where it would hide just one, that page is shown.
  *
  * @param currentPage - The current active page (1-indexed)
  * @param totalPages - Total number of pages
@@ -50,36 +58,32 @@ export function formatPageLabel(
  * @example
  * ```ts
  * getPageNumbers(1, 5)    // [1, 2, 3, 4, 5]
- * getPageNumbers(1, 20)   // [1, 2, 0, 20]
- * getPageNumbers(10, 20)  // [1, 0, 9, 10, 11, 0, 20]
+ * getPageNumbers(1, 19)   // [1, 2, 3, 4, 5, 0, 19]
+ * getPageNumbers(10, 19)  // [1, 0, 9, 10, 11, 0, 19]
+ * getPageNumbers(19, 19)  // [1, 0, 15, 16, 17, 18, 19]
  * ```
  */
 export function getPageNumbers(
   currentPage: number,
   totalPages: number,
 ): number[] {
-  if (totalPages <= 7) {
+  if (totalPages <= PAGE_SLOT_COUNT) {
     return Array.from({ length: totalPages }, (_, i) => i + 1);
   }
 
-  const pages = new Set<number>();
-  pages.add(1);
-  pages.add(totalPages);
-  pages.add(currentPage);
-  if (currentPage > 1) pages.add(currentPage - 1);
-  if (currentPage < totalPages) pages.add(currentPage + 1);
-
-  const sorted = [...pages].sort((a, b) => a - b);
-
-  // Insert 0 for gaps
-  const result: number[] = [];
-  for (let i = 0; i < sorted.length; i++) {
-    const current = sorted[i] as number;
-    if (i > 0 && current - (sorted[i - 1] as number) > 1) {
-      result.push(0); // ellipsis marker
-    }
-    result.push(current);
-  }
+  // The second slot holds page 2 or an ellipsis, and the second-to-last slot
+  // holds page totalPages - 1 or an ellipsis, so the window around the current
+  // page starts no earlier than page 3 and ends no later than totalPages - 2.
+  const windowStart = Math.min(Math.max(currentPage - 1, 3), totalPages - 4);
+  const windowEnd = windowStart + 2;
 
-  return result;
+  return [
+    1,
+    windowStart === 3 ? 2 : 0,
+    windowStart,
+    windowStart + 1,
+    windowEnd,
+    windowEnd === totalPages - 2 ? totalPages - 1 : 0,
+    totalPages,
+  ];
 }