Skip to main content

Add more bracket angles to Django templates </>

Project description

dj-angles </>

PyPI PyPI - Downloads GitHub Sponsors All Contributors

⭐ 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
  • Lightweight way to submit forms via AJAX and swap in the resulting HTML
  • Error boundaries to catch and display template errors

Component library integrations

Template tags

  • call and model to call functions directly from a template instead of creating custom template tags

Filters

💥 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='img/django.jpg' />  <!-- <img src="{% static 'img/django.jpg' %}" /> -->
<dj-css href='css/styles.css' />  <!-- <link href="{% static 'css/styles.css' %}" 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 %} -->
<!-- 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 %} -->
<!-- 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 %} -->

📖 Documentation

To learn how to install and use dj-angles see the complete documentation at https://dj-angles.adamghill.com/.

🧩 Django Component Libraries

There are a growing number of component libraries for Django. A non-complete list:

  • Slippers: Build reusable components in Django without writing a single line of Python.
  • django-components: Create simple reusable template components in Django.
  • django-template-partials: Reusable named inline partials for the Django Template Language.
  • django-bird: High-flying components for perfectionists with deadlines.
  • django-cotton: Enabling Modern UI Composition in Django.
  • django-viewcomponent: Build reusable components in Django, inspired by Rails ViewComponent.
  • django-unicorn: The magical reactive component framework for Django ✨.

✨ Inspiration

🙌 Contributors

Emmanuelle Delescolle
Emmanuelle Delescolle

💻 ⚠️ 📖
Jarkko Saltiola
Jarkko Saltiola

📖

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dj_angles-0.25.0.tar.gz (32.7 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

dj_angles-0.25.0-py3-none-any.whl (45.6 kB view details)

Uploaded Python 3

File details

Details for the file dj_angles-0.25.0.tar.gz.

File metadata

  • Download URL: dj_angles-0.25.0.tar.gz
  • Upload date:
  • Size: 32.7 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/6.1.0 CPython/3.13.7

File hashes

Hashes for dj_angles-0.25.0.tar.gz
Algorithm Hash digest
SHA256 1d6e499c8c95fcc90c4e23e06af03976789d84e1070f99e0c25de4f57a7b7732
MD5 a04191b3b6b25c40ae12ff5ead6181c1
BLAKE2b-256 f57e08cc4ec3f6ab90424f1d9612b99cbaadc944ba2b57c8e8a2161bb01e7cf2

See more details on using hashes here.

Provenance

The following attestation bundles were made for dj_angles-0.25.0.tar.gz:

Publisher: publish.yml on adamghill/dj-angles

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

File details

Details for the file dj_angles-0.25.0-py3-none-any.whl.

File metadata

  • Download URL: dj_angles-0.25.0-py3-none-any.whl
  • Upload date:
  • Size: 45.6 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/6.1.0 CPython/3.13.7

File hashes

Hashes for dj_angles-0.25.0-py3-none-any.whl
Algorithm Hash digest
SHA256 b650e38579a24f14449176339e12c355a32bd3f914ff2e7f2837e186887cd2bc
MD5 351152eef460f4542e5ffbdb25513268
BLAKE2b-256 6db4a8aee1e6e654a3e48c336d01407b99fd3a763241afb17955ab7ddb094af5

See more details on using hashes here.

Provenance

The following attestation bundles were made for dj_angles-0.25.0-py3-none-any.whl:

Publisher: publish.yml on adamghill/dj-angles

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page