eleventy-plugin-unified

Eleventy Plugin Unified

Use the unified ecosystem in Eleventy.

You can render and transform:

• markdown with the remark ecosystem.
• html with the rehype ecosystem.

retext is not yet supported, raise an issue if you'd like this.

Install

npm install eleventy-plugin-unified

// .eleventy.config.cjs
const EleventyUnifiedPlugin = require("eleventy-plugin-unified");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyUnifiedPlugin, [
    "remark-slug", // Add [id] attributes to headings.
  ]);
};

Full example

npm install eleventy-plugin-unified remark-slug rehype-format unist-util-visit

// .eleventy.config.cjs
const EleventyUnifiedPlugin = require("eleventy-plugin-unified");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyUnifiedPlugin, {
    transformsDirectory: "./plugins/",
    markdownTransforms: ["aria-current-links.js", "remark-slug"],
    htmlTransforms: [["rehype-format", { indent: "\t" }]],
  });
};

// ./plugins/aria-current-links.js
import { join } from "node:path";
import { visit } from "unist-util-visit";

// If the link matches the current page set 'aria-current' to true
export default function ariaCurrentLinks() {
  const {
    pageContext: { page },
  } = this.data();
  return (tree) => {
    visit(tree, ["link", "linkReference"], (node) => {
      const url = node?.url;
      if (url && join(page.filePathStem) !== join(url)) {
        return;
      }
      node.data = {
        ...node.data,
        hProperties: {
          ...node.data.hProperties,
          "aria-current": "true",
        },
      };
    });
  };
}

Configuring markdown transforms (remark plugins)

// .eleventy.config.cjs
const EleventyUnifiedPlugin = require("eleventy-plugin-unified");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyUnifiedPlugin, [
    markdownTransforms: [
        'remark-emoji'
    ]
  ]);
};

Configuring html transforms (rehype plugins)

// .eleventy.config.cjs
const EleventyUnifiedPlugin = require("eleventy-plugin-unified");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyUnifiedPlugin, [
    htmlTransforms: [
        'rehype-format'
    ]
  ]);
};

Configuring options for a plugin

// .eleventy.config.cjs
const EleventyUnifiedPlugin = require("eleventy-plugin-unified");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyUnifiedPlugin, [
    htmlTransforms: [
        ["rehype-format", { indent: "\t" }]
    ],
  ]);
};

Configuring internal plugins

// .eleventy.config.cjs
const EleventyUnifiedPlugin = require("eleventy-plugin-unified");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyUnifiedPlugin, [
    markdownTransforms: [
        "./plugins/responsive-tables.js"
    ],
  ]);
};

or

// .eleventy.config.cjs
const EleventyUnifiedPlugin = require("eleventy-plugin-unified");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyUnifiedPlugin, [
    transformsDirectory: "./plugins",
    markdownTransforms: [
        "responsive-tables.js"
    ],
  ]);
};

Getting access to page context and eleventy config

npm install eleventy-plugin-unified unist-util-visit

// .eleventy.config.cjs
const EleventyUnifiedPlugin = require("eleventy-plugin-unified");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyUnifiedPlugin, {
    transformsDirectory: "./plugins/",
    markdownTransforms: ["log-data.js"],
  });
};

// ./plugins/log-data.js

export default function logData() {
  const { pageContext, eleventyConfig } = this.data();
  console.log({ pageContext, eleventyConfig });
}

Acknowledgements

Inspired by florianeckerstorfer/eleventy-plugin-remark