vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
12.91k stars 2.08k forks source link

Next Page Always Shows First Page #3031

Open shellscape opened 1 year ago

shellscape commented 1 year ago

Describe the bug

I cannot for the life of me get the Next Page button to show anything but the first page (in this case Introduction) I know there are several issues that have been closed about this same topic, but their resolutions are all to use absolute URLs, which I am. Below is my configuration and what the shape of the sidebar settings looks like:

Reproduction

export default defineConfig({
  appearance: 'force-dark',
  base: '/',
  cleanUrls: true,
  description: 'Build emails with a delightful DX',
  head: [
    [
      'link',
      {
        rel: 'shortcut icon',
        href: `data:image/svg+xml;charset=UTF-8,%3csvg width='126' height='113' viewBox='0 0 126 113' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.199951 50V109V113H4.19995H121.8H125.8V109V50H117.8V105H8.19995V50H0.199951Z' fill='%2364595C'/%3e%3cpath d='M0 53.429V47.4258L48.3069 22.8124V32.4176L11.2516 50.2773L11.5517 49.677V51.1778L11.2516 50.5775L48.3069 68.4372V78.0424L0 53.429Z' fill='%2364595C'/%3e%3cpath d='M79.4367 0L54.6832 92H46.582L71.3356 0H79.4367Z' fill='%2364595C'/%3e%3cpath d='M126 53.429L77.6931 78.0424V68.4372L114.748 50.5775L114.448 51.1778V49.677L114.748 50.2773L77.6931 32.4176V22.8124L126 47.4258V53.429Z' fill='%2364595C'/%3e%3c/svg%3e `
      }
    ]
  ],
  ignoreDeadLinks: true,
  markdown: {
    theme: {
      dark: 'slack-dark',
      light: 'slack-ochin'
    }
  },
  outDir: './dist',
  srcDir: 'markdown',
  themeConfig: {
    logo: '/logo.svg',
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: 'Documentation', link: '/docs/introduction' },
      { text: 'Quick Start', link: '/docs/quick-start' },
      { text: 'Email Samples', link: '/docs/samples' }
    ],
    sidebar,
    siteTitle: '',
    socialLinks: [
      { icon: 'discord', link: 'https://github.com/vuejs/vitepress' },
      { icon: 'github', link: 'https://github.com/shellscape/jsx-email' }
    ]
  },
  titleTemplate: 'JSX email • :title'
});

And the sidebar:

[
  {
    text: 'Meat and Potatoes',
    items: [
      { link: '/docs/introduction', text: 'Introduction' },
      { link: '/docs/quick-start', text: 'Quick Start' },
      { link: '/docs/contributing', text: 'Contributing' }
    ]
  },
  {
    text: 'Components',
    items: [
      { link: '/docs/components/button', text: 'Button' },
      { link: '/docs/components/column', text: 'Column' },
      { link: '/docs/components/container', text: 'Container' },
      { link: '/docs/components/font', text: 'Font' },
      { link: '/docs/components/head', text: 'Head' },
      { link: '/docs/components/heading', text: 'Heading' },
      { link: '/docs/components/hr', text: 'Hr' },
      { link: '/docs/components/html', text: 'Html' },
      { link: '/docs/components/image', text: 'Image' },
      { link: '/docs/components/link', text: 'Link' },
      { link: '/docs/components/markdown', text: 'Markdown' },
      { link: '/docs/components/preview', text: 'Preview' },
      { link: '/docs/components/row', text: 'Row' },
      { link: '/docs/components/section', text: 'Section' },
      { link: '/docs/components/tailwind', text: 'Tailwind' },
      { link: '/docs/components/text', text: 'Text' }
    ]
  },
  {
    text: 'Core',
    items: [
      { link: '/docs/core/cli', text: 'Cli' },
      { link: '/docs/core/render', text: 'Render' }
    ]
  }
]

Expected behavior

Following advice in other issues, I would have expected that using absolute urls in link would produce a behavior where the Next Page button would indeed show the name and url of the next page in the sidebar.

System Info

MacOS Ventura
Vitepress@latest
Node v18

(envinfo hangs on an M2)

Additional context

No response

Validations

brc-dd commented 1 year ago

Are those links in sidebar working? Can you share a minimal version of this via https://vitepress.new ?

shellscape commented 1 year ago

Links in the sidebar are indeed working. I'm not sure how to boil down the implementation to something more minimal in this context. The site is fairly small and can be found here: https://github.com/shellscape/jsx-email/tree/main/apps/web

fightwithtiger commented 11 months ago

me too

TheGB0077 commented 11 months ago

I faced this not too long ago, the only way I found to make it work was to create a base url and then set all links relative to that. Here's an example:

  sidebar: {
    "/docs/options": {
      base: "/docs/options",
      items: [
        {
          text: "Example 1",
          collapsed: false,
          items: [
            { text: "First page", link: "/" }, // equivalent file /docs/options/index.md
            { text: "Second page", link: "/two" }, // equivalent file /docs/options/two.md
            { text: "Third page", link: "/three" }, // equivalent file /docs/options/three.md
          ],
        },
      ],
    },
  },
svanimpe commented 9 months ago

I'm having the exact same issue. I'm new to VitePress, and just following along with the examples, so I have no clue why this isn't working.

bukowa commented 3 months ago

Yep, same issue here example: https://stackblitz.com/edit/vite-yzovsb

brc-dd commented 3 months ago

@bukowa In that example you've extra trailing slash. Remove them, it'll work fine:

image
bukowa commented 3 months ago

@brc-dd Thank you it works but I just created another example with sub folder where this is broken: https://stackblitz.com/edit/vite-yzovsb

brc-dd commented 3 months ago

The second link doesn't have trailing slash 🫠

image

/foo/index.md -> /foo/ /foo/bar.md -> /foo/bar /baz.md -> /baz

bukowa commented 3 months ago

The second link doesn't have trailing slash 🫠

Oh ok lol thanks again. Confusing really

lepture commented 3 months ago

Here is an example: https://stackblitz.com/edit/vite-atxxax?file=docs%2F.vitepress%2Fconfig.ts

The Get Started page will have Server Side as next page, but all other pages will have Get Started as next page.

brc-dd commented 3 months ago

@lepture Like I said earlier, there should be proper leading/trailing slashes. Read my earlier comments. Add proper slashes to your example, it will work fine:

image
lepture commented 3 months ago

@brc-dd thanks, you are correct.

joeldrapper commented 1 month ago

I have the same issue.

patrickReiis commented 14 hours ago

help