Improve webpack-macros.html generation logic

Utilise a dedent helper, and include the hash as a digest query
parameter.

Author: pradyunsg

package.json

@@ -8,15 +8,16 @@
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
+    "dedent": "^0.7.0",
     "extract-loader": "^4.0.3",
     "file-loader": "^5.0.2",
     "html-webpack-plugin": "^4.3.0",
     "imports-loader": "^0.8.0",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^6.0.1",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "pa11y-ci-reporter-html": "^2.1.2",
     "pa11y-ci": "^2.4.0",
+    "pa11y-ci-reporter-html": "^2.1.2",
     "sass-loader": "^10.1.1",
     "style-loader": "^1.1.3",
     "webpack": "^4.41.6",

webpack.config.js

@@ -9,6 +9,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
+const dedent = require("dedent");
 
 //
 // Paths for various assets (sources and destinations)
@@ -29,57 +30,57 @@ const vendorPaths = {
 // Cache-busting Jinja2 macros (`webpack-macros.html`) used in `layout.html`
 //
 function macroTemplate({ compilation }) {
-  console.log(Object.keys(compilation.assets));
-  const indexes = Object.keys(compilation.assets).filter(
-    (file) => file.indexOf("/pydata-sphinx-theme.") != -1
-  );
-  const css = indexes.filter((file) => file.endsWith(".css"));
-  const js = indexes.filter((file) => file.endsWith(".js"));
+  const hash = compilation.hash;
+  const css_files = ["styles/theme.css", "styles/pydata-sphinx-theme.css"];
+  const js_files = ["scripts/pydata-sphinx-theme.js"];
 
-  const stylesheet = (css) => {
-    return `\
-<link href="{{ pathto('_static/styles/theme.css', 1) }}" rel="stylesheet">
-  <link href="{{ pathto('_static/${css}', 1) }}" rel="stylesheet">`;
-  };
+  function stylesheet(css) {
+    return `<link href="{{ pathto('_static/${css}', 1) }}?digest=${hash}" rel="stylesheet">`;
+  }
 
-  const preload = (js) => {
-    return `<link rel="preload" as="script" href="{{ pathto('_static/${js}', 1) }}">`;
-  };
+  function preload(js) {
+    return `<link rel="preload" as="script" href="{{ pathto('_static/${js}', 1) }}?digest=${hash}">`;
+  }
 
-  const script = (js) => {
-    return `<script src="{{ pathto('_static/${js}', 1) }}"></script>`;
-  };
+  function script(js) {
+    return `<script src="{{ pathto('_static/${js}', 1) }}?digest=${hash}"></script>`;
+  }
 
-  return `<!-- these macros are generated by "yarn build:production". do not edit by hand. -->
-{% macro head_pre_icons() %}
-  <link rel="stylesheet"
-    href="{{ pathto('_static/vendor/fontawesome/${
-      vendorVersions.fontAwesome
-    }/css/all.min.css', 1) }}">
-  <link rel="preload" as="font" type="font/woff2" crossorigin
-    href="{{ pathto('_static/vendor/fontawesome/${
-      vendorVersions.fontAwesome
-    }/webfonts/fa-solid-900.woff2', 1) }}">
-  <link rel="preload" as="font" type="font/woff2" crossorigin
-    href="{{ pathto('_static/vendor/fontawesome/${
-      vendorVersions.fontAwesome
-    }/webfonts/fa-brands-400.woff2', 1) }}">
-{% endmacro %}
+  return dedent(`\
+    <!--
+      All these macros are auto-generated and must **NOT** be edited by hand.
+      See the webpack.config.js file, to learn more about how this is generated.
+    -->
+    {% macro head_pre_icons() %}
+      <link rel="stylesheet"
+        href="{{ pathto('_static/vendor/fontawesome/${
+          vendorVersions.fontAwesome
+        }/css/all.min.css', 1) }}">
+      <link rel="preload" as="font" type="font/woff2" crossorigin
+        href="{{ pathto('_static/vendor/fontawesome/${
+          vendorVersions.fontAwesome
+        }/webfonts/fa-solid-900.woff2', 1) }}">
+      <link rel="preload" as="font" type="font/woff2" crossorigin
+        href="{{ pathto('_static/vendor/fontawesome/${
+          vendorVersions.fontAwesome
+        }/webfonts/fa-brands-400.woff2', 1) }}">
+    {% endmacro %}
 
-{% macro head_pre_fonts() %}
-{% endmacro %}
+    {% macro head_pre_fonts() %}
+    {% endmacro %}
 
-{% macro head_pre_bootstrap() %}
-  ${css.map(stylesheet).join("\n")}
-{% endmacro %}
+    {% macro head_pre_bootstrap() %}
+      ${css_files.map(stylesheet).join("\n  ")}
+    {% endmacro %}
 
-{% macro head_js_preload() %}
-  ${js.map(preload).join("\n")}
-{% endmacro %}
+    {% macro head_js_preload() %}
+      ${js_files.map(preload).join("\n  ")}
+    {% endmacro %}
 
-{% macro body_post() %}
-  ${js.map(script).join("\n")}
-{% endmacro %}`;
+    {% macro body_post() %}
+      ${js_files.map(script).join("\n  ")}
+    {% endmacro %}
+  `);
 }
 
 module.exports = {