@anyblades/eleventy-blades 0.28.0-beta.2

package/src/filters/section.test.js

@@ -0,0 +1,174 @@
+import { describe, it } from "node:test";
+import assert from "node:assert";
+import { section } from "./section.js";
+
+describe("section", () => {
+  it("should extract a single named section", () => {
+    const content = `Before
+<!--section:intro-->
+This is the intro
+<!--section:main-->
+This is the main`;
+
+    const result = section(content, "intro");
+    assert.strictEqual(result, "\nThis is the intro\n");
+  });
+
+  it("should extract section up to the next section marker", () => {
+    const content = `<!--section:first-->
+First content
+<!--section:second-->
+Second content
+<!--section:third-->
+Third content`;
+
+    const result = section(content, "second");
+    assert.strictEqual(result, "\nSecond content\n");
+  });
+
+  it("should extract section up to EOF when no next marker", () => {
+    const content = `<!--section:intro-->
+Intro content
+<!--section:main-->
+Main content that goes to the end`;
+
+    const result = section(content, "main");
+    assert.strictEqual(result, "\nMain content that goes to the end");
+  });
+
+  it("should handle section with multiple names", () => {
+    const content = `<!--section:header,nav-->
+Shared content
+<!--section:main-->
+Main content`;
+
+    const resultHeader = section(content, "header");
+    const resultNav = section(content, "nav");
+
+    assert.strictEqual(resultHeader, "\nShared content\n");
+    assert.strictEqual(resultNav, "\nShared content\n");
+  });
+
+  it("should handle section with multiple names (spaces around commas)", () => {
+    const content = `<!--section:header, nav , top-->
+Shared content
+<!--section:main-->
+Main content`;
+
+    const resultHeader = section(content, "header");
+    const resultNav = section(content, "nav");
+    const resultTop = section(content, "top");
+
+    assert.strictEqual(resultHeader, "\nShared content\n");
+    assert.strictEqual(resultNav, "\nShared content\n");
+    assert.strictEqual(resultTop, "\nShared content\n");
+  });
+
+  it("should return empty string for non-existent section", () => {
+    const content = `<!--section:intro-->
+Content here
+<!--section:main-->
+More content`;
+
+    const result = section(content, "footer");
+    assert.strictEqual(result, "");
+  });
+
+  it("should handle empty or null input", () => {
+    assert.strictEqual(section("", "test"), "");
+    assert.strictEqual(section(null, "test"), null);
+    assert.strictEqual(section(undefined, "test"), undefined);
+  });
+
+  it("should handle missing section name", () => {
+    const content = `<!--section:intro-->Content`;
+
+    assert.strictEqual(section(content, ""), "");
+    assert.strictEqual(section(content, null), "");
+    assert.strictEqual(section(content, undefined), "");
+  });
+
+  it("should be case-insensitive for section names", () => {
+    const content = `<!--section:INTRO-->
+Content here
+<!--section:Main-->
+More content`;
+
+    const result1 = section(content, "intro");
+    const result2 = section(content, "INTRO");
+    const result3 = section(content, "main");
+    const result4 = section(content, "MAIN");
+
+    assert.strictEqual(result1, "\nContent here\n");
+    assert.strictEqual(result2, "\nContent here\n");
+    assert.strictEqual(result3, "\nMore content");
+    assert.strictEqual(result4, "\nMore content");
+  });
+
+  it("should handle multiple sections with the same name", () => {
+    const content = `<!--section:note-->
+First note
+<!--section:main-->
+Main content
+<!--section:note-->
+Second note
+<!--section:footer-->
+Footer`;
+
+    const result = section(content, "note");
+    assert.strictEqual(result, "\nFirst note\n\nSecond note\n");
+  });
+
+  it("should handle sections with no content", () => {
+    const content = `<!--section:empty--><!--section:main-->
+Main content`;
+
+    const result = section(content, "empty");
+    assert.strictEqual(result, "");
+  });
+
+  it("should handle content before first section", () => {
+    const content = `Some preamble
+<!--section:intro-->
+Intro content`;
+
+    const result = section(content, "intro");
+    assert.strictEqual(result, "\nIntro content");
+  });
+
+  it("should handle complex real-world example", () => {
+    const content = `# Document Title
+
+<!--section:summary,abstract-->
+This is a summary that can be used as an abstract.
+<!--section:introduction-->
+This is the introduction.
+<!--section:methods-->
+These are the methods.
+<!--section:conclusion,summary-->
+This is the conclusion and also part of summary.`;
+
+    const summary = section(content, "summary");
+    const introduction = section(content, "introduction");
+    const methods = section(content, "methods");
+    const conclusion = section(content, "conclusion");
+
+    assert.strictEqual(
+      summary,
+      "\nThis is a summary that can be used as an abstract.\n\nThis is the conclusion and also part of summary.",
+    );
+    assert.strictEqual(introduction, "\nThis is the introduction.\n");
+    assert.strictEqual(methods, "\nThese are the methods.\n");
+    assert.strictEqual(conclusion, "\nThis is the conclusion and also part of summary.");
+  });
+
+  it("should handle section markers with extra whitespace", () => {
+    const content = `<!--section: intro -->
+Content
+<!--section: main -->
+More`;
+
+    const result = section(content, "intro");
+    assert.strictEqual(result, "\nContent\n");
+  });
+});

