From c0d8238c49ddd4e3550bdf0794ec368fb38d33cb Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Fri, 25 Sep 2020 23:25:19 +0200 Subject: [PATCH] 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 --- .../src/theme/DebugLayout/index.js | 6 ++++-- .../src/theme/DocItem/index.js | 6 ++++-- .../src/theme/DocItem/index.tsx | 6 ++++-- .../src/theme/Layout/index.tsx | 5 ++++- packages/docusaurus-types/src/index.d.ts | 1 + .../__tests__/__snapshots__/config.test.ts.snap | 1 + packages/docusaurus/src/server/configValidation.ts | 3 +++ website/docs/api/docusaurus.config.js.md | 14 ++++++++++++++ website/docs/theme-classic.md | 6 +++--- 9 files changed, 38 insertions(+), 10 deletions(-) diff --git a/packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.js b/packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.js index 97084d628e..a23d48c9a4 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 453096f7b5..4045234e91 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 2bd82f00d8..3a6b2eef7c 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx +++ b/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 ( <> diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx index b41ad334ab..452fa26a36 100644 --- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx +++ b/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); diff --git a/packages/docusaurus-types/src/index.d.ts b/packages/docusaurus-types/src/index.d.ts index bcd2774e49..ad09f681a6 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/__tests__/__snapshots__/config.test.ts.snap b/packages/docusaurus/src/server/__tests__/__snapshots__/config.test.ts.snap index 3d2e8b03e4..198094f480 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", } `; diff --git a/packages/docusaurus/src/server/configValidation.ts b/packages/docusaurus/src/server/configValidation.ts index ba9bfe8bcf..e609298b43 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 5417598555..13faa9dbc6 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 `` tag. + +Example: + +```js title="docusaurus.config.js" +module.exports = { + titleDelimiter: '🦖', // Defaults to `|` +}; +``` diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md index d462b35cef..29f683493d 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: { @@ -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: {