pug-base-layout

Base customizable Pug layout


Keywords
pug, layout, template
License
MIT
Install
npm install pug-base-layout@0.2.0

Documentation

pug-base-layout

This is a basic extensible Pug layout.

Usage

$ npm install pug-base-layout

In your Pug layout:

extend <node_modules_path>/pug-base-layout/index

Blocks

There are some blocks you can inherit/extend to customize the layout to your needs.

block config

This block defines all config properties. Append to it in your derived layout to override certain properties.

block vars

Override this block to add your own local variables.

block meta

Override this block to add more meta tags to the <head> tag.

block styles

Override this block to add additional styles (i.e. <link/>) to the <head> tag.

block scripts

Override this block to add additional scripts (i.e. <script/>) to the end of the <body> tag.

block body

Override this block to add content to the <body> tag.

Configurations

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

Meta Tags and Manifest Files

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

License

This software is released under the MIT License.