@anydigital/bricks 0.22.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.
- package/README.md +8 -7
- package/bricks/__html.liquid +35 -0
- package/bricks/__html.njk +35 -0
- package/bricks/_gtm.njk +22 -0
- package/package.json +1 -1
- package/bricks/__html-begin.liquid +0 -40
- 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
|
|
195
|
+
### Base HTML Template (`__html.liquid`)
|
|
196
196
|
|
|
197
|
-
|
|
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
|
-
{%
|
|
215
|
+
{% capture page_content %}
|
|
216
|
+
<!-- Your page content -->
|
|
217
|
+
{% endcapture %}
|
|
216
218
|
|
|
217
|
-
|
|
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
|
|
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
|
|
|
@@ -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>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<!doctype html>
|
|
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" />
|
|
11
|
+
|
|
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 #}
|
|
18
|
+
|
|
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 #}
|
|
25
|
+
|
|
26
|
+
{{ content_for_header }}
|
|
27
|
+
{% include 'bricks/_gtm.njk' %}
|
|
28
|
+
</head>
|
|
29
|
+
|
|
30
|
+
<body>
|
|
31
|
+
{% set for_body = true %}{% include 'bricks/_gtm.njk' %}
|
|
32
|
+
{% block body %}
|
|
33
|
+
{% endblock %}
|
|
34
|
+
</body>
|
|
35
|
+
</html>
|
package/bricks/_gtm.njk
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{% if site.prod and site.gtm_id %}
|
|
2
|
+
{# prettier-ignore-start #}
|
|
3
|
+
{% if not for_body %}
|
|
4
|
+
|
|
5
|
+
<!-- Google Tag Manager -->
|
|
6
|
+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
7
|
+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
8
|
+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
9
|
+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
10
|
+
})(window,document,'script','dataLayer','{{ site.gtm_id }}');</script>
|
|
11
|
+
<!-- End Google Tag Manager -->
|
|
12
|
+
|
|
13
|
+
{% else %}
|
|
14
|
+
|
|
15
|
+
<!-- Google Tag Manager (noscript) -->
|
|
16
|
+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.gtm_id }}"
|
|
17
|
+
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
18
|
+
<!-- End Google Tag Manager (noscript) -->
|
|
19
|
+
|
|
20
|
+
{% endif %}
|
|
21
|
+
{# prettier-ignore-end #}
|
|
22
|
+
{% endif %}
|
package/package.json
CHANGED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
{% # if-true trick not to break auto-formatting %}
|
|
3
|
-
{% if true %}<html lang="{{ site.lang | default: 'en' }}">{% endif %}
|
|
4
|
-
|
|
5
|
-
<head>
|
|
6
|
-
<meta charset="utf-8">
|
|
7
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
|
|
8
|
-
<title>
|
|
9
|
-
{{- title | strip_html | append: ' | ' | if: title -}}
|
|
10
|
-
{{- site.title -}}
|
|
11
|
-
</title>
|
|
12
|
-
<link rel="icon" href="/favicon.ico">
|
|
13
|
-
|
|
14
|
-
{% # styles %}
|
|
15
|
-
{%- for href in site.styles %}
|
|
16
|
-
<link rel="stylesheet" href="{{ href }}">
|
|
17
|
-
{%- endfor %}
|
|
18
|
-
<style>
|
|
19
|
-
{{ site.inline_styles | join: '\n' }}
|
|
20
|
-
</style>
|
|
21
|
-
|
|
22
|
-
{% # scripts %}
|
|
23
|
-
{%- for src in site.scripts %}
|
|
24
|
-
<script src="{{ src }}" defer></script>
|
|
25
|
-
{%- endfor %}
|
|
26
|
-
<script type="module">
|
|
27
|
-
{{ site.inline_scripts | join: '\n' }}
|
|
28
|
-
</script>
|
|
29
|
-
|
|
30
|
-
{% # custom %}
|
|
31
|
-
{{ content_for_header }}
|
|
32
|
-
|
|
33
|
-
{% render './_gtm', site: site %}
|
|
34
|
-
</head>
|
|
35
|
-
|
|
36
|
-
{% # if-true trick not to break auto-formatting %}
|
|
37
|
-
{% if true %}
|
|
38
|
-
<body>
|
|
39
|
-
{% render './_gtm', site: site, for_body: true %}
|
|
40
|
-
{% endif %}
|
package/bricks/__html-end.liquid
DELETED