From 70cab146df6483df7685cd5b579de9ef4fbe36b5 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Tue, 22 Oct 2024 18:34:51 +0200 Subject: Merging upstream version 0.47+dfsg. Signed-off-by: Daniel Baumann --- docs/components/Copyright.jinja | 4 - docs/components/Home.jinja | 154 -- docs/components/Logo.jinja | 7 - docs/components/NavExtra.jinja | 1 - docs/components/NavLinks.jinja | 2 - docs/components/SocialCardIndex.jinja | 66 - docs/components/guide/slots/CompArchive.jinja | 10 - docs/components/guide/slots/CompLayout.jinja | 14 - docs/components/guide/slots/Modal.jinja | 7 - docs/components/guide/slots/ModalBody.jinja | 7 - docs/components/guide/slots/ModalFooter.jinja | 7 - docs/components/guide/slots/ModalHeader.jinja | 10 - docs/components/ui/Accordion/Accordion.css | 67 - docs/components/ui/Accordion/DemoCSS.jinja | 51 - docs/components/ui/Accordion/DemoHTML.jinja | 29 - docs/components/ui/Accordion/DemoResult.jinja | 32 - docs/components/ui/Dialog/DemoCode.jinja | 6 - docs/components/ui/Dialog/DemoPreview.jinja | 0 docs/components/ui/LinkedList/DemoCSS.jinja | 83 - docs/components/ui/LinkedList/DemoHTML.jinja | 35 - docs/components/ui/LinkedList/DemoResult.jinja | 89 -- docs/components/ui/LinkedList/LinkedList.css | 96 -- docs/components/ui/Menu/DemoCSS.jinja | 131 -- docs/components/ui/Menu/DemoHTML.jinja | 89 -- docs/components/ui/Menu/DemoResult.jinja | 94 -- docs/components/ui/Menu/Menu.css | 127 -- docs/components/ui/Popover/DemoCSS.jinja | 96 -- docs/components/ui/Popover/DemoHTML.jinja | 23 - docs/components/ui/Popover/DemoResult.jinja | 27 - docs/components/ui/Popover/Popover.css | 101 -- docs/components/ui/Tabs/DemoCSS.jinja | 59 - docs/components/ui/Tabs/DemoHTML.jinja | 23 - docs/components/ui/Tabs/DemoResult.jinja | 28 - docs/components/ui/Tabs/ManualHTML.jinja | 28 - docs/components/ui/Tabs/ManualResult.jinja | 33 - docs/components/ui/Tabs/SelectHTML.jinja | 35 - docs/components/ui/Tabs/SelectResult.jinja | 40 - docs/components/ui/Tabs/Tabs.css | 126 -- docs/components/ui/Tabs/VerticalHTML.jinja | 28 - docs/components/ui/Tabs/VerticalResult.jinja | 33 - docs/content/api.md | 27 - docs/content/guide/components.md | 348 ----- docs/content/guide/css_and_js.md | 230 --- docs/content/guide/index.md | 196 --- docs/content/guide/integrations.md | 3 - docs/content/guide/motivation.md | 115 -- docs/content/guide/performance.md | 3 - docs/content/guide/slots.md | 175 --- docs/content/index.md | 8 - docs/content/ui/accordion.md | 43 - docs/content/ui/index.md | 58 - docs/content/ui/linkedlist.md | 19 - docs/content/ui/menu.md | 112 -- docs/content/ui/popover.md | 204 --- docs/content/ui/reldate.md | 58 - docs/content/ui/tabs.md | 162 -- docs/deploy.sh | 4 - docs/docs.py | 72 - docs/indexer.js | 27 - docs/static/docs.css | 413 ----- docs/static/favicon.ico | Bin 3481 -> 0 bytes docs/static/fonts/karla-bold-ext.woff2 | Bin 11716 -> 0 bytes docs/static/fonts/karla-bold.woff2 | Bin 24364 -> 0 bytes docs/static/fonts/karla-regular-.woff2 | Bin 24364 -> 0 bytes docs/static/fonts/karla-regular-ext.woff2 | Bin 11716 -> 0 bytes docs/static/fonts/material-symbols-rounded.woff2 | Bin 499336 -> 0 bytes docs/static/img/anatomy-en.png | Bin 242248 -> 0 bytes docs/static/img/anatomy-en.svg | 347 ----- docs/static/img/anatomy-es.svg | 288 ---- docs/static/img/anchors.png | Bin 31908 -> 0 bytes docs/static/img/apple-touch-icon.png | Bin 1156 -> 0 bytes docs/static/img/composable.svg | 3 - docs/static/img/encapsulated.svg | 3 - docs/static/img/favicon.png | Bin 2785 -> 0 bytes docs/static/img/favicon.svg | 7 - docs/static/img/jinjax-logo-w.png | Bin 10048 -> 0 bytes docs/static/img/jinjax-logo-w.svg | 1 - docs/static/img/jinjax-logo.png | Bin 9300 -> 0 bytes docs/static/img/jinjax-logo.svg | 1 - docs/static/img/logo.png | Bin 2485 -> 0 bytes docs/static/img/logo.svg | 9 - docs/static/img/modern.svg | 8 - docs/static/img/practical.svg | 3 - docs/static/img/simple.svg | 3 - docs/static/img/slots-_slot.png | Bin 316281 -> 0 bytes docs/static/img/slots-diagram.png | Bin 93431 -> 0 bytes docs/static/img/spaghetti_code.png | Bin 189680 -> 0 bytes docs/static/img/ui-accordion.png | Bin 161561 -> 0 bytes docs/static/img/ui-linkedlist.png | Bin 234533 -> 0 bytes docs/static/img/ui-menu.png | Bin 197852 -> 0 bytes docs/static/img/ui-popover.png | Bin 191576 -> 0 bytes docs/static/img/ui-reldate.png | Bin 48315 -> 0 bytes docs/static/img/ui-tabs.png | Bin 171052 -> 0 bytes docs/static/prose.css | 637 -------- docs/static/theme.css | 1808 ---------------------- docs/theme/Autodoc.jinja | 127 -- docs/theme/Callout.jinja | 45 - docs/theme/ExampleTabs.jinja | 27 - docs/theme/Footer.jinja | 10 - docs/theme/Header.jinja | 17 - docs/theme/Layout.jinja | 25 - docs/theme/MetaTags.jinja | 22 - docs/theme/NavBar.jinja | 3 - docs/theme/NavGlobal.jinja | 3 - docs/theme/NavLocal.jinja | 5 - docs/theme/NavMobile.jinja | 18 - docs/theme/NavTop.jinja | 17 - docs/theme/Page.jinja | 19 - docs/theme/PageSingle.jinja | 10 - docs/theme/PrevNext.jinja | 26 - docs/theme/SocialCard.jinja | 61 - docs/theme/Source.jinja | 24 - docs/theme/Source.js | 123 -- docs/theme/Test.jinja | 6 - docs/theme/ThemeSwitch.jinja | 36 - docs/theme/ThemeSwitch.js | 41 - docs/theme/Toc.jinja | 45 - docs/theme/TocPage.jinja | 21 - docs/theme/TocPage.js | 97 -- jinjax-logo.png | Bin 9300 -> 0 bytes package-lock.json | 6 - poetry.lock | 517 ++++--- pyproject.toml | 7 +- src/jinjax/__init__.py | 28 +- src/jinjax/catalog.py | 22 +- src/jinjax/jinjax.py | 2 +- src/jinjax/middleware.py | 17 +- 127 files changed, 325 insertions(+), 8395 deletions(-) delete mode 100644 docs/components/Copyright.jinja delete mode 100644 docs/components/Home.jinja delete mode 100644 docs/components/Logo.jinja delete mode 100644 docs/components/NavExtra.jinja delete mode 100644 docs/components/NavLinks.jinja delete mode 100644 docs/components/SocialCardIndex.jinja delete mode 100644 docs/components/guide/slots/CompArchive.jinja delete mode 100644 docs/components/guide/slots/CompLayout.jinja delete mode 100644 docs/components/guide/slots/Modal.jinja delete mode 100644 docs/components/guide/slots/ModalBody.jinja delete mode 100644 docs/components/guide/slots/ModalFooter.jinja delete mode 100644 docs/components/guide/slots/ModalHeader.jinja delete mode 100644 docs/components/ui/Accordion/Accordion.css delete mode 100644 docs/components/ui/Accordion/DemoCSS.jinja delete mode 100644 docs/components/ui/Accordion/DemoHTML.jinja delete mode 100644 docs/components/ui/Accordion/DemoResult.jinja delete mode 100644 docs/components/ui/Dialog/DemoCode.jinja delete mode 100644 docs/components/ui/Dialog/DemoPreview.jinja delete mode 100644 docs/components/ui/LinkedList/DemoCSS.jinja delete mode 100644 docs/components/ui/LinkedList/DemoHTML.jinja delete mode 100644 docs/components/ui/LinkedList/DemoResult.jinja delete mode 100644 docs/components/ui/LinkedList/LinkedList.css delete mode 100644 docs/components/ui/Menu/DemoCSS.jinja delete mode 100644 docs/components/ui/Menu/DemoHTML.jinja delete mode 100644 docs/components/ui/Menu/DemoResult.jinja delete mode 100644 docs/components/ui/Menu/Menu.css delete mode 100644 docs/components/ui/Popover/DemoCSS.jinja delete mode 100644 docs/components/ui/Popover/DemoHTML.jinja delete mode 100644 docs/components/ui/Popover/DemoResult.jinja delete mode 100644 docs/components/ui/Popover/Popover.css delete mode 100644 docs/components/ui/Tabs/DemoCSS.jinja delete mode 100644 docs/components/ui/Tabs/DemoHTML.jinja delete mode 100644 docs/components/ui/Tabs/DemoResult.jinja delete mode 100644 docs/components/ui/Tabs/ManualHTML.jinja delete mode 100644 docs/components/ui/Tabs/ManualResult.jinja delete mode 100644 docs/components/ui/Tabs/SelectHTML.jinja delete mode 100644 docs/components/ui/Tabs/SelectResult.jinja delete mode 100644 docs/components/ui/Tabs/Tabs.css delete mode 100644 docs/components/ui/Tabs/VerticalHTML.jinja delete mode 100644 docs/components/ui/Tabs/VerticalResult.jinja delete mode 100644 docs/content/api.md delete mode 100644 docs/content/guide/components.md delete mode 100644 docs/content/guide/css_and_js.md delete mode 100644 docs/content/guide/index.md delete mode 100644 docs/content/guide/integrations.md delete mode 100644 docs/content/guide/motivation.md delete mode 100644 docs/content/guide/performance.md delete mode 100644 docs/content/guide/slots.md delete mode 100644 docs/content/index.md delete mode 100644 docs/content/ui/accordion.md delete mode 100644 docs/content/ui/index.md delete mode 100644 docs/content/ui/linkedlist.md delete mode 100644 docs/content/ui/menu.md delete mode 100644 docs/content/ui/popover.md delete mode 100644 docs/content/ui/reldate.md delete mode 100644 docs/content/ui/tabs.md delete mode 100755 docs/deploy.sh delete mode 100755 docs/docs.py delete mode 100644 docs/indexer.js delete mode 100644 docs/static/docs.css delete mode 100644 docs/static/favicon.ico delete mode 100644 docs/static/fonts/karla-bold-ext.woff2 delete mode 100644 docs/static/fonts/karla-bold.woff2 delete mode 100644 docs/static/fonts/karla-regular-.woff2 delete mode 100644 docs/static/fonts/karla-regular-ext.woff2 delete mode 100644 docs/static/fonts/material-symbols-rounded.woff2 delete mode 100644 docs/static/img/anatomy-en.png delete mode 100644 docs/static/img/anatomy-en.svg delete mode 100644 docs/static/img/anatomy-es.svg delete mode 100644 docs/static/img/anchors.png delete mode 100644 docs/static/img/apple-touch-icon.png delete mode 100644 docs/static/img/composable.svg delete mode 100644 docs/static/img/encapsulated.svg delete mode 100644 docs/static/img/favicon.png delete mode 100644 docs/static/img/favicon.svg delete mode 100644 docs/static/img/jinjax-logo-w.png delete mode 100644 docs/static/img/jinjax-logo-w.svg delete mode 100644 docs/static/img/jinjax-logo.png delete mode 100644 docs/static/img/jinjax-logo.svg delete mode 100644 docs/static/img/logo.png delete mode 100644 docs/static/img/logo.svg delete mode 100644 docs/static/img/modern.svg delete mode 100644 docs/static/img/practical.svg delete mode 100644 docs/static/img/simple.svg delete mode 100644 docs/static/img/slots-_slot.png delete mode 100644 docs/static/img/slots-diagram.png delete mode 100644 docs/static/img/spaghetti_code.png delete mode 100644 docs/static/img/ui-accordion.png delete mode 100644 docs/static/img/ui-linkedlist.png delete mode 100644 docs/static/img/ui-menu.png delete mode 100644 docs/static/img/ui-popover.png delete mode 100644 docs/static/img/ui-reldate.png delete mode 100644 docs/static/img/ui-tabs.png delete mode 100644 docs/static/prose.css delete mode 100644 docs/static/theme.css delete mode 100644 docs/theme/Autodoc.jinja delete mode 100644 docs/theme/Callout.jinja delete mode 100644 docs/theme/ExampleTabs.jinja delete mode 100644 docs/theme/Footer.jinja delete mode 100644 docs/theme/Header.jinja delete mode 100644 docs/theme/Layout.jinja delete mode 100644 docs/theme/MetaTags.jinja delete mode 100644 docs/theme/NavBar.jinja delete mode 100644 docs/theme/NavGlobal.jinja delete mode 100644 docs/theme/NavLocal.jinja delete mode 100644 docs/theme/NavMobile.jinja delete mode 100644 docs/theme/NavTop.jinja delete mode 100644 docs/theme/Page.jinja delete mode 100644 docs/theme/PageSingle.jinja delete mode 100644 docs/theme/PrevNext.jinja delete mode 100644 docs/theme/SocialCard.jinja delete mode 100644 docs/theme/Source.jinja delete mode 100644 docs/theme/Source.js delete mode 100644 docs/theme/Test.jinja delete mode 100644 docs/theme/ThemeSwitch.jinja delete mode 100644 docs/theme/ThemeSwitch.js delete mode 100644 docs/theme/Toc.jinja delete mode 100644 docs/theme/TocPage.jinja delete mode 100644 docs/theme/TocPage.js delete mode 100644 jinjax-logo.png delete mode 100644 package-lock.json diff --git a/docs/components/Copyright.jinja b/docs/components/Copyright.jinja deleted file mode 100644 index 473b66b..0000000 --- a/docs/components/Copyright.jinja +++ /dev/null @@ -1,4 +0,0 @@ -
-

