Merge pull request #131 from jonnybarnes/develop

MTM: Fathom

.env.example

@@ -56,6 +56,8 @@ PIWIK=false
 PIWIK_ID=1
 PIWIK_URL=https://analytics.jmb.lv/piwik.php
 
+FATHOM_ID=
+
 APP_TIMEZONE=UTC
 APP_LANG=en
 APP_LOG=daily

app/Http/Middleware/CSPHeader.php

@@ -25,6 +25,7 @@ class CSPHeader
 script-src 'self' 'unsafe-inline' 'unsafe-eval' \
 https://api.mapbox.com \
 https://analytics.jmb.lv \
+https://fathom.jonnybarnes.uk \
 blob:; \
 style-src 'self' 'unsafe-inline' \
 https://api.mapbox.com \

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "jonnybarnes/jonnybarnes.uk",
     "type": "project",
-    "description": "The code for jonnybanres.uk, based on Laravel 5.4",
+    "description": "The code for jonnybanres.uk, based on Laravel 5.8",
     "keywords": [
         "framework",
         "laravel",
@@ -89,6 +89,9 @@
         ],
         "post-create-project-cmd": [
             "@php artisan key:generate --ansi"
+        ],
+        "test": [
+            "vendor/bin/phpunit --stop-on-failure"
         ]
     }
 }

config/fathom.php

@@ -0,0 +1,7 @@
+<?php
+
+return [
+
+    'id' => env('FATHOM_ID', null),
+
+];

package.json

@@ -7,39 +7,39 @@
     "dependencies": {
         "a11y.css": "^4.5.2",
         "alertify.js": "^1.0.12",
-        "mapbox-gl": "^0.52.0",
+        "mapbox-gl": "^0.54.0",
-        "marked": "^0.6.0",
+        "marked": "^0.6.2",
         "normalize.css": "^8.0.1",
-        "puppeteer": "^1.12.1"
+        "puppeteer": "^1.15.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.2.2",
+        "@babel/core": "^7.4.4",
-        "@babel/preset-env": "^7.3.1",
+        "@babel/preset-env": "^7.4.4",
-        "ajv": "^6.7.0",
+        "ajv": "^6.10.0",
-        "ajv-keywords": "^3.3.0",
+        "ajv-keywords": "^3.4.0",
-        "autoprefixer": "^9.4.7",
+        "autoprefixer": "^9.5.1",
         "babel-cli": "^6.26.0",
         "babel-loader": "^8.0.5",
         "babel-preset-env": "^1.7.0",
         "babel-runtime": "^6.26.0",
         "dotenv-webpack": "^1.7.0",
-        "eslint": "^5.13.0",
+        "eslint": "^5.16.0",
         "eslint-config-standard": "^12.0.0",
-        "eslint-plugin-import": "^2.16.0",
+        "eslint-plugin-import": "^2.17.2",
-        "eslint-plugin-node": "^8.0.1",
+        "eslint-plugin-node": "^9.0.1",
-        "eslint-plugin-promise": "^4.0.1",
+        "eslint-plugin-promise": "^4.1.1",
         "eslint-plugin-standard": "^4.0.0",
-        "husky": "^1.3.1",
+        "husky": "^2.2.0",
-        "lint-staged": "^8.1.1",
+        "lint-staged": "^8.1.6",
-        "postcss-cli": "^6.1.1",
+        "postcss-cli": "^6.1.2",
         "postcss-sass": "^0.3.5",
         "pre-commit": "^1.1.3",
         "source-list-map": "^2.0.1",
-        "stylelint": "^9.10.1",
+        "stylelint": "^10.0.1",
-        "stylelint-config-standard": "^18.2.0",
+        "stylelint-config-standard": "^18.3.0",
-        "uglify-js": "^3.4.9",
+        "uglify-js": "^3.5.10",
-        "webpack": "^4.29.0",
+        "webpack": "^4.30.0",
-        "webpack-cli": "^3.2.1",
+        "webpack-cli": "^3.3.1",
         "webpack-sources": "^1.3.0"
     },
     "scripts": {

public/assets/frontend/mapbox-gl.css

@@ -56,7 +56,13 @@
 .mapboxgl-ctrl-bottom-left  { bottom: 0; left: 0; }
 .mapboxgl-ctrl-bottom-right { right: 0; bottom: 0; }
 
-.mapboxgl-ctrl { clear: both; pointer-events: auto; }
+.mapboxgl-ctrl {
+    clear: both;
+    pointer-events: auto;
+
+    /* workaround for a Safari bug https://github.com/mapbox/mapbox-gl-js/issues/8185 */
+    transform: translate(0, 0);
+}
 .mapboxgl-ctrl-top-left .mapboxgl-ctrl     { margin: 10px 0 0 10px; float: left; }
 .mapboxgl-ctrl-top-right .mapboxgl-ctrl    { margin: 10px 10px 0 0; float: right; }
 .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl  { margin: 0 0 10px 10px; float: left; }
@@ -111,6 +117,11 @@
     padding: 5px;
 }
 
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-icon-disabled {
+    opacity: 0.25;
+    border-color: #373737;
+}
+
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath style='fill:%23333333;' d='m 7,9 c -0.554,0 -1,0.446 -1,1 0,0.554 0.446,1 1,1 l 6,0 c 0.554,0 1,-0.446 1,-1 0,-0.554 -0.446,-1 -1,-1 z'/%3E %3C/svg%3E");
 }
@@ -217,6 +228,8 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 
 @media screen {
     .mapboxgl-ctrl-attrib.mapboxgl-compact {
+        min-height: 20px;
+        padding: 0;
         margin: 10px;
         position: relative;
         background-color: #fff;
@@ -226,6 +239,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     .mapboxgl-ctrl-attrib.mapboxgl-compact:hover {
         padding: 2px 24px 2px 4px;
         visibility: visible;
+        margin-top: 6px;
     }
 
     .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:hover,

resources/views/master.blade.php

@@ -61,10 +61,22 @@
             <p>Built with love: <a href="/colophon">Colophon</a></p>
             <p><a href="https://indieweb.org"><img src="/assets/img/iwc.svg" alt="Indie Web Camp logo"></a></p>
         </footer>
-        @if (config('app.piwik') === true)
+        @if(config('fathom.id'))
-        <!-- Piwik -->
+            <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
-        <script src="https://analytics.jmb.lv/piwik.js" async defer></script>
+            <script>
-        <script src="/assets/js/piwik.js"></script>
+                (function(f, a, t, h, o, m){
+                    a[h]=a[h]||function(){
+                        (a[h].q=a[h].q||[]).push(arguments)
+                    };
+                    o=f.createElement('script'),
+                        m=f.getElementsByTagName('script')[0];
+                    o.async=1; o.src=t; o.id='fathom-script';
+                    m.parentNode.insertBefore(o,m)
+                })(document, window, '//fathom.jonnybarnes.uk/tracker.js', 'fathom');
+                fathom('set', 'siteId', '{{ config('fathom.id') }}');
+                fathom('trackPageview');
+            </script>
+            <!-- / Fathom -->
         @endif
     </body>
 </html>