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

This commit is contained in:
Bartosz Kaszubowski 2020-11-30 15:41:09 +01:00 committed by GitHub
parent 821a39bf2e
commit 21572ccd37
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 32 additions and 23 deletions

View file

@ -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",

View file

@ -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
? `${title} ${titleDelimiter} ${siteTitle}`
: siteTitle;
const metaTitle = useTitleFormatter(title);
const metaImage = image || defaultImage;
let metaImageUrl = siteUrl + useBaseUrl(metaImage);
if (!isInternalUrl(metaImage)) {

View file

@ -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
? `${title} ${titleDelimiter} ${siteTitle}`
: siteTitle;
const metaTitle = useTitleFormatter(title);
let metaImageUrl: string | undefined = siteUrl + useBaseUrl(metaImage);
if (!isInternalUrl(metaImage)) {

View file

@ -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
? `${title} ${titleDelimiter} ${siteTitle}`
: siteTitle;
const metaTitle = useTitleFormatter(title);
const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
return (
<>

View file

@ -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
? `${title} ${titleDelimiter} ${siteTitle}`
: siteTitle;
const metaTitle = useTitleFormatter(title);
const metaImage = image || defaultImage;
const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
const faviconUrl = useBaseUrl(favicon);

View file

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

View file

@ -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;
};

View file

@ -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",

View file

@ -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