Website © Juan-Pablo Scaletti.

-

JinjaX and the documentation text licensed under the MIT license.

-
\ No newline at end of file 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 @@ -
-
-

JinjaX

-

- Super - components powers - for your - Jinja templates -

-
- -
-
-
-

Before: chaos!

-{% 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 -%} -
-

Hello {{ mistery or "World?" }}

-
- {% call card_macro(div="So verbose") %} - {% for product in products %} - {{ another_macro(product) }} - {% endfor %} - {% endcall %} -
-
- {% with items=products %} - {% include "snippets/pagination.html" %} - {% endwith %} -{%- endblock %} -``` -{% endraw %}{% endfilter %} -
- -
-

After: ✨ clarity ✨

-{% filter markdown %}{% raw %} -```html+jinja -{#def products, msg="World!" #} - - -
-

Hello, {{ msg }}

-
- - {% for product in products %} - - {% endfor %} - -
-
- - -``` -{% endraw %}{% endfilter %} -
-
-
- -
-

- Better than include and macros -

-
-
-
-

Encapsulated

- -
-
-
- Link to their own css and/or js files - and can be copy/pasted to other projects without modifications. -
-
-
- -
-
-

Simple

- -
-
-
- Just regular Jinja files and no need to import them. - Easier to use and easier to read. -
-
-
- - - -
-
-

Composable

- -
-
-
- Can wrap content (HTML, other components, etc.) in a natural way. -
-
-
-
-
- -
-
-

- Say goodbye to spaghetti templates -

- -
- Spaguetti code - -

Your Python code should be easy to understand and test.

-

Template code, however, often fails even basic code standards: long methods, deep conditional nesting,and mystery variables everywhere. -

-

But when it's built with components, you see where everything is, understand what are the possible statesof every piece of UI, and know exactly what data need to have. -

-

You can replace all your templates with components, or start with one section.

-
-
-
- -
-
-

Ready to get going? Engage!

- Get started → -
Millions of people clicked a button in the last week alone!
-
-
-
\ No newline at end of file diff --git a/docs/components/Logo.jinja b/docs/components/Logo.jinja deleted file mode 100644 index 3dd9ecd..0000000 --- a/docs/components/Logo.jinja +++ /dev/null @@ -1,7 +0,0 @@ -{#def base_url="/" #} - - - - - diff --git a/docs/components/NavExtra.jinja b/docs/components/NavExtra.jinja deleted file mode 100644 index e6bb984..0000000 --- a/docs/components/NavExtra.jinja +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/components/NavLinks.jinja b/docs/components/NavLinks.jinja deleted file mode 100644 index fd2e693..0000000 --- a/docs/components/NavLinks.jinja +++ /dev/null @@ -1,2 +0,0 @@ -Documentation -UI components diff --git a/docs/components/SocialCardIndex.jinja b/docs/components/SocialCardIndex.jinja deleted file mode 100644 index 54da150..0000000 --- a/docs/components/SocialCardIndex.jinja +++ /dev/null @@ -1,66 +0,0 @@ -{#def page #} - - - -
- -
- Super - components powers - for your - Jinja templates -
-
- diff --git a/docs/components/guide/slots/CompArchive.jinja b/docs/components/guide/slots/CompArchive.jinja deleted file mode 100644 index dc242fe..0000000 --- a/docs/components/guide/slots/CompArchive.jinja +++ /dev/null @@ -1,10 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja -{#def posts #} - - {% for post in posts %} - - {% endfor %} - -``` -{% endraw %}{% endfilter %} \ No newline at end of file diff --git a/docs/components/guide/slots/CompLayout.jinja b/docs/components/guide/slots/CompLayout.jinja deleted file mode 100644 index 86c482e..0000000 --- a/docs/components/guide/slots/CompLayout.jinja +++ /dev/null @@ -1,14 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja -{#def title #} - - - - - {{ title }} - - - {{ content }} - -``` -{% endraw %}{% endfilter %} \ No newline at end of file diff --git a/docs/components/guide/slots/Modal.jinja b/docs/components/guide/slots/Modal.jinja deleted file mode 100644 index c2a9f66..0000000 --- a/docs/components/guide/slots/Modal.jinja +++ /dev/null @@ -1,7 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja - - {{ content }} - -``` -{% endraw %}{% endfilter %} \ No newline at end of file diff --git a/docs/components/guide/slots/ModalBody.jinja b/docs/components/guide/slots/ModalBody.jinja deleted file mode 100644 index 66794ce..0000000 --- a/docs/components/guide/slots/ModalBody.jinja +++ /dev/null @@ -1,7 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja -
- {{ content }} -
-``` -{% endraw %}{% endfilter %} \ No newline at end of file diff --git a/docs/components/guide/slots/ModalFooter.jinja b/docs/components/guide/slots/ModalFooter.jinja deleted file mode 100644 index e4eac26..0000000 --- a/docs/components/guide/slots/ModalFooter.jinja +++ /dev/null @@ -1,7 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja -
- {{ content }} -
-``` -{% endraw %}{% endfilter %} \ No newline at end of file diff --git a/docs/components/guide/slots/ModalHeader.jinja b/docs/components/guide/slots/ModalHeader.jinja deleted file mode 100644 index 6f5bc52..0000000 --- a/docs/components/guide/slots/ModalHeader.jinja +++ /dev/null @@ -1,10 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja -
- {{ content }} - - -
-``` -{% endraw %}{% endfilter %} \ No newline at end of file diff --git a/docs/components/ui/Accordion/Accordion.css b/docs/components/ui/Accordion/Accordion.css deleted file mode 100644 index e39911b..0000000 --- a/docs/components/ui/Accordion/Accordion.css +++ /dev/null @@ -1,67 +0,0 @@ -@scope (#accordion-demo) { - :scope { - position: relative; - display: block; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 4rem 0.5rem 0; - height: 360px; - margin: 0 auto; - } - @media (min-width: 38rem) { - :scope { - width: 36rem; - } - } - - details { - margin: 0; - border-width: 1px; - border-color: rgb(212 212 212); - background-color: rgb(245 245 245); - padding: 0; - overflow: hidden; - height: 3.5rem; - transition: all 0.15s ease-in-out; - } - details[open] { - height: 10rem; - } - details:focus-within { - box-shadow: 0 1px 2px 0 #2563eb; - } - details:first-of-type { - margin-top: 0px; - border-top-left-radius: 0.375rem; - border-top-right-radius: 0.375rem; - } - details:last-of-type { - margin-bottom: 0px; - border-bottom-left-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; - } - - summary { - position: relative; - height: 3.5rem; - border-bottom-width: 1px; - border-color: transparent; - background-color: rgb(255, 255, 255); - padding: 1rem 1.25rem; - color: rgb(0, 0, 0); - cursor: default; - } - details[open] > summary { - border-color: rgb(229 229 229); - } - - .panel { - color: rgb(82 82 82); - padding: 0 1.25rem; - padding: 0.75rem 1.25rem; - } - .panel code { - font-weight: bold; - } -} \ No newline at end of file diff --git a/docs/components/ui/Accordion/DemoCSS.jinja b/docs/components/ui/Accordion/DemoCSS.jinja deleted file mode 100644 index d256041..0000000 --- a/docs/components/ui/Accordion/DemoCSS.jinja +++ /dev/null @@ -1,51 +0,0 @@ -{% filter markdown %}{% raw %} -```css -@scope (#accordion-demo) { - details { - margin: 0; - border-width: 1px; - border-color: rgb(212 212 212); - background-color: rgb(245 245 245); - padding: 0; - overflow: hidden; - height: 3.5rem; - width: 36rem; - transition: all 0.15s ease-in-out; - } - details[open] { - height: 10rem; - } - details:focus-within { - box-shadow: 0 1px 2px 0 #2563eb; - } - details:first-of-type { - margin-top: 0px; - border-top-left-radius: 0.375rem; - border-top-right-radius: 0.375rem; - } - details:last-of-type { - margin-bottom: 0px; - border-bottom-left-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; - } - summary { - position: relative; - height: 3.5rem; - border-bottom-width: 1px; - border-color: transparent; - background-color: rgb(255, 255, 255); - padding: 1rem 1.25rem; - color: rgb(0, 0, 0); - cursor: default; - } - details[open] > summary { - border-color: rgb(229 229 229); - } - .panel { - color: rgb(82 82 82); - padding: 0 1.25rem; - padding: 0.75rem 1.25rem; - } -} -``` -{% endraw %}{% endfilter %} \ No newline at end of file diff --git a/docs/components/ui/Accordion/DemoHTML.jinja b/docs/components/ui/Accordion/DemoHTML.jinja deleted file mode 100644 index 1e28d29..0000000 --- a/docs/components/ui/Accordion/DemoHTML.jinja +++ /dev/null @@ -1,29 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja - -
- Is it accessible? -
- Yes, more than any custom accordion you'll find on the web, because it's made - with native elements. -
-
- -
- Is it unstyled? -
- Yes. The Accordion doesn't need any styles, you are free to style your - <details> elements however you need. -
-
- -
- Can it be animated? -
- The <details> elements can be animated (with some restrictions) - using CSS animations, or with JS. -
-
- -``` -{% endraw %}{% endfilter %} diff --git a/docs/components/ui/Accordion/DemoResult.jinja b/docs/components/ui/Accordion/DemoResult.jinja deleted file mode 100644 index 8666e2d..0000000 --- a/docs/components/ui/Accordion/DemoResult.jinja +++ /dev/null @@ -1,32 +0,0 @@ -{#css ui/Accordion/Accordion.css #} - -
- - -
- Is it accessible? -
- Yes, more than any custom accordion you'll find on the web, because it's made - with native elements. -
-
- -
- Is it unstyled? -
- Yes. The Accordion doesn't need any styles, you are free to style your - <details> elements however you need. -
-
- -
- Can it be animated? -
- The <details> elements can be animated (with some restrictions) - using CSS animations, or with JS. -
-
- \ No newline at end of file diff --git a/docs/components/ui/Dialog/DemoCode.jinja b/docs/components/ui/Dialog/DemoCode.jinja deleted file mode 100644 index 36ecb76..0000000 --- a/docs/components/ui/Dialog/DemoCode.jinja +++ /dev/null @@ -1,6 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja -{# Style classes and some content removed for clarity #} - -``` -{% endraw %}{% endfilter %} diff --git a/docs/components/ui/Dialog/DemoPreview.jinja b/docs/components/ui/Dialog/DemoPreview.jinja deleted file mode 100644 index e69de29..0000000 diff --git a/docs/components/ui/LinkedList/DemoCSS.jinja b/docs/components/ui/LinkedList/DemoCSS.jinja deleted file mode 100644 index 0927d4e..0000000 --- a/docs/components/ui/LinkedList/DemoCSS.jinja +++ /dev/null @@ -1,83 +0,0 @@ -{% filter markdown %}{% raw %} -```css -.ui-linkedlist { - padding: 0px; - background-color: rgb(255 255 255); - overscroll-behavior: contain; - overflow-y: scroll; - list-style-type: none; - height: 16rem; - margin: 0px; - border: 1px solid rgb(128 128 128); - border-radius: 0.25rem; - font-size: 0.85rem; -} -.ui-linkedlist li { - cursor: pointer; - display: flex; - padding: 0.25rem 1rem; - align-items: center; -} -.ui-linkedlist li[disabled] { - color: rgb(156 156 156); - cursor: default; -} -.ui-linkedlist li:hover { - background-color: rgb(243 244 246); -} -.ui-linkedlist input[type="checkbox"] { - margin-right: 0.5rem; -} -label { - display: inline-block; - font-weight: bold; - background-color: white; - padding: 0.25rem 2rem; - border: 1px solid rgb(128 128 128); - border-radius: 0.25rem 0.25rem 0 0; - font-size: 0.7rem; - margin-bottom: -1px; -} - -button { - margin-top: 0.5rem; - display: inline-flex; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - align-items: center; - justify-content: center; -} -button > :not([hidden]) ~ :not([hidden]) { - margin-left: 0.25rem; -} -button { - white-space: nowrap; - border-radius: 0.25rem; - border: 1px solid transparent; - background-color: rgb(229 231 235); - padding: 0.5rem 0.75rem; - text-align: center; - font-size: 0.75rem; - line-height: 1rem; -} -button:hover { - border-color: rgb(219 234 254); - background-color: rgb(243 244 246); -} -button:focus { - background-color: rgb(229 231 235); - outline-offset: 1px; - outline-color: #3b82f6; -} -@media (min-width: 640px) { - button { - padding: 0.25rem 0.5rem; - } -} -button.select-all { - float: right; -} -``` -{% endraw %}{% endfilter %} \ No newline at end of file diff --git a/docs/components/ui/LinkedList/DemoHTML.jinja b/docs/components/ui/LinkedList/DemoHTML.jinja deleted file mode 100644 index 375ddd7..0000000 --- a/docs/components/ui/LinkedList/DemoHTML.jinja +++ /dev/null @@ -1,35 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja -
- - -
  • - Alexander Summers
    • - -
  • - Warren Worthington III
    • -     - - -
    -
    - - - - - -
    -``` -{% endraw %}{% endfilter %} \ No newline at end of file diff --git a/docs/components/ui/LinkedList/DemoResult.jinja b/docs/components/ui/LinkedList/DemoResult.jinja deleted file mode 100644 index e3d9631..0000000 --- a/docs/components/ui/LinkedList/DemoResult.jinja +++ /dev/null @@ -1,89 +0,0 @@ -{#css ui/LinkedList/LinkedList.css #} - -
    - -
    -
    - - -
  • - Alexander Summers
    • -
  • - Alison Blaire
    • -
  • - Anna Marie LeBeau
    • -
  • - Charles Francis Xavier
    • -
  • - Elizabeth Braddock
    • -
  • - Emma Grace Frost
    • -
  • - Erik Magnus Lehnsherr
    • -
  • - Henry Philip McCoy
    • -
  • - James Howlett
    • -
  • - Jean Elaine Grey
    • -
  • - John Proudstar
    • -
  • - Jubilation Lee
    • -
  • - Katherine Anne Pryde
    • -
  • - Kurt Wagner
    • -
  • - Lucas Bishop
    • -
  • - Nathan Summers
    • -
  • - Ororo Munroe
    • -
  • - Piotr Nikolaievitch Rasputin
    • -
  • - Raven Darkhölme
    • -
  • - Remy Etienne LeBeau
    • -
  • - Robert Louis Drake
    • -
  • - Roberto da Costa
    • -
  • - Scott Summers
    • -
  • - Sean Cassidy
    • -
  • - Shiro Yoshida
    • -
  • - Warren Worthington III
    • -     - - -
    -
    - - - - - -
    -
    \ No newline at end of file diff --git a/docs/components/ui/LinkedList/LinkedList.css b/docs/components/ui/LinkedList/LinkedList.css deleted file mode 100644 index fd69adc..0000000 --- a/docs/components/ui/LinkedList/LinkedList.css +++ /dev/null @@ -1,96 +0,0 @@ -@scope (#linkedlist-demo) { - :scope { - position: relative; - display: block; - display: flex; - align-items: center; - justify-content: center; - padding: 0.5rem; - height: 360px; - margin: 0 auto; - } - :scope > div { - width: 100%; - margin: 0 1rem; - } - - .ui-linkedlist { - padding: 0px; - background-color: rgb(255 255 255); - overscroll-behavior: contain; - overflow-y: scroll; - list-style-type: none; - height: 16rem; - margin: 0px; - border: 1px solid rgb(128 128 128); - border-radius: 0.25rem; - font-size: 0.85rem; - } - .ui-linkedlist li { - cursor: pointer; - display: flex; - padding: 0.25rem 1rem; - align-items: center; - } - .ui-linkedlist li[disabled] { - color: rgb(156 156 156); - cursor: default; - } - .ui-linkedlist li:hover { - background-color: rgb(243 244 246); - } - .ui-linkedlist input[type="checkbox"] { - margin-right: 0.5rem; - } - label { - display: inline-block; - font-weight: bold; - background-color: white; - padding: 0.25rem 2rem; - border: 1px solid rgb(128 128 128); - border-radius: 0.25rem 0.25rem 0 0; - font-size: 0.7rem; - margin-bottom: -1px; - } - - button { - margin-top: 0.5rem; - display: inline-flex; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - align-items: center; - justify-content: center; - } - button > :not([hidden]) ~ :not([hidden]) { - margin-left: 0.25rem; - } - button { - white-space: nowrap; - border-radius: 0.25rem; - border: 1px solid transparent; - background-color: rgb(229 231 235); - padding: 0.5rem 0.75rem; - text-align: center; - font-size: 0.75rem; - line-height: 1rem; - } - button:hover { - border-color: rgb(219 234 254); - background-color: rgb(243 244 246); - } - button:focus { - background-color: rgb(229 231 235); - outline-offset: 1px; - outline-color: #3b82f6; - } - @media (min-width: 640px) { - button { - padding: 0.25rem 0.5rem; - } - } - button.select-all { - float: right; - } -} \ No newline at end of file diff --git a/docs/components/ui/Menu/DemoCSS.jinja b/docs/components/ui/Menu/DemoCSS.jinja deleted file mode 100644 index d726800..0000000 --- a/docs/components/ui/Menu/DemoCSS.jinja +++ /dev/null @@ -1,131 +0,0 @@ -{% filter markdown %}{% raw %} -```css -@scope (#menu-demo) { - :scope { - position: relative; - display: block; - padding: 2rem 0.5rem 0; - height: 300px; - margin: 0 auto; - } - - .ui-menubutton { - border-radius: 0.25rem; - border-width: 1px; - background-color: rgb(0 0 0 / 0.1); - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 1rem; - padding-right: 1rem; - font-weight: 600; - color: white; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), - 0 4px 6px -4px rgb(0 0 0 / 0.1); - width: fit-content; - margin: 0 auto; - } - .ui-menubutton:hover { - background-color: rgb(0 0 0 / 0.2); - } - .ui-menubutton .icon { - margin-left: 0.25rem; - } - - .group:not([hidden]) ~ .group:not([hidden]) { - border-top: 1px solid #d1d5db; - } - .ui-menu { - margin-top: 4px; - padding: 8px 0; - border-radius: 8px; - width: 400px; - background-color: #ffffff; - box-shadow: 0 1px 3px 4px rgba(0, 0, 0, 0.2); - overflow: visible; - font-size: 0.9rem; - font-weight: 400; - transition: all 0.2s allow-discrete; - /* Final state of the exit animation */ - opacity: 0; - transform: translateY(-1rem); - } - .ui-menu:popover-open { - opacity: 1; - transform: translateY(0); - } - /* Needs to be after the previous .ui-menu:popover-open rule - to take effect, as the specificity is the same */ - @starting-style { - .ui-menu:popover-open { - opacity: 0; - transform: translateY(-1rem); - } - } - .ui-menu:focus { - outline: none; - } - .ui-menu .ui-menu { - position: absolute; - margin: 0 0 0 -4px; - width: 300px; - z-index: 1; - transition: opacity 0.2s allow-discrete; - } - .ui-menu * { - user-select: none; - } - - .ui-menuitem { - display: flex; - height: 40px; - padding-left: 24px; - padding-right: 24px; - align-items: center; - justify-items: flex-start; - line-height: 40px; - color: #000000; - background-color: #ffffff; - cursor: default; - user-select: none; - position: relative; - text-align: left; - } - .ui-menuitem.ui-selected { - background-color: #f2e7e4; - } - .ui-menuitem.ui-disabled { - color: #5f6368; - } - .ui-menuitem > .icon { - font-size: 1rem; - width: 24px; - text-align: left; - } - .ui-menuitem.ui-disabled > .icon { - color: #aca6a7; - } - .ui-menuitem > a { - flex-grow: 1; - } - .ui-menuitem > kbd { - visibility: hidden; - margin-left: auto; - font-size: 0.9rem; - font-family: inherit; - text-align: right; - color: #524f50; - } - .ui-menuitem:not(.ui-disabled):hover > kbd { - visibility: visible; - } - .ui-menuitem > .arrow { - margin-left: auto; - font-size: 0.7rem; - text-align: right; - } -} -``` -{% endraw %}{% endfilter %} diff --git a/docs/components/ui/Menu/DemoHTML.jinja b/docs/components/ui/Menu/DemoHTML.jinja deleted file mode 100644 index 60c126a..0000000 --- a/docs/components/ui/Menu/DemoHTML.jinja +++ /dev/null @@ -1,89 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja - - Menu keyboard_arrow_down - - - -
    - - tab - New tab - Ctrl+T - - - new_window - New window - Ctrl+N - - - fingerprint_off - Disabled item - Ctrl+Shift+N - -
    -
    - - download - Downloads - Ctrl+J - - - bookmarks - Bookmarks and lists - keyboard_arrow_right - - -
    - - bookmark_add - Bookmark this tab... - Ctrl+D - - - bookmarks - Bookmark all tabs... - Ctrl+Shift+D - -
    -
    - - toolbar - Hide bookmarks bar - Ctrl+Shift+B - - - bookmarks - Show all bookmarks - - - bookmark_manager - Bookmark manager - Ctrl+Shift+O - -
    -     -     -
    -
    - - print - Print... - Ctrl+P - - - help - Help - - - settings - Settings - - - exit_to_app - Exit - -
    -     -``` -{% endraw %}{% endfilter %} diff --git a/docs/components/ui/Menu/DemoResult.jinja b/docs/components/ui/Menu/DemoResult.jinja deleted file mode 100644 index b62226c..0000000 --- a/docs/components/ui/Menu/DemoResult.jinja +++ /dev/null @@ -1,94 +0,0 @@ -{#css ui/Menu/Menu.css #} - -
    - - diff --git a/docs/components/ui/Menu/Menu.css b/docs/components/ui/Menu/Menu.css deleted file mode 100644 index a93313d..0000000 --- a/docs/components/ui/Menu/Menu.css +++ /dev/null @@ -1,127 +0,0 @@ -@scope (#menu-demo) { - :scope { - position: relative; - display: block; - padding: 2rem 0.5rem 0; - height: 200px; - margin: 0 auto; - } - - .ui-menubutton { - border-radius: 0.25rem; - border-width: 1px; - background-color: rgb(0 0 0 / 0.1); - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 1rem; - padding-right: 1rem; - font-weight: 600; - color: white; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), - 0 4px 6px -4px rgb(0 0 0 / 0.1); - width: fit-content; - margin: 0 auto; - } - .ui-menubutton:hover { - background-color: rgb(0 0 0 / 0.2); - } - .ui-menubutton .icon { - margin-left: 0.25rem; - } - - .group:not([hidden]) ~ .group:not([hidden]) { - border-top: 1px solid #d1d5db; - } - .ui-menu { - margin-top: 4px; - padding: 8px 0; - border-radius: 8px; - width: 400px; - background-color: #ffffff; - box-shadow: 0 1px 3px 4px rgba(0, 0, 0, 0.2); - overflow: visible; - font-size: 0.9rem; - font-weight: 400; - transition: all 0.2s allow-discrete; - /* Final state of the exit animation */ - opacity: 0; - transform: translateY(-1rem); - } - .ui-menu:popover-open { - opacity: 1; - transform: translateY(0); - } - /* Needs to be after the previous .ui-menu:popover-open rule - to take effect, as the specificity is the same */ - @starting-style { - .ui-menu:popover-open { - opacity: 0; - transform: translateY(-1rem); - } - } - .ui-menu:focus { - outline: none; - } - .ui-menu .ui-menu { - position: absolute; - margin: 0 0 0 -4px; - width: 300px; - z-index: 1; - transition: opacity 0.2s allow-discrete; - } - .ui-menu * { - user-select: none; - } - - .ui-menuitem { - display: flex; - height: 40px; - padding-left: 24px; - padding-right: 24px; - align-items: center; - justify-items: flex-start; - line-height: 40px; - color: #000000; - background-color: #ffffff; - cursor: default; - user-select: none; - position: relative; - text-align: left; - } - .ui-menuitem.ui-selected { - background-color: #f2e7e4; - } - .ui-menuitem.ui-disabled { - color: #5f6368; - } - .ui-menuitem > .icon { - font-size: 1rem; - width: 24px; - text-align: left; - } - .ui-menuitem.ui-disabled > .icon { - color: #aca6a7; - } - .ui-menuitem > a { - flex-grow: 1; - } - .ui-menuitem > kbd { - visibility: hidden; - margin-left: auto; - font-size: 0.9rem; - font-family: inherit; - text-align: right; - color: #524f50; - } - .ui-menuitem:not(.ui-disabled):hover > kbd { - visibility: visible; - } - .ui-menuitem > .arrow { - margin-left: auto; - font-size: 0.7rem; - text-align: right; - } -} \ No newline at end of file diff --git a/docs/components/ui/Popover/DemoCSS.jinja b/docs/components/ui/Popover/DemoCSS.jinja deleted file mode 100644 index 83418c9..0000000 --- a/docs/components/ui/Popover/DemoCSS.jinja +++ /dev/null @@ -1,96 +0,0 @@ -{% filter markdown %}{% raw %} -```css -.ui-popbutton { - border-radius: 0.25rem; - border-width: 1px; - background-color: rgb(0 0 0 / 0.1); - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 1rem; - padding-right: 1rem; - font-weight: 600; - color: white; - box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), - 0 4px 6px -4px rgb(0 0 0 / 0.1); -} -.ui-popbutton:hover { - background-color: rgb(0 0 0 / 0.2); -} - -[popover] { - background-color: Canvas; - border-radius: 0.25rem; - border: 1px solid #666; - color: CanvasText; - height: fit-content; - margin: 0.75rem auto 0; - padding: 1rem; - width: 15rem; - overflow: visible; - transition: all 0.2s allow-discrete; - /* Final state of the exit animation */ - opacity: 0; - transform: translateY(-3rem); -} -[popover]:popover-open { - opacity: 1; - transform: translateY(0); -} -/* Needs to be after the previous [popover]:popover-open rule -to take effect, as the specificity is the same */ -@starting-style { - [popover]:popover-open { - opacity: 0; - transform: translateY(-3rem); - } -} - -/* Transition for the popover's backdrop */ -[popover]::backdrop { - transition: all 0.2s allow-discrete; - /* Final state of the exit animation */ - background-color: rgb(0 0 0 / 0%); -} -[popover]:popover-open::backdrop { - background-color: rgb(0 0 0 / 15%); -} -/* The nesting selector (&) cannot represent pseudo-elements -so this starting-style rule cannot be nested */ -@starting-style { - [popover]:popover-open::backdrop { - background-color: rgb(0 0 0 / 0%); - } -} - -[popover] h1 { - font-weight: bold; - margin-bottom: 0.75rem; -} -[popover] label { - display: flex; - align-items: center; - justify-content: space-between; - font-size: 0.75rem; - line-height: 1rem; -} -[popover] input { - margin-left: auto; - width: 66.666667%; - border-radius: 0.25rem; - border-width: 1px; - padding: 0.25rem; - font-size: 0.75rem; - line-height: 1rem; -} -[popover] svg.arrow { - position: absolute; - top: -4px; - left: 50%; - z-index: 10; - display: block; - transform: rotate(180deg); - border-color: rgb(255 255 255); - fill: white; -} -``` -{% endraw %}{% endfilter %} diff --git a/docs/components/ui/Popover/DemoHTML.jinja b/docs/components/ui/Popover/DemoHTML.jinja deleted file mode 100644 index b40ddfb..0000000 --- a/docs/components/ui/Popover/DemoHTML.jinja +++ /dev/null @@ -1,23 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja -Open popover - - -

    Edit Dimensions

    -
    - - -
    - - -     -``` -{% endraw %}{% endfilter %} diff --git a/docs/components/ui/Popover/DemoResult.jinja b/docs/components/ui/Popover/DemoResult.jinja deleted file mode 100644 index a0b73e8..0000000 --- a/docs/components/ui/Popover/DemoResult.jinja +++ /dev/null @@ -1,27 +0,0 @@ -{#css ui/Popover/Popover.css #} - -
    - -
    - Open popover - - -

    Edit Dimensions

    -
    - - -
    - -     -
    diff --git a/docs/components/ui/Popover/Popover.css b/docs/components/ui/Popover/Popover.css deleted file mode 100644 index 724547f..0000000 --- a/docs/components/ui/Popover/Popover.css +++ /dev/null @@ -1,101 +0,0 @@ -@scope (#pop-demo) { - :scope { - position: relative; - display: block; - padding: 2rem 0.5rem 0; - height: 300px; - margin: 0 auto; - text-align: center; - } - - .ui-popbutton { - border-radius: 0.25rem; - border-width: 1px; - background-color: rgb(0 0 0 / 0.1); - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 1rem; - padding-right: 1rem; - font-weight: 600; - color: white; - box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), - 0 4px 6px -4px rgb(0 0 0 / 0.1); - } - .ui-popbutton:hover { - background-color: rgb(0 0 0 / 0.2); - } - - [popover] { - background-color: Canvas; - border-radius: 0.25rem; - border: 1px solid #666; - color: CanvasText; - height: fit-content; - margin: 0.75rem auto 0; - padding: 1rem; - width: 15rem; - overflow: visible; - transition: all 0.2s allow-discrete; - /* Final state of the exit animation */ - opacity: 0; - transform: translateY(-3rem); - } - [popover]:popover-open { - opacity: 1; - transform: translateY(0); - } - /* Needs to be after the previous [popover]:popover-open rule - to take effect, as the specificity is the same */ - @starting-style { - [popover]:popover-open { - opacity: 0; - transform: translateY(-3rem); - } - } - - /* Transition for the popover's backdrop */ - [popover]::backdrop { - /* Final state of the exit animation */ - background-color: rgb(0 0 0 / 0%); - transition: all 0.2s allow-discrete; - } - [popover]:popover-open::backdrop { - background-color: rgb(0 0 0 / 15%); - } - @starting-style { - [popover]:popover-open::backdrop { - background-color: rgb(0 0 0 / 0%); - } - } - - [popover] h1 { - font-weight: bold; - margin-bottom: 0.75rem; - } - [popover] label { - display: flex; - align-items: center; - justify-content: space-between; - font-size: 0.75rem; - line-height: 1rem; - } - [popover] input { - margin-left: auto; - width: 66.666667%; - border-radius: 0.25rem; - border-width: 1px; - padding: 0.25rem; - font-size: 0.75rem; - line-height: 1rem; - } - [popover] svg.arrow { - position: absolute; - top: -4px; - left: 50%; - z-index: 10; - display: block; - transform: rotate(180deg); - border-color: rgb(255 255 255); - fill: white; - } -} \ No newline at end of file diff --git a/docs/components/ui/Tabs/DemoCSS.jinja b/docs/components/ui/Tabs/DemoCSS.jinja deleted file mode 100644 index 07db8f0..0000000 --- a/docs/components/ui/Tabs/DemoCSS.jinja +++ /dev/null @@ -1,59 +0,0 @@ -{% filter markdown %}{% raw %} -```css -.ui-tablist { - display: flex; -} -.ui-tablist > :not([hidden]) ~ :not([hidden]) { - margin-left: 0.25rem ; -} -.ui-tablist { - border-radius: 1rem; - background-color: rgb(30 58 138 / 0.6); - padding: 0.5rem; - color: #111; -} -.ui-tablist > .ui-tab:not([hidden]) ~ .ui-tab:not([hidden]) { - margin-left: 0.5rem; -} -.ui-tab { - width: 100%; - border-radius: 0.5rem; - color: #222; - background-color: rgb(255 255 255 / 0.7); - padding: 0.75rem 0.25rem; - font-size: 0.875rem; - font-weight: 500; - line-height: 1.25rem; -} -.ui-tab:focus { - outline: 2px solid rgb(59 130 246 / 0.8); - outline-offset: 2px; -} -.ui-tab.ui-selected { - background-color: white; - color: black; -} -.ui-tab:hover:not(.ui-selected, .ui-disabled), -.ui-tab:focus:not(.ui-selected, .ui-disabled) { - background-color: rgb(255 255 255 / 0.8); -} -.ui-tabpanel { - margin-top: 0.5rem; - border-radius: 0.75rem; - background-color: rgb(254 254 254); - border: 2px solid rgb(59 130 246 / 0.8); - padding: 0.1rem; - min-height: 8rem; - display: flex; - align-items: center; - justify-content: center; -} -.ui-tabpanel:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} -.ui-tabpanel.ui-hidden { - display: none; -} -``` -{% endraw %}{% endfilter %} \ No newline at end of file diff --git a/docs/components/ui/Tabs/DemoHTML.jinja b/docs/components/ui/Tabs/DemoHTML.jinja deleted file mode 100644 index e267335..0000000 --- a/docs/components/ui/Tabs/DemoHTML.jinja +++ /dev/null @@ -1,23 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja - - - Recent - Popular - Trending - - - -

    This is the tab panel for "Recent".

    -     - - - - -     -``` -{% endraw %}{% endfilter %} diff --git a/docs/components/ui/Tabs/DemoResult.jinja b/docs/components/ui/Tabs/DemoResult.jinja deleted file mode 100644 index 3306eac..0000000 --- a/docs/components/ui/Tabs/DemoResult.jinja +++ /dev/null @@ -1,28 +0,0 @@ -{#css ui/Tabs/Tabs.css #} - -
    - -
    - - - Recent - Popular - Trending - - - -

    This is the tab panel for "Recent".

    -     - - - - -     -
    diff --git a/docs/components/ui/Tabs/ManualHTML.jinja b/docs/components/ui/Tabs/ManualHTML.jinja deleted file mode 100644 index 1a39f35..0000000 --- a/docs/components/ui/Tabs/ManualHTML.jinja +++ /dev/null @@ -1,28 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja - - - Recent - Popular - Disabled - Trending - - - -

    This is the tab panel for "Recent".

    -     - - - - - - -     -``` -{% endraw %}{% endfilter %} diff --git a/docs/components/ui/Tabs/ManualResult.jinja b/docs/components/ui/Tabs/ManualResult.jinja deleted file mode 100644 index 2a067bd..0000000 --- a/docs/components/ui/Tabs/ManualResult.jinja +++ /dev/null @@ -1,33 +0,0 @@ -{#css ui/Tabs/Tabs.css #} - -
    - -
    - - - Recent - Popular - Disabled - Trending - - - -

    This is the tab panel for "Recent".

    -     - - - - - - -     -
    diff --git a/docs/components/ui/Tabs/SelectHTML.jinja b/docs/components/ui/Tabs/SelectHTML.jinja deleted file mode 100644 index 7651bb8..0000000 --- a/docs/components/ui/Tabs/SelectHTML.jinja +++ /dev/null @@ -1,35 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja - - - Recent - Popular - Disabled - Trending - - - - Recent - Popular - Disabled - Trending - - - -

    This is the tab panel for "Recent".

    -     - - - - - - -     -``` -{% endraw %}{% endfilter %} diff --git a/docs/components/ui/Tabs/SelectResult.jinja b/docs/components/ui/Tabs/SelectResult.jinja deleted file mode 100644 index ffdf0ea..0000000 --- a/docs/components/ui/Tabs/SelectResult.jinja +++ /dev/null @@ -1,40 +0,0 @@ -{#css ui/Tabs/Tabs.css #} - -
    - -
    - - - Recent - Popular - Disabled - Trending - - - - Recent - Popular - Disabled - Trending - - - -

    This is the tab panel for "Recent".

    -     - - - - - - -     -
    diff --git a/docs/components/ui/Tabs/Tabs.css b/docs/components/ui/Tabs/Tabs.css deleted file mode 100644 index ddbef0e..0000000 --- a/docs/components/ui/Tabs/Tabs.css +++ /dev/null @@ -1,126 +0,0 @@ -@scope(.horizontal-tabs,.vertical-tabs) { - :scope { - width: 100%; - max-width: 36rem; - margin: 10% auto; - padding: 0.5rem; - } - - .ui-tablist { - display: flex; - border-radius: 1rem; - background-color: #6383dd; - padding: 0.5rem; - color: #111; - } - .ui-tablist > .ui-tab:not([hidden]) ~ .ui-tab:not([hidden]) { - margin-left: 0.5rem; - } - .ui-tab { - width: 100%; - border-radius: 0.5rem; - color: #222; - background-color: rgb(255 255 255 / 0.7); - padding: 0.75rem 0.25rem; - font-size: 0.875rem; - font-weight: 500; - line-height: 1.25rem; - } - .ui-tab:focus { - outline: 2px solid rgb(255 255 255 / 0.8); - outline-offset: 2px; - } - .ui-tab.ui-selected { - background-color: white; - color: black; - } - .ui-tab.ui-disabled { - background-color: rgb(255 255 255 / 0.5); - color: #666; - cursor: default; - } - .ui-tab:hover:not(.ui-selected, .ui-disabled), - .ui-tab:focus:not(.ui-selected, .ui-disabled) { - background-color: rgb(255 255 255 / 0.8); - } - .ui-tabpanel { - margin-top: 0.5rem; - border-radius: 1rem; - background-color: rgb(254 254 254); - border: 2px solid rgb(59 130 246 / 0.8); - padding: 0.1rem; - min-height: 8rem; - display: flex; - align-items: center; - justify-content: center; - } - .ui-tabpanel:focus { - outline: 2px solid transparent; - outline-offset: 2px; - } - .ui-tabpanel.ui-hidden { - display: none; - } - .ui-tabpanel b { - font-weight: bold; - } - - .ui-tabselect { - display: block; - width: 100%; - border-radius: 0.5rem; - border-width: 1px; - border-color: rgb(209 213 219); - background-color: rgb(249 250 251); - padding: 0.5rem; - font-size: 1rem; - line-height: 1.25rem; - color: rgb(17 24 39); - margin-bottom: 0.5rem; - } - .ui-tabselect:focus { - border-color: rgb(59 130 246); - } - .ui-tabselect:is(.dark *) { - border-color: rgb(75 85 99); - background-color: rgb(55 65 81); - color: rgb(255 255 255); - } - .ui-tabselect:is(.dark *)::-moz-placeholder { - color: rgb(156 163 175); - } - .ui-tabselect:is(.dark *):-ms-input-placeholder { - color: rgb(156 163 175); - } - .ui-tabselect:is(.dark *)::placeholder { - color: rgb(156 163 175); - } - .ui-tabselect:is(.dark *):focus { - border-color: rgb(59 130 246); - } -} - -@scope(.vertical-tabs) { - .ui-tabgroup { - display: flex; - } - .ui-tablist { - flex-direction: column; - width: 10rem; - border-radius: 1rem 0 0 1rem; - padding-right: 0; - } - .ui-tablist > .ui-tab:not([hidden]) ~ .ui-tab:not([hidden]) { - margin: 0.5rem 0 0 0; - } - .ui-tab { - border-radius: 0.5rem 0 0 0.5rem; - padding: 1rem; - } - .ui-tabpanel { - margin: 0; - border-radius: 0 1rem 1rem 0; - padding: 2rem; - min-width: 24rem; - } -} \ No newline at end of file diff --git a/docs/components/ui/Tabs/VerticalHTML.jinja b/docs/components/ui/Tabs/VerticalHTML.jinja deleted file mode 100644 index 1dd7123..0000000 --- a/docs/components/ui/Tabs/VerticalHTML.jinja +++ /dev/null @@ -1,28 +0,0 @@ -{% filter markdown %}{% raw %} -```html+jinja - - - Recent - Popular - Disabled - Trending - - - -

    This is the tab panel for "Recent".

    -     - - - - - - -     -``` -{% endraw %}{% endfilter %} diff --git a/docs/components/ui/Tabs/VerticalResult.jinja b/docs/components/ui/Tabs/VerticalResult.jinja deleted file mode 100644 index b83204a..0000000 --- a/docs/components/ui/Tabs/VerticalResult.jinja +++ /dev/null @@ -1,33 +0,0 @@ -{#css ui/Tabs/Tabs.css #} - -
    - -
    - - - Recent - Popular - Disabled - Trending - - - -

    This is the tab panel for "Recent".

    -     - - - - - - -     -
    diff --git a/docs/content/api.md b/docs/content/api.md deleted file mode 100644 index b2eaf50..0000000 --- a/docs/content/api.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: "API reference" ---- - -
    -
    - - - ----- - - - - - ----- - -## Exceptions - - - - - - - - - diff --git a/docs/content/guide/components.md b/docs/content/guide/components.md deleted file mode 100644 index ac8a77f..0000000 --- a/docs/content/guide/components.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -title: Components -description: Declaring and using components. ---- - -
    -
    - -## Declaring and Using Components - -The components are simple text files that look like regular Jinja templates, with three requirements: - -**First**, components must be placed inside a folder registered in the catalog or a subfolder of it. - -```python -catalog.add_folder("myapp/components") -``` - -You can call that folder whatever you want, not just "components". You can also add more than one folder: - -```python -catalog.add_folder("myapp/layouts") -catalog.add_folder("myapp/components") -``` - -If you end up having more than one component with the same name, the one in the first folder will take priority. - -**Second**, they must have a ".jinja" extension. This also helps code editors automatically select the correct language syntax to highlight. However, you can configure it in the catalog. - -**Third**, the component name must start with an uppercase letter. Why? This is how JinjaX differentiates a component from a regular HTML tag when using it. I recommend using PascalCase names, like Python classes. - -The name of the file (minus the extension) is also how you call the component. For example, if the file is "components/PersonForm.jinja": - -``` -└ myapp/ - ├── app.py - ├── components/ - └─ PersonForm.jinja -``` - -The name of the component is "PersonForm" and can be called like this: - -From Python code or a non-component template: - -- `catalog.render("PersonForm")` - -From another component: - -- ` some content `, or -- `` - -If the component is in a subfolder, the name of that folder becomes part of its name too: - -``` -└ myapp/ - ├── app.py - ├── components/ - └─ person - └─ PersonForm.jinja -``` - -A "components/person/PersonForm.jinja" component is named "person.PersonForm", meaning the name of the subfolder and the name of the file separated by a dot. This is the full name you use to call it: - -From Python code or a non-component template: - -- `catalog.render("person.PersonForm")` - -From another component: - -- ` some content `, or -- `` - -Notice how the folder name doesn't need to start with an uppercase if you don't want it to. - - - - - -## Taking Arguments - -More often than not, a component takes one or more arguments to render. Every argument must be declared at the beginning of the component with `{#def arg1, arg2, ... #}`. - -```html+jinja -{#def action, method="post", multipart=False #} - -
    - {{ content }} -
    -``` - -In this example, the component takes three arguments: "action", "method", and "multipart". The last two have default values, so they are optional, but the first one doesn't. That means it must be passed a value when rendering the component. - -The syntax is exactly like how you declare the arguments of a Python function (in fact, it's parsed by the same code), so it can even include type comments, although they are not used by JinjaX (yet!). - -```python -{#def - data: dict[str, str], - method: str = "post", - multipart: bool = False -#} -... -``` - -## Passing Arguments - -There are two types of arguments: strings and expressions. - -### String - -Strings are passed like regular HTML attributes: - -```html+jinja -
    ...
    - - - - ... -``` - -### Expressions - -There are two different but equivalent ways to pass non-string arguments: - -"Jinja-like", where you use double curly braces instead of quotes: - -```html+jinja title="Jinja-like" - -``` - -... and "Vue-like", where you keep using quotes, but prefix the name of the attribute with a colon: - -```html+jinja title="Vue-like" - -``` - - - For `True` values, you can just use the name, like in HTML: -
    - ```html+jinja -     - - - You can also use dashes when passing an argument, but they will be translated to underscores: -
    - ```html+jinja - - ``` -
    - ```html+jinja title="Example.jinja" - {#def aria_label = "" #} - ... - ``` -     - -## With Content - -There is always an extra implicit argument: **the content** inside the component. Read more about it in the [next](/guide/slots) section. - -## Extra Arguments - -If you pass arguments not declared in a component, those are not discarded but rather collected in an `attrs` object. - -You then call `attrs.render()` to render the received arguments as HTML attributes. - -For example, this component: - -```html+jinja title="Card.jinja" -{#def title #} -
    -

    {{ title }}

    - {{ content }} -
    -``` - -Called as: - -```html -bla -``` - -Will be rendered as: - -```html -
    -

    Products

    - bla -
    -``` - -You can add or remove arguments before rendering them using the other methods of the `attrs` object. For example: - -```html+jinja -{#def title #} -{% do attrs.set(id="mycard") -%} - -
    -

    {{ title }}

    - {{ content }} -
    -``` - -Or directly in the `attrs.render()` call: - -```html+jinja -{#def title #} - -
    -

    {{ title }}

    - {{ content }} -
    -``` - - -The string values passed into components as attrs are not cast to `str` until the string representation is **actually** needed, for example when `attrs.render()` is invoked. - - -### `attrs` Methods - -#### `.render(name=value, ...)` - -Renders the attributes and properties as a string. - -Any arguments you use with this function are merged with the existing -attibutes/properties by the same rules as the `HTMLAttrs.set()` function: - -- Pass a name and a value to set an attribute (e.g. `type="text"`) -- Use `True` as a value to set a property (e.g. `disabled`) -- Use `False` to remove an attribute or property -- The existing attribute/property is overwritten **except** if it is `class`. - The new classes are appended to the old ones instead of replacing them. -- The underscores in the names will be translated automatically to dashes, - so `aria_selected` becomes the attribute `aria-selected`. - -To provide consistent output, the attributes and properties -are sorted by name and rendered like this: -` + `. - -```html+jinja - -``` -```html+jinja -
    - - -
    - -``` - - -Using `` to pass the extra arguments to other components **WILL NOT WORK**. That is because the components are translated to macros before the page render. - -You must pass them as the special argument `_attrs`. - -```html+jinja -{#--- WRONG 😵 ---#} - - -{#--- GOOD 👍 ---#} - - -``` - - -#### `.set(name=value, ...)` - -Sets an attribute or property - -- Pass a name and a value to set an attribute (e.g. `type="text"`) -- Use `True` as a value to set a property (e.g. `disabled`) -- Use `False` to remove an attribute or property -- If the attribute is "class", the new classes are appended to - the old ones (if not repeated) instead of replacing them. -- The underscores in the names will be translated automatically to dashes, - so `aria_selected` becomes the attribute `aria-selected`. - -```html+jinja title="Adding attributes/properties" -{% do attrs.set( - id="loremipsum", - disabled=True, - data_test="foobar", - class="m-2 p-4", -) %} -``` - -```html+jinja title="Removing attributes/properties" -{% do attrs.set( - title=False, - disabled=False, - data_test=False, - class=False, -) %} -``` - -#### `.setdefault(name=value, ...)` - -Adds an attribute, but only if it's not already present. - -The underscores in the names will be translated automatically to dashes, so `aria_selected` -becomes the attribute `aria-selected`. - -```html+jinja -{% do attrs.setdefault( - aria_label="Products" -) %} -``` - -#### `.add_class(name1, name2, ...)` - -Adds one or more classes to the list of classes, if not already present. - -```html+jinja -{% do attrs.add_class("hidden") %} -{% do attrs.add_class("active", "animated") %} -``` - -#### `.remove_class(name1, name2, ...)` - -Removes one or more classes from the list of classes. - -```html+jinja -{% do attrs.remove_class("hidden") %} -{% do attrs.remove_class("active", "animated") %} -``` - -#### `.get(name, default=None)` - -Returns the value of the attribute or property, -or the default value if it doesn't exist. - -```html+jinja -{%- set role = attrs.get("role", "tab") %} -``` - -... \ No newline at end of file diff --git a/docs/content/guide/css_and_js.md b/docs/content/guide/css_and_js.md deleted file mode 100644 index 8e296e2..0000000 --- a/docs/content/guide/css_and_js.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Adding CSS and JS -description: Your components might need custom styles or custom JavaScript for many reasons. ---- - -
    -Your components might need custom styles or custom JavaScript for many reasons. -
    -Instead of using global stylesheet or script files, writing assets for each individual component has several advantages: - -- **Portability**: You can copy a component from one project to another, knowing it will keep working as expected. -- **Performance**: Only load the CSS and JS that you need on each page. Additionally, the browser will have already cached the assets of the components for other pages that use them. -- **Simple testing**: You can test the JS of a component independently from others. - -## Auto-loading assets - -JinjaX searches for `.css` and `.js` files with the same name as your component in the same folder and automatically adds them to the list of assets included on the page. For example, if your component is `components/common/Form.jinja`, both `components/common/Form.css` and `components/common/Form.js` will be added to the list, but only if those files exist. - -## Manually declaring assets - -In addition to auto-loading assets, the CSS and/or JS of a component can be declared in the metadata header with `{#css ... #}` and `{#js ... #}`. - -```html -{#css lorem.css, ipsum.css #} -{#js foo.js, bar.js #} -``` - -- The file paths must be relative to the root of your components catalog (e.g., `components/form.js`) or absolute (e.g., `http://example.com/styles.css`). -- Multiple assets must be separated by commas. -- Only **one** `{#css ... #}` and **one** `{#js ... #}` tag is allowed per component at most, but both are optional. - -### Global assets - -The best practice is to store both CSS and JS files of the component within the same folder. Doing this has several advantages, including easier component reuse in other projects, improved code readability, and simplified debugging. - -However, there are instances when you may need to rely on global CSS or JS files, such as third-party libraries. In such cases, you can specify these dependencies in the component's metadata using URLs that start with either "/", "http://," or "https://." - -When you do this, JinjaX will render them as is, instead of prepending them with the component's prefix like it normally does. - -For example, this code: - -```html+jinja -{#css foo.css, bar.css, /static/bootstrap.min.css #} -{#js http://example.com/cdn/moment.js, bar.js #} - -{{ catalog.render_assets() }} -``` - -will be rendered as this HTML output: - -```html - - - - - -``` - -## Including assets in your pages - -The catalog will collect all CSS and JS file paths from the components used on a "page" render on the `catalog.collected_css` and `catalog.collected_js` lists. - -For example, after rendering this component: - -```html+jinja title="components/MyPage.jinja" -{#css mypage.css #} -{#js mypage.js #} - - - - -

    Lizard

    -

    The Iguana is a type of lizard

    -     - - - -     -     -``` - -Assuming the `Card` and `Button` components declare CSS assets, this will be the state of the `collected_css` list: - -```py -catalog.collected_css -['mypage.css', 'card.css', 'button.css'] -``` - -You can add the `` and ` - - -``` - -## Middleware - -The tags above will not work if your application can't return the content of those files. Currently, it can't. - -For that reason, JinjaX includes WSGI middleware that will process those URLs if you add it to your application. - -```py -from flask import Flask -from jinjax import Catalog - -app = Flask(__name__) - -# Here we add the Flask Jinja globals, filters, etc., like `url_for()` -catalog = jinjax.Catalog(jinja_env=app.jinja_env) - -catalog.add_folder("myapp/components") - -app.wsgi_app = catalog.get_middleware( - app.wsgi_app, - autorefresh=app.debug, -) -``` - -The middleware uses the battle-tested [Whitenoise library](http://whitenoise.evans.io/) and will only respond to the *.css* and *.js* files inside the component(s) folder(s). You can configure it to also return files with other extensions. For example: - -```python -catalog.get_middleware(app, allowed_ext=[".css", .js", .svg", ".png"]) -``` - -Be aware that if you use this option, `get_middleware()` must be called **after** all folders are added. - -## Good practices - -### CSS Scoping - -The styles of your components will not be auto-scoped. This means the styles of a component can affect other components and likewise, it will be affected by global styles or the styles of other components. - -To protect yourself against that, *always* add a custom class to the root element(s) of your component and use it to scope the rest of the component styles. - -You can even use this syntax now supported by [all modern web browsers](https://caniuse.com/css-nesting): - -```sass -.Parent { - .foo { ... } - .bar { ... } -} -``` - -The code above will be interpreted as - -```css -.Parent .foo { ... } -.Parent .bar { ... } -``` - -Example: - -```html+jinja title="components/Card.jinja" -{#css card.css #} - -
    -

    My Card

    - ... -
    -``` - -```sass title="components/card.css" -/* 🚫 DO NOT do this */ -h1 { font-size: 2em; } -h2 { font-size: 1.5em; } -a { color: blue; } - -/* 👍 DO THIS instead */ -.Card { - & h1 { font-size: 2em; } - & h2 { font-size: 1.5em; } - & a { color: blue; } -} - -/* 👍 Or this */ -.Card h1 { font-size: 2em; } -.Card h2 { font-size: 1.5em; } -.Card a { color: blue; } -``` - - -Always use a class **instead of** an `id`, or the component will not be usable more than once per page. - - -### JS events - -Your components might be inserted in the page on-the-fly, after the JavaScript files have been loaded and executed. So, attaching events to the elements on the page on load will not be enough: - -```js title="components/card.js" -// This will fail for any Card component inserted after page load -document.querySelectorAll('.Card button.share') - .forEach((node) => { - node.addEventListener("click", handleClick) - }) - -/* ... etc ... */ -``` - -A solution can be using event delegation: - -```js title="components/card.js" -// This will work for any Card component inserted after page load -document.addEventListener("click", (event) => { - if (event.target.matches(".Card button.share")) { - handleClick(event) - } -}) -``` diff --git a/docs/content/guide/index.md b/docs/content/guide/index.md deleted file mode 100644 index 0c092ea..0000000 --- a/docs/content/guide/index.md +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: Introduction ---- - -
    -JinjaX is a Python library for creating reusable "components": encapsulated template snippets that can take arguments and render to HTML. They are similar to React or Vue components, but they render on the server side, not in the browser. -
    - -Unlike Jinja's `{% include "..." %}` or macros, JinjaX components integrate naturally with the rest of your template code. - -```html+jinja -
    - -

    Products

    - {% for product in products %} - - {% endfor %} -     -
    -``` - -## Features - -### Simple - -JinjaX components are simple Jinja templates. You use them as if they were HTML tags without having to import them: easy to use and easy to read. - -### Encapsulated - -They are independent of each other and can link to their own CSS and JS, so you can freely copy and paste components between applications. - -### Testable - -All components can be unit tested independently of the pages where they are used. - -### Composable - -A JinjaX component can wrap HTML code or other components with a natural syntax, as if they were another tag. - -### Modern - -They are a great complement to technologies like [TailwindCSS](https://tailwindcss.com/), [htmx](https://htmx.org/), or [Hotwire](https://hotwired.dev/). - -## Usage - -#### Install - -Install the library using `pip`. - -```bash -pip install jinjax -``` - -#### Components folder - -Then, create a folder that will contain your components, for example: - -``` -└ myapp/ - ├── app.py - ├── components/ 🆕 - │ └── Card.jinja 🆕 - ├── static/ - ├── templates/ - └── views/ -└─ requirements.txt -``` - -#### Catalog - -Finally, you must create a "catalog" of components in your app. This is the object that manages the components and their global settings. You then add the path of the folder with your components to the catalog: - -```python -from jinjax import Catalog - -catalog = Catalog() -catalog.add_folder("myapp/components") -``` - -#### Render - -You will use the catalog to render components from your views. - -```python -def myview(): - ... - return catalog.render( - "Page", - title="Lorem ipsum", - message="Hello", - ) -``` - -In this example, it is a component for the whole page, but you can also render smaller components, even from inside a regular Jinja template if you add the catalog as a global: - -```python -app.jinja_env.globals["catalog"] = catalog -``` - -```html+jinja -{% block content %} -
    - {{ catalog.irender("LikeButton", title="Like and subscribe!", post=post) }} -
    -

    Lorem ipsum

    -{{ catalog.irender("CommentForm", post=post) }} -{% endblock %} -``` - -## How It Works - -JinjaX uses Jinja to render the component templates. In fact, it currently works as a pre-processor, replacing all: - -```html -content -``` - -with function calls like: - -```html+jinja -{% call catalog.irender("Component", attr="value") %}content{% endcall %} -``` - -These calls are evaluated at render time. Each call loads the source of the component file, parses it to extract the names of CSS/JS files, required and/or optional attributes, pre-processes the template (replacing components with function calls, as before), and finally renders the new template. - -### Reusing Jinja's Globals, Filters, and Tests - -You can add your own global variables and functions, filters, tests, and Jinja extensions when creating the catalog: - -```python -from jinjax import Catalog - -catalog = Catalog( - globals={ ... }, - filters={ ... }, - tests={ ... }, - extensions=[ ... ], -) -``` - -or afterward. - -```python -catalog.jinja_env.globals.update({ ... }) -catalog.jinja_env.filters.update({ ... }) -catalog.jinja_env.tests.update({ ... }) -catalog.jinja_env.extensions.extend([ ... ]) -``` - -The ["do" extension](https://jinja.palletsprojects.com/en/3.0.x/extensions/#expression-statement) is enabled by default, so you can write things like: - -```html+jinja -{% do attrs.set(class="btn", disabled=True) %} -``` - -### Reusing an Existing Jinja Environment - -You can also reuse an existing Jinja Environment, for example: - -#### Flask: - -```python -app = Flask(__name__) - -# Here we add the Flask Jinja globals, filters, etc., like `url_for()` -catalog = jinjax.Catalog(jinja_env=app.jinja_env) -``` - -#### Django: - -First, configure Jinja in `settings.py` and [jinja_env.py](https://docs.djangoproject.com/en/5.0/topics/templates/#django.template.backends.jinja2.Jinja2). - -To have a separate "components" folder for shared components and also have "components" subfolders at each Django app level: - -```python -import jinjax -from jinja2.loaders import FileSystemLoader - -def environment(loader: FileSystemLoader, **options): - env = Environment(loader=loader, **options) - - ... - - env.add_extension(jinjax.JinjaX) - catalog = jinjax.Catalog(jinja_env=env) - - catalog.add_folder("components") - for dir in loader.searchpath: - catalog.add_folder(os.path.join(dir, "components")) - - return env -``` - -#### FastAPI: - -TBD \ No newline at end of file diff --git a/docs/content/guide/integrations.md b/docs/content/guide/integrations.md deleted file mode 100644 index 0884d22..0000000 --- a/docs/content/guide/integrations.md +++ /dev/null @@ -1,3 +0,0 @@ ---- -title: Integrations ---- \ No newline at end of file diff --git a/docs/content/guide/motivation.md b/docs/content/guide/motivation.md deleted file mode 100644 index 90602b5..0000000 --- a/docs/content/guide/motivation.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Motivation ---- -
    -An overview of what Jinja is about, and a glimpse into my disjointed decision-making process that got me here. -
    - -## Components are cool - -Despite the complexity of a single-page application, some programmers claim React or Vue offer a better development experience than traditional server-side rendered templates. I believe this is mostly because of the greatest improvement React introduced to web development: components. - - -Components, *as a way to organize template code*. Reactivity is cool too, but unrelated to the main issue. - - -When writing Python, we aim for the code to be easy to understand and test. However, we often forget all of that when writing templates that don't even meet basic standards: long methods, deep conditional nesting, and mysterious variables everywhere. - -Components are way cooler than the HTML soup tag of server-side rendered templates. They make it very clear what arguments they take and how they can render. More than anything, components are modular: markup, logic, and relevant styles all in one package. You can copy and paste them between projects, and you can share them with other people. - -This means a community has formed around sharing these components. Now you can easily find hundreds of ready-to-use components—some of them very polished—for every common UI widget, even the "complex" ones, like color-pickers. The big problem is that you can only use them with React (and Vue components with Vue, etc.) and in a single-page application. - -Jinja is about bringing that innovation back to server-side-rendered applications. - -## Not quite there: Jinja macros - -An underestimated feature of Jinja is *macros*. Jinja [macros](https://jinja.palletsprojects.com/en/3.0.x/templates/#macros) are template snippets that work like functions: They can have positional or keyword arguments, and when called return the rendered text inside. - -```html+jinja -{% macro input(name, value="", type="text", size=20) -%} - -{%- endmacro %} - -{% macro button(type="button") -%} - -{%- endmacro %} -``` - -You can then import the macro to your template to use it: - -```html+jinja -{% from 'forms.html' import input, button %} - -

    {{ input("username") }}

    -

    {{ input("password", type="password") }}

    -{% call button("submit") %}Submit{% endcall %} -``` -You must use the `{% call x %}` to pass the child content to the macro—by using the weird incantation `{{ caller() }}`—otherwise you can just call it like it were a function. - -So, can we use macros as components and call it a day? Well... no. This looks terrible: - -```html+jinja -{% call Card(label="Hello") %} - {% call MyButton(color="blue", shadowSize=2) %} - {{ Icon(name="ok") }} Click Me - {% endcall %} -{% endcall %} -``` - -compared to how you would write it with JSX: - -```html - - - Click Me - - -``` - -But macros are *almost* there. They would be a great foundation if we could adjust the syntax just a little. - -## Strong alternative: Mako - -At some point, I considered dropping this idea and switching to [Mako](https://www.makotemplates.org/), a template library by Michael Bayer (of SQLAlchemy fame). - -It's a hidden gem that doesn't get much attention because of network effects. See how close you can get with it: - -```html+mako -<%def name="layout()"> # <--- A "macro" -
    -
    - ${caller.header()} -
    - -
    - ${caller.sidebar()} -
    - -
    - ${caller.body()} -
    -
    - - -## calls the layout def <--- Look! Python-style comments - -<%self:layout> - <%def name="header()"> # <--- This is like a "slot"! - I am the header - - <%def name="sidebar()"> -
      -
    • sidebar 1
      • -
    • sidebar 2
      • -
    - - this is the body - -``` - -Mako also has `<% include %>`s with arguments, which is another way of doing components if you don't need to pass content. - -However, in the end, the network effects, my familiarity with Jinja, and a little of not-invented-here syndrome tipped the scales to write a Jinja extension. diff --git a/docs/content/guide/performance.md b/docs/content/guide/performance.md deleted file mode 100644 index 609b952..0000000 --- a/docs/content/guide/performance.md +++ /dev/null @@ -1,3 +0,0 @@ ---- -title: Performance ---- diff --git a/docs/content/guide/slots.md b/docs/content/guide/slots.md deleted file mode 100644 index 991f327..0000000 --- a/docs/content/guide/slots.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Slots / Content -description: Working with content in components. ---- - -
    -Besides attributes, components can also accept content to render inside them. -
    - -Everything between the open and close tags of the components will be rendered and passed to the component as an implicit `content` variable - -This is a very common pattern, and it is called a **_slot_**. A slot is a placeholder for content that can be provided by the user of the component. For example, we may have a `` component that supports usage like this: - -```html+jinja - -