fabricator-assemble
Advanced tools
The assembly engine behind Fabricator
Turn this:
---
title: Document Name
name: World
---
<h1>{{home.greeting}}, {{name}}!</h1>
{{> button}}
into this:
<!doctype html>
<html lang="en">
<head>
<title>Document Name</title>
</head>
<body>
<h1>Hello, World!</h1>
<a href="#" class="button">Click me!</a>
</body>
</html>
The task returns a promise, so it can be used in an async task runner, like Gulp:
var assemble = require('fabricator-assemble');
var gulp = require('gulp');
gulp.task('assemble', function () {
return assemble(options);
});
The task accepts options, but assumes this directory structure:
└── src
├── data
│ └── *.{json,yml}
├── docs
│ └── *.md
├── materials
│ └── components
│ └── *.html
└── views
├── *.html
└── layouts
└── default.html
Default options:
{
layout: 'default',
layouts: 'src/views/layouts/*',
layoutIncludes: 'src/views/layouts/includes/*',
views: ['src/views/**/*', '!src/views/+(layouts)/**'],
materials: 'src/materials/**/*',
data: 'src/data/**/*.{json,yml}',
docs: 'src/docs/**/*.md',
helpers: {},
dest: 'dist'
}
Type: String
Default: default
Name of the default layout template.
Type: String or Array
Default: src/views/layouts/*
Files to use as layout templates.
Type: String or Array
Default: src/views/layouts/includes/*
Files to use as layout includes.
Type: String or Array
Default: ['src/views/**/*', '!src/views/+(layouts)/**']
Pages to pass through the assembler to be templated. Fabricator pages are stored at the root level views and user-defined views can be stored in subdirectories.
Type: String or Array
Default: src/materials/**/*
Files to use a partials/helpers. These are the materials that make up your toolkit. by default, Fabricator comes with "components" and "structures", but you can define your own taxonomy.
Type: String or Array
Default: src/data/**/*.{json,yml}
JSON or YAML files to use as data for views.
Type: String or Array
Default: src/docs/**/*.md
Markdown files containing toolkit-wide documentation
Type: Object
Default: {}
User-defined helpers. E.g.:
helpers: {
markdown: require('helper-markdown'),
foo: function () {
return 'bar';
}
}
Type: String
Default: dist
Destination of compiled views (where files are saved to)
Layouts are wrappers for pages. You can define as many layouts as you want by creating .html files in your layouts folder.
Example layout:
<!doctype html>
<html lang="en">
<head>
<title>{{title}}</title>
</head>
<body>
{% body %}
</body>
</html>
Page content is inserted in the {% body %} placeholder.
Context can be passed from a page to the layout via front matter.
The layout a page uses is also defined in front matter:
---
layout: custom-layout
title: My Custom Layout
---
This would use custom-layout.html.
When no layout property is defined, the page uses the default layout.
Views are unique pages templated using Handlebars. These are both Fabricator pages and user-created pages (i.e. example templates)
View example:
---
title: Document Name
name: World
---
<h1>{{home.greeting}}, {{name}}!</h1>
{{> button}}
This outputs a page that uses the default layout (since no layout was defined).
The front matter block at the top provides context to both the layout and the page itself.
Context is also piped in from data files (see below). In this example, {{home.greeting}} refers to the greeting property in home.json.
Fabricator pages are typically stored at the root level of the views directory and user-created views (e.g. "templates", "pages", "interfaces") should be stored in subdirectories.
Materials are partial templates; think of them as the materials used to build pages.
They are accessed as a "partial" using the > syntax in Handlebars:
{{> material-name}}
Any file in the glob defined in options.materials is turned into a partial/helper and can be accessed as such. For example, assume the components contains materials:
└── components
├── button.html
└── form-toggle.html
The content within these files can be accessed as such:
{{> button}}
{{> form-toggle}}
Data is defined as JSON or YAML.
The data folder can contain several .json or .yml files:
└── data
├── home.json
└── contact.yml
home.json:
{
"greeting": "Hello"
}
The data within each file can be accessed using dot notation:
{{home.greeting}}
{{contact.propName}}
Docs are just a generic way to capture toolkit documenation that's not specific to a material. This could be something like JavaScript architecture, accessibility guidelines, etc.
Docs are written in markdown and are stored in src/docs by default.
FAQs
The assembly engine behind Fabricator
The npm package fabricator-assemble receives a total of 184 weekly downloads. As such, fabricator-assemble popularity was classified as not popular.
We found that fabricator-assemble demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.