Customize page title per plugin instance - avoid duplicated page title

greenpau commented 2 years 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.
[X] I have tried creating a repro with https://new.docusaurus.io.
[X] 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

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

Josh-Cena commented 2 years ago

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:

https://github.com/facebook/docusaurus/blob/cbcaa52f88cb702a3712c2b4c19b02225f975ea9/packages/docusaurus-theme-common/src/utils/generalUtils.ts#L12-L14

greenpau commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@Josh-Cena , what about adding pluginTitle field?

Josh-Cena commented 2 years ago

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

slorber commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

https://github.com/facebook/docusaurus/discussions/6640 https://github.com/facebook/docusaurus/discussions/7491

elitan commented 2 years ago

Another one: https://github.com/facebook/docusaurus/discussions/7535

anaclumos commented 1 year ago

Would like to hear any updates on this!

Sas2k commented 1 year ago

yeah same here (Not to NecroPost)

laurekamalandua commented 1 year ago

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 commented 1 year ago

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.

facebook / docusaurus