Get started Eleventy Blades plugin

There are 3 ways to get started:

A. Plugin install

Plugin gives you all the features and filters in one go without interfering with the rest of your 11ty config:

npm install @anyblades/eleventy-blades

Then addPlugin to your 11ty config:

import eleventyBladesPlugin from "@anyblades/eleventy-blades";

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(eleventyBladesPlugin);
}

You can toggle features/filters like this:

eleventyConfig.addPlugin(eleventyBladesPlugin, {
  mdAutoRawTags: false,
  filters: { attr_set: false },
});

Live examples:

B. Starter projects

Eleventy Blades plugin and base package are included out-of-the-box with:

BA v4 6-in-1 Starter
Modern, lightweight Eleventy v4 multi-site starter showcasing Eleventy Blades Kit and Tailwind CLI for: [1] Tailwind CSS + Typography [2] Blades CSS [3] Bootstrap CSS [4] Pico CSS [5] Simple CSS [6] Liquid Templates.
11ty v4 Subtle
The most subtle Eleventy v4 micro-starter for content-first sites. Powered by Eleventy Blades Kit
Built-in bare-minimum examples
/anyblades/eleventy-blades/tree/main/examples

C. Base package

Base package bundles Eleventy Blades with other popular 11ty plugins, providing a ready-to-go reusable, zero-maintenance config:

npm install @anyblades/eleventy-blades-base

# Link base templates:
cd _includes/
ln -s ../node_modules/@anyblades/blades/_includes/blades

# Run Eleventy:
eleventy --config=node_modules/@anyblades/eleventy-blades-base/eleventy.config.js

Live examples:

If you don't want to type --config=... every time, symlink it once:

ln -s node_modules/@anyblades/eleventy-blades-base/eleventy.config.js
eleventy

Or save it in your package.json scripts:

  "scripts": {
    "build": "eleventy --config=node_modules/@anyblades/eleventy-blades-base/eleventy.config.js"
  }

Alternatively, import it as a base config in your 11ty config:

import baseConfig from "@anyblades/eleventy-blades-base";

export default async function (eleventyConfig) {
  await baseConfig(eleventyConfig);
}

You can toggle features/filters like this:

await baseConfig(eleventyConfig, {
  plugins: {
    "@anyblades/eleventy-blades": {
      mdAutoRawTags: false,
      filters: { attr_set: false },
    },
  },
});

Live examples:

Appendix

Default options:

  const defaultOptions = { mdAutoRawTags: false };

How it works

/anyblades/eleventy-blades/refs/heads/main/plugin.js :

import { readdirSync } from "node:fs";

export const discoverModules = (dir) =>
  Object.fromEntries(
    readdirSync(new URL(dir, import.meta.url))
      .filter((f) => f.endsWith(".js") && !f.endsWith(".test.js"))
      .map((f) => [f.replace(/\.js$/, ""), true]),
  );

export default async function (eleventyConfig, userOptions) {
  ``````js
  const defaultOptions = { mdAutoRawTags: false };
  ``````js
  const options = Object.assign(
    {},
    discoverModules("./features"),
    { filters: discoverModules("./filters") },
    defaultOptions,
    userOptions,
  );
  // console.log("[options]", defaultOptions, userOptions, options);

  /* FILTERS
   * Fallback to default list if options.filters doesn't exist
   * By using import.meta.url, Node figures out exactly where your script is installed inside their node_modules folder and targets the directory relative to that script.
   */
  const filterNames = Object.entries(options.filters).filter(([, v]) => v);
  for (const [filterName] of filterNames) {
    console.log("Loading filter: " + filterName + "...");
    try {
      if (filterName == "fetch") await import("@11ty/eleventy-fetch");
      const filterFunc = (await import("./filters/" + filterName + ".js")).default;
      eleventyConfig.addFilter(filterName, filterFunc);
    } catch (error) {
      console.log("^ N/A ^");
    }
  }

  /* FEATURES */
  delete options.filters;
  const featureNames = Object.entries(options).filter(([, v]) => v);
  for (const [featureName] of featureNames) {
    console.log("Loading feature: " + featureName + "...");
    try {
      const featureConfig = (await import("./features/" + featureName + ".js")).default;
      featureConfig(eleventyConfig);
    } catch (error) {
      console.log("^ N/A ^");
    }
  }
}