facebook · endiliey · Nov 30, 2019 · Nov 27, 2019 · Nov 27, 2019 · Nov 27, 2019
diff --git a/packages/docusaurus-types/src/index.d.ts b/packages/docusaurus-types/src/index.d.ts
@@ -73,7 +73,12 @@ export interface LoadContext {
   baseUrl: string;
 }
 
-export interface Props extends LoadContext {
+export interface HtmlTags {
+  headTags: string;
+  bodyTags: string;
+}
+
+export interface Props extends LoadContext, HtmlTags {
   routesPaths: string[];
   plugins: Plugin<any>[];
 }
@@ -104,6 +109,10 @@ export interface Plugin<T> {
   getPathsToWatch?(): string[];
   getClientModules?(): string[];
   extendCli?(cli: Command): void;
+  injectHtmlTags?(): {
+    headTags?: HtmlTagObject | HtmlTagObject[];
+    bodyTags?: HtmlTagObject | HtmlTagObject[];
+  };
 }
 
 export type PluginConfig = [string, Object] | [string] | string;
@@ -152,3 +161,21 @@ export interface ConfigureWebpackUtils {
   getCacheLoader: (isServer: boolean, cacheOptions?: {}) => Loader | null;
   getBabelLoader: (isServer: boolean, babelOptions?: {}) => Loader;
 }
+
+interface HtmlTagObject {
+  /**
+   * Attributes of the html tag
+   * E.g. `{'disabled': true, 'value': 'demo', 'rel': 'preconnect'}`
+   */
+  attributes?: {
+    [attributeName: string]: string | boolean;
+  };
+  /**
+   * The tag name e.g. `div`, `script`, `link`, `meta`
+   */
+  tagName: string;
+  /**
+   * The inner HTML
+   */
+  innerHTML?: string;
+}
diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json
@@ -55,6 +55,7 @@
     "express": "^4.17.1",
     "fs-extra": "^8.1.0",
     "globby": "^10.0.1",
+    "html-tags": "^3.1.0",
     "html-webpack-plugin": "^4.0.0-beta.11",
     "import-fresh": "^3.2.1",
     "lodash": "^4.17.15",

diff --git a/packages/docusaurus/src/client/serverEntry.js b/packages/docusaurus/src/client/serverEntry.js
@@ -22,7 +22,7 @@ import ssrTemplate from './templates/ssr.html.template';
 
 // Renderer for static-site-generator-webpack-plugin (async rendering via promises)
 export default async function render(locals) {
-  const {routesLocation} = locals;
+  const {routesLocation, headTags, bodyTags} = locals;
   const location = routesLocation[locals.path];
   await preload(routes, location);
   const modules = new Set();
@@ -76,6 +76,8 @@ export default async function render(locals) {
       chunkManifestScript,
       htmlAttributes: htmlAttributes || '',
       bodyAttributes: bodyAttributes || '',
+      headTags,
+      bodyTags,
       metaAttributes,
       scripts,
       stylesheets,

diff --git a/packages/docusaurus/src/client/templates/index.html.template.ejs b/packages/docusaurus/src/client/templates/index.html.template.ejs
@@ -5,8 +5,10 @@
     <meta name="viewport" content="width=device-width">
     <meta name="generator" content="Docusaurus">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <%= htmlWebpackPlugin.options.headTags %>
   </head>
   <body>
+    <%= htmlWebpackPlugin.options.bodyTags %>
     <div id="__docusaurus"></div>
   </body>
 </html>
diff --git a/packages/docusaurus/src/client/templates/ssr.html.template.js b/packages/docusaurus/src/client/templates/ssr.html.template.js
@@ -12,6 +12,7 @@ module.exports = `
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width">
     <meta name="generator" content="Docusaurus">
+    <%- headTags %>
     <%- chunkManifestScript %>
     <% metaAttributes.forEach((metaAttribute) => { %>
       <%- metaAttribute %>
@@ -21,6 +22,7 @@ module.exports = `
     <% }); %>
   </head>
   <body <%- bodyAttributes %>>
+    <%- bodyTags %>
     <div id="__docusaurus">
       <%- appHtml %>
     </div>

diff --git a/packages/docusaurus/src/commands/start.ts b/packages/docusaurus/src/commands/start.ts
@@ -78,7 +78,7 @@ export async function start(
   const protocol: string = process.env.HTTPS === 'true' ? 'https' : 'http';
   const port: number = await getPort(cliOptions.port);
   const host: string = getHost(cliOptions.host);
-  const {baseUrl} = props;
+  const {baseUrl, headTags, bodyTags} = props;
   const urls = prepareUrls(protocol, host, port);
   const openUrl = normalizeUrl([urls.localUrlForBrowser, baseUrl]);
 
@@ -92,6 +92,8 @@ export async function start(
         ),
         filename: 'index.html',
         title: siteConfig.title,
+        headTags,
+        bodyTags,
       }),
       // This is necessary to emit hot updates for webpack-dev-server
       new HotModuleReplacementPlugin(),