package/src/filters/strip_tag.js

@@ -0,0 +1,83 @@
+// <!--section:code-->```js
+/**
+ * Strip a specified HTML element from provided HTML, keeping its inner content
+ *
+ * @param {string} html - The HTML content to process
+ * @param {string} tagName - The tag name to strip (opening/closing tags removed, inner content kept)
+ * @returns {string} The HTML with the specified tag stripped but its inner content preserved
+ */
+export function stripTag(html, tagName) {
+  if (!html || typeof html !== "string") {
+    return html;
+  }
+
+  if (typeof tagName !== "string" || !tagName) {
+    return html;
+  }
+
+  // Escape special regex characters in tag name
+  const escapedTag = tagName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+  // Remove opening tags (with optional attributes): <tag> or <tag attr="val">
+  const openingRegex = new RegExp(`<${escapedTag}(?:\\s[^>]*)?>`, "gi");
+  let result = html.replace(openingRegex, "");
+
+  // Remove closing tags: </tag>
+  const closingRegex = new RegExp(`<\\/${escapedTag}>`, "gi");
+  result = result.replace(closingRegex, "");
+
+  return result;
+}
+
+/**
+ * strip_tag filter - Strip a specified HTML element, keeping its inner content
+ *
+ * Usage in templates:
+ *   {{ htmlContent | strip_tag('div') }}
+ *
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function stripTagFilter(eleventyConfig) {
+  eleventyConfig.addFilter("strip_tag", stripTag);
+}
+/*```
+
+<!--section:docs-->
+### `strip_tag`
+
+A filter that strips a specified HTML element from content while keeping its inner content intact. Only the opening and closing tags are removed; everything inside the tag is preserved in place.
+
+**Why use this?** When rendering HTML from a CMS or external source you sometimes need to unwrap a specific element (e.g. remove a wrapping `<div>` or `<section>`) without losing the content it contains. Unlike `remove_tag`, which discards the entire element and its content, `strip_tag` surgically removes only the tags themselves.
+
+**Features:**
+
+- Removes only the opening and closing tags — inner content is preserved
+- Handles tags with any attributes
+- Strips all occurrences of the tag, including nested ones
+- Case-insensitive matching
+- Non-destructive: Returns a new string, leaves the original unchanged
+
+#### Example: Unwrap a wrapping `<div>` from content
+
+```jinja2
+{% set unwrapped = htmlContent | strip_tag('div') %}
+
+{{ unwrapped | safe }}
+```
+
+Input:
+
+```html
+<div class="wrapper">
+  <p>Hello</p>
+  <p>World</p>
+</div>
+```
+
+Output:
+
+```html
+<p>Hello</p>
+<p>World</p>
+```
+<!--section--> */

package/src/filters/strip_tag.test.js

