Add CSSLoadingWarningMessage to App in client

facebook · Oct 27, 2020 · c25ca7d · c25ca7d
1 parent 7f6fba9
commit c25ca7d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/packages/docusaurus/src/client/App.tsx b/packages/docusaurus/src/client/App.tsx
@@ -16,6 +16,26 @@ import DocusaurusContext from './exports/context';
 import PendingNavigation from './PendingNavigation';
 
 import './client-lifecycles-dispatcher';
+import './hideCSSLoadingWarning.css';
+
+function CSSLoadingWarningMessage() {
+  return (
+    <div
+      className="css-loading-warning"
+      style={{border: 'solid red thick', padding: '16px'}}>
+      <span>
+        You site CSS did not load properly. Your baseUrl setting is probably
+        bad.{' '}
+      </span>
+      <span>
+        Maybe try baseUrl ={' '}
+        <span id="css-didnt-load-baseurl-suggestion">
+          {/* baseUrl suggestion message */}
+        </span>
+      </span>
+    </div>
+  );
+}
 
 function App(): JSX.Element {
   const [isClient, setIsClient] = useState(false);
@@ -27,6 +47,7 @@ function App(): JSX.Element {
   return (
     <DocusaurusContext.Provider
       value={{siteConfig, siteMetadata, globalData, isClient}}>
+      <CSSLoadingWarningMessage />
       <PendingNavigation routes={routes}>
         {renderRoutes(routes)}
       </PendingNavigation>

diff --git a/packages/docusaurus/src/client/hideCSSLoadingWarning.css b/packages/docusaurus/src/client/hideCSSLoadingWarning.css
@@ -0,0 +1,3 @@
+.css-loading-warning {
+    display: none;
+  }
diff --git a/packages/docusaurus/src/client/templates/ssr.html.template.js b/packages/docusaurus/src/client/templates/ssr.html.template.js
@@ -35,6 +35,10 @@ module.exports = `
       <script type="text/javascript" src="<%= it.baseUrl %><%= script %>"></script>
     <% }); %>
     <%~ it.postBodyTags %>
+    <script>
+      document.getElementById('css-didnt-load-baseurl-suggestion').innerHTML =
+        window.location.pathname;
+    </script>
   </body>
 </html>
 `;