diff --git a/packages/docusaurus/src/client/App.tsx b/packages/docusaurus/src/client/App.tsx index d7d4cd4eb7..85e4858b18 100644 --- a/packages/docusaurus/src/client/App.tsx +++ b/packages/docusaurus/src/client/App.tsx @@ -14,6 +14,7 @@ import siteMetadata from '@generated/site-metadata'; import renderRoutes from './exports/renderRoutes'; import DocusaurusContext from './exports/context'; import PendingNavigation from './PendingNavigation'; +import BaseUrlSuggestionWarning from './baseUrlSuggestionWarning/BaseUrlSuggestionWarning'; import './client-lifecycles-dispatcher'; @@ -27,6 +28,7 @@ function App(): JSX.Element { return ( + {renderRoutes(routes)} diff --git a/packages/docusaurus/src/client/baseUrlSuggestionWarning/BaseUrlSuggestionWarning.tsx b/packages/docusaurus/src/client/baseUrlSuggestionWarning/BaseUrlSuggestionWarning.tsx new file mode 100644 index 0000000000..c7d176ebe4 --- /dev/null +++ b/packages/docusaurus/src/client/baseUrlSuggestionWarning/BaseUrlSuggestionWarning.tsx @@ -0,0 +1,93 @@ +/** + * 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 React from 'react'; +import {useLocation} from 'react-router-dom'; + +import siteConfig from '@generated/docusaurus.config'; +import Head from '../exports/Head'; + +import styles from './styles.module.css'; + +// 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 +// Note: we only inline this for the homepage to avoid polluting all the site's pages +// See https://github.com/facebook/docusaurus/pull/3621 +export default function BaseUrlSuggestionWarning() { + const {baseUrl} = siteConfig; + const {pathname} = useLocation(); + const isHomePage = pathname === baseUrl; // returns true for the homepage during SRR + + const BaseUrlSuggestionContainerId = 'base-url-suggestion-container'; + + if (isHomePage) { + return ( + <> + + + +
+ +

+ You 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 null; +} diff --git a/packages/docusaurus/src/client/baseUrlSuggestionWarning/styles.module.css b/packages/docusaurus/src/client/baseUrlSuggestionWarning/styles.module.css new file mode 100644 index 0000000000..c3243ffb00 --- /dev/null +++ b/packages/docusaurus/src/client/baseUrlSuggestionWarning/styles.module.css @@ -0,0 +1,3 @@ +.baseUrlSuggestionWarning { + display: none; +} diff --git a/packages/docusaurus/src/client/exports/Head.tsx b/packages/docusaurus/src/client/exports/Head.tsx index c9c3d4c6d4..42d39197c1 100644 --- a/packages/docusaurus/src/client/exports/Head.tsx +++ b/packages/docusaurus/src/client/exports/Head.tsx @@ -5,10 +5,12 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {ReactNode} from 'react'; import {Helmet, HelmetProps} from 'react-helmet'; -function Head(props: HelmetProps): JSX.Element { +type HeadProps = HelmetProps & {children: ReactNode}; + +function Head(props: HeadProps): JSX.Element { return ; } diff --git a/packages/docusaurus/src/client/serverEntry.js b/packages/docusaurus/src/client/serverEntry.js index 4fad0df8d3..156a68eaf6 100644 --- a/packages/docusaurus/src/client/serverEntry.js +++ b/packages/docusaurus/src/client/serverEntry.js @@ -90,6 +90,7 @@ async function doRender(locals) { helmet.title.toString(), helmet.meta.toString(), helmet.link.toString(), + helmet.script.toString(), ]; const metaAttributes = metaStrings.filter(Boolean);