dillonkearns / elm-pages / Pages.Manifest

Represents the configuration of a web manifest file.

You pass your Pages.Manifest.Config record into the Pages.Manifest.generator in your app/Api.elm module to define a file generator that will build a manifest.json file as part of your build.

import Pages.Manifest as Manifest
import Pages.Manifest.Category

manifest : Manifest.Config
manifest =
    Manifest.init
        { name = static.siteName
        , description = "elm-pages - " ++ tagline
        , startUrl = Route.Index {} |> Route.toPath
        , icons =
            [ icon webp 192
            , icon webp 512
            , icon MimeType.Png 192
            , icon MimeType.Png 512
            ]
        }
        |> Manifest.withShortName "elm-pages"


type alias Config =
{ backgroundColor : Maybe Color
, categories : List Category
, displayMode : DisplayMode
, orientation : Orientation
, description : String
, iarcRatingId : Maybe String
, name : String
, themeColor : Maybe Color
, startUrl : UrlPath
, shortName : Maybe String
, icons : List Icon
, lang : LanguageTag
, otherFields : Dict String Json.Encode.Value 
}

Represents a web app manifest file (see above for how to use it).


type alias Icon =
{ src : Pages.Url.Url
, sizes : List ( Basics.Int
, Basics.Int )
, mimeType : Maybe MimeType.MimeImage
, purposes : List IconPurpose 
}

https://developer.mozilla.org/en-US/docs/Web/Manifest/icons

Builder options

init : { description : String, name : String, startUrl : UrlPath, icons : List Icon } -> Config

Setup a minimal Manifest.Config. You can then use the with... builder functions to set additional options.

withBackgroundColor : Color -> Config -> Config

Set https://developer.mozilla.org/en-US/docs/Web/Manifest/background_color.

withCategories : List Category -> Config -> Config

Set https://developer.mozilla.org/en-US/docs/Web/Manifest/categories.

withDisplayMode : DisplayMode -> Config -> Config

Set https://developer.mozilla.org/en-US/docs/Web/Manifest/display.

withIarcRatingId : String -> Config -> Config

Set https://developer.mozilla.org/en-US/docs/Web/Manifest/iarc_rating_id.

withLang : LanguageTag -> Config -> Config

Set https://developer.mozilla.org/en-US/docs/Web/Manifest/lang.

withOrientation : Orientation -> Config -> Config

Set https://developer.mozilla.org/en-US/docs/Web/Manifest/orientation.

withShortName : String -> Config -> Config

Set https://developer.mozilla.org/en-US/docs/Web/Manifest/short_name.

withThemeColor : Color -> Config -> Config

Set https://developer.mozilla.org/en-US/docs/Web/Manifest/theme_color.

Arbitrary Fields Escape Hatch

withField : String -> Json.Encode.Value -> Config -> Config

Escape hatch for specifying fields that aren't exposed through this module otherwise. The possible supported properties in a manifest file can change over time, so see MDN manifest.json docs for a full listing of the current supported properties.

Config options


type DisplayMode
    = Fullscreen
    | Standalone
    | MinimalUi
    | Browser

See https://developer.mozilla.org/en-US/docs/Web/Manifest/display


type Orientation
    = Any
    | Natural
    | Landscape
    | LandscapePrimary
    | LandscapeSecondary
    | Portrait
    | PortraitPrimary
    | PortraitSecondary

https://developer.mozilla.org/en-US/docs/Web/Manifest/orientation


type IconPurpose
    = IconPurposeMonochrome
    | IconPurposeMaskable
    | IconPurposeAny

https://w3c.github.io/manifest/#dfn-icon-purposes

Generating a Manifest.json

generator : String -> BackendTask FatalError Config -> ApiRoute ApiRoute.Response

A generator for Api.elm to include a manifest.json. The String argument is the canonical URL of the site.

module Api exposing (routes)

import ApiRoute
import Pages.Manifest

routes :
    BackendTask FatalError (List Route)
    -> (Maybe { indent : Int, newLines : Bool } -> Html Never -> String)
    -> List (ApiRoute.ApiRoute ApiRoute.Response)
routes getStaticRoutes htmlToString =
    [ Pages.Manifest.generator
        Site.canonicalUrl
        Manifest.config
    ]

Functions for use by the generated code (Pages.elm)

toJson : String -> Config -> Json.Encode.Value

Feel free to use this, but in 99% of cases you won't need it. The generated code will run this for you to generate your manifest.json file automatically!