@@ -0,0 +1,74 @@
+import { describe, it } from "node:test";
+import assert from "node:assert";
+import { stripTag } from "./strip_tag.js";
+
+describe("stripTag", () => {
+  it("should strip a tag but keep its inner content", () => {
+    const html = "<div><p>Keep this</p></div>";
+    const result = stripTag(html, "div");
+
+    assert.strictEqual(result, "<p>Keep this</p>");
+  });
+
+  it("should strip multiple instances of the same tag", () => {
+    const html = "<div>First</div><p>Middle</p><div>Second</div>";
+    const result = stripTag(html, "div");
+
+    assert.strictEqual(result, "First<p>Middle</p>Second");
+  });
+
+  it("should handle tags with attributes", () => {
+    const html = '<div class="wrapper" id="main">Content</div>';
+    const result = stripTag(html, "div");
+
+    assert.strictEqual(result, "Content");
+  });
+
+  it("should only strip the specified tag, leaving others intact", () => {
+    const html = "<div><span>Keep span</span><em>Keep em</em></div>";
+    const result = stripTag(html, "div");
+
+    assert.strictEqual(result, "<span>Keep span</span><em>Keep em</em>");
+  });
+
+  it("should handle nested content with the same tag", () => {
+    const html = "<div>outer <div>inner</div> text</div>";
+    const result = stripTag(html, "div");
+
+    assert.strictEqual(result, "outer inner text");
+  });
+
+  it("should return original HTML if tag does not exist", () => {
+    const html = "<p>Some text</p>";
+    const result = stripTag(html, "div");
+
+    assert.strictEqual(result, html);
+  });
+
+  it("should handle empty or null input", () => {
+    assert.strictEqual(stripTag("", "div"), "");
+    assert.strictEqual(stripTag(null, "div"), null);
+    assert.strictEqual(stripTag(undefined, "div"), undefined);
+  });
+
+  it("should handle missing or invalid tagName", () => {
+    const html = "<div>Content</div>";
+    assert.strictEqual(stripTag(html, ""), html);
+    assert.strictEqual(stripTag(html, null), html);
+    assert.strictEqual(stripTag(html, undefined), html);
+  });
+
+  it("should be case-insensitive", () => {
+    const html = '<DIV class="foo">Content</DIV>';
+    const result = stripTag(html, "div");
+
+    assert.strictEqual(result, "Content");
+  });
+
+  it("should preserve whitespace and newlines inside the tag", () => {
+    const html = "<div>\n  <p>Line 1</p>\n  <p>Line 2</p>\n</div>";
+    const result = stripTag(html, "div");
+
+    assert.strictEqual(result, "\n  <p>Line 1</p>\n  <p>Line 2</p>\n");
+  });
+});

package/src/filters/unindent.js

@@ -0,0 +1,35 @@
+// <!--section:code-->```js
+/**
+ * Remove the minimal common indentation from a multi-line string
+ *
+ * Finds the smallest leading-whitespace count across all non-empty lines
+ * and strips that many characters from the beginning of every line.
+ *
+ * @param {string} content - The input string
+ * @returns {string} The unindented string
+ */
+export function unindent(content) {
+  const lines = String(content ?? "").split("\n");
+  const minIndent = Math.min(...lines.filter((l) => l.trim()).map((l) => l.match(/^(\s*)/)[1].length));
+  return lines.map((l) => l.slice(minIndent)).join("\n");
+}
+
+/**
+ * unindent filter - Remove minimal common indentation
+ *
+ * Strips the smallest leading-whitespace indent shared by all non-empty
+ * lines, useful for dedenting captured or indented template blocks.
+ *
+ * Usage in templates:
+ *   {{ content | unindent }}
+ *
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function unindentFilter(eleventyConfig) {
+  eleventyConfig.addFilter("unindent", unindent);
+}
+/*```
+
+<!--section:docs-->
+### `unindent`
+<!--section--> */

package/src/filters/unindent.test.js

