[SOLVED] Is it possible to use Site Variables in `manifest.json`?

support
1

I’ve created a Progressive Web App for Indiego blog starter kit at pwa.indiego.org.uk

I found this thread on Offline service workers with Hugo; was wondering if there is a way to use the Site Variables to generate a manifest.json file?

2

Yes? No? Maybe? What do you mean? :slight_smile:

Do you mean can you use Site Variables in a template to produce a custom output format for manifest.json? If so, yes you can.

3

Sorry, v tired :sleeping: and not very clear!

Do you mean can you use Site Variables in a template to produce a custom output format for manifest.json ? If so, yes you can.

Exactly what I meant! I did read about it before, couldn’t remember what it was called. Thank you! :slightly_smiling_face:

4

I would love to see an example. Do you have a working version? I plan to do exactly the same but not before the weekend. :wink:

1 Like
5

Not yet! From a brief scan of the docs, it should be pretty straightforward (famous last words…)

6

In case this is of help to others, I set this up to be able to reference images in the assets/ folder.

I ended up adding a custom output format in my site config like this:

[outputFormats]
  [outputFormats.manifest]
    name = "manifest"
    baseName = "manifest"
    mediaType = "application/json"
    notAlternative = "true"
    permalinkable = "true"

And setup a new layout - layouts/_default/manifest.manifest.json:

{
    "name": "Site Name",
    "short_name": "Shortname",
    "icons": [
        {
            "src": "\{{ (resources.Get "images/favicons/android-icon-36x36.png" | fingerprint).RelPermalink }}",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Then I created content/manifest.md

+++
outputs = "manifest"
layout = "manifest"
exclude_from_sitemap = true
+++

And link in my header with <link rel="manifest" href="/manifest.json">

It would be ideal if it was possible to template this without having to clutter my content directory with manifest.md but that seems to be the only way for this to work.

1 Like
7

You could probably also use resources.ExecuteAsTemplate to create this manifest file.

1 Like
8

You don’t need manifest.md.
put it to the outputs

[outputs]
    home                  = [ "HTML",  "MANIFEST", "SITEMAP"]

and name it home.manifest.json
This works for me.

You should not set permalinkable = "true" for this.

1 Like
9

@bep thanks, that’s exactly the functionality I was looking for earlier!

@ju52 thank you! I wasn’t aware of how to make that work - great to know!

10

Hi, I came up with this need, scratch my head quite a while until I found your solution. Thanks @shedd @ju52. It turns out I didn’t need ExecuteAsTemplate.

So I added these in my theme (works on the local site as well), these are the templates that iterate over files in the /static folder to find favicons
layouts/_default/home.manifest.json
layouts/_default/home.browserconfig.xml

And added this in my config.toml file :

[outputFormats]
    [outputFormats.manifest]
        name = "manifest"
        baseName = "manifest"
        mediaType = "application/json"
        notAlternative = "true"
    [outputFormats.browserconfig]
        name = "browserconfig"
        baseName = "browserconfig"
        mediaType = "application/xml"
        notAlternative = "true"

[outputs]
    home = [ "HTML", "RSS", "MANIFEST", "BROWSERCONFIG"]