Docusaurus: Confusing interaction between sidebar_label and title

[steveklabnik]

As https://docusaurus.io/docs/en/doc-markdown.html says:

title: The title of your document. If this field is not present, the document's title will default to it's id.

sidebar_label: The text shown in the document sidebar for this document. If this field is not present, the document's sidebar_label will default to it's title.

I'm trying to use these two together. Here's a concrete example:

I have foo.md. It has this as its header:

---
title: A Foo
---

This works great. But, this means I have "A Foo" in the sidebar, and I'd like it to be Foo. So I set the sidebar_label:

---
title: A Foo
siebar_label: Foo
---

And now, my page title is back to Foo, rather than A Foo.

[JoelMarcey]

@steveklabnik Hi! Interesting. Let me make sure we are on the same page here. The example documentation that comes with docusaurus-init or npm run examples has a file called doc1.md that looks something like:

---
id: doc1
title: Latin-ish
sidebar_label: Example Page
---

Check the [documentation](https://docusaurus.io) for how to use Docusaurus.

## Lorem

When I run the site, I get:

Title is "Latinish" in both the Chrome tab and the page.
Sidebar is "Example Page"

[steveklabnik]

Hm, okay. So I have, in future.md:

---
title: the future
sidebar_label: future
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan lectus ac ornare consectetur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ac sem malesuada, pretium dui sed, dignissim massa. Nulla facilisi. In mattis neque nec sem interdum pretium. Quisque gravida neque ac libero auctor cursus. Etiam tempor laoreet libero, quis hendrerit libero gravida ac. Sed enim elit, tincidunt a elit vel, commodo sagittis ex. Quisque nec erat lobortis, vehicula libero ac, rutrum libero. Aliquam rhoncus sit amet odio nec posuere. 

I get this:

If I remove the sidebar label

---
title: the future
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan lectus ac ornare consectetur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ac sem malesuada, pretium dui sed, dignissim massa. Nulla facilisi. In mattis neque nec sem interdum pretium. Quisque gravida neque ac libero auctor cursus. Etiam tempor laoreet libero, quis hendrerit libero gravida ac. Sed enim elit, tincidunt a elit vel, commodo sagittis ex. Quisque nec erat lobortis, vehicula libero ac, rutrum libero. Aliquam rhoncus sit amet odio nec posuere. 

I get this:

This is true if I set id explicitly as well.

I was mulling over what's different between your example and mine, and it hit me: my id and sidebar_label are the same, but yours are different. And sure enough, if I make sidebar_label something different than the id, it works.

Tricky! This still sounds like a bug, I guess, but I have no idea how that might happen.

[JoelMarcey]

@steveklabnik Good reproduction. Thanks! I will look into this.

[marcosvega91]

@steveklabnik I think that the problem is in write-translation.js file

   translations['localized-strings'][metadata.localized_id] = metadata.title;

   if (metadata.sidebar_label) {
      translations['localized-strings'][metadata.sidebar_label] =
      metadata.sidebar_label;
   }

If localized_id=id is the same as sidebar_label inside the if sidebar_label value replaces the localized_id one

Maybe a possibile solution can be moving sidebar and id translations under different keys inside 'localized-strings'. What do you think @JoelMarcey ?