@binarynoir/vitepress-blog 0.4.0 → 0.5.0

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { B as BlogAnnouncementData, a as BlogAnnouncementItem, b as BlogAuthor, c as BlogFeedConfig, d as BlogGroupBy, e as BlogIndexConfig, f as BlogLabels, g as BlogLayout, h as BlogOptions, i as BlogPostData, j as BlogScope, D as DEFAULT_LABELS, k as blogMarkdown } from './plugin-DUTUA_t4.cjs';
+export { B as BlogAnnouncementData, a as BlogAnnouncementItem, b as BlogAuthor, c as BlogFeedConfig, d as BlogGroupBy, e as BlogIndexConfig, f as BlogLabels, g as BlogLayout, h as BlogOptions, i as BlogPostData, j as BlogScope, D as DEFAULT_LABELS, k as blogMarkdown } from './plugin-kzO68Abz.cjs';
 import 'markdown-it';
 
 /** Marker a blog page can use to say where its list of posts goes. Without it the list is appended. */

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { B as BlogAnnouncementData, a as BlogAnnouncementItem, b as BlogAuthor, c as BlogFeedConfig, d as BlogGroupBy, e as BlogIndexConfig, f as BlogLabels, g as BlogLayout, h as BlogOptions, i as BlogPostData, j as BlogScope, D as DEFAULT_LABELS, k as blogMarkdown } from './plugin-DUTUA_t4.js';
+export { B as BlogAnnouncementData, a as BlogAnnouncementItem, b as BlogAuthor, c as BlogFeedConfig, d as BlogGroupBy, e as BlogIndexConfig, f as BlogLabels, g as BlogLayout, h as BlogOptions, i as BlogPostData, j as BlogScope, D as DEFAULT_LABELS, k as blogMarkdown } from './plugin-kzO68Abz.js';
 import 'markdown-it';
 
 /** Marker a blog page can use to say where its list of posts goes. Without it the list is appended. */

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   POST_FRONTMATTER_KEY,
   WIDGET_NAME,
   blogMarkdown
