ozum / vuepress-bar Goto Github PK
View Code? Open in Web Editor NEWVuePress sidebar and navbar generator based on file and directory structure. Focus your documents, not sidebar or navbar.
VuePress sidebar and navbar generator based on file and directory structure. Focus your documents, not sidebar or navbar.
I noticed that there is a pinyinNav used to be compatible with vuepress-pluin-permalink-pinyin, it seems that it forgot to be compatible with sidebar
/**
* Translate chinese to pinyin.
* Compatible with vuepress-pluin-permalink-pinyin.
* @param {Array} navArr
*/
function transliteratePinyin(navArr) {
return navArr.map(nav => {
const result = { ...nav };
if (nav.link) {
result.link = slugify(nav.link, { ignore: ["/", "."] });
}
if (nav.items) {
result.items = transliteratePinyin(nav.items);
}
return result;
});
}
Version
Config
const getConfig = require("vuepress-bar");
const barConfig = getConfig(`${__dirname}/..`, {
addReadMeToFirstGroup: false,
stripNumbers: false
});
Sources
Where implicit/callback/index.md
is
---
public: true
---
# Logging In
<!-- markdownlint-disable no-inline-html -->
<AuthCallback />
Error
$ vuepress build src
wait Extracting site metadata...
TypeError: (link.children[0] || "").split is not a function
at /home/user/git/project/node_modules/vuepress-bar/lib/index.js:129:72
at Array.findIndex (<anonymous>)
at /home/user/git/project/node_modules/vuepress-bar/lib/index.js:128:50
at Array.forEach (<anonymous>)
at side (/home/user/git/project/node_modules/vuepress-bar/lib/index.js:119:8)
at getConfig (/home/user/git/project/node_modules/vuepress-bar/lib/index.js:294:84)
at Object.<anonymous> (/home/user/git/project/src/.vuepress/config.js:2:19)
at Module._compile (internal/modules/cjs/loader.js:1147:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
at Module.load (internal/modules/cjs/loader.js:996:32)
at Function.Module._load (internal/modules/cjs/loader.js:896:14)
at Module.require (internal/modules/cjs/loader.js:1036:19)
at require (internal/modules/cjs/helpers.js:72:18)
at loadConfig (/home/user/git/project/node_modules/@vuepress/core/lib/node/loadConfig.js:31:18)
at App.resolveConfigAndInitialize (/home/user/git/project/node_modules/@vuepress/core/lib/node/App.js:64:24)
at App.process (/home/user/git/project/node_modules/@vuepress/core/lib/node/App.js:1
debug infos
https://github.com/ozum/vuepress-bar/blob/v0.2.5/lib/index.js#L129: link
is equal to the json below before this line throws the error above.
{
"title": "Implicit",
"children": [
{
"title": "Callback",
"children": [
"implicit/callback/index"
]
}
]
}
Hey there, thanks for taking the time to write the awesome plugin. I noticed that it does not work with files named AREADME.md, I think this is because of the regex endswith filter in the plugin but that's not a big deal. Maybe try this???
const regex = new RegExp('^readme$','i');
I noticed today when filtering the frontmatter if you set a draft to true it will prevent all the items in the
parent directory from showing up. For example:
├── code
│ ├── README.md draft: false
│ └── lua.md draft: true
| └── python.md draft: false
Nothing will appear under code, python should appear because draft is false.
Here is the code to try in src/.vuepress/theme/index.js
async ready(){
ctx.pages.splice(
0,
ctx.pages.length,
...ctx.pages.filter(({ frontmatter }) => {
let title = frontmatter.title
let draft = frontmatter.draft
console.log('frontmatter.draft is ',draft, title );
return draft !== true
}),
)
},
The parameter "dt" means "disable titleize".
Sometimes the nav's name maybe API or FQA. And I don't want to be Api or Fqa. 🥺
I thought I had the same issue as this one, but now I believe it is different. Giving a number to both directories and documents in the same folder does not order them as one would expect. Only the documents are ordered, and the directories fall after that. Here is my tree for example:
├── 01.getting-started
│ ├── data-sources.md
│ ├── documentation.md
│ └── faq.md
├── 02.data-api
│ ├── 01.data-api.md
│ ├── assets
│ └── contact-finder.md
├── 03.the-ui
│ ├── 01.releases
│ │ ├── 202109241339.md
│ │ └── README.md
│ └── 02.ui-features.md
└── README.md
I would expect the folder 01.releases
to show in the list under 03.the-ui
first, before 02.ui-features
, but it does not. If I name a file instead of a folder there, it does properly sort. So the issue is mixing files and directories with numbering.
Btw, folders (like the top level above) DO sort correctly relative to each other, just not to documents in the same tree. (Documents always seem to display before directories)
And there seems to be a config setting that sets this by default to true (if I am understanding it correctly) but it does not work setting it to either true or false: mixDirectoriesAndFilesAlphabetically
Thanks btw for this really great plugin!
Now up to 3 layers
Say 5 or 6 , How?
First of all, thank you for this package! The ability to focus on writing to content rather than configuring is a great benefit.
I tried to use the sample from README:
const getConfig = require("vuepress-bar");
module.exports = {
themeConfig: {
...getConfig(`${__dirName}/..`)
}
};
This resulted in ReferenceError: __dirName is not defined
. I think that __dirName
should be renamed to __dirname
.
I was trying to use your plugin to autobuild the navbar and sidebar, but I found an issue while using the structure nav.foldername
to build the navbar.
The plugin would build the $themeConfig.nav[].link
as \nav.foldername\
, thus breaking the navigation and sidebar loading.
I nailed down the cause to being on Windows, because the same config, run through a Linux VM works no problem, generating the parameters right as /nav.foldername/
both in the nav
object and sidebar
groups keys.
Is there a way to hardcode the correct browser separator to be /
?
Thank you very much
I am using this plugin in a vuepress docs site with several directories and files at the root of the docs. I added order
in the frontmatter of the files and to the README.md
files in the directories, but the sidebar order is still being done alphabetically.
how to use?
i.e. how to set the value of __dirName
Hi @ozum! This is less of an issue and more opening up a dialog about some enhancements. (it's already a great plugin!)
Config option to have optional directories. We have a directory in the base directory that shouldn't be traversed. (node_modules) I actually began completing this enhancement here.
Config option to not have default directory READMEs create duplicate sidebar links. E.G.
So basically making the drop down navigation the link using the path parameter. I began working on this enhancement by adding the path parameter to the side function. We'd also have to remove the default README.md link.
We could just add a new boolean config option to enable this change.
Add case sensitivity to the menu. In the image below the 'Accuterm' link should read 'AccuTerm' (branding purposes)
Don't know the best route for this as branding can be so different from directory case.
Order directories and still have SEO friendly URL slugs. Currently adjusting the directory names with numbers keeps the ordering in the URL. E.G.
I'm not really sure how to approach this, as the plugin is based on traversing the directories and files. But I think it's worth bringing up, as SEO is really crucial for documentation.
Looking forward to hearing your thoughts
In method getName
there is call to startCase
function from lodash. Unfortunately, this function is not preserving diacritics, which does not make sence in this context for a lot of languages.
I propose to change it to use function capitalize
from lodash, or maybe some fancy regexp which works with unicode like this:
// remove puctuation, extra spaces and for every word apply capitalize function
name.replace(/\p{P}+/ug, ' ').trim().replace(/\p{L}+/ug, capitalize)
Hi, I have the following code in my config file:
sidebar.forEach((item) => { if (item !=='' && item.title.includes("Api")) { item.title = item.title.replace("Api", "API"); }})
which works fine as long as I only have one top level README.md file and everything else is inside subfolders. But the moment I add another top level file (like somthing.md) it fails with the following error:
TypeError: Cannot read property 'includes' of undefined
the sidebar is ok
but when I change to
the sidebar about yy does not display, xx can also display
I fix this by
sidebar: sidebar.filter((i) => i.title !== "Node Modules"),
It may be useful to add that information on the README.md file.
If I have documents in my tree like:
01.Item-one
02.Item-number-two
they will render with a space between the first and second word, but between the second and third the hyphen (or dash if you prefer) will render, like so:
Item One
Item Number-two
It seems to me that a hyphen should always render as a space unless a sidebar filter is applied to it.
For now, I wrote a special sidebar filter for my particular use case, but this seems like something that should be fixed for all such items.
Hi there,
First of all, thanks for creating this — but I can't get it to work with my Vuepress instance. Below is my .vuepress/config.js
. My directory structure is as follows. I would like to have a different sidebar for /en
, /fr
, etc. as they will be in different languages. Can you spot what I'm doing wrong?
./
|- .vuepress/
|- config.js
|- en/
|- 01.about/
|- introduction.md
|- contributing.md
|- 02.terms/
|- example.md
|- test.md
|- fr/
|- ...
const getConfig = require('vuepress-bar');
const config = getConfig('en');
console.log(config)
module.exports = {
port: 3000,
serviceWorker: true,
ga: 'UA-144587327-1',
themeConfig: {
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{
text: 'GitHub',
link: 'https://github.com/mrintoul/DesignDictionary.xyz',
},
...config.nav,
],
sidebar: config.sidebar,
},
locales: {
'/': {
label: 'English',
},
'/fr/': {
label: 'Français',
selectText: 'Langues',
nav: [
{ text: 'Accueil', link: '/fr/' },
{
text: 'GitHub',
link: 'https://github.com/mrintoul/DesignDictionary.xyz',
},
],
// sidebar: getSidebar('./fr/'),
},
},
},
locales: {
'/': {
lang: 'en-US',
title: 'DesignDictionary.xyz',
description: 'The open-source dictionary for design',
},
'/fr/': {
lang: 'fr',
title: 'DesignDictionary.xyz',
description: 'Le dictionnaire source-ouverte pour design',
},
},
};
I could be doing something wrong because I'm not a good node developer, however it looks to me like the first parameter to the filter function is always an empty object and therefore this functionality is not useable.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.