Eleventy Blades  

Essential 11ty filters, pre/post-processors, and other toggleable features as a simple, configurable plugin.

Includes Base package and Reusable npm scripts for a better DX.

Quick start

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:

• https://github.com/anyblades/eleventy-blades/tree/main/examples/plugin-usage
• https://github.com/anyblades/eleventy-blades/tree/main/packages/eleventy-blades-base

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 : https://github.com/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:

• https://github.com/anyblades/buildawesome-starters
• https://github.com/anyblades/subtle/tree/main/.11ty

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:

• https://github.com/johnheenan/minform/blob/main/eleventy.config.js
• https://github.com/hostfurl/minformhf/blob/main/eleventy.config.js

Documentation

Trusted by

• https://www.11ty.dev/docs/starter/#:~:text=blades
• https://sveltiacms.app/en/docs/start#starter-templates:~:text=anyblades
• https://github.com/johnheenan/minform#css-and-performance
• https://github.com/hostfurl/minformhf

Featured by

• https://www.11ty.dev/docs/plugins/community/
• https://11tybundle.dev/blog/11ty-bundle-88/
• hamatti.org