Giters

facebook / docusaurus

Easy to maintain open source documentation websites.

Home Page:https://docusaurus.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problems with locale url on homepage and blog

cazArkh opened this issue · comments

commented

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • I have tried creating a repro with https://new.docusaurus.io.
  • I have read the console error message carefully (if applicable).

Description

I followed the documentation on the docusaurus website to add an i18n locale dropdown. By default my website is in French and I'm trying to implement an English translation. When I serve locally the built version of my project I have some problems with switching locale on either the homepage or the blog section depending on my docusaurus.config.js configuration. (see in steps to reproduce)

Reproducible demo

No response

Steps to reproduce

Here is a piece of my configuration in my file docusaurus.config.js :

  // Production url
  url: 'https://localhost:3000', // need to be changed
  // /<baseUrl>/ pathname under which the documentation is served
  baseUrl: '/user-doc/',

  trailingSlash: false,

  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',

  // Even if you don't use internalization, you can use this field to set useful
  // metadata like html lang.
  i18n: {
    defaultLocale: 'fr',
    locales: ['fr', 'en'],
    localeConfigs: {
      fr: {
        label: 'Français',
      },
      en: {
        label: 'English',
      },
    },
  },

And a quick overview of my project (folders /docs/, /blog/ and /i18n/)

user-doc
│
├── blog
│   └── release-notes
│     ├── 1.1
│     ├── ...
│     └── 1.2
│         └── index.md
├── docs
│   ├── admin
│   └── user
├── i18n
│   ├── docusaurus-plugin-content-blog
│   |     ├── release-notes
│   |     │    ├── 1.1
│   |     │    ├── ...
│   |     │    └── 1.2
│   |     │         └── index.md
│   |     └──options.json
│   ├── docusaurus-plugin-content-docs
│   |     ├── current
│   |     │   ├── admin
│   |     │   └── user
│   |     └──current.json
│   ├── docusaurus-plugin-content-pages
│   └── docusaurus-theme-classic
│      ├── footer.json
│      └──navbar.json

When I serve locally the built version of my project I have the following problems :

if I set trailingSlash: false :

On the homepage, anytime the english button on the dropdown is clicked it tries to go to /user-doc/en/ but I have a status 302 and I am directly redirected to /user-doc/

But if I go to /user-doc/en, I works but after the dropdown is broken... In debug thhe url on French looks like this /user-doc//user-doc/en and if I click on it I have a status 301 and I am getting redirected to /user-doc/en

On every other pages the dropdown is working.

if I set trailingSlash: undefined or trailingSlash: true :

When I am on the blog section (ex : /user-doc/blog/release-notes/1.1), anytime the english button on the dropdown is clicked it tries to go to the /user-doc/en/blog/release-notes/1.1 page and it shows the custom 404 and when you click it again it routes to /user-doc/en/en//blog/release-notes/1.1 and it keeps appending /en/ at the beginning of the url.

With this configuration on every other pages the dropdown is working.

I have been searching a lot on bug reports on your GitHub, on Stackoverflow and also on the Docusaurus documentation but I can't find why it's behaving like this.

Any ideas what could be causing the problem?

Thanks in advance for your help !!!

Expected behavior

if I set trailingSlash: false :
On the homepage, anytime the english button on the dropdown is clicked it would great to go to /user-doc/en/ and that the page /user-doc/en/ works

Actual behavior

if I set trailingSlash: false :
On the homepage, anytime the english button on the dropdown is clicked it tries to go to /user-doc/en/ but I have a status 302 and I am directly redirected to /user-doc/

Your environment

  • Public source code: N/A
  • Public site URL: N/A
  • Docusaurus version used: 3.2.1
  • Environment name and version (e.g. Chrome 89, Node.js 16.4): Node.js v20.9.0.
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS): Ubuntu

Self-service

  • I'd be willing to fix this bug myself.
commented

Instead of providing complex repro instructions that I need to reproduce on my side, please provide a runnable https://docusaurus.new/stackblitz repro. This way we'll be 100% sure we are talking about the same thing, it's more reliable than a wall of text and we save time.

Until a repro is provided, it looks more like a support request/question. I'm closing because many sites use i18n successfully already.

Please:

  • provide a runnable repro
  • tell me which commands to run on the repro to run the project in the same conditions as yours
  • tell me what I should see on the repro (actual vs expected), on which URL exactly
  • don't say "it works", "it doesn't work", "it's broken". Be precise, what do you see exactly that makes you think so.
  • include screenshots/videos if relevant
commented

Hello ! Sorry for the complex repro instructions, indeed it is much easier with a runnable repro.

You will find below the elements you requested:

Runnable repro

https://stackblitz.com/edit/github-wgjn8a

Commands to run on the repro and steps to reproduce

  1. npm run build
  2. npm run serve
  3. Go to http://localhost:3000/user-doc/
  4. On the top right corner, you should see the localeDropdown (by default "Français" is selected), click on "English" (the website stays on the french version /user-doc/)

Actual behavior

On the page http://localhost:3000/user-doc/; when selecting "English" on the localeDropdown the website stays on the same page http://localhost:3000/user-doc/

Expected behavior

On the page http://localhost:3000/user-doc/; when selecting "English" on the localeDropdown the website should redirect to the english version http://localhost:3000/user-doc/en/

If you need other elements let me know !

commented

Thanks, that's a legit bug due to building multiple locales under a baseurl (/baseUrl/ + /baseUrl/en/), a setup that is not super common. It doesn't happen if you use baseUrl: '/'.

What I see in practice is that http://localhost:3000/user-doc/en/ serves a server redirect to http://localhost:3000/user-doc/ (unexpected considering the static file actually exists at /build/en/index.html)

That's probably a bug in our docusaurus serve feature, but I suspect it should work fine if you deploy this to a CDN.

I'll fix it

commented

Thank you for your answer and the explanations !

I will try first to deploy my project to a CDN to see the result and come back to you

If there is still this bug I will use baseUrl: '/' while waiting for the fix

Thanks in advance for investigating !

commented

Will be fixed in #10090 and you'll be able to test it in the next canary release

commented

Thanks, that's a legit bug due to building multiple locales under a baseurl (/baseUrl/ + /baseUrl/en/), a setup that is not super common. It doesn't happen if you use baseUrl: '/'.

What I see in practice is that http://localhost:3000/user-doc/en/ serves a server redirect to http://localhost:3000/user-doc/ (unexpected considering the static file actually exists at /build/en/index.html)

That's probably a bug in our docusaurus serve feature, but I suspect it should work fine if you deploy this to a CDN.

I'll fix it

Just a little update on my side : I confirm that multiple locales works well when deployed to a CDN with baseUrl: '/user-doc/', so that's great !

Thanks again for the help !

commented

thanks for reporting 👍