dj-angles
<p align="center"> <h1 align="center">dj-angles </></h1> </p>    [](#contributors-) - 📖 Complete documentation: https://dj-angles.adamghill.com/ - 📦 Package: https://pypi.org/project/dj-angles/ <!-- readme-features-start --> ## ⭐ Features - Use HTML-like elements in Django templates, e.g. `<dj-some-partial />` instead of `{% include 'some-partial.html' %}` - Can be sprinkled in as needed to enhance existing Django functionality - Since it looks like HTML, syntax highlighting mostly "just works" - Wraps components in a custom HTML element for easier debugging and targeted CSS styling - Support for the [Shadow DOM](https://dj-angles.adamghill.com/en/latest/components/#css-scoping) to encapsulate component styles - Error boundaries to catch and display template errors - Lightweight way to submit forms via AJAX and swap in the resulting HTML ### Third-party package integrations - Support for Django 6.0 [template partials](https://docs.djangoproject.com/en/stable/ref/templates/language/#template-partials) - [django-compressor](https://django-compressor.readthedocs.io) - [django-components](https://django-components.github.io/django-components/) - [django-viewcomponent](https://github.com/rails-inspire-django/django-viewcomponent) - [django-bird](https://django-bird.readthedocs.io) - [django-template-partials](https://github.com/carltongibson/django-template-partials) ### Template tags - [`call`](https://dj-angles.adamghill.com/en/latest/template-tags/call/): call functions in a template - [`model`](https://dj-angles.adamghill.com/en/latest/template-tags/model/): call a model in a template - [`template`](https://dj-angles.adamghill.com/en/latest/template-tags/template/): lightweight inline template - [`view`](https://dj-angles.adamghill.com/en/latest/template-tags/view/): render a view in a template ### Filters - [`dateformat`](https://dj-angles.adamghill.com/en/latest/filters/dateformat/): use Python [`strftime`](https://strftime.org) format for formatting dates as a string <!-- readme-features-end --> <!-- readme-examples-start --> ## 💥 Examples ```html <!-- base.html --> <dj-block name="content"> <!-- {% block content %} --> </dj-block> <!-- {% endblock content %} --> ``` ```html <!-- template-tags.html --> <dj-extends parent="base.html" /> <!-- {% extends "base.html" %} --> <dj-block name="content"> <!-- {% block content %} --> <!-- components --> <dj-some-partial /> <!-- {% include "test-partial.html" %} --> <dj-include template="test-partial.html" /> <!-- {% include "test-partial.html" %} --> <dj-verbatim> <!-- {% verbatim %} --> This is verbatim: {% include %} </dj-verbatim> <!-- {% endverbatim %} --> <dj-comment> <!-- {% comment %} --> this is a comment </dj-comment> <!-- {% endcomment %} --> <dj-autoescape-on> <!-- {% autoescape-on %} --> This is escaped </dj-autoescape-on> <!-- {% endautoescape %} --> <dj-autoescape-off> <!-- {% autoescape off %} --> This is not escaped </dj-autoescape-off> <!-- {% endautoescape %} --> <dj-csrf /> <!-- {% csrf_token %} --> <dj-debug /> <!-- {% debug %} --> </dj-block> <!-- {% endblock content %} --> ``` ```html <!-- static-helpers.html --> <dj-image src="img/django.jpg" /> <!-- <img src="{% static 'img/django.jpg' %}" /> --> <dj-css href="css/styles.css" /> <!-- <link href="{% static 'css/styles.css' %}" rel="stylesheet" /> --> ``` ```html <!-- call-code-from-template.html --> <dj-call code="slugify('Hello Goodbye')" as="variable_name" /> <!-- {% call slugify("Hello Goodbye") as variable_name %} --> <dj-model code="Book.objects.filter(id=1)" as="book" /> <!-- {% model Book.objects.filter(id=1) as book %} --> <dj-view name="some-view" /> <!-- {% view "some-view" %} --> ``` ```html <!-- django-compressor.html --> <dj-compress css> <!-- {% compress css %} --> <style>.critical { color: red; }</style> </dj-compress> <!-- {% endcompress %} --> ``` ```html <!-- third-party-component-libraries.html --> <!-- django-components --> <dj-component name="button">Click me</dj-component> <!-- {% component "button" %}Click me{% endcomponent %} --> <!-- django-viewcomponent --> <dj-viewcomponent name="button">Click me</dj-viewcomponent> <!-- {% viewcomponent "button" %}Click me{% endviewcomponent %} --> <!-- django-bird --> <dj-bird template="button" class="btn">Click me</dj-bird> <!-- {% bird "button" class="btn" %}Click me{% endbird %} --> <!-- django-template-partials --> <dj-partial name="sidebar"> <!-- {% partialdef sidebar %} --> <p>Sidebar content</p> </dj-partial> <!-- {% endpartialdef %} --> <dj-partial name="sidebar" /> <!-- {% partial sidebar %} --> ``` ```html <!-- inline-expressions.html --> {{ request.user.username or request.user.email }} <!-- {% if request.user.username %}{{ request.user.username }}{% else %}{{ request.user.email }}{% endif %} --> {{ request.user.username if request.user.is_authenticated else "Unknown" }} <!-- {% if request.user.is_authenticated %}{{ request.user.username }}{% else %}Unknown{% endif %} --> ``` ```html <!-- error-boundaries.html --> <dj-block name="content" error-boundary> <dj-include template="missing-template.html" /> </dj-block> <dj-error-boundary> <dj-include template="missing-template.html" /> </dj-error-boundary> ``` ```html <!-- ajax-form-submission.html --> <dj-form action="/submit" method="POST" swap="outerHTML" ajax csrf> <!-- <ajax-form><form action="/submit" method="POST">{% csrf_token %} --> <button type="submit">Submit</button> </dj-form><!-- </form></ajax-form> --> ``` ```html <!-- conditional-attributes.html --> <div dj-if="True"> <!-- {% if True %}<div> --> If </div> <div dj-elif="False"> <!-- {% elif False %}<div> --> Elif </div> <div dj-else> <!-- {% else %}<div> --> Else </div> <!-- </div>{% endif %} --> ``` <!-- readme-examples-end --> ## 📖 Documentation To learn how to install and use `dj-angles` see the complete documentation at https://dj-angles.adamghill.com/. <!-- readme-inspiration-start --> ## ✨ Inspiration - [Web Components](https://web.dev/learn/html/template) - [django-cotton](https://django-cotton.com) by [wrabit](https://github.com/wrabit) <!-- readme-inspiration-end --> ## 🙌 Contributors <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="http://www.levit.be"><img src="https://avatars.githubusercontent.com/u/1215070?v=4?s=100" width="100px;" alt="Emmanuelle Delescolle"/><br /><sub><b>Emmanuelle Delescolle</b></sub></a><br /><a href="https://github.com/adamghill/dj-angles/commits?author=nanuxbe" title="Code">💻</a> <a href="https://github.com/adamghill/dj-angles/commits?author=nanuxbe" title="Tests">⚠️</a> <a href="https://github.com/adamghill/dj-angles/commits?author=nanuxbe" title="Documentation">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://jasalt.dev"><img src="https://avatars.githubusercontent.com/u/2306521?v=4?s=100" width="100px;" alt="Jarkko Saltiola"/><br /><sub><b>Jarkko Saltiola</b></sub></a><br /><a href="https://github.com/adamghill/dj-angles/commits?author=jasalt" title="Documentation">📖</a></td> </tr> </tbody> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->