3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-03 16:59:06 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): baseUrl config issues: show help message if css/js can't load (#3621)

Browse source 
* Add CSSLoadingWarningMessage to App in client

* fix/polish BaseUrlSuggestionWarning

* add baseUrl trailing slash + polish

Co-authored-by: slorber <lorber.sebastien@gmail.com>
This commit is contained in:
Jainam Chirag Shah 2020-10-30 23:13:13 +05:30 • committed by GitHub
parent 999ae5759c
commit 3a8bad2068
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 103 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus/src/client/App.tsx
View file

@ -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 (
<DocusaurusContext.Provider
value={{siteConfig, siteMetadata, globalData, isClient}}>
<BaseUrlSuggestionWarning />
<PendingNavigation routes={routes}>
{renderRoutes(routes)}
</PendingNavigation>

93
packages/docusaurus/src/client/baseUrlSuggestionWarning/BaseUrlSuggestionWarning.tsx Normal file
View file

@ -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 (
<>
<Head>
<script type="text/javascript">
{`
document.addEventListener('DOMContentLoaded', function () {
var baseUrlSuggestion = document.getElementById(
'${BaseUrlSuggestionContainerId}',
);
if (baseUrlSuggestion) {
var actualHomePagePath = window.location.pathname;
var suggestedBaseUrl = actualHomePagePath.substr(-1) === '/'
? actualHomePagePath
: actualHomePagePath + '/';
baseUrlSuggestion.innerHTML = suggestedBaseUrl;
}
});
`}
</script>
</Head>
<div
className={styles.baseUrlSuggestionWarning}
style={{
border: 'solid red thick',
backgroundColor: '#ffe6b3',
margin: 20,
padding: 20,
fontSize: 20,
}}>
<span>
<p
style={{
fontWeight: 'bold',
fontSize: 30,
}}>
You Docusaurus site did not load properly.
</p>
<p>
A very common reason is a wrong site{' '}
<a
href="https://v2.docusaurus.io/docs/docusaurus.config.js/#baseurl"
style={{fontWeight: 'bold'}}>
baseUrl configuration
</a>
.
</p>
<p>
Current configured baseUrl ={' '}
<span style={{fontWeight: 'bold', color: 'red'}}>{baseUrl}</span>{' '}
{baseUrl === '/' ? ' (default value)' : ''}
</p>
<p>
We suggest trying baseUrl ={' '}
<span
style={{fontWeight: 'bold', color: 'green'}}
id={BaseUrlSuggestionContainerId}
/>{' '}
</p>
</span>
</div>
</>
);
}
return null;
}

3
packages/docusaurus/src/client/baseUrlSuggestionWarning/styles.module.css Normal file
View file

@ -0,0 +1,3 @@
.baseUrlSuggestionWarning {
display: none;
}

6
packages/docusaurus/src/client/exports/Head.tsx
View file

@ -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 <Helmet {...props} />;
}

1
packages/docusaurus/src/client/serverEntry.js
View file

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