Enable PWA functionality (#2)

* Add PWA features

* Add icons, configure PWA

* Add theme_color

config.toml

@@ -21,8 +21,8 @@ description = "Antti Viitala personal portfolio site"
 keywords = "blog,developer,personal"
 info = ["DevOps", "Cloud Architecture", "Professional googler"]
 avatarURL = "images/avatar.png"
-favicon_16 = "favicon_16.ico"
-favicon_32 = "favicon_32.ico"
+favicon_16 = "images/favicon-16x16.png"
+favicon_32 = "images/favicon-32x32.png"
 #gravatar = "john.doe@example.com"
 dateFormat = "2006-01-02"
 since = 2022
@@ -78,7 +78,10 @@ childsrc = ["'self'"]
 fontsrc = ["'self'", "https://fonts.gstatic.com", "https://cdn.jsdelivr.net/"]
 formaction = ["'self'"]
 framesrc = ["'self'"]
-imgsrc = ["'self'"]
+imgsrc = [
+  "'self'",
+  "http://aviitala.goatcounter.com",
+  "https://aviitala.com"]
 objectsrc = ["'none'"]
 stylesrc = [
   "'self'",
@@ -90,7 +93,8 @@ scriptsrc = [
   "'self'",
   "'unsafe-inline'",
   "https://www.google-analytics.com",
-  "https://cdn.jsdelivr.net/"
+  "https://cdn.jsdelivr.net/",
+  "http://gc.zgo.at"
 ]
 prefetchsrc = ["'self'"]
 # connect-src directive – defines valid targets for to XMLHttpRequest (AJAX), WebSockets or EventSource

layouts/partials/extra.html

@@ -0,0 +1,35 @@
+<meta name="mobile-web-app-capable" content="yes" />
+
+<meta name="apple-mobile-web-app-title" content="AVIITALA.com" />
+
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+<link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://aviitala.com/images/apple-touch-icon-57x57.png" />
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://aviitala.com/images/apple-touch-icon-114x114.png" />
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://aviitala.com/images/apple-touch-icon-72x72.png" />
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://aviitala.com/images/apple-touch-icon-144x144.png" />
+<link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://aviitala.com/images/apple-touch-icon-60x60.png" />
+<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://aviitala.com/images/apple-touch-icon-120x120.png" />
+<link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://aviitala.com/images/apple-touch-icon-76x76.png" />
+<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://aviitala.com/images/apple-touch-icon-152x152.png" />
+<link rel="icon" type="image/png" href="https://aviitala.com/images/favicon-196x196.png" sizes="196x196" />
+<link rel="icon" type="image/png" href="https://aviitala.com/images/favicon-96x96.png" sizes="96x96" />
+<link rel="icon" type="image/png" href="https://aviitala.com/images/favicon-32x32.png" sizes="32x32" />
+<link rel="icon" type="image/png" href="https://aviitala.com/images/favicon-16x16.png" sizes="16x16" />
+<link rel="icon" type="image/png" href="https://aviitala.com/images/favicon-128.png" sizes="128x128" />
+<meta name="application-name" content="Antti Viitala"/>
+<meta name="msapplication-TileColor" content="#FFA500" />
+<meta name="msapplication-TileImage" content="https://aviitala.com/images/mstile-144x144.png" />
+<meta name="msapplication-square70x70logo" content="https://aviitala.com/images/mstile-70x70.png" />
+<meta name="msapplication-square150x150logo" content="https://aviitala.com/images/mstile-150x150.png" />
+<meta name="msapplication-wide310x150logo" content="https://aviitala.com/images/mstile-310x150.png" />
+<meta name="msapplication-square310x310logo" content="https://aviitala.com/images/mstile-310x310.png" />
+
+<script defer>
+
+if ('serviceWorker' in navigator) {
+
+navigator.serviceWorker.register('/sw.js');
+
+};
+
+</script>

static/site.webmanifest

@@ -1,7 +1,37 @@
 {
-  "name": "Antti Viitala",
-  "short_name": "Antti Viitala personal site",
-  "theme_color": "#ffa500",
-  "background_color": "#424242",
-  "display": "standalone"
+  "name": "AVIITALA.com",
+  "short_name": "AVIITALA.com",
+  "theme_color": "#212121",
+  "background_color": "#212121",
+  "display": "standalone",
+  "start_url": "/",
+  "orientation": "portrait",
+  "icons": [
+    {
+      "src": "/images/favicon-128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/apple-touch-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/apple-touch-icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/favicon-196x196.png",
+      "sizes": "196x196",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/splash.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
 }

static/sw.js

@@ -0,0 +1,3 @@
+self.addEventListener ('fetch', function(event) {
+
+});

themes/hugo-coder/layouts/_default/baseof.html

@@ -17,6 +17,7 @@
   {{ partial "float" . }}
   <main class="wrapper">
     {{ partial "header.html" . }}
+    {{ partial "extra.html" . }}
 
     <div class="content">
       {{ block "content" . }}{{ end }}

themes/hugo-coder/layouts/partials/csp.html

@@ -1 +1 @@
-{{ printf `<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests; block-all-mixed-content; default-src 'self'; child-src %s; font-src %s; form-action %s; frame-src %s; img-src %s http://aviitala.goatcounter.com; object-src %s; style-src %s; script-src %s http://gc.zgo.at; prefetch-src %s; connect-src %s;">` (delimit .Site.Params.csp.childsrc " ") (delimit .Site.Params.csp.fontsrc " ") (delimit .Site.Params.csp.formaction " ") (delimit .Site.Params.csp.framesrc " ") (delimit .Site.Params.csp.imgsrc " ") (delimit .Site.Params.csp.objectsrc " ") (delimit .Site.Params.csp.stylesrc " ") (delimit .Site.Params.csp.scriptsrc " ") (delimit .Site.Params.csp.prefetchsrc " ") (delimit .Site.Params.csp.connectsrc " ") | safeHTML }}
+{{ printf `<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests; block-all-mixed-content; default-src 'self'; child-src %s; font-src %s; form-action %s; frame-src %s; img-src %s; object-src %s; style-src %s; script-src %s; prefetch-src %s; connect-src %s;">` (delimit .Site.Params.csp.childsrc " ") (delimit .Site.Params.csp.fontsrc " ") (delimit .Site.Params.csp.formaction " ") (delimit .Site.Params.csp.framesrc " ") (delimit .Site.Params.csp.imgsrc " ") (delimit .Site.Params.csp.objectsrc " ") (delimit .Site.Params.csp.stylesrc " ") (delimit .Site.Params.csp.scriptsrc " ") (delimit .Site.Params.csp.prefetchsrc " ") (delimit .Site.Params.csp.connectsrc " ") | safeHTML }}