Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luciozhang/vitepress-plugin-autobar
Generator sidebar for Vitepress based on file and directory structure.
https://github.com/luciozhang/vitepress-plugin-autobar
Last synced: 2 months ago
JSON representation
Generator sidebar for Vitepress based on file and directory structure.
- Host: GitHub
- URL: https://github.com/luciozhang/vitepress-plugin-autobar
- Owner: luciozhang
- License: mit
- Created: 2022-11-23T03:00:37.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-26T13:58:52.000Z (over 1 year ago)
- Last Synced: 2024-10-28T16:45:01.317Z (3 months ago)
- Language: JavaScript
- Size: 402 KB
- Stars: 71
- Watchers: 1
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vitepress-v1 - vitepress-plugin-autobar - Generator sidebar based on file and directory structure (:electric_plug: Plugins / Community Plugins)
README
Generator sidebar for [Vitepress](https://github.com/vuejs/vitepress) based on file and directory structure.
[](https://www.npmjs.com/package/vitepress-plugin-autobar) [](https://www.npmjs.com/package/vitepress-plugin-autobar) [](https://github.com/luciozhang/vitepress-plugin-autobar/blob/master/LICENSE)
# Install
```shell
npm install -D vitepress-plugin-autobar
```
# API
## getSideBar
```javascript
getSideBar(rootDir = './', options?: Options)
```
- **rootDir**: `string` Directory to get configuration for
- **options**: `Options`Option to create configuration
Returns `sidebar` configuration for VitePress calculated using structure of directory and files in given path.
Type of Options:
```typescript
interface Options {
ignoreDirectory?: Array, // Directoty path to ignore from being captured.
ignoreMDFiles?: Array, // File path to ignore from being captured.
}
```
# Usage
```javascript
import { getSideBar } from 'vitepress-plugin-autobar'
module.exports = {
// ...
themeConfig: {
// ...
sidebar: getSideBar("./docs"),
},
};
```
## Ignore Some path
You can pass options to keep some path out of the sidebar.
```javascript
import { getSideBar } from 'vitepress-plugin-autobar'
module.exports = {
// ...
themeConfig: {
// ...
sidebar: getSideBar("./docs", {
ignoreMDFiles: ['index'],
ignoreDirectory: ['node_modules'],
}),
},
};
```
# How it work
You directory may be like this.
```shell
.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ ├─ 01.Introduction
│ │ └─ START.md
│ ├─ 02.Utils
│ │ └─ dateUtil.md
│ │ └─ storeUtil.md
│ └─ index.md
```
## Generator sidebar
- [x] Then `getSideBar` will return sidebar data like this. It will work well for vitepress.
- [x] Sidebar will order by file path.
- [x] Number in the file path will be removed.
```json
[
{
"text":"Introduction",
"items":[
{
"text":"START",
"link":"01.Introduction/START"
}
]
},
{
"text":"Utils",
"items":[
{
"text":"dateUtil",
"link":"02.Utils/dateUtil"
},
{
"text":"storeUtil",
"link":"02.Utils/storeUtil"
}
]
},
{
"text":"Index",
"items":[
{
"text":"Index",
"link":"index"
}
]
}
]
```
[The configuration for the sidebar in Vitepress](https://vitepress.vuejs.org/config/theme-configs#sidebar)
# Future
If vitepress supports plugins, this component will extend the functionality of plugins.
# License
MIT
Copyright (c) 2022-present, luciozhang