-} from "./chunk-ZM5FOUT4.js";
+} from "./chunk-FPFH7ORO.js";
 import "./chunk-42Z6H7IN.js";
 export {
   BLOG_POSTS_PLACEHOLDER,

package/dist/{plugin-DUTUA_t4.d.cts → plugin-kzO68Abz.d.cts}

@@ -77,7 +77,7 @@ interface BlogOptions {
      * on a site with a site URL (without one, no feeds are written). Default: `true`.
      */
     rssLink?: boolean;
-    /** Words the plugin writes on pages, for translating. `{n}`, `{blog}` and `{filter}` are filled in. */
+    /** Words the plugin writes on pages, for translating. `{n}`, `{blog}`, `{filter}` and `{row}` are filled in. */
     labels?: Partial<BlogLabels>;
 }
 interface BlogLabels {
@@ -131,6 +131,14 @@ interface BlogLabels {
     removeFilter: string;
     /** Link that clears every filter. */
     showAll: string;
+    /** Button that shows the rest of a browse row: "+{n} more". */
+    more: string;
+    /** Button that shows a browse row's first values again. */
+    less: string;
+    /** Accessible name of the field that narrows a long browse row: "Filter {row}". */
+    filter: string;
+    /** When nothing in a browse row matches the filter field. */
+    noFilterMatches: string;
     previous: string;
     next: string;
     /** Accessible name of the page links. */
@@ -173,8 +181,14 @@ interface BlogIndexConfig {
     showCategory: boolean;
     /** List every category above the posts, each one a filter. */
     categoryList: boolean;
+    /** Categories shown before "+N more", most used first. `0` shows them all. */
+    categoryLimit: number;
     /** List every keyword above the posts, each one a filter. */
     tagList: boolean;
+    /** Keywords shown before "+N more", most used first. `0` shows them all. */
+    tagLimit: number;
+    /** Leave keywords used by fewer posts than this out of the browse panel. They still show on cards. */
+    tagMinCount: number;
     /** List the years and months that have posts above the posts, each one a filter. */
     archive: boolean;
     /** Posts per page. `0` shows them all on one page. */

package/dist/{plugin-DUTUA_t4.d.ts → plugin-kzO68Abz.d.ts}

@@ -77,7 +77,7 @@ interface BlogOptions {
      * on a site with a site URL (without one, no feeds are written). Default: `true`.
      */
     rssLink?: boolean;
-    /** Words the plugin writes on pages, for translating. `{n}`, `{blog}` and `{filter}` are filled in. */
+    /** Words the plugin writes on pages, for translating. `{n}`, `{blog}`, `{filter}` and `{row}` are filled in. */
     labels?: Partial<BlogLabels>;
 }
 interface BlogLabels {
@@ -131,6 +131,14 @@ interface BlogLabels {
     removeFilter: string;
     /** Link that clears every filter. */
     showAll: string;
+    /** Button that shows the rest of a browse row: "+{n} more". */
+    more: string;
+    /** Button that shows a browse row's first values again. */
+    less: string;
+    /** Accessible name of the field that narrows a long browse row: "Filter {row}". */
+    filter: string;
+    /** When nothing in a browse row matches the filter field. */
+    noFilterMatches: string;
     previous: string;
     next: string;
     /** Accessible name of the page links. */
@@ -173,8 +181,14 @@ interface BlogIndexConfig {
     showCategory: boolean;
     /** List every category above the posts, each one a filter. */
     categoryList: boolean;
+    /** Categories shown before "+N more", most used first. `0` shows them all. */
+    categoryLimit: number;
     /** List every keyword above the posts, each one a filter. */
     tagList: boolean;
+    /** Keywords shown before "+N more", most used first. `0` shows them all. */
+    tagLimit: number;
+    /** Leave keywords used by fewer posts than this out of the browse panel. They still show on cards. */
+    tagMinCount: number;
     /** List the years and months that have posts above the posts, each one a filter. */
     archive: boolean;
     /** Posts per page. `0` shows them all on one page. */

package/dist/style.css

@@ -10,7 +10,7 @@
   --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;
   /* Width of the label column in the browse panel, so every row's chips line up. */
   --vp-blog-facet-label-width: 6.5rem;
   --vp-blog-announcement-height: 40px;
@@ -192,7 +192,7 @@
 .vp-blog-tag,
 .vp-blog-category,
 .vp-blog-badge,
-.vp-blog-facet a,
+.vp-blog-facet__chips a,
 .vp-blog-card__tags a,
 .vp-blog-byline__category a,
 .vp-blog-byline__tags a {
@@ -204,11 +204,22 @@
   color: var(--vp-blog-tag-color);
   font-size: 12px;
   font-weight: 500;
-  line-height: 22px;
+  /* 24px: the smallest target WCAG 2.2 AA allows. Touch screens get more below. */
+  line-height: 24px;
+}
+
+/* Chips you tap are 32px high on touch screens. */
+@media (pointer: coarse) {
+  .vp-blog-facet__chips a,
+  .vp-blog-card__tags a,
+  .vp-blog-byline__category a,
+  .vp-blog-byline__tags a {
+    line-height: 32px;
+  }
 }
 
 /* Chips are links that filter their blog. */
-.vp-blog .vp-blog-facet a,
+.vp-blog .vp-blog-facet__chips a,
 .vp-blog .vp-blog-card__tags a,
 .vp-blog-byline__category a,
 .vp-blog-byline__tags a {
@@ -219,11 +230,11 @@
     opacity 0.25s;
 }
 
-.vp-blog .vp-blog-facet a:hover,
+.vp-blog .vp-blog-facet__chips a:hover,
 .vp-blog .vp-blog-card__tags a:hover,
 .vp-blog-byline__category a:hover,
 .vp-blog-byline__tags a:hover,
-.vp-blog .vp-blog-facet a.is-active,
+.vp-blog .vp-blog-facet__chips a.is-active,
 .vp-blog .vp-blog-card__tags a.is-active {
   background: var(--vp-c-brand-soft);
   color: var(--vp-blog-accent);
@@ -311,24 +322,27 @@
 
 /*
  * The browse panel: one row each for categories, keywords and years, and the
- * months of the year in view below the years. Labels sit in a column of their
- * own on wide screens, above their chips on narrow ones.
+ * months of the year in view below the years. A flat toolbar between two
+ * rules, so it reads as a tool rather than another post. On wide screens the
+ * labels sit in a column of their own and chips wrap; on narrow ones each row
+ * is a single line that scrolls sideways.
  */
 .vp-blog-browse {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
   margin: 16px 0;
-  padding: 14px 16px;
-  border: 1px solid var(--vp-blog-card-border);
-  border-radius: var(--vp-blog-card-radius);
+  padding: 12px 0;
+  border-top: 1px solid var(--vp-c-divider);
+  border-bottom: 1px solid var(--vp-c-divider);
   background: var(--vp-blog-browse-bg);
 }
 
 .vp-blog-facet {
   display: grid;
-  grid-template-columns: var(--vp-blog-facet-label-width) minmax(0, 1fr);
-  gap: 2px 12px;
+  /* Label, chips, then "+N more" and the "Subscribe" link when the row has them. */
+  grid-template-columns: var(--vp-blog-facet-label-width) minmax(0, 1fr) auto auto;
+  gap: 4px 12px;
   align-items: baseline;
 }
 
@@ -336,19 +350,33 @@
   color: var(--vp-blog-meta-color);
   font-size: 13px;
   font-weight: 600;
-  line-height: 26px;
+  line-height: 28px;
 }
 
-/* A year's months: tucked under the years, their label the year. */
+/* A year's months, under the years: their label is the year. */
 .vp-blog-facet--month .vp-blog-facet__label {
   font-variant-numeric: tabular-nums;
   font-weight: 500;
 }
 
+.vp-blog-facet__chips {
+  min-width: 0;
+}
+
 .vp-blog-facet__chips p {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  align-items: center;
   margin: 0;
 }
 
+.vp-blog .vp-blog-facet__chips a {
+  flex: none;
+  margin: 0;
+  white-space: nowrap;
+}
+
 /* The post count in a chip: a small counter badge inside it. */
 .vp-blog-facet__count {
   display: inline-block;
@@ -369,29 +397,125 @@
     color 0.25s;
 }
 
-.vp-blog-facet a:hover .vp-blog-facet__count,
-.vp-blog-facet a.is-active .vp-blog-facet__count {
+.vp-blog-facet__chips a:hover .vp-blog-facet__count,
+.vp-blog-facet__chips a.is-active .vp-blog-facet__count {
   background: var(--vp-blog-accent);
   /* The page background, so the number stays readable on the accent in light and dark mode. */
   color: var(--vp-c-bg);
 }
 
 /* A chip that would show no posts with the other filters kept. */
-.vp-blog .vp-blog-facet a.is-empty {
+.vp-blog .vp-blog-facet__chips a.is-empty {
   opacity: 0.45;
 }
 
-.vp-blog .vp-blog-facet a.is-empty:hover {
+.vp-blog .vp-blog-facet__chips a.is-empty:hover {
   opacity: 0.8;
 }
 
+/* "+N more" and "Show fewer": a quiet text button at the end of the row's first line. */
+.vp-blog-facet__more {
+  justify-self: start;
+  padding: 0 6px;
+  border-radius: 6px;
+  color: var(--vp-blog-accent);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 28px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.vp-blog-facet__more:hover {
+  background: var(--vp-c-brand-soft);
+}
+
+/* The field that narrows a long open row, above its chips. */
+.vp-blog-facet__filter {
+  display: block;
+  box-sizing: border-box;
+  width: min(100%, 18rem);
+  margin: 0 0 8px;
+  padding: 4px 10px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.vp-blog-facet__filter:focus {
+  border-color: var(--vp-blog-accent);
+  outline: none;
+}
+
+.vp-blog-facet__empty {
+  margin: 0;
+  color: var(--vp-blog-meta-color);
+  font-size: 13px;
+}
+
+/* The "Subscribe" link at the end of the first row. */
+.vp-blog-facet__aside p {
+  margin: 0;
+  white-space: nowrap;
+}
+
+@media (pointer: coarse) {
+  .vp-blog-facet__more {
+    line-height: 32px;
+  }
+
+  .vp-blog-facet__label {
+    line-height: 32px;
+  }
+}
+
 @media (max-width: 639px) {
   .vp-blog-facet {
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    gap: 4px 8px;
+    align-items: center;
   }
 
   .vp-blog-facet__label {
-    line-height: 20px;
+    font-size: 12px;
+  }
+
+  /* One line per row, scrolled sideways, its end fading while there is more. */
+  .vp-blog-facet:not(.is-open) .vp-blog-facet__chips {
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+  }
+
+  .vp-blog-facet:not(.is-open) .vp-blog-facet__chips::-webkit-scrollbar {
+    display: none;
+  }
+
+  .vp-blog-facet:not(.is-open) .vp-blog-facet__chips p {
+    flex-wrap: nowrap;
+  }
+
+  .vp-blog-facet.is-scrollable:not(.is-open) .vp-blog-facet__chips {
+    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
+  }
+
+  /* An open row wraps under its label, at full width. */
+  .vp-blog-facet.is-open .vp-blog-facet__chips {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+
+  /* The RSS icon alone, its words kept for screen readers. */
+  .vp-blog-facet__aside .vp-blog-rss__text {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
   }
 }
 

package/dist/vitepress.cjs

@@ -160,6 +160,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",
@@ -347,6 +351,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);
@@ -517,7 +523,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)),
@@ -648,7 +657,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, "&quot;");
   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);
@@ -843,60 +853,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;
@@ -914,7 +937,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(" ");
 }
@@ -922,10 +949,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)