Web Manifest: don't require .Site.Params.Manifest

Before, `.Site.Params.Manifest` was required to activate
Web App Manifest. Now, it's optional. Still, `.Site.Params.Manifest`
highly recommended.

* Don't require .Site.Params.Manifest
* Order Web App Manifest properties by required type (except icons)
* Add default value to startUrl param [`/`]
* README.md: enhance Web App Manifest configuration section
* README.md: add table with Web App Manifest default values in Binario
This commit is contained in:
vimux 2019-08-28 10:26:30 -04:00
parent b8650503eb
commit 407c5d72df
No known key found for this signature in database
GPG key ID: 5A34FDC4EE832E34
3 changed files with 27 additions and 11 deletions

View file

@ -183,11 +183,11 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
name = "Binario" name = "Binario"
shortName = "Binario" shortName = "Binario"
display = "browser" display = "browser"
startUrl = "/"
backgroundColor = "#2a2a2a" backgroundColor = "#2a2a2a"
themeColor = "#1b1b1b" themeColor = "#1b1b1b"
description = "Responsive card-based & code-light Hugo theme" description = "Responsive card-based & code-light Hugo theme"
orientation = "portrait" orientation = "portrait"
startUrl = "/"
scope = "/" scope = "/"
[outputFormats] [outputFormats]
@ -301,8 +301,8 @@ Stack Overflow, Mastodon, Medium
site info like name, description, icons, etc. This file tells the browser about your web application and how it should site info like name, description, icons, etc. This file tells the browser about your web application and how it should
behave when "installed" (as PWA) on the users mobile device or desktop. behave when "installed" (as PWA) on the users mobile device or desktop.
To activate Web App Manifest you need to define `MANIFEST` custom output format & specify `[Params.Manifest]` parameters To activate Web App Manifest, define `MANIFEST` as custom output format and include this for `home` Kind attribute in
in your site config file. your site config file. Here's how to make it.
First of all, you should define `MANIFEST` custom output format [`config.toml`]: First of all, you should define `MANIFEST` custom output format [`config.toml`]:
@ -322,7 +322,25 @@ Then, include `MANIFEST` output format for `home` Kind attribute [`config.toml`]
home = ["HTML", "RSS", "MANIFEST"] home = ["HTML", "RSS", "MANIFEST"]
``` ```
After that, you can specify `[Params.Manifest]` parameters. After that, Web App Manifest file will be generated. Still, it's better to specify `[Params.Manifest]` params to make
sure that everything works as expected.
| Web App Manifest Property | `.Site.Params.Manifest` Key | Default Value | Type |
| ------------------------- | --------------------------- | ------------- | ----------- |
| name | name | `.Site.Title` | required |
| short_name | shortName | `.Site.Title` | required |
| display | display | `browser` | required |
| start_url | startUrl | `/` | required |
| background_color | backgroundColor | `#2a2a2a` | recommended |
| theme_color | themeColor | `#1b1b1b` | recommended |
| description | description | | recommended |
| orientation | orientation | | recommended |
| scope | scope | | recommended |
| icons\* | | | required |
\* You can't customize manifest icons through config params, only replacing `icons/192.png` and `icons/512.png` files.
---
*To verify that your manifest file is configured properly and works well, run Hugo server and open *To verify that your manifest file is configured properly and works well, run Hugo server and open
Chrome DevTools (Press F12 in Chrome) → Application → Manifest* Chrome DevTools (Press F12 in Chrome) → Application → Manifest*

View file

@ -26,7 +26,7 @@
{{- with .OutputFormats.Get "rss" }} {{- with .OutputFormats.Get "rss" }}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }} {{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
{{- end }} {{- end }}
{{- if and (.Site.Params.Manifest) ((.Site.GetPage "home").OutputFormats.Get "manifest") -}} {{- with ((.Site.GetPage "home").OutputFormats.Get "manifest") }}
<link rel="manifest" href="{{ "manifest.json" | relURL }}"> <link rel="manifest" href="{{ "manifest.json" | relURL }}">
{{- end }} {{- end }}
{{- if not .Site.IsServer }} {{- if not .Site.IsServer }}

View file

@ -1,7 +1,8 @@
{ {
"name": "{{ if .Site.Params.Manifest.name }}{{ .Site.Params.Manifest.name }}{{ else }}{{ .Site.Title }}{{ end }}", "name": "{{ .Site.Params.Manifest.name | default .Site.Title }}",
"short_name": "{{ if .Site.Params.Manifest.shortName }}{{ .Site.Params.Manifest.shortName }}{{ else }}{{ .Site.Title }}{{ end }}", "short_name": "{{ .Site.Params.Manifest.shortName | default .Site.Title }}",
"display": "{{ .Site.Params.Manifest.display | default "browser" }}", "display": "{{ .Site.Params.Manifest.display | default "browser" }}",
"start_url": "{{ .Site.Params.Manifest.startUrl | default "/" }}",
"background_color": "{{ .Site.Params.Manifest.backgroundColor | default "#2a2a2a" }}", "background_color": "{{ .Site.Params.Manifest.backgroundColor | default "#2a2a2a" }}",
"theme_color": "{{ .Site.Params.Manifest.themeColor | default "#1b1b1b" }}", "theme_color": "{{ .Site.Params.Manifest.themeColor | default "#1b1b1b" }}",
{{- with .Site.Params.Manifest.description }} {{- with .Site.Params.Manifest.description }}
@ -10,9 +11,6 @@
{{- with .Site.Params.Manifest.orientation }} {{- with .Site.Params.Manifest.orientation }}
"orientation": "{{ . }}", "orientation": "{{ . }}",
{{- end }} {{- end }}
{{- with .Site.Params.Manifest.startUrl }}
"start_url": "{{ . }}",
{{- end }}
{{- with .Site.Params.Manifest.scope }} {{- with .Site.Params.Manifest.scope }}
"scope": "{{ . }}", "scope": "{{ . }}",
{{- end }} {{- end }}