@@ -0,0 +1,49 @@
+import { test } from "node:test";
+import assert from "node:assert";
+import { unindent } from "./unindent.js";
+
+test("unindent - removes common leading spaces", () => {
+  const input = "    hello\n    world";
+  assert.strictEqual(unindent(input), "hello\nworld");
+});
+
+test("unindent - removes common leading tabs", () => {
+  const input = "\tfoo\n\tbar";
+  assert.strictEqual(unindent(input), "foo\nbar");
+});
+
+test("unindent - preserves relative indentation", () => {
+  const input = "    if true\n      inner\n    end";
+  assert.strictEqual(unindent(input), "if true\n  inner\nend");
+});
+
+test("unindent - ignores blank lines when computing min indent", () => {
+  const input = "    line1\n\n    line2";
+  assert.strictEqual(unindent(input), "line1\n\nline2");
+});
+
+test("unindent - does nothing when already at zero indent", () => {
+  const input = "hello\nworld";
+  assert.strictEqual(unindent(input), "hello\nworld");
+});
+
+test("unindent - handles single line", () => {
+  assert.strictEqual(unindent("  hello"), "hello");
+});
+
+test("unindent - handles null input", () => {
+  assert.strictEqual(unindent(null), "");
+});
+
+test("unindent - handles undefined input", () => {
+  assert.strictEqual(unindent(undefined), "");
+});
+
+test("unindent - handles empty string", () => {
+  assert.strictEqual(unindent(""), "");
+});
+
+test("unindent - mixed indent levels, strips only the minimum", () => {
+  const input = "  a\n    b\n  c";
+  assert.strictEqual(unindent(input), "a\n  b\nc");
+});

package/src/index.js

@@ -0,0 +1,122 @@
+import { mdAutoRawTags, mdAutoNl2br, mdAutoUncommentAttrs, transformAutoRaw, transformNl2br, transformUncommentAttrs } from "./processors/markdown.js";
+import {
+  autoLinkFavicons,
+  isPlainUrlText,
+  cleanLinkText,
+  buildFaviconLink,
+  transformLink,
+  replaceLinksInHtml,
+} from "./processors/autoLinkFavicons.js";
+import { attrSetFilter, attrSet } from "./filters/attr_set.js";
+import { attrIncludesFilter } from "./filters/attr_includes.js";
+import { mergeFilter, merge } from "./filters/merge.js";
+import { removeTagFilter, removeTag } from "./filters/remove_tag.js";
+import { stripTagFilter, stripTag } from "./filters/strip_tag.js";
+import { ifFilter, iff } from "./filters/if.js";
+import { attrConcatFilter, attrConcat } from "./filters/attr_concat.js";
+import { sectionFilter, section as sectionFn } from "./filters/section.js";
+import { unindentFilter, unindent } from "./filters/unindent.js";
+import { siteData } from "./siteData.js";
+
+// Conditionally import fetchFilter only if @11ty/eleventy-fetch is available
+let fetchFilter = null;
+try {
+  await import("@11ty/eleventy-fetch");
+  const fetchModule = await import("./filters/fetch.js");
+  fetchFilter = fetchModule.fetchFilter;
+} catch (error) {
+  // @11ty/eleventy-fetch not available, fetch filter will be disabled
+}
+
+/**
+ * 11ty Blades Plugin
+ *
+ * A collection of helpful utilities and filters for Eleventy (11ty).
+ * Can be used as a plugin or by importing individual helpers.
+ *
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ * @param {Object} options - Plugin options
+ * @param {boolean} options.mdAutoRawTags - Enable mdAutoRawTags preprocessor (default: false)
+ * @param {boolean} options.mdAutoNl2br - Enable mdAutoNl2br for \n to <br> conversion (default: false)
+ * @param {boolean} options.mdAutoUncommentAttrs - Enable mdAutoUncommentAttrs to expand <!--{...}--> to {...} (default: false)
+ * @param {boolean} options.autoLinkFavicons - Enable autoLinkFavicons to add favicons to plain text links (default: false)
+ * @param {Array<string>} options.filters - Array of filter names to enable: 'attr_set', 'attr_includes', 'merge', 'remove_tag', 'strip_tag', 'if', 'attr_concat', 'section', 'fetch' (default: [])
+ * @param {boolean} options.siteData - Enable site.year and site.prod global data (default: false)
+ */
+export default function eleventyBladesPlugin(eleventyConfig, options = {}) {
+  const plugins = {
+    mdAutoRawTags,
+    mdAutoNl2br,
+    mdAutoUncommentAttrs,
+    autoLinkFavicons,
+    siteData,
+  };
+  Object.entries(options).forEach(([key, enabled]) => {
+    if (key !== "filters" && enabled && plugins[key]) {
+      plugins[key](eleventyConfig);
+    }
+  });
+
+  const filters = {
+    attr_set: attrSetFilter,
+    attr_includes: attrIncludesFilter,
+    merge: mergeFilter,
+    remove_tag: removeTagFilter,
+    strip_tag: stripTagFilter,
+    if: ifFilter,
+    attr_concat: attrConcatFilter,
+    section: sectionFilter,
+    unindent: unindentFilter,
+    ...(fetchFilter && { fetch: fetchFilter }),
+    date: (eleventyConfig) => {
+      eleventyConfig.addFilter("date", (dateVal) => new Date(dateVal).toISOString().split("T")[0]);
+    },
+  };
+  if (Array.isArray(options.filters)) {
+    options.filters.forEach((filterName) => {
+      if (filters[filterName]) {
+        filters[filterName](eleventyConfig);
+      }
+    });
+  }
+}
+
+// Export individual helpers for granular usage
+// Note: fetchFilter will be null/undefined if @11ty/eleventy-fetch is not installed
+export {
+  mdAutoRawTags,
+  mdAutoNl2br,
+  mdAutoUncommentAttrs,
+  autoLinkFavicons,
+  attrSetFilter,
+  attrIncludesFilter,
+  mergeFilter,
+  removeTagFilter,
+  stripTagFilter,
+  ifFilter,
+  attrConcatFilter,
+  sectionFilter,
+  unindentFilter,
+  fetchFilter,
+  siteData,
+};
+
+// Export transform/utility functions for advanced usage
+export {
+  transformAutoRaw,
+  transformNl2br,
+  transformUncommentAttrs,
+  isPlainUrlText,
+  cleanLinkText,
+  buildFaviconLink,
+  transformLink,
+  replaceLinksInHtml,
+  merge,
+  removeTag,
+  stripTag,
+  iff,
+  attrConcat,
+  attrSet,
+  sectionFn as section,
+  unindent,
+};

