themeConfig metadatas field possibly not working in beta.0

[markerikson]

🐛 Bug Report

We've got the Redux docs sites configured to show minimal-sized social media previews:

  themeConfig: {
    metadatas: [{ name: 'twitter:card', content: 'summary' }],
    // etc
  }

Today I've been merging in the PRs that upgraded us from versions around alpha.72 or so to beta.0.

In the process, I noted that the new sites are showing a different social media preview format, whereas the main RTK site (which has not yet been updated) is still showing the desired smaller preview:

This suggests to me that the beta or one of the last alphas may have somehow stopped including the metadatas field. If I look at the Redux core "Getting Started" page now, with beta.0, I see these headers:

whereas the Redux Toolkit "Getting Started" page, which has not yet been redeployed and updated, shows these headers:

and both of them have the same metadatas configuration in their config file.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

Unconfirmed, but likely:

• Create a docusaurus.config.js with:

  themeConfig: {
    metadatas: [{ name: 'twitter:card', content: 'summary' }]
  }

• Install Docusaurus 2 alpha.72 or similar alpha
• Confirm that the correct 'twitter:card' header is displayed in the page
• Update to beta.0 and rebuild
• Confirm that the incorrect large_image_summary header is included instead

Expected behavior

The Twitter image format specified metadatas would used, as it has been

Actual Behavior

The specified Twitter format was not used and the header results in the wrong social media preview size

Your Environment

I see the bug in the currently deployed Redux core and React-Redux docs sites (https://redux.js.org, https://react-redux.js.org).

As a specific example, these were the React-Redux upgrade PRs:

• chore: Docusaurus with webpack 5 reduxjs/react-redux#1714
• Update Docusaurus to beta.0 and add "Learn Modern Redux" embed reduxjs/react-redux#1724

Used Docusaurus version: 2.0.0-beta.0

Reproducible Demo

Skipping for the moment because it's late and I need to call it a night.

[lex111]

Oh, my bad, will be fixed in #4871

[markerikson]

Thanks!

I saw one other issue with the upgrade that showed up sometime between alpha.72 and beta.0. I asked over in the Discord but haven't gotten an answer yet. Lemme paste that here:

did one of the last alphas or betas change the page header behavior? We've had all our pages with show_title: false, but then a hardcoded # Some Page Title as the first content.

I just merged the alpha.75 PRs and then upgraded us to beta.0, but suddenly I'm not seeing those headers on some pf the pages. It kinda looks like it may show our headers if there's content before the #. adding any extra content between the closing -- and the # header seems to fix this, as in:

---
id: provider
title: Provider
sidebar_label: Provider
hide_title: true
description: 'API > Provider: providing the Redux store to your React app'
---

 

# `Provider`

like, just adding that   makes the header show up, and removing it makes the header disappear

Not sure if this is a bug or what. I temporarily worked around it by adding   to every single page in all our docs repos.

[lex111]

Apparently this is expected behavior because we are parsing our "custom" Markdown first-level heading, so if you set hide_title in the frontmatter of doc, it will not show up.
Can you clarify your use case, current issue is that you want to use inline code in heading and it is not possible using the title field?

[markerikson]

Yeah, actually, that's exactly the kind of thing we want to do. Not on every page, of course, but pages like https://react-redux.js.org/api/provider . Also, I think sometimes the headers we've shown don't necessarily match the page titles.

Now, admittedly part of the problem here is we've copy-pasted the front matter across new pages as we create them, so the hide_title: true thing has spread across our docs files.

But, this definitely used to work fine as-is up until the upgrade from alpha.72 to beta.0, and it's weird that inserting any other characters in front of the header fixes this.

[lex111]

Seems tricky, since to resolve this case we should parse/render Markdown syntax in first-level heading (to at least avoid using such workaround with hide_title: true and special chars). Let's wait for Sebastien's feedback, maybe it won't be so hard to do. Or since this is rather specific use case, we can allow only use of inline code in first level headings.

[markerikson]

Note that we do frequently use Markdown syntax in other headers as well, but that doesn't cause issues the way this is.

[lex111]

Do you mean other headings (not the first-level)?

[markerikson]

Yeah, example: https://redux-toolkit.js.org/api/createAsyncThunk#type