feat: provide embed build (#290)

* stash embed setup - broken because of webpack & html-plugin version issues, multi entry point output not working correctly without html plugin update, which breaks pwa plugin * make webpack pwa plugin work with html plugin >4 * incorporate: use full screen on mobile on menu pages and force title arrow to be next to title * remove console log * Restyled by prettier (#297) Co-authored-by: Restyled.io <[email protected]> * remove dev data leftovers Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com> Co-authored-by: Restyled.io <[email protected]>
CovOpen · Nov 3, 2020 · a9b3eb3 · a9b3eb3
1 parent ff62d86
commit a9b3eb3
Show file tree

Hide file tree

Showing 12 changed files with 369 additions and 1,322 deletions.
diff --git a/apps/official/components/NavigationTitle.tsx b/apps/official/components/NavigationTitle.tsx
@@ -12,11 +12,11 @@ export const NavigationTitle: React.FC<{ title: string; backToExpandedFeatureInf
       style={{ textDecoration: "none", cursor: "pointer" }}
       aria-label="go back to map"
     >
-      <Grid container direction="row" alignItems="center">
-        <Grid item>
+      <Grid container direction="row" alignItems="center" style={{ marginTop: "8px" }}>
+        <Grid item xs={1}>
           <ArrowBackIosIcon color="action" />
         </Grid>
-        <Grid item>
+        <Grid item xs={11}>
           <Typography variant="h1">{props.title}</Typography>
         </Grid>
       </Grid>

diff --git a/config/webpack/HtmlPwaPlugin/index.js b/config/webpack/HtmlPwaPlugin/index.js
@@ -1,3 +1,5 @@
+const htmlWebpackPlugin = require("html-webpack-plugin");
+
 const ID = "pwa-html-plugin";
 
 const defaults = {
@@ -27,13 +29,23 @@ module.exports = class HtmlPwaPlugin {
 
   apply(compiler) {
     compiler.hooks.compilation.tap(ID, (compilation) => {
-      compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(ID, (data, cb) => {
+      let beforeProcessingHook = compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing;
+      if (!beforeProcessingHook) {
+        beforeProcessingHook = htmlWebpackPlugin.getHooks(compilation).beforeEmit;
+      }
+
+      beforeProcessingHook.tapAsync(ID, (data, cb) => {
         // wrap favicon in the base template with IE only comment
         data.html = data.html.replace(/<link rel="icon"[^>]+>/, "<!--[if IE]>$&<![endif]-->");
         cb(null, data);
       });
 
-      compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(ID, (data, cb) => {
+      let alterAssetHook = compilation.hooks.htmlWebpackPluginAlterAssetTags;
+      if (!alterAssetHook) {
+        alterAssetHook = htmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups;
+      }
+
+      alterAssetHook.tapAsync(ID, (data, cb) => {
         const {
           name,
           themeColor,
@@ -45,10 +57,9 @@ module.exports = class HtmlPwaPlugin {
           iconPaths,
         } = this.options;
         const { publicPath } = compiler.options.output;
-
         const assetsVersionStr = assetsVersion ? `?v=${assetsVersion}` : "";
 
-        data.head.push(
+        data.headTags.push(
           // Favicons
           makeTag("link", {
             rel: "icon",