Web Manifest

Build webmanifest file from FrontMatter or YAML

⬆️ Top of Document
🏗️ Requirements
⚡ Quick Start
- 📝 Edit Your ReadMe File
- 💾 Commit and Push
🧰 Usage
🔣 API
🗒 Notes
📈 Contributing
- 🔱 Forking
- 💱 Sponsor
📇 Attribution
⚖️ Licensing

Note, bold API properties are Mandatory within a given scope

Requirements

This repository depends upon Jekyll which is supported by GitHub Pages, further details about setup can be found from documentation published by the Jekyll maintainers regarding GitHub Pages.

Quick Start

This repository encourages the use of Git Submodules to track dependencies

Bash Variables

_module_name='webmanifest'
_module_https_url="https://github.com/liquid-utilities/webmanifest.git"
_module_base_dir='_layouts/modules'
_module_path="${_module_base_dir}/${_module_name}"

Bash Submodule Commands

cd "<your-git-project-path>"

git checkout gh-pages

mkdir -vp "${_module_base_dir}"

git submodule add -b main\
                  --name "${_module_name}"\
                  "${_module_https_url}"\
                  "${_module_path}"

Your ReadMe File

Suggested additions for your ReadMe.md file so everyone has a good time with submodules

Clone with the following to avoid incomplete downloads


    git clone --recurse-submodules <url-for-your-project>


Update/upgrade submodules via


    git submodule update --init --merge --recursive

Commit and Push

git add .gitmodules
git add "${_module_path}"


## Add any changed files too


git commit -F- <<'EOF'
:heavy_plus_sign: Adds `liquid-utilities/webmanifest#1` submodule



**Additions**


- `.gitmodules`, tracks submodules AKA Git within Git _fanciness_

- `README.md`, updates installation and updating guidance

- `_modules_/webmanifest`, Build `webmanifest` file from FrontMatter or YAML
EOF


git push origin gh-pages

🎉 Excellent 🎉 your project is now ready to begin unitizing code from this repository!

Usage

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
---

Example Output

{
    "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"
}

API

Documentation of available FrontMatter/YAML configurations

`filter`

Liquid filter absolute_url or relative_url to use for src and url keys

Type: absolute_url | relative_url | false Mandatory: false

filter: relative_url

https://jekyllrb.com/docs/liquid/filters/

`background_color`

Background color for application prior to loading style-sheet

Type: string Mandatory: false

background_color: red

MDN -- background_color

`categories`

List of categories that application belongs to

YAML Type: string | array Result Type: string[] Mandatory: false

categories:
  - books
  - education
  - medical

MDN -- categories

`description`

Explanation of what the application does

Type: string Mandatory: false

description: Example PWA (Progressive Web Application) configured by `liquid-utilities/webmanifest`

MDN -- description

`dir`

Direction of text, auto, ltr (left-to-right), or rtl (right-to-left)

Type: auto | ltr | rtl Mandatory: false

dir: ltr

MDN -- dir

`display`

Preferred display mode for website; fullscreen, standalone, minimal-ui, or browser

Type: fullscreen | standalone | minimal-ui | browser Mandatory: false

display: standalone

MDN -- display

`iarc_rating_id`

Certification code from IARC (International Age Rating Coalition) for application

Type: string Mandatory: false

iarc_rating_id: e84b072d-71b3-4d3e-86ae-31a8ce4e53b7

MDN -- iarc_rating_id

https://www.globalratings.com/for-developers.aspx

`icons`

Array of dictionaries that describe image assets used by application

Type: dictionary Mandatory: true

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

MDN -- icons

`icons.filter`

Overwrite or set filter for icons scoped data

Type: filter Mandatory: false

icons:
  filter: relative_url

`icons[0].filter`

Overwrite or set filter for specific icon

Type: filter Mandatory: false

icons:
  - src: '...'
    filter: absolute_url

`icons[0].src`

Path to image file, if relative the base URL will be of the manifest file

Type: string Mandatory: true

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

`icons[0].sizes`

Space-separated string of image dimensions

Type: string Mandatory: false

icons:
  - src: '...'
    sizes: 192x192

`icons[0].type`

Media type of image which allows user agent to quickly ignore unsupported types

Type: MIME Mandatory: false

icons:
  - src: '...'
    type: image/png

MDN -- Image_types

`icons[0].purpose`

Space-separated string of hints as to image special purpose

Type: monochrome | maskable | any Mandatory: false

icons:
  - src: '...'
    purpose: monochrome

https://w3c.github.io/manifest/#purpose-member

`lang`

Specify primary language for the manifest values

Type: string Mandatory: false

lang: en-US

MDN -- lang

`name`

Name of the application

Type: string Mandatory: true

name: Liquid Utilities -- Site Web Manifest Example

