This week I’ve published a Liquid layout for building webmanifest files from FrontMatter or YAML configurations. Check the documentation for detailed getting started and usage instructions, the source code is available on GitHub. What follows is the TLDR for installation and usage…

Clone/Install

cd <your-project>


mkdir -p _layouts/modules


git submodule add -b main\
                  --name webmanifest\
                  'https://github.com/liquid-utilities/webmanifest.git'\
                  '_includes/modules/webmanifest'

Write a web manifest file within your project…

site.webmanifest

---
layout: modules/webmanifest/webmanifest

name: Liquid Utilities -- Site Web Manifest Example
short_name: Site Web Manifest Example

icons:
  filter: relative_url

  - src: assets/images/icons/android-chrome-192x192.png
    purpose: monochrome

    sizes: 192x192
    type: image/png

  - src: assets/images/icons/android-chrome-384x384.png
    filter: absolute_url
    type: image/png
---

… and expect JSON formatted results similar to the following after building…

{
    "name": "Liquid Utilities -- Site Web Manifest Example",
    "short_name": "Site Web Manifest Example",
    "icons": [
        {
            "src": "/webmanifest/assets/images/icons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://liquid-utilities.github.io/webmanifest/assets/images/icons/android-chrome-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}