Skip to content

Commit 089ac58

Browse files
committed
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
1 parent 46fc242 commit 089ac58

8 files changed

Lines changed: 931 additions & 106 deletions

File tree

‎assets/horizontal-logo-full.svg‎

Lines changed: 265 additions & 0 deletions
Loading

‎docs/plugins/blog/browse/index.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ blog-index:
1212

1313
# Browse Demo
1414

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/).
1616

1717
Try it:
1818

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".
2323
- 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).
2424

2525
The page needs nothing more than this:
@@ -32,6 +32,6 @@ blog-index:
3232
tagLimit: 5
3333
```
3434
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.
3636

3737
<!-- blog-posts -->

‎docs/plugins/blog/index.md‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ title: Blog
1414

1515
- **[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.
1616
- **[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".
1818

1919
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.
2020

@@ -149,7 +149,7 @@ Title, description, date, author, image and tags can also be written at the top
149149

150150
Both sort posts, in different ways:
151151

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.
153153
- **`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.
154154
- **Don't say the same thing twice.** If a post's category is Releases, a `release` tag adds nothing.
155155
- **`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
219219
| `groupBy` | none | `year` or `month` puts a heading ("2026", "October 2026") above each year's or month's posts. |
220220
| `showTags` | `true` | `false` hides tag chips on cards. |
221221
| `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 shown before "+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. |
226226
| `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. |
228228
| `pageSize` | `10` (the `pageSize` option) | Posts per page. `0` shows them all on one page. |
229229
| `pinLimit` | all (the `pinLimit` option) | Most pinned posts kept at the top. Extra ones take their place by date. |
230230
| `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
257257

258258
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.
259259

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:
261261

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.
268270

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.
270272

271273
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.
272274

@@ -432,7 +434,7 @@ A post image given as a relative path is also copied to `blog-images/` under a n
432434

433435
## Styling
434436

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.
436438

437439
## Notes
438440

0 commit comments

Comments
 (0)