Skip to content

Commit 499f914

Browse files
committed
docs: add blog use cases, sorting recipes and post times
- docs: explain why the blog plugin is different and when section blogs help, add sidebar recipes for meeting notes, release notes, tutorials and decision records, and document dates and times - config: show blog dates and times in New York time - deps: vitepress-blog 0.2.0, auto-sidebar 0.9.1, auto-navbar 0.7.1
1 parent d91eb92 commit 499f914

13 files changed

Lines changed: 221 additions & 56 deletions

‎docs/.vitepress/config.mts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ const blogOptions = {
4949
siteUrl: SITE_URL,
5050
authors: { binarynoir: { name: 'BinaryNoir', url: 'https://github.com/binarynoir' } },
5151
defaultAuthor: 'binarynoir',
52+
// Post times without an offset (`date: 2026-10-20 14:30`) are New York time, and every date
53+
// and time is shown in it, with its zone: "October 20, 2026 at 2:30 PM EDT".
54+
timeZone: 'America/New_York',
5255
// Posts marked `draft: true` are listed (with a Draft badge) in `docs:dev` only.
5356
drafts: process.env.NODE_ENV !== 'production',
5457
};

‎docs/blog/glossary-exact-case-terms.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: 'Glossary Tooltips 0.6: exact-case terms'
33
blog:
4-
date: 2026-10-16
4+
date: 2026-10-16T09:46:20-04:00
55
summary: markdown-it-glossary 0.6.0 lets a single term match in exact case, or in any case, whatever the rest of the site does.
66
tags: [release, glossary]
77
category: Plugins

