@anydigital/eleventy-bricks 1.0.0-alpha.16 → 1.0.0-alpha.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/eleventy-bricks",
-  "version": "1.0.0-alpha.16",
+  "version": "1.0.0-alpha.18",
   "description": "A collection of helpful utilities and filters for Eleventy (11ty)",
   "type": "module",
   "main": "./src/index.js",

package/src/do/package.json

@@ -2,19 +2,14 @@
   "name": "@anydigital/eleventy-bricks-do",
   "private": true,
   "scripts": {
-    "build": "npm run tw -- --minify && npm run 11ty --",
-
-    "start": "npm run tw -- --watch   & npm run 11ty -- --serve",
-
+    "build": "npm run 11ty -- $ELTY_OPTIONS        && npm run tw -- --minify",
+    "start": "npm run 11ty -- $ELTY_OPTIONS --serve & npm run tw -- --watch",
     "prerestart": "npm run 11ty:clean",
-
-    "stage": "npm run 11ty:clean; serve ../_site & npm run build --",
-    
+    "stage": "npm run 11ty:clean; npm run build && serve ../_site",
     "11ty": "cd ../ && NODE_OPTIONS='--preserve-symlinks' eleventy",
     "11ty:clean": "rm -r ../_site",
     "11ty:debug": "DEBUG=* npm run 11ty --",
-
-    "tw": "tailwindcss -i ../src/_template/styles.css -o ../_site/styles.css",
+    "tw": "tailwindcss -i ../src/_theme/styles.css -o ../_site/styles.css",
     "tw:debug": "DEBUG=* npm run tw --"
   }
 }

package/src/eleventy.config.js

@@ -15,7 +15,7 @@ import yaml from "js-yaml";
  * @param {Object} eleventyConfig - The Eleventy configuration object
  * @returns {Object} The Eleventy configuration object
  */
