About Dj Angles

Transpile HTML to the Django Template Language

Published by

adamghill

Visit View Profile

Dj Angles

View on GitHub

dj-angles </>

PyPI PyPI - Downloads GitHub Sponsors

📖 Complete documentation: https://dj-angles.adamghill.com/
📦 Package: https://pypi.org/project/dj-angles/

⭐ 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 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
django-compressor
django-components
django-viewcomponent
django-bird
django-template-partials

Template tags

call: call functions in a template
model: call a model in a template
template: lightweight inline template
view: render a view in a template

Filters

dateformat: use Python strftime format for formatting dates as a string

💥 Examples

<!-- base.html -->
<dj-block name="content">  <!-- {% block content %} -->
</dj-block>  <!-- {% endblock content %} -->

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

<!-- static-helpers.html -->
<dj-image src="https://raw.githubusercontent.com/adamghill/dj-angles/main/img/django.jpg" />  <!-- <img  /> -->
<dj-css href="https://github.com/adamghill/dj-angles/blob/main/css/styles.css" />  <!-- <link  rel="stylesheet" /> -->

<!-- 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" %} -->

<!-- django-compressor.html -->
<dj-compress css> <!-- {% compress css %} -->
  <style>.critical { color: red; }</style>
</dj-compress> <!-- {% endcompress %} -->

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

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

<!-- 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>

<!-- 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> -->

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