@factorial/eleventy-plugin-fstack
v0.1.0
Published
@factorial/stack out of the box config for eleventy
Downloads
1
Readme
Eleventy + Factorial Stack
This package adds a simple build task to the Eleventy build pipeline via eleventy.before
. Furthermore it cleans the build folder before every build due to the fact, that caching is currently not available within our @factorial-io/eleventy-plugin-twig
templating plugin.
Getting Started
Clone the latest release into a separate folder in your existing eleventy installation and install via yarn
:
mkdir plugins && cd plugins
git clone https://source.factorial.io/factorial/eleventy-plugin-fstack.git
cd eleventy-plugin-fstack && yarn install --frozen-lockfile
Then use yarn link
inside the eleventy-plugin-fstack
folder to generate a package link and attach that to your eleventy installation from inside your eleventy folder with yarn link "@factorial/eleventy-plugin-fstack"
. Now you can require("@factorial/eleventy-plugin-fstack")
like below.
Please also add @factorial/stack-core
and all necessary packages to your project dependencies via yarn
:
yarn add @factorial/stack-core @factorial/stack-css ...
Usage
Config @factorial/fstack
First define a .factorialrc.js
in your projects root folder. For details please check the @factorial/fstack
repository.
Note: eleventy-plugin-fstack
requires @factorial/stack
to generate hashed css
and js
files. Please do not forget to set the addHashes: true
option in .factorialrc.js
.
Config eleventy-plugin-fstack
For Eleventy to recognize this you have to register this as a plugin. To do so modify the .eleventy.js
config file:
const fstack = require("@factorial/eleventy-plugin-fstack");
module.exports = function(eleventyConfig) {
...
eleventyConfig.addPlugin(fstack, USER_OPTIONS);
...
return {
dir: {
input: USER_OPTIONS.dir.input,
output: USER_OPTIONS.dir.output,
includes: getIncludesFolderFromNamespaces(
USER_OPTIONS.dir.input,
USER_OPTIONS.twig.namespaces
),
layouts: path.relative(
path.join(process.cwd(), USER_OPTIONS.dir.input),
path.join(__dirname, USER_OPTIONS.dir.layouts)
),
},
};
}
If you use the @factorial/eleventy-plugin-twig plugin you could utilize the TWIG_OPTIONS.namespaces
here as well and use getIncludesFolderFromNamespaces(input, namespaces)
. This method you could copy from here:
/**
* Uses the namespaces provided for twig to generate
* a proper glob for eleventies include folder
*
* @param {USER_OPTIONS["dir"]["input"]} input
* @param {USER_OPTIONS["twig"]["namespaces"]} namespaces
* @returns {string}
*/
const getIncludesFolderFromNamespaces = (input, namespaces) => {
return Object.keys(namespaces).reduce((acc, curr, index, arr) => {
acc += path.relative(
path.join(process.cwd(), input),
path.join(__dirname, namespaces[curr])
);
if (index + 1 === arr.length) {
acc += "}";
} else {
acc += ", ";
}
return acc;
}, "{");
};
As mentioned in the eleventyConfig.addPlugin(fstack, USER_OPTIONS)
you have to define some directories. Currently @factorial/eleventy-plugin-fstack
provides the following configuration object:
/**
* @typedef {object} ELEVENTY_DIRECTORIES
* @property {string} input
* @property {string} output
* @property {string} [includes]
* @property {string} [layouts]
* @property {string} [watch]
*/
/**
* @typedef {object} ASSETS
* @property {string} base
* @property {string} css
* @property {string} js
*/
/**
* @typedef {object} USER_OPTIONS
* @property {string} mixManifest,
* @property {ASSETS} [assets]
* @property {ELEVENTY_DIRECTORIES} dir
* @property {import("@factorial/eleventy-plugin-twig").TWIG_OPTIONS} [twig] // just if u use @factorial/eleventy-plugin/twig
*/
You could use this as a starting point and customize to your individual needs:
/**
* Default userOptions for eleventy
*
* @type {USER_OPTIONS} USER_OPTIONS
*/
const USER_OPTIONS = {
twig: {
shortcodes: [],
namespaces: {
elements: "src/include/elements",
patterns: "src/include/patterns",
"template-components": "src/include/template-components",
templates: "src/include/templates",
},
},
mixManifest: "mix-manifest.json",
assets: {
base: "assets",
css: "css",
js: "js",
},
dir: {
input: "src/include/templates",
output: "build",
layouts: "src/layouts",
watch: "src/**/*.{css,js,twig}",
},
};
Acknowledgements
This Eleventy + Factorial Stack plugin uses open source software and would not have been possible without the excellent work of the Eslint, Eleventy, Prettier, debug and @factorial/fstack teams! Thanks a lot!