@weh/layouts
v1.0.5
Published
reusable html layouts for weh
Downloads
1
Readme
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 <[email protected]>
License
MIT (see LICENSE document)