‎docs/blog/introducing-the-blog-plugin.md‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
22
title: Introducing the Blog plugin
33
blog:
4-
date: 2026-10-20
4+
date: 2026-10-20T14:34:56-04:00
5+
updated: 2026-10-20T14:47:00-04:00
56
summary: Any page can now be a blog post, with a main blog, folder-scoped section blogs and an RSS feed for each.
67
image: /logo-wide-dark.png
78
imageAlt: The BinaryNoir logo
@@ -22,4 +23,24 @@ It works like the [Glossary](/plugins/glossary/) and [Markdown Tags](/plugins/ma
2223
- **`blog-index`** turns a page into a blog that lists posts: the main blog for the whole site, or a section blog for one folder.
2324
- **Every blog gets an RSS feed**, and every post gets a byline, newer and older links, and social-card tags.
2425

25-
This blog is the first to use it. See the [plugin page](/plugins/blog/) for everything it can do, and the [Scopes Demo](/plugins/blog/demo/) for a main blog and a section blog side by side.
26+
## What's different
27+
28+
VitePress doesn't ship a blog. Most sites add one of two ways: a data loader plus a Vue component written for the site, or a blog theme that replaces the documentation theme. We wanted a blog for a docs site that keeps looking like a docs site, so this plugin works the other way around:
29+
30+
- **Posts stay next to what they are about.** A release note can live beside the page it changes. Frontmatter, not a folder, decides which blog lists it.
31+
- **A site can have many blogs.** Each section can have its own, and the main blog collects what everyone should see.
32+
- **Every blog has its own feed.** Readers subscribe to exactly the part of the site they follow, using the "Subscribe" link on each blog.
33+
- **Nothing to write in Vue.** Lists are built as Markdown at build time, so they work without JavaScript and show up in search. Pages and keyword filters are added in the browser.
34+
35+
## Section blogs, in practice
36+
37+
The feature we expect to matter most is the section blog: a blog of one folder, with its own feed, inside a bigger site.
38+
39+
- A docs site for **several products** gives each product a release notes blog. Someone who only uses one product follows only its feed.
40+
- A **monorepo** gives each package a changelog blog in its docs folder, and marks the releases that affect everyone `scope: site` so they also reach the main blog.
41+
- A **team handbook** gives each team a blog for its updates, and company-wide announcements go on the main blog.
42+
- A **course site** gives each course its announcements, so students follow their own course and nothing else.
43+
44+
Section blogs pair with [Auto Sidebar](/plugins/auto-sidebar/#recipes)'s new `.sort` and `.limit` settings, which keep a long folder of posts newest first in the sidebar and cut it to the latest few. The same settings help anything dated, like meeting notes or release notes.
45+
46+
This blog is the first to use the plugin. See the [plugin page](/plugins/blog/) for everything it can do, and the [Scopes Demo](/plugins/blog/demo/) for a main blog and a section blog side by side.

‎docs/blog/sidebar-accordion-filter.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: 'Sidebar Accordion 0.3: filter long sidebars'
33
blog:
4-
date: 2026-10-16
4+
date: 2026-10-16T13:27:54-04:00
55
summary: Sidebar Accordion 0.3.0 adds a filter field that narrows a long sidebar to the pages that match.
66
tags: [release, sidebar-accordion]
77
category: Plugins

‎docs/index.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,6 @@ features:
7676
linkText: Meet the apps
7777
---
7878

79-
## Start here
80-
81-
- **Improving a docs site?** Start with the [plugins overview](/plugins/). Every plugin has a live demo on its page.
82-
- **Want a tool for your terminal?** Pick one on the [apps page](/apps/). Each installs with one Homebrew command.
83-
- **Building a site like this one?** Read [how this site works](/guide/how-this-site-works) and copy what is useful.
84-
8579
## Latest from the blog
8680

8781
::: blog-posts
@@ -91,6 +85,12 @@ layout: grid
9185
more: Read the blog →
9286
:::
9387

88+
## Start here
89+
90+
- **Improving a docs site?** Start with the [plugins overview](/plugins/). Every plugin has a live demo on its page.
91+
- **Want a tool for your terminal?** Pick one on the [apps page](/apps/). Each installs with one Homebrew command.
92+
- **Building a site like this one?** Read [how this site works](/guide/how-this-site-works) and copy what is useful.
93+
9494
## Install the VitePress toolkit
9595

9696
Every plugin is optional and independent: take one, or take them all. The [plugins overview](/plugins/#install-them-all) has the one-line install for the whole set, and each plugin's page shows how to register it. The VitePress plugins need Node 22 or newer.

‎docs/plugins/auto-navbar.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,17 @@ A line in a `.nav` or `.sidebar` file that starts with a dot is a setting for th
8383
| `.inherit` | Borrow `name:Title` overrides from the other config files. |
8484
| `.hide` / `.hideall` | Hide this folder's own link, or the whole folder. |
8585

86-
A `.sort` line in a `.sidebar` file orders the sidebar and the navbar dropdown alike. The `sort` option sets an order for every folder; a folder's own `.sort` still wins.
86+
A `.sort` line in a `.sidebar` file orders the sidebar and the navbar dropdown alike. For example, a **Releases** dropdown that always shows the latest five releases, with a link to the rest:
87+
88+
```txt
89+
# docs/releases/.sidebar (read by both menus)
90+
index.md:All releases
91+
.sort: version desc
92+
.limit: 5
93+
.more: Older releases →
94+
```
95+
96+
[Auto Sidebar's recipes](/plugins/auto-sidebar/#recipes) cover more: meeting notes, a blog, tutorials and decision records. Each works in the navbar too. The `sort` option sets an order for every folder; a folder's own `.sort` still wins.
8797

8898
A folder's landing page is its `index.md`, or its `README.md`. VitePress serves a `README.md` at `README.html`, so add [README Index](/plugins/readme-index/) to serve it at the folder's URL.
8999

‎docs/plugins/auto-sidebar/index.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ This site's [blog](/blog/) sidebar lists sticky posts first, then the rest newes
9090

9191
- The direction is `asc` (A to Z, oldest first, smallest first) unless you write `desc`.
9292
- Dates and numbers compare as dates and numbers, so `2` sorts before `10`.
93+
- Dates can carry a time: `2026-10-20`, `2026-10-20 14:30`, `2026-10-20T14:30:00`, or either with an offset (`-04:00`, `Z`). Pages from the same day sort by their times, and a date alone counts as the start of its day. A time without an offset is read as UTC, so the order is the same on every build machine; write offsets if your pages mix time zones.
9394
- Several keys, separated by commas, sort by the first and break ties with the
9495
next: `.sort: blog.sticky desc, date desc` puts sticky blog posts on top,
9596
each group newest first.
@@ -108,6 +109,83 @@ A folder with hundreds of pages makes a sidebar too long to use, and VitePress s
108109
- `.more: Older posts` ends the list with a link to the folder's landing page, but only when entries were left out. The blog doesn't need one: its landing page is already listed as "All posts".
109110
- `.limit: 0` means no limit. The `limit` and `more` options set both for every folder; a folder's own lines win.
110111

112+
### Recipes
113+
114+
`.sort` and `.limit` turn a folder that grows every week into a sidebar that stays short and current. Some realistic setups:
115+
116+
**Meeting notes.** One page per meeting, each with a `date`. The sidebar shows the last few, newest first, and a link to the rest:
117+
118+
```txt
119+
# docs/meetings/.sidebar
120+
index.md:All meeting notes
121+
.sort: date desc
122+
.limit: 8
123+
.more: Older notes →
124+
```
125+
126+
```md
127+
---
128+
title: Weekly sync, October 13
129+
date: 2026-10-13 09:30
130+
---
131+
```
132+
133+
The file names don't matter, so `2026-10-13-weekly-sync.md` and `platform-review.md` sort together by their dates. Give each meeting its time, and two meetings on the same day sort by it: a 4:00 PM review comes above that morning's 9:30 sync. A date alone works too, and sorts as the start of its day.
134+
135+
**Product release notes.** One page per release. Sort by a `version` field, and the newest release is always on top:
136+
137+
```txt
138+
# docs/releases/.sidebar
139+
index.md:All releases
140+
.sort: version desc
141+
.limit: 5
142+
.more: Older releases →
143+
```
144+
145+
Numbers in versions compare as numbers, so `1.10.0` sorts above `1.9.0`, which sorting by file name gets wrong. Pre-releases don't follow version rules, though: `2.0.0-beta.1` sorts above `2.0.0`. If you publish betas, sort by `date desc` instead.
146+
147+
**A blog.** Sticky posts first, then the newest posts, cut to ten. Posts can give a date (`2026-10-20`) or a date and time (`2026-10-20 14:34`), and the newest is on top either way. This site's [blog](/blog/) does exactly this with the [Blog](/plugins/blog/) plugin:
148+
149+
```txt
150+
# docs/blog/.sidebar
151+
index.md:All posts
152+
.sort: blog.sticky desc, date desc
153+
.limit: 10
154+
```
155+
156+
The page itself lists every post, paginated, so the sidebar only needs the latest.
157+
158+
**A tutorial series.** Give each step an `order` and sort by it. Steps can be reordered, or one added between two others, without renaming files or changing URLs:
159+
160+
```txt
161+
# docs/tutorial/.sidebar
162+
index.md:Overview
163+
.sort: order
164+
```
165+
166+
```md
167+
---
168+
title: Deploy your site
169+
order: 7
170+
---
171+
```
172+
173+
Numbers compare as numbers here too, so step 10 comes after step 9, not after step 1.
174+
175+
**Decision records.** Architecture decision records are numbered, but file names like `adr-2.md` and `adr-10.md` sort in the wrong order by name. A number in the frontmatter fixes it, and `.limit` keeps the newest decisions in view:
176+
177+
```txt
178+
# docs/decisions/.sidebar
179+
index.md:All decisions
180+
.sort: adr desc
181+
.limit: 15
182+
.more: Earlier decisions →
183+
```
184+
185+
**Pages whose titles don't match their files.** `.sort: title` orders a folder by the titles readers see, so `getting-started.md` titled "Quick start" sorts under Q, not G.
186+
187+
[Auto Navbar](/plugins/auto-navbar#settings) reads the same settings from the same files, so a "Releases" dropdown can show the latest five releases with the same three lines.
188+
111189
## Options
112190

113191
| Option | Default | Description |

‎docs/plugins/blog/demo/example-unsorted-post.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: 'Example: a post no section blog covers'
33
blog:
4-
date: 2026-10-16
4+
date: 2026-10-16 09:00
55
summary: This post has no scope setting, and no section blog covers its folder, so it falls to the main blog.
66
image: ./cover.svg
77
imageAlt: A placeholder cover that reads "Example post"
@@ -14,7 +14,7 @@ This post lives in `plugins/blog/demo/`, next to the demo's [main blog](/plugins
1414

1515
```yaml
1616
blog:
17-
date: 2026-10-16
17+
date: 2026-10-16 09:00
1818
summary: This post has no scope setting, and no section blog covers its folder, so it falls to the main blog.
1919
image: ./cover.svg
2020
tags: [example, unsorted]

‎docs/plugins/blog/demo/team/example-section-post.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
22
title: 'Example: a section-only post'
33
blog:
4-
date: 2026-10-17
4+
date: 2026-10-17 15:30
5+
updated: 2026-10-18 09:15
56
summary: This post stays in its own section blog. It has no scope setting, so the main blog doesn't list it.
67
image: ../cover.svg
78
imageAlt: A placeholder cover that reads "Example post"
@@ -14,11 +15,12 @@ This post lives in `plugins/blog/demo/team/`, a folder with its own [section blo
1415

1516
```yaml
1617
blog:
17-
date: 2026-10-17
18+
date: 2026-10-17 15:30
19+
updated: 2026-10-18 09:15
1820
summary: This post stays in its own section blog. It has no scope setting, so the main blog doesn't list it.
1921
image: ../cover.svg
2022
imageAlt: A placeholder cover that reads "Example post"
2123
tags: [example, section]
2224
```
2325
24-
The byline above was written by the plugin from that frontmatter: the date, an estimate of the reading time, and the author. No author is named here, so it is this site's `defaultAuthor`. The links at the end go to the newer and older posts in the same section blog.
26+
The byline above was written by the plugin from that frontmatter: when it was published and when it was updated, each with its time, an estimate of the reading time, and the author. The times have no offset, so they are read in this site's `timeZone`, New York, and shown with their zone. No author is named here, so it is this site's `defaultAuthor`. The links at the end go to the newer and older posts in the same section blog.

‎docs/plugins/blog/demo/team/example-site-post.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: 'Example: a site-wide post'
33
blog:
4-
date: 2026-10-18
4+
date: 2026-10-18T10:00:00-04:00
55
summary: This post lives in a section, but scope site puts it on the main blog as well.
66
image: ../cover.svg
77
imageAlt: A placeholder cover that reads "Example post"
@@ -15,13 +15,15 @@ This post lives in the same folder as the [section-only example](/plugins/blog/d
1515

1616
```yaml
1717
blog:
18-
date: 2026-10-18
18+
date: 2026-10-18T10:00:00-04:00
1919
summary: This post lives in a section, but scope site puts it on the main blog as well.
2020
image: ../cover.svg
2121
tags: [example, scope]
2222
scope: site
2323
```
2424
25+
Its `date` is written with an offset, `-04:00`, so it names an exact moment whatever the site's `timeZone` is. A date alone (`2026-10-18`) or a local time (`2026-10-18 10:00`) work too: see [Dates and times](/plugins/blog/#dates-and-times).
26+
2527
So it is listed twice: by its own [team blog](/plugins/blog/demo/team/) and by the demo's [main blog](/plugins/blog/demo/). It is in both feeds too, and this page's `<head>` links to both of them.
2628

2729
Its newer and older links stay inside the team blog, the closest blog that lists it.

0 commit comments

Comments
 (0)