MDN -- name

`orientation`

Type: string Mandatory: false

any
natural
landscape
landscape-primary
landscape-secondary
portrait
portrait-primary
portrait-secondary

orientation: any

MDN -- orientation

`prefer_related_applications`

If true the user agent might suggest installing on of the related_applications listed

Type: boolean Mandatory: false

prefer_related_applications: true

MDN -- prefer_related_applications

`protocol_handlers`

Type: dictionary[] Mandatory: false

protocol_handlers:
  filter: relative_url

  - protocol: web+jngl
    url: lookup?type%s

  - protocol: web+jnglstore
    filter: absolute_url
    url: shop?for=%s

MDN -- protocol_handlers

`protocol_handlers.filter`

Overwrite or set filter for protocol_handlers scoped data

Type: filter Mandatory: false

icons:
  filter: relative_url

`protocol_handlers[0].url`

HTTPS URL within the application scope, not %s will be replaced by the URL

Type: string Mandatory: true

protocol_handlers:
  - protocol: '...'
    url: lookup?type%s

`protocol_handlers[0].protocol`

Protocol to be handled, eg mailto, ms-word, web+jngl

Type: string Mandatory: true

protocol_handlers:
  - protocol: web+jngl
    url: '...'

`related_applications`

Array of objects of applications that are installable or accessible to platform

Type: dictionary[] Mandatory: false

related_applications:
  - platform: play
    url: https://play.google.com/store/apps/details?id=com.example.app1
    id: com.example.app1

  - platform: itunes
    url: https://itunes.apple.com/app/example-app1/id123456789

MDN -- related_applications

`related_applications[0].platform`

Platform an equivalent application may be found

chrome_web_store
play
itunes
webapp
windows

related_applications:
  - platform: play

https://github.com/w3c/manifest/wiki/Platforms

`related_applications[0].url`

URL at which the application can be found

related_applications:
  - platform: '...'
    url: https://play.google.com/store/apps/details?id=com.example.app1

`related_applications[0].id`

ID used to represent the application on the specified platform

related_applications:
  - platform: '...'
    id: com.example.app1

`scope`

Defines the navigation scope of web application context

Type: string Mandatory: false

scope: app

Note, if path is not an absolute URL then filter may be used to transmute path into a relative or absolute URL

MDN -- scope

`screenshots`

Array of dictionaries that define screenshots to showcase application

Type: dictionary[] Mandatory: false

screenshots:
  filter: relative_url

  - src: assets/images/screenshots/screenshot1.webp
    sizes: 1280x780
    type: image/webp

  - src: assets/images/screenshots/screenshot2.webp
    filter: absolute_url
    sizes: 1280x720
    type: image/webp

MDN -- screenshots

`screenshots.filter`

Overwrite or set filter for screenshots scoped data

Type: filter Mandatory: false

screenshots:
  filter: relative_url

`screenshots[0].filter`

Overwrite or set filter for specific screenshot

Type: filter Mandatory: false

screenshots:
  - src: '...'
    filter: absolute_url

`screenshots[0].src`

Path to image file

Type: string Mandatory: true

screenshots:
  - src: assets/images/screenshots/screenshot1.webp

`screenshots[0].sizes`

Image dimensions

Type: string Mandatory: false

screenshots:
  - src: '...'
    sizes: 1280x720

`screenshots[0].type`

Media type of image which allows user agent to quickly ignore unsupported types

screenshots:
  - src: '...'
    type: image/webp

`short_name`

Displayed if there is not enough space to display name

Type: string Mandatory: false

short_name: Site Web Manifest Example

MDN -- short_name

`shortcuts`

Array of dictionaries that may build context menu displayed by Operating System

Type: dictionary[] Mandatory: false

shortcuts:
  filter: absolute_url

  - name: "Today's agenda"
    filter: relative_url
    short_name: Agenda
    description: List of events planned for today
    url: today

    icons:
      filter: relative_url

      - purpose: monochrome
        sizes: 120x120
        src: assets/images/shortcuts/agenda/medium.webp
        type: image/webp

      - src: assets/images/shortcuts/agenda/small.webp
        filter: absolute_url
        sizes: 90x90
        type: image/webp

  - name: New event
    url: create/event

  - name: New reminder
    url: create/reminder

MDN -- shortcuts

`shortcuts.filter`

Overwrite or set filter for shortcuts scoped data

Type: filter Mandatory: false

shortcuts:
  filter: relative_url

`shortcuts[0].filter`

Overwrite or set filter for specific shortcut

Type: filter Mandatory: false

shortcuts:
  - name: "..."
    filter: relative_url

`shortcuts[0].name`

Displayed in context menu

Type: string Mandatory: true

shortcuts:
  - name: "Today's agenda"

