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

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 and site.isProd 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/starter/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>