vitepress-plugin-auto-sidebar

Automatically generate VitePress sidebar

Features

• 🪄 Automatic sidebar generation
• ✨ Title of files synchronized with sidebar
• 🚀 Automatic reload when files are deleted or title is modified
• ✔️ Customizable configuration options (custom directory names, custom file sorting).

Installation

1# pnpm
2pnpm i @iminu/vitepress-plugin-auto-sidebar
3# yarn
4yarn add @iminu/vitepress-plugin-auto-sidebar
5# npm
6npm install @iminu/vitepress-plugin-auto-sidebar

Usage

1// .vitepress/config.ts
2import AutoSidebar from "@iminu/vitepress-plugin-auto-sidebar";
3export default defineConfig({
4  vite: {
5    plugins: [
6      AutoSidebar({
7        /**
8         * after resolve, we can change it
9         */
10        sidebarResolved(value) {
11          // do sort
12          value["/dir2/"][0].items?.sort((a, b) => a.text - b.text);
13          // rename
14          value["/dir2/"][0].text = "sorted";
15        },
16        ignores: ["index.md"],
17        // Which files are included
18        docs: path.resolve(process.cwd(), "docs/demo"),
19        /**
20         * .vitepress parent folder
21         */
22        root: path.resolve(process.cwd(), "docs"),,
23      }),
24    ],
25  },
26});

How it work

├── .vitepress
├── dir1
│   ├── dir1-1
│   │   ├── 1.md
│   │   ├── 2.md
│   │   └── dir1-1-1
│   │       └── 1.md
│   └── dir1-2
│       └── 1.md
├── dir2
│   └── 2-2
│       ├── 2.md
│       └── 3.md
├── index.md
├── node_modules
└── package.json

TO


{
  "/dir2/": [
    {
      "text": "2-2",
      "collapsed": false,
      "items": [
        {
          "text": "2-2",
          "link": "/dir2/2-2/3.md"
        },
        {
          "text": "222",
          "link": "/dir2/2-2/2.md"
        }
      ]
    }
  ],
  "/dir1/": [
    {
      "text": "dir1-2",
      "collapsed": false,
      "items": [
        {
          "text": "1-2",
          "link": "/dir1/dir1-2/1.md"
        }
      ]
    },
    {
      "text": "dir1-1",
      "collapsed": false,
      "items": [
        {
          "text": "2222",
          "link": "/dir1/dir1-1/2.md"
        },
        {
          "text": "1-1",
          "link": "/dir1/dir1-1/1.md"
        },
        {
          "text": "dir1-1-1",
          "collapsed": false,
          "items": [
            {
              "text": "1-1-1",
              "link": "/dir1/dir1-1/dir1-1-1/1.md"
            }
          ]
        }
      ]
    }
  ]
}