{"id":15208958,"url":"https://github.com/factorial-io/eleventy-plugin-fstack","last_synced_at":"2026-02-04T04:36:22.422Z","repository":{"id":57699813,"uuid":"495757763","full_name":"factorial-io/eleventy-plugin-fstack","owner":"factorial-io","description":"@factorial/stack for Eleventy","archived":false,"fork":false,"pushed_at":"2022-06-02T12:24:51.000Z","size":26,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-03T01:33:46.598Z","etag":null,"topics":["11ty","11ty-plugin","eleventy","eleventy-plugin","factorial","fstack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/factorial-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-24T09:36:31.000Z","updated_at":"2022-06-02T13:07:53.000Z","dependencies_parsed_at":"2022-09-26T21:10:38.916Z","dependency_job_id":null,"html_url":"https://github.com/factorial-io/eleventy-plugin-fstack","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/factorial-io%2Feleventy-plugin-fstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/factorial-io%2Feleventy-plugin-fstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/factorial-io%2Feleventy-plugin-fstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/factorial-io%2Feleventy-plugin-fstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/factorial-io","download_url":"https://codeload.github.com/factorial-io/eleventy-plugin-fstack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247262925,"owners_count":20910328,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin","factorial","fstack"],"created_at":"2024-09-28T07:05:06.489Z","updated_at":"2026-02-04T04:36:22.399Z","avatar_url":"https://github.com/factorial-io.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Eleventy](https://www.11ty.dev) + [Factorial Stack](https://github.com/factorial-io/fstack)\n\n\u003cp style=\"font-size: 2rem\"\u003e\n\u003cimg \n  style=\"margin:2rem; width:8rem; height:8rem;\" \n  align=\"center\" \n  width=\"128\" \n  height=\"128\"\n  alt=\"11ty Logo\"\n  src=\"https://camo.githubusercontent.com/124e337fb005b0e70eb3758b431b051eaf5419b3a709062fbcce6d661a6ea116/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667\"\u003e+\n\u003cimg \n  style=\"margin:2rem; width:5.6rem; height:8rem;\" \n  align=\"center\" \n  width=\"91\" \n  height=\"128\"\n  alt=\"Factorial Logo\"\n  src=\"https://logo.factorial.io/color.png\"\u003e\n\u003c/p\u003e\n\nThis 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.\n\n## Getting Started\n\nClone the latest release into a separate folder in your existing eleventy installation and install via `yarn`:\n\n```sh\nmkdir plugins \u0026\u0026 cd plugins\ngit clone https://source.factorial.io/factorial/eleventy-plugin-fstack.git\ncd eleventy-plugin-fstack \u0026\u0026 yarn install --frozen-lockfile\n```\n\nThen 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.\n\nPlease also add `@factorial/stack-core` and all necessary packages to your project dependencies via `yarn`:\n\n```sh\nyarn add @factorial/stack-core @factorial/stack-css ...\n```\n\n## Usage\n\n### Config @factorial/fstack\n\nFirst define a `.factorialrc.js` in your projects root folder. For details please check the [`@factorial/fstack` repository](https://github.com/factorial-io/fstack).\n\n**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`.\n\n### Config eleventy-plugin-fstack\n\nFor Eleventy to recognize this you have to **register this as a plugin**. To do so modify the `.eleventy.js` config file:\n\n```js\nconst fstack = require(\"@factorial/eleventy-plugin-fstack\");\n\nmodule.exports = function(eleventyConfig) {\n  ...\n  eleventyConfig.addPlugin(fstack, USER_OPTIONS);\n  ...\n  return {\n    dir: {\n      input: USER_OPTIONS.dir.input,\n      output: USER_OPTIONS.dir.output,\n      includes: getIncludesFolderFromNamespaces(\n        USER_OPTIONS.dir.input,\n        USER_OPTIONS.twig.namespaces\n      ),\n      layouts: path.relative(\n        path.join(process.cwd(), USER_OPTIONS.dir.input),\n        path.join(__dirname, USER_OPTIONS.dir.layouts)\n      ),\n    },\n  };\n}\n```\n\nIf you use the [@factorial/eleventy-plugin-twig](https://github.com/factorial-io/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:\n\n```js\n/**\n * Uses the namespaces provided for twig to generate\n * a proper glob for eleventies include folder\n *\n * @param {USER_OPTIONS[\"dir\"][\"input\"]} input\n * @param {USER_OPTIONS[\"twig\"][\"namespaces\"]} namespaces\n * @returns {string}\n */\nconst getIncludesFolderFromNamespaces = (input, namespaces) =\u003e {\n  return Object.keys(namespaces).reduce((acc, curr, index, arr) =\u003e {\n    acc += path.relative(\n      path.join(process.cwd(), input),\n      path.join(__dirname, namespaces[curr])\n    );\n    if (index + 1 === arr.length) {\n      acc += \"}\";\n    } else {\n      acc += \", \";\n    }\n    return acc;\n  }, \"{\");\n};\n```\n\nAs mentioned in the `eleventyConfig.addPlugin(fstack, USER_OPTIONS)` you have to define some directories. Currently `@factorial/eleventy-plugin-fstack` provides the following configuration object:\n\n```js\n/**\n * @typedef {object} ELEVENTY_DIRECTORIES\n * @property {string} input\n * @property {string} output\n * @property {string} [includes]\n * @property {string} [layouts]\n * @property {string} [watch]\n */\n\n/**\n * @typedef {object} ASSETS\n * @property {string} base\n * @property {string} css\n * @property {string} js\n */\n\n/**\n * @typedef {object} USER_OPTIONS\n * @property {string} mixManifest,\n * @property {ASSETS} [assets]\n * @property {ELEVENTY_DIRECTORIES} dir\n * @property {import(\"@factorial/eleventy-plugin-twig\").TWIG_OPTIONS} [twig] // just if u use @factorial/eleventy-plugin/twig\n */\n```\n\nYou could use this as a starting point and customize to your individual needs:\n\n```js\n/**\n * Default userOptions for eleventy\n *\n * @type {USER_OPTIONS} USER_OPTIONS\n */\nconst USER_OPTIONS = {\n  twig: {\n    shortcodes: [],\n    namespaces: {\n      elements: \"src/include/elements\",\n      patterns: \"src/include/patterns\",\n      \"template-components\": \"src/include/template-components\",\n      templates: \"src/include/templates\",\n    },\n  },\n  mixManifest: \"mix-manifest.json\",\n  assets: {\n    base: \"assets\",\n    css: \"css\",\n    js: \"js\",\n  },\n  dir: {\n    input: \"src/include/templates\",\n    output: \"build\",\n    layouts: \"src/layouts\",\n    watch: \"src/**/*.{css,js,twig}\",\n  },\n};\n```\n\n## Acknowledgements\n\nThis **Eleventy + Factorial Stack** plugin uses open source software and would not have been possible without the excellent work of the [Eslint](https://babeljs.io/team), [Eleventy](https://www.11ty.dev/docs/credits/), [Prettier](https://unifiedjs.com/community/member/), [debug](https://github.com/debug-js/debug) and [@factorial/fstack](https://github.com/factorial-io/fstack) teams! Thanks a lot!\n\n## Sponsored by\n\n\u003ca href=\"https://factorial.io\"\u003e\u003cimg src=\"https://logo.factorial.io/color.png\" width=\"40\" height=\"56\" alt=\"Factorial\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffactorial-io%2Feleventy-plugin-fstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffactorial-io%2Feleventy-plugin-fstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffactorial-io%2Feleventy-plugin-fstack/lists"}