Skip to content

Commit c0f05ab

Browse files
committed
docs: add shared title helpers section to sidebar and navbar pages
1 parent d5d1daf commit c0f05ab

6 files changed

Lines changed: 183 additions & 151 deletions

File tree

‎docs/plugins/.exclude‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
downloads/
2+
shared/

‎docs/plugins/auto-navbar.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,4 +93,6 @@ generateNav(docsRoot, {
9393
});
9494
```
9595

96+
<!--@include: ./shared/title-helpers.md-->
97+
9698
[Source and full README on GitHub](https://github.com/binarynoir/vitepress-auto-navbar)

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,8 @@ generateSidebar(docsRoot, {
110110

111111
A folder's group label comes from, in order: its line in the parent's `.sidebar`, a `section-title` in its landing page's frontmatter, then the formatted folder name. With `groupTitleFromIndex: true`, the landing page's `title` or first `# Heading` is tried before the folder name.
112112

113+
<!--@include: ../shared/title-helpers.md-->
114+
113115
Pairs with [Auto Navbar](/plugins/auto-navbar): one folder structure drives both menus.
114116

115117
[Source and full README on GitHub](https://github.com/binarynoir/vitepress-auto-sidebar)
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!-- Included in the Auto Sidebar and Auto Navbar pages. Not built as a page: see docs/plugins/.exclude. -->
2+
3+
### Use the title helpers in your own code
4+
5+
Auto Sidebar and Auto Navbar both export the functions they use to make titles. Your `config.mts`, a build script or another plugin can call them to get titles that match the menus. Import them from whichever plugin you have installed:
6+
7+
```ts
8+
import { formatTitle, truncateTitle, stripTagSyntax } from '@binarynoir/vitepress-auto-sidebar';
9+
// or from '@binarynoir/vitepress-auto-navbar'; they work the same
10+
11+
formatTitle('02-guide-to-the-github-api.md', 50, { github: 'GitHub', api: 'API' }); // "Guide to the GitHub API"
12+
formatTitle('guide-to-the-cli', 50, {}, false); // "Guide To The Cli"
13+
truncateTitle('A fairly long human-written title', 15); // "A fairly long…"
14+
stripTagSyntax('Design ((tag|draft))'); // "Design"
15+
```
16+
17+
| Function | What it does |
18+
| ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
19+
| `formatTitle(name, maxLength?, replacements?, titleCase?)` | Turns a file or folder name into a title, following the rules above. `maxLength` defaults to `50` (`0` for no limit), `replacements` to `{}` and `titleCase` to `true`. |
20+
| `truncateTitle(title, maxLength?)` | Shortens a title someone wrote to `maxLength` (default `50`), adding `…`, without changing its casing or punctuation. |
21+
| `stripTagSyntax(title)` | Removes [Markdown Tags](/plugins/markdown-tags/) syntax (`((tag\|draft))`) and tidies the spacing. |
22+
23+
Pass `formatTitle` a single file or folder name, not a path, because it doesn't split on `/`. To match your menus, pass it the same `titleReplacements` and `titleCase` you gave the plugin.
24+
25+
::: warning Build time only
26+
These functions run in Node: in `.vitepress/config.mts`, build scripts, and Vite or markdown-it plugins. The package also loads the menu generator, which reads files with `fs`, so don't import it into code that runs in the browser, such as a Vue component or the theme's `enhanceApp`. Make the titles at build time instead, and pass them to the page through frontmatter, a data loader or `themeConfig`.
27+
:::

0 commit comments

Comments
 (0)