You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit 089ac58
Browse filesBrowse the repository at this point in the historyBrowse files
feat(docs): add logo, product registry and README footer sync
- docs: reword blog browse panel docs for tabs, chips and date drop-down
- assets: add horizontal logo SVG, also served from docs/public
- scripts: add sync-readmes script and products.json registry
- deps: bump vitepress-blog to 0.7.0 and refresh lockfile
Copy file name to clipboardExpand all lines: docs/plugins/blog/browse/index.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,14 +12,14 @@ blog-index:
12
12
13
13
# Browse Demo
14
14
15
-
A live example of [browsing a blog](/plugins/blog/#browsing-categories-keywords-and-dates). This is a section blog of eight example posts in three categories, spread over two years, so the browse panel below has something in every row. It keeps to its own folder, so the examples stay off the real [BinaryNoir blog](/blog/).
15
+
A live example of [browsing a blog](/plugins/blog/#browsing-categories-keywords-and-dates). This is a section blog of eight example posts in three categories, spread over two years, so every part of the browse panel below has something in it. It keeps to its own folder, so the examples stay off the real [BinaryNoir blog](/blog/).
16
16
17
17
Try it:
18
18
19
-
-**Pick a category**, then a keyword: the filters combine, and every count changes to show what each next click would leave.
20
-
-**Pick a year**to open its months, then a month. Click the month again to go back to the whole year.
21
-
-**Open "+3 more"** at the end of the keywords. The row shows the five most used keywords first; opened, it lists all eight alphabetically. On a phone, swipe a row sideways to see the rest of it.
22
-
-**Remove one filter** with its × above the posts, or clear them all with "Show all posts".
19
+
-**Pick a category tab**, then a keyword chip: the filters combine, and every count changes to show what each next click would leave.
20
+
-**Open Date**and pick a year or one of its months. Pick the month again to go back to the whole year.
21
+
-**Open "+3 more"** at the end of the keywords. They show the five most used first; opened, they list all eight alphabetically. On a phone, swipe the keywords sideways to see the rest.
22
+
-**Remove one filter**by choosing it again, with the "All" tab for the category, or with the × beside the date; or clear them all with "Show all posts".
23
23
- Or open a view by its URL: [Engineering](/plugins/blog/browse/?category=engineering), [Design posts tagged `ux`](/plugins/blog/browse/?category=design&tag=ux), [2025](/plugins/blog/browse/?year=2025), [October 2026](/plugins/blog/browse/?month=2026-10).
24
24
25
25
The page needs nothing more than this:
@@ -32,6 +32,6 @@ blog-index:
32
32
tagLimit: 5
33
33
```
34
34
35
-
The browse panel is on by default. Each post gives a `category` and `tags`, and one is `pinned`, so it stays at the top of the first page. `tagLimit: 5` cuts the keyword row to five before "+3 more"; the default is 12.
35
+
The browse panel is on by default. Each post gives a `category` and `tags`, and one is `pinned`, so it stays at the top of the first page. `tagLimit: 5` cuts the keywords to five before "+3 more"; the default is 12.
Copy file name to clipboardExpand all lines: docs/plugins/blog/index.md
+18-16Lines changed: 18 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ title: Blog
14
14
15
15
-**[The BinaryNoir blog](/blog/)** is this site's real blog, built with this plugin. Its [feed](/blog/feed.xml){target="_self"} is the one the navbar's RSS icon links to.
16
16
-**[The Scopes Demo](/plugins/blog/demo/)** is a small main blog with a [section blog](/plugins/blog/demo/team/) inside it, and example posts that show which blog lists which post. It is limited to its own folder, so the examples stay off the real blog.
17
-
-**[The Browse Demo](/plugins/blog/browse/)** is a section blog of example posts in three categories over two years, for trying the browse panel: filter by category, keyword, year and month, combine them, and open a long row with "+N more".
17
+
-**[The Browse Demo](/plugins/blog/browse/)** is a section blog of example posts in three categories over two years, for trying the browse panel: filter by category, keyword, year and month, combine them, and open the full keyword list with "+N more".
18
18
19
19
Open any post to see its byline under the title, and links to the newer and older posts in its blog at the end, in place of VitePress's previous / next links.
20
20
@@ -149,7 +149,7 @@ Title, description, date, author, image and tags can also be written at the top
149
149
150
150
Both sort posts, in different ways:
151
151
152
-
-**`category` is the one way you slice the blog.** Each post has exactly one, from a short list that rarely changes. It is the label above the title on cards, and the first row of the browse panel. Pick the axis your readers browse by most: the kind of post (Releases, Guides, News), the team, or the product line.
152
+
-**`category` is the one way you slice the blog.** Each post has exactly one, from a short list that rarely changes. It is the label above the title on cards, and a tab in the browse panel. Pick the axis your readers browse by most: the kind of post (Releases, Guides, News), the team, or the product line.
153
153
-**`tags` are everything else a post is about.** A post can have several, and new ones can appear at any time: the product it changes, the feature, the topic.
154
154
-**Don't say the same thing twice.** If a post's category is Releases, a `release` tag adds nothing.
155
155
-**`categories:` on a blog page is a filter, not a label.**`blog-index: { categories: [Releases] }` makes a page that lists only releases. `tags:` works the same way there, and both work in `::: blog-posts` blocks.
@@ -219,12 +219,12 @@ The list goes where `<!-- blog-posts -->` is, or after the page's content if the
219
219
| `groupBy` | none | `year` or `month` puts a heading ("2026", "October 2026") above each year's or month's posts. |
220
220
| `showTags` | `true` | `false` hides tag chips on cards. |
221
221
| `showCategory` | `true` | `false` hides the category above each card's title. |
222
-
| `categoryList` | `true` | A row of categories in the browse panel, each with its count. `false` leaves it out. |
223
-
| `categoryLimit` | `8` | Categories shown before "+N more", most used first. `0` shows them all. |
224
-
| `tagList` | `true` | A row of keywords in the browse panel, each with its count. `false` leaves it out. |
225
-
| `tagLimit` | `12` | Keywords shownbefore "+N more", most used first. `0` shows them all. |
222
+
| `categoryList` | `true` | Category tabs in the browse panel. `false` leaves them out. |
223
+
| `categoryLimit` | `5` | Category tabs, most used first; the rest go under "More". `0` makes them all tabs. |
224
+
| `tagList` | `true` | A line of keyword chips in the browse panel, each with its count. `false` leaves it out. |
225
+
| `tagLimit` | `12` | Keyword chips shown, most used first, before "+N more". `0` shows them all. |
226
226
| `tagMinCount` | `1` | Leave keywords used by fewer posts out of the browse panel. They still show on cards. |
227
-
| `archive` | `true` | Rows of years, and each year's months, in the browse panel. `false` leaves them out. |
227
+
| `archive` | `true` | A date drop-down of years and their months in the browse panel. `false` leaves it out. |
228
228
| `pageSize` | `10` (the `pageSize` option) | Posts per page. `0` shows them all on one page. |
229
229
| `pinLimit` | all (the `pinLimit` option) | Most pinned posts kept at the top. Extra ones take their place by date. |
230
230
| `rssLink` | `true` (the `rssLink` option) | A "Subscribe" link with the RSS icon to this blog's feed. `false` leaves it out. |
@@ -257,16 +257,18 @@ Every post is written into the blog page's HTML, so search engines, local search
257
257
258
258
Filters combine: `?category=engineering&tag=api&year=2026`shows the engineering posts tagged `api` from 2026, and pages count the matching posts only. The [Browse Demo](/plugins/blog/browse/) has posts in three categories over two years, so you can try every filter; its [Design posts tagged `ux`](/plugins/blog/browse/?category=design&tag=ux) is one combined view.
259
259
260
-
**The browse panel** above the posts has a row each for categories, keywords 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:
260
+
**The browse panel** above the posts is a bar on a single rule, then a line of keywords. On the bar, a blog's categories, the few kinds of post it has, are tabs with their counts, "All" first; the date drop-down and the blog's RSS link sit at its end. Keywords, the topics readers browse by, are one click away as chips below it:
261
261
262
-
- **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.
263
-
- **Counts follow the view.** Each count says how many posts the chip would show with the other filters kept, so readers see where a click leads. Chips that would show nothing are dimmed.
264
-
- **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.
265
-
- **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.
266
-
- **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.
267
-
- **Rows appear only when they can narrow the posts.** No categories, or one category every post is in, means no category row. That is why [this site's blog](/blog/), where every post so far is a release, shows only its keywords. The archive needs posts from more than one month, and with only one year, it is that year's months alone.
262
+
- **Filters combine.** Each tab, chip and date adds its filter to the ones in view, replacing another value of the same kind; choosing the active one again takes it off.
263
+
- **The panel shows what is on.** The active tab is underlined, the active keyword chip is highlighted, and the date drop-down shows its value in place of its name ("October 2026"), with a × beside it that takes it off.
264
+
- **Counts follow the view.** Each tab, keyword and date says how many posts it would show with the other filters kept, so readers see where a click leads. Those that would show nothing are dimmed.
265
+
- **Dates are years and their months.** The date drop-down lists each year with its months beneath it. A month keeps its year active, and choosing it again steps back out to the whole year.
266
+
- **It stays short with many values.** Categories and keywords are ranked by how many posts use them. The first `categoryLimit` (5) categories are tabs, and the rest go under "More". The first `tagLimit` (12) keywords show, then "+N more", which opens the full list alphabetically, with a field to narrow it past 30. `tagMinCount: 2` leaves out keywords used only once.
267
+
- **Phones keep it to two lines.** On screens narrower than 640px, the tabs and the keywords each scroll sideways, and the date drop-down opens across the full width.
268
+
- **It works without JavaScript.** Every tab, chip and date is a link, and the drop-downs are `<details>` elements. With `useBlog()`, a drop-down closes on a click outside it, on Escape, and once a choice is followed.
269
+
- **Parts appear only when they can narrow the posts.** No categories, or one category every post is in, means no tabs, and the keywords take their place on the bar. That is why [this site's blog](/blog/), where every post so far is a release, shows its keywords on the bar. The date drop-down needs posts from more than one month.
268
270
269
-
**The active filters** show above the posts while any filter is on: how many posts match, a chip for each filter that removes just that one, and "Show all posts" to clear them all. Screen readers announce the new count.
271
+
**While a filter is on**, a line under the panel says how many posts match, with "Show all posts" beside it to take every filter off. Screen readers announce the new count.
270
272
271
273
Categories and keywords are links wherever they appear: in the browse panel, on each card, and in a post's byline, where they link to the post's own blog, filtered. They are ordinary links, so VitePress follows them without reloading the page, and each filtered view has its own URL to share.
272
274
@@ -432,7 +434,7 @@ A post image given as a relative path is also copied to `blog-images/` under a n
432
434
433
435
## Styling
434
436
435
-
The stylesheet uses VitePress's theme variables, so it follows light and dark mode. Override `--vp-blog-card-bg`, `--vp-blog-card-border`, `--vp-blog-card-radius`, `--vp-blog-meta-color`, `--vp-blog-tag-bg`, `--vp-blog-tag-color` or `--vp-blog-accent` to restyle it, `--vp-blog-browse-bg` (`transparent`) and `--vp-blog-facet-label-width` for the browse panel, and `--vp-blog-announcement-height`, `--vp-blog-announcement-bg` or `--vp-blog-announcement-color` for the announcement banner. Every generated element has a `vp-blog-` class for anything more.
437
+
The stylesheet uses VitePress's theme variables, so it follows light and dark mode. Override `--vp-blog-card-bg`, `--vp-blog-card-border`, `--vp-blog-card-radius`, `--vp-blog-meta-color`, `--vp-blog-tag-bg`, `--vp-blog-tag-color` or `--vp-blog-accent` to restyle it, `--vp-blog-browse-bg` (`transparent`) for the browse panel, and `--vp-blog-announcement-height`, `--vp-blog-announcement-bg` or `--vp-blog-announcement-color` for the announcement banner. Every generated element has a `vp-blog-` class for anything more.
0 commit comments