feat: add PWA support

README.md

@@ -29,6 +29,7 @@ Check [https://hugo-theme-tailwind.tomo.dev/](https://hugo-theme-tailwind.tomo.d
  * Search (by using [fuse.js](https://fusejs.io/) and [mark.js](https://markjs.io/))
  * Image support for article (using `image` param in front matter)
  * Structured data [JSON-LD](https://json-ld.org/) for article (enable `jsonLD` in config file or front matter)
+ * Simple [PWA](https://web.dev/add-manifest/) support - check `params.pwa` in config file
 
 ## Installation
 
@@ -102,6 +103,7 @@ Some of the configuration options are:
  * `params.search`: search settings
  * `params.author`: author used in the JSON-LD
  * `params.jsonLD`: enable or disable JSON-LD (default disabled)
+ * `params.pwa`: enable or disable PWA (default disabled)
 
 For social media link data, you can refer entries in `params.social_media.items`
 (You can add more or disable existing entries in `params.social_media.items`).

config/_default/params.toml

@@ -81,3 +81,14 @@ jsonLD = false
     title = 'Github'
     icon = 'brand-github'
     link = 'https://github.com/tomowang'
+
+[pwa]
+  enabled = true
+  icon = "logo.png" # should be in assets
+  icon_sizes = [192, 512]
+
+  # will be used as the manifest.json file and merge the default one
+  # https://developer.mozilla.org/en-US/docs/Web/Manifest
+  # https://web.dev/add-manifest/
+  [pwa.manifest]
+  description = "Example site for hugo-theme-tailwind"

content/manifest.md

@@ -0,0 +1,6 @@
++++
+layout = "manifest"
+outputs = ["json"]
+url = "/manifest.json"
+sitemap = false
++++

exampleSite/config/_default/params.toml

@@ -64,3 +64,14 @@ jsonLD = true
     title = 'Github'
     icon = 'brand-github'
     link = 'https://github.com/tomowang'
+
+[pwa]
+  enabled = true
+  icon = "logo.png" # should be in assets
+  icon_sizes = [192, 512]
+
+  # will be used as the manifest.json file and merge the default one
+  # https://developer.mozilla.org/en-US/docs/Web/Manifest
+  # https://web.dev/add-manifest/
+  [manifest]
+  description = "Example site for hugo-theme-tailwind"

layouts/_default/manifest.json

@@ -0,0 +1,26 @@
+{{- $baseURL := absURL site.BaseURL }}
+{{- $iconPath := site.Params.pwa.icon }}
+{{- $icon := resources.Get $iconPath }}
+{{- $icons := slice }}
+{{- with $icon }}
+  {{- range site.Params.pwa.icon_sizes }}
+    {{- $sizes := printf "%dx%d" . . }}
+    {{- $icons = $icons | append (dict
+      "src" ($icon.Resize $sizes).Permalink
+      "sizes" $sizes
+      "type" $icon.MediaType.Type
+      )
+    }}
+  {{- end }}
+{{- else }}
+  {{- warnf "[pwa] the icon image doesn't exist: assets/%s." $iconPath }}
+{{- end }}
+{{- $default := dict
+  "name" site.Title
+  "display" "standalone"
+  "scope" $baseURL
+  "start_url" $baseURL
+  "icons" $icons
+}}
+{{- $params := site.Params.pwa.manifest }}
+{{- merge $default $params | jsonify -}}

layouts/partials/head.html

@@ -9,6 +9,7 @@
   content="{{ with .Params.Keywords }}{{ delimit . ", " }}{{ else }}{{ $.Site.Params.Keywords }}{{ end }}"
 />
 <meta name="robots" content="noodp" />
+{{- if $.Site.Params.pwa.enabled }}<link rel="manifest" href="/manifest.json" />{{ end -}}
 {{ template "_internal/opengraph.html" . }}
 {{ template "_internal/twitter_cards.html" . }}