feat(v2): extract site title formatter to theme-common util (#3838)

packages/docusaurus-theme-bootstrap/package.json

@@ -18,6 +18,7 @@
     "@docusaurus/plugin-content-blog": "2.0.0-alpha.69",
     "@docusaurus/plugin-content-docs": "2.0.0-alpha.69",
     "@docusaurus/plugin-content-pages": "2.0.0-alpha.69",
+    "@docusaurus/theme-common": "2.0.0-alpha.69",
     "@docusaurus/types": "2.0.0-alpha.69",
     "@mdx-js/react": "^1.6.21",
     "bootstrap": "^4.4.1",

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

@@ -9,6 +9,7 @@ import React from 'react';
 
 import Head from '@docusaurus/Head';
 import isInternalUrl from '@docusaurus/isInternalUrl';
+import {useTitleFormatter} from '@docusaurus/theme-common';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
@@ -20,10 +21,8 @@ function Layout(props: Props): JSX.Element {
   const {siteConfig = {}} = useDocusaurusContext();
   const {
     favicon,
-    title: siteTitle,
     themeConfig: {image: defaultImage, metadatas},
     url: siteUrl,
-    titleDelimiter,
   } = siteConfig;
   const {
     children,
@@ -34,9 +33,7 @@ function Layout(props: Props): JSX.Element {
     keywords,
     permalink,
   } = props;
-  const metaTitle = title
+  const metaTitle = useTitleFormatter(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.tsx

@@ -9,13 +9,14 @@ import React from 'react';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import Head from '@docusaurus/Head';
 import DocPaginator from '@theme/DocPaginator';
+import {useTitleFormatter} from '@docusaurus/theme-common';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import {Props} from '@theme/DocItem';
 
 function DocItem(props: Props): JSX.Element {
   const {siteConfig = {}} = useDocusaurusContext();
-  const {url: siteUrl, title: siteTitle, titleDelimiter = ' | '} = siteConfig;
+  const {url: siteUrl} = siteConfig;
   const {content: DocContent} = props;
   const {metadata} = DocContent;
   const {description, title, permalink} = metadata;
@@ -23,9 +24,7 @@ function DocItem(props: Props): JSX.Element {
     frontMatter: {image: metaImage, keywords},
   } = DocContent;
 
-  const metaTitle = title
+  const metaTitle = useTitleFormatter(title);
-    ? `${title} ${titleDelimiter} ${siteTitle}`
-    : siteTitle;
   let metaImageUrl: string | undefined = siteUrl + useBaseUrl(metaImage);
 
   if (!isInternalUrl(metaImage)) {

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

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

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

@@ -11,7 +11,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import type {Props} from '@theme/Layout';
 import SearchMetadatas from '@theme/SearchMetadatas';
-import {DEFAULT_SEARCH_TAG} from '@docusaurus/theme-common';
+import {DEFAULT_SEARCH_TAG, useTitleFormatter} from '@docusaurus/theme-common';
 
 export default function LayoutHead(props: Props): JSX.Element {
   const {
@@ -20,10 +20,8 @@ export default function LayoutHead(props: Props): JSX.Element {
   } = useDocusaurusContext();
   const {
     favicon,
-    title: siteTitle,
     themeConfig: {image: defaultImage, metadatas},
     url: siteUrl,
-    titleDelimiter,
   } = siteConfig;
   const {
     title,
@@ -33,9 +31,7 @@ export default function LayoutHead(props: Props): JSX.Element {
     permalink,
     searchMetadatas,
   } = props;
-  const metaTitle = title
+  const metaTitle = useTitleFormatter(title);
-    ? `${title} ${titleDelimiter} ${siteTitle}`
-    : siteTitle;
   const metaImage = image || defaultImage;
   const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
   const faviconUrl = useBaseUrl(favicon);

packages/docusaurus-theme-common/src/index.ts

@@ -22,6 +22,8 @@ export {isDocsPluginEnabled} from './utils/docsUtils';
 
 export {isSamePath} from './utils/pathUtils';
 
+export {useTitleFormatter} from './utils/generalUtils';
+
 export {
   useDocsPreferredVersion,
   useDocsPreferredVersionByPluginId,

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

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+export const useTitleFormatter = (title?: string | undefined) => {
+  const {siteConfig = {}} = useDocusaurusContext();
+  const {title: siteTitle, titleDelimiter = '|'} = siteConfig;
+  return title && title.trim().length
+    ? `${title.trim()} ${titleDelimiter} ${siteTitle}`
+    : siteTitle;
+};

packages/docusaurus-theme-search-algolia/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.31",
     "@docusaurus/core": "2.0.0-alpha.69",
+    "@docusaurus/theme-common": "2.0.0-alpha.69",
     "@docusaurus/utils": "2.0.0-alpha.69",
     "algoliasearch": "^4.0.0",
     "algoliasearch-helper": "^3.1.1",

packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js

@@ -14,11 +14,12 @@ import algoliaSearchHelper from 'algoliasearch-helper';
 import clsx from 'clsx';
 
 import Head from '@docusaurus/Head';
+import Link from '@docusaurus/Link';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import {useTitleFormatter} from '@docusaurus/theme-common';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAllDocsData} from '@theme/hooks/useDocs';
 import useSearchQuery from '@theme/hooks/useSearchQuery';
-import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 
 import styles from './styles.module.css';
@@ -102,8 +103,6 @@ function Search() {
   const {
     siteConfig: {
       themeConfig: {algolia: {appId = 'BH4D9OD16A', apiKey, indexName} = {}},
-      title: siteTitle,
-      titleDelimiter,
     } = {},
   } = useDocusaurusContext();
   const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
@@ -298,7 +297,7 @@ function Search() {
   return (
     <Layout wrapperClassName="search-page-wrapper">
       <Head>
-        <title>{`${getTitle()} ${titleDelimiter} ${siteTitle}`}</title>
+        <title>{useTitleFormatter(getTitle())}</title>
         {/*
          We should not index search pages
           See https://github.com/facebook/docusaurus/pull/3233