From 4c9a208d09d9b0a1d7a4db7e40161731467b2ee9 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Fri, 18 Sep 2020 20:59:07 +0200
Subject: [PATCH 1/7] feat(v2): add custom title delimiter to the theme classic

---
 .../src/theme/DocItem/index.tsx               | 10 ++++++++--
 .../src/theme/Layout/index.tsx                |  6 ++++--
 .../src/validateThemeConfig.js                |  1 +
 website/docs/theme-classic.md                 | 20 ++++++++++++++++---
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
index 2bd82f00d850..cb012935083e 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
@@ -25,7 +25,11 @@ import {
 
 function DocItem(props: Props): JSX.Element {
   const {siteConfig = {}} = useDocusaurusContext();
-  const {url: siteUrl, title: siteTitle} = siteConfig;
+  const {
+    url: siteUrl,
+    themeConfig: {titleDelimiter},
+    title: siteTitle,
+  } = siteConfig;
   const {content: DocContent} = props;
   const {metadata} = DocContent;
   const {
@@ -54,7 +58,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 (
     <>
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
index 48b3086ec44a..e9afe11c413e 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
@@ -32,7 +32,7 @@ function Layout(props: Props): JSX.Element {
   const {
     favicon,
     title: siteTitle,
-    themeConfig: {image: defaultImage, metadatas},
+    themeConfig: {image: defaultImage, metadatas, titleDelimiter},
     url: siteUrl,
   } = siteConfig;
   const {
@@ -44,7 +44,9 @@ function Layout(props: Props): JSX.Element {
     keywords,
     permalink,
   } = 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);
diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.js b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
index 45b44b580022..e3e361106f12 100644
--- a/packages/docusaurus-theme-classic/src/validateThemeConfig.js
+++ b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
@@ -178,6 +178,7 @@ const ThemeConfigSchema = Joi.object({
   }),
   colorMode: ColorModeSchema,
   image: Joi.string(),
+  titleDelimiter: Joi.string().default('|'),
   metadatas: Joi.array()
     .items(HtmlMetadataSchema)
     .default(DEFAULT_CONFIG.metadatas),
diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md
index d462b35cef0d..e00c728ca56b 100644
--- a/website/docs/theme-classic.md
+++ b/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: {
@@ -99,11 +99,25 @@ module.exports = {
 };
 ```
 
+### Title delimiter
+
+You can specify a custom title delimiter that will be used in the generated `<title>` tag.
+
+```js {4} title="docusaurus.config.js"
+module.exports = {
+  // ...
+  themeConfig: {
+    titleDelimiter: '🦖', // Default: '|'
+    // ...
+  },
+};
+```
+
 ### Announcement bar
 
 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: {

From 09b01a508446ece33ee601c4c9926cd27bddf221 Mon Sep 17 00:00:00 2001
From: simek <gosimek@gmail.com>
Date: Thu, 24 Sep 2020 10:45:55 +0200
Subject: [PATCH 2/7] fix validation tests

---
 packages/docusaurus-theme-classic/src/validateThemeConfig.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.js b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
index e3e361106f12..77e5767acf44 100644
--- a/packages/docusaurus-theme-classic/src/validateThemeConfig.js
+++ b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
@@ -23,6 +23,7 @@ const DEFAULT_COLOR_MODE_CONFIG = {
 const DEFAULT_CONFIG = {
   colorMode: DEFAULT_COLOR_MODE_CONFIG,
   metadatas: [],
+  titleDelimiter: '|',
 };
 exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
 

From 595a96cd4ae30a2a9889994d419f1e645bf1f192 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Thu, 24 Sep 2020 16:11:23 +0200
Subject: [PATCH 3/7] remove title delimiter fallback

---
 packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx | 2 +-
 packages/docusaurus-theme-classic/src/theme/Layout/index.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
index cb012935083e..abe16d01467c 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
@@ -59,7 +59,7 @@ function DocItem(props: Props): JSX.Element {
   const showVersionBadge = versions.length > 1;
 
   const metaTitle = title
-    ? `${title} ${titleDelimiter || '|'} ${siteTitle}`
+    ? `${title} ${titleDelimiter} ${siteTitle}`
     : siteTitle;
   const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
   return (
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
index e9afe11c413e..24fcd253ab3c 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
@@ -45,7 +45,7 @@ function Layout(props: Props): JSX.Element {
     permalink,
   } = props;
   const metaTitle = title
-    ? `${title} ${titleDelimiter || '|'} ${siteTitle}`
+    ? `${title} ${titleDelimiter} ${siteTitle}`
     : siteTitle;
   const metaImage = image || defaultImage;
   const metaImageUrl = useBaseUrl(metaImage, {absolute: true});

From adc26136febc4e0a8601c71198f2f76cca01702f Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Fri, 25 Sep 2020 15:28:48 +0200
Subject: [PATCH 4/7] move titleDelimiter to main config, update
 theme-bootstrap

---
 .../src/theme/DebugLayout/index.js                 |  6 ++++--
 .../src/theme/DocItem/index.js                     |  6 ++++--
 .../src/theme/DocItem/index.tsx                    |  6 +-----
 .../src/theme/Layout/index.tsx                     |  3 ++-
 .../src/validateThemeConfig.js                     |  2 --
 packages/docusaurus-types/src/index.d.ts           |  1 +
 packages/docusaurus/src/server/configValidation.ts |  3 +++
 website/docs/api/docusaurus.config.js.md           | 14 ++++++++++++++
 website/docs/theme-classic.md                      | 14 --------------
 website/docusaurus.config.js                       |  1 +
 10 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.js b/packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.js
index 97084d628eb5..a23d48c9a43e 100644
--- a/packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.js
+++ b/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)) {
diff --git a/packages/docusaurus-theme-bootstrap/src/theme/DocItem/index.js b/packages/docusaurus-theme-bootstrap/src/theme/DocItem/index.js
index 453096f7b59e..4045234e91e1 100644
--- a/packages/docusaurus-theme-bootstrap/src/theme/DocItem/index.js
+++ b/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;
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
index abe16d01467c..3a6b2eef7c3f 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
@@ -25,11 +25,7 @@ import {
 
 function DocItem(props: Props): JSX.Element {
   const {siteConfig = {}} = useDocusaurusContext();
-  const {
-    url: siteUrl,
-    themeConfig: {titleDelimiter},
-    title: siteTitle,
-  } = siteConfig;
+  const {url: siteUrl, title: siteTitle, titleDelimiter} = siteConfig;
   const {content: DocContent} = props;
   const {metadata} = DocContent;
   const {
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
index 24fcd253ab3c..845a652e3215 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
@@ -32,8 +32,9 @@ function Layout(props: Props): JSX.Element {
   const {
     favicon,
     title: siteTitle,
-    themeConfig: {image: defaultImage, metadatas, titleDelimiter},
+    themeConfig: {image: defaultImage, metadatas},
     url: siteUrl,
+    titleDelimiter,
   } = siteConfig;
   const {
     children,
diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.js b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
index 77e5767acf44..45b44b580022 100644
--- a/packages/docusaurus-theme-classic/src/validateThemeConfig.js
+++ b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
@@ -23,7 +23,6 @@ const DEFAULT_COLOR_MODE_CONFIG = {
 const DEFAULT_CONFIG = {
   colorMode: DEFAULT_COLOR_MODE_CONFIG,
   metadatas: [],
-  titleDelimiter: '|',
 };
 exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
 
@@ -179,7 +178,6 @@ const ThemeConfigSchema = Joi.object({
   }),
   colorMode: ColorModeSchema,
   image: Joi.string(),
-  titleDelimiter: Joi.string().default('|'),
   metadatas: Joi.array()
     .items(HtmlMetadataSchema)
     .default(DEFAULT_CONFIG.metadatas),
diff --git a/packages/docusaurus-types/src/index.d.ts b/packages/docusaurus-types/src/index.d.ts
index bcd2774e4938..ad09f681a614 100644
--- a/packages/docusaurus-types/src/index.d.ts
+++ b/packages/docusaurus-types/src/index.d.ts
@@ -49,6 +49,7 @@ export interface DocusaurusConfig {
         [key: string]: unknown;
       }
   )[];
+  titleDelimiter?: string;
 }
 
 /**
diff --git a/packages/docusaurus/src/server/configValidation.ts b/packages/docusaurus/src/server/configValidation.ts
index ba9bfe8bcf89..e609298b431a 100644
--- a/packages/docusaurus/src/server/configValidation.ts
+++ b/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
diff --git a/website/docs/api/docusaurus.config.js.md b/website/docs/api/docusaurus.config.js.md
index 5417598555b4..3e2f65c3b26e 100644
--- a/website/docs/api/docusaurus.config.js.md
+++ b/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: '🦖', // Default: '|'
+};
+```
diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md
index e00c728ca56b..29f683493dbe 100644
--- a/website/docs/theme-classic.md
+++ b/website/docs/theme-classic.md
@@ -99,20 +99,6 @@ module.exports = {
 };
 ```
 
-### Title delimiter
-
-You can specify a custom title delimiter that will be used in the generated `<title>` tag.
-
-```js {4} title="docusaurus.config.js"
-module.exports = {
-  // ...
-  themeConfig: {
-    titleDelimiter: '🦖', // Default: '|'
-    // ...
-  },
-};
-```
-
 ### Announcement bar
 
 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.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 5ecc55d36ac9..e7b43acd9510 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -33,6 +33,7 @@ module.exports = {
   url: 'https://v2.docusaurus.io',
   onBrokenLinks: isVersioningDisabled ? 'warn' : 'throw',
   favicon: 'img/docusaurus.ico',
+  titleDelimiter: '🦖',
   customFields: {
     description:
       'An optimized site generator in React. Docusaurus helps you to move fast and write content. Build documentation websites, blogs, marketing pages, and more.',

From 1bfe0c3566538cd7382363fcf21fbc07f87c460f Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Fri, 25 Sep 2020 15:31:16 +0200
Subject: [PATCH 5/7] remove test value from config

---
 website/docusaurus.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index e7b43acd9510..5ecc55d36ac9 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -33,7 +33,6 @@ module.exports = {
   url: 'https://v2.docusaurus.io',
   onBrokenLinks: isVersioningDisabled ? 'warn' : 'throw',
   favicon: 'img/docusaurus.ico',
-  titleDelimiter: '🦖',
   customFields: {
     description:
       'An optimized site generator in React. Docusaurus helps you to move fast and write content. Build documentation websites, blogs, marketing pages, and more.',

From dde322318d7638a4456ac5c90f5a4a1114d3f9db Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Fri, 25 Sep 2020 15:51:43 +0200
Subject: [PATCH 6/7] update test snapshot

---
 .../src/server/__tests__/__snapshots__/config.test.ts.snap       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/docusaurus/src/server/__tests__/__snapshots__/config.test.ts.snap b/packages/docusaurus/src/server/__tests__/__snapshots__/config.test.ts.snap
index 3d2e8b03e480..198094f4800b 100644
--- a/packages/docusaurus/src/server/__tests__/__snapshots__/config.test.ts.snap
+++ b/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",
 }
 `;

From b853addd5fe721add537ee7a6e242802d9b45346 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sat, 26 Sep 2020 00:11:19 +0300
Subject: [PATCH 7/7] Improve docs

---
 website/docs/api/docusaurus.config.js.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/docs/api/docusaurus.config.js.md b/website/docs/api/docusaurus.config.js.md
index 3e2f65c3b26e..13faa9dbc6e8 100644
--- a/website/docs/api/docusaurus.config.js.md
+++ b/website/docs/api/docusaurus.config.js.md
@@ -382,6 +382,6 @@ Example:
 
 ```js title="docusaurus.config.js"
 module.exports = {
-  titleDelimiter: '🦖', // Default: '|'
+  titleDelimiter: '🦖', // Defaults to `|`
 };
 ```