diff --git a/packages/docusaurus/src/server/html-tags/__tests__/__fixtures__/plugin-bodyTags-only.js b/packages/docusaurus/src/server/html-tags/__tests__/__fixtures__/plugin-bodyTags-only.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = function() {
+  return {
+    name: 'plugin-bodyTags-only',
+    injectHtmlTags() {
+      return {
+        bodyTags: {
+          tagName: 'script',
+          attributes: {
+            type: 'text/javascript',
+          },
+          innerHTML: 'window.foo = null;',
+        },
+      };
+    },
+  };
+};
diff --git a/packages/docusaurus/src/server/html-tags/__tests__/__fixtures__/plugin-both-tags.js b/packages/docusaurus/src/server/html-tags/__tests__/__fixtures__/plugin-both-tags.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = function() {
+  return {
+    name: 'plugin-both-tags',
+    injectHtmlTags() {
+      return {
+        headTags: [
+          {
+            tagName: 'link',
+            attributes: {
+              rel: 'preconnect',
+              href: 'www.google-analytics.com',
+            },
+          },
+        ],
+        bodyTags: [
+          {
+            tagName: 'div',
+            innerHTML: 'Test content',
+          },
+        ],
+      };
+    },
+  };
+};
diff --git a/packages/docusaurus/src/server/html-tags/__tests__/__fixtures__/plugin-empty.js b/packages/docusaurus/src/server/html-tags/__tests__/__fixtures__/plugin-empty.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = function() {
+  return {
+    name: 'plugin-empty',
+  };
+};
diff --git a/packages/docusaurus/src/server/html-tags/__tests__/__fixtures__/plugin-headTags-only.js b/packages/docusaurus/src/server/html-tags/__tests__/__fixtures__/plugin-headTags-only.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = function() {
+  return {
+    name: 'plugin-headTags-only',
+    injectHtmlTags() {
+      return {
+        headTags: [
+          {
+            tagName: 'link',
+            attributes: {
+              rel: 'preconnect',
+              href: 'www.google-analytics.com',
+            },
+          },
+        ],
+      };
+    },
+  };
+};
diff --git a/packages/docusaurus/src/server/html-tags/__tests__/htmlTags.test.ts b/packages/docusaurus/src/server/html-tags/__tests__/htmlTags.test.ts
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {htmlTagObjectToString} from '../htmlTags';
+
+describe('htmlTagObjectToString', () => {
+  test('simple html tag', () => {
+    expect(
+      htmlTagObjectToString({
+        tagName: 'script',
+        attributes: {
+          type: 'text/javascript',
+          src:
+            'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
+          async: true,
+        },
+      }),
+    ).toMatchInlineSnapshot(
+      `"<script type=\\"text/javascript\\" src=\\"https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js\\" async></script>"`,
+    );
+
+    expect(
+      htmlTagObjectToString({
+        tagName: 'link',
+        attributes: {
+          rel: 'preconnect',
+          href: 'www.google-analytics.com',
+        },
+      }),
+    ).toMatchInlineSnapshot(
+      `"<link rel=\\"preconnect\\" href=\\"www.google-analytics.com\\">"`,
+    );
+
+    expect(
+      htmlTagObjectToString({
+        tagName: 'div',
+        attributes: {
+          style: 'background-color:lightblue',
+        },
+        innerHTML: 'Lightblue color here',
+      }),
+    ).toMatchInlineSnapshot(
+      `"<div style=\\"background-color:lightblue\\">Lightblue color here</div>"`,
+    );
+
+    expect(
+      htmlTagObjectToString({
+        tagName: 'div',
+        innerHTML: 'Test',
+      }),
+    ).toMatchInlineSnapshot(`"<div>Test</div>"`);
+  });
+
+  test('valid html void tag', () => {
+    expect(
+      htmlTagObjectToString({
+        tagName: 'meta',
+        attributes: {
+          name: 'generator',
+          content: 'Docusaurus',
+        },
+      }),
+    ).toMatchInlineSnapshot(
+      `"<meta name=\\"generator\\" content=\\"Docusaurus\\">"`,
+    );
+
+    expect(
+      htmlTagObjectToString({
+        tagName: 'img',
+        attributes: {
+          src: '/img/docusaurus.png',
+          alt: 'Docusaurus logo',
+          height: '42',
+          width: '42',
+        },
+      }),
+    ).toMatchInlineSnapshot(
+      `"<img src=\\"/img/docusaurus.png\\" alt=\\"Docusaurus logo\\" height=\\"42\\" width=\\"42\\">"`,
+    );
+  });
+
+  test('invalid tag', () => {
+    expect(() =>
+      htmlTagObjectToString({
+        tagName: 'endiliey',
+        attributes: {
+          this: 'is invalid',
+        },
+      }),
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"Error loading {\\"tagName\\":\\"endiliey\\",\\"attributes\\":{\\"this\\":\\"is invalid\\"}}, \\"endiliey\\" is not a valid HTML tags"`,
+    );
+  });
+
+  test('invalid tagName', () => {
+    expect(() =>
+      htmlTagObjectToString({
+        tagName: true,
+      }),
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"{\\"tagName\\":true} is not a valid HTML tag object. \\"tagName\\" must be defined as a string"`,
+    );
+  });
+
+  test('invalid html tag object', () => {
+    expect(() =>
+      htmlTagObjectToString('fooofofoofo'),
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"\\"fooofofoofo\\" is not a valid HTML tag object"`,
+    );
+
+    expect(() =>
+      htmlTagObjectToString(null),
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"\\"null\\" is not a valid HTML tag object"`,
+    );
+  });
+});