ozum / vuepress-bar Goto Github PK

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

• vuepress-bar: 0.2.5
• Node.js: 13.12.0
• vuepress: 1.3.1

Config

const getConfig = require("vuepress-bar");
const barConfig = getConfig(`${__dirname}/..`, {
  addReadMeToFirstGroup: false,
  stripNumbers: false
});

Sources

• 0-foo/
  • 1-lorem.md
  • TITLE.md
• 1-bar/
  • 5-ipsum/
    • 1-something.md
    • 2-something-else.md
    • TITLE.md
  • TITLE.md
• 2-baz/
  • 5-boo/
    • 1-something.md
    • 2-something-else.md
    • TITLE.md
  • TITLE.md
• implicit/
  • callback/
    • index.md

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"
      ]
    }
  ]
}

See PR #14 and #16 for more information.

I tried the example-standard project from the docs directory.
It seems to work fine, but I get these errors on the console

Any ideas what might be causing this?

I only want my blog pages auto-generate, but all other pages generate sidebar too, and I can't remove the root dir.

How to remove root dir (Content)?

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!)

1. 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.

2. 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.

3. 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.

4. 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

Hello bro,I'm new to this plugin,get confused...I wander how to config those parameters?such as "pinyinNav"?

thanks for anyone who can help

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

• Nav.01.xx
  • Nav.01.aa
    • aa
    • Bb
  • Nav.02.bb
    • Cc
• Nav.10.yy

the sidebar is ok

but when I change to

• Nav.01.xx
  • Nav.01.aa
    • aa
    • Bb
  • Nav.02.bb
    • Cc
• Nav.10.yy
  • Nav.20.dd
    • Dd

the sidebar about yy does not display, xx can also display

I'm trying to add the sidebar filter as per the Readme however on the build i get ReferenceError: sidebar is not defined. Could you help please?

Themeconfig in config.js

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.