@anydigital/eleventy-bricks 0.22.0 → 0.22.1

package/README.md

@@ -275,9 +275,9 @@ Before transformation:
 After transformation:
 
 ```html
-<a href="https://github.com/anydigital/eleventy-bricks" target="_blank">
+<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>
-  /anydigital/eleventy-bricks
+  <span>/anydigital/eleventy-bricks</span>
 </a>
 ```
 
@@ -288,7 +288,9 @@ After transformation:
 - 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
+- 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:**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/eleventy-bricks",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "A collection of helpful utilities and filters for Eleventy (11ty)",
   "type": "module",
   "main": "./src/index.js",

package/src/markdown.js

@@ -92,7 +92,23 @@ export function cleanLinkText(linkText, domain) {
  * @returns {string} The HTML string
  */
 export function buildFaviconLink(attrs, domain, text) {
-  return `<a ${attrs} target="_blank"><i><img src="https://www.google.com/s2/favicons?domain=${domain}&sz=32"></i>${text}</a>`;
+  let updatedAttrs = attrs;
+
+  // Check if attrs already contains a class attribute
+  if (/class\s*=\s*["']/.test(attrs)) {
+    // Append whitespace-nowrap to existing class
+    updatedAttrs = attrs.replace(/class\s*=\s*["']([^"']*)["']/i, 'class="$1 whitespace-nowrap"');
+  } else {
+    // Add new class attribute
+    updatedAttrs = attrs + ' class="whitespace-nowrap"';
+  }
+
+  // Check if attrs already contains a target attribute
+  if (!/target\s*=/.test(attrs)) {
+    updatedAttrs = updatedAttrs + ' target="_blank"';
+  }
+
+  return `<a ${updatedAttrs}><i><img src="https://www.google.com/s2/favicons?domain=${domain}&sz=32"></i><span>${text}</span></a>`;
 }
 
 /**

package/src/markdown.test.js

@@ -233,7 +233,7 @@ describe("buildFaviconLink", () => {
     const result = buildFaviconLink('href="https://example.com/docs"', "example.com", "/docs");
     assert.equal(
       result,
-      '<a href="https://example.com/docs" target="_blank"><i><img src="https://www.google.com/s2/favicons?domain=example.com&sz=32"></i>/docs</a>',
+      '<a href="https://example.com/docs" class="whitespace-nowrap" target="_blank"><i><img src="https://www.google.com/s2/favicons?domain=example.com&sz=32"></i><span>/docs</span></a>',
     );
   });
 
@@ -241,7 +241,7 @@ describe("buildFaviconLink", () => {
     const result = buildFaviconLink('href="https://example.com" class="link"', "example.com", "text");
     assert.equal(
       result,
-      '<a href="https://example.com" class="link" target="_blank"><i><img src="https://www.google.com/s2/favicons?domain=example.com&sz=32"></i>text</a>',
+      '<a href="https://example.com" class="link whitespace-nowrap" target="_blank"><i><img src="https://www.google.com/s2/favicons?domain=example.com&sz=32"></i><span>text</span></a>',
     );
   });
 
@@ -259,13 +259,13 @@ describe("buildFaviconLink", () => {
     const result = buildFaviconLink('href="https://github.com/repo"', "github.com", "/repo");
     assert.equal(
       result,
-      '<a href="https://github.com/repo" target="_blank"><i><img src="https://www.google.com/s2/favicons?domain=github.com&sz=32"></i>/repo</a>',
+      '<a href="https://github.com/repo" class="whitespace-nowrap" target="_blank"><i><img src="https://www.google.com/s2/favicons?domain=github.com&sz=32"></i><span>/repo</span></a>',
     );
   });
 
   it("should preserve link text as provided", () => {
     const result = buildFaviconLink('href="https://example.com"', "example.com", "custom text");
-    assert.match(result, />custom text<\/a>$/);
+    assert.match(result, /><span>custom text<\/span><\/a>$/);
   });
 });
 
@@ -279,7 +279,7 @@ describe("transformLink", () => {
     );
     assert.match(
       result,
-      /<i><img src="https:\/\/www\.google\.com\/s2\/favicons\?domain=example\.com&sz=32"><\/i>\/docs/,
+      /<i><img src="https:\/\/www\.google\.com\/s2\/favicons\?domain=example\.com&sz=32"><\/i><span>\/docs<\/span>/,
     );
   });
 
@@ -325,7 +325,7 @@ describe("transformLink", () => {
       "http://example.com/docs",
       "http://example.com/docs",
     );
-    assert.match(result, /<i><img[^>]*><\/i>\/docs/);
+    assert.match(result, /<i><img[^>]*><\/i><span>\/docs<\/span>/);
   });
 
   it("should work with https:// protocol", () => {
@@ -335,7 +335,7 @@ describe("transformLink", () => {
       "https://example.com/docs",
       "https://example.com/docs",
     );
-    assert.match(result, /<i><img[^>]*><\/i>\/docs/);
+    assert.match(result, /<i><img[^>]*><\/i><span>\/docs<\/span>/);
   });
 
   it("should handle longer paths correctly", () => {
@@ -345,7 +345,7 @@ describe("transformLink", () => {
       "https://example.com/path/to/document",
       "https://example.com/path/to/document",
     );
-    assert.match(result, /<i><img[^>]*><\/i>\/path\/to\/document/);
+    assert.match(result, /<i><img[^>]*><\/i><span>\/path\/to\/document<\/span>/);
   });
 
   it("should not transform when linkText doesn't look like URL", () => {
@@ -366,7 +366,7 @@ describe("transformLink", () => {
       "https://example.com/docs",
       "example.com/docs",
     );
-    assert.match(result, /<i><img[^>]*><\/i>\/docs/);
+    assert.match(result, /<i><img[^>]*><\/i><span>\/docs<\/span>/);
   });
 
   it("should handle malformed URLs by returning original match", () => {
@@ -528,7 +528,7 @@ describe("replaceLinksInHtml", () => {
     const result = replaceLinksInHtml(html, transformLink);
     // transformLink should add favicon for plain URL links
     assert.match(result, /<img src="https:\/\/www\.google\.com\/s2\/favicons\?domain=example\.com&sz=32">/);
-    assert.match(result, /\/docs<\/a>/);
+    assert.match(result, /<span>\/docs<\/span><\/a>/);
   });
 
   it("should not transform custom link text when using transformLink", () => {