@anyblades/eleventy-blades 0.28.0-beta.2

package/src/filters/if.js

@@ -0,0 +1,79 @@
+// <!--section:code-->```js
+/**
+ * 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);
+}
+/*```
+
+<!--section:docs-->
+### `if`
+
+An inline conditional/ternary operator filter that returns one value if a condition is truthy, and another if it's falsy. Similar to Nunjucks' inline if syntax, it is especially useful in `.liquid` templates.
+
+**Features:**
+
+- Returns `trueValue` if condition is truthy, otherwise returns `falseValue`
+- Treats empty objects `{}` as falsy
+- Default `falseValue` is an empty string if not provided
+- Works with any data type for values
+
+**Examples:** <!-- @TODO: better examples -->
+
+```jinja2
+{# Basic usage (defaults to empty string) #}
+<div class="{{ 'active' | if: isActive | default: 'inactive' }}">Status</div>
+
+{# Toggle CSS classes #}
+<button class="{{ 'btn-primary' | if: isPrimary | default: 'btn-secondary' }}">
+  Click me
+</button>
+
+{# Display different text #}
+<p>{{ 'Online' | if: user.isOnline, 'Offline' }}</p>
+
+{# Use with boolean values #}
+{% set isEnabled = true %}
+<div>{{ 'Enabled' | if: isEnabled, 'Disabled' }}</div>
+
+{# Conditional attribute values #}
+<input type="checkbox" {{ 'checked' | if: isChecked }}>
+
+{# With numeric values #}
+<span class="{{ 'has-items' | if: items.length }}">
+  {{ items.length }} items
+</span>
+
+{# Chain with other filters #}
+{% set cssClass = 'featured' | if: post.featured | upper %}
+```
+<!--section--> */

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,78 @@
+// <!--section:code-->```js
+/**
+ * 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);
+}
+/*```
+
+<!--section:docs-->
+### `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.
+
+**Examples:** <!-- @TODO: better examples -->
+
+```jinja2
+{# Merge configuration objects #}
+{% set defaultConfig = { theme: 'light', lang: 'en' } %}
+{% set userConfig = { theme: 'dark' } %}
+{% set finalConfig = defaultConfig | merge(userConfig) %}
+
+{# Result: { theme: 'dark', lang: 'en' } #}
+```
+
+```jinja2
+{# Merge page metadata with defaults #}
+{% set defaultMeta = {
+  author: 'Site Admin',
+  category: 'general',
+  comments: false
+} %}
+{% set pageMeta = defaultMeta | merge(page.data) %}
+```
+<!--section--> */

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,70 @@
+// <!--section:code-->```js
+/**
+ * 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);
+}
+/*```
+
+<!--section:docs-->
+### `remove_tag`
+
+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 `remove_tag` filter provides a simple way to remove unwanted tags like `<script>`, `<style>`, or any other HTML elements from your content.
+
+**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
+
+**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.
+
+#### Example: Remove all script tags from content <!-- @TODO: better examples -->
+
+```jinja2
+{% set cleanContent = htmlContent | remove_tag('script') %}
+
+{{ cleanContent | safe }}
+```
+<!--section--> */

package/src/filters/remove_tag.test.js

@@ -0,0 +1,60 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import { removeTag } from './remove_tag.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>');
+  });
+});

package/src/filters/section.js

@@ -0,0 +1,125 @@
+// <!--section:code-->```js
+/**
+ * Extract a named section from content marked with HTML comments
+ *
+ * @param {string} content - The content to process
+ * @param {string} sectionName - The section name(s) to extract
+ * @returns {string} The extracted section content
+ */
+export function section(content, sectionName) {
+  if (!content || typeof content !== "string") {
+    return content;
+  }
+
+  if (typeof sectionName !== "string" || !sectionName) {
+    return "";
+  }
+
+  // Normalize section name for comparison (trim whitespace)
+  const targetName = sectionName.trim().toLowerCase();
+
+  // Regex to match section markers with content up to the next section or end of string
+  // Captures: (1) section names, (2) content until next section marker or end
+  const sectionRegex = /<[!]--section:([^>]+)-->([\s\S]*?)(?=<[!]--section|$)/g;
+
+  let results = [];
+  let match;
+
+  // Find all sections
+  while ((match = sectionRegex.exec(content)) !== null) {
+    const namesStr = match[1];
+    const sectionContent = match[2];
+    const names = namesStr.split(",").map((n) => n.trim().toLowerCase());
+
+    // Check if any of the names match the target
+    if (names.includes(targetName)) {
+      results.push(sectionContent);
+    }
+  }
+
+  // Join all matching sections
+  return results.join("");
+}
+
+/**
+ * section filter - Extract a named section from content
+ *
+ * Usage in templates:
+ *   {{ content | section('intro') }}
+ *   {{ content | section('footer') }}
+ *
+ * Content format:
+ *   <¡--section:intro-->
+ *   This is the intro content
+ *   <¡--section:main-->
+ *   This is the main content
+ *   <¡--section:footer,sidebar-->
+ *   This appears in both footer and sidebar sections
+ *
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function sectionFilter(eleventyConfig) {
+  eleventyConfig.addFilter("section", section);
+}
+/*```
+
+<!--section:docs-->
+### `section`
+
+A filter that extracts a named section from content marked with HTML comments. This is useful for splitting a single content file (like a Markdown post) into multiple parts that can be displayed and styled independently in your templates.
+
+**Usage:**
+
+1. Mark sections in your content file (e.g., `post.md`):
+
+⚠️ `NOTE:` The `¡` symbol is used instead of `!` only to give examples below. Use `!` in your actual content files.
+
+```markdown
+# My Post
+
+<¡--section:intro-->
+
+This is the introduction that appears at the top of the page.
+
+<¡--section:main-->
+
+This is the main body of the post with all the details.
+
+<¡--section:summary,sidebar-->
+
+This content appears in both the summary and the sidebar!
+```
+
+2. Use the filter in your templates: <!-- @TODO: better examples -->
+
+```jinja2
+{# Get the intro section #}
+<div class="page-intro">
+  {{ content | section('intro') | safe }}
+</div>
+
+{# Get the main section #}
+<article>
+  {{ content | section('main') | safe }}
+</article>
+
+{# Get the sidebar section #}
+<aside>
+  {{ content | section('sidebar') | safe }}
+</aside>
+```
+
+**Features:**
+
+- **Multiple names**: A single section can have multiple names separated by commas: `<¡--section:name1,name2-->`
+- **Case-insensitive**: Section names are matched without regard to case
+- **Multiple occurrences**: If a section name appears multiple times, the filter concatenates all matching sections
+- **Non-destructive**: Returns extracted content without modifying the original input
+- **EOF support**: Sections continue until the next `<¡--section*-->` marker or the end of the file
+
+**Syntax Rules:**
+
+- Sections start with: `<¡--section:NAME-->` or `<¡--section:NAME1,NAME2-->`
+- Sections end at the next `<¡--section*-->` marker or end of file
+- Whitespace around names and inside comments is automatically trimmed
+<!--section--> */