Current page not highlighted in generated sidebar, prev/next links not working

[eagereyes]

When I use your plugin, it generates a nice list of pages in the sidebar. However, the current page isn't indicated in the list, and the previous and next links on the bottom of the page don't work (there's no previous, and next always points to the first page in the list). This works on your site, so I figure it's something off with my configuration. Have you seen this before?

Here's the current (very incomplete) version of my site: https://new.eagereyes.org/blog/2016/a-decade-of-eagereyes

I'm linking to the page that's the second item in the list, but it's not highlighted, and the navigation buttons on the bottom are incorrect.

[jooy2]

Hello. Thank you for using vitepress-sidebar plugin.

Can you provide the following additional information to help us identify the issue a little faster?

• Version of vitepress and vitepress-sidebar you are using.
• Settings in themeConfig.sidebar in the config file in the .vitepress directory.

Thanks.

[eagereyes]

Hi, thanks for the quick response! Both vitepress and vitepress-sidebar are on the current versions (1.0.0-beta.6 for vitepress, 1.8.2 for vitepress-sidebar).

Here's my config:

sidebar: generateSidebar({
            rootGroupText: 'Blog 2016',
            scanStartPath: 'blog/2016',
            collapseDepth: 2,
            capitalizeFirst: true,
            useTitleFromFrontmatter: true,
            excludeFolders: ['node_modules']
        }),

I've tried turning cleanURLs off and on, makes no difference. All the links are correct, as you can see.

[jooy2]

If you only have one kind of sidebar you want to use, can you set documentRootPath instead of scanStartPath? See: https://github.com/jooy2/vitepress-sidebar#documentrootpath

For example, if blog/2016 is the top-level path where your .md file is located, then documentRootPath would be blog/2016.

sidebar: generateSidebar({
            rootGroupText: 'Blog 2016',
            documentRootPath: 'blog/2016',
            collapseDepth: 2,
            capitalizeFirst: true,
            useTitleFromFrontmatter: true,
            excludeFolders: ['node_modules']
        }),

However, this value can vary depending on the structure of your project. The tree example below will give you an idea of the path values you should use.

/
├─ package.json
├─ src/
├─ docs/        <--------------- `documentRootPath` ('/docs')
│  ├─ .vitepress/        <------ VitePress config directory
│  ├─ another-directory/
│  ├─ hello.md
│  └─ index.md
└─ ...

Depending on your situation, you may need to use it in conjunction with VitePress' srcDir option: https://vitepress.dev/guide/routing#source-directory

The scanStartPath is used for multi-sidebar implementations, or if you need an additional leading path to the documentRootPath.

[eagereyes]

Hi, thanks but this was just to keep the navigation more compact for now. My document root path is the main directory of the repo.

I just pushed a version with the scanStartPath removed and a second year of content, still the same issue though.

I've also added a "Manual Nav" section below. Highlighting and prev/next works within that section, but not in the part generated by your plugin. I put it below on purpose, assuming that it would find the first match. But when you open up the Blog 2023 links, you see that it won't highlight there (I also tried it on top, same thing).

Here's one of the links in the manual nav section where it works: https://new.eagereyes.org/blog/2023/rainbow-colormaps-are-not-all-bad-paper

Here's the sidebar section from my config:

sidebar: [
    generateSidebar({
        collapseDepth: 2,
        capitalizeFirst: true,
        useTitleFromFrontmatter: true,
        excludeFolders: ['node_modules', 'publications']
      })[0],
    {
        text: 'Manual Nav',
        items: [
            { text: 'Paper: Rainbows', link: '/blog/2023/rainbow-colormaps-are-not-all-bad-paper'},
            { text: 'Paper: Notebooks', link: '/blog/2023/paper-notebooks-for-data-analysis-and-visualization'},
            { text: 'Video: They Rule', link: '/blog/2023/new-video-exploring-the-connections-between-companies-with-they-rule'},
            { text: 'Course on Data Vis Fundamentals', link: '/blog/2023/course-on-data-vis-fundamentals-and-best-practices'},
        ]
    }
  ],

[jooy2]

Hello, Thank you for the information. Unfortunately, I haven't found a cause that I can speculate on yet.

Can you send us the results of running the following commands? If there is a lot of content or something sensitive, you can send me the results of just a few documents.

In vitepress config file, Paste it at the top of export default.

console.dir(generateSidebar({...your_configurations}), { depth: null }); // <-- add this line

export default {
    title: '',
    ....
};

And when you run the vitepress dev command, the execution result of vitepress-sidebar is output to the terminal.

[eagereyes]

Ah, nice! I wasn't clear how to get the output of the function (not super familiar with Vite tbh). I think I've spotted the problem.

This is the output:

[
  {
    text: 'Table of Contents',
    items: [
      {
        text: 'Blog',
        items: [
          {
            text: '2016',
            items: [
              {
                text: '3D Bar Charts Considered Not That Harmful',
                link: 'blog/2016/3d-bar-charts-considered-not-that-harmful'
              },
              {
                text: 'A Decade of EagerEyes',
                link: 'blog/2016/a-decade-of-eagereyes'
              },
              {
                text: 'A Reanalysis of A Study About (Square) Pie Charts from 2009',
                link: 'blog/2016/a-reanalysis-of-a-study-about-square-pie-charts-from-2009'
              },
              {
                text: 'A Roundup of Year-End News Graphics Roundups',
                link: 'blog/2016/a-roundup-of-year-end-roundups'
              },
[...]
            ],
            collapsed: true
          }
        ],
        collapsed: false
      }
    ],
    collapsed: false
  }
]

I notice that the links don't start with a /, which seems to be necessary for them to match the path. When I remove the leading slash from my manual links, they also don't match.

Is there an option to turn that on or off? I'm not sure how I'm doing this wrong, but I bet there's a setting somewhere that I'm missing.

[jooy2]

Hello,

I just released version 1.9.5, which fixes this issue.

Can you confirm if the issue persists after upgrading the module?

Thanks.

[eagereyes]

Yes that fixes it! See here: https://new.eagereyes.org/blog/2016/a-decade-of-eagereyes

Thank you so much!

[jooy2]

I'm glad to hear that the issue has been resolved! Thank you for responding to our request to resolve the issue :)