@anydigital/eleventy-bricks 0.23.2 → 0.25.0

package/.prettierrc.json

@@ -1,3 +1,12 @@
 {
-  "printWidth": 120
+  "printWidth": 120,
+  "plugins": ["prettier-plugin-jinja-template"],
+  "overrides": [
+    {
+      "files": ["*.njk", "*.html"],
+      "options": {
+        "parser": "jinja-template"
+      }
+    }
+  ]
 }

package/README.md

@@ -27,7 +27,7 @@ export default function (eleventyConfig) {
     mdAutoNl2br: true,
     mdAutoLinkFavicons: true,
     siteData: true,
-    filters: ["attr", "where_in", "merge", "remove_tag", "if", "attr_concat"],
+    filters: ["attr", "where_in", "merge", "remove_tag", "if", "attr_concat", "fetch"],
   });
 
   // Your other configuration...
@@ -45,7 +45,7 @@ module.exports = function (eleventyConfig) {
     mdAutoNl2br: true,
     mdAutoLinkFavicons: true,
     siteData: true,
-    filters: ["attr", "where_in", "merge", "remove_tag", "if", "attr_concat"],
+    filters: ["attr", "where_in", "merge", "remove_tag", "if", "attr_concat", "fetch"],
   });
 
   // Your other configuration...
@@ -71,6 +71,7 @@ import {
   removeTagFilter,
   ifFilter,
   attrConcatFilter,
+  fetchFilter,
   siteData,
 } from "@anydigital/eleventy-bricks";
 
