Skip to main content

Add more bracket angles to Django templates </>

Project description

dj-angles </>

Add more bracket angles to Django templates

https://dj-angles.adamghill.com/

PyPI PyPI - Downloads GitHub Sponsors

📖 Documentation located at https://dj-angles.adamghill.com/. 📦 Package located at https://pypi.org/project/dj-angles/.

⭐ Features

  • Use HTML-like elements in Django templates, e.g. <dj-partial /> instead of {% include 'partial.html' %}
  • Can be sprinkled in as needed, but does not remove existing Django functionality
  • Pretend like you are writing React components, but without dealing with JavaScript at all
  • Lets you excitedly tell your friends how neat the Shadow DOM is
  • Since it looks like HTML, syntax highlighting mostly "just works"
  • Wraps included templates in a custom element for easier debugging and targeted CSS styling

💥 Example

base.html

<dj-block name='content'>
</dj-block name='content'>

index.html

<dj-extends parent='base.html' />  <!-- {% extends 'base.html' %} -->

<dj-block name='content'>  <!-- {% block content %} -->
  <dj-include template='partial.html' />  <!-- {% include 'partial.html' %} -->

  <dj-verbatim>  <!-- {% verbatim %} -->
    This is verbatim: {% include %}
  </dj-verbatim>  <!-- {% endverbatim %} -->

  <dj-comment>  <!-- {% comment %} -->
    this is a comment
  </dj-comment>  <!-- {% endcomment %} -->

  <dj-#>this is another comment</dj-#>    <!-- {# this is another comment #} -->

  <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-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" /> -->
</dj-block name='content'>  <!-- {% endblock content %} -->

partial.html

<div>
  This is a partial: {{ now|date:"c" }}
</div>

📖 Documentation

To learn more about how to install and use dj-angles go to https://dj-angles.adamghill.com/.

✨ Inspiration

I have been interested in Django components and encapsulating functionality for a long time (see django-unicorn, dlitejs, etc), but had never thought of using HTML directly until I looked at Cotton by wrabit. dj-angles takes that idea further to see how well it works.

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.7.0.tar.gz (25.0 kB view details)

Uploaded Source

Built Distribution

dj_angles-0.7.0-py3-none-any.whl (12.8 kB view details)

Uploaded Python 3

File details

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

File metadata

  • Download URL: dj_angles-0.7.0.tar.gz
  • Upload date:
  • Size: 25.0 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/5.1.1 CPython/3.9.7

File hashes

Hashes for dj_angles-0.7.0.tar.gz
Algorithm Hash digest
SHA256 11821589c24c58ee4d999d118d530e11398ed0f648b1c4844ac260da2bff57d9
MD5 77eba42587a7871729ee031f34887cca
BLAKE2b-256 22c647f20615dd7782b707ab2aaecb24ed25988607a7f98340c3a2b358d7db4e

See more details on using hashes here.

File details

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

File metadata

  • Download URL: dj_angles-0.7.0-py3-none-any.whl
  • Upload date:
  • Size: 12.8 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/5.1.1 CPython/3.9.7

File hashes

Hashes for dj_angles-0.7.0-py3-none-any.whl
Algorithm Hash digest
SHA256 d2641393818bf74166f464e14ca3950185df6a4de97ca9607b42a85d6ae0997f
MD5 e6d327c1bedc7130ad3d131bcb343bd0
BLAKE2b-256 931f3a2747f7a16939b833477ab09bd2b4b35efdad59a9e019cbd8d0e38a1a8c

See more details on using hashes here.

Supported by

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