@binarynoir/vitepress-blog 0.4.0 → 0.5.0

package/README.md

@@ -267,24 +267,27 @@ Notes from Team A.
 
 The list goes where `<!-- blog-posts -->` is, or after the page's content.
 
-| Key            | Default                       | What it does                                                                                    |
-| -------------- | ----------------------------- | ----------------------------------------------------------------------------------------------- |
-| `scope`        | `section`                     | `site` makes this the main blog. See [Scopes](#scopes).                                         |
-| `folders`      | the page's folder             | Folders to list posts from, relative to the source directory; `./` and `../` are page-relative. |
-| `tags`         | all                           | Only list posts with at least one of these tags.                                                |
-| `categories`   | all                           | Only list posts in one of these categories.                                                     |
-| `limit`        | all                           | Most posts to list. The feed has its own limit.                                                 |
-| `layout`       | `list`                        | `list` (image beside text), `grid` (cards) or `compact` (dates and titles).                     |
-| `groupBy`      | none                          | `year` or `month` puts a heading ("2026", "October 2026") above each year's or month's posts.   |
-| `showTags`     | `true`                        | `false` hides tag chips on cards.                                                               |
-| `showCategory` | `true`                        | `false` hides the category above each card's title.                                             |
-| `categoryList` | `true`                        | A row of categories in the browse panel, each with its count. `false` leaves it out.            |
-| `tagList`      | `true`                        | A row of keywords in the browse panel, each with its count. `false` leaves it out.              |
-| `archive`      | `true`                        | Rows of years, and each year's months, in the browse panel. `false` leaves them out.            |
-| `pageSize`     | `10` (the `pageSize` option)  | Posts per page. `0` shows them all on one page.                                                 |
-| `pinLimit`     | all (the `pinLimit` option)   | Most pinned posts kept at the top. Extra ones take their place by date.                         |
-| `rssLink`      | `true` (the `rssLink` option) | A "Subscribe" link with the RSS icon to this blog's feed. `false` leaves it out.                |
-| `feed`         | on                            | `false` turns the feed off, or `{ title, description, limit, path }` to set it up.              |
+| Key             | Default                       | What it does                                                                                    |
+| --------------- | ----------------------------- | ----------------------------------------------------------------------------------------------- |
+| `scope`         | `section`                     | `site` makes this the main blog. See [Scopes](#scopes).                                         |
+| `folders`       | the page's folder             | Folders to list posts from, relative to the source directory; `./` and `../` are page-relative. |
+| `tags`          | all                           | Only list posts with at least one of these tags.                                                |
+| `categories`    | all                           | Only list posts in one of these categories.                                                     |
+| `limit`         | all                           | Most posts to list. The feed has its own limit.                                                 |
+| `layout`        | `list`                        | `list` (image beside text), `grid` (cards) or `compact` (dates and titles).                     |
+| `groupBy`       | none                          | `year` or `month` puts a heading ("2026", "October 2026") above each year's or month's posts.   |
+| `showTags`      | `true`                        | `false` hides tag chips on cards.                                                               |
+| `showCategory`  | `true`                        | `false` hides the category above each card's title.                                             |
+| `categoryList`  | `true`                        | A row of categories in the browse panel, each with its count. `false` leaves it out.            |
+| `categoryLimit` | `8`                           | Categories shown before "+N more", most used first. `0` shows them all.                         |
+| `tagList`       | `true`                        | A row of keywords in the browse panel, each with its count. `false` leaves it out.              |
+| `tagLimit`      | `12`                          | Keywords shown before "+N more", most used first. `0` shows them all.                           |
+| `tagMinCount`   | `1`                           | Leave keywords used by fewer posts out of the browse panel. They still show on cards.           |
+| `archive`       | `true`                        | Rows of years, and each year's months, in the browse panel. `false` leaves them out.            |
+| `pageSize`      | `10` (the `pageSize` option)  | Posts per page. `0` shows them all on one page.                                                 |
+| `pinLimit`      | all (the `pinLimit` option)   | Most pinned posts kept at the top. Extra ones take their place by date.                         |
+| `rssLink`       | `true` (the `rssLink` option) | A "Subscribe" link with the RSS icon to this blog's feed. `false` leaves it out.                |
+| `feed`          | on                            | `false` turns the feed off, or `{ title, description, limit, path }` to set it up.              |
 
 ### Pinned posts
 
@@ -328,7 +331,8 @@ Filters combine: `?category=engineering&tag=api&year=2026` shows the
 engineering posts tagged `api` from 2026. Pages count the matching posts only.
 
 **The browse panel** above the posts has a row each for categories, keywords
-and the archive, each chip with its post count:
+and the archive, each chip with its post count. It is a flat toolbar between
+two rules, with the blog's "Subscribe" link at the end of its first row.
 
 - **Chips combine.** A chip adds its filter to the ones in view; another chip
   in the same row replaces it, and clicking the active chip takes it off again.
@@ -338,8 +342,18 @@ and the archive, each chip with its post count:
 - **Years open into months.** Choosing a year shows a row of its months below
   the years (with only one year, its months always show). A month keeps its
   year active, and clicking it again steps back out to the whole year.
-- Rows only appear when they have something to choose: no categories means no
-  category row, and the archive needs posts from more than one month.
+- **It stays short with many values.** Categories and keywords are ranked by
+  how many posts use them, and a row shows its first `categoryLimit` (8) or
+  `tagLimit` (12), then "+N more". That opens the full list alphabetically,
+  and a row of more than 30 values also gets a field to narrow it. An active
+  chip always shows. `tagMinCount: 2` leaves out keywords used only once.
+- **One line per row on phones.** On screens narrower than 640px, each row is
+  a single line that scrolls sideways, its end fading while there is more.
+  Chips are 32px high on touch screens.
+- **Rows only appear when they can narrow the posts.** No categories, or one
+  category that every post is in, means no category row. The archive needs
+  posts from more than one month, and with only one year, it is that year's
+  months alone.
 
 **The active filters** show above the posts while any filter is on: how many
 posts match ("4 posts", or "No posts match these filters."), a chip for each
@@ -552,6 +566,10 @@ withBlog(config, {
     noMatches: 'Keine Beiträge für diese Filter.',
     removeFilter: 'Filter entfernen: {filter}',
     showAll: 'Alle Beiträge zeigen',
+    more: '+{n} weitere',
+    less: 'Weniger zeigen',
+    filter: '{row} filtern',
+    noFilterMatches: 'Keine Treffer.',
     previous: 'Zurück',
     next: 'Weiter',
     pages: 'Seiten',
@@ -575,7 +593,7 @@ mode. Override these to restyle it without new rules:
 | `--vp-blog-tag-bg`              | `var(--vp-c-default-soft)`    |
 | `--vp-blog-tag-color`           | `var(--vp-c-text-2)`          |
 | `--vp-blog-accent`              | `var(--vp-c-brand-1)`         |
-| `--vp-blog-browse-bg`           | `var(--vp-c-bg-soft)`         |
+| `--vp-blog-browse-bg`           | `transparent`                 |
 | `--vp-blog-facet-label-width`   | `6.5rem`                      |
 | `--vp-blog-announcement-height` | `40px`                        |
 | `--vp-blog-announcement-bg`     | `var(--vp-button-brand-bg)`   |

package/dist/{chunk-ZM5FOUT4.js → chunk-FPFH7ORO.js}

@@ -220,6 +220,10 @@ var DEFAULT_LABELS = {
   noMatches: "No posts match these filters.",
   removeFilter: "Remove filter: {filter}",
   showAll: "Show all posts",
+  more: "+{n} more",
+  less: "Show fewer",
+  filter: "Filter {row}",
+  noFilterMatches: "Nothing matches.",
   previous: "Previous",
   next: "Next",
   pages: "Pages",
@@ -357,7 +361,8 @@ function renderRssLink(index, context, show = index.index.rssLink) {
   if (!show || !context.feeds || !index.index.feed) return "";
   const title = fill(context.labels.rssFeed, { blog: index.title }).replace(/"/g, """);
   const url = toMarkdownUrl(`/${toFeedPath(index)}`);
-  return `<span class="vp-blog-rss">[${RSS_ICON} ${escapeMarkdown(context.labels.subscribe)}](${url} "${title}")</span>`;
+  const text = `<span class="vp-blog-rss__text">${escapeMarkdown(context.labels.subscribe)}</span>`;
+  return `<span class="vp-blog-rss">[${RSS_ICON} ${text}](${url} "${title}")</span>`;
 }
 function fill(template, values) {
   return template.replace(/\{(\w+)\}/g, (match, key) => values[key] ?? match);
@@ -552,60 +557,73 @@ function renderChip(name, count, url, title = "") {
   const tooltip = title ? ` "${title.replace(/"/g, "&quot;")}"` : "";
   return `[<span class="vp-blog-facet__name">${escapeMarkdown(name)}</span> <span class="vp-blog-facet__count">${count}</span>](${url}${tooltip})`;
 }
-function renderFacet(facet, label, chips, ariaLabel = label, attributes = "") {
+function renderFacet(row) {
+  const { facet, label, chips, ariaLabel = label, limit = 0, attributes = "", aside = "" } = row;
+  const limited = limit && chips.length > limit ? ` data-limit="${limit}"` : "";
   return [
-    `<div class="vp-blog-facet vp-blog-facet--${facet}" role="group" aria-label="${escapeHtml(ariaLabel)}" data-vp-blog-facet="${facet}"${attributes}>`,
+    `<div class="vp-blog-facet vp-blog-facet--${facet}" role="group" aria-label="${escapeHtml(ariaLabel)}" data-vp-blog-facet="${facet}"${limited}${attributes}>`,
     `<span class="vp-blog-facet__label" aria-hidden="true">${escapeTemplateText(label)}</span>`,
     '<div class="vp-blog-facet__chips">',
     "",
     chips.join(" "),
     "",
     "</div>",
+    ...block("vp-blog-facet__aside", aside),
     "</div>"
   ];
 }
+function canNarrow(values, total) {
+  return values.length > 1 || values.length === 1 && values[0].count < total;
+}
+function byUse(a, b) {
+  return b.count - a.count || a.value.localeCompare(b.value, void 0, { sensitivity: "base" });
+}
 function renderBrowse(posts, index, context) {
   const { labels } = context;
   const { locale, timeZone } = context.dates;
+  const { categoryList, categoryLimit, tagList, tagLimit, tagMinCount, archive: showArchive } = index.index;
   const blog = index.routePath;
   const rows = [];
-  const categories = index.index.categoryList ? collectCategories(posts) : [];
-  if (categories.length) {
+  const categories = categoryList ? collectCategories(posts).sort(byUse) : [];
+  if (canNarrow(categories, posts.length)) {
     const chips = categories.map(({ value, count }) => renderChip(value, count, toFilterUrl(blog, "category", value)));
-    rows.push(...renderFacet("category", labels.categories, chips));
+    rows.push({ facet: "category", label: labels.categories, chips, limit: categoryLimit });
   }
-  const tags = index.index.tagList ? collectTags(posts) : [];
-  if (tags.length) {
-    const chips = tags.map(({ tag, count }) => renderChip(tag, count, toFilterUrl(blog, "tag", tag)));
-    rows.push(...renderFacet("tag", labels.tags, chips));
+  const tags = tagList ? collectTags(posts).map(({ tag, count }) => ({ value: tag, count })).filter(({ count }) => count >= tagMinCount).sort(byUse) : [];
+  if (canNarrow(tags, posts.length)) {
+    const chips = tags.map(({ value, count }) => renderChip(value, count, toFilterUrl(blog, "tag", value)));
+    rows.push({ facet: "tag", label: labels.tags, chips, limit: tagLimit });
   }
-  const archive = index.index.archive ? collectArchive(posts, timeZone) : [];
-  if (archive.reduce((months, year) => months + year.months.length, 0) > 1) {
+  const archive = showArchive ? collectArchive(posts, timeZone) : [];
+  const monthChips = (months) => months.map(
+    ({ value, count }) => renderChip(
+      formatMonth(value, locale, { month: "short" }),
+      count,
+      toFilterUrl(blog, "month", value),
+      formatMonth(value, locale, { month: "long", year: "numeric" })
+    )
+  );
+  if (archive.length === 1 && canNarrow(archive[0].months, posts.length)) {
+    const [year] = archive;
+    const ariaLabel = `${labels.archive} ${year.value}`;
+    const attributes = ` data-year="${year.value}"`;
+    rows.push({ facet: "month", label: labels.archive, chips: monthChips(year.months), ariaLabel, attributes });
+  } else if (archive.length > 1) {
     const years = archive.map(({ value, count }) => renderChip(value, count, toFilterUrl(blog, "year", value)));
-    rows.push(...renderFacet("year", labels.archive, years));
+    rows.push({ facet: "year", label: labels.archive, chips: years });
     for (const year of archive) {
-      const months = year.months.map(
-        ({ value, count }) => renderChip(
-          formatMonth(value, locale, { month: "short" }),
-          count,
-          toFilterUrl(blog, "month", value),
-          formatMonth(value, locale, { month: "long", year: "numeric" })
-        )
-      );
-      const shown = archive.length === 1 ? "" : " hidden";
-      rows.push(
-        ...renderFacet(
-          "month",
-          year.value,
-          months,
-          `${labels.archive} ${year.value}`,
-          ` data-year="${year.value}"${shown}`
-        )
-      );
+      const ariaLabel = `${labels.archive} ${year.value}`;
+      const attributes = ` data-year="${year.value}" hidden`;
+      rows.push({ facet: "month", label: year.value, chips: monthChips(year.months), ariaLabel, attributes });
     }
   }
   if (rows.length === 0) return [];
-  return [`<nav class="vp-blog-browse" aria-label="${escapeHtml(labels.browse)}">`, ...rows, "</nav>"];
+  rows[0].aside = renderRssLink(index, context);
+  return [
+    `<nav class="vp-blog-browse" aria-label="${escapeHtml(labels.browse)}">`,
+    ...rows.flatMap(renderFacet),
+    "</nav>"
+  ];
 }
 function renderClientAttributes(index, context) {
   const { labels } = context;
@@ -623,7 +641,11 @@ function renderClientAttributes(index, context) {
     "data-label-post-count": labels.postCount,
     "data-label-post-count-one": labels.postCountOne,
     "data-label-no-matches": labels.noMatches,
-    "data-label-remove-filter": labels.removeFilter
+    "data-label-remove-filter": labels.removeFilter,
+    "data-label-more": labels.more,
+    "data-label-less": labels.less,
+    "data-label-filter": labels.filter,
+    "data-label-no-filter-matches": labels.noFilterMatches
   };
   return Object.entries(attributes).map(([name, value]) => `${name}="${escapeHtml(value)}"`).join(" ");
 }
@@ -631,10 +653,10 @@ function renderPostList(pinned, rest, index, context) {
   const all = [...pinned, ...rest];
   if (all.length === 0) return `<p class="vp-blog-empty">${escapeTemplateText(context.labels.noPosts)}</p>
 `;
+  const browse = renderBrowse(all, index, context);
   const lines = [
     `<div class="vp-blog" data-vp-blog ${renderClientAttributes(index, context)}>`,
-    ...block("vp-blog-subscribe", renderRssLink(index, context)),
-    ...renderBrowse(all, index, context),
+    ...browse.length ? browse : block("vp-blog-subscribe", renderRssLink(index, context)),
     '<div class="vp-blog-filter" data-vp-blog-filter role="status" hidden></div>'
   ];
   if (pinned.length)
@@ -695,6 +717,8 @@ var FENCED_CODE = /^[ \t]*(`{3,}|~{3,})[^\n]*\n[\s\S]*?(?:^[ \t]*\1[`~]*[ \t]*$|
 var HEADING_1 = /^ {0,3}#[ \t]+(.*?)(?:[ \t]+#+)?[ \t]*$/m;
 var TAG_SYNTAX = /\(\(<?tag([|/])[^|/)\r\n]*(?:\1[^|/)\r\n]*){0,2}\)\)/g;
 var MAX_SUMMARY_LENGTH = 200;
+var DEFAULT_CATEGORY_LIMIT = 8;
+var DEFAULT_TAG_LIMIT = 12;
 function readFrontmatter(raw) {
   const source = raw.replace(/^/, "");
   const match = FRONTMATTER.exec(source);
@@ -865,7 +889,10 @@ function resolveIndexConfig(data, relativePath, defaults = {}) {
     showTags: options.showTags !== false,
     showCategory: options.showCategory !== false,
     categoryList: options.categoryList !== false,
+    categoryLimit: toCount(options.categoryLimit, DEFAULT_CATEGORY_LIMIT),
     tagList: options.tagList !== false,
+    tagLimit: toCount(options.tagLimit, DEFAULT_TAG_LIMIT),
+    tagMinCount: toCount(options.tagMinCount, 1),
     archive: options.archive !== false,
     pageSize: toCount(options.pageSize, toCount(defaults.pageSize, 10)),
     pinLimit: toCount(options.pinLimit ?? options.stickyLimit, toCount(defaults.pinLimit ?? defaults.stickyLimit, 0)),
@@ -1228,4 +1255,4 @@ export {
   hasWidget,
   blogMarkdown
 };
-//# sourceMappingURL=chunk-ZM5FOUT4.js.map
+//# sourceMappingURL=chunk-FPFH7ORO.js.map