Add to the about page

Prevent stray events from highlighting buttons
after closing a dialog

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+.DS_Store

package-lock.json

@@ -328,9 +328,9 @@
       }
     },
     "acorn": {
-      "version": "6.1.1",
+      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-      "integrity": "sha1-fSWuBbuK0fm2mRCOEJTs14hK3B8=",
+      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
       "dev": true
     },
     "acorn-dynamic-import": {
@@ -2106,6 +2106,69 @@
       "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==",
       "dev": true
     },
+    "file-loader": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-5.1.0.tgz",
+      "integrity": "sha512-u/VkLGskw3Ue59nyOwUwXI/6nuBCo7KBkniB/l7ICwr/7cPNGsL1WCXUp3GB0qgOOKU1TiP49bv4DZF/LJqprg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.4.0",
+        "schema-utils": "^2.5.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz",
+          "integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.4.1",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
+          "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==",
+          "dev": true
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "fast-deep-equal": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
+          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "schema-utils": {
+          "version": "2.6.5",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.5.tgz",
+          "integrity": "sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.12.0",
+            "ajv-keywords": "^3.4.1"
+          }
+        }
+      }
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -3674,9 +3737,9 @@
       "dev": true
     },
     "kind-of": {
-      "version": "6.0.2",
+      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha1-ARRrNqYhjmTljzqNZt5df8b20FE=",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
     "lcid": {

package.json

@@ -16,6 +16,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
+    "file-loader": "^5.1.0",
     "google-fonts-webpack-plugin": "^0.4.4",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",

src/ncounter/About.svelte

@@ -5,6 +5,13 @@
         <h2>Release |BUILD_DATE|</h2>
         <h2>&copy; |BUILD_YEAR|</h2>
     </header>
+    <div class="repo">
+        <a href="https://github.com/cheddarcrisp/ncounter" rel="noopener external" target="_blank"><img src="{ GitHubIcon }" alt="GitHub">Source Code</a>
+        <a href="https://github.com/cheddarcrisp/ncounter/issues" rel="noopener external" target="_blank"><img src="{ GitHubIcon }" alt="GitHub">Issues and feedback</a>
+    </div>
+    <h3>Privacy Policy</h3>
+    <p>No cookies. No tracking. All data is stored on your device.
+        Everything you do with this application is private.</p>
     <div class="licenses">
         <h2>Open Source License Information</h2>
         <Licenses></Licenses>
@@ -13,7 +20,10 @@
 <script>
 import Licenses from './Licenses.svelte';
 import { createEventDispatcher } from 'svelte';
+import GitHubIcon from '../img/GitHub-Mark.png';
+
 const dispatch = createEventDispatcher();
+
 </script>
 <style>
 .about {
@@ -41,6 +51,36 @@ const dispatch = createEventDispatcher();
     text-align: center;
 }
 
+.repo {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin: 6px 0;
+    flex: none;
+}
+
+.repo > a {
+    display: inline-flex;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.87);
+    text-decoration: none;
+    padding: 5px;
+    background-color: #F0F0F0;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    border: 2px solid transparent;
+}
+
+.repo > a:hover, .repo > a:focus {
+    box-shadow: none;
+    border-color: var(--highlight-color);
+}
+
+.repo > a > img {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+}
+
 h1 {
     font-weight: 600;
     font-size: 24px;
@@ -50,6 +90,12 @@ h2 {
     font-size: 18px;
 }
 
+h3 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 12px 0 6px 0;
+}
+
 .licenses h2{
     font-weight: 600;
 }

src/ncounter/App.svelte

@@ -17,8 +17,8 @@
         <label>Target<input type="text" pattern="(0|([1-9]\d*))(\.\d+)?" inputmode="decimal" bind:value={newCounter.max} /></label>
         <label>Save history<input type="checkbox" bind:checked={newCounter.saveHistory} /></label>
         <div class="buttons">
-            <button class="ok" on:click|preventDefault={ add }>OK</button>
+            <button class="ok" on:click|preventDefault|stopPropagation={ add }>OK</button>
-            <button on:click|preventDefault={ () => { showAddDialog = false; } }>Cancel</button>
+            <button on:click|preventDefault|stopPropagation={ () => { showAddDialog = false; } }>Cancel</button>
         </div>
     </form>
 </div>

src/ncounter/Counter.svelte

@@ -20,8 +20,8 @@
             <h1>{ showIncrement ? "Add" : "Set" }</h1>
             <input class="dialog-value" type="text" required pattern="(0|([1-9]\d*))(\.\d+)?" inputmode="decimal" bind:value={ dialogValue } use:focus />
             <div class="buttons">
-                <button class="ok" on:click|preventDefault={ dialogDone }>OK</button>
+                <button class="ok" on:click|preventDefault|stopPropagation={ dialogDone }>OK</button>
-                <button on:click|preventDefault={ dialogCancel }>Cancel</button>
+                <button on:click|preventDefault|stopPropagation={ dialogCancel }>Cancel</button>
             </div>
         </form>
     </div>

src/sw.js

@@ -29,7 +29,7 @@ registerRoute(
 );
 
 registerRoute(
-    /\.(?:js|css)$/,
+    /\.(?:js|css|png)$/,
     new StaleWhileRevalidate({
       cacheName: 'static-resources',
     })

webpack.common.js

@@ -37,7 +37,7 @@ module.exports = {
                 from: 'src/icon/safari-pinned-tab.svg', to: 'icons'
             },
             {
-                from: 'src/icon/favicon.ice', to: 'icons'
+                from: 'src/icon/favicon.ico', to: 'icons'
             },
             {
                 from: 'src/icon/site.webmanifest', to: 'icons'
@@ -82,6 +82,10 @@ module.exports = {
                     'style-loader',
                     'css-loader'
                 ]
+            },
+            {
+                test: /\.png$/,
+                loader: 'file-loader'
             }
         ]
     },