@anydigital/bricks 0.23.0 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +8 -7
  2. package/bricks/__html.liquid +35 -0
  3. package/bricks/__html.njk +26 -31
  4. package/package.json +1 -1
  5. package/bricks/__html-begin.liquid +0 -36
  6. package/bricks/__html-end.liquid +0 -2
package/README.md CHANGED
@@ -192,9 +192,9 @@ The breakout container has `10%` inline padding and a max-width of `calc(10% + 6
192
192
 
193
193
  The package includes reusable Liquid templates in the `bricks/` directory. These are useful for common web development patterns.
194
194
 
195
- ### Base HTML Template (`__html-begin.liquid` and `__html-end.liquid`)
195
+ ### Base HTML Template (`__html.liquid`)
196
196
 
197
- 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.
197
+ A unified base HTML template that provides the essential document structure with built-in support for modern web best practices.
198
198
 
199
199
  **Features:**
200
200
 
@@ -212,17 +212,18 @@ Base HTML templates that provide the essential document structure with built-in
212
212
  **Usage:**
213
213
 
214
214
  ```liquid
215
- {% render 'bricks/__html-begin', site: site, title: title, content_for_header: content_for_header %}
215
+ {% capture page_content %}
216
+ <!-- Your page content -->
217
+ {% endcapture %}
216
218
 
