@binarynoir/vitepress-blog 0.2.0 → 0.4.0

package/dist/client.d.cts

@@ -1,29 +1,72 @@
+import * as vue from 'vue';
+
 /**
- * Keyword filtering and pagination for blog pages, in the browser. The build
- * writes every post into the page (see `renderPostList`); this hides the ones
- * the URL's `?tag=` and `?page=` leave out, and fills in the filter banner and
- * the page links. Without it, every post simply shows.
+ * The announcement banner: one line across the top of the page, above the
+ * nav bar, with the newest announcement linked to its post. With more than
+ * one not yet dismissed, a badge counts them and links to the blog page
+ * filtered to announcements. Its close button dismisses every current one;
+ * a newer announcement brings it back. Put it in the theme's `layout-top` slot:
+ *
+ * ```ts
+ * // .vitepress/theme/index.ts
+ * import { h } from 'vue';
+ * import DefaultTheme from 'vitepress/theme';
+ * import { BlogAnnouncementBanner } from '@binarynoir/vitepress-blog/client';
+ *
+ * export default {
+ *   extends: DefaultTheme,
+ *   Layout: () => h(DefaultTheme.Layout, null, { 'layout-top': () => h(BlogAnnouncementBanner) }),
+ * };
+ * ```
+ *
+ * It reads what `blogVitePlugin` (or `withBlog`) puts on the site data, and
+ * renders nothing without it.
+ */
+declare const BlogAnnouncementBanner: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Filtering and pagination for blog pages, in the browser. The build writes
+ * every post into the page (see `renderPostList`); this hides the ones the
+ * URL's `?category=`, `?tag=`, `?year=`, `?month=`, `?announcements` and
+ * `?page=` leave out, keeps the browse panel's chips and counts in step with
+ * them, and fills in the active filters and the page links. Without it, every
+ * post simply shows.
+ */
+/**
+ * What the URL filters by. Every filter must match. The category and keyword
+ * are lowercased; `date` is `''`, a year (`2026`) or a month (`2026-10`).
  */
