atom-engine 5.0.2

A component-oriented template engine built on Tera with props, slots, and provide/inject context
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

# Stack System

The stack system allows accumulating content from multiple places and rendering it together.

## Push to Stack

```html
{% call push(name="scripts", content="<script>console.log('a')</script>") %}
{% call push(name="scripts", content="<script>console.log('b')</script>") %}
{% call push(name="scripts", content="<script>console.log('c')</script>") %}
```

## Prepend to Stack

```html
{% call prepend(name="styles", content="<link rel='stylesheet' href='a.css'>") %}
{% call prepend(name="styles", content="<link rel='stylesheet' href='b.css'>") %}
```

## Render Stack

```html
{{ "scripts" | stack }}

{{ "styles" | stack }}
```

## Use Cases

### Collecting Page Scripts

```html
{# layout.html #}
<html>
<head>
    {{ "styles" | stack }}
</head>
<body>
    {{ content }}
</body>
<script>
    {{ "scripts" | stack }}
</script>
</html>
```

```html
{# page.html #}
{% extends "layout.html" %}

{% block content %}
    <h1>My Page</h1>
{% endblock %}

{# Push scripts from components or partials #}
{% call push(name="scripts", content="<script>initPage()</script>") %}
```

### Page-specific Styles

```html
{# In different templates #}
{% call push(name="page_styles", content="<style>.red { color: red }</style>") %}
{% call push(name="page_styles", content="<style>.blue { color: blue }</style>") %}

{# In base template #}
<head>
    {{ "page_styles" | stack }}
</head>
```

### Meta Tags

```html
{# In templates #}
{% call push(name="meta", content="<meta name='description' content='...'>") %}

{# In head #}
{{ "meta" | stack }}
```