package/src/processors/autoLinkFavicons.js

@@ -0,0 +1,147 @@
+// <!--section:code-->```js
+/**
+ * Check if link text looks like a plain URL or domain
+ *
+ * @param {string} linkText - The text content of the link
+ * @param {string} domain - The domain extracted from the URL
+ * @returns {boolean} True if the link text appears to be a plain URL
+ */
+export function isPlainUrlText(linkText, domain) {
+  return linkText.trim().includes(domain) || linkText.trim().match(/^https?:\/\//) !== null;
+}
+
+/**
+ * Clean link text by removing protocol, domain, and leading slash
+ *
+ * @param {string} linkText - The original link text
+ * @param {string} domain - The domain to remove
+ * @returns {string} The cleaned text
+ */
+export function cleanLinkText(linkText, domain) {
+  const cleanedText = linkText
+    .trim()
+    .replace(/^https?:\/\//, "")
+    .replace(/\/$/, "");
+  const withoutDomain = cleanedText.replace(domain, "");
+  return withoutDomain.length > 2 ? withoutDomain : cleanedText;
+}
+
+/**
+ * Build HTML for a link with favicon
+ *
+ * @param {string} attrs - The link attributes (including href)
+ * @param {string} domain - The domain for the favicon
+ * @param {string} text - The text to display
+ * @returns {string} The HTML string
+ */
+export function buildFaviconLink(attrs, domain, text) {
+  return `<a ${attrs}><i><img src="https://www.google.com/s2/favicons?domain=${domain}&sz=64"></i> ${text}</a>`;
+}
+
+/**
+ * Transform a single link to include a favicon
+ *
+ * @param {string} match - The full matched link HTML
+ * @param {string} attrs - The link attributes
+ * @param {string} url - The URL from the href attribute
+ * @param {string} linkText - The text content of the link
+ * @returns {string} The transformed link or original match if not applicable
+ */
+export function transformLink(match, attrs, url, linkText) {
+  try {
+    // Extract domain from URL
+    const urlObj = new URL(url, "http://dummy.com");
+    const domain = urlObj.hostname;
+
+    // Only add favicon if link text looks like a plain URL/domain
+    if (isPlainUrlText(linkText, domain)) {
+      const cleanedText = cleanLinkText(linkText, domain);
+      return buildFaviconLink(attrs, domain, cleanedText);
+    }
+    return match; // @TODO: throw?
+  } catch (e) {
+    // If URL parsing fails, return original match
+    return match;
+  }
+}
+
+/**
+ * Replace all anchor links in HTML content with transformed versions
+ *
+ * This function searches for all anchor tags in HTML content and replaces them
+ * using the provided transform function. The regex captures:
+ * - Group 1: All attributes including href
+ * - Group 2: The URL from the href attribute
+ * - Group 3: The link text content
+ *
+ * @param {string} content - The HTML content to process
+ * @param {Function} transformer - Function to transform each link (receives match, attrs, url, linkText)
+ * @returns {string} The HTML content with transformed links
+ */
+export function replaceLinksInHtml(content, transformer) {
+  return content.replace(/<a\s+([^>]*href=["']([^"']+)["'][^>]*)>([^<]+)<\/a>/gi, transformer);
+}
+
+/**
+ * autoLinkFavicons - Add favicon images to plain text links
+ *
+ * This transform automatically adds favicon images from Google's favicon service
+ * to links that display plain URLs or domain names. It processes all HTML output
+ * files and adds inline favicon images next to the link text.
+ *
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function autoLinkFavicons(eleventyConfig) {
+  eleventyConfig.addTransform("autoLinkFavicons", function (content) {
+    if (this.page.outputPath && this.page.outputPath.endsWith(".html")) {
+      return replaceLinksInHtml(content, transformLink);
+    }
+    return content;
+  });
+}
+/*```
+
+<!--section:docs-->
+### `autoLinkFavicons` postprocessor (transformer) {#auto-link-favicons}
+
+Automatically adds favicon images from Google's favicon service to links that display plain URLs or domain names. This processor processes all HTML output files and adds inline favicon images next to link text that appears to be a plain URL.
+
+**Why use this?** When you have links in your content that display raw URLs or domain names (like `https://example.com/page`), adding favicons provides a visual indicator of the external site. This processor automatically detects these plain-text URL links and enhances them with favicon images, making them more visually appealing and easier to recognize.
+
+**How it works:**
+
+1. Scans all HTML output files for `<a>` tags
+2. Checks if the link text appears to be a plain URL or domain
+3. Extracts the domain from the URL
+4. Removes the domain from the link text (keeping only the path)
+5. Adds a favicon image from Google's favicon service inline with the remaining text
+
+**Example:**
+
+Before processing:
+
+```html
+<a href="https://github.com/anyblades/eleventy-blades">https://github.com/anyblades/eleventy-blades</a>
+```
+
+After processing:
+
+```html
+<a href="https://github.com/anyblades/eleventy-blades" class="whitespace-nowrap" target="_blank">
+  <i><img src="https://www.google.com/s2/favicons?domain=github.com&sz=32" /></i>
+  <span>/anyblades/eleventy-blades</span>
+</a>
+```
+
+**Rules:**
+
+- Only applies to links where the text looks like a plain URL (contains the domain or starts with `http://`/`https://`)
+- Removes the protocol and domain from the display text
+- Removes the trailing slash from the display text
+- Only applies if at least 3 characters remain after removing the domain (to avoid showing favicons for bare domain links)
+- Uses Google's favicon service at `https://www.google.com/s2/favicons?domain=DOMAIN&sz=32`
+- Adds `target="_blank"` to the processed links (only if not already present)
+- Adds `whitespace-nowrap` class to the link
+- Wraps the link text in a `<span>` element
+- The favicon is wrapped in an `<i>` tag for easy styling
+*/