@anydigital/eleventy-bricks 1.0.0-alpha.15 → 1.0.0-alpha.17

package/README.md

@@ -50,7 +50,7 @@ Import only the specific helpers you need without using the plugin:
 
 **ES Modules:**
 ```javascript
-import { bricks, mdAutoRawTags, mdAutoNl2br, setAttrFilter, byAttrFilter, siteData } from "@anydigital/eleventy-bricks";
+import { bricks, mdAutoRawTags, mdAutoNl2br, setAttrFilter, byAttrFilter, mergeFilter, removeTagFilter, siteData } from "@anydigital/eleventy-bricks";
 
 export default function(eleventyConfig) {
   bricks(eleventyConfig);
@@ -58,6 +58,8 @@ export default function(eleventyConfig) {
   mdAutoNl2br(eleventyConfig);
   setAttrFilter(eleventyConfig);
   byAttrFilter(eleventyConfig);
+  mergeFilter(eleventyConfig);
+  removeTagFilter(eleventyConfig);
   siteData(eleventyConfig);
   
   // Your other configuration...
@@ -66,7 +68,7 @@ export default function(eleventyConfig) {
 
 **CommonJS:**
 ```javascript
-const { bricks, mdAutoRawTags, mdAutoNl2br, setAttrFilter, byAttrFilter, siteData } = require("@anydigital/eleventy-bricks");
+const { bricks, mdAutoRawTags, mdAutoNl2br, setAttrFilter, byAttrFilter, mergeFilter, removeTagFilter, siteData } = require("@anydigital/eleventy-bricks");
 
 module.exports = async function(eleventyConfig) {
   await bricks(eleventyConfig);
@@ -74,6 +76,8 @@ module.exports = async function(eleventyConfig) {
   await mdAutoNl2br(eleventyConfig);
   await setAttrFilter(eleventyConfig);
   await byAttrFilter(eleventyConfig);
+  await mergeFilter(eleventyConfig);
+  await removeTagFilter(eleventyConfig);
   await siteData(eleventyConfig);
   
   // Your other configuration...
@@ -93,6 +97,8 @@ When using the plugin (Option 1), you can configure which helpers to enable:
 | `mdAutoNl2br` | boolean | `false` | Enable the mdAutoNl2br preprocessor to convert \n to `<br>` tags |
 | `setAttrFilter` | boolean | `false` | Enable the setAttr filter for overriding object attributes |
 | `byAttrFilter` | boolean | `false` | Enable the byAttr filter for filtering collections by attribute values |
+| `mergeFilter` | boolean | `false` | Enable the merge filter for merging arrays or objects |
+| `removeTagFilter` | boolean | `false` | Enable the removeTag filter for removing HTML elements from content |
 | `siteData` | boolean | `false` | Enable site.year and site.isProd global data |
 
 **Example:**
@@ -435,6 +441,165 @@ Template usage:
 {% set recentBlogPosts = collections.all | byAttr('category', 'blog') | reverse | limit(5) %}
 ```
 
+### merge
+
+A filter that merges arrays or objects together, similar to Twig's merge filter. For arrays, it concatenates them. For objects, it performs a shallow merge where later values override earlier ones.
+
+**Why use this?**
+
+When working with data in templates, you often need to combine multiple arrays or objects. The `merge` filter provides a clean way to merge data structures without writing custom JavaScript, making it easy to combine collections, merge configuration objects, or aggregate data from multiple sources.
+
+**Usage:**
+
+1. Enable `merge` in your Eleventy config:
+
+```javascript
+import { mergeFilter } from "@anydigital/eleventy-bricks";
+
+export default function(eleventyConfig) {
+  mergeFilter(eleventyConfig);
+  // Or use as plugin:
+  // eleventyConfig.addPlugin(eleventyBricks, { mergeFilter: true });
+}
+```
+
+2. Use the filter in your templates:
+
+**Merge arrays:**
+```njk
+{# Combine two arrays #}
+{% set allItems = featured | merge(regular) %}
+
+{# Merge multiple arrays #}
+{% set combined = array1 | merge(array2, array3, array4) %}
+
+{% for item in allItems %}
+  <p>{{ item }}</p>
+{% endfor %}
+```
+
+**Merge objects:**
+```njk
+{# Merge configuration objects #}
+{% set defaultConfig = { theme: 'light', lang: 'en' } %}
+{% set userConfig = { theme: 'dark' } %}
+{% set finalConfig = defaultConfig | merge(userConfig) %}
+
+{# Result: { theme: 'dark', lang: 'en' } #}
+```
+
+**Parameters:**
+
+- `first`: The first array or object (the base to merge into)
+- `...rest`: One or more arrays or objects to merge in
+
+**Features:**
+
+- Works with both arrays and objects
+- Supports merging multiple items at once
+- Non-mutating: Creates new arrays/objects, leaving originals unchanged
+- For objects: Later values override earlier ones (shallow merge)
+- For arrays: Concatenates all arrays together
+- Handles null/undefined gracefully
+
+**Examples:**
+
+```njk
+{# Combine featured and regular posts #}
+{% set featuredPosts = collections.all | byAttr('featured', true) %}
+{% set regularPosts = collections.all | byAttr('featured', false) %}
+{% set allPosts = featuredPosts | merge(regularPosts) %}
+
+{# Merge page metadata with defaults #}
+{% set defaultMeta = { 
+  author: 'Site Admin',
+  category: 'general',
+  comments: false 
+} %}
+{% set pageMeta = defaultMeta | merge(page.data) %}
+
+{# Combine arrays of tags #}
+{% set commonTags = ['javascript', 'html', 'css'] %}
+{% set specialTags = page.data.tags or [] %}
+{% set allTags = commonTags | merge(specialTags) %}
+
+{# Merge multiple configuration sources #}
+{% set config = defaults | merge(siteConfig, pageConfig, userPrefs) %}
+```
+
+### removeTag
+
+A filter that removes a specified HTML element from provided HTML content. It removes the tag along with its content, including self-closing tags.
+
+**Why use this?**
+
+When working with content from external sources or user-generated content, you may need to strip certain HTML tags for security or presentation purposes. The `removeTag` filter provides a simple way to remove unwanted tags like `<script>`, `<style>`, or any other HTML elements from your content.
+
+**Usage:**
+
+1. Enable `removeTag` in your Eleventy config:
+
+```javascript
+import { removeTagFilter } from "@anydigital/eleventy-bricks";
+
+export default function(eleventyConfig) {
+  removeTagFilter(eleventyConfig);
+  // Or use as plugin:
+  // eleventyConfig.addPlugin(eleventyBricks, { removeTagFilter: true });
+}
+```
+
+2. Use the filter in your templates:
+
+```njk
+{# Remove all script tags from content #}
+{% set cleanContent = htmlContent | removeTag('script') %}
+
+{{ cleanContent | safe }}
+```
+
+**Parameters:**
+
+- `html`: The HTML content to process (string)
+- `tagName`: The tag name to remove (string)
+
+**Features:**
+
+- Removes both opening and closing tags along with their content
+- Handles self-closing tags (e.g., `<br />`, `<img />`)
+- Handles tags with attributes
+- Case-insensitive matching
+- Non-destructive: Returns new string, doesn't modify original
+
+**Examples:**
+
+```njk
+{# Remove scripts from user-generated content #}
+{% set userContent = '<p>Hello</p><script>alert("XSS")</script><p>World</p>' %}
+{% set safeContent = userContent | removeTag('script') %}
+{# Result: '<p>Hello</p><p>World</p>' #}
+
+{# Strip specific formatting tags #}
+{% set formatted = '<div><strong>Bold</strong> and <em>italic</em> text</div>' %}
+{% set noStrong = formatted | removeTag('strong') %}
+{# Result: '<div>Bold and <em>italic</em> text</div>' #}
+
+{# Chain multiple removeTag filters for multiple tags #}
+{% set richContent = page.content %}
+{% set stripped = richContent 
+  | removeTag('script') 
+  | removeTag('style') 
+  | removeTag('iframe') 
+%}
+
+{# Remove images for text-only preview #}
+{% set textOnly = htmlContent | removeTag('img') %}
+```
+
+**Security Note:**
+
+While this filter can help sanitize HTML content, it should not be relied upon as the sole security measure. For critical security requirements, use a dedicated HTML sanitization library on the server side before content reaches your templates.
+
 ### siteData
 
 Adds global site data to your Eleventy project, providing commonly needed values that can be accessed in all templates.

package/package.json

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

package/src/do/package.json

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

package/src/eleventy.config.js

@@ -29,6 +29,8 @@ export default function(eleventyConfig) {
     mdAutoRawTags: true,
     setAttrFilter: true,
     byAttrFilter: true,
+    mergeFilter: true,
+    removeTagFilter: true,
     siteData: true
   });
 

package/src/index.cjs

@@ -10,17 +10,17 @@ module.exports = async function eleventyBricksPlugin(eleventyConfig, options) {
 };
 
 // Export individual helpers for granular usage
-['bricks', 'mdAutoRawTags', 'mdAutoNl2br', 'setAttrFilter', 'byAttrFilter', 'siteData'].forEach(name => {
+['bricks', 'mdAutoRawTags', 'mdAutoNl2br', 'setAttrFilter', 'byAttrFilter', 'mergeFilter', 'removeTagFilter', 'siteData'].forEach(name => {
   module.exports[name] = async (eleventyConfig) => {
     const module = await import('./index.js');
     return module[name](eleventyConfig);
   };
 });
 
-// Export transform functions for advanced usage
-['transformAutoRaw', 'transformNl2br'].forEach(name => {
-  module.exports[name] = async (content) => {
+// Export transform/utility functions for advanced usage
+['transformAutoRaw', 'transformNl2br', 'merge', 'removeTag'].forEach(name => {
+  module.exports[name] = async (...args) => {
     const module = await import('./index.js');
-    return module[name](content);
+    return module[name](...args);
   };
 });

package/src/index.js

@@ -2,6 +2,8 @@ import { bricks } from "./bricks.js";
 import { mdAutoRawTags, mdAutoNl2br, transformAutoRaw, transformNl2br } from "./markdown.js";
 import { setAttrFilter } from "./setAttrFilter.js";
 import { byAttrFilter } from "./byAttrFilter.js";
+import { mergeFilter, merge } from "./mergeFilter.js";
+import { removeTagFilter, removeTag } from "./removeTagFilter.js";
 import { siteData } from "./siteData.js";
 
 /**
@@ -17,15 +19,17 @@ import { siteData } from "./siteData.js";
  * @param {boolean} options.mdAutoNl2br - Enable mdAutoNl2br for \n to <br> conversion (default: false)
  * @param {boolean} options.setAttrFilter - Enable setAttr filter (default: false)
  * @param {boolean} options.byAttrFilter - Enable byAttr filter (default: false)
+ * @param {boolean} options.mergeFilter - Enable merge filter (default: false)
+ * @param {boolean} options.removeTagFilter - Enable removeTag filter (default: false)
  * @param {boolean} options.siteData - Enable site.year and site.isProd global data (default: false)
  */
 export default function eleventyBricksPlugin(eleventyConfig, options = {}) {
-  const plugins = { bricks, mdAutoRawTags, mdAutoNl2br, setAttrFilter, byAttrFilter, siteData };
+  const plugins = { bricks, mdAutoRawTags, mdAutoNl2br, setAttrFilter, byAttrFilter, mergeFilter, removeTagFilter, siteData };
   Object.entries(options).forEach(([key, enabled]) => enabled && plugins[key]?.(eleventyConfig));
 }
 
 // Export individual helpers for granular usage
-export { bricks, mdAutoRawTags, mdAutoNl2br, setAttrFilter, byAttrFilter, siteData };
+export { bricks, mdAutoRawTags, mdAutoNl2br, setAttrFilter, byAttrFilter, mergeFilter, removeTagFilter, siteData };
 
-// Export transform functions for advanced usage
-export { transformAutoRaw, transformNl2br };
+// Export transform/utility functions for advanced usage
+export { transformAutoRaw, transformNl2br, merge, removeTag };

package/src/mergeFilter.js

@@ -0,0 +1,57 @@
+/**
+ * Merge arrays or objects together
+ * 
+ * For arrays: concatenates them together
+ * For objects: shallow merges them (later values override earlier ones)
+ * 
+ * @param {Array|Object} first - The first array or object
+ * @param {...Array|Object} rest - Additional arrays or objects to merge
+ * @returns {Array|Object} The merged result
+ */
+export function merge(first, ...rest) {
+  // If first argument is null or undefined, treat as empty
+  if (first === null || first === undefined) {
+    first = Array.isArray(rest[0]) ? [] : {};
+  }
+
+  // Determine if we're working with arrays or objects
+  const isArray = Array.isArray(first);
+
+  if (isArray) {
+    // Merge arrays by concatenating
+    return rest.reduce((acc, item) => {
+      if (Array.isArray(item)) {
+        return acc.concat(item);
+      }
+      // If item is not an array, add it as a single element
+      return acc.concat([item]);
+    }, [...first]);
+  } else if (typeof first === 'object') {
+    // 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 a primitive, return it as-is
+  return first;
+}
+
+/**
+ * merge filter - Merge arrays or objects together
+ * 
+ * This filter merges arrays or objects, similar to Twig's merge filter.
+ * 
+ * Usage in templates:
+ *   {{ array1 | merge(array2) }}
+ *   {{ array1 | merge(array2, array3) }}
+ *   {{ obj1 | merge(obj2) }}
+ * 
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function mergeFilter(eleventyConfig) {
+  eleventyConfig.addFilter("merge", merge);
+}

package/src/mergeFilter.test.js

@@ -0,0 +1,64 @@
+import { test } from 'node:test';
+import assert from 'node:assert';
+import { merge } from './mergeFilter.js';
+
+test('merge - merges two arrays', () => {
+  const result = merge([1, 2], [3, 4]);
+  assert.deepStrictEqual(result, [1, 2, 3, 4]);
+});
+
+test('merge - merges multiple arrays', () => {
+  const result = merge([1, 2], [3, 4], [5, 6]);
+  assert.deepStrictEqual(result, [1, 2, 3, 4, 5, 6]);
+});
+
+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 empty arrays', () => {
+  const result = merge([], [1, 2], [3]);
+  assert.deepStrictEqual(result, [1, 2, 3]);
+});
+
+test('merge - handles null first argument with arrays', () => {
+  const result = merge(null, [1, 2]);
+  assert.deepStrictEqual(result, [1, 2]);
+});
+
+test('merge - handles null first argument with objects', () => {
+  const result = merge(null, { a: 1 });
+  assert.deepStrictEqual(result, { a: 1 });
+});
+
+test('merge - array merge with non-array adds as element', () => {
+  const result = merge([1, 2], 3);
+  assert.deepStrictEqual(result, [1, 2, 3]);
+});
+
+test('merge - does not modify original arrays', () => {
+  const original = [1, 2];
+  const result = merge(original, [3, 4]);
+  
+  assert.deepStrictEqual(original, [1, 2]);
+  assert.deepStrictEqual(result, [1, 2, 3, 4]);
+});
+
+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 });
+});

package/src/removeTagFilter.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;
+}
+
+/**
+ * removeTag filter - Remove specified HTML element from provided HTML
+ * 
+ * Usage in templates:
+ *   {{ htmlContent | removeTag('script') }}
+ * 
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function removeTagFilter(eleventyConfig) {
+  eleventyConfig.addFilter("removeTag", removeTag);
+}

package/src/removeTagFilter.test.js

@@ -0,0 +1,60 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import { removeTag } from './removeTagFilter.js';
+
+describe('removeTag', () => {
+  it('should remove a single tag with content', () => {
+    const html = '<div>Keep this</div><script>Remove this</script><p>Keep this too</p>';
+    const result = removeTag(html, 'script');
+    
+    assert.strictEqual(result, '<div>Keep this</div><p>Keep this too</p>');
+  });
+
+  it('should remove multiple instances of the same tag', () => {
+    const html = '<p>First</p><script>One</script><p>Second</p><script>Two</script><p>Third</p>';
+    const result = removeTag(html, 'script');
+    
+    assert.strictEqual(result, '<p>First</p><p>Second</p><p>Third</p>');
+  });
+
+  it('should handle tags with attributes', () => {
+    const html = '<div>Keep</div><script type="text/javascript" src="file.js">Code</script><p>Keep</p>';
+    const result = removeTag(html, 'script');
+    
+    assert.strictEqual(result, '<div>Keep</div><p>Keep</p>');
+  });
+
+  it('should handle self-closing tags', () => {
+    const html = '<div>Keep</div><br /><p>Keep</p>';
+    const result = removeTag(html, 'br');
+    
+    assert.strictEqual(result, '<div>Keep</div><p>Keep</p>');
+  });
+
+  it('should return original HTML if tag does not exist', () => {
+    const html = '<div>Keep this</div><p>Keep this too</p>';
+    const result = removeTag(html, 'script');
+    
+    assert.strictEqual(result, html);
+  });
+
+  it('should handle empty or null input', () => {
+    assert.strictEqual(removeTag('', 'script'), '');
+    assert.strictEqual(removeTag(null, 'script'), null);
+    assert.strictEqual(removeTag(undefined, 'script'), undefined);
+  });
+
+  it('should be case-insensitive', () => {
+    const html = '<div>Keep</div><SCRIPT>Remove</SCRIPT><Script>Remove</Script><p>Keep</p>';
+    const result = removeTag(html, 'script');
+    
+    assert.strictEqual(result, '<div>Keep</div><p>Keep</p>');
+  });
+
+  it('should handle nested content', () => {
+    const html = '<div>Keep</div><script><div>Nested</div></script><p>Keep</p>';
+    const result = removeTag(html, 'script');
+    
+    assert.strictEqual(result, '<div>Keep</div><p>Keep</p>');
+  });
+});