@binarynoir/vitepress-blog 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -288,6 +288,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",
@@ -319,7 +323,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);
@@ -514,60 +519,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;
@@ -585,7 +603,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(" ");
 }
@@ -593,10 +615,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)
@@ -662,6 +684,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);
@@ -832,7 +856,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)),