@anydigital/eleventy-bricks 0.27.0 → 0.28.0-alpha

package/README.md

@@ -2,668 +2,309 @@
 
 A collection of helpful utilities and filters for Eleventy (11ty).
 
-## Installation
+## Install
 
-```bash
+```sh
 npm install @anydigital/eleventy-bricks
 ```
 
-## Usage
-
-You can use this library in two ways:
+Then choose one of the following options:
 
-### Option 1: As a Plugin
+### Option A. Starting 11ty from scratch?
 
-Import and use the entire plugin. You can configure which helpers to enable using the options parameter:
+Consider symlinking entire `eleventy.config.js`:
 
-**ES Modules:**
-
-```javascript
-import eleventyBricks from "@anydigital/eleventy-bricks";
+```sh
+ln -s ./node_modules/@anydigital/eleventy-bricks/src/eleventy.config.js
+```
 
-export default function (eleventyConfig) {
-  eleventyConfig.addPlugin(eleventyBricks, {
-    mdAutoRawTags: true,
-    mdAutoNl2br: true,
-    autoLinkFavicons: true,
-    siteData: true,
-    filters: ["attr_set", "attr_includes", "merge", "remove_tag", "if", "attr_concat", "section", "fetch"],
-  });
+[Learn more below](#symlink-config) and see https://github.com/anydigital/sveleven as a living example.
 
-  // Your other configuration...
-}
-```
+### Option B. Adding to existing 11ty site?
 
-**CommonJS:**
+Use as a plugin in `eleventy.config.js` (recommended):
 
-```javascript
-const eleventyBricks = require("@anydigital/eleventy-bricks");
+```js
+import eleventyBricksPlugin from "@anydigital/eleventy-bricks";
 
-module.exports = function (eleventyConfig) {
-  eleventyConfig.addPlugin(eleventyBricks, {
+export default function (eleventyConfig) {
+  eleventyConfig.addPlugin(eleventyBricksPlugin, {
     mdAutoRawTags: true,
     mdAutoNl2br: true,
     autoLinkFavicons: true,
     siteData: true,
-    filters: ["attr_set", "attr_includes", "merge", "remove_tag", "if", "attr_concat", "section", "fetch"],
+    filters: ["attr_set", "attr_concat", ...],
   });
-
-  // Your other configuration...
-};
+}
 ```
 
-> **Note:** The CommonJS wrapper uses dynamic imports internally and returns async functions. Eleventy's `addPlugin()` method handles this automatically.
+<details><summary>
 
-### Option 2: Import Individual Helpers (Recommended)
+### Option C. Individual imports
 
-Import only the specific helpers you need without using the plugin:
+</summary>
 
-**ES Modules:**
+For advanced usage, import individual components only in `eleventy.config.js`:
 
-```javascript
-import {
-  mdAutoRawTags,
-  mdAutoNl2br,
-  autoLinkFavicons,
-  attrSetFilter,
-  attrIncludesFilter,
-  mergeFilter,
-  removeTagFilter,
-  ifFilter,
-  attrConcatFilter,
-  sectionFilter,
-  fetchFilter,
-  siteData,
-} from "@anydigital/eleventy-bricks";
+```js
+import { siteData, mdAutoRawTags, mdAutoNl2br, autoLinkFavicons, attrSetFilter, attrConcatFilter, ... } from "@anydigital/eleventy-bricks";
 
 export default function (eleventyConfig) {
+  siteData(eleventyConfig);
   mdAutoRawTags(eleventyConfig);
   mdAutoNl2br(eleventyConfig);
   autoLinkFavicons(eleventyConfig);
   attrSetFilter(eleventyConfig);
-  attrIncludesFilter(eleventyConfig);
-  mergeFilter(eleventyConfig);
-  removeTagFilter(eleventyConfig);
-  ifFilter(eleventyConfig);
   attrConcatFilter(eleventyConfig);
-  sectionFilter(eleventyConfig);
-  // fetchFilter is only available if @11ty/eleventy-fetch is installed
-  if (fetchFilter) {
-    fetchFilter(eleventyConfig);
-  }
-  siteData(eleventyConfig);
-
-  // Your other configuration...
+  ...
 }
 ```
 
-**CommonJS:**
-
-```javascript
-const {
-  mdAutoRawTags,
-  mdAutoNl2br,
-  autoLinkFavicons,
-  attrSetFilter,
-  attrIncludesFilter,
-  mergeFilter,
-  removeTagFilter,
-  ifFilter,
-  attrConcatFilter,
-  sectionFilter,
-  fetchFilter,
-  siteData,
-} = require("@anydigital/eleventy-bricks");
-
-module.exports = async function (eleventyConfig) {
-  await mdAutoRawTags(eleventyConfig);
-  await mdAutoNl2br(eleventyConfig);
-  await autoLinkFavicons(eleventyConfig);
-  await attrSetFilter(eleventyConfig);
-  await attrIncludesFilter(eleventyConfig);
-  await mergeFilter(eleventyConfig);
-  await removeTagFilter(eleventyConfig);
-  await ifFilter(eleventyConfig);
-  await attrConcatFilter(eleventyConfig);
-  await sectionFilter(eleventyConfig);
-  // fetchFilter is only available if @11ty/eleventy-fetch is installed
-  if (fetchFilter) {
-    await fetchFilter(eleventyConfig);
-  }
-  await siteData(eleventyConfig);
-
-  // Your other configuration...
-};
-```
-
-> **Note:** When using CommonJS with individual helpers, the config function must be `async` and each helper must be `await`ed, as the CommonJS wrapper uses dynamic imports internally.
-
-## Configuration Options
-
-When using the plugin (Option 1), you can configure which helpers to enable:
-
-| Option             | Type            | Default | Description                                                      |
-| ------------------ | --------------- | ------- | ---------------------------------------------------------------- |
-| `mdAutoRawTags`    | boolean         | `false` | Enable the mdAutoRawTags preprocessor for Markdown files         |
-| `mdAutoNl2br`      | boolean         | `false` | Enable the mdAutoNl2br preprocessor to convert \n to `<br>` tags |
-| `autoLinkFavicons` | boolean         | `false` | Enable the autoLinkFavicons transform to add favicons to links   |
-| `siteData`         | boolean         | `false` | Enable site.year and site.prod global data                       |
-| `filters`          | array of string | `[]`    | Array of filter names to enable (see Available Filters section)  |
-
-**Available filter names for the `filters` array:**
-
-- `'attr_set'` - Override object attributes
-- `'attr_includes'` - Filter collections by attribute values
-- `'merge'` - Merge arrays or objects
-- `'remove_tag'` - Remove HTML elements from content
-- `'if'` - Inline conditional/ternary operator
-- `'attr_concat'` - Concatenate values to an attribute array
-- `'section'` - Extract named sections from content marked with HTML comments
-- `'fetch'` - Fetch remote URLs or local files (requires `@11ty/eleventy-fetch`)
-
-**Example:**
-
-```javascript
-eleventyConfig.addPlugin(eleventyBricks, {
-  mdAutoRawTags: true,
-  mdAutoNl2br: true,
-  autoLinkFavicons: true,
-  siteData: true,
-  filters: ["attr_set", "attr_includes", "merge", "remove_tag", "if", "attr_concat", "section", "fetch"],
-});
-```
-
-### Additional Exports
-
-The plugin also exports the following utility functions for advanced usage:
-
-- `transformAutoRaw(content)`: The transform function used by `mdAutoRawTags` preprocessor. Can be used programmatically to wrap Nunjucks syntax with raw tags.
-- `transformNl2br(content)`: The transform function used by `mdAutoNl2br` preprocessor. Can be used programmatically to convert `\n` sequences to `<br>` tags.
-- `isPlainUrlText(linkText, domain)`: Helper function that checks if link text looks like a plain URL or domain.
-- `cleanLinkText(linkText, domain)`: Helper function that cleans link text by removing protocol, domain, and leading slash.
-- `buildFaviconLink(attrs, domain, text)`: Helper function that builds HTML for a link with favicon.
-- `transformLink(match, attrs, url, linkText)`: The transform function used by `autoLinkFavicons` that transforms a single link to include a favicon.
-- `replaceLinksInHtml(content, transformer)`: Helper function that replaces all anchor links in HTML content with transformed versions.
-- `attrIncludes(collection, attrName, targetValue)`: The core logic for filtering collection items by checking if an attribute array includes a target value. Can be used programmatically to filter collections.
-- `merge(first, ...rest)`: The core merge function used by the `merge` filter. Can be used programmatically to merge arrays or objects.
-- `removeTag(html, tagName)`: The core function used by the `remove_tag` filter. Can be used programmatically to remove HTML tags from content.
-- `iff(trueValue, condition, falseValue)`: The core conditional function used by the `if` filter. Can be used programmatically as a ternary operator.
-- `attrConcat(obj, attr, values)`: The core function used by the `attr_concat` filter. Can be used programmatically to concatenate values to an attribute array.
-- `attrSet(obj, key, value)`: The core function used by the `attr_set` filter. Can be used programmatically to override object attributes.
-- `section(content, sectionName)`: The core function used by the `section` filter. Can be used programmatically to extract named sections from content.
-
-<!--section:11ty-->
-
-## Tricks from [Eleventy Bricks](https://github.com/anydigital/eleventy-bricks) {#eleventy-bricks}
-
-### Filters
-
-|      Input | Nunjucks                                                                       | Liquid <hr>                                          |
-| ---------: | ------------------------------------------------------------------------------ | ---------------------------------------------------- |
-| {.divider} | Logical                                                                        |
-|  `ANY \| ` | `default(VALUE)` <br>= `d(...)`                                                | `default: VALUE`                                     |
-|   `ANY \|` | [`if(TEST, OP, VALUE)`](#if) <sub>currently only `if(TEST)`</sub>              | [`if: TEST, OP, VALUE`](#if)                         |
-| {.divider} | On objects                                                                     |
-|   `OBJ \|` | [`merge(OBJ2)`](#merge)                                                        | [`merge: OBJ2`](#merge)                              |
-| {.divider} | On object attributes                                                           |
-|   `OBJ \|` | `selectattr(BOOL_ATTR)`                                                        | `where: ATTR, VALUE`                                 |
-|   `OBJ \|` | `rejectattr(BOOL_ATTR)`                                                        | N/A                                                  |
-|   `OBJ \|` | [`attr_includes(ARRAY_ATTR, VALUE)`](#attr_includes) <sub>was `where_in`</sub> | [`attr_includes: ARRAY_ATTR, VALUE`](#attr_includes) |
-|   `OBJ \|` | [`attr_set(ATTR, VALUE)`](#attr_set) <sub>was `attr`</sub>                     | [`attr_set: ATTR, VALUE`](#attr_set)                 |
-|   `OBJ \|` | [`attr_concat(ARRAY_ATTR, ARRAY2)`](#attr_concat)                              | [`attr_concat: ARRAY_ATTR, ARRAY2`](#attr_concat)    |
-| {.divider} | Textual                                                                        |
-|  `HTML \|` | `striptags`                                                                    | `strip_html`                                         |
-|  `HTML \|` | [`remove_tag(TAG)`](#remove_tag)                                               | [`remove_tag: TAG`](#remove_tag)                     |
-|  `HTML \|` | [`section(NAME)`](#section)                                                    | [`section: NAME`](#section)                          |
-|   `STR \|` | `remove: STR2`                                                                 | `remove: STR2`                                       |
-| {.divider} | Other                                                                          |
-|   `URL \|` | [`fetch`](#fetch)                                                              | [`fetch`](#fetch)                                    |
-
-Ref:
-
-- https://mozilla.github.io/nunjucks/templating.html#builtin-filters
-- https://shopify.github.io/liquid/
-
-#### `attr_set`
-
-A filter that creates a new object with an overridden attribute value. This is useful for modifying data objects in templates without mutating the original.
-
-**Why use this?**
-
-When working with Eleventy data, you sometimes need to modify an object's properties for a specific use case. The `attr_set` filter provides a clean way to create a modified copy of an object without affecting the original.
+</details>
 
-**Usage:**
+## Command Line Tools
 
-1. Enable the `attr_set` filter in your Eleventy config:
+<!--section:npm-h3-->
 
-```javascript
-import { attrSetFilter } from "@anydigital/eleventy-bricks";
+### 🥷 Reusable 11ty npm scripts <small>via npm workspace</small> <br><sub>from https://github.com/anydigital/eleventy-bricks</sub>
 
-export default function (eleventyConfig) {
-  attrSetFilter(eleventyConfig);
-  // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { filters: ['attr_set'] });
-}
-```
+This package provides a pre-configured `do` folder setup that helps organize your development workflow using npm workspaces. The `do` folder contains scripts for building and running your Eleventy project.
 
-2. Use the filter in your templates:
+**Installation:**
 
-```njk
-{# Create a modified version of a page object #}
-{% set modifiedPage = page | attr_set('title', 'New Title') %}
+1. Install https://github.com/anydigital/eleventy-bricks to reuse pre-defined 11ty scripts from there:
 
-<h1>{{ modifiedPage.title }}</h1>
-<p>Original title: {{ page.title }}</p>
+```sh
+npm install @anydigital/eleventy-bricks
 ```
 
-**Parameters:**
-
-- `obj`: The object to modify
-- `key`: The attribute name to set (string)
-- `value`: The value to set for the attribute (any type)
-
-**Returns:**
-
-A new object with the specified attribute set to the given value. The original object is not modified.
-
-**Features:**
-
-- Non-mutating: Creates a new object, leaving the original unchanged
-- Works with any object type
-- Supports any attribute name and value type
-- Can be chained with other filters
-
-**Examples:**
-
-```njk
-{# Override a single attribute #}
-{% set updatedPost = post | attr_set('featured', true) %}
-
-{# Chain multiple attr_set filters #}
-{% set modifiedPost = post
-  | attr_set('category', 'blog')
-  | attr_set('priority', 1)
-%}
+2. Create a helper folder `do` to symlink the `do/package.json` within:
 
-{# Use in loops #}
-{% for item in collection %}
-  {% set enhancedItem = item | attr_set('processed', true) %}
-  {# ... use enhancedItem ... #}
-{% endfor %}
+```sh
+mkdir do
+cd ./do
+ln -s ../node_modules/@anydigital/eleventy-bricks/src/do/package.json
 ```
 
-#### `attr_includes`
-
-A filter that filters collection items by checking if an attribute array includes a target value. Supports nested attribute names using dot notation.
-
-**Why use this?**
-
-When working with Eleventy collections, you often need to filter items based on tags or other array attributes in front matter. The `attr_includes` filter provides a flexible way to filter by any array attribute, with support for nested properties using dot notation.
-
-**Usage:**
-
-1. Enable the `attr_includes` filter in your Eleventy config:
+3. Finally register `do` folder as npm workspace in your root `package.json`:
 
-```javascript
-import { attrIncludesFilter } from "@anydigital/eleventy-bricks";
-
-export default function (eleventyConfig) {
-  attrIncludesFilter(eleventyConfig);
-  // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { filters: ['attr_includes'] });
+```json {data-caption=./package.json}
+{
+  ...
+  "workspaces": ["do"],
+  "scripts": {
+    "start": "npm -w do run start",
+    "stage": "npm -w do run stage",
+    "build": "npm -w do run build"
+  },
+  ...
 }
 ```
 
-2. Use the filter in your templates:
-
-**Filter by array attribute (tags):**
-
-```njk
-{# Get all posts that include 'javascript' tag #}
-{% set jsPosts = collections.all | attr_includes('data.tags', 'javascript') %}
-
-{% for post in jsPosts %}
-  <h2>{{ post.data.title }}</h2>
-{% endfor %}
-```
-
-**Parameters:**
-
-- `collection`: The collection to filter (array of items)
-- `attrName`: The attribute name to check (string, supports dot notation for nested properties)
-- `targetValue`: The value to check for in the array (any type)
-
-**Features:**
-
-- Works with any array attribute in front matter
-- Supports dot notation for nested properties (e.g., `'data.tags'`, `'data.author.roles'`)
-- Returns empty array if collection is invalid
-- Filters out items where the specified attribute is not an array or doesn't exist
-
-**Examples:**
+**Done!** 🎉 Now you can run:
 
-Front matter:
+- `npm start` to start 11ty dev server with live reload and Tailwind watch mode
+- `npm run stage` to build and serve production-like site locally
+- `npm run build` to finally build the site for production
+- all available scripts: https://github.com/anydigital/eleventy-bricks/blob/main/src/do/package.json
 
-```yaml
----
-title: My Post
-category: blog
-tags: [javascript, tutorial, beginner]
-priority: 1
----
-```
+**Living example:** https://github.com/anydigital/sveleven
 
-Template usage:
+**Benefits:**
 
-```njk
-{# Filter by tag (array) using dot notation for nested properties #}
-{% set jsTutorials = collections.all | attr_includes('data.tags', 'javascript') %}
+- **Clean separation**: Keep build scripts separate from project configuration
+- **Reusable workflows**: Update scripts by upgrading the package
+- **Workspace isolation**: Scripts run in their own workspace context
+- **Easy maintenance**: No need to manually maintain build scripts
 
-{# Filter by numeric value in array #}
-{% set highPriority = collections.all | attr_includes('data.priorities', 1) %}
+<!--section-->
 
-{# Chain filters #}
-{% set recentTutorials = collections.all | attr_includes('data.tags', 'tutorial') | reverse | limit(5) %}
-```
+## Configuration Tools
 
-#### `merge`
+<!--section:config-h3-->
 
-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.
+### 🥷 Symlinked `eleventy.config.js` <br><sub>from https://github.com/anydigital/eleventy-bricks</sub> <a id="symlink-config"></a>
 
-**Why use this?**
+The package includes a fully-configured Eleventy config file `eleventy.config.js` that you can symlink to your project to get:
 
-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.
+- All eleventy-bricks plugins enabled
+- Eleventy Navigation plugin
+- Table of Contents plugin (conditionally loaded if installed)
+- Markdown-it with anchors and attributes
+- YAML data support
+- CLI input directory support
+- Symlink support for development
+- _and more_
 
-**Usage:**
+**Benefits of symlinking:**
 
-1. Enable the `merge` filter in your Eleventy config:
+- **Always up-to-date**: Configuration automatically updates when you upgrade the package
+- **Less maintenance**: No need to manually sync configuration changes
+- **Quick setup**: Get started immediately with best-practice configurations
+- **Easy customization**: Override specific settings by creating your own config that imports from the symlinked version
 
-```javascript
-import { mergeFilter } from "@anydigital/eleventy-bricks";
+**Installation as simple as:**
 
-export default function (eleventyConfig) {
-  mergeFilter(eleventyConfig);
-  // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { filters: ['merge'] });
-}
+```sh
+npm install @anydigital/eleventy-bricks
+ln -s ./node_modules/@anydigital/eleventy-bricks/src/eleventy.config.js
 ```
 
-2. Use the filter in your templates:
+<!--section:cms-h3-->
 
-**Merge arrays:**
+<details><summary>
 
-```njk
-{# Combine two arrays #}
-{% set allItems = featured | merge(regular) %}
+### Symlinked CMS `index.html`
 
-{# Merge multiple arrays #}
-{% set combined = array1 | merge(array2, array3, array4) %}
-
-{% for item in allItems %}
-  <p>{{ item }}</p>
-{% endfor %}
-```
+</summary>
 
-**Merge objects:**
+A ready-to-use Sveltia CMS admin interface for content management.
 
-```njk
-{# Merge configuration objects #}
-{% set defaultConfig = { theme: 'light', lang: 'en' } %}
-{% set userConfig = { theme: 'dark' } %}
-{% set finalConfig = defaultConfig | merge(userConfig) %}
+**Installation:**
 
-{# Result: { theme: 'dark', lang: 'en' } #}
+```sh
+mkdir -p ./src/admin
+cd ./src/admin
+ln -s ../../node_modules/@anydigital/eleventy-bricks/src/admin/index.html
 ```
 
-**Parameters:**
+</details>
 
-- `first`: The first array or object (the base to merge into)
-- `...rest`: One or more arrays or objects to merge in
+## Data Tools & Processors
 
-**Features:**
+<!--section:data&processors-h3-->
 
-- 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
+### Global `siteData` helper
 
-**Examples:**
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/siteData.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/siteData.js)
 
-```njk
-{# Combine featured and regular posts #}
-{% set featuredPosts = collections.all | attr_includes('data.featured', true) %}
-{% set regularPosts = collections.all | attr_includes('data.featured', false) %}
-{% set allPosts = featuredPosts | merge(regularPosts) %}
+Adds global `site` data to your Eleventy project, providing commonly needed values that can be accessed in all templates:
 
-{# Merge page metadata with defaults #}
-{% set defaultMeta = {
-  author: 'Site Admin',
-  category: 'general',
-  comments: false
-} %}
-{% set pageMeta = defaultMeta | merge(page.data) %}
+| Variable          | Value                                                                                                        |
+| ----------------- | ------------------------------------------------------------------------------------------------------------ |
+| `{{ site.year }}` | The current year as a number (e.g., `2026`)                                                                  |
+| `{{ site.prod }}` | Boolean indicating if running in production mode (`true` for `eleventy build`, `false` for `eleventy serve`) |
 
-{# Combine arrays of tags #}
-{% set commonTags = ['javascript', 'html', 'css'] %}
-{% set specialTags = page.data.tags or [] %}
-{% set allTags = commonTags | merge(specialTags) %}
+### 🥷 `autoLinkFavicons` transformer
 
-{# Merge multiple configuration sources #}
-{% set config = defaults | merge(siteConfig, pageConfig, userPrefs) %}
-```
-
-#### `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.
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/processors/autoLinkFavicons.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/processors/autoLinkFavicons.js)
 
-**Why use this?**
+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.
 
-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.
+**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.
 
-**Usage:**
-
-1. Enable the `remove_tag` filter in your Eleventy config:
-
-```javascript
-import { removeTagFilter } from "@anydigital/eleventy-bricks";
+**How it works:**
 
-export default function (eleventyConfig) {
-  removeTagFilter(eleventyConfig);
-  // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { filters: ['remove_tag'] });
-}
-```
+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
 
-2. Use the filter in your templates:
+**Example:**
 
-```njk
-{# Remove all script tags from content #}
-{% set cleanContent = htmlContent | remove_tag('script') %}
+Before processing:
 
-{{ cleanContent | safe }}
+```html
+<a href="https://github.com/anydigital/eleventy-bricks">https://github.com/anydigital/eleventy-bricks</a>
 ```
 
-**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:**
+After processing:
 
-```njk
-{# Remove scripts from user-generated content #}
-{% set userContent = '<p>Hello</p><script>alert("XSS")</script><p>World</p>' %}
-{% set safeContent = userContent | remove_tag('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 | remove_tag('strong') %}
-{# Result: '<div>Bold and <em>italic</em> text</div>' #}
-
-{# Chain multiple remove_tag filters for multiple tags #}
-{% set richContent = page.content %}
-{% set stripped = richContent
-  | remove_tag('script')
-  | remove_tag('style')
-  | remove_tag('iframe')
-%}
-
-{# Remove images for text-only preview #}
-{% set textOnly = htmlContent | remove_tag('img') %}
+```html
+<a href="https://github.com/anydigital/eleventy-bricks" class="whitespace-nowrap" target="_blank">
+  <i><img src="https://www.google.com/s2/favicons?domain=github.com&sz=32" /></i>
+  <span>/anydigital/eleventy-bricks</span>
+</a>
 ```
 
-**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.
+**Rules:**
 
-#### `section`
+- 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
 
-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.
+<details><summary>
 
-**Why use this?**
+### mdAutoRawTags preprocessor
 
-When working with Markdown content in Eleventy, you're usually limited to a single `content` variable. The `section` filter allows you to define multiple named sections within your content using simple HTML comments, giving you granular control over where different parts of your content appear in your layout.
+</summary>
 
-**Usage:**
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/processors/markdown.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/processors/markdown.js)
 
-1. Enable the `section` filter in your Eleventy config:
+Prevents Nunjucks syntax from being processed in Markdown files by automatically wrapping `{{`, `}}`, `{%`, and `%}` with `{% raw %}` tags.
 
-```javascript
-import { sectionFilter } from "@anydigital/eleventy-bricks";
+**Why use this?** When writing documentation or tutorials about templating in Markdown files, you often want to show Nunjucks/Liquid syntax as literal text. This preprocessor automatically escapes these special characters so they display as-is instead of being processed by the template engine.
 
-export default function (eleventyConfig) {
-  sectionFilter(eleventyConfig);
-  // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { filters: ['section'] });
-}
-```
+**Example:**
 
-2. Mark sections in your content file (e.g., `post.md`):
+Before `mdAutoRawTags`, writing this in Markdown:
 
 ```markdown
-# My Post
-
-&lt;!--section:intro-->
-
-This is the introduction that appears at the top of the page.
-
-&lt;!--section:main-->
-
-This is the main body of the post with all the details.
-
-&lt;!--section:summary,sidebar-->
-
-This content appears in both the summary and the sidebar!
+### Using {{ variable }} to output variables
 ```
 
-3. Use the filter in your templates:
-
-```njk
-{# Get the intro section #}
-<div class="page-intro">
-  {{ content | section('intro') | safe }}
-</div>
+Would try to process `{{ variable }}` as a template variable. With `mdAutoRawTags`, it displays exactly as written.
 
-{# Get the main section #}
-<article>
-  {{ content | section('main') | safe }}
-</article>
+</details>
 
-{# Get the sidebar section #}
-<aside>
-  {{ content | section('sidebar') | safe }}
-</aside>
-```
+<details><summary>
 
-**Parameters:**
+### mdAutoNl2br converter
 
-- `content`: The string content to process (usually `content` variable)
-- `sectionName`: The name(s) of the section to extract (string)
+</summary>
 
-**Features:**
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/processors/markdown.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/processors/markdown.js)
 
-- **Multiple names**: A single section can have multiple names separated by commas: `&lt;!--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 `&lt;!--section*-->` marker or the end of the file
+Automatically converts `\n` sequences to `<br>` tags in Markdown content. This is particularly useful for adding line breaks inside Markdown tables where standard newlines don't work.
 
-**Examples:**
+**Why use this?** Markdown tables don't support multi-line content in cells. By using `\n` in your content, this preprocessor will convert it to `<br>` tags, allowing you to display line breaks within table cells and other content.
 
-```njk
-{# Extract multiple sections with same name #}
-{# Example content has two &lt;!--section:note--> blocks #}
-<div class="notes-box">
-  {{ content | section('note') | safe }}
-</div>
+**Example:**
 
-{# Use case-insensitive names #}
-{{ content | section('INTRO') | safe }}
+In your Markdown file:
 
-{# Handle missing sections gracefully (returns empty string) #}
-{% set footer = content | section('non-existent-section') %}
-{% if footer %}
-  <footer>{{ footer | safe }}</footer>
-{% endif %}
+```markdown
+| Column 1               | Column 2                          |
+| ---------------------- | --------------------------------- |
+| Line 1\nLine 2\nLine 3 | Another cell\nWith multiple lines |
 ```
 
-**Syntax Rules:**
-
-- Sections start with: `&lt;!--section:NAME-->` or `&lt;!--section:NAME1,NAME2-->`
-- Sections end at the next `&lt;!--section*-->` marker or end of file
-- Whitespace around names and inside comments is automatically trimmed
-
-#### `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.
-
-**Why use this?**
-
-When you need simple conditional values in templates without verbose if/else blocks, the `if` filter provides a clean inline solution. It's especially useful for class names, attributes, or displaying alternate text based on conditions.
+Will render as:
 
-**Usage:**
+```html
+<td>Line 1<br />Line 2<br />Line 3</td>
+<td>Another cell<br />With multiple lines</td>
+```
 
-1. Enable the `if` filter in your Eleventy config:
+**Note:** This processes literal `\n` sequences (backslash followed by 'n'), not actual newline characters. Type `\n` in your source files where you want line breaks.
 
-```javascript
-import { ifFilter } from "@anydigital/eleventy-bricks";
+</details>
 
-export default function (eleventyConfig) {
-  ifFilter(eleventyConfig);
-  // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { filters: ['if'] });
-}
-```
+<!--section:filters-h2-->
 
-2. Use the filter in your templates:
+## 🥷 Universal 11ty Filters <small>for `.njk` & `.liquid`</small> <sub>from https://github.com/anydigital/eleventy-bricks</sub> <a id="filters"></a>
 
-```njk
-{# Basic usage #}
-<div class="{{ 'active' | if: isActive, 'inactive' }}">Status</div>
+<details><summary>
 
-{# Without falsy value (defaults to empty string) #}
-<span class="{{ 'highlight' | if: shouldHighlight }}">Text</span>
+### `if`
 
-{# With variable values #}
-{% set status = 'Published' | if: post.published, 'Draft' %}
-```
+</summary>
 
-**Parameters:**
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/filters/if.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/filters/if.js)
 
-- `trueValue`: The value to return if condition is truthy
-- `condition`: The condition to evaluate
-- `falseValue`: The value to return if condition is falsy (optional, defaults to empty string)
+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:**
 
@@ -672,11 +313,14 @@ export default function (eleventyConfig) {
 - Default `falseValue` is an empty string if not provided
 - Works with any data type for values
 
-**Examples:**
+**Examples:** <!-- @TODO: better examples -->
+
+```jinja2
+{# Basic usage (defaults to empty string) #}
+<div class="{{ 'active' | if: isActive | default: 'inactive' }}">Status</div>
 
-```njk
 {# Toggle CSS classes #}
-<button class="{{ 'btn-primary' | if: isPrimary, 'btn-secondary' }}">
+<button class="{{ 'btn-primary' | if: isPrimary | default: 'btn-secondary' }}">
   Click me
 </button>
 
@@ -699,171 +343,186 @@ export default function (eleventyConfig) {
 {% set cssClass = 'featured' | if: post.featured | upper %}
 ```
 
-#### `attr_concat`
+</details>
 
-A filter that concatenates values to an attribute array, returning a new object with the combined array. Useful for adding items to arrays like tags, classes, or other list-based attributes.
+<details><summary>
 
-**Why use this?**
+### `merge`
 
-When working with objects that have array attributes (like tags), you often need to add additional values without mutating the original object. The `attr_concat` filter provides a clean way to combine existing array values with new ones, automatically handling duplicates.
+</summary>
 
-**Usage:**
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/filters/merge.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/filters/merge.js)
 
-1. Enable the `attr_concat` filter in your Eleventy config:
+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.
 
-```javascript
-import { attrConcatFilter } from "@anydigital/eleventy-bricks";
+**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.
 
-export default function (eleventyConfig) {
-  attrConcatFilter(eleventyConfig);
-  // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { filters: ['attr_concat'] });
-}
+**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' } #}
 ```
 
-2. Use the filter in your templates:
+```jinja2
+{# Merge page metadata with defaults #}
+{% set defaultMeta = {
+  author: 'Site Admin',
+  category: 'general',
+  comments: false
+} %}
+{% set pageMeta = defaultMeta | merge(page.data) %}
+```
 
-```njk
-{# Add tags to a post object #}
-{% set enhancedPost = post | attr_concat('tags', ['featured', 'popular']) %}
+</details>
+
+<details><summary>
+
+### `attr_set`
 
-{# Add a single value #}
-{% set updatedPost = post | attr_concat('tags', 'important') %}
+</summary>
 
-{# Add values from a JSON string #}
-{% set modifiedPost = post | attr_concat('tags', '["new", "trending"]') %}
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/filters/attr_set.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/filters/attr_set.js)
+
+A filter that creates a new object with an overridden attribute value. This is useful for modifying data objects in templates without mutating the original. Or even constructing an object from scratch.
+
+#### Example: How to pass object(s) as argument(s) to a filter in `.liquid`?
+
+```liquid {data-caption="trick for '| renderContent' filter"}
+{% assign _ctx = null | attr_set: 'collections', collections %}
+{{ ... | renderContent: 'liquid,md', _ctx }}
 ```
 
-**Parameters:**
+</details>
+
+<details><summary>
 
-- `obj`: The object to modify
-- `attr`: The attribute name (must be an array or will be treated as one)
-- `values`: Values to concatenate (can be an array, JSON string array, or single value)
+### `attr_concat`
 
-**Returns:**
+</summary>
 
-A new object with the specified attribute containing the combined unique array. The original object is not modified.
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/filters/attr_concat.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/filters/attr_concat.js)
+
+A filter that concatenates values to an attribute array, returning a new object with the combined array. Useful for adding items to arrays like tags, classes, or other list-based attributes.
+
+**Why use this?** When working with objects that have array attributes (like tags), you often need to add additional values without mutating the original object. The `attr_concat` filter provides a clean way to combine existing array values with new ones, automatically handling duplicates.
 
 **Features:**
 
 - Non-mutating: Creates a new object, leaving the original unchanged
 - Automatically removes duplicates using Set
-- Handles multiple input types: arrays, JSON string arrays, or single values
+- Handles multiple input types: arrays, JSON string arrays (killer feature for `.liquid`), or single values
 - Creates the attribute as an empty array if it doesn't exist
 - Logs an error if the existing attribute is not an array
+- `TBC:` Supports nested attributes (e.g., `data.tags`)
 
-**Examples:**
+#### Example: Add tags to a post object in `.njk`:
 
-```njk
-{# Add multiple tags #}
-{% set post = { title: 'My Post', tags: ['javascript'] } %}
-{% set enhancedPost = post | attr_concat('tags', ['tutorial', 'beginner']) %}
-{# Result: { title: 'My Post', tags: ['javascript', 'tutorial', 'beginner'] } #}
-
-{# Add single value #}
-{% set updatedPost = post | attr_concat('tags', 'featured') %}
-{# Result: { title: 'My Post', tags: ['javascript', 'tutorial', 'beginner', 'featured'] } #}
-
-{# No duplicates #}
-{% set deduped = post | attr_concat('tags', ['javascript', 'advanced']) %}
-{# Result: Only 'advanced' is added, 'javascript' already exists #}
-
-{# Chain multiple attr_concat filters #}
-{% set finalPost = post
-  | attr_concat('tags', 'popular')
-  | attr_concat('categories', ['tech', 'programming'])
-%}
-
-{# Use in loops to enhance collection items #}
-{% for item in collections.posts %}
-  {% set enhancedItem = item | attr_concat('data.tags', 'blog') %}
-  {# ... use enhancedItem ... #}
-{% endfor %}
+```jinja2
+{% set enhancedPost = post | attr_concat('tags', ['featured', 'popular']) %}
 ```
 
-#### `fetch`
-
-A filter that fetches content from remote URLs or local files. For remote URLs, it uses `@11ty/eleventy-fetch` to download and cache files. For local paths, it reads files relative to the input directory.
+#### `PRO` Example: Add scripts and styles to the `site` object in `.liquid`:
 
-**Why use this?**
+```liquid
+{% capture _ %}[
+  "https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.min.css",
+  "https://cdn.jsdelivr.net/npm/prismjs@1/plugins/treeview/prism-treeview.min.css",
+  "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7/css/all.min.css",
+  "/styles.css"
+]{% endcapture %}
+{% assign site = site | attr_concat: 'styles', _ %}
 
-When building static sites, you often need to include content from external sources or reuse content from local files. The `fetch` filter provides a unified way to retrieve content from both remote URLs and local files, with automatic caching for remote resources to improve build performance.
+{% capture _ %}[
+  "https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js",
+  "https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js",
+  "https://cdn.jsdelivr.net/npm/prismjs@1/plugins/treeview/prism-treeview.min.js"
+]{% endcapture %}
+{% assign site = site | attr_concat: 'scripts', _ %}
+```
 
-**Requirements:**
+</details>
 
-This filter requires the `@11ty/eleventy-fetch` package to be installed:
+<details><summary>
 
-```bash
-npm install @11ty/eleventy-fetch
-```
+### `attr_includes`
 
-> **Note:** If `@11ty/eleventy-fetch` is not installed, this filter will not be available. The plugin automatically detects whether the package is installed and only enables the filter if it's present.
+</summary>
 
-**Usage:**
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/filters/attr_includes.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/filters/attr_includes.js)
 
-1. Install the required dependency:
+A filter that filters a list of items by checking if an attribute array includes a target value. Supports nested attribute names using dot notation.
 
-```bash
-npm install @11ty/eleventy-fetch
-```
+**Why use this?** When working with Eleventy collections, you often need to filter items based on tags or other array attributes in front matter. The `attr_includes` filter provides a flexible way to filter by any array attribute, with support for nested properties using dot notation.
 
-2. Enable the `fetch` filter in your Eleventy config:
+#### Example: Get all posts that include `#javascript` tag
 
-```javascript
-import { fetchFilter } from "@anydigital/eleventy-bricks";
+```jinja2 {data-caption="in .njk:"}
+{% set js_posts = collections.all | attr_includes('data.tags', '#javascript') %}
 
-export default function (eleventyConfig) {
-  fetchFilter(eleventyConfig);
-  // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { filters: ['fetch'] });
-}
+{% for post in js_posts %}
+  <h2>{{ post.data.title }}</h2>
+{% endfor %}
 ```
 
-3. Use the filter in your templates:
+</details>
 
-**Fetch remote URLs:**
+<details><summary>
 
-```njk
-{# Fetch content from a remote URL #}
-{% set externalContent = "https://example.com/data.json" | fetch %}
-{{ externalContent }}
+### `fetch`
 
-{# Fetch and parse JSON #}
-{% set apiData = "https://api.example.com/posts" | fetch %}
-{% set posts = apiData | fromJson %}
-```
+</summary>
+
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/filters/fetch.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/filters/fetch.js)
 
-**Fetch local files:**
+A filter that fetches content from remote URLs or local files. For remote URLs, it uses `@11ty/eleventy-fetch` to download and cache files. For local paths, it reads files relative to the input directory.
 
-```njk
-{# Fetch content from a local file (relative to input directory) #}
-{% set localData = "_data/content.txt" | fetch %}
-{{ localData }}
+**Why use this?** When building static sites, you often need to include content from external sources or reuse content from local files. The `fetch` filter provides a unified way to retrieve content from both remote URLs and local files, with automatic caching for remote resources to improve build performance.
 
-{# Include content from another file #}
-{% set snippet = "_includes/snippets/example.md" | fetch %}
-{{ snippet | markdown | safe }}
-```
+**Requirements:** This filter requires the `@11ty/eleventy-fetch` package to be installed:
 
-**Parameters:**
+```bash
+npm install @11ty/eleventy-fetch
+```
 
-- `url`: A URL (starting with `http://` or `https://`) or a local file path (relative to the input directory)
+> `NOTE:` If `@11ty/eleventy-fetch` is not installed, this filter will not be available. The plugin automatically detects whether the package is installed and only enables the filter if it's present.
 
 **Features:**
 
-- **Remote URLs**: Downloads and caches content using `@11ty/eleventy-fetch`
-  - Caches files for 1 day by default
-  - Stores cached files in `[input-dir]/_downloads/` directory
-  - Automatically revalidates after cache expires
-- **Local files**: Reads files relative to the Eleventy input directory
-  - No caching needed for local files
-  - Supports any file type that can be read as text
+- Supports a URL (starting with `http://` or `https://`) or a local file path (relative to the input directory):
+  - **Remote URLs**: Downloads and caches content using `@11ty/eleventy-fetch`
+    - Caches files for 1 day by default
+    - Stores cached files in `[input-dir]/_downloads/` directory
+    - Automatically revalidates after cache expires
+  - **Local files**: Reads files relative to the Eleventy input directory
+    - No caching needed for local files
+    - Supports any file type that can be read as text
 - **Error handling**: Throws descriptive errors if fetching fails
 - **Conditional loading**: Only available when `@11ty/eleventy-fetch` is installed
 
+**Use Cases:**
+
+- Fetch content from external APIs during build time
+- Include README files from GitHub repositories
+- Reuse content from local files across multiple pages
+- Download and inline external CSS or JavaScript
+- Fetch data from headless CMS or external data sources
+- Include shared content snippets without using Eleventy's include syntax
+
+> `NOTE:` The filter returns raw text content. Use Eleventy's built-in filters like `| safe`, `| markdown`, or `| fromJson` to process the content as needed.
+
 **Examples:**
 
-```njk
+```jinja2
 {# Fetch and display remote content #}
 {% set readme = "https://raw.githubusercontent.com/user/repo/main/README.md" | fetch %}
 <div class="readme">
@@ -891,379 +550,152 @@ export default function (eleventyConfig) {
 {{ sharedContent | safe }}
 ```
 
-**Cache Directory:**
-
-Remote files are cached in the `_downloads` folder within your input directory:
-
-```
-your-project/
-├── src/              (or your input directory)
-│   ├── _downloads/   (cached remote files)
-│   ├── index.njk
-│   └── ...
-```
-
-**Use Cases:**
-
-- Fetch content from external APIs during build time
-- Include README files from GitHub repositories
-- Reuse content from local files across multiple pages
-- Download and inline external CSS or JavaScript
-- Fetch data from headless CMS or external data sources
-- Include shared content snippets without using Eleventy's include syntax
-
-**Note:** The filter returns raw text content. Use Eleventy's built-in filters like `| safe`, `| markdown`, or `| fromJson` to process the content as needed.
-
-### Transforms
-
-#### mdAutoRawTags
-
-Prevents Nunjucks syntax from being processed in Markdown files by automatically wrapping `{{`, `}}`, `{%`, and `%}` with `{% raw %}` tags.
-
-**Why use this?**
-
-When writing documentation or tutorials about templating in Markdown files, you often want to show Nunjucks/Liquid syntax as literal text. This preprocessor automatically escapes these special characters so they display as-is instead of being processed by the template engine.
-
-**Usage:**
-
-1. Enable `mdAutoRawTags` in your Eleventy config:
-
-```javascript
-import { mdAutoRawTags } from "@anydigital/eleventy-bricks";
-
-export default function (eleventyConfig) {
-  mdAutoRawTags(eleventyConfig);
-  // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { mdAutoRawTags: true });
-}
-```
-
-**Example:**
-
-Before `mdAutoRawTags`, writing this in Markdown:
-
-```markdown
-Use {{ variable }} to output variables.
-```
+</details>
 
-Would try to process `{{ variable }}` as a template variable. With `mdAutoRawTags`, it displays exactly as written.
+<details><summary>
 
-#### mdAutoNl2br
+### `section`
 
-Automatically converts `\n` sequences to `<br>` tags in Markdown content. This is particularly useful for adding line breaks inside Markdown tables where standard newlines don't work.
+</summary>
 
-**Why use this?**
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/filters/section.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/filters/section.js)
 
-Markdown tables don't support multi-line content in cells. By using `\n` in your content, this preprocessor will convert it to `<br>` tags, allowing you to display line breaks within table cells and other content.
+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. Enable `mdAutoNl2br` in your Eleventy config:
-
-```javascript
-import { mdAutoNl2br } from "@anydigital/eleventy-bricks";
-
-export default function (eleventyConfig) {
-  mdAutoNl2br(eleventyConfig);
-  // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { mdAutoNl2br: true });
-}
-```
-
-**Example:**
+1. Mark sections in your content file (e.g., `post.md`):
 
-In your Markdown file:
+⚠️ `NOTE:` The `¡` symbol is used instead of `!` only to give examples below. Use `!` in your actual content files.
 
 ```markdown
-| Column 1               | Column 2                          |
-| ---------------------- | --------------------------------- |
-| Line 1\nLine 2\nLine 3 | Another cell\nWith multiple lines |
-```
-
-Will render as:
-
-```html
-<td>Line 1<br />Line 2<br />Line 3</td>
-<td>Another cell<br />With multiple lines</td>
-```
-
-**Note:** This processes literal `\n` sequences (backslash followed by 'n'), not actual newline characters. Type `\n` in your source files where you want line breaks.
-
-#### autoLinkFavicons
-
-Automatically adds favicon images from Google's favicon service to links that display plain URLs or domain names. This transform 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 transform automatically detects these plain-text URL links and enhances them with favicon images, making them more visually appealing and easier to recognize.
-
-**Usage:**
-
-1. Enable `autoLinkFavicons` in your Eleventy config:
-
-```javascript
-import { autoLinkFavicons } from "@anydigital/eleventy-bricks";
-
-export default function (eleventyConfig) {
-  autoLinkFavicons(eleventyConfig);
-  // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { autoLinkFavicons: true });
-}
-```
-
-**How it works:**
-
-The transform:
-
-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 transformation:
-
-```html
-<a href="https://github.com/anydigital/eleventy-bricks">https://github.com/anydigital/eleventy-bricks</a>
-```
-
-After transformation:
-
-```html
-<a href="https://github.com/anydigital/eleventy-bricks" class="whitespace-nowrap" target="_blank">
-  <i><img src="https://www.google.com/s2/favicons?domain=github.com&sz=32" /></i>
-  <span>/anydigital/eleventy-bricks</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 transformed 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
-
-**Styling:**
-
-You can style the favicon icons with CSS:
-
-```css
-/* Style the favicon wrapper */
-a i {
-  display: inline-block;
-  margin-right: 0.25em;
-}
-
-/* Style the favicon image */
-a i img {
-  width: 16px;
-  height: 16px;
-  vertical-align: middle;
-}
-```
-
-**Note:** This transform only processes HTML output files (those ending in `.html`). It does not modify the original content files.
-
-### Global Data
-
-Adds global site data to your Eleventy project, providing commonly needed values that can be accessed in all templates.
+# My Post
 
-**Why use this?**
+<¡--section:intro-->
 
-Many websites need access to the current year (for copyright notices) and environment information (to conditionally enable features based on production vs development). This helper provides these as global `site` data without manually setting them up.
+This is the introduction that appears at the top of the page.
 
-**Usage:**
+<¡--section:main-->
 
-1. Enable `siteData` in your Eleventy config:
+This is the main body of the post with all the details.
 
-```javascript
-import { siteData } from "@anydigital/eleventy-bricks";
+<¡--section:summary,sidebar-->
 
-export default function (eleventyConfig) {
-  siteData(eleventyConfig);
-  // Or use as plugin:
-  // eleventyConfig.addPlugin(eleventyBricks, { siteData: true });
-}
+This content appears in both the summary and the sidebar!
 ```
 
-2. Use the global data in your templates:
+2. Use the filter in your templates: <!-- @TODO: better examples -->
 
-**Current Year:**
-
-```njk
-<footer>
-  <p>&copy; {{ site.year }} Your Company Name. All rights reserved.</p>
-</footer>
-```
+```jinja2
+{# Get the intro section #}
+<div class="page-intro">
+  {{ content | section('intro') | safe }}
+</div>
 
-**Environment Check:**
+{# Get the main section #}
+<article>
+  {{ content | section('main') | safe }}
+</article>
 
-```njk
-{% if site.prod %}
-  <!-- Production-only features -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
-{% else %}
-  <!-- Development-only features -->
-  <div class="dev-toolbar">Development Mode</div>
-{% endif %}
+{# Get the sidebar section #}
+<aside>
+  {{ content | section('sidebar') | safe }}
+</aside>
 ```
 
-**Available Data:**
-
-- `site.year`: The current year as a number (e.g., `2026`)
-- `site.prod`: Boolean indicating if running in production mode (`true` for `eleventy build`, `false` for `eleventy serve`)
-
 **Features:**
 
-- Automatically updates the year value
-- Detects production vs development mode based on `ELEVENTY_RUN_MODE` environment variable
-- Available globally in all templates without manual setup
-- No configuration required
-
-**Examples:**
-
-```njk
-{# Copyright notice #}
-<p>Copyright &copy; {{ site.year }} My Site</p>
-
-{# Conditional loading of analytics #}
-{% if site.prod %}
-  <script src="/analytics.js"></script>
-{% endif %}
-
-{# Different behavior in dev vs prod #}
-{% if site.prod %}
-  <link rel="stylesheet" href="/css/styles.min.css">
-{% else %}
-  <link rel="stylesheet" href="/css/styles.css">
-  <script src="/live-reload.js"></script>
-{% endif %}
-```
+- **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
 
-### Symlinked Configuration Files
+**Syntax Rules:**
 
-The package includes pre-configured starter files in `node_modules/@anydigital/eleventy-bricks/src/` that you can symlink to your project for quick setup:
+- 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
 
-Benefits of Symlinking:
+</details>
 
-- **Always up-to-date**: Configuration automatically updates when you upgrade the package
-- **Less maintenance**: No need to manually sync configuration changes
-- **Quick setup**: Get started immediately with best-practice configurations
-- **Easy customization**: Override specific settings by creating your own config that imports from the symlinked version
+<details><summary>
 
-If you prefer to customize the configurations extensively, you can copy the files instead.
+### `remove_tag`
 
-#### eleventy.config.js
+</summary>
 
-A fully-configured Eleventy config file with:
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/filters/remove_tag.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/filters/remove_tag.js)
 
-- All eleventy-bricks plugins enabled
-- Eleventy Navigation plugin
-- Table of Contents plugin (conditionally loaded if installed)
-- Markdown-it with anchors and attributes
-- YAML data support
-- CLI input directory support
-- Symlink support for development
+A filter that removes a specified HTML element from provided HTML content. It removes the tag along with its content, including self-closing tags.
 
-**Required dependencies:**
+**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.
 
-```bash
-npm install @11ty/eleventy-navigation markdown-it markdown-it-anchor markdown-it-attrs js-yaml minimist
-```
+**Features:**
 
-**Optional dependencies:**
+- 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
 
-```bash
-# For the fetch filter
-npm install @11ty/eleventy-fetch
+**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.
 
-# For table of contents generation
-npm install @uncenter/eleventy-plugin-toc
-```
+#### Example: Remove all script tags from content <!-- @TODO: better examples -->
 
-**Symlink to your project:**
+```jinja2
+{% set cleanContent = htmlContent | remove_tag('script') %}
 
-```bash
-ln -s node_modules/@anydigital/eleventy-bricks/src/eleventy.config.js eleventy.config.js
+{{ cleanContent | safe }}
 ```
 
-#### admin/index.html
-
-A ready-to-use Sveltia CMS admin interface for content management.
-
-**Symlink to your project:**
+</details>
 
-```bash
-mkdir -p admin
-ln -s ../node_modules/@anydigital/eleventy-bricks/src/admin/index.html admin/index.html
-```
+<details><summary>
 
-<!--section:npm,11ty-->
+### `strip_tag`
 
-### Using the `do` Folder Pattern
+</summary>
 
-This package provides a pre-configured `do` folder setup that helps organize your development workflow using npm workspaces. The `do` folder contains scripts for building and running your Eleventy project.
+🧩 [Install via Plugin](https://github.com/anydigital/eleventy-bricks#install) — or copy-paste from
+[`src/filters/strip_tag.js`](https://github.com/anydigital/eleventy-bricks/blob/main/src/filters/strip_tag.js)
 
-**Setup:**
+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.
 
-1. Create a `do` folder in your project root:
+**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.
 
-```bash
-mkdir do
-```
+**Features:**
 
-2. Symlink the package.json from the eleventy-bricks package:
+- 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
 
-```bash
-ln -s node_modules/@anydigital/eleventy-bricks/src/do/package.json do/package.json
-```
+#### Example: Unwrap a wrapping `<div>` from content
 
-3. Configure your root `package.json` to use npm workspaces:
+```jinja2
+{% set unwrapped = htmlContent | strip_tag('div') %}
 
-```json
-{
-  "name": "my-project",
-  "workspaces": ["do"],
-  "scripts": {
-    "build": "npm -w do run build",
-    "start": "npm -w do run start"
-  }
-}
+{{ unwrapped | safe }}
 ```
 
-**Usage:**
-
-Run your Eleventy project:
+Input:
 
-```bash
-npm start
+```html
+<div class="wrapper">
+  <p>Hello</p>
+  <p>World</p>
+</div>
 ```
 
-Build for production:
+Output:
 
-```bash
-npm run build
+```html
+<p>Hello</p>
+<p>World</p>
 ```
 
-**Available Scripts in `do` folder:**
-
-- `build` - Build the site with Eleventy and minify CSS with Tailwind
-- `start` - Start Eleventy dev server with live reload and Tailwind watch mode
-- `stage` - Clean build and serve locally for preview
-- `11ty` - Run Eleventy commands directly
-- `11ty:clean` - Remove the `_site` output directory
-- `tw` - Run Tailwind CSS commands
-
-**Benefits:**
-
-- **Clean separation**: Keep build scripts separate from project configuration
-- **Reusable workflows**: Update scripts by upgrading the package
-- **Workspace isolation**: Scripts run in their own workspace context
-- **Easy maintenance**: No need to manually maintain build scripts
+</details>