feat: generate & include new favicon

.gitignore

@@ -36,3 +36,4 @@ test.log
 /.npmrc
 /config/webpack.yml
 static/wp-*/
+/config/favicon.json

assets/favicon.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg4"
+   version="1.1"
+   viewBox="0 0 576 512">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <path
+     style="stroke-width:0.89999998;fill:#0a9342;fill-opacity:1"
+     id="path2"
+     d="m 516.7975,54.444679 c -49.32,2.799 -147.348,12.987 -207.864,50.031001 -4.176,2.556 -6.543,7.101 -6.543,11.853 v 327.483 c 0,10.395 11.367,16.965 20.952,12.141 62.262,-31.338 152.307,-39.888 196.83,-42.228 15.201,-0.801 27.018,-12.987 27.018,-27.594 V 82.074679 c 0.009,-15.939 -13.815,-28.566 -30.393,-27.63 z M 267.0565,104.47568 C 206.5495,67.431679 108.5215,57.252679 59.2015,54.444679 c -16.578,-0.936 -30.402,11.691 -30.402,27.63 V 386.13968 c 0,14.616 11.817,26.802 27.018,27.594 44.541,2.34 134.631,10.899 196.893,42.255 9.558,4.815 20.889,-1.746 20.889,-12.114 v -327.708 c 0,-4.761 -2.358,-9.126 -6.543,-11.691 z" />
+</svg>

config/settings.yml

@@ -5,6 +5,7 @@
 
 static-dir:     "_env:STATIC_DIR:static"
 webpack-manifest: "_env:WEBPACK_MANIFEST:config/webpack.yml"
+favicon-stats: "_env:FAVICON_STATS:config/favicon.json"
 host:           "_env:HOST:*4" # any IPv4 host
 port:           "_env:PORT:3000"
 ip-from-header: "_env:IP_FROM_HEADER:false"

package.json

@@ -60,6 +60,7 @@
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@fortawesome/fontawesome-pro": "^5.12.0",
+    "app-manifest-webpack-plugin": "^1.2.0",
     "autoprefixer": "^9.7.3",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.0.3",
@@ -72,6 +73,7 @@
     "css-loader": "^2.1.1",
     "eslint": "^5.16.0",
     "file-loader": "^5.0.2",
+    "html-webpack-plugin": "^3.2.0",
     "husky": "^2.7.0",
     "jasmine-core": "^3.5.0",
     "js-yaml": "^3.13.1",
@@ -90,6 +92,7 @@
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
+    "remove-files-webpack-plugin": "^1.1.3",
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.23.7",
     "sass-loader": "^7.3.1",

records.json

@@ -739,5 +739,31 @@
         "usedIds": []
       }
     }
+  ],
+  "app-manifest-webpack-plugin for \"/home/gkleen/projects/uni2work/static/wp-4.41/iconstats-[hash].json\"": [
+    {
+      "modules": {
+        "byIdentifier": {},
+        "usedIds": {}
+      },
+      "chunks": {
+        "byName": {},
+        "bySource": {},
+        "usedIds": []
+      }
+    }
+  ],
+  "app-manifest-webpack-plugin for \"../../config/favicon.json\"": [
+    {
+      "modules": {
+        "byIdentifier": {},
+        "usedIds": {}
+      },
+      "chunks": {
+        "byName": {},
+        "bySource": {},
+        "usedIds": []
+      }
+    }
   ]
 }

src/Foundation.hs

@@ -1587,6 +1587,8 @@ siteLayout' headingOverride widget = do
 
       toWidget $(juliusFile "templates/i18n.julius")
 
+      faviconLinks
+
       $(widgetFile "default-layout")
   withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
 

src/Settings.hs

@@ -78,6 +78,7 @@ data AppSettings = AppSettings
     { appStaticDir              :: FilePath
     -- ^ Directory from which to serve static files.
     , appWebpackEntrypoints     :: FilePath
+    , appFaviconStats           :: FilePath
     , appDatabaseConf           :: PostgresConf
     -- ^ Configuration settings for accessing the database.
     , appAutoDbMigrate          :: Bool
@@ -370,6 +371,7 @@ instance FromJSON AppSettings where
 #endif
         appStaticDir              <- o .: "static-dir"
         appWebpackEntrypoints     <- o .: "webpack-manifest"
+        appFaviconStats           <- o .: "favicon-stats"
         appDatabaseConf           <- o .: "database"
         appAutoDbMigrate          <- o .: "auto-db-migrate"
         let nonEmptyHost LdapConf{..} = case ldapHost of

src/Settings/StaticFiles.hs

@@ -3,11 +3,12 @@ module Settings.StaticFiles
   , module Yesod.EmbeddedStatic
   ) where
 
-import ClassyPrelude
+import ClassyPrelude.Yesod
 
