Broken sidebar when loading page

[florian-sattler]

Describe the bug

First of all: Thank you all very much for your work on this amazing software! 👍

When navigating to page using a direkt link the sidebar overlap the content of the page:

However when accessing the page from the main page, everything looks normal:

The problem seems to be caused by a missing class on two elements. Take a look at the developer console:

Broken:

Working:

Notice how the class .has-sidebar is missing on the first (.VPLocalNav) and third element (#VPContent) below the header (.VPNav)

When manually adding this class in the browers dev tools the site looks normal again 😄

Reproduction

See above.

Expected behavior

The sidebar should be located on the side not above the page content.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 12.23 GB / 15.61 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
  Browsers:
    Chrome: 123.0.6312.105
  npmPackages:
    vitepress: ^1.0.2 => 1.0.2

Additional context

No response

Validations

• [X] Check if you're on the latest VitePress version.
• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

It seems like a hydration mismatch. Can you share this using a repo or https://vitepress.new

[mikeboe]

Same for me, when you go on the nested page through the link directly, the layout breaks. When you go through the home page, the layout is correct. Using 1.0.2. Strangely, happens only in production in docker for me, in dev and with preview locally it seems fine.

[brc-dd]

@mikeboe Can you share the link where you've hosted it? In your docker setup are you running nginx? Can you share it's configuration?

[brc-dd]

Can I share somewhere privately?

Yeah I'm on discord (#vitepress channel).

Looks like your server is serving home page for all pages. How are you hosting your site? Have you added some rewrite rule on cloudflare or something?

[mikeboe]

You're right, I have an error in nginx configuration, now it works. Thanks man.

[florian-sattler]

I'm also running an Nginx stack. This could very well be the problem. I will investigate this and get back to you.

Would it make sense to add a 'docker' section to the deployment section of the docs? I imagine other people might also run this page inside a container. I would be happy to create a pull request with a first draft of the new section.

[mikeboe]

This did the job for me: add nginx config example #3235. I was missing $uri.html in the nginx conf.

server {
    listen 80;
    location / {
        root /app/build;
        index index.html;
        try_files $uri $uri/ $uri.html =404;
    }
}

[florian-sattler]

I can confirm this is a nginx issue. I erroneously served index.html as a backup, which in turn loaded the article with the wrong page initialization as described above.

[florian-sattler]

@brc-dd Should I propose a docs section?

[brc-dd]

Yeah, contributions are welcome. Thanks!

Just add Nginx's routing related config there. Other stuff and dockerfile, etc. is probably not needed. You can pick whatever works best from this thread or #3235 or #2837.

[florian-sattler]

@brc-dd I hope this meets your expectations. Let me know if improvements are needed!