DEPRECATED! ALL OFFICIAL PLUGINS NOW LIVE IN CORE

@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
})

Development

To work on this repository, clone it and install the npm dependencies:

git clone https://github.com/wehjs/layouts
cd layouts
npm install

There are a couple of npm scripts provided for convenience:

• npm test - runs linters and ava in ci mode
• npm run lint - runs linters
• npm run ava - only runs ava once
• npm run ava:ci - runs ava in ci mode (generates coverage data)
• npm run ava:watch - runs ava in watch mode
• npm run coverage - generates coverage data
• npm run update-coc - pulls the latest weallbehave code of conduct
• npm run deploy - publishes npm package using np

Maintainers

• Olivia Hugger <olivia@fastmail.com>

Code of Conduct

This repository operates under the weallbehave Code of Conduct. Its contents can be found in CODE_OF_CONDUCT.md.

License

MIT (see LICENSE document)