@@ -84,6 +85,10 @@ export default function (eleventyConfig) {
   removeTagFilter(eleventyConfig);
   ifFilter(eleventyConfig);
   attrConcatFilter(eleventyConfig);
+  // fetchFilter is only available if @11ty/eleventy-fetch is installed
+  if (fetchFilter) {
+    fetchFilter(eleventyConfig);
+  }
   siteData(eleventyConfig);
 
   // Your other configuration...
@@ -103,6 +108,7 @@ const {
   removeTagFilter,
   ifFilter,
   attrConcatFilter,
+  fetchFilter,
   siteData,
 } = require("@anydigital/eleventy-bricks");
 
@@ -116,6 +122,10 @@ module.exports = async function (eleventyConfig) {
   await removeTagFilter(eleventyConfig);
   await ifFilter(eleventyConfig);
   await attrConcatFilter(eleventyConfig);
+  // fetchFilter is only available if @11ty/eleventy-fetch is installed
+  if (fetchFilter) {
+    await fetchFilter(eleventyConfig);
+  }
   await siteData(eleventyConfig);
 
   // Your other configuration...
@@ -144,6 +154,7 @@ When using the plugin (Option 1), you can configure which helpers to enable:
 - `'remove_tag'` - Remove HTML elements from content
 - `'if'` - Inline conditional/ternary operator
 - `'attr_concat'` - Concatenate values to an attribute array
+- `'fetch'` - Fetch remote URLs or local files (requires `@11ty/eleventy-fetch`)
 
 **Example:**
 
@@ -153,7 +164,7 @@ eleventyConfig.addPlugin(eleventyBricks, {
   mdAutoNl2br: true,
   mdAutoLinkFavicons: true,
   siteData: true,
-  filters: ["attr", "where_in", "merge", "remove_tag", "if", "attr_concat"],
+  filters: ["attr", "where_in", "merge", "remove_tag", "if", "attr_concat", "fetch"],
 });
 ```
 
@@ -789,6 +800,139 @@ A new object with the specified attribute containing the combined unique array.
 {% endfor %}
 ```
 
+### 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.
+
+**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.
+
+**Requirements:**
+
+This filter requires the `@11ty/eleventy-fetch` package to be installed:
+
+```bash
+npm install @11ty/eleventy-fetch
+```
+
+> **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.
+
+**Usage:**
+
+1. Install the required dependency:
+
+```bash
+npm install @11ty/eleventy-fetch
+```
+
+2. Enable the `fetch` filter in your Eleventy config:
+
+```javascript
+import { fetchFilter } from "@anydigital/eleventy-bricks";
+
+export default function (eleventyConfig) {
+  fetchFilter(eleventyConfig);
+  // Or use as plugin:
+  // eleventyConfig.addPlugin(eleventyBricks, { filters: ['fetch'] });
+}
+```
+
+3. Use the filter in your templates:
+
+**Fetch remote URLs:**
+
+```njk
+{# Fetch content from a remote URL #}
+{% set externalContent = "https://example.com/data.json" | fetch %}
+{{ externalContent }}
+
+{# Fetch and parse JSON #}
+{% set apiData = "https://api.example.com/posts" | fetch %}
+{% set posts = apiData | fromJson %}
+```
+
+**Fetch local files:**
+
+```njk
+{# Fetch content from a local file (relative to input directory) #}
+{% set localData = "_data/content.txt" | fetch %}
+{{ localData }}
+
+{# Include content from another file #}
+{% set snippet = "_includes/snippets/example.md" | fetch %}
+{{ snippet | markdown | safe }}
+```
+
+**Parameters:**
+
+- `url`: A URL (starting with `http://` or `https://`) or a local file path (relative to the input directory)
+
+**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
+- **Error handling**: Throws descriptive errors if fetching fails
+- **Conditional loading**: Only available when `@11ty/eleventy-fetch` is installed
+
+**Examples:**
+
+```njk
+{# Fetch and display remote content #}
+{% set readme = "https://raw.githubusercontent.com/user/repo/main/README.md" | fetch %}
+<div class="readme">
+  {{ readme | markdown | safe }}
+</div>
+
+{# Fetch JSON data from API #}
+{% set data = "https://api.example.com/data.json" | fetch %}
+{% set items = data | fromJson %}
+{% for item in items %}
+  <p>{{ item.title }}</p>
+{% endfor %}
+
+{# Include local file content #}
+{% set changelog = "CHANGELOG.md" | fetch %}
+{{ changelog | markdown | safe }}
+
+{# Fetch CSS from CDN and inline it #}
+<style>
+  {{ "https://cdn.example.com/styles.css" | fetch }}
+</style>
+
+{# Reuse content across pages #}
+{% set sharedContent = "_includes/shared/footer.html" | fetch %}
+{{ 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.
+
 ### siteData
 
 Adds global site data to your Eleventy project, providing commonly needed values that can be accessed in all templates.
@@ -892,6 +1036,7 @@ A fully-configured Eleventy config file with:
 
 - 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
@@ -903,6 +1048,16 @@ A fully-configured Eleventy config file with:
 npm install @11ty/eleventy-navigation markdown-it markdown-it-anchor markdown-it-attrs js-yaml minimist
 ```
 
+**Optional dependencies:**
+
+```bash
+# For the fetch filter
+npm install @11ty/eleventy-fetch
+
+# For table of contents generation
+npm install @uncenter/eleventy-plugin-toc
+```
+
 **Symlink to your project:**
 
 ```bash

package/package.json

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

package/src/eleventy.config.js

@@ -4,6 +4,13 @@ import minimist from "minimist";
 import { RenderPlugin } from "@11ty/eleventy";
 import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
 import eleventyBricksPlugin from "@anydigital/eleventy-bricks";
+/* Conditional imports */
+let pluginTOC;
+try {
+  pluginTOC = (await import('@uncenter/eleventy-plugin-toc')).default;
+} catch (e) {
+  // @uncenter/eleventy-plugin-toc not installed
+}
 /* Libraries */
 import markdownIt from "markdown-it";
 import markdownItAnchor from "markdown-it-anchor";
@@ -29,8 +36,14 @@ export default function (eleventyConfig) {
     mdAutoRawTags: true,
     mdAutoLinkFavicons: true,
     siteData: true,
-    filters: ["attr", "where_in", "merge", "remove_tag", "if", "attr_concat"],
+    filters: ["attr", "where_in", "merge", "remove_tag", "if", "attr_concat", "fetch"],
   });
+  if (pluginTOC) {
+    eleventyConfig.addPlugin(pluginTOC, {
+      ignoredElements: ["sub", ".header-anchor"],
+      ul: true,
+    });
+  }
 
   /* Libraries */
   eleventyConfig.setLibrary(

package/src/filters/attr_concat.js

@@ -15,16 +15,14 @@ export function attrConcat(obj, attr, values) {
 
   // Check if existing value is an array, convert if not
   if (!Array.isArray(existingArray)) {
-    console.error(
-      `attrConcat: Expected ${attr} to be an array, got ${typeof existingArray}`
-    );
+    console.error(`attrConcat: Expected ${attr} to be an array, got ${typeof existingArray}`);
   }
 
   // Process the values argument
   let valuesToAdd = [];
   if (Array.isArray(values)) {
     valuesToAdd = values;
-  } else if (typeof values === "string") {
+  } else if (typeof values === "string" && values.length >= 2 && values.at(0) == "[" && values.at(-1) == "]") {
     // Try to parse as JSON array
     try {
       const parsed = JSON.parse(values);

package/src/filters/fetch.js

@@ -0,0 +1,46 @@
+import EleventyFetch from "@11ty/eleventy-fetch";
+import path from "path";
+import fs from "fs/promises";
+
+/**
+ * fetch filter - Fetch a URL or local file and return its raw content
+ *
+ * This filter takes a URL or local file path. For URLs, it downloads them
+ * using eleventy-fetch to the input directory's _downloads folder.
+ * For local paths, it reads them relative to the input directory.
+ *
+ * @param {Object} eleventyConfig - The Eleventy configuration object
+ */
+export function fetchFilter(eleventyConfig) {
+  eleventyConfig.addFilter("fetch", async function (url) {
+    if (!url) {
+      throw new Error("fetch filter requires a URL or path");
+    }
+
+    // Get the input directory from Eleventy config
+    const inputDir = eleventyConfig.dir?.input || ".";
+
+    // Check if it's a URL or local path
+    const isUrl = url.startsWith("http://") || url.startsWith("https://");
+
+    try {
+      if (isUrl) {
+        // Handle remote URLs with eleventy-fetch
+        const cacheDirectory = path.join(inputDir, "_downloads");
+        const content = await EleventyFetch(url, {
+          duration: "1d", // Cache for 1 day by default
+          type: "text", // Return as text
+          directory: cacheDirectory,
+        });
+        return content;
+      } else {
+        // Handle local file paths relative to input directory
+        const filePath = path.join(inputDir, url);
+        const content = await fs.readFile(filePath, "utf-8");
+        return content;
+      }
+    } catch (error) {
+      throw new Error(`Failed to fetch ${url}: ${error.message}`);
+    }
+  });
+}

package/src/filters/where_in.js

@@ -16,26 +16,22 @@ const { get } = lodash;
  * @returns {Array} Filtered collection
  */
 export function whereIn(collection, attrName, targetValue) {
-  if (!collection || !Array.isArray(collection)) {
-    return [];
+  // If no targetValue, return original collection
+  if (!targetValue) {
+    return collection;
   }
 
   return collection.filter((item) => {
     // Get the attribute value from the item (supports nested paths like "data.tags")
     const attrValue = get(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;
+    // Otherwise skip this item
+    return false;
   });
 }
 

package/src/index.js

@@ -17,6 +17,16 @@ import { ifFilter, iff } from "./filters/if.js";
 import { attrConcatFilter, attrConcat } from "./filters/attr_concat.js";
 import { siteData } from "./siteData.js";
 
+// Conditionally import fetchFilter only if @11ty/eleventy-fetch is available
+let fetchFilter = null;
+try {
+  await import("@11ty/eleventy-fetch");
+  const fetchModule = await import("./filters/fetch.js");
+  fetchFilter = fetchModule.fetchFilter;
+} catch (error) {
+  // @11ty/eleventy-fetch not available, fetch filter will be disabled
+}
+
 /**
  * 11ty Bricks Plugin
  *
@@ -28,7 +38,7 @@ import { siteData } from "./siteData.js";
  * @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.mdAutoLinkFavicons - Enable mdAutoLinkFavicons to add favicons to plain text links (default: false)
- * @param {Array<string>} options.filters - Array of filter names to enable: 'attr', 'where_in', 'merge', 'remove_tag', 'if', 'attr_concat' (default: [])
+ * @param {Array<string>} options.filters - Array of filter names to enable: 'attr', 'where_in', 'merge', 'remove_tag', 'if', 'attr_concat', 'fetch' (default: [])
  * @param {boolean} options.siteData - Enable site.year and site.prod global data (default: false)
  */
 export default function eleventyBricksPlugin(eleventyConfig, options = {}) {
@@ -46,6 +56,7 @@ export default function eleventyBricksPlugin(eleventyConfig, options = {}) {
     remove_tag: removeTagFilter,
     if: ifFilter,
     attr_concat: attrConcatFilter,
+    ...(fetchFilter && { fetch: fetchFilter }),
   };
 
   // Handle individual plugin options
@@ -66,6 +77,7 @@ export default function eleventyBricksPlugin(eleventyConfig, options = {}) {
 }
 
 // Export individual helpers for granular usage
+// Note: fetchFilter will be null/undefined if @11ty/eleventy-fetch is not installed
 export {
   mdAutoRawTags,
   mdAutoNl2br,
@@ -76,6 +88,7 @@ export {
   removeTagFilter,
   ifFilter,
   attrConcatFilter,
+  fetchFilter,
   siteData,
 };
 

package/src/markdown.js

@@ -76,11 +76,12 @@ export function isPlainUrlText(linkText, domain) {
  * @returns {string} The cleaned text
  */
 export function cleanLinkText(linkText, domain) {
-  return linkText
+  const cleanedText = linkText
     .trim()
     .replace(/^https?:\/\//, "")
-    .replace(domain, "")
     .replace(/\/$/, "");
+  const withoutDomain = cleanedText.replace(domain, "");
+  return withoutDomain.length > 2 ? withoutDomain : cleanedText;
 }
 
 /**
@@ -128,15 +129,10 @@ export function transformLink(match, attrs, url, linkText) {
 
     // Only add favicon if link text looks like a plain URL/domain
     if (isPlainUrlText(linkText, domain)) {
-      // Remove domain from link text
       const cleanedText = cleanLinkText(linkText, domain);
-
-      // Only apply if there are at least 2 letters remaining after domain
-      if (cleanedText.length > 2) {
-        return buildFaviconLink(attrs, domain, cleanedText);
-      }
+      return buildFaviconLink(attrs, domain, cleanedText);
     }
-    return match;
+    return match; // @TODO: throw?
   } catch (e) {
     // If URL parsing fails, return original match
     return match;

package/src/cli/download-files.js

@@ -1,136 +0,0 @@
-#!/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();
-