blogTitle is overridden by site title when at site root

root-io commented 5 months ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[X] I have tried the npm run clear or yarn clear command.
[X] 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.
[X] I have read the console error message carefully (if applicable).

Description

blogTitle not working

Someone at the end of this thread seems to have a similar issue: https://github.com/facebook/docusaurus/discussions/5119

Reproducible demo

No response

Steps to reproduce

  presets: [
    [
      'classic',
      {
        blog: {
          routeBasePath: "/",
          blogTitle: "Blog",
        },
      } satisfies Preset.Options,
    ],
  ],

Expected behavior

I want the title of the page to be: "Blog | Foo"

Actual behavior

The blogTitle is not showing, I get the config title twice: "Foo | Foo".

Your environment

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

Self-service

[ ] I'd be willing to fix this bug myself.

OzakIOne commented 5 months ago

Hello I tried when creating a minimal repo and I can't reproduce your issue

https://stackblitz.com/edit/github-srzyqm?file=docusaurus.config.js

Please provide a minimal repro on stackblitz with what you want as output so we can further assist you

root-io commented 5 months ago

Hey OzaklOne thanks for the stackblitz, I was able to repro using your code with few changes, the important part is routeBasePath: "/", because I want the blog to be hosted on root with no docs or pages. I also deleted the src/pages folder

          blog: {
            blogTitle: 'My blog',
            routeBasePath: "/",
         }
         ...
          // {
          //   type: 'docSidebar',
          //   sidebarId: 'tutorialSidebar',
          //   position: 'left',
          //   label: 'Tutorial',
          // },
          { to: '/', label: 'Blog', position: 'left' },

OzakIOne commented 5 months ago

From what I tried and understand, when you are in blog only mode blogTitle is not the title of the page anymore, blogTitle is the title of the page when routeBasePath is not set to '/' because title will take the priority over blogTitle and indeed on the route / of your website you will have title twice so by default 'My blog | My blog'

slorber commented 5 months ago

Yes that looks like we have this historical behavior in the theme:

function BlogListPageMetadata(props: Props): JSX.Element {
  const {metadata} = props;
  const {
    siteConfig: {title: siteTitle},
  } = useDocusaurusContext();
  const {blogDescription, blogTitle, permalink} = metadata;
  const isBlogOnlyMode = permalink === '/';
  const title = isBlogOnlyMode ? siteTitle : blogTitle;
  return (
    <>
      <PageMetadata title={title} description={blogDescription} />
      <SearchMetadata tag="blog_posts_list" />
    </>
  );
}

I'd consider it a bug because that looks wrong to me.

Having a blog homepage at / does not mean a site only contains a blog. You might have a blog at the root of your site and yet have docs.

I'm not sure how we'll fix it yet, but this will likely be done as part of a global siteTitle breaking-change PR where we change other things as well.

In the meantime you can swizzle BlogListPageMetadata and fix that behavior, use the siteConfig.title if you only host a blog.

facebook / docusaurus