diff options
Diffstat (limited to 'docs/components/Home.jinja')
| -rw-r--r-- | docs/components/Home.jinja | 154 |
1 files changed, 154 insertions, 0 deletions
diff --git a/docs/components/Home.jinja b/docs/components/Home.jinja new file mode 100644 index 0000000..045150b --- /dev/null +++ b/docs/components/Home.jinja @@ -0,0 +1,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>
\ No newline at end of file |