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:
parent
b8650503eb
commit
407c5d72df
3 changed files with 27 additions and 11 deletions
26
README.md
26
README.md
|
@ -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*
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
Loading…
Reference in a new issue