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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
<div class="homepage">
<section class="hero">
<h1>JinjaX</h1>
<h2>
Super
<span class="g1">components powers</span>
for your
<span class="g2">Jinja templates</span>
</h2>
</section>
<section class="code">
<div class="stack">
<div class="panel">
<h2>Before: chaos!</h2>
{% filter markdown %}{% raw %}
```html+jinja
{% extends "layout.html" %}
{% block title %}My title{% endblock %}
{% from "bunch_of_macros.html"
import card_macro, another_macro %}
{% block content -%}
<div>
<h2>Hello {{ mistery or "World?" }}</h2>
<div>
{% call card_macro(div="So verbose") %}
{% for product in products %}
{{ another_macro(product) }}
{% endfor %}
{% endcall %}
</div>
</div>
{% with items=products %}
{% include "snippets/pagination.html" %}
{% endwith %}
{%- endblock %}
```
{% endraw %}{% endfilter %}
</div>
<div class="panel">
<h2>After: ✨ clarity ✨</h2>
{% filter markdown %}{% raw %}
```html+jinja
{#def products, msg="World!" #}
<Layout title="My title">
<div>
<h2>Hello, {{ msg }}</h2>
<div>
<Card div="So clean">
{% for product in products %}
<Product product={{ product }} />
{% endfor %}
</Card>
</div>
</div>
<Paginator items={{ products }} />
</Layout>
```
{% endraw %}{% endfilter %}
</div>
</div>
</section>
<section class="features">
<h2>
Better than <code>include</code> and <code>macros</code>
</h2>
<div class="cd-cards">
<article class="card">
<div class="header">
<h3>Encapsulated</h3>
<img src="/static/img/encapsulated.svg" width="32" height="32">
</div>
<div class="body prose prose-zinc">
<div>
Link to their own <code>css</code> and/or <code>js</code> files
and can be copy/pasted to other projects without modifications.
</div>
</div>
</article>
<article class="card">
<div class="header">
<h3>Simple</h3>
<img src="/static/img/simple.svg" width="32" height="32">
</div>
<div class="body prose prose-zinc">
<div>
Just regular Jinja files and no need to import them.
Easier to use and easier to read.
</div>
</div>
</article>
<article class="card">
<div class="header">
<h3>Modern</h3>
<img src="/static/img/modern.svg" width="32" height="32">
</div>
<div class="body prose prose-zinc">
<div>
Components works great with
<a href="https://htmx.org/" target="_blank">htmx</a>,
<a href="https://tailwindcss.com/" target="_blank">TailwindCSS</a>,
or <a href="https://hotwired.dev/" target="_blank">Hotwire</a>
</div>
</div>
</article>
<article class="card">
<div class="header">
<h3>Composable</h3>
<img src="/static/img/composable.svg" width="32" height="32">
</div>
<div class="body prose prose-zinc">
<div>
Can wrap content (HTML, other components, etc.) in a natural way.
</div>
</div>
</article>
</div>
</section>
<section class="spaghetti">
<div class="wrapper">
<h2>
Say goodbye to spaghetti templates
</h2>
<div class="text">
<img src="/static/img/spaghetti_code.png" alt="Spaguetti code">
<p>Your Python code should be easy to understand and test.</p>
<p><b>Template code, however, often fails even basic code standards</b>: long methods, deep conditional nesting,and mystery variables everywhere.
</p>
<p><b>But when it's built with components, you see</b> where everything is, understand what are the possible statesof every piece of UI, and know exactly what data need to have.
</p>
<p>You can replace <b>all</b> your templates with components, or start with one section.</p>
</div>
</div>
</section>
<section class="engage" data-md-skip>
<div class="wrapper">
<h3>Ready to get going? Engage!</h3>
<a href="./guide/">Get started <i>→</i></a>
<div class="hint">Millions of people clicked a button in the last week alone!</div>
</div>
</section>
</div>
|
