diff --git a/packages/docusaurus/src/client/baseUrlIssueBanner/BaseUrlIssueBanner.tsx b/packages/docusaurus/src/client/baseUrlIssueBanner/BaseUrlIssueBanner.tsx index c6bff4246c4b..bd2cf3acaa5e 100644 --- a/packages/docusaurus/src/client/baseUrlIssueBanner/BaseUrlIssueBanner.tsx +++ b/packages/docusaurus/src/client/baseUrlIssueBanner/BaseUrlIssueBanner.tsx @@ -5,21 +5,24 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; -import {useLocation} from 'react-router-dom'; - -import Head from '../exports/Head'; - +import React, {useLayoutEffect} from 'react'; +import {useLocation} from '@docusaurus/router'; +import Head from '@docusaurus/Head'; +import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -// The critical CSS will hide the banner if it loads successfully! +// Double-security: critical CSS will hide the banner if CSS can load! import './styles.module.css'; const BannerContainerId = 'docusaurus-base-url-issue-banner-container'; +const BannerId = 'docusaurus-base-url-issue-banner'; + const SuggestionContainerId = 'docusaurus-base-url-issue-banner-suggestion-container'; +const InsertBannerWindowAttribute = '__DOCUSAURUS_INSERT_BASEURL_BANNER'; + // 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 @@ -27,7 +30,7 @@ const SuggestionContainerId = // - 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} ${ @@ -41,16 +44,24 @@ function createInlineHtmlBanner(baseUrl: string) { // fn needs to work for older browsers! function createInlineScript(baseUrl: string) { return ` -function renderBanner() { - var banner = document.getElementById('${BannerContainerId}'); - if (!banner) { +window['${InsertBannerWindowAttribute}'] = true; + +document.addEventListener('DOMContentLoaded', maybeInsertBanner); + +function maybeInsertBanner() { + var shouldInsert = window['${InsertBannerWindowAttribute}']; + shouldInsert && insertBanner(); +} + +function insertBanner() { + var bannerContainer = document.getElementById('${BannerContainerId}'); + if (!bannerContainer) { return; } var bannerHtml = ${JSON.stringify(createInlineHtmlBanner(baseUrl)) // See https://redux.js.org/recipes/server-rendering/#security-considerations .replace(/ { + window[InsertBannerWindowAttribute] = false; + }, []); + return ( <> - - - + {!ExecutionEnvironment.canUseDOM && ( + + + + )}

); } // 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 +// Help message is inlined, and hidden if JS or CSS is able to load // Note: it might create false positives (ie network failures): not a big deal // Note: we only inline this for the homepage to avoid polluting all the site's pages // See https://github.com/facebook/docusaurus/pull/3621 diff --git a/website/dogfooding/clientModuleExample.ts b/website/dogfooding/clientModuleExample.ts index 83b5c253ba74..f04597e22621 100644 --- a/website/dogfooding/clientModuleExample.ts +++ b/website/dogfooding/clientModuleExample.ts @@ -8,9 +8,9 @@ import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; export function onRouteUpdate({location}: {location: Location}) { - console.log('onRouteUpdate', {location}); + // console.log('onRouteUpdate', {location}); } if (ExecutionEnvironment.canUseDOM) { - console.log('client module example log'); + // console.log('client module example log'); }