Customize page title per plugin instance - avoid duplicated page title #5878

greenpau · 2021-11-04T23:17:47Z

Have you read the Contributing Guidelines on issues?

I have 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

By default, the landing page name repeats itself, i.e. "Auth with Caddy | Auth with Caddy".

Steps to reproduce

Please see the landing page of https://authp.github.io/

Expected behavior

The page name should not repeat, i.e. be "Auth with Caddy".

Actual behavior

The name repeats itself "Auth with Caddy | Auth with Caddy".

Your environment

Public source code: https://github.com/authp/authp.github.io
Public site URL: https://authp.github.io/
Docusaurus version used: 2.0.0-beta.9
Environment name and version (e.g. Chrome 89, Node.js 16.4): Node v14.17.6
Operating system and version (e.g. Ubuntu 20.04.2 LTS): CentOS 8

Reproducible demo

No response

Self-service

I'd be willing to fix this bug myself.

The text was updated successfully, but these errors were encountered:

Josh-Cena · 2021-11-04T23:23:31Z

You can omit the title field in the home page layout:

export default function home() {
  return (
    // Don't add the title here
    <Layout>
      {/* ... */}
    <Layout>
  )
}

And I do think there's something we can do: check if site title is equal to page title, and do not duplicate if that's the case:

docusaurus/packages/docusaurus-theme-common/src/utils/generalUtils.ts

Lines 12 to 14 in cbcaa52

    
           return title && title.trim().length 
        
             ? `${title.trim()} ${titleDelimiter} ${siteTitle}` 
        
             : siteTitle;

greenpau · 2021-11-04T23:32:27Z

You can omit the title field in the home page layout:

@Josh-Cena , thank you! This change from defaults worked! 👍

And I do think there's something we can do: check if site title is equal to page title, and do not duplicate if that's the case:

Yes, that would be great!

Additionally, it would be nice to have "Page Name" | "Instance Name" | "Site Title" in the case of multi-doc instance.

For example, I have two pages:

Path	Page Name
https://authp.github.io/docs/authenticate/intro	`Auth Portal Plugin Overview \| Auth with Caddy`
https://authp.github.io/docs/authorize/intro	`Authorize Plugin Overview \| Auth with Caddy`

It would be nice to have instance name (i.e. Authenticate and Authorize) taken into account.

Path	Page Name
https://authp.github.io/docs/authenticate/intro	`Auth Portal Plugin Overview \| Authenticate \| Auth with Caddy`
https://authp.github.io/docs/authorize/intro	`Authorize Plugin Overview \| Authorize \| Auth with Caddy`

Josh-Cena · 2021-11-07T03:45:37Z

I propose this API to replace the current titleDelimiter in docusaurus.config.js:

titleFormat: '{pageTitle} | {pluginID} | {siteTitle}'

It will leverage the existing interpolate API, and you can swap out the delimiter, rearrange the components, get rid of siteTitle on all pages, etc.

Afaik, every page belongs to a plugin, so the pluginID will always be available. When pluginID === 'default', it will be omitted.

greenpau · 2021-11-07T05:04:30Z

@Josh-Cena , what about adding pluginTitle field?

Josh-Cena · 2021-11-07T05:10:56Z

You mean... allowing each plugin instance to declare its own title component instead of relying on pluginID? That sounds fine with me

slorber · 2021-11-09T19:11:06Z

Using plugin instance name in site title is a quite specific need.

In any case, I'd rather not apply this by default, and I think it's more a theming concern, not sure we want to add a nodejs plugin option just for this.

React Helmet already has a titleTemplate system so it's worth reusing it (already in use) instead of using our custom interpolate fn.

The way I'd solve it:

swizzle/wrap the theme DocPage component (we should rename it to something better like DocLayout, and IMHO each plugin should always have a layout comp with a consistent name)
add <Head titleTemplate={currentInstanceId === "ios" ? "%s | iOS | MySite" : "%s | Android | MySite"}/> in it

Didn't test this but it should work. I'd rather use this because this is a marginal use-case and we already have/want APIs to support that

slorber · 2021-11-09T19:16:44Z