`shortcuts[0].short_name`

Displayed when there is insufficient space to display name for shortcut

Type: string Mandatory: false

shortcuts:
  - name: "..."
    short_name: Agenda

`shortcuts[0].description`

Describes purpose of shortcut, may be exposed via assistive technology

Type: string Mandatory: false

shortcuts:
  - name: "..."
    description: List of events planned for today

`shortcuts[0].url`

URL within application that is opened by shortcut

Type: string Mandatory: true

shortcuts:
  - name: "..."
    url: today

`shortcuts[0].icons`

Icons that may be used in the context menu for shortcut

Type: icons Mandatory: false

`start_url`

Base URL of application that should be loaded on launch of application

Type: string Mandatory: false

start_url: /

Note, if path is not an absolute URL then filter may be used to transmute path into a relative or absolute URL

MDN -- start_url

`theme_color`

Default theme color for application, sometimes shown in task switcher

Type: string Mandatory: false

theme_color: red

MDN -- theme_color

Notes

This repository may not be feature complete and/or fully functional, Pull Requests that add features or fix bugs are certainly welcomed.

Contributing

Options for contributing to webmanifest and liquid-utilities

Forking

Start making a Fork of this repository to an account that you have write permissions for.

Add remote for fork URL. The URL syntax is [email protected]:<NAME>/<REPO>.git...

cd ~/git/hub/liquid-utilities/webmanifest

git remote add fork [email protected]:<NAME>/webmanifest.git

Commit your changes and push to your fork, eg. to fix an issue...

cd ~/git/hub/liquid-utilities/webmanifest


git commit -F- <<'EOF'
:bug: Fixes #42 Issue


**Edits**


- `<SCRIPT-NAME>` script, fixes some bug reported in issue
EOF


git push fork main

Note, the -u option may be used to set fork as the default remote, eg. git push -u fork main however, this will also default the fork remote for pulling from too! Meaning that pulling updates from origin must be done explicitly, eg. git pull origin main

Then on GitHub submit a Pull Request through the Web-UI, the URL syntax is https://github.com/<NAME>/<REPO>/pull/new/<BRANCH>

Note; to decrease the chances of your Pull Request needing modifications before being accepted, please check the dot-github repository for detailed contributing guidelines.

Sponsor

Attribution

License

Build `webmanifest` file from FrontMatter or YAML
Copyright (C) 2021 S0AndS0

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, version 3 of the License.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

For further details review full length version of AGPL-3.0 License.

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
.github		.github
LICENSE		LICENSE
webmanifest		webmanifest

Uh oh!

License

liquid-utilities/webmanifest

Folders and files

Latest commit

History

Repository files navigation

Web Manifest

Requirements

Quick Start

Your ReadMe File

Commit and Push

Usage

Example Output

API

filter

background_color

categories

description

dir

display

iarc_rating_id

icons

icons.filter

icons[0].filter

icons[0].src

icons[0].sizes

icons[0].type

icons[0].purpose

lang

name

orientation

prefer_related_applications

protocol_handlers

protocol_handlers.filter

protocol_handlers[0].url

protocol_handlers[0].protocol

related_applications

related_applications[0].platform

related_applications[0].url

related_applications[0].id

scope

screenshots

screenshots.filter

screenshots[0].filter

screenshots[0].src

screenshots[0].sizes

screenshots[0].type

short_name

shortcuts

shortcuts.filter

shortcuts[0].filter

shortcuts[0].name

shortcuts[0].short_name

shortcuts[0].description

shortcuts[0].url

shortcuts[0].icons

start_url

theme_color

Notes

Contributing

Forking

Sponsor

Attribution

License

About

Topics

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Sponsor this project

Uh oh!

Languages

`filter`

`background_color`

`categories`

`description`

`dir`

`display`

`iarc_rating_id`

`icons`

`icons.filter`

`icons[0].filter`

`icons[0].src`

`icons[0].sizes`

`icons[0].type`

`icons[0].purpose`

`lang`

`name`

`orientation`

`prefer_related_applications`

`protocol_handlers`

`protocol_handlers.filter`

`protocol_handlers[0].url`

`protocol_handlers[0].protocol`

`related_applications`

`related_applications[0].platform`

`related_applications[0].url`

`related_applications[0].id`

`scope`

`screenshots`

`screenshots.filter`

`screenshots[0].filter`

`screenshots[0].src`

`screenshots[0].sizes`

`screenshots[0].type`

`short_name`

`shortcuts`

`shortcuts.filter`

`shortcuts[0].filter`

`shortcuts[0].name`

`shortcuts[0].short_name`

`shortcuts[0].description`

`shortcuts[0].url`

`shortcuts[0].icons`

`start_url`

`theme_color`