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