Oh actually didn't even notice but we don't use titleTemplate but rather a custom useTitleFormatter hook 😅

titleFormat: '{pageTitle} | {pluginID} | {siteTitle}'

This is not a bad idea to have such a global themeConfig but the pluginId is not necessarily a good-looking label, and we can't easily make it good looking because it's used in many places like FS paths, not allowing all kind of chars.

slorber · 2022-05-26T13:32:09Z

Relevant discussions related to customizing site title (in particular the prefix)

#6640
#7491

elitan · 2022-05-31T18:27:12Z

Another one: #7535

anaclumos · 2022-09-14T22:10:19Z

Would like to hear any updates on this!

Sas2k · 2022-09-30T13:37:00Z

yeah same here (Not to NecroPost)

laureladastra · 2023-01-25T15:55:29Z

Upvoted. Not entirely sure what the rationale was behind the decision to create these SEO values dynamically. You want to have full control as a website owner over this aspect.

jetxr · 2023-07-01T17:23:21Z

I propose this API to replace the current titleDelimiter in docusaurus.config.js:
titleFormat: '{pageTitle} | {pluginID} | {siteTitle}'
It will leverage the existing interpolate API, and you can swap out the delimiter, rearrange the components, get rid of siteTitle on all pages, etc.

This would be superb. Would help to avoid swizzling layouts just to change the title format.

greenpau added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Nov 4, 2021

Josh-Cena removed the status: needs triage This issue has not been triaged by maintainers label Nov 4, 2021

slorber changed the title ~~landing/home page name repeats itself~~ Customize page title per plugin instance Nov 9, 2021

Josh-Cena added feature This is not a bug or issue with Docusausus, per se. It is a feature request for the future. and removed bug An error in the Docusaurus core causing instability or issues with its execution labels Jan 31, 2022

Josh-Cena mentioned this issue May 10, 2022

Why index title had repeat ? #7389

Closed

7 tasks

Josh-Cena mentioned this issue May 27, 2022

fix: always emit SEO title + og:title meta #7362

Merged

3 tasks

adriantam mentioned this issue Jun 13, 2022

Fix meta description so that embeds are properly formatted openfga/openfga.dev#32

Closed

slorber added the bug An error in the Docusaurus core causing instability or issues with its execution label Aug 16, 2022

slorber changed the title ~~Customize page title per plugin instance~~ Customize page title per plugin instance - avoid duplicated page title Aug 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Customize page title per plugin instance - avoid duplicated page title #5878

Customize page title per plugin instance - avoid duplicated page title #5878

greenpau commented Nov 4, 2021

Josh-Cena commented Nov 4, 2021

greenpau commented Nov 4, 2021

Josh-Cena commented Nov 7, 2021

greenpau commented Nov 7, 2021

Josh-Cena commented Nov 7, 2021

slorber commented Nov 9, 2021 •

edited

Loading

slorber commented Nov 9, 2021

slorber commented May 26, 2022

elitan commented May 31, 2022

anaclumos commented Sep 14, 2022

Sas2k commented Sep 30, 2022 •

edited

Loading

laureladastra commented Jan 25, 2023

jetxr commented Jul 1, 2023

Customize page title per plugin instance - avoid duplicated page title #5878

Customize page title per plugin instance - avoid duplicated page title #5878

Comments

greenpau commented Nov 4, 2021

Have you read the Contributing Guidelines on issues?

Prerequisites

Description

Steps to reproduce

Expected behavior

Actual behavior

Your environment

Reproducible demo

Self-service

Josh-Cena commented Nov 4, 2021

greenpau commented Nov 4, 2021

Josh-Cena commented Nov 7, 2021

greenpau commented Nov 7, 2021

Josh-Cena commented Nov 7, 2021

slorber commented Nov 9, 2021 • edited Loading

slorber commented Nov 9, 2021

slorber commented May 26, 2022

elitan commented May 31, 2022

anaclumos commented Sep 14, 2022

Sas2k commented Sep 30, 2022 • edited Loading

laureladastra commented Jan 25, 2023

jetxr commented Jul 1, 2023

slorber commented Nov 9, 2021 •

edited

Loading

Sas2k commented Sep 30, 2022 •

edited

Loading