feat(v2): add ability to set custom title delimiter in config (#3460)

* feat(v2): add custom title delimiter to the theme classic

* fix validation tests

* remove title delimiter fallback

* move titleDelimiter to main config, update theme-bootstrap

* remove test value from config

* update test snapshot

* Improve docs

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>

packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.js

@@ -22,6 +22,7 @@ function Layout(props) {
     title: siteTitle,
     themeConfig: {image: defaultImage},
     url: siteUrl,
+    titleDelimiter,
   } = siteConfig;
   const {
     children,
@@ -33,8 +34,9 @@ function Layout(props) {
     permalink,
     version,
   } = props;
-  const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
-
+  const metaTitle = title
+    ? `${title} ${titleDelimiter} ${siteTitle}`
+    : siteTitle;
   const metaImage = image || defaultImage;
   let metaImageUrl = siteUrl + useBaseUrl(metaImage);
   if (!isInternalUrl(metaImage)) {

packages/docusaurus-theme-bootstrap/src/theme/DocItem/index.js

@@ -14,7 +14,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 function DocItem(props) {
   const {siteConfig = {}} = useDocusaurusContext();
-  const {url: siteUrl, title: siteTitle} = siteConfig;
+  const {url: siteUrl, title: siteTitle, titleDelimiter} = siteConfig;
   const {content: DocContent} = props;
   const {metadata} = DocContent;
   const {description, title, permalink} = metadata;
@@ -22,7 +22,9 @@ function DocItem(props) {
     frontMatter: {image: metaImage, keywords},
   } = DocContent;
 
-  const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
+  const metaTitle = title
+    ? `${title} ${titleDelimiter} ${siteTitle}`
+    : siteTitle;
   let metaImageUrl = siteUrl + useBaseUrl(metaImage);
   if (!isInternalUrl(metaImage)) {
     metaImageUrl = metaImage;

packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx

@@ -25,7 +25,7 @@ import {
 
 function DocItem(props: Props): JSX.Element {
   const {siteConfig = {}} = useDocusaurusContext();
-  const {url: siteUrl, title: siteTitle} = siteConfig;
+  const {url: siteUrl, title: siteTitle, titleDelimiter} = siteConfig;
   const {content: DocContent} = props;
   const {metadata} = DocContent;
   const {
@@ -54,7 +54,9 @@ function DocItem(props: Props): JSX.Element {
   // See https://github.com/facebook/docusaurus/issues/3362
   const showVersionBadge = versions.length > 1;
 
-  const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
+  const metaTitle = title
+    ? `${title} ${titleDelimiter} ${siteTitle}`
+    : siteTitle;
   const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
   return (
     <>

packages/docusaurus-theme-classic/src/theme/Layout/index.tsx

@@ -35,6 +35,7 @@ function Layout(props: Props): JSX.Element {
     title: siteTitle,
     themeConfig: {image: defaultImage, metadatas},
     url: siteUrl,
+    titleDelimiter,
   } = siteConfig;
   const {
     children,
@@ -46,7 +47,9 @@ function Layout(props: Props): JSX.Element {
     permalink,
     wrapperClassName,
   } = props;
-  const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
+  const metaTitle = title
+    ? `${title} ${titleDelimiter} ${siteTitle}`
+    : siteTitle;
   const metaImage = image || defaultImage;
   const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
   const faviconUrl = useBaseUrl(favicon);

packages/docusaurus-types/src/index.d.ts

@@ -49,6 +49,7 @@ export interface DocusaurusConfig {
         [key: string]: unknown;
       }
   )[];
+  titleDelimiter?: string;
 }
 
 /**

packages/docusaurus/src/server/__tests__/__snapshots__/config.test.ts.snap

@@ -38,6 +38,7 @@ Object {
   "themeConfig": Object {},
   "themes": Array [],
   "title": "Hello",
+  "titleDelimiter": "|",
   "url": "https://docusaurus.io",
 }
 `;

packages/docusaurus/src/server/configValidation.ts

@@ -23,6 +23,7 @@ export const DEFAULT_CONFIG: Pick<
   | 'presets'
   | 'customFields'
   | 'themeConfig'
+  | 'titleDelimiter'
 > = {
   onBrokenLinks: 'throw',
   onDuplicateRoutes: 'warn',
@@ -31,6 +32,7 @@ export const DEFAULT_CONFIG: Pick<
   presets: [],
   customFields: {},
   themeConfig: {},
+  titleDelimiter: '|',
 };
 
 const PluginSchema = Joi.alternatives().try(
@@ -90,6 +92,7 @@ const ConfigSchema = Joi.object({
     }).unknown(),
   ),
   tagline: Joi.string().allow(''),
+  titleDelimiter: Joi.string().default('|'),
 });
 
 // TODO move to @docusaurus/utils-validation

website/docs/api/docusaurus.config.js.md

@@ -371,3 +371,17 @@ module.exports = {
   ],
 };
 ```
+
+### `titleDelimiter`
+
+- Type: `string`
+
+A string that will be used as title delimiter in the generated `<title>` tag.
+
+Example:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  titleDelimiter: '🦖', // Defaults to `|`
+};
+```

website/docs/theme-classic.md

@@ -48,7 +48,7 @@ module.exports = {
 
         // Unicode icons such as '\u2600' will work
         // Unicode with 5 chars require brackets: '\u{1F602}'
-        lightIcon: '\u{1F602}'
+        lightIcon: '\u{1F602}',
 
         lightIconStyle: {
           marginLeft: '1px',
@@ -89,7 +89,7 @@ module.exports = {
 
 You can configure additional html metadatas (and override existing ones).
 
-```js {4-6} title="docusaurus.config.js"
+```js {4} title="docusaurus.config.js"
 module.exports = {
   // ...
   themeConfig: {
@@ -103,7 +103,7 @@ module.exports = {
 
 Sometimes you want to announce something in your website. Just for such a case, you can add an announcement bar. This is a non-fixed and optionally dismissable panel above the navbar.
 
-```js {4-10} title="docusaurus.config.js"
+```js {4-11} title="docusaurus.config.js"
 module.exports = {
   // ...
   themeConfig: {