Put a border around xkcd and store it on our servers

package-lock.json

@@ -2127,6 +2127,29 @@
       "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==",
       "dev": true
     },
+    "file-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-2.0.0.tgz",
+      "integrity": "sha512-YCsBfd1ZGCyonOKLxPiKPdu+8ld9HAaMEvJewzz+b2eTF7uL5Zm/HdBF6FjCrpCMRq25Mi0U1gl4pwn2TlH7hQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.0.2",
+        "schema-utils": "^1.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "fill-range": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "autoprefixer": "^9.3.1",
     "css-loader": "^1.0.1",
     "exports-loader": "^0.7.0",
+    "file-loader": "^2.0.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.4.5",

src/index.html

@@ -111,8 +111,8 @@
   <a class="d-block" href="https://xkcd.com/936/"
      title="To anyone who understands information theory and security and is in an infuriating argument with someone who does not (possibly involving mixed case), I sincerely apologize.">
     <figure class="figure border rounded p-4 bg-light">
-      <img class="figure-img img-fluid d-block mx-auto" src="https://imgs.xkcd.com/comics/password_strength.png"
-           alt="xkcd comic about password strength">
+      <img class="figure-img img-fluid d-block mx-auto p-2 bg-white border border-dark rounded"
+           src="xkcd.png" alt="xkcd comic about password strength">
       <figcaption class="figure-caption">To anyone who understands information theory and security and is in an
         infuriating argument with someone who does not (possibly involving mixed case), I sincerely apologize.
       </figcaption>

webpack.config.js

@@ -79,6 +79,16 @@ module.exports = {
             loader: 'sass-loader'
           }
         ]
+      },
+      {
+        test: /\.(png|jp(e*)g|svg)$/,
+        use: [{
+          loader: 'file-loader',
+          options: {
+            limit: 8000, // Convert images < 8kb to base64 strings
+            name: '[name].[hash].[ext]'
+          }
+        }]
       }
     ]
   }