-export default function(eleventyConfig) {
+export default function (eleventyConfig) {
   /* CLI support */
   const argv = minimist(process.argv.slice(2));
   const inputDir = argv.input || "src";
@@ -24,31 +24,41 @@ export default function(eleventyConfig) {
   eleventyConfig.addPlugin(RenderPlugin);
   eleventyConfig.addPlugin(eleventyNavigationPlugin);
   eleventyConfig.addPlugin(eleventyBricksPlugin, {
-    bricks: true,
     mdAutoNl2br: true,
     mdAutoRawTags: true,
-    setAttrFilter: true,
-    byAttrFilter: true,
-    siteData: true
+    siteData: true,
+    filters: [
+      "attr",
+      "where_in",
+      "merge",
+      "remove_tag",
+      "if",
+      "attr_concat",
+    ],
   });
 
   /* Libraries */
-  eleventyConfig.setLibrary("md", markdownIt({
-    html: true,
-    breaks: true,
-    linkify: true
-  }).use(markdownItAnchor, {
-    permalink: markdownItAnchor.permalink.headerLink()
-  }));
+  eleventyConfig.setLibrary(
+    "md",
+    markdownIt({
+      html: true,
+      linkify: true,
+    }).use(markdownItAnchor, {
+      permalink: markdownItAnchor.permalink.headerLink(),
+    })
+  );
 
   /* Data */
   eleventyConfig.addDataExtension("yml", (contents) => yaml.load(contents));
 
   /* Build */
-  eleventyConfig.addPassthroughCopy({ 
-    "src/_public": ".",
-    ...(inputDir !== "src" && { [`${inputDir}/_public`]: "." })
-  }, { expand: true }); // This follows/resolves symbolic links
+  eleventyConfig.addPassthroughCopy(
+    {
+      "src/_public": ".",
+      ...(inputDir !== "src" && { [`${inputDir}/_public`]: "." }),
+    },
+    { expand: true } // This follows/resolves symbolic links
+  );
 
   /* Dev tools */
   // Follow symlinks in Chokidar used by 11ty to watch files
@@ -56,11 +66,9 @@ export default function(eleventyConfig) {
 
   /* Config */
   return {
-    templateFormats: ["md", "njk"],
-    htmlTemplateEngine: "njk",
     dir: {
       input: inputDir,
-      includes: "_template"
-    }
+      includes: "_theme",
+    },
   };
-};
+}

package/src/{setAttrFilter.js → filters/attr.js}

@@ -1,17 +1,16 @@
 /**
- * setAttr filter - Override an attribute and return the object
- * 
+ * attr filter - Override an attribute and return the object
+ *
  * This filter takes an object, a key, and a value, and returns a new object
  * with the specified attribute set to the given value.
- * 
+ *
  * @param {Object} eleventyConfig - The Eleventy configuration object
  */
 export function setAttrFilter(eleventyConfig) {
-  eleventyConfig.addFilter("setAttr", function(obj, key, value) {
+  eleventyConfig.addFilter("attr", function (obj, key, value) {
     return {
       ...obj,
-      [key]: value
+      [key]: value,
     };
   });
 }
-

package/src/filters/attr_concat.js

@@ -0,0 +1,65 @@
+/**
+ * Concatenate values to an attribute array
+ *
+ * This function takes an object, an attribute name, and values to append.
+ * It returns a new object with the attribute as a combined array of unique items.
+ *
+ * @param {Object} obj - The object to modify
+ * @param {string} attr - The attribute name
+ * @param {Array|string|*} values - Values to concatenate (array, JSON string array, or single value)
+ * @returns {Object} A new object with the combined unique array
+ */
+export function attrConcat(obj, attr, values) {
+  // Get the existing attribute value, default to empty array if not present
+  const existingArray = obj?.[attr] || [];
+
+  // Check if existing value is an array, convert if not
+  if (!Array.isArray(existingArray)) {
+    console.error(
+      `attrConcat: Expected ${attr} to be an array, got ${typeof existingArray}`
+    );
+  }
+
+  // Process the values argument
+  let valuesToAdd = [];
+  if (Array.isArray(values)) {
+    valuesToAdd = values;
+  } else if (typeof values === "string") {
+    // Try to parse as JSON array
+    try {
+      const parsed = JSON.parse(values);
+      if (Array.isArray(parsed)) {
+        valuesToAdd = parsed;
+      } else {
+        valuesToAdd = [values];
+      }
+    } catch {
+      // Not valid JSON, treat as single value
+      valuesToAdd = [values];
+    }
+  } else {
+    // If it's a single value, wrap it in an array
+    valuesToAdd = [values];
+  }
+
+  // Combine arrays and remove duplicates using Set
+  const combinedArray = [...new Set([...existingArray, ...valuesToAdd])];
+
+  // Return a new object with the combined array
+  return {
+    ...obj,
+    [attr]: combinedArray,
+  };
+}
+
+/**
+ * attr_concat filter - Concatenate values to an attribute array
+ *
+ * This filter takes an object, an attribute name, and values to append.
+ * It returns a new object with the attribute as a combined array of unique items.
+ *
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function attrConcatFilter(eleventyConfig) {
+  eleventyConfig.addFilter("attr_concat", attrConcat);
+}

package/src/filters/attr_concat.test.js

@@ -0,0 +1,205 @@
+import { describe, it } from "node:test";
+import assert from "node:assert";
+import { attrConcat } from "./attr_concat.js";
+
+describe("attrConcat", () => {
+  it("should concatenate array values to existing array attribute", () => {
+    const obj = { classes: ["foo", "bar"] };
+    const result = attrConcat(obj, "classes", ["baz", "qux"]);
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", "bar", "baz", "qux"],
+    });
+  });
+
+  it("should parse JSON array string", () => {
+    const obj = { classes: ["foo", "bar"] };
+    const result = attrConcat(obj, "classes", '["baz", "qux", "quux"]');
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", "bar", "baz", "qux", "quux"],
+    });
+  });
+
+  it("should handle single string value (not JSON)", () => {
+    const obj = { classes: ["foo"] };
+    const result = attrConcat(obj, "classes", "bar baz");
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", "bar baz"],
+    });
+  });
+
+  it("should create new array if attribute doesn't exist", () => {
+    const obj = { name: "test" };
+    const result = attrConcat(obj, "classes", ["foo", "bar"]);
+
+    assert.deepStrictEqual(result, {
+      name: "test",
+      classes: ["foo", "bar"],
+    });
+  });
+
+  it("should handle empty object", () => {
+    const obj = {};
+    const result = attrConcat(obj, "classes", ["foo", "bar"]);
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", "bar"],
+    });
+  });
+
+  it("should handle null object", () => {
+    const result = attrConcat(null, "classes", ["foo", "bar"]);
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", "bar"],
+    });
+  });
+
+  it("should handle single value (non-array, non-string)", () => {
+    const obj = { ids: [1, 2] };
+    const result = attrConcat(obj, "ids", 3);
+
+    assert.deepStrictEqual(result, {
+      ids: [1, 2, 3],
+    });
+  });
+
+  it("should not mutate original object", () => {
+    const obj = { classes: ["foo", "bar"] };
+    const result = attrConcat(obj, "classes", ["baz"]);
+
+    assert.deepStrictEqual(obj, { classes: ["foo", "bar"] });
+    assert.deepStrictEqual(result, { classes: ["foo", "bar", "baz"] });
+    assert.notStrictEqual(obj, result);
+  });
+
+  it("should preserve other attributes", () => {
+    const obj = { classes: ["foo"], id: "test", data: { value: 42 } };
+    const result = attrConcat(obj, "classes", ["bar"]);
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", "bar"],
+      id: "test",
+      data: { value: 42 },
+    });
+  });
+
+  it("should handle empty array values", () => {
+    const obj = { classes: ["foo"] };
+    const result = attrConcat(obj, "classes", []);
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo"],
+    });
+  });
+
+  it("should handle empty string values", () => {
+    const obj = { classes: ["foo"] };
+    const result = attrConcat(obj, "classes", "");
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", ""],
+    });
+  });
+
+  it("should handle multiline strings as single value (not JSON)", () => {
+    const obj = { classes: ["foo"] };
+    const result = attrConcat(obj, "classes", "bar\n\nbaz\n\n\nqux");
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", "bar\n\nbaz\n\n\nqux"],
+    });
+  });
+
+  it("should remove duplicate values from existing array", () => {
+    const obj = { classes: ["foo", "bar"] };
+    const result = attrConcat(obj, "classes", ["bar", "baz"]);
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", "bar", "baz"],
+    });
+  });
+
+  it("should remove duplicate values from new array", () => {
+    const obj = { classes: ["foo"] };
+    const result = attrConcat(obj, "classes", ["bar", "bar", "baz", "baz"]);
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", "bar", "baz"],
+    });
+  });
+
+  it("should handle duplicates in JSON array strings", () => {
+    const obj = { classes: ["foo", "bar"] };
+    const result = attrConcat(obj, "classes", '["bar", "baz", "bar", "qux"]');
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", "bar", "baz", "qux"],
+    });
+  });
+
+  it("should preserve order and remove only duplicates", () => {
+    const obj = { classes: ["a", "b", "c"] };
+    const result = attrConcat(obj, "classes", ["b", "d", "e", "a"]);
+
+    assert.deepStrictEqual(result, {
+      classes: ["a", "b", "c", "d", "e"],
+    });
+  });
+
+  it("should parse valid JSON array string", () => {
+    const obj = { classes: ["foo"] };
+    const result = attrConcat(obj, "classes", '["bar", "baz", "qux"]');
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", "bar", "baz", "qux"],
+    });
+  });
+
+  it("should treat non-JSON string as single value", () => {
+    const obj = { classes: ["foo"] };
+    const result = attrConcat(obj, "classes", "bar\nbaz\nqux");
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", "bar\nbaz\nqux"],
+    });
+  });
+
+  it("should keep plain string as single value", () => {
+    const obj = { tags: ["existing"] };
+    const result = attrConcat(obj, "tags", "single value");
+
+    assert.deepStrictEqual(result, {
+      tags: ["existing", "single value"],
+    });
+  });
+
+  it("should parse JSON with numbers", () => {
+    const obj = { ids: [1, 2] };
+    const result = attrConcat(obj, "ids", "[3, 4, 5]");
+
+    assert.deepStrictEqual(result, {
+      ids: [1, 2, 3, 4, 5],
+    });
+  });
+
+  it("should treat invalid JSON as single string value", () => {
+    const obj = { classes: ["foo"] };
+    const result = attrConcat(obj, "classes", '["bar", "baz"'); // Invalid JSON
+
+    assert.deepStrictEqual(result, {
+      classes: ["foo", '["bar", "baz"'],
+    });
+  });
+
+  it("should treat JSON non-array as single value", () => {
+    const obj = { tags: ["foo"] };
+    const result = attrConcat(obj, "tags", '{"key": "value"}');
+
+    assert.deepStrictEqual(result, {
+      tags: ["foo", '{"key": "value"}'],
+    });
+  });
+});

package/src/filters/if.js

@@ -0,0 +1,39 @@
+/**
+ * if utility function - Ternary/conditional helper
+ *
+ * Returns trueValue if condition is truthy, otherwise returns falseValue.
+ * Similar to Nunjucks' inline if: `value if condition else other_value`
+ *
+ * @param {*} trueValue - The value to return if condition is truthy
+ * @param {*} condition - The condition to evaluate
+ * @param {*} falseValue - The value to return if condition is falsy (default: empty string)
+ * @returns {*} Either trueValue or falseValue based on condition
+ */
+export function iff(trueValue, condition, falseValue = "") {
+  // Treat empty objects {} as falsy
+  if (
+    condition &&
+    typeof condition === "object" &&
+    !Array.isArray(condition) &&
+    Object.keys(condition).length === 0
+  ) {
+    return falseValue;
+  }
+  return !!condition ? trueValue : falseValue;
+}
+
+/**
+ * if filter - Inline conditional/ternary operator for templates
+ *
+ * This filter provides a simple inline if/else similar to Nunjucks.
+ *
+ * Usage in Liquid templates:
+ *   {{ "Active" | if: isActive, "Inactive" }}
+ *   {{ "Yes" | if: condition }}
+ *   {{ someValue | if: test, otherValue }}
+ *
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function ifFilter(eleventyConfig) {
+  eleventyConfig.addFilter("if", iff);
+}

package/src/filters/if.test.js

@@ -0,0 +1,63 @@
+import test from "node:test";
+import assert from "node:assert";
+import { iff } from "./if.js";
+
+test("iff returns trueValue when condition is truthy", () => {
+  assert.strictEqual(iff("yes", true, "no"), "yes");
+  assert.strictEqual(iff("yes", 1, "no"), "yes");
+  assert.strictEqual(iff("yes", "truthy", "no"), "yes");
+  assert.strictEqual(iff("yes", { a: 1 }, "no"), "yes"); // non-empty object is truthy
+  assert.strictEqual(iff("yes", [], "no"), "yes");
+});
+
+test("iff returns falseValue when condition is falsy", () => {
+  assert.strictEqual(iff("yes", false, "no"), "no");
+  assert.strictEqual(iff("yes", 0, "no"), "no");
+  assert.strictEqual(iff("yes", "", "no"), "no");
+  assert.strictEqual(iff("yes", null, "no"), "no");
+  assert.strictEqual(iff("yes", undefined, "no"), "no");
+});
+
+test("iff treats empty objects as falsy", () => {
+  assert.strictEqual(iff("yes", {}, "no"), "no");
+  assert.strictEqual(iff("yes", {}, ""), "");
+  assert.strictEqual(iff(100, {}, 200), 200);
+
+  // Non-empty objects should still be truthy
+  assert.strictEqual(iff("yes", { a: 1 }, "no"), "yes");
+  assert.strictEqual(iff("yes", { nested: {} }, "no"), "yes");
+});
+
+test("iff returns falseValue when condition is undefined", () => {
+  assert.strictEqual(iff("yes", undefined, "no"), "no");
+  assert.strictEqual(iff("yes", undefined), "");
+  assert.strictEqual(iff(100, undefined, 200), 200);
+});
+
+test("iff returns empty string as default falseValue", () => {
+  assert.strictEqual(iff("yes", false), "");
+  assert.strictEqual(iff("yes", 0), "");
+  assert.strictEqual(iff("yes", null), "");
+});
+
+test("iff works with various value types", () => {
+  assert.strictEqual(iff(100, true, 200), 100);
+  assert.strictEqual(iff(100, false, 200), 200);
+
+  const obj1 = { a: 1 };
+  const obj2 = { b: 2 };
+  assert.strictEqual(iff(obj1, true, obj2), obj1);
+  assert.strictEqual(iff(obj1, false, obj2), obj2);
+
+  const arr1 = [1, 2];
+  const arr2 = [3, 4];
+  assert.strictEqual(iff(arr1, true, arr2), arr1);
+  assert.strictEqual(iff(arr1, false, arr2), arr2);
+});
+
+test("iff evaluates condition correctly without type coercion confusion", () => {
+  // Common edge cases
+  assert.strictEqual(iff("yes", "false", "no"), "yes"); // string 'false' is truthy
+  assert.strictEqual(iff("yes", "0", "no"), "yes"); // string '0' is truthy
+  assert.strictEqual(iff("yes", NaN, "no"), "no"); // NaN is falsy
+});

package/src/filters/merge.js

@@ -0,0 +1,47 @@
+/**
+ * Merge objects together
+ *
+ * Shallow merges objects (later values override earlier ones)
+ *
+ * @param {Object} first - The first object
+ * @param {...Object} rest - Additional objects to merge
+ * @returns {Object} The merged result
+ */
+export function merge(first, ...rest) {
+  // If first argument is null or undefined, treat as empty object
+  if (first === null || first === undefined) {
+    first = {};
+  }
+
+  // Only support objects
+  if (typeof first === "object" && !Array.isArray(first)) {
+    // Merge objects using spread operator (shallow merge)
+    return rest.reduce(
+      (acc, item) => {
+        if (item !== null && typeof item === "object" && !Array.isArray(item)) {
+          return { ...acc, ...item };
+        }
+        return acc;
+      },
+      { ...first }
+    );
+  }
+
+  // If first is not an object, return empty object
+  return {};
+}
+
+/**
+ * merge filter - Merge objects together
+ *
+ * This filter merges objects, similar to Twig's merge filter.
+ *
+ * Usage in templates:
+ *   {{ obj1 | merge(obj2) }}
+ *   {{ obj1 | merge(obj2, obj3) }}
+ *
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function mergeFilter(eleventyConfig) {
+  eleventyConfig.addFilter("merge", merge);
+}

package/src/filters/merge.test.js

@@ -0,0 +1,51 @@
+import { test } from 'node:test';
+import assert from 'node:assert';
+import { merge } from './merge.js';
+
+test('merge - merges two objects', () => {
+  const result = merge({ a: 1, b: 2 }, { c: 3, d: 4 });
+  assert.deepStrictEqual(result, { a: 1, b: 2, c: 3, d: 4 });
+});
+
+test('merge - merges objects with override', () => {
+  const result = merge({ a: 1, b: 2 }, { b: 3, c: 4 });
+  assert.deepStrictEqual(result, { a: 1, b: 3, c: 4 });
+});
+
+test('merge - merges multiple objects', () => {
+  const result = merge({ a: 1 }, { b: 2 }, { c: 3 });
+  assert.deepStrictEqual(result, { a: 1, b: 2, c: 3 });
+});
+
+test('merge - handles null first argument', () => {
+  const result = merge(null, { a: 1 });
+  assert.deepStrictEqual(result, { a: 1 });
+});
+
+test('merge - handles undefined first argument', () => {
+  const result = merge(undefined, { a: 1 });
+  assert.deepStrictEqual(result, { a: 1 });
+});
+
+test('merge - does not modify original objects', () => {
+  const original = { a: 1 };
+  const result = merge(original, { b: 2 });
+  
+  assert.deepStrictEqual(original, { a: 1 });
+  assert.deepStrictEqual(result, { a: 1, b: 2 });
+});
+
+test('merge - returns empty object for arrays', () => {
+  const result = merge([1, 2], [3, 4]);
+  assert.deepStrictEqual(result, {});
+});
+
+test('merge - returns empty object for primitives', () => {
+  const result = merge('string', { a: 1 });
+  assert.deepStrictEqual(result, {});
+});
+
+test('merge - ignores non-object arguments in rest', () => {
+  const result = merge({ a: 1 }, 'string', { b: 2 }, null, { c: 3 });
+  assert.deepStrictEqual(result, { a: 1, b: 2, c: 3 });
+});

package/src/filters/remove_tag.js

@@ -0,0 +1,42 @@
+/**
+ * Remove specified HTML element from provided HTML
+ * 
+ * @param {string} html - The HTML content to process
+ * @param {string} tagName - The tag name to remove
+ * @returns {string} The HTML with the specified tag removed
+ */
+export function removeTag(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 and closing tags along with their content
+  // This regex matches: <tag attributes>content</tag>
+  const regex = new RegExp(`<${escapedTag}(?:\\s[^>]*)?>.*?<\\/${escapedTag}>`, 'gis');
+  let result = html.replace(regex, '');
+  
+  // Also remove self-closing tags: <tag />
+  const selfClosingRegex = new RegExp(`<${escapedTag}(?:\\s[^>]*)?\\s*\\/?>`, 'gi');
+  result = result.replace(selfClosingRegex, '');
+
+  return result;
+}
+
+/**
+ * remove_tag filter - Remove specified HTML element from provided HTML
+ * 
+ * Usage in templates:
+ *   {{ htmlContent | remove_tag('script') }}
+ * 
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function removeTagFilter(eleventyConfig) {
+  eleventyConfig.addFilter("remove_tag", removeTag);
+}