217
- <!-- Your page content -->
218
-
219
- {% render 'bricks/__html-end' %}
219
+ {% render 'bricks/__html', site: site, title: title, content_for_header: content_for_header, body: page_content %}
220
220
  ```
221
221
 
222
222
  Note: Google Tag Manager is automatically included in both `<head>` and `<body>` (via the `_gtm.liquid` template) when `site.prod` and `site.gtm_id` are set.
223
223
 
224
224
  **Variables:**
225
225
 
226
+ - `body` - The page content to be rendered inside the `<body>` tag (required)
226
227
  - `title` - Page title (optional, will be stripped of HTML tags)
227
228
  - `site.title` - Site title for the title suffix
228
229
  - `site.lang` - Language code (optional, defaults to `'en'`)
@@ -278,7 +279,7 @@ A template for embedding Google Tag Manager scripts in your pages.
278
279
  - `site.prod` - Boolean flag to enable GTM only in production
279
280
  - `for_body` - Boolean flag (default: `false`). When `false`, renders the script tag for the `<head>`. When `true`, renders the noscript fallback for the `<body>`.
280
281
 
281
- **Note:** This template is automatically included when using `__html-begin.liquid` and `__html-end.liquid`. You only need to manually render it if you're not using those base templates.
282
+ **Note:** This template is automatically included when using `__html.liquid`. You only need to manually render it if you're not using that base template.
282
283
 
283
284
  **Manual Usage:**
284
285
 
package/bricks/__html.liquid ADDED
@@ -0,0 +1,35 @@
1
+ <!doctype html>
2
+ <html lang="{{ site.lang | default: 'en' }}">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
6
+ <title>
7
+ {{- title | strip_html | append: ' | ' | if: title -}}
8
+ {{- site.title -}}
9
+ </title>
10
+ <link rel="icon" href="/favicon.ico">
11
+
12
+ {%- for href in site.styles %}
13
+ <link rel="stylesheet" href="{{ href }}">
14
+ {%- endfor %}
15
+ {% # prettier-ignore %}
16
+ <style>{{ site.inline_styles | join: '\n' }}</style>
17
+ {% # %}
18
+
19
+ {%- for src in site.scripts %}
20
+ <script src="{{ src }}" defer></script>
21
+ {%- endfor %}
22
+ {% # prettier-ignore %}
23
+ <script type="module">{{ site.inline_scripts | join: '\n' }}</script>
24
+ {% # %}
25
+
26
+ {{ content_for_header }}
27
+ {% render './_gtm', site: site %}
28
+ </head>
29
+
30
+ <body>
31
+ {% render './_gtm', site: site, for_body: true %}
32
+ {{ body }}
33
+ {% # %}
34
+ </body>
35
+ </html>
package/bricks/__html.njk CHANGED
@@ -1,40 +1,35 @@
1
1
  <!doctype html>
2
- {# prettier-ignore-start #}
3
- <html lang="{{ site.lang | d('en') }}">
4
- {# prettier-ignore-end #}
2
+ <html lang="{{ site.lang | d('en') }}">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
6
+ <title>
7
+ {{- title | strip_html ~ ' | ' if title -}}
8
+ {{- site.title -}}
9
+ </title>
10
+ <link rel="icon" href="/favicon.ico" />
5
11
 
6
- <head>
7
- <meta charset="utf-8" />
8
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
9
- <title>
10
- {{- title | strip_html ~ ' | ' if title -}}
11
- {{- site.title -}}
12
- </title>
13
- <link rel="icon" href="/favicon.ico" />
12
+ {%- for href in site.styles %}
13
+ <link rel="stylesheet" href="{{ href }}" />
14
+ {%- endfor %}
15
+ {# prettier-ignore-start #}
16
+ <style>{{ site.inline_styles | d([]) | join('\n') }}</style>
17
+ {# prettier-ignore-end #}
14
18
 
15
- {%- for href in site.styles %}
16
- <link rel="stylesheet" href="{{ href }}" />
17
- {%- endfor %}
18
- {# prettier-ignore-start #}
19
- <style>{{ site.inline_styles | d([]) | join('\n') }}</style>
20
- {# prettier-ignore-end #}
19
+ {%- for src in site.scripts %}
20
+ <script src="{{ src }}" defer></script>
21
+ {%- endfor %}
22
+ {# prettier-ignore-start #}
23
+ <script type="module">{{ site.inline_scripts | d([]) | join('\n') }}</script>
24
+ {# prettier-ignore-end #}
21
25
 
22
- {%- for src in site.scripts %}
23
- <script src="{{ src }}" defer></script>
24
- {%- endfor %}
25
- {# prettier-ignore-start #}
26
- <script type="module">{{ site.inline_scripts | d([]) | join('\n') }}</script>
27
- {# prettier-ignore-end #}
26
+ {{ content_for_header }}
27
+ {% include 'bricks/_gtm.njk' %}
28
+ </head>
28
29
 
29
- {{ content_for_header }}
30
- {% include 'bricks/_gtm.njk' %}
31
- </head>
32
-
33
- {# prettier-ignore-start #}
34
30
  <body>
35
31
  {% set for_body = true %}{% include 'bricks/_gtm.njk' %}
36
- {% block body %}{% endblock %}
32
+ {% block body %}
33
+ {% endblock %}
37
34
  </body>
38
-
39
35
  </html>
40
- {# prettier-ignore-end #}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anydigital/bricks",
3
- "version": "0.23.0",
3
+ "version": "0.24.0",
4
4
  "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
5
5
  "main": "dist/bricks.css",
6
6
  "style": "dist/bricks.css",
package/bricks/__html-begin.liquid DELETED
@@ -1,36 +0,0 @@
1
- <!doctype html>
2
- {% if true %}
3
- <html lang="{{ site.lang | default: 'en' }}">
4
- {% endif %}
5
-
6
- <head>
7
- <meta charset="utf-8">
8
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
9
- <title>
10
- {{- title | strip_html | append: ' | ' | if: title -}}
11
- {{- site.title -}}
12
- </title>
13
- <link rel="icon" href="/favicon.ico">
14
-
15
- {%- for href in site.styles %}
16
- <link rel="stylesheet" href="{{ href }}">
17
- {%- endfor %}
18
- {% # prettier-ignore %}
19
- <style>{{ site.inline_styles | join: '\n' }}</style>
20
- {% # %}
21
-
22
- {%- for src in site.scripts %}
23
- <script src="{{ src }}" defer></script>
24
- {%- endfor %}
25
- {% # prettier-ignore %}
26
- <script type="module">{{ site.inline_scripts | join: '\n' }}</script>
27
- {% # %}
28
-
29
- {{ content_for_header }}
30
- {% render './_gtm', site: site %}
31
- </head>
32
-
33
- {% if true %}
34
- <body>
35
- {% render './_gtm', site: site, for_body: true %}
36
- {% endif %}
package/bricks/__html-end.liquid DELETED
@@ -1,2 +0,0 @@
1
- </body>
2
- </html>