-interface BlogViewState {
+interface BlogFilter {
+    category: string;
     tag: string;
+    date: string;
+    /** Whether only announcements show (`?announcements`). */
+    announcements: boolean;
+}
+/** Reads the filter from `?category=`, `?tag=`, `?year=` and `?month=`. A month names its year too, so it wins over `?year=`. */
+declare function readFilter(url: URL): BlogFilter;
+interface BlogViewState extends BlogFilter {
     page: number;
     pageCount: number;
 }
 /**
- * Shows the posts of one blog page that `url` asks for: those with its
- * `?tag=` keyword (any case), and of those, the ones on its `?page=`. Pinned
- * sticky posts only show on the first page and aren't counted in the page
- * size. Returns what is showing.
+ * Shows the posts of one blog page that `url` asks for: those matching every
+ * filter it gives (category and keyword in any case, a year or a month, only
+ * announcements), and of those, the ones on its `?page=`. Pinned posts
+ * only show on the first page and aren't counted in the page size. Returns
+ * what is showing.
  */
 declare function applyBlogView(blog: HTMLElement, url: URL): BlogViewState;
 /**
- * Applies `url` to every blog page in `root`. When the page or keyword of a
+ * Applies `url` to every blog page in `root`. When the page or a filter of a
  * blog already on screen changes, it is scrolled back to its top.
  */
 declare function applyBlogViews(root?: ParentNode, url?: URL): void;
 
 /**
- * Turns on keyword filtering (`?tag=`) and pagination (`?page=`) on blog
+ * Turns on filtering (`?category=`, `?tag=`, `?year=`, `?month=`) and pagination (`?page=`) on blog
  * pages. Call it from your theme's `setup()`:
  *
  * ```ts
@@ -40,7 +83,7 @@ declare function applyBlogViews(root?: ParentNode, url?: URL): void;
  * };
  * ```
  *
- * Keyword and page links are ordinary links: VitePress's router follows them
+ * Filter and page links are ordinary links: VitePress's router follows them
  * without reloading the page, and this re-applies the view whenever the path
  * or query string changes. It runs after the page has hydrated, so the
  * server-rendered HTML (every post) and the first client render agree.
@@ -48,4 +91,4 @@ declare function applyBlogViews(root?: ParentNode, url?: URL): void;
  */
 declare function useBlog(): void;
 
-export { type BlogViewState, applyBlogView, applyBlogViews, useBlog };
+export { BlogAnnouncementBanner, type BlogFilter, type BlogViewState, applyBlogView, applyBlogViews, readFilter, useBlog };

package/dist/client.d.ts

@@ -1,29 +1,72 @@
+import * as vue from 'vue';
+
 /**
- * Keyword filtering and pagination for blog pages, in the browser. The build
- * writes every post into the page (see `renderPostList`); this hides the ones
- * the URL's `?tag=` and `?page=` leave out, and fills in the filter banner and
- * the page links. Without it, every post simply shows.
+ * The announcement banner: one line across the top of the page, above the
+ * nav bar, with the newest announcement linked to its post. With more than
+ * one not yet dismissed, a badge counts them and links to the blog page
+ * filtered to announcements. Its close button dismisses every current one;
+ * a newer announcement brings it back. Put it in the theme's `layout-top` slot:
+ *
+ * ```ts
+ * // .vitepress/theme/index.ts
+ * import { h } from 'vue';
+ * import DefaultTheme from 'vitepress/theme';
+ * import { BlogAnnouncementBanner } from '@binarynoir/vitepress-blog/client';
+ *
+ * export default {
+ *   extends: DefaultTheme,
+ *   Layout: () => h(DefaultTheme.Layout, null, { 'layout-top': () => h(BlogAnnouncementBanner) }),
+ * };
+ * ```
+ *
+ * It reads what `blogVitePlugin` (or `withBlog`) puts on the site data, and
+ * renders nothing without it.
+ */
+declare const BlogAnnouncementBanner: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Filtering and pagination for blog pages, in the browser. The build writes
+ * every post into the page (see `renderPostList`); this hides the ones the
+ * URL's `?category=`, `?tag=`, `?year=`, `?month=`, `?announcements` and
+ * `?page=` leave out, keeps the browse panel's chips and counts in step with
+ * them, and fills in the active filters and the page links. Without it, every
+ * post simply shows.
+ */
+/**
+ * What the URL filters by. Every filter must match. The category and keyword
+ * are lowercased; `date` is `''`, a year (`2026`) or a month (`2026-10`).
  */
-interface BlogViewState {
+interface BlogFilter {
+    category: string;
     tag: string;
+    date: string;
+    /** Whether only announcements show (`?announcements`). */
+    announcements: boolean;
+}
+/** Reads the filter from `?category=`, `?tag=`, `?year=` and `?month=`. A month names its year too, so it wins over `?year=`. */
+declare function readFilter(url: URL): BlogFilter;
+interface BlogViewState extends BlogFilter {
     page: number;
     pageCount: number;
 }
 /**
- * Shows the posts of one blog page that `url` asks for: those with its
- * `?tag=` keyword (any case), and of those, the ones on its `?page=`. Pinned
- * sticky posts only show on the first page and aren't counted in the page
- * size. Returns what is showing.
+ * Shows the posts of one blog page that `url` asks for: those matching every
+ * filter it gives (category and keyword in any case, a year or a month, only
+ * announcements), and of those, the ones on its `?page=`. Pinned posts
+ * only show on the first page and aren't counted in the page size. Returns
+ * what is showing.
  */
 declare function applyBlogView(blog: HTMLElement, url: URL): BlogViewState;
 /**
- * Applies `url` to every blog page in `root`. When the page or keyword of a
+ * Applies `url` to every blog page in `root`. When the page or a filter of a
  * blog already on screen changes, it is scrolled back to its top.
  */
 declare function applyBlogViews(root?: ParentNode, url?: URL): void;
 
 /**
- * Turns on keyword filtering (`?tag=`) and pagination (`?page=`) on blog
+ * Turns on filtering (`?category=`, `?tag=`, `?year=`, `?month=`) and pagination (`?page=`) on blog
  * pages. Call it from your theme's `setup()`:
  *
  * ```ts
@@ -40,7 +83,7 @@ declare function applyBlogViews(root?: ParentNode, url?: URL): void;
  * };
  * ```
  *
- * Keyword and page links are ordinary links: VitePress's router follows them
+ * Filter and page links are ordinary links: VitePress's router follows them
  * without reloading the page, and this re-applies the view whenever the path
  * or query string changes. It runs after the page has hydrated, so the
  * server-rendered HTML (every post) and the first client render agree.
@@ -48,4 +91,4 @@ declare function applyBlogViews(root?: ParentNode, url?: URL): void;
  */
 declare function useBlog(): void;
 
-export { type BlogViewState, applyBlogView, applyBlogViews, useBlog };
+export { BlogAnnouncementBanner, type BlogFilter, type BlogViewState, applyBlogView, applyBlogViews, readFilter, useBlog };

package/dist/client.js

@@ -1,139 +1,352 @@
+import {
+  ANNOUNCEMENTS_KEY,
+  DISMISSED_CLASS,
+  DISMISSED_STORAGE_KEY
+} from "./chunk-42Z6H7IN.js";
+
 // src/client.ts
-import * as vitepress from "vitepress";
-import { nextTick, onMounted, watch } from "vue";
+import * as vitepress2 from "vitepress";
+import { nextTick, onMounted as onMounted2, watch } from "vue";
 
 // src/view.ts
 var ITEM = "[data-vp-blog-item]";
+var FILTER_LINKS = ".vp-blog-facet a, .vp-blog-card__category a, .vp-blog-card__tags a";
 function readLabels(blog) {
   const { dataset } = blog;
   return {
-    tagged: dataset.labelTagged ?? "Posts tagged {tag}",
     showAll: dataset.labelShowAll ?? "Show all posts",
-    noTagged: dataset.labelNoTagged ?? "No posts tagged {tag}.",
     previous: dataset.labelPrevious ?? "Previous",
     next: dataset.labelNext ?? "Next",
-    pages: dataset.labelPages ?? "Pages"
+    pages: dataset.labelPages ?? "Pages",
+    announcements: dataset.labelAnnouncements ?? "Announcements",
+    category: dataset.labelCategory ?? "Category",
+    tag: dataset.labelTag ?? "Keyword",
+    postCount: dataset.labelPostCount ?? "{n} posts",
+    postCountOne: dataset.labelPostCountOne ?? "{n} post",
+    noMatches: dataset.labelNoMatches ?? "No posts match these filters.",
+    removeFilter: dataset.labelRemoveFilter ?? "Remove filter: {filter}"
+  };
+}
+function readFilter(url) {
+  const text = (name) => (url.searchParams.get(name) ?? "").trim().toLowerCase();
+  const month = text("month");
+  const year = text("year");
+  return {
+    category: text("category"),
+    tag: text("tag"),
+    date: /^\d{4}-(?:0[1-9]|1[0-2])$/.test(month) ? month : /^\d{4}$/.test(year) ? year : "",
+    announcements: url.searchParams.has("announcements")
   };
 }
 function itemElement(marker) {
   return marker.tagName === "ARTICLE" ? marker : marker.closest("li") ?? marker;
 }
-function hasTag(marker, tag) {
-  return !tag || (marker.getAttribute("data-tags") ?? "").split("|").includes(tag);
+function matches(marker, filter) {
+  const { category, tag, date, announcements } = filter;
+  return (!tag || (marker.getAttribute("data-tags") ?? "").split("|").includes(tag)) && (!category || marker.getAttribute("data-category") === category) && // `2026` matches every month of 2026; `2026-10` only October.
+  (!date || (marker.getAttribute("data-month") ?? "").startsWith(date)) && (!announcements || marker.hasAttribute("data-announcement"));
 }
-function toHref(url, tag, page) {
+function toHref(url, filter, page = 1) {
   const next = new URL(url.href);
   next.hash = "";
-  if (tag) next.searchParams.set("tag", tag);
-  else next.searchParams.delete("tag");
-  if (page > 1) next.searchParams.set("page", String(page));
-  else next.searchParams.delete("page");
-  return next.pathname + next.search;
-}
-function fillWithTag(element, template, tag) {
-  const [before, after = ""] = template.split("{tag}");
-  const strong = document.createElement("strong");
-  strong.textContent = tag;
-  element.replaceChildren(document.createTextNode(before), ...template.includes("{tag}") ? [strong] : [], after);
+  const set = (name, value) => value ? next.searchParams.set(name, value) : next.searchParams.delete(name);
+  set("category", filter.category);
+  set("tag", filter.tag);
+  set("year", filter.date.length === 4 ? filter.date : "");
+  set("month", filter.date.length === 7 ? filter.date : "");
+  if (filter.announcements) next.searchParams.set("announcements", "");
+  else next.searchParams.delete("announcements");
+  set("page", page > 1 ? String(page) : "");
+  return next.pathname + next.search.replace(/([?&]announcements)=(?=&|$)/, "$1");
+}
+function readFilterLink(anchor) {
+  if (!anchor.dataset.vpBlogFacet) {
+    let params;
+    try {
+      params = new URL(anchor.href, location.href).searchParams;
+    } catch {
+      return null;
+    }
+    const param = ["category", "tag", "month", "year"].find((name) => params.has(name));
+    if (!param) return null;
+    anchor.dataset.vpBlogFacet = param === "year" || param === "month" ? "date" : param;
+    anchor.dataset.vpBlogValue = (params.get(param) ?? "").trim().toLowerCase();
+  }
+  return { facet: anchor.dataset.vpBlogFacet, value: anchor.dataset.vpBlogValue ?? "" };
+}
+function withValue(filter, { facet, value }) {
+  return { ...filter, [facet]: value };
+}
+function isActive({ facet, value }, filter) {
+  if (facet !== "date") return filter[facet] === value;
+  return value.length === 4 ? filter.date.startsWith(value) : filter.date === value;
+}
+function toggle(filter, link2) {
+  if (link2.facet !== "date")
+    return withValue(filter, { ...link2, value: filter[link2.facet] === link2.value ? "" : link2.value });
+  if (filter.date !== link2.value) return withValue(filter, link2);
+  return { ...filter, date: link2.value.length === 7 ? link2.value.slice(0, 4) : "" };
+}
+function markActive(anchor, active) {
+  anchor.classList.toggle("is-active", active);
+  if (active) anchor.setAttribute("aria-current", "true");
+  else anchor.removeAttribute("aria-current");
+}
+function syncBrowse(blog, url, filter, markers) {
+  const browse = blog.querySelector(".vp-blog-browse");
+  if (!browse) return;
+  for (const anchor of browse.querySelectorAll(".vp-blog-facet a")) {
+    const link2 = readFilterLink(anchor);
+    if (!link2) continue;
+    const active = isActive(link2, filter);
+    const count = markers.filter((marker) => matches(marker, withValue(filter, link2))).length;
+    anchor.href = toHref(url, toggle(filter, link2));
+    markActive(anchor, active);
+    anchor.classList.toggle("is-empty", count === 0 && !active);
+    const counter = anchor.querySelector(".vp-blog-facet__count");
+    if (counter) counter.textContent = String(count);
+  }
+  const months = [...browse.querySelectorAll('[data-vp-blog-facet="month"]')];
+  for (const row of months) row.hidden = months.length > 1 && row.dataset.year !== filter.date.slice(0, 4);
+}
+function findName(blog, facet, value) {
+  for (const anchor of blog.querySelectorAll(FILTER_LINKS)) {
+    const link2 = readFilterLink(anchor);
+    if (link2?.facet === facet && link2.value === value) {
+      const name = (anchor.querySelector(".vp-blog-facet__name") ?? anchor).textContent?.trim();
+      if (name) return name;
+    }
+  }
+  return value;
+}
+function formatDate(date, locale) {
+  if (date.length === 4) return date;
+  const [year, month] = date.split("-").map(Number);
+  try {
+    return new Intl.DateTimeFormat(locale, { timeZone: "UTC", month: "long", year: "numeric" }).format(
+      Date.UTC(year, month - 1, 1, 12)
+    );
+  } catch {
+    return date;
+  }
+}
+function element(tag, className, text = "") {
+  const node = document.createElement(tag);
+  node.className = className;
+  node.textContent = text;
+  return node;
 }
 function link(text, href, className) {
-  const anchor = document.createElement("a");
-  anchor.className = className;
+  const anchor = element("a", className, text);
   anchor.href = href;
-  anchor.textContent = text;
   return anchor;
 }
-function renderFilter(slot, url, tag, matches, labels) {
-  slot.hidden = !tag;
-  if (!tag) return slot.replaceChildren();
-  const message = document.createElement("span");
-  fillWithTag(message, matches ? labels.tagged : labels.noTagged, tag);
-  slot.replaceChildren(message, " ", link(labels.showAll, toHref(url, "", 1), "vp-blog-filter__clear"));
+function listActiveFilters(blog, filter, labels) {
+  const active = [];
+  if (filter.announcements) {
+    active.push({ kind: "", name: labels.announcements, without: { ...filter, announcements: false } });
+  }
+  if (filter.category) {
+    const name = findName(blog, "category", filter.category);
+    active.push({ kind: labels.category, name, without: { ...filter, category: "" } });
+  }
+  if (filter.tag) {
+    active.push({ kind: labels.tag, name: findName(blog, "tag", filter.tag), without: { ...filter, tag: "" } });
+  }
+  if (filter.date) {
+    const name = formatDate(filter.date, blog.dataset.locale || document.documentElement.lang || "en-US");
+    active.push({ kind: "", name, without: { ...filter, date: "" } });
+  }
+  return active;
+}
+function renderFilter(slot, blog, url, filter, count, labels) {
+  const active = listActiveFilters(blog, filter, labels);
+  slot.hidden = active.length === 0;
+  if (slot.hidden) return slot.replaceChildren();
+  const summary = count === 0 ? labels.noMatches : count === 1 ? labels.postCountOne : labels.postCount;
+  const parts = [element("span", "vp-blog-filter__count", summary.replace("{n}", String(count)))];
+  for (const { kind, name, without } of active) {
+    const chip = link("", toHref(url, without), "vp-blog-filter__chip");
+    chip.setAttribute("aria-label", labels.removeFilter.replace("{filter}", kind ? `${kind} ${name}` : name));
+    if (kind) chip.append(element("span", "vp-blog-filter__kind", kind), " ");
+    const remove = element("span", "vp-blog-filter__remove", "\xD7");
+    remove.setAttribute("aria-hidden", "true");
+    chip.append(name, remove);
+    parts.push(chip);
+  }
+  const clear = { category: "", tag: "", date: "", announcements: false };
+  parts.push(link(labels.showAll, toHref(url, clear), "vp-blog-filter__clear"));
+  slot.replaceChildren(...parts);
 }
-function renderPagination(slot, url, tag, page, pageCount, labels) {
+function renderPagination(slot, url, filter, page, pageCount, labels) {
   slot.hidden = pageCount < 2;
   slot.setAttribute("aria-label", labels.pages);
   if (pageCount < 2) return slot.replaceChildren();
   const parts = [];
-  if (page > 1) parts.push(link(labels.previous, toHref(url, tag, page - 1), "vp-blog-pagination__previous"));
+  if (page > 1) parts.push(link(labels.previous, toHref(url, filter, page - 1), "vp-blog-pagination__previous"));
   for (let number = 1; number <= pageCount; number++) {
     if (number === page) {
-      const current = document.createElement("span");
-      current.className = "vp-blog-pagination__page is-current";
+      const current = element("span", "vp-blog-pagination__page is-current", String(number));
       current.setAttribute("aria-current", "page");
-      current.textContent = String(number);
       parts.push(current);
     } else {
-      parts.push(link(String(number), toHref(url, tag, number), "vp-blog-pagination__page"));
+      parts.push(link(String(number), toHref(url, filter, number), "vp-blog-pagination__page"));
     }
   }
-  if (page < pageCount) parts.push(link(labels.next, toHref(url, tag, page + 1), "vp-blog-pagination__next"));
+  if (page < pageCount) parts.push(link(labels.next, toHref(url, filter, page + 1), "vp-blog-pagination__next"));
   slot.replaceChildren(...parts);
 }
-function markActiveTags(blog, tag) {
-  for (const anchor of blog.querySelectorAll(".vp-blog-tags a, .vp-blog-card__tags a")) {
-    let linkTag = "";
-    try {
-      linkTag = new URL(anchor.href, location.href).searchParams.get("tag") ?? "";
-    } catch {
-    }
-    const active = !!tag && linkTag.toLowerCase() === tag;
-    anchor.classList.toggle("is-active", active);
-    if (active) anchor.setAttribute("aria-current", "true");
-    else anchor.removeAttribute("aria-current");
+function markCardLinks(blog, filter) {
+  for (const anchor of blog.querySelectorAll(".vp-blog-card__category a, .vp-blog-card__tags a")) {
+    const link2 = readFilterLink(anchor);
+    markActive(anchor, !!link2 && isActive(link2, filter));
   }
 }
 function applyBlogView(blog, url) {
   const labels = readLabels(blog);
-  const tag = (url.searchParams.get("tag") ?? "").trim().toLowerCase();
+  const filter = readFilter(url);
   const pageSize = Math.max(0, Number(blog.dataset.pageSize) || 0);
   const markers = [...blog.querySelectorAll(ITEM)];
-  const isSticky = (marker) => !!marker.closest("[data-vp-blog-sticky]");
-  const sticky = markers.filter((marker) => isSticky(marker) && hasTag(marker, tag));
-  const rest = markers.filter((marker) => !isSticky(marker) && hasTag(marker, tag));
+  const isPinned = (marker) => !!marker.closest("[data-vp-blog-pinned]");
+  const pinned = markers.filter((marker) => isPinned(marker) && matches(marker, filter));
+  const rest = markers.filter((marker) => !isPinned(marker) && matches(marker, filter));
   const pageCount = pageSize ? Math.max(1, Math.ceil(rest.length / pageSize)) : 1;
   const requested = Number.parseInt(url.searchParams.get("page") ?? "1", 10);
   const page = Math.min(pageCount, Math.max(1, Number.isFinite(requested) ? requested : 1));
   const shown = /* @__PURE__ */ new Set([
-    ...page === 1 ? sticky : [],
+    ...page === 1 ? pinned : [],
     ...pageSize ? rest.slice((page - 1) * pageSize, page * pageSize) : rest
   ]);
   for (const marker of markers) itemElement(marker).hidden = !shown.has(marker);
-  for (const group of blog.querySelectorAll("[data-vp-blog-sticky], .vp-blog-year")) {
+  for (const group of blog.querySelectorAll("[data-vp-blog-pinned], .vp-blog-group")) {
     group.hidden = ![...group.querySelectorAll(ITEM)].some((marker) => shown.has(marker));
   }
-  const filter = blog.querySelector("[data-vp-blog-filter]");
-  if (filter) renderFilter(filter, url, tag, sticky.length + rest.length, labels);
+  const banner = blog.querySelector("[data-vp-blog-filter]");
+  if (banner) renderFilter(banner, blog, url, filter, pinned.length + rest.length, labels);
   const pagination = blog.querySelector("[data-vp-blog-pagination]");
-  if (pagination) renderPagination(pagination, url, tag, page, pageCount, labels);
-  markActiveTags(blog, tag);
-  return { tag, page, pageCount };
+  if (pagination) renderPagination(pagination, url, filter, page, pageCount, labels);
+  syncBrowse(blog, url, filter, markers);
+  markCardLinks(blog, filter);
+  return { ...filter, page, pageCount };
 }
 var lastViews = /* @__PURE__ */ new WeakMap();
+function viewChanged(previous, view) {
+  return ["category", "tag", "date", "announcements", "page"].some((key) => previous[key] !== view[key]);
+}
 function applyBlogViews(root = document, url = new URL(location.href)) {
   for (const blog of root.querySelectorAll("[data-vp-blog]")) {
     const previous = lastViews.get(blog);
     const view = applyBlogView(blog, url);
     lastViews.set(blog, view);
-    if (previous && (previous.page !== view.page || previous.tag !== view.tag) && blog.getBoundingClientRect().top < 0) {
+    if (previous && viewChanged(previous, view) && blog.getBoundingClientRect().top < 0) {
       blog.scrollIntoView({ block: "start" });
     }
   }
 }
 
+// src/banner.ts
+import * as vitepress from "vitepress";
+import { computed, defineComponent, h, onMounted, ref } from "vue";
+var closeIcon = () => h("svg", { viewBox: "0 0 24 24", width: 16, height: 16, "aria-hidden": "true" }, [
+  h("path", {
+    fill: "currentColor",
+    d: "M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12 5.7 16.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z"
+  })
+]);
+function readDismissed() {
+  try {
+    const value = JSON.parse(localStorage.getItem(DISMISSED_STORAGE_KEY) ?? "[]");
+    return Array.isArray(value) ? value.filter((id) => typeof id === "string") : [];
+  } catch {
+    return [];
+  }
+}
+function writeDismissed(ids) {
+  try {
+    localStorage.setItem(DISMISSED_STORAGE_KEY, JSON.stringify(ids));
+  } catch {
+  }
+}
+var BlogAnnouncementBanner = defineComponent({
+  name: "BlogAnnouncementBanner",
+  setup() {
+    if (typeof vitepress.useData !== "function") return () => null;
+    const { site } = vitepress.useData();
+    const data = computed(
+      () => site.value[ANNOUNCEMENTS_KEY]
+    );
+    const dismissed = ref(null);
+    onMounted(() => {
+      dismissed.value = readDismissed();
+    });
+    const latest = computed(() => data.value?.items[0]);
+    const active = computed(() => (data.value?.items ?? []).filter((item) => !dismissed.value?.includes(item.id)));
+    const dismiss = () => {
+      const ids = (data.value?.items ?? []).map((item) => item.id);
+      dismissed.value = ids;
+      writeDismissed(ids);
+      document.documentElement.classList.add(DISMISSED_CLASS);
+    };
+    return () => {
+      const announcement = latest.value;
+      if (!data.value || !announcement || dismissed.value?.includes(announcement.id)) return null;
+      const { labels, listLink } = data.value;
+      const count = active.value.length;
+      const countLabel = labels.announcementCount.replace("{n}", String(count));
+      const badge = count > 1 ? listLink ? h(
+        "a",
+        {
+          class: "vp-blog-announcement__count",
+          href: vitepress.withBase(listLink),
+          title: countLabel,
+          "aria-label": countLabel
+        },
+        String(count)
+      ) : h(
+        "span",
+        { class: "vp-blog-announcement__count", title: countLabel, "aria-label": countLabel },
+        String(count)
+      ) : null;
+      return h("div", { class: "vp-blog-announcement", role: "region", "aria-label": labels.announcement }, [
+        h("div", { class: "vp-blog-announcement__content" }, [
+          h(
+            "a",
+            { class: "vp-blog-announcement__text", href: vitepress.withBase(announcement.link) },
+            announcement.text
+          ),
+          badge
+        ]),
+        h(
+          "button",
+          {
+            class: "vp-blog-announcement__dismiss",
+            type: "button",
+            title: labels.dismiss,
+            "aria-label": labels.dismiss,
+            onClick: dismiss
+          },
+          [closeIcon()]
+        )
+      ]);
+    };
+  }
+});
+
 // src/client.ts
 function useBlog() {
-  if (!vitepress.inBrowser) return;
-  const route = vitepress.useRoute();
+  if (!vitepress2.inBrowser) return;
+  const route = vitepress2.useRoute();
   const apply = () => nextTick(() => applyBlogViews());
-  onMounted(() => {
+  onMounted2(() => {
     watch(() => [route.path, route.query], apply, { immediate: true });
   });
-  vitepress.onContentUpdated(apply);
+  vitepress2.onContentUpdated(apply);
 }
 export {
+  BlogAnnouncementBanner,
   applyBlogView,
   applyBlogViews,
+  readFilter,
   useBlog
 };
 //# sourceMappingURL=client.js.map