@anydigital/bricks 1.0.0-alpha.10 → 1.0.0-alpha.12

package/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

package/README.md

@@ -1,13 +1,13 @@
 # *Any*bricks
 
-Framework-agnostic CSS utilities and single-file Nunjucks 'bricks' for modern web development.
+Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.
 
 ## Installation
 
 ### Via CDN
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@anydigital/bricks@1/dist/bricks.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@anydigital/bricks@1/dist/bricks.css" />
 ```
 
 ### Via npm
@@ -19,7 +19,7 @@ npm install @anydigital/bricks
 Then import in your CSS:
 
 ```css
-@import '@anydigital/bricks';
+@import "@anydigital/bricks";
 ```
 
 ## Features
@@ -29,7 +29,8 @@ Then import in your CSS:
 Prevents horizontal overflow and scrolling on the entire page:
 
 ```css
-html, body {
+html,
+body {
   overflow-x: clip;
 }
 ```
@@ -70,21 +71,25 @@ This is automatically applied when you include the stylesheet.
 The `.prose` class provides enhanced typography for article content and long-form text with container-like behavior:
 
 **Container:**
+
 - Full width with `1rem` padding
 - Centered with automatic inline margins
 
 **Links:**
+
 - Custom underline offset (`0.1em`) and thickness (`1px` default, `2px` on hover)
 - Anchor links (starting with `#`) have no text decoration
 - Special handling for `small`, `sup`, or `sub` elements: lighter weight (`300`) and displayed as `inline-block` to prevent underline decoration
 
 **Headings:**
+
 - `h1` with `small`, `sup`, or `sub` elements get reduced font size (`0.5em`) and lighter weight (`300`)
 - `h2` headings (without classes) get a full-width decorative bar above them (`0.4em` height, positioned `1em` above, with `2em` top margin)
 - `h3` headings (without classes) get a decorative gradient bar to the left (`10em` width, `0.3em` height, fading from 10% to 5% to transparent opacity)
 - `h4` headings (without classes) get a similar decorative gradient bar but thinner (`0.2em` height)
 
 **Tables:**
+
 - Tables are displayed as blocks with horizontal scrolling
 - On mobile (max-width: 767px), tables get `1.5em` horizontal padding
 - Table cells have `1em` vertical padding (top and bottom)
@@ -92,6 +97,7 @@ The `.prose` class provides enhanced typography for article content and long-for
 - Support for headings in Markdown tables using `big` elements (styled as bold italic)
 
 **Blockquotes:**
+
 - Lighter font weight (`300`)
 - Adjacent `figcaption` elements are styled with italic text, right alignment, lighter weight (`300`), negative top margin (`-1em`), and an em dash prefix
 
@@ -131,7 +137,7 @@ Includes [breakout-css](https://github.com/anydigital/breakout-css) utilities fo
 
 ```html
 <div class="breakout">
-  <img src="image.jpg" alt="Description">
+  <img src="image.jpg" alt="Description" />
 </div>
 ```
 
@@ -139,66 +145,68 @@ The breakout utilities support images, pictures, figures, canvas, audio, video,
 
 ## Bricks (Template Components)
 
-The package includes reusable Nunjucks template macros in the `bricks/` directory. These are useful for common web development patterns.
+The package includes reusable Liquid templates in the `bricks/` directory. These are useful for common web development patterns.
 
-### Base HTML Template (`__html.njk`)
+### Base HTML Template (`__html-begin.liquid` and `__html-end.liquid`)
 
-A base HTML template that provides the essential document structure with built-in support for modern web best practices.
+Base HTML templates that provide the essential document structure with built-in support for modern web best practices. Split into begin and end files to wrap around your content.
 
 **Features:**
-- HTML5 DOCTYPE with language attribute
+
+- HTML5 DOCTYPE with language attribute (defaults to `en`, configurable via `site.lang`)
 - UTF-8 charset and comprehensive viewport meta tag with `viewport-fit=cover` for notched devices
 - Dynamic title generation with site title suffix
 - Favicon link
+- Automatic stylesheet linking from `site.styles` array
+- Inline styles from `site.inline_styles` array
+- Automatic script loading from `site.scripts` array (with `defer` attribute)
+- Inline module scripts from `site.inline_scripts` array
+- Custom header content via `content_for_header`
 - Google Tag Manager integration (conditional on production environment)
-- Head and body content blocks for template extension
 
 **Usage:**
 
-```njk
-{% extends 'bricks/__html.njk' %}
+```liquid
+{% render 'bricks/__html-begin', site: site, title: title, content_for_header: content_for_header %}
 
-{% block head %}
-  <!-- Additional head elements (optional) -->
-{% endblock %}
+<!-- Your page content -->
 
-{% block body %}
-  <!-- Your page content -->
-{% endblock %}
+{% render 'bricks/__html-end' %}
 ```
 
-**Required Variables:**
+**Variables:**
+
 - `title` - Page title (optional, will be stripped of HTML tags)
 - `site.title` - Site title for the title suffix
-- `site.gtmId` - Google Tag Manager ID (optional)
-- `site.isProd` - Boolean flag for production environment (optional)
-- `fromBricks` - Path to the bricks directory (optional, defaults to `'bricks/'`)
+- `site.lang` - Language code (optional, defaults to `'en'`)
+- `site.styles` - Array of stylesheet URLs (optional)
+- `site.inline_styles` - Array of inline CSS strings (optional)
+- `site.scripts` - Array of script URLs (optional)
+- `site.inline_scripts` - Array of inline JavaScript strings (optional)
+- `content_for_header` - Custom HTML for the head section (optional)
+- `site.gtm_id` - Google Tag Manager ID (optional)
+- `site.prod` - Boolean flag for production environment (optional)
 
-### Navigation (`_nav.njk`)
+### Navigation (`_nav.liquid`)
 
-A navigation macro that renders a list of navigation links with proper accessibility attributes.
+A navigation template that renders a list of navigation links with proper accessibility attributes.
 
 **Parameters:**
-- `navPages` - Array of navigation page objects with `url` and `title` properties
-- `curPageUrl` - The URL of the current page (used to set `aria-current="page"`)
+
+- `nav_pages` - Array of navigation page objects with `url` and `title` properties
+- `current_url` - The URL of the current page (used to set `aria-current="page"`)
 
 **Usage:**
 
-```njk
-{% from "bricks/_nav.njk" import render %}
-{{ render(navPages, page.url) }}
+```liquid
+{% render 'bricks/_nav', nav_pages: navPages, current_url: page.url %}
 ```
 
 **Example:**
 
-```njk
-{% set navPages = [
-  { url: '/', title: 'Home' },
-  { url: '/about', title: 'About' },
-  { url: '/contact', title: 'Contact' }
-] %}
-{% from "bricks/_nav.njk" import render %}
-{{ render(navPages, '/about') }}
+```liquid
+{% assign navPages = site.pages | where: "nav", true %}
+{% render 'bricks/_nav', nav_pages: navPages, current_url: page.url %}
 ```
 
 **Output:**
@@ -213,46 +221,47 @@ A navigation macro that renders a list of navigation links with proper accessibi
 
 **Compatibility:** Compatible with [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually).
 
-### Google Tag Manager (`_gtm.njk`)
+### Google Tag Manager (`_gtm.liquid`)
 
-A macro for embedding Google Tag Manager scripts in your pages.
+A template for embedding Google Tag Manager scripts in your pages.
 
 **Parameters:**
-- `gtmId` - Your Google Tag Manager container ID (e.g., `GTM-XXXXXXX`)
-- `bodyFallback` - Boolean flag (default: `false`). When `false`, renders the script tag for the `<head>`. When `true`, renders the noscript fallback for the `<body>`.
+
+- `site.gtm_id` - Your Google Tag Manager container ID (e.g., `GTM-XXXXXXX`)
+- `site.prod` - Boolean flag to enable GTM only in production
+- `for_body` - Boolean flag (default: `false`). When `false`, renders the script tag for the `<head>`. When `true`, renders the noscript fallback for the `<body>`.
 
 **Usage:**
 
 In your base template's `<head>`:
 
-```njk
-{% import "bricks/_gtm.njk" as gtm %}
-{{ gtm.render(site.gtmId) }}
+```liquid
+{% render 'bricks/_gtm', site: site %}
 ```
 
 In your base template's `<body>` (right after the opening tag):
 
-```njk
-{{ gtm.render(site.gtmId, bodyFallback=true) }}
+```liquid
+{% render 'bricks/_gtm', site: site, for_body: true %}
 ```
 
 **Example:**
 
-```njk
+```liquid
 <!DOCTYPE html>
 <html>
 <head>
-  {% import "bricks/_gtm.njk" as gtm %}
-  {{ gtm.render('GTM-XXXXXXX') }}
+  {% render 'bricks/_gtm', site: site %}
 </head>
 <body>
-  {{ gtm.render('GTM-XXXXXXX', bodyFallback=true) }}
+  {% render 'bricks/_gtm', site: site, for_body: true %}
   <!-- Your content -->
 </body>
 </html>
 ```
 
+**Note:** The GTM script is only rendered when both `site.prod` is `true` and `site.gtm_id` is set.
+
 ## License
 
 MIT
-

package/bricks/__html-begin.liquid

@@ -0,0 +1,40 @@
+<!doctype html>
+{% # if-true trick not to break auto-formatting %}
+{% if true %}<html lang="{{ site.lang | default: 'en' }}">{% endif %}
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
+  <title>
+    {{- title | strip_html | append: ' | ' | if: title -}}
+    {{- site.title -}}
+  </title>
+  <link rel="icon" href="/favicon.ico">
+
+  {% # styles %}
+  {%- for href in site.styles %}
+    <link rel="stylesheet" href="{{ href }}">
+  {%- endfor %}
+  <style>
+    {{ site.inline_styles | join: '\n' }}
+  </style>
+
+  {% # scripts %}
+  {%- for src in site.scripts %}
+    <script src="{{ src }}" defer></script>
+  {%- endfor %}
+  <script type="module">
+    {{ site.inline_scripts | join: '\n' }}
+  </script>
+
+  {% # custom %}
+  {{ content_for_header }}
+
+  {% render './_gtm', site: site %}
+</head>
+
+{% # if-true trick not to break auto-formatting %}
+{% if true %}
+  <body>
+    {% render './_gtm', site: site, for_body: true %}
+{% endif %}

package/bricks/__html-end.liquid

@@ -0,0 +1,2 @@
+  </body>
+</html>

package/bricks/__html.css

@@ -1,5 +1,6 @@
 /* Prevent horizontal overflow and scrolling, modern way */
-html, body {
+html,
+body {
   overflow-x: clip;
 }
 

package/bricks/{_gtm.njk → _gtm.liquid}

@@ -1,18 +1,23 @@
-{% macro render(gtmId, bodyFallback=false) %}
+{% if site.prod and site.gtm_id %}
+  {% capture _ %}
+    {% unless for_body %}
 
-{% if not bodyFallback %}
 <!-- Google Tag Manager -->
 <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','{{ gtmId }}');</script>
+})(window,document,'script','dataLayer','{{ site.gtm_id }}');</script>
 <!-- End Google Tag Manager -->
-{% else %}
+
+    {% else %}
+
 <!-- Google Tag Manager (noscript) -->
-<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ gtmId }}"
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.gtm_id }}"
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <!-- End Google Tag Manager (noscript) -->
-{% endif %}
 
-{% endmacro %}
+    {% endunless %}
+  {% endcapture %}
+  {{ _ | strip }}
+{% endif %}

package/bricks/_nav.liquid

@@ -0,0 +1,9 @@
+<nav>
+  {%- for entry in nav_pages %}
+    {% # prettier-ignore %}
+    <a href="{{ entry.url }}" {% if entry.url == current_url %}aria-current="page"{% endif %}>
+      {{- entry.title -}}
+    </a>
+  {%- endfor %}
+</nav>
+{% # Compatible with https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually %}

package/bricks/_prose.css

@@ -15,15 +15,26 @@
       text-decoration-thickness: 2px;
     }
 
-    small, sup, sub {
+    small,
+    sup,
+    sub {
       font-weight: 300;
       /* Workaround to prevent underline */
       display: inline-block;
     }
+
+    /* Helper to insert icons in links */
+    i {
+      font-style: normal;
+      /* Workaround to prevent underline */
+      display: inline-block;
+    }
   }
 
   h1 {
-    small, sup, sub {
+    small,
+    sup,
+    sub {
       font-size: 0.5em;
       font-weight: 300;
     }
@@ -35,10 +46,10 @@
     position: relative;
 
     &::before {
-      content: '';
+      content: "";
       display: block;
       position: absolute;
-      background-color: rgba(0,0,0,5%);
+      background-color: rgba(0, 0, 0, 5%);
     }
   }
   h2:not([class]) {
@@ -46,22 +57,22 @@
 
     &::before {
       width: 100vw;
-        left: 50%;
+      left: 50%;
       height: 0.4em;
-        top: -1em;
-        transform: translateX(-50%);
+      top: -1em;
+      transform: translateX(-50%);
     }
   }
   h3:not([class]),
   h4:not([class]) {
     &::before {
       width: 10em;
-        right: 100%;
-        margin-right: 0.5em;
+      right: 100%;
+      margin-right: 0.5em;
       height: 0.3em;
-        top: 50%;
-        transform: translateY(-50%);
-      background: linear-gradient(to left, rgba(0,0,0,10%), rgba(0,0,0,5%) 10%, transparent);
+      top: 50%;
+      transform: translateY(-50%);
+      background: linear-gradient(to left, rgba(0, 0, 0, 10%), rgba(0, 0, 0, 5%) 10%, transparent);
     }
   }
   h4:not([class]) {
@@ -77,7 +88,8 @@
       padding-inline: 1.5em;
     }
   }
-  th, td {
+  th,
+  td {
     padding-top: 1em;
     padding-bottom: 1em;
     /* Workaround to widen particular columns */
@@ -103,9 +115,9 @@
       font-weight: 300;
 
       &::before {
-        content: '—';
+        content: "—";
         margin-right: 0.25em;
       }
     }
-  }  
+  }
 }

package/dist/bricks.css

@@ -5,7 +5,8 @@
 
 /* Prevent horizontal overflow and scrolling, modern way */
 
-html, body {
+html,
+body {
   overflow-x: clip;
 }
 
@@ -31,7 +32,7 @@ body  > main {
   /* Container-like behavior with padding and auto margins */
   width: 100%;
   padding: 1rem;
-  margin-inline: auto;  
+  margin-inline: auto;
 }
 
 .prose a {
@@ -54,6 +55,14 @@ body  > main {
       display: inline-block;
     }
 
+/* Helper to insert icons in links */
+
+.prose a i {
+      font-style: normal;
+      /* Workaround to prevent underline */
+      display: inline-block;
+    }
+
 .prose h1 small,.prose h1 sup,.prose h1 sub {
       font-size: 0.5em;
       font-weight: 300;
@@ -64,24 +73,24 @@ body  > main {
   }
 
 .prose h2:not([class])::before {
-      content: '';
+      content: "";
       display: block;
       position: absolute;
-      background-color: rgba(0,0,0,5%);
+      background-color: rgba(0, 0, 0, 5%);
     }
 
 .prose h3:not([class])::before {
-      content: '';
+      content: "";
       display: block;
       position: absolute;
-      background-color: rgba(0,0,0,5%);
+      background-color: rgba(0, 0, 0, 5%);
     }
 
 .prose h4:not([class])::before {
-      content: '';
+      content: "";
       display: block;
       position: absolute;
-      background-color: rgba(0,0,0,5%);
+      background-color: rgba(0, 0, 0, 5%);
     }
 
 .prose h2:not([class]) {
@@ -90,30 +99,30 @@ body  > main {
 
 .prose h2:not([class])::before {
       width: 100vw;
-        left: 50%;
+      left: 50%;
       height: 0.4em;
-        top: -1em;
-        transform: translateX(-50%);
+      top: -1em;
+      transform: translateX(-50%);
     }
 
 .prose h3:not([class])::before {
       width: 10em;
-        right: 100%;
-        margin-right: 0.5em;
+      right: 100%;
+      margin-right: 0.5em;
       height: 0.3em;
-        top: 50%;
-        transform: translateY(-50%);
-      background: linear-gradient(to left, rgba(0,0,0,10%), rgba(0,0,0,5%) 10%, transparent);
+      top: 50%;
+      transform: translateY(-50%);
+      background: linear-gradient(to left, rgba(0, 0, 0, 10%), rgba(0, 0, 0, 5%) 10%, transparent);
     }
 
 .prose h4:not([class])::before {
       width: 10em;
-        right: 100%;
-        margin-right: 0.5em;
+      right: 100%;
+      margin-right: 0.5em;
       height: 0.3em;
-        top: 50%;
-        transform: translateY(-50%);
-      background: linear-gradient(to left, rgba(0,0,0,10%), rgba(0,0,0,5%) 10%, transparent);
+      top: 50%;
+      transform: translateY(-50%);
+      background: linear-gradient(to left, rgba(0, 0, 0, 10%), rgba(0, 0, 0, 5%) 10%, transparent);
     }
 
 .prose h4:not([class])::before {
@@ -163,7 +172,7 @@ body  > main {
     }
 
 .prose blockquote + figcaption::before {
-        content: '—';
+        content: "—";
         margin-right: 0.25em;
       }
 

package/package.json

@@ -1,13 +1,9 @@
 {
   "name": "@anydigital/bricks",
-  "version": "1.0.0-alpha.10",
-  "description": "Framework-agnostic CSS utilities and single-file Nunjucks 'bricks' for modern web development.",
+  "version": "1.0.0-alpha.12",
+  "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
   "main": "dist/bricks.css",
   "style": "dist/bricks.css",
-  "files": [
-    "dist",
-    "bricks"
-  ],
   "scripts": {
     "postcss": "postcss bricks/bricks.css -o dist/bricks.css",
     "build": "npm run postcss -- --no-map",
@@ -33,7 +29,5 @@
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.1",
     "postcss-preset-env": "^10.6.0"
-  },
-  "jsdelivr": "dist/bricks.css",
-  "unpkg": "dist/bricks.css"
+  }
 }

package/postcss.config.js

@@ -0,0 +1,8 @@
+const breakoutConfig = require('./node_modules/@anydigital/breakout-css/postcss.config.js');
+
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    ...breakoutConfig.plugins,
+  }
+}

package/bricks/__html.njk

@@ -1,17 +0,0 @@
-{%- set fromBricks = fromBricks | default('bricks/') -%}
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
-  <title>{{ title | striptags ~ ' | ' if title }}{{ site.title }}</title>
-  <link rel="icon" href="/favicon.ico">
-  {% block head %}{% endblock %}
-  {% import fromBricks ~ '_gtm.njk' as gtm %}
-  {{ gtm.render(site.gtmId) if site.gtmId and site.isProd }}
-</head>
-<body>
-  {{ gtm.render(site.gtmId, bodyFallback=true) if site.gtmId and site.isProd }}
-  {% block body %}{% endblock %}
-</body>
-</html>

package/bricks/_nav.njk

@@ -1,10 +0,0 @@
-{% macro render(navPages, curPageUrl) %}
-<nav>
-  {%- for entry in navPages %}
-  <a href="{{ entry.url }}" {{ 'aria-current="page"' | safe if entry.url == curPageUrl }}>
-    {{- entry.title -}}
-  </a>
-  {%- endfor %}
-</nav>
-{% endmacro %}
-{# Compatible with https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually #}