@weh/layouts

reusable html layouts for weh

Features

• Powerful templating system
• Templates are just JavaScript functions!
• Ability to perform templating on a subset of files

Installation

# you will need frontmatter support:
npm install @weh/matter
npm install @weh/layouts

Usage example

const weh = require('@weh/weh')
const matter = require('@weh/matter')
const plugin = require('@weh/layouts')

// a layout is just a js function that returns a string of
// html! it takes the current file and also the total set
// of files
const layout = (file, files) =>
`
<h1>
  ${file.contents}
</h1>
`

// enter our main function:
// the main function should be an async function so that
// it automatically returns a promise
weh(async site => {
  // first we need frontmatter support
  site.use(matter)
  // and now we can initialize layouts
  // (the `layouts` options key takes an object of layouts)
  site.use(layouts, { layouts: { layout } })
  // ...and initiate the build process
  return site
})

Filters

By default, layouts only operates on HTML files (files that end with .html). This can be changed easily by using a custom filter. A filter is a function that takes a file and returns a boolean that describes whether that file should have layouts enabled or not. A custom filter can look like this:

function myCustomFilter (file, options, files) {
  return file.path.endsWith('.md')
}

This filter only matches for Markdown files. If you wanted to match on multiple file extensions at the same time, you could do something like this:

const fileExtension = file => file.path.split('.').pop()

function myOtherCustomFilter (file, options, files) {
  return ['md', 'html'].some(e => fileExtension(file) === e)
}

To use the filter, just pass it into the plugin options:

weh(async site => {
  site.use(matter)
  site.use(layouts, {layouts: {...}, filter: myCustomFilter})
  return site
})

Maintainers

• Olivia Hugger <[e-mail]>

License

MIT (see LICENSE document)