-import Settings     (appStaticDir, appWebpackEntrypoints, compileTimeAppSettings)
+import Settings     (appStaticDir, appWebpackEntrypoints, appFaviconStats, compileTimeAppSettings)
 import Settings.StaticFiles.Generator
 import Settings.StaticFiles.Webpack
+import Settings.StaticFiles.Favicon
 import Yesod.EmbeddedStatic
 
 -- This generates easy references to files in the static directory at compile time,
@@ -27,3 +28,6 @@ import Yesod.EmbeddedStatic
 
 mkEmbeddedStatic DEV_BOOL "embeddedStatic" . pure . staticGenerator $ appStaticDir compileTimeAppSettings
 mkWebpackEntrypoints (appWebpackEntrypoints compileTimeAppSettings) (pure staticGenerator) $ appStaticDir compileTimeAppSettings
+
+faviconLinks :: MonadWidget m => m ()
+faviconLinks = $(mkFaviconLinks $ appFaviconStats compileTimeAppSettings)

src/Settings/StaticFiles/Favicon.hs

@@ -0,0 +1,38 @@
+module Settings.StaticFiles.Favicon
+  ( mkFaviconLinks
+  ) where
+
+import ClassyPrelude.Yesod
+
+import Language.Haskell.TH
+import Language.Haskell.TH.Syntax hiding (Lift(..))
+import qualified Language.Haskell.TH.Syntax as TH (Lift(..))
+
+import qualified Data.Aeson as JSON
+
+import qualified Data.Map as Map
+
+import Text.Blaze.Html (preEscapedToHtml)
+
+
+mkFaviconLinks :: FilePath -- ^ Path to JSON-manifest
+               -> ExpQ
+mkFaviconLinks manifest = do
+  addDependentFile manifest
+  htmlFragments <- decodeManifest manifest
+
+  doE $ map (\frag -> noBindS [e|toWidgetHead $ preEscapedToHtml $(TH.lift frag)|]) htmlFragments
+  where
+    decodeManifest :: FilePath -> Q [Text]
+    decodeManifest manifest' = do
+      res <- liftIO $ JSON.eitherDecodeFileStrict' manifest'
+      case res of
+        Left err   -> fail err
+        Right res'
+          | Just frags' <- res' Map.!? ("html" :: Text)
+          , JSON.Success frags <- JSON.fromJSON frags'
+            -> return frags
+          | otherwise
+            -> fail "Could not parse favicon stats"
+
+  

webpack.config.js

@@ -9,6 +9,8 @@ const TerserPlugin = require('terser-webpack-plugin');
 const yaml = require('js-yaml');
 const HashOutput = require('webpack-plugin-hash-output');
 const postcssPresetEnv = require('postcss-preset-env');
+const AppManifestWebpackPlugin = require('app-manifest-webpack-plugin');
+const RemovePlugin = require('remove-files-webpack-plugin');
 
 const webpackVersion = require('webpack/package.json').version.split('.').slice(0, 2).join('.');
 const packageVersion = require('./package.json').version;
@@ -67,7 +69,7 @@ module.exports = {
              ]
       },
       {
-        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/i,
+        test: /\.(woff(2)?|ttf|eot|svg)(\?.*)?$/i,
         use: [
           {
             loader: 'file-loader',
@@ -103,7 +105,8 @@ module.exports = {
       if (chunk.name) { 
         return chunk.name; 
       } 
-      return chunk.modules.map(m => path.relative(m.context, m.request)).join("_"); 
+      let modules = chunk.modules || [chunk.entryModule];
+      return modules.map(m => path.relative(m.context, m.request)).join("_"); 
     }), 
     new webpack.NamedModulesPlugin(), 
     new ManifestPlugin({
@@ -121,6 +124,38 @@ module.exports = {
     ]),
     new webpack.DefinePlugin({
       VERSION: JSON.stringify(packageVersion)
+    }),
+    new AppManifestWebpackPlugin({
+      logo: path.resolve(__dirname, 'assets/favicon.svg'),
+      output: '/[hash]-icons/',
+      prefix: `/static/res/wp-${webpackVersion}/`,
+      inject: false,
+      emitStats: true,
+      statsFilename: path.resolve(__dirname, 'config/favicon.json'),
+      persistentCache: false,
+      config: {
+	background: '#fff',
+	icons: {
+	  android: false,
+	  appleIcon: false,
+	  appleStartup: false,
+	  coast: false,
+	  favicons: true,
+	  firefox: false,
+	  windows: false,
+	  yandex: false
+	}
+      }
+    }),
+    new RemovePlugin({
+      after: {
+	test: [
+	  { folder: path.resolve(__dirname, `static/wp-${webpackVersion}`),
+	    method: (filePath) => { return new RegExp(/\/.*-icons\/.*\.(xml|json|webapp)$/, 'm').test(filePath); },
+	    recursive: true
+	  }
+	]
+      }
     })
   ],