This is a basic extensible Pug layout.
$ npm install pug-base-layout
In your Pug layout:
extend <node_modules_path>/pug-base-layout/index
There are some blocks you can inherit/extend to customize the layout to your needs.
This block defines all config properties. Append to it in your derived layout to override certain properties.
Override this block to add your own local variables.
Override this block to add more meta tags to the <head>
tag.
Override this block to add additional styles (i.e. <link/>
) to the <head>
tag.
Override this block to add additional scripts (i.e. <script/>
) to the end of the <body>
tag.
Override this block to add content to the <body>
tag.
All configurable variables are in the config
block:
// Indicates whether NODE_ENV is `development`
// @type {boolean}
$debug = process.env.NODE_ENV === `development`
// Override this to set the name of the entire app. This is used for mobile
// devices and OpenGraph. Note that this is not the same as `$title`.
// @type {string}
// @required
$appName = `UNTITLED`
// Override this to set the title of the page (this is not the same as
// `$appName`).
// @type {string}
// @required
$title = `UNTITLED`
// URL of this app, used for OpenGraph.
// @type {string}
// @optional
$url = undefined
// Content of the `viewport` meta tag. If evaluates to `false`, the meta tag
// will not be included.
// @type {string}
// @optional
$viewport = `width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover`
// Content of the `viewport` meta tag. If evaluates to `false`, the meta tag
// will not be included.
// @type {string}
// @optional
$description = undefined
// Content of the `viewport` meta tag. If evaluates to `false`, the meta tag
// will not be included.
// @type {string}
// @optional
$keywords = undefined
// Google Analytics ID (i.e. UA-XXXXXXXX-1).
// @type {string}
// @optional
$analytics = undefined
// Typekit ID (i.e. abc1def).
// @type {string}
// @optional
$typekit = undefined
// List of body classes.
// @type {string[]}
// @optional
$bodyClass = undefined
// Function to load manifest files. By default it just returns the passed in
// path prefixed with `/`.
// @type {Function}
// @optional
$manifestPath = (path) => `/${path}`
This layout handles all the essential meta tags for you. Use this H5BP favicon and app icon template to generate your manifest files. This layout assumes you have the following files somewhere (you can configure the path):
favicon.png
og-image.png
manifest.json
apple-touch-icon-180x180-precomposed.png
apple-touch-icon-152x152-precomposed.png
apple-touch-icon-144x144-precomposed.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-60x60-precomposed.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-precomposed.png
apple-touch-icon-144x144-precomposed.png
browserconfig.xml
This software is released under the MIT License.