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 499f914
Browse filesBrowse the repository at this point in the historyBrowse files
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
Copy file name to clipboardExpand all lines: docs/blog/introducing-the-blog-plugin.md
+23-2Lines changed: 23 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,8 @@
1
1
---
2
2
title: Introducing the Blog plugin
3
3
blog:
4
-
date: 2026-10-20
4
+
date: 2026-10-20T14:34:56-04:00
5
+
updated: 2026-10-20T14:47:00-04:00
5
6
summary: Any page can now be a blog post, with a main blog, folder-scoped section blogs and an RSS feed for each.
6
7
image: /logo-wide-dark.png
7
8
imageAlt: The BinaryNoir logo
@@ -22,4 +23,24 @@ It works like the [Glossary](/plugins/glossary/) and [Markdown Tags](/plugins/ma
22
23
-**`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.
23
24
-**Every blog gets an RSS feed**, and every post gets a byline, newer and older links, and social-card tags.
24
25
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.
Copy file name to clipboardExpand all lines: docs/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
@@ -76,12 +76,6 @@ features:
76
76
linkText: Meet the apps
77
77
---
78
78
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
-
85
79
## Latest from the blog
86
80
87
81
::: blog-posts
@@ -91,6 +85,12 @@ layout: grid
91
85
more: Read the blog →
92
86
:::
93
87
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
+
94
94
## Install the VitePress toolkit
95
95
96
96
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.
Copy file name to clipboardExpand all lines: docs/plugins/auto-navbar.md
+11-1Lines changed: 11 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -83,7 +83,17 @@ A line in a `.nav` or `.sidebar` file that starts with a dot is a setting for th
83
83
|`.inherit`| Borrow `name:Title` overrides from the other config files. |
84
84
|`.hide` / `.hideall`| Hide this folder's own link, or the whole folder. |
85
85
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.
87
97
88
98
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.
Copy file name to clipboardExpand all lines: docs/plugins/auto-sidebar/index.md
+78Lines changed: 78 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -90,6 +90,7 @@ This site's [blog](/blog/) sidebar lists sticky posts first, then the rest newes
90
90
91
91
- The direction is `asc` (A to Z, oldest first, smallest first) unless you write `desc`.
92
92
- 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.
93
94
- Several keys, separated by commas, sort by the first and break ties with the
94
95
next: `.sort: blog.sticky desc, date desc` puts sticky blog posts on top,
95
96
each group newest first.
@@ -108,6 +109,83 @@ A folder with hundreds of pages makes a sidebar too long to use, and VitePress s
108
109
-`.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".
109
110
-`.limit: 0` means no limit. The `limit` and `more` options set both for every folder; a folder's own lines win.
110
111
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.
Copy file name to clipboardExpand all lines: docs/plugins/blog/demo/team/example-section-post.md
+5-3Lines changed: 5 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,8 @@
1
1
---
2
2
title: 'Example: a section-only post'
3
3
blog:
4
-
date: 2026-10-17
4
+
date: 2026-10-17 15:30
5
+
updated: 2026-10-18 09:15
5
6
summary: This post stays in its own section blog. It has no scope setting, so the main blog doesn't list it.
6
7
image: ../cover.svg
7
8
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
14
15
15
16
```yaml
16
17
blog:
17
-
date: 2026-10-17
18
+
date: 2026-10-17 15:30
19
+
updated: 2026-10-18 09:15
18
20
summary: This post stays in its own section blog. It has no scope setting, so the main blog doesn't list it.
19
21
image: ../cover.svg
20
22
imageAlt: A placeholder cover that reads "Example post"
21
23
tags: [example, section]
22
24
```
23
25
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.
Copy file name to clipboardExpand all lines: docs/plugins/blog/demo/team/example-site-post.md
+4-2Lines changed: 4 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: 'Example: a site-wide post'
3
3
blog:
4
-
date: 2026-10-18
4
+
date: 2026-10-18T10:00:00-04:00
5
5
summary: This post lives in a section, but scope site puts it on the main blog as well.
6
6
image: ../cover.svg
7
7
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
15
15
16
16
```yaml
17
17
blog:
18
-
date: 2026-10-18
18
+
date: 2026-10-18T10:00:00-04:00
19
19
summary: This post lives in a section, but scope site puts it on the main blog as well.
20
20
image: ../cover.svg
21
21
tags: [example, scope]
22
22
scope: site
23
23
```
24
24
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
+
25
27
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.
26
28
27
29
Its newer and older links stay inside the team blog, the closest blog that lists it.
0 commit comments