@anydigital/11ty-bricks 1.0.0-alpha → 1.0.0-alpha.10

package/README.md

@@ -21,8 +21,8 @@ Import and use the entire plugin. You can configure which helpers to enable usin
 import eleventyBricks from "@anydigital/11ty-bricks";
 
 export default function(eleventyConfig) {
-  eleventyBricks(eleventyConfig, {
-    autoRaw: true  // Enable autoRaw preprocessor (default: false)
+  eleventyConfig.addPlugin(eleventyBricks, {
+    mdAutoRawTags: true  // Enable mdAutoRawTags preprocessor (default: false)
   });
   
   // Your other configuration...
@@ -34,8 +34,8 @@ export default function(eleventyConfig) {
 const eleventyBricks = require("@anydigital/11ty-bricks");
 
 module.exports = function(eleventyConfig) {
-  eleventyBricks(eleventyConfig, {
-    autoRaw: true  // Enable autoRaw preprocessor (default: false)
+  eleventyConfig.addPlugin(eleventyBricks, {
+    mdAutoRawTags: true  // Enable mdAutoRawTags preprocessor (default: false)
   });
   
   // Your other configuration...
@@ -48,10 +48,16 @@ Import only the specific helpers you need without using the plugin:
 
 **ES Modules:**
 ```javascript
-import { autoRaw } from "@anydigital/11ty-bricks";
+import { bricks, mdAutoRawTags, mdAutoNl2br, fragments, setAttrFilter, byAttrFilter, siteData } from "@anydigital/11ty-bricks";
 
 export default function(eleventyConfig) {
-  autoRaw(eleventyConfig);
+  bricks(eleventyConfig);
+  mdAutoRawTags(eleventyConfig);
+  mdAutoNl2br(eleventyConfig);
+  fragments(eleventyConfig);
+  setAttrFilter(eleventyConfig);
+  byAttrFilter(eleventyConfig);
+  siteData(eleventyConfig);
   
   // Your other configuration...
 }
@@ -59,10 +65,16 @@ export default function(eleventyConfig) {
 
 **CommonJS:**
 ```javascript
-const { autoRaw } = require("@anydigital/11ty-bricks");
+const { bricks, mdAutoRawTags, mdAutoNl2br, fragments, setAttrFilter, byAttrFilter, siteData } = require("@anydigital/11ty-bricks");
 
 module.exports = function(eleventyConfig) {
-  autoRaw(eleventyConfig);
+  bricks(eleventyConfig);
+  mdAutoRawTags(eleventyConfig);
+  mdAutoNl2br(eleventyConfig);
+  fragments(eleventyConfig);
+  setAttrFilter(eleventyConfig);
+  byAttrFilter(eleventyConfig);
+  siteData(eleventyConfig);
   
   // Your other configuration...
 };
@@ -74,33 +86,560 @@ When using the plugin (Option 1), you can configure which helpers to enable:
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
-| `autoRaw` | boolean | `false` | Enable the autoRaw preprocessor for Markdown files |
+| `bricks` | boolean | `false` | Enable the bricks system for dependency management |
+| `mdAutoRawTags` | boolean | `false` | Enable the mdAutoRawTags preprocessor for Markdown files |
+| `mdAutoNl2br` | boolean | `false` | Enable the mdAutoNl2br preprocessor to convert \n to `<br>` tags |
+| `fragments` | boolean | `false` | Enable the fragment shortcode for including content from fragments |
+| `setAttrFilter` | boolean | `false` | Enable the setAttr filter for overriding object attributes |
+| `byAttrFilter` | boolean | `false` | Enable the byAttr filter for filtering collections by attribute values |
+| `siteData` | boolean | `false` | Enable site.year and site.isProd global data |
 
 **Example:**
 ```javascript
-eleventyBricks(eleventyConfig, {
-  autoRaw: true
+eleventyConfig.addPlugin(eleventyBricks, {
+  bricks: true,
+  mdAutoRawTags: true,
+  byAttrFilter: true,
+  siteData: true
 });
 ```
 
-## Available Helpers
+## Available 11ty Helpers
 
-### autoRaw
+### bricks
+
+A dependency management system for Eleventy that automatically collects and injects CSS and JavaScript dependencies (both external and inline) per page. This allows brick components to declare their dependencies, and the system will inject them in the correct location in your HTML.
+
+**Why use this?**
+
+When building reusable components (bricks) in Eleventy, you often need to include CSS and JavaScript dependencies. Instead of manually adding these to every page, `bricks` automatically:
+- Collects dependencies from all bricks used on a page
+- Categorizes them (external CSS, external JS, inline styles, inline scripts)
+- Injects them in the correct location in your HTML output
+
+**How it works:**
+
+1. Use the `bricksDependencies` shortcode in your base template to mark where dependencies should be injected
+2. Use the `brick` shortcode to register and render brick components that declare their dependencies
+3. The system automatically collects all dependencies and injects them when the page is built
+
+**Usage:**
+
+1. Enable `bricks` in your Eleventy config:
+
+```javascript
+import { bricks } from "@anydigital/11ty-bricks";
+
+export default function(eleventyConfig) {
+  bricks(eleventyConfig);
+  // Or use as plugin:
+  // eleventyConfig.addPlugin(eleventyBricks, { bricks: true });
+}
+```
+
+2. Add the `bricksDependencies` shortcode in your base template (typically in the `<head>` section):
+
+```njk
+<head>
+  <meta charset="UTF-8">
+  <title>My Site</title>
+  {% bricksDependencies [
+    ... (global dependencies can be set here) ...
+  ] %}
+  <!-- Other head content -->
+</head>
+```
+
+3. Create brick components that declare their dependencies:
+
+```javascript
+// myBrick.js
+export default {
+  dependencies: [
+    'https://cdn.example.com/library.css',
+    'https://cdn.example.com/library.js'
+  ],
+  style: `
+    .my-component { color: blue; }
+  `,
+  script: `
+    console.log('Component initialized');
+  `,
+  render: function() {
+    return '<div class="my-component">Hello World</div>';
+  }
+};
+```
+
+4. Use the `brick` shortcode in your templates:
+
+```njk
+{% set myBrick = require('./myBrick.js') %}
+{% brick myBrick %}
+```
+
+**Brick Component Structure:**
+
+A brick component is a JavaScript object with the following optional properties:
+
+- `dependencies`: Array of URLs to external CSS or JavaScript files (e.g., `['https://cdn.example.com/style.css', 'https://cdn.example.com/script.js']`)
+- `style`: String containing inline CSS
+- `script`: String containing inline JavaScript
+- `render`: Function that returns the HTML markup for the component
+
+**Output:**
+
+The system will automatically inject all dependencies in the order they were registered:
+
+```html
+<head>
+  <meta charset="UTF-8">
+  <title>My Site</title>
+  <link rel="stylesheet" href="https://cdn.example.com/library.css">
+  <style>.my-component { color: blue; }</style>
+  <script src="https://cdn.example.com/library.js"></script>
+  <script>console.log('Component initialized');</script>
+  <!-- Other head content -->
+</head>
+```
+
+**Features:**
+
+- Automatic dependency collection per page
+- Categorizes dependencies (CSS vs JS, external vs inline)
+- Deduplicates dependencies (using Sets internally)
+- Works with both external URLs and inline code
+- Clears registry before each build to prevent stale data
+
+### 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 helper automatically escapes these special characters so they display as-is instead of being processed by the template engine.
+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/11ty-bricks";
+
+export default function(eleventyConfig) {
+  mdAutoRawTags(eleventyConfig);
+  // Or use as plugin:
+  // eleventyConfig.addPlugin(eleventyBricks, { mdAutoRawTags: true });
+}
+```
 
 **Example:**
 
-Before `autoRaw`, writing this in Markdown:
+Before `mdAutoRawTags`, writing this in Markdown:
 ```markdown
 Use {{ variable }} to output variables.
 ```
 
-Would try to process `{{ variable }}` as a template variable. With `autoRaw`, it displays exactly as written.
+Would try to process `{{ variable }}` as a template variable. With `mdAutoRawTags`, it displays exactly as written.
+
+### mdAutoNl2br
+
+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.
+
+**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.
+
+**Usage:**
+
+1. Enable `mdAutoNl2br` in your Eleventy config:
+
+```javascript
+import { mdAutoNl2br } from "@anydigital/11ty-bricks";
+
+export default function(eleventyConfig) {
+  mdAutoNl2br(eleventyConfig);
+  // Or use as plugin:
+  // eleventyConfig.addPlugin(eleventyBricks, { mdAutoNl2br: true });
+}
+```
+
+**Example:**
+
+In your Markdown file:
+```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.
+
+### fragment
+
+A shortcode that includes content from fragment files stored in the `_fragments` directory. The content will be processed by the template engine.
+
+**Why use this?**
+
+Fragments allow you to organize reusable content snippets in a dedicated directory and include them in your templates. This is useful for:
+- Reusable content blocks
+- Shared template sections
+- Component-like content organization
+
+**Usage:**
+
+1. Enable `fragments` in your Eleventy config:
+
+```javascript
+import { fragments } from "@anydigital/11ty-bricks";
+
+export default function(eleventyConfig) {
+  fragments(eleventyConfig);
+  // Or use as plugin:
+  // eleventyConfig.addPlugin(eleventyBricks, { fragments: true });
+}
+```
+
+2. Create fragment files in the `_fragments` directory (relative to your input directory):
+
+```
+your-project/
+  _fragments/
+    header.njk
+    footer.njk
+    callout.md
+```
+
+3. Use the `fragment` shortcode in your templates:
+
+```njk
+{% fragment "header.njk" %}
+
+<main>
+  <!-- Your content -->
+</main>
+
+{% fragment "footer.njk" %}
+```
+
+**Parameters:**
+
+- `path`: The path to the fragment file relative to the `_fragments` directory
+
+**Features:**
+
+- Reads files from `_fragments` directory in your input directory
+- Content is processed by the template engine
+- Supports any template language that Eleventy supports
+- Shows helpful error comment if fragment is not found
+
+**Example:**
+
+Create `_fragments/callout.njk`:
+```njk
+<div class="callout callout-{{ type | default('info') }}">
+  {{ content }}
+</div>
+```
+
+Use it in your template:
+```njk
+{% set type = "warning" %}
+{% set content = "This is important!" %}
+{% fragment "callout.njk" %}
+```
+
+### setAttr
+
+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 `setAttr` filter provides a clean way to create a modified copy of an object without affecting the original.
+
+**Usage:**
+
+1. Enable `setAttr` in your Eleventy config:
+
+```javascript
+import { setAttrFilter } from "@anydigital/11ty-bricks";
+
+export default function(eleventyConfig) {
+  setAttrFilter(eleventyConfig);
+  // Or use as plugin:
+  // eleventyConfig.addPlugin(eleventyBricks, { setAttrFilter: true });
+}
+```
+
+2. Use the filter in your templates:
+
+```njk
+{# Create a modified version of a page object #}
+{% set modifiedPage = page | setAttr('title', 'New Title') %}
+
+<h1>{{ modifiedPage.title }}</h1>
+<p>Original title: {{ page.title }}</p>
+```
+
+**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 | setAttr('featured', true) %}
+
+{# Chain multiple setAttr filters #}
+{% set modifiedPost = post 
+  | setAttr('category', 'blog') 
+  | setAttr('priority', 1) 
+%}
+
+{# Use in loops #}
+{% for item in collection %}
+  {% set enhancedItem = item | setAttr('processed', true) %}
+  {# ... use enhancedItem ... #}
+{% endfor %}
+```
+
+### byAttr
+
+A filter that filters collection items by attribute value. It checks if an item's attribute matches a target value. If the attribute is an array, it checks if the array includes the target value.
+
+**Why use this?**
+
+When working with Eleventy collections, you often need to filter items based on front matter data. The `byAttr` filter provides a flexible way to filter by any attribute, with special handling for array attributes (like tags).
+
+**Usage:**
+
+1. Enable `byAttr` in your Eleventy config:
+
+```javascript
+import { byAttrFilter } from "@anydigital/11ty-bricks";
+
+export default function(eleventyConfig) {
+  byAttrFilter(eleventyConfig);
+  // Or use as plugin:
+  // eleventyConfig.addPlugin(eleventyBricks, { byAttrFilter: true });
+}
+```
+
+2. Use the filter in your templates:
+
+**Filter by exact attribute match:**
+```njk
+{# Get all posts with category 'blog' #}
+{% set blogPosts = collections.all | byAttr('category', 'blog') %}
+
+{% for post in blogPosts %}
+  <h2>{{ post.data.title }}</h2>
+{% endfor %}
+```
+
+**Filter by array attribute (tags):**
+```njk
+{# Get all posts that include 'javascript' tag #}
+{% set jsPosts = collections.all | byAttr('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)
+- `targetValue`: The value to match against (any type)
+
+**Features:**
+
+- Works with any attribute in front matter
+- Handles both `item.data.attrName` and `item.attrName` patterns
+- Special handling for array attributes (uses `includes()` check)
+- Returns empty array if collection is invalid
+- Filters out items without the specified attribute
+
+**Examples:**
+
+Front matter:
+```yaml
+---
+title: My Post
+category: blog
+tags: [javascript, tutorial, beginner]
+priority: 1
+---
+```
+
+Template usage:
+```njk
+{# Filter by category #}
+{% set blogPosts = collections.all | byAttr('category', 'blog') %}
+
+{# Filter by tag (array) #}
+{% set jsTutorials = collections.all | byAttr('tags', 'javascript') %}
+
+{# Filter by numeric value #}
+{% set highPriority = collections.all | byAttr('priority', 1) %}
+
+{# Chain filters #}
+{% set recentBlogPosts = collections.all | byAttr('category', 'blog') | reverse | limit(5) %}
+```
+
+### siteData
+
+Adds global site data to your Eleventy project, providing commonly needed values that can be accessed in all templates.
+
+**Why use this?**
+
+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.
+
+**Usage:**
+
+1. Enable `siteData` in your Eleventy config:
+
+```javascript
+import { siteData } from "@anydigital/11ty-bricks";
+
+export default function(eleventyConfig) {
+  siteData(eleventyConfig);
+  // Or use as plugin:
+  // eleventyConfig.addPlugin(eleventyBricks, { siteData: true });
+}
+```
+
+2. Use the global data in your templates:
+
+**Current Year:**
+```njk
+<footer>
+  <p>&copy; {{ site.year }} Your Company Name. All rights reserved.</p>
+</footer>
+```
+
+**Environment Check:**
+```njk
+{% if site.isProd %}
+  <!-- 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 %}
+```
+
+**Available Data:**
+
+- `site.year`: The current year as a number (e.g., `2026`)
+- `site.isProd`: 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.isProd %}
+  <script src="/analytics.js"></script>
+{% endif %}
+
+{# Different behavior in dev vs prod #}
+{% if site.isProd %}
+  <link rel="stylesheet" href="/css/styles.min.css">
+{% else %}
+  <link rel="stylesheet" href="/css/styles.css">
+  <script src="/live-reload.js"></script>
+{% endif %}
+```
+
+### Additional Exports
+
+The plugin also exports the following 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.
+
+## CLI Helper Commands
+
+After installing this package, the `download-files` command becomes available:
+
+### download-files
+
+A CLI command that downloads external files to your project based on URLs specified in your `package.json`.
+
+**Usage:**
+
+1. Add a `_downloadFiles` field to your project's `package.json` with URL-to-path mappings:
+
+```json
+{
+  "_downloadFiles": {
+    "https://example.com/library.js": "src/vendor/library.js",
+    "https://cdn.example.com/styles.css": "public/css/external.css"
+  }
+}
+```
+
+2. Run the download command:
+
+```bash
+npx download-files
+```
+
+**Options:**
+
+- `-o, --output <dir>`: Specify an output directory where all files will be downloaded (relative paths in `_downloadFiles` will be resolved relative to this directory)
+
+```bash
+# Download all files to a specific directory
+npx download-files --output public
+```
+
+**Features:**
+
+- Downloads multiple files from external URLs
+- Automatically creates directories if they don't exist
+- Overwrites existing files
+- Continues downloading remaining files even if some fail
+- Provides clear progress and error messages
+- Returns appropriate exit codes for CI/CD integration
+
+**Use Cases:**
+
+- Download third-party libraries and assets
+- Fetch external resources during build processes
+- Keep vendored files up to date
+- Automate dependency downloads that aren't available via npm
 
 ## Requirements
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/11ty-bricks",
-  "version": "1.0.0-alpha",
+  "version": "1.0.0-alpha.10",
   "description": "A collection of helpful utilities and filters for Eleventy (11ty)",
   "type": "module",
   "main": "./src/index.js",
@@ -10,10 +10,14 @@
       "require": "./src/index.cjs"
     }
   },
+  "bin": {
+    "download-files": "src/cli/download-files.js"
+  },
   "files": [
     "src"
   ],
   "scripts": {
+    "build": "npx download-files",
     "test": "node --test src/**/*.test.js"
   },
   "keywords": [
@@ -40,5 +44,8 @@
   },
   "engines": {
     "node": ">=18.0.0"
+  },
+  "_downloadFiles": {
+    "https://raw.githubusercontent.com/danurbanowicz/eleventy-sveltia-cms-starter/refs/heads/master/admin/index.html": "src/sveltia-admin/index.html"
   }
 }

package/src/bricks.js

@@ -0,0 +1,125 @@
+export function bricks(eleventyConfig) {
+
+  // Brick Registry System
+  // Global registry to track dependencies per page
+  const brickRegistry = new Map();
+
+  // Helper to get or create page registry
+  function getPageRegistry(page) {
+    const pageUrl = page.url || page.outputPath || 'default';
+    if (!brickRegistry.has(pageUrl)) {
+      brickRegistry.set(pageUrl, {
+        dependencies: new Set(),  // Raw dependencies (URLs) - categorized later
+        inlineStyles: new Set(),
+        inlineScripts: new Set()
+      });
+    }
+    return brickRegistry.get(pageUrl);
+  }
+
+  // Clear registry before each build
+  eleventyConfig.on("eleventy.before", async () => {
+    brickRegistry.clear();
+  });
+
+  // brick shortcode: registers and renders a brick component
+  eleventyConfig.addShortcode("brick", function(brickModule, ...args) {
+    const registry = getPageRegistry(this.page);
+    
+    if (!brickModule) return '';
+    
+    // Register external dependencies (categorized later in transform)
+    if (brickModule.dependencies) {
+      brickModule.dependencies.forEach(dep => {
+        registry.dependencies.add(dep);
+      });
+    }
+    
+    // Register inline styles directly from style variable
+    if (brickModule.style && brickModule.style.trim()) {
+      registry.inlineStyles.add(brickModule.style);
+    }
+    
+    // Register inline scripts directly from script variable
+    if (brickModule.script && brickModule.script.trim()) {
+      registry.inlineScripts.add(brickModule.script);
+    }
+    
+    // Render the brick using render() macro
+    if (brickModule.render && typeof brickModule.render === 'function') {
+      return brickModule.render(...args);
+    }
+    
+    return '';
+  });
+
+  // bricksRegistry shortcode: outputs placeholder and base dependencies
+  eleventyConfig.addShortcode("bricksDependencies", function(dependencies = []) {
+    const registry = getPageRegistry(this.page);
+    
+    // Register root dependencies if provided (categorized later in transform)
+    if (dependencies && Array.isArray(dependencies)) {
+      dependencies.forEach(dep => {
+        registry.dependencies.add(dep);
+      });
+    }
+    
+    // Return placeholder comment that will be replaced by transform
+    return '<!-- BRICK_DEPENDENCIES_PLACEHOLDER -->';
+  });
+
+  // Transform to inject collected dependencies
+  eleventyConfig.addTransform("injectBrickDependencies", function(content, outputPath) {
+    if (!outputPath || !outputPath.endsWith(".html")) {
+      return content;
+    }
+
+    const pageUrl = this.page?.url || this.page?.outputPath || outputPath;
+    const registry = brickRegistry.get(pageUrl);
+
+    if (!registry || !content.includes('<!-- BRICK_DEPENDENCIES_PLACEHOLDER -->')) {
+      return content;
+    }
+
+    // Categorize dependencies by type
+    const externalStyles = [];
+    const externalScripts = [];
+    
+    registry.dependencies.forEach(dep => {
+      // Categorize by type
+      if (dep.endsWith('.css') || dep.includes('.css?')) {
+        externalStyles.push(dep);
+      } else if (dep.endsWith('.js') || dep.includes('.js?')) {
+        externalScripts.push(dep);
+      }
+    });
+
+    // Build HTML for dependencies
+    let dependenciesHtml = '\n';
+    
+    // Add external CSS links
+    externalStyles.forEach(href => {
+      dependenciesHtml += `  <link rel="stylesheet" href="${href}">\n`;
+    });
+    
+    // Add inline styles
+    registry.inlineStyles.forEach(style => {
+      dependenciesHtml += `  <style>${style}</style>\n`;
+    });
+    
+    // Add external script links
+    externalScripts.forEach(src => {
+      dependenciesHtml += `  <script src="${src}"></script>\n`;
+    });
+    
+    // Add inline scripts
+    registry.inlineScripts.forEach(script => {
+      dependenciesHtml += `  <script>${script}</script>\n`;
+    });
+    
+    dependenciesHtml += '  ';
+
+    // Replace placeholder with actual dependencies
+    return content.replace('<!-- BRICK_DEPENDENCIES_PLACEHOLDER -->', dependenciesHtml);
+  });
+}

package/src/byAttrFilter.js

@@ -0,0 +1,35 @@
+/**
+ * byAttr filter - Filter collection items by attribute value
+ * 
+ * This filter takes a collection, an attribute name, and a target value,
+ * and returns items where the attribute matches the target value.
+ * If the attribute is an array, it checks if the array includes the target value.
+ * 
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function byAttrFilter(eleventyConfig) {
+  eleventyConfig.addFilter("byAttr", function(collection, attrName, targetValue) {
+    if (!collection || !Array.isArray(collection)) {
+      return [];
+    }
+
+    return collection.filter(item => {
+      // Get the attribute value from the item's data
+      const attrValue = item?.data?.[attrName] ?? item?.[attrName];
+
+      // If attribute doesn't exist, skip this item
+      if (attrValue === undefined || attrValue === null) {
+        return false;
+      }
+
+      // If the attribute is an array, check if it includes the target value
+      if (Array.isArray(attrValue)) {
+        return attrValue.includes(targetValue);
+      }
+
+      // Otherwise, do a direct comparison
+      return attrValue === targetValue;
+    });
+  });
+}
+

package/src/byAttrFilter.test.js

@@ -0,0 +1,105 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import { byAttrFilter } from './byAttrFilter.js';
+
+describe('byAttr filter', () => {
+  let filterFn;
+
+  // Mock eleventyConfig to capture the filter function
+  const mockEleventyConfig = {
+    addFilter(name, fn) {
+      if (name === 'byAttr') {
+        filterFn = fn;
+      }
+    }
+  };
+
+  // Register the filter
+  byAttrFilter(mockEleventyConfig);
+
+  it('should filter items by exact attribute match', () => {
+    const collection = [
+      { data: { category: 'blog' }, title: 'Post 1' },
+      { data: { category: 'news' }, title: 'Post 2' },
+      { data: { category: 'blog' }, title: 'Post 3' }
+    ];
+
+    const result = filterFn(collection, 'category', 'blog');
+    assert.strictEqual(result.length, 2);
+    assert.strictEqual(result[0].title, 'Post 1');
+    assert.strictEqual(result[1].title, 'Post 3');
+  });
+
+  it('should filter items when attribute is an array (includes check)', () => {
+    const collection = [
+      { data: { tags: ['javascript', 'tutorial'] }, title: 'Post 1' },
+      { data: { tags: ['python', 'tutorial'] }, title: 'Post 2' },
+      { data: { tags: ['javascript', 'advanced'] }, title: 'Post 3' }
+    ];
+
+    const result = filterFn(collection, 'tags', 'javascript');
+    assert.strictEqual(result.length, 2);
+    assert.strictEqual(result[0].title, 'Post 1');
+    assert.strictEqual(result[1].title, 'Post 3');
+  });
+
+  it('should return empty array when collection is not an array', () => {
+    const result = filterFn(null, 'category', 'blog');
+    assert.strictEqual(result.length, 0);
+  });
+
+  it('should filter out items without the specified attribute', () => {
+    const collection = [
+      { data: { category: 'blog' }, title: 'Post 1' },
+      { data: {}, title: 'Post 2' },
+      { data: { category: 'blog' }, title: 'Post 3' }
+    ];
+
+    const result = filterFn(collection, 'category', 'blog');
+    assert.strictEqual(result.length, 2);
+  });
+
+  it('should work with attribute directly on item (not in data)', () => {
+    const collection = [
+      { category: 'blog', title: 'Post 1' },
+      { category: 'news', title: 'Post 2' },
+      { category: 'blog', title: 'Post 3' }
+    ];
+
+    const result = filterFn(collection, 'category', 'blog');
+    assert.strictEqual(result.length, 2);
+  });
+
+  it('should handle mixed data structures', () => {
+    const collection = [
+      { data: { category: 'blog' }, title: 'Post 1' },
+      { category: 'blog', title: 'Post 2' },
+      { data: { category: 'news' }, title: 'Post 3' }
+    ];
+
+    const result = filterFn(collection, 'category', 'blog');
+    assert.strictEqual(result.length, 2);
+  });
+
+  it('should handle array that does not include target value', () => {
+    const collection = [
+      { data: { tags: ['python', 'tutorial'] }, title: 'Post 1' },
+      { data: { tags: ['ruby', 'guide'] }, title: 'Post 2' }
+    ];
+
+    const result = filterFn(collection, 'tags', 'javascript');
+    assert.strictEqual(result.length, 0);
+  });
+
+  it('should handle different value types', () => {
+    const collection = [
+      { data: { priority: 1 }, title: 'Post 1' },
+      { data: { priority: 2 }, title: 'Post 2' },
+      { data: { priority: 1 }, title: 'Post 3' }
+    ];
+
+    const result = filterFn(collection, 'priority', 1);
+    assert.strictEqual(result.length, 2);
+  });
+});
+

package/src/cli/download-files.js

@@ -0,0 +1,136 @@
+#!/usr/bin/env node
+
+import { readFile, writeFile, mkdir } from 'fs/promises';
+import { dirname, resolve, join } from 'path';
+
+/**
+ * Parse command line arguments
+ * 
+ * @returns {Object} Parsed arguments
+ */
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const parsed = {
+    outputDir: null
+  };
+  
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    
+    if (arg === '--output' || arg === '-o') {
+      if (i + 1 < args.length) {
+        parsed.outputDir = args[i + 1];
+        i++; // Skip next argument
+      } else {
+        throw new Error(`${arg} requires a directory path`);
+      }
+    }
+  }
+  
+  return parsed;
+}
+
+/**
+ * Downloads files specified in package.json's _downloadFiles field
+ * 
+ * @param {string|null} outputDir - Optional output directory to prepend to all paths
+ * @returns {Promise<boolean>} True if all downloads succeeded, false if any failed
+ */
+async function download(outputDir = null) {
+  try {
+    // Find and read package.json from the current working directory
+    const packageJsonPath = resolve(process.cwd(), 'package.json');
+    const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf-8'));
+    
+    const downloadFiles = packageJson._downloadFiles;
+    
+    if (!downloadFiles || typeof downloadFiles !== 'object') {
+      console.log('No _downloadFiles field found in package.json');
+      return true;
+    }
+
+    const entries = Object.entries(downloadFiles);
+    
+    if (entries.length === 0) {
+      console.log('No files to download (_downloadFiles is empty)');
+      return true;
+    }
+
+    console.log(`Starting download of ${entries.length} file(s)...\n`);
+    
+    let hasErrors = false;
+    
+    // Process all downloads
+    for (const entry of entries) {
+      const url = entry[0];
+      let localPath = entry[1];
+      
+      try {
+        console.log(`Downloading: ${url}`);
+        console.log(`        To: ${localPath}`);
+        
+        // Download the file
+        const response = await fetch(url);
+        
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        
+        // Get the file content
+        const content = await response.arrayBuffer();
+        const buffer = Buffer.from(content);
+        
+        // Prepend output directory to local path if specified
+        if (outputDir) {
+          localPath = join(outputDir, localPath);
+        }
+        
+        // Resolve the full path
+        const fullPath = resolve(process.cwd(), localPath);
+        
+        // Create directory if it doesn't exist
+        const dir = dirname(fullPath);
+        await mkdir(dir, { recursive: true });
+        
+        // Write the file
+        await writeFile(fullPath, buffer);
+        
+        console.log(`   Success: ${localPath}\n`);
+      } catch (error) {
+        hasErrors = true;
+        console.error(`     Error: ${error.message}`);
+        console.error(`       URL: ${url}\n`);
+      }
+    }
+    
+    // Summary
+    if (hasErrors) {
+      console.log('Download completed with errors');
+      return false;
+    } else {
+      console.log('All downloads completed successfully');
+      return true;
+    }
+    
+  } catch (error) {
+    console.error(`Fatal error: ${error.message}`);
+    return false;
+  }
+}
+
+/**
+ * CLI entry point
+ */
+async function main() {
+  try {
+    const args = parseArgs();
+    const success = await download(args.outputDir);
+    process.exit(success ? 0 : 1);
+  } catch (error) {
+    console.error(`Error: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+main();
+

package/src/fragments.js

@@ -0,0 +1,34 @@
+import { readFileSync } from "fs";
+import { join } from "path";
+
+/**
+ * fragment shortcode - Include content from fragments
+ * 
+ * This shortcode reads a file from the _fragments directory and includes
+ * its content. The content will be processed by the template engine.
+ * 
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function fragments(eleventyConfig) {
+  eleventyConfig.addShortcode("fragment", function(path) {
+    // Get the input directory from Eleventy's context
+    const inputDir = this.page?.inputPath 
+      ? join(process.cwd(), eleventyConfig.dir?.input || ".") 
+      : process.cwd();
+    
+    // Construct the full path to the fragment file
+    const fragmentPath = join(inputDir, "_fragments", path);
+    
+    try {
+      // Read the fragment file
+      const content = readFileSync(fragmentPath, "utf8");
+      
+      // Return content to be processed by the template engine
+      return content;
+    } catch (error) {
+      console.error(`Error reading fragment at ${fragmentPath}:`, error.message);
+      return `<!-- Fragment not found: ${path} -->`;
+    }
+  });
+}
+

package/src/index.cjs

@@ -9,9 +9,18 @@ module.exports = async function eleventyBricksPlugin(eleventyConfig, options) {
   return plugin(eleventyConfig, options);
 };
 
-// Export individual helpers
-module.exports.autoRaw = async function(eleventyConfig) {
-  const { autoRaw } = await import('./index.js');
-  return autoRaw(eleventyConfig);
-};
+// Export individual helpers for granular usage
+['bricks', 'mdAutoRawTags', 'mdAutoNl2br', 'fragments', 'setAttrFilter', 'byAttrFilter', '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) => {
+    const module = await import('./index.js');
+    return module[name](content);
+  };
+});

package/src/index.js

@@ -1,4 +1,9 @@
-import { autoRaw } from "./autoRaw.js";
+import { bricks } from "./bricks.js";
+import { mdAutoRawTags, mdAutoNl2br, transformAutoRaw, transformNl2br } from "./markdown.js";
+import { fragments } from "./fragments.js";
+import { setAttrFilter } from "./setAttrFilter.js";
+import { byAttrFilter } from "./byAttrFilter.js";
+import { siteData } from "./siteData.js";
 
 /**
  * 11ty Bricks Plugin
@@ -8,17 +13,21 @@ import { autoRaw } from "./autoRaw.js";
  * 
  * @param {Object} eleventyConfig - The Eleventy configuration object
  * @param {Object} options - Plugin options
- * @param {boolean} options.autoRaw - Enable autoRaw preprocessor (default: false)
+ * @param {boolean} options.bricks - Enable bricks system with dependencies injection (default: false)
+ * @param {boolean} options.mdAutoRawTags - Enable mdAutoRawTags preprocessor (default: false)
+ * @param {boolean} options.mdAutoNl2br - Enable mdAutoNl2br for \n to <br> conversion (default: false)
+ * @param {boolean} options.fragments - Enable fragment shortcode (default: false)
+ * @param {boolean} options.setAttrFilter - Enable setAttr filter (default: false)
+ * @param {boolean} options.byAttrFilter - Enable byAttr filter (default: false)
+ * @param {boolean} options.siteData - Enable site.year global data (default: false)
  */
 export default function eleventyBricksPlugin(eleventyConfig, options = {}) {
-  const { autoRaw: enableAutoRaw = false } = options;
-
-  // Register helpers based on options
-  if (enableAutoRaw) {
-    autoRaw(eleventyConfig);
-  }
+  const plugins = { bricks, mdAutoRawTags, mdAutoNl2br, fragments, setAttrFilter, byAttrFilter, siteData };
+  Object.entries(options).forEach(([key, enabled]) => enabled && plugins[key]?.(eleventyConfig));
 }
 
 // Export individual helpers for granular usage
-export { autoRaw };
+export { bricks, mdAutoRawTags, mdAutoNl2br, fragments, setAttrFilter, byAttrFilter, siteData };
 
+// Export transform functions for advanced usage
+export { transformAutoRaw, transformNl2br };

package/src/markdown.js

@@ -0,0 +1,58 @@
+/**
+ * Transform Nunjucks syntax in content by wrapping it with raw tags
+ * 
+ * This function wraps Nunjucks syntax ({{, }}, {%, %}) with {% raw %} tags
+ * to prevent them from being processed by the template engine.
+ * 
+ * @param {string} content - The content to transform
+ * @returns {string} The transformed content with Nunjucks syntax wrapped
+ */
+export function transformAutoRaw(content) {
+  // This regex looks for {{, }}, {%, or %} individually and wraps them
+  return content.replace(/({{|}}|{%|%})/g, "{% raw %}$1{% endraw %}");
+}
+
+/**
+ * mdAutoRawTags - Forbid Nunjucks processing in Markdown files
+ * 
+ * This preprocessor wraps Nunjucks syntax ({{, }}, {%, %}) with {% raw %} tags
+ * to prevent them from being processed by the template engine in Markdown files.
+ * 
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function mdAutoRawTags(eleventyConfig) {
+  eleventyConfig.addPreprocessor("mdAutoRawTags", "md", (data, content) => {
+    return transformAutoRaw(content);
+  });
+}
+
+/**
+ * Transform \n sequences to <br> tags
+ * 
+ * This function converts literal \n sequences (double backslash + n) to HTML <br> tags.
+ * It handles both double \n\n and single \n sequences, processing double ones first.
+ * 
+ * @param {string} content - The content to transform
+ * @returns {string} The transformed content with \n converted to <br>
+ */
+export function transformNl2br(content) {
+  // Replace double \n\n first, then single \n to avoid double conversion
+  return content.replace(/\\n\\n/g, '<br>').replace(/\\n/g, '<br>');
+}
+
+/**
+ * mdAutoNl2br - Auto convert \n to <br> in markdown (especially tables)
+ * 
+ * This function amends the markdown library to automatically convert \n
+ * to <br> tags in text content, which is particularly useful for line breaks
+ * inside markdown tables where standard newlines don't work.
+ * 
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function mdAutoNl2br(eleventyConfig) {
+  eleventyConfig.amendLibrary("md", mdLib => {
+    mdLib.renderer.rules.text = (tokens, idx) => {
+      return transformNl2br(tokens[idx].content);
+    };
+  });
+}

package/src/{autoRaw.test.js → markdown.test.js}

@@ -1,6 +1,6 @@
 import { describe, it } from "node:test";
 import assert from "node:assert/strict";
-import { transformAutoRaw } from "./autoRaw.js";
+import { transformAutoRaw, transformNl2br } from "./markdown.js";
 
 describe("transformAutoRaw", () => {
   it("should wrap opening double curly braces with raw tags", () => {
@@ -85,3 +85,68 @@ Some text
   });
 });
 
+describe("transformNl2br", () => {
+  it("should convert single \\n to <br>", () => {
+    const input = "Line 1\\nLine 2";
+    const expected = "Line 1<br>Line 2";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should convert double \\n\\n to <br>", () => {
+    const input = "Line 1\\n\\nLine 2";
+    const expected = "Line 1<br>Line 2";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should convert multiple \\n sequences", () => {
+    const input = "Line 1\\nLine 2\\nLine 3";
+    const expected = "Line 1<br>Line 2<br>Line 3";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should handle mixed single and double \\n", () => {
+    const input = "Line 1\\n\\nLine 2\\nLine 3";
+    const expected = "Line 1<br>Line 2<br>Line 3";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should handle text without \\n", () => {
+    const input = "Just plain text";
+    assert.equal(transformNl2br(input), input);
+  });
+
+  it("should handle empty content", () => {
+    assert.equal(transformNl2br(""), "");
+  });
+
+  it("should handle content with only \\n", () => {
+    const input = "\\n\\n\\n";
+    const expected = "<br><br>";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should handle markdown table cell content with \\n", () => {
+    const input = "Cell 1\\nCell 1 Line 2\\n\\nCell 1 Line 3";
+    const expected = "Cell 1<br>Cell 1 Line 2<br>Cell 1 Line 3";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should handle multiple consecutive double \\n\\n", () => {
+    const input = "Line 1\\n\\n\\n\\nLine 2";
+    const expected = "Line 1<br><br>Line 2";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should preserve actual newlines (not literal \\n)", () => {
+    const input = "Line 1\nLine 2";
+    const expected = "Line 1\nLine 2";
+    assert.equal(transformNl2br(input), expected);
+  });
+
+  it("should only convert literal backslash-n sequences", () => {
+    const input = "Text with\\nbackslash-n and\nreal newline";
+    const expected = "Text with<br>backslash-n and\nreal newline";
+    assert.equal(transformNl2br(input), expected);
+  });
+});
+

package/src/setAttrFilter.js

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

package/src/siteData.js

@@ -0,0 +1,12 @@
+/**
+ * Add site.year and site.isProd global data
+ * - site.isProd: Boolean indicating if running in production mode (build) vs development (serve)
+ * - site.year: Sets the current year to be available in all templates as {{ site.year }}
+ * 
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function siteData(eleventyConfig) {
+  eleventyConfig.addGlobalData("site.isProd", () => process.env.ELEVENTY_RUN_MODE === "build");
+  eleventyConfig.addGlobalData("site.year", () => new Date().getFullYear());
+}
+

package/src/sveltia-admin/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="dns-prefetch" href="https://unpkg.com">
+    <title>Sveltia CMS</title>
+  </head>
+  <body>
+    <!-- Include the script that builds the page and powers Sveltia CMS -->
+    <script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js" type="module"></script>
+  </body>
+</html>

package/src/autoRaw.js

@@ -1,28 +0,0 @@
-/**
- * Transform Nunjucks syntax in content by wrapping it with raw tags
- * 
- * This function wraps Nunjucks syntax ({{, }}, {%, %}) with {% raw %} tags
- * to prevent them from being processed by the template engine.
- * 
- * @param {string} content - The content to transform
- * @returns {string} The transformed content with Nunjucks syntax wrapped
- */
-export function transformAutoRaw(content) {
-  // This regex looks for {{, }}, {%, or %} individually and wraps them
-  return content.replace(/({{|}}|{%|%})/g, "{% raw %}$1{% endraw %}");
-}
-
-/**
- * autoRaw - Forbid Nunjucks processing in Markdown files
- * 
- * This preprocessor wraps Nunjucks syntax ({{, }}, {%, %}) with {% raw %} tags
- * to prevent them from being processed by the template engine in Markdown files.
- * 
- * @param {Object} eleventyConfig - The Eleventy configuration object
- */
-export function autoRaw(eleventyConfig) {
-  eleventyConfig.addPreprocessor("autoRaw", "md", (data, content) => {
-    return transformAutoRaw(content);
-  });
-}
-