refactor(v2): move scripts/stylesheets siteConfigclient side injectio…

…n to server side using injectHtmlTag API (#2081)
facebook · Dec 4, 2019 · 718b1e1 · 718b1e1
1 parent b26948d
commit 718b1e1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 23 deletions.
diff --git a/packages/docusaurus/src/client/App.js b/packages/docusaurus/src/client/App.js
@@ -7,7 +7,6 @@
 
 import React, {useEffect, useState} from 'react';
 
-import Head from '@docusaurus/Head';
 import routes from '@generated/routes';
 import siteConfig from '@generated/docusaurus.config';
 import renderRoutes from '@docusaurus/renderRoutes';
@@ -17,7 +16,6 @@ import PendingNavigation from './PendingNavigation';
 import './client-lifecycles-dispatcher';
 
 function App() {
-  const {stylesheets, scripts} = siteConfig;
   const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {
@@ -26,26 +24,6 @@ function App() {
 
   return (
     <DocusaurusContext.Provider value={{siteConfig, isClient}}>
-      {(stylesheets || scripts) && (
-        <Head>
-          {stylesheets &&
-            stylesheets.map(source =>
-              typeof source === 'string' ? (
-                <link rel="stylesheet" key={source} href={source} />
-              ) : (
-                <link rel="stylesheet" key={source.href} {...source} />
-              ),
-            )}
-          {scripts &&
-            scripts.map(source =>
-              typeof source === 'string' ? (
-                <script type="text/javascript" src={source} key={source} />
-              ) : (
-                <script type="text/javascript" key={source.src} {...source} />
-              ),
-            )}
-        </Head>
-      )}
       <PendingNavigation routes={routes}>
         {renderRoutes(routes)}
       </PendingNavigation>

diff --git a/packages/docusaurus/src/server/index.ts b/packages/docusaurus/src/server/index.ts
@@ -82,14 +82,43 @@ export async function load(siteDir: string): Promise<Props> {
   );
   const userTheme = path.resolve(siteDir, THEME_PATH);
   const alias = loadThemeAlias([fallbackTheme, ...pluginThemes, userTheme]);
-  // Make a fake plugin to resolve aliased theme components.
+
+  // Make a fake plugin to resolve aliased theme components && inject scripts/stylesheets
+  const {stylesheets = [], scripts = []} = siteConfig;
   plugins.push({
     name: 'docusaurus-bootstrap-plugin',
     configureWebpack: () => ({
       resolve: {
         alias,
       },
     }),
+    injectHtmlTags: () => {
+      const stylesheetsTags = stylesheets.map(source =>
+        typeof source === 'string'
+          ? `<link rel="stylesheet" href="${source}">`
+          : {
+              tagName: 'link',
+              attributes: {
+                rel: 'stylesheet',
+                ...source,
+              },
+            },
+      );
+      const scriptsTags = scripts.map(source =>
+        typeof source === 'string'
+          ? `<script type="text/javascript" src="${source}"></script>`
+          : {
+              tagName: 'script',
+              attributes: {
+                type: 'text/javascript',
+                ...source,
+              },
+            },
+      );
+      return {
+        headTags: [...stylesheetsTags, ...scriptsTags],
+      };
+    },
   });
 
   // Load client modules.