diff --git a/packages/docusaurus/src/client/baseUrlIssueBanner/BaseUrlIssueBanner.tsx b/packages/docusaurus/src/client/baseUrlIssueBanner/BaseUrlIssueBanner.tsx index 4eb41e5f5761..3ac5b71bb3d9 100644 --- a/packages/docusaurus/src/client/baseUrlIssueBanner/BaseUrlIssueBanner.tsx +++ b/packages/docusaurus/src/client/baseUrlIssueBanner/BaseUrlIssueBanner.tsx @@ -5,14 +5,91 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {useLayoutEffect} from 'react'; import {useLocation} from 'react-router-dom'; import Head from '../exports/Head'; -import styles from './styles.module.css'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +// The critical CSS will hide the banner if it loads successfully! +import './styles.module.css'; + +const BannerContainerId = 'docusaurus-base-url-issue-banner-container'; + +const SuggestionContainerId = + 'docusaurus-base-url-issue-banner-suggestion-container'; + +// It is important to not use React to render this banner +// otherwise Google would index it, even if it's hidden with some critical CSS! +// See https://github.com/facebook/docusaurus/issues/4028 +// - We can't SSR (or it would be indexed) +// - We can't CSR (as it means the baseurl is correct) +function createInlineHtmlBanner(baseUrl: string) { + return ` +
+

Your Docusaurus site did not load properly.

+

A very common reason is a wrong site baseUrl configuration.

+

Current configured baseUrl = ${baseUrl} ${ + baseUrl === '/' ? ' (default value)' : '' + }

+

We suggest trying baseUrl =

+
+`; +} + +// fn needs to work for older browsers! +function createInlineScript(baseUrl: string) { + return ` +function renderBanner() { + var banner = document.getElementById('${BannerContainerId}'); + if (!banner) { + return; + } + var bannerHtml = ${JSON.stringify(createInlineHtmlBanner(baseUrl)) + // See https://redux.js.org/recipes/server-rendering/#security-considerations + .replace(/ { + const banner = document.getElementById(BannerContainerId); + if (banner) { + banner.remove(); + } + }, []); +} + +function BaseUrlIssueBannerEnabled() { + const { + siteConfig: {baseUrl}, + } = useDocusaurusContext(); + return ( + <> + + + +
+ + ); +} + // We want to help the users with a bad baseUrl configuration (very common error) // Help message is inlined, and hides if the external CSS is able to load successfully // Note: it might create false positives (ie network failures): not a big deal @@ -23,76 +100,12 @@ export default function BaseUrlIssueBanner(): JSX.Element | null { siteConfig: {baseUrl, baseUrlIssueBanner}, } = useDocusaurusContext(); const {pathname} = useLocation(); + useBannerRemover(); // returns true for the homepage during SRR const isHomePage = pathname === baseUrl; - const shouldRender = baseUrlIssueBanner && isHomePage; - - if (!shouldRender) { - return null; - } + const enabled = baseUrlIssueBanner && isHomePage; - const BaseUrlIssueBannerContainerId = 'base-url-issue-banner-container'; - - return ( - <> - - - -
-

- Your Docusaurus site did not load properly. -

-

- A very common reason is a wrong site{' '} - - baseUrl configuration - - . -

-

- Current configured baseUrl ={' '} - {baseUrl}{' '} - {baseUrl === '/' ? ' (default value)' : ''} -

-

- We suggest trying baseUrl ={' '} - {' '} -

-
- - ); + return enabled ? : null; } diff --git a/packages/docusaurus/src/client/baseUrlIssueBanner/styles.module.css b/packages/docusaurus/src/client/baseUrlIssueBanner/styles.module.css index 564e527948c5..a046944686c8 100644 --- a/packages/docusaurus/src/client/baseUrlIssueBanner/styles.module.css +++ b/packages/docusaurus/src/client/baseUrlIssueBanner/styles.module.css @@ -5,6 +5,6 @@ * LICENSE file in the root directory of this source tree. */ -.baseUrlIssueBanner { +:global(#docusaurus-base-url-issue-banner-container) { display: none; }