djlint 1.28.0 → 1.30.0

package/docs/src/_data/i18n/index.js

@@ -0,0 +1,159 @@
+module.exports = {
+  hello: {
+    'en-US': 'Hello',
+    ru: 'Hola',
+    fr: 'Salut',
+  },
+  title: {
+    'en-US': 'HTML Template Linter and Formatter',
+    ru: 'Программа проверки и форматирования шаблонов HTML',
+    fr: 'Linter et formateur de modèles HTML',
+  },
+  // Lang_name: {
+  //   'en-US': "English",
+  //   ru: "Русский"
+  // },
+  // lang_code: {
+  //   'en-US': "en",
+  //   ru: "ru"
+  // },
+  lang_code_url: {
+    'en-US': '',
+    ru: '/ru',
+    fr: '/fr',
+  },
+  next_release: {
+    'en-US': 'Next Release',
+    ru: 'Следующая публикация',
+    fr: 'Prochaine Version',
+  },
+  getting_started: {
+    'en-US': 'Getting Started',
+    ru: 'Начало Работы',
+    fr: 'Commencer',
+  },
+  formatter: {
+    'en-US': 'Formatter',
+    ru: 'Форматер',
+    fr: 'Formateur',
+  },
+  linter: {
+    'en-US': 'Linter',
+    ru: 'Линтер',
+    fr: 'Linter',
+  },
+  configuration: {
+    'en-US': 'Configuration',
+    ru: 'Конфигурация',
+    fr: 'Configuration',
+  },
+  integrations: {
+    'en-US': 'Integrations',
+    ru: 'Интеграции',
+    fr: 'Intégrations',
+  },
+  best_practices: {
+    'en-US': 'Best Practices',
+    ru: 'Лучшие Практики',
+    fr: 'Meilleures Pratiques',
+  },
+  description: {
+    'en-US':
+      'Find common syntax errors, reformat to make your HTML templates shine! Supports django, jinja, nunjucks, twig, handlebars, mustache, golang, and more!',
+    ru: 'Найдите распространенные синтаксические ошибки, переформатируйте, чтобы ваши HTML-шаблоны сияли! Поддерживает django, jinja, nunjucks, twig, handlebars, mustache, golang и многое другое!',
+    fr: 'Trouvez les erreurs de syntaxe courantes, reformatez pour faire briller vos modèles HTML ! Supporte django, jinja, nunjucks, twig, handlebars, mustache, golang, et plus encore !',
+  },
+  updated: {
+    'en-US': 'Updated',
+    ru: 'Обновлен',
+    fr: 'Actualisé',
+  },
+  changelog: {
+    'en-US': 'Changelog',
+    ru: 'Изменения',
+    fr: 'Changelog',
+  },
+  documentation: {
+    'en-US': 'Documentation',
+    ru: 'Документация',
+    fr: 'Documentation',
+  },
+  index_title: {
+    'en-US': 'Lint & Format HTML Templates',
+    ru: 'Проверка и форматирование html-шаблонов',
+    fr: 'Lint & Format Templates HTML',
+  },
+  index_description: {
+    'en-US':
+      'Once upon a time all the other programming languages had a formatter and linter. Css, javascript, python, the c suite, typescript, ruby, php, go, swift, and you know the others. <i>The cool kids on the block.</i><br>HTML templates were left out there on their own, in the cold, unformatted and unlinted :( The dirty corner in your repository. <i>Something had to change.</i><br>Welcome djLint, the free cleaning service for html templates!<br>And the html templates lived happily ever after.',
+    ru: 'Когда-то давно все другие языки программирования имели форматтер и линтер. Css, javascript, python, c suite, typescript, ruby, php, go, swift, и вы знаете другие. <i>Крутые ребята в квартале.</i><br>HTML-шаблоны остались там сами по себе, на холоде, неформатированные и нелинкованные :( Грязный угол в вашем репозитории. <i>Что-то должно было измениться.</i><br>Добро пожаловать djLint, бесплатный сервис очистки html-шаблонов!<br>И html-шаблоны жили долго и счастливо.',
+    fr: "Il était une fois, un royaume où tous les autres langages de programmation avaient un formateur et un linter. Css, javascript, python, la suite c, typescript, ruby, php, go, swift, et vous connaissez les autres. <i>Les gamins cool du quartier.</i><br>Les modèles HTML restaient là, seuls, dans le froid, non formatés et non non-lintés :( Le coin cracra de votre entrepôt. <i>Quelque chose devait changer.</i><br>Bienvenue à djLint, le service gratuit de nettoyage des modèles html !<br>Et les modèles html vécurent heureux jusqu'à la fin des temps.",
+  },
+  index_fav_lang: {
+    'en-US': 'find your favorite template language!',
+    ru: 'найдите свой любимый язык шаблонов!',
+    fr: 'retrouvez votre language informatique préféré!',
+  },
+  index_show_format: {
+    'en-US': 'Show your format!',
+    ru: 'Покажите свой формат!',
+    fr: 'Montre ton format!',
+  },
+  index_watch: {
+    'en-US': 'Watch it run!',
+    ru: 'Смотрите, как он идет!',
+    fr: 'Regardez-le marcher!',
+  },
+  index_add_badge: {
+    'en-US': 'Add a badge to your projects',
+    ru: 'Добавьте значок к своим проектам',
+    fr: 'Ajoutez un badge à vos projets',
+  },
+  index_looks_like: {
+    'en-US': 'Looks like this:',
+    ru: 'Выглядит вот так:',
+    fr: 'Ça ressemble à ça:',
+  },
+  contributing: {
+    'en-US': 'Contributing',
+    ru: 'Вклад',
+    fr: 'Contribuer',
+  },
+  contributing_message: {
+    'en-US':
+      'Contributions are welcome. Send a pr with a new feature, or checkout the <a href="https://github.com/Riverside-Healthcare/djlint/issues">issue</a> list and help where you can.',
+    ru: 'Вклад в работу сайта приветствуется. Пришлите письмо с новой функцией или ознакомьтесь со <a href="https://github.com/Riverside-Healthcare/djlint/issues">списком проблем</a> и помогите, чем можете.',
+    fr: 'Les contributions sont les bienvenues. Envoyez un pr avec une nouvelle fonctionnalité, ou consultez la <a href="https://github.com/Riverside-Healthcare/djlint/issues">liste</a> et aidez où vous pouvez.',
+  },
+  edit_page: {
+    'en-US': 'Edit this page',
+    ru: 'Редактировать эту страницу',
+    fr: 'Modifier cette page',
+  },
+  ignoring_code: {
+    'en-US': 'Ignoring Code',
+    ru: 'Игнорирование Контент',
+    fr: 'Ignorer le Contenu',
+  },
+  try_online: {
+    'en-US': '🤩 Try Online',
+    fr: '🤩 Essayez Ici',
+    ru: '🤩 Попробуйте онлайн',
+  },
+  demo_description: {
+    'en-US': 'Online HTML Template formatter using djLint!',
+    ru: 'Онлайн форматировщик HTML-шаблонов с использованием djLint',
+    fr: 'Formateur de modèles HTML en ligne utilisant djLint !',
+  },
+  footer_credits: {
+    'en-US':
+      'djLint was originally created for use in the <a href="https://atlas.bi" target="_blank">Atlas</a> projects by the <a href="https://github.com/riverside-Healthcare/" target="_blank">Riverside Healthcare Analytics</a> team.',
+    fr: 'djLint a été créé à l\'origine pour être utilisé dans les projets <a href="https://atlas.bi" target="_blank">Atlas</a> par l\'équipe <a href="https://github.com/riverside-Healthcare/" target="_blank">Riverside Healthcare Analytics</a>.',
+    ru: 'Изначально djLint был создан для использования в проектах <a href="https://atlas.bi" target="_blank">Atlas</a> командой <a href="https://github.com/riverside-Healthcare/" target="_blank">Riverside Healthcare Analytics</a>.',
+  },
+  site_analytics: {
+    'en-US': 'Site Analytics',
+    fr: 'Site Analytics',
+    ru: 'Аналитика сайта',
+  },
+};

package/docs/src/_data/js.js

@@ -0,0 +1,7 @@
+const generateContentHash = require('../lib/generate-content-hash.js');
+
+const hash = generateContentHash('src/static/js/**/*.js');
+
+module.exports = {
+  scriptsJs: `/static/js/${hash}.js`,
+};

package/docs/src/_data/locales.js

@@ -0,0 +1,17 @@
+module.exports = [
+  {
+    label: 'English',
+    code: 'en-US',
+    url: '',
+  },
+  {
+    label: 'Русский',
+    code: 'ru',
+    url: 'ru',
+  },
+  {
+    label: 'Français',
+    code: 'fr',
+    url: 'fr',
+  },
+];

package/docs/src/_data/site.json

@@ -0,0 +1,8 @@
+{
+  "description": "Find common syntax errors, reformat to make your HTML templates shine! Supports django, jinja, nunjucks, twig, handlebars, mustache, golang, and more!",
+  "image": "/static/img/icon.png",
+  "keywords": "djLint, template linting, template formatting, html template linting, django template, nunjucks template, jinja template",
+  "title": "HTML Template Linter and Formatter",
+  "name": "djLint",
+  "url": "https://www.djlint.com"
+}

package/docs/src/_includes/demo.njk

@@ -0,0 +1,157 @@
+---
+layout: layout.njk
+date: Last Modified
+description: Online HTML Template formatter. Reformat your HTML templates online with djLint.
+keywords: online template formatter, djLint, HTML, templates, formatter, linter, rules, online html template formatter
+---
+
+
+
+
+  <div class="container is-fluid pb-5">
+  <hr class="mt-0" />
+    <h1 class="title is-3 mb-0">{{ "demo_description" | i18n | safe }}</h1>
+    <small class="mb-4  is-italic is-block" id="djlint-version"></small>
+
+    <div class="block" id="djlint-status">
+    <span class="icon-text">
+      <span class="icon">
+        <i class="fas fa-spinner fa-spin"></i>
+      </span>
+      <span><strong>Loading djLint ..</strong></span>
+      </span>
+    </div>
+    <div class="columns is-hidden">
+
+      <div class="column is-narrow">
+
+<form id="djlint-settings">
+  <div class="field">
+  <label class="label">Custom Blocks <a href="/docs/configuration/#custom_blocks" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a></label>
+  <div class="control">
+    <input id="settings-custom-blocks" class="input" type="text" placeholder="toc,example">
+  </div>
+</div>
+
+ <div class="field">
+  <label class="label">Custom HTML <a href="/docs/configuration/#custom_html" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a></label>
+  <div class="control">
+    <input id="settings-custom-html" class="input" type="text" placeholder="mjml,simple-greeting,mj-\w+">
+  </div>
+</div>
+
+<div class="field">
+  <label class="label">Indent <a href="/docs/configuration/#indent" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a></label>
+  <div class="control">
+    <input id="settings-indent" class="input" type="text" placeholder="4">
+  </div>
+</div>
+
+<div class="field">
+  <label class="label">Blank Line after Tag <a href="/docs/configuration/#blank_line_after_tag" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a></label>
+  <div class="control">
+    <input id="settings-blank-line-after-tag" class="input" type="text" placeholder="load,extends,include">
+  </div>
+</div>
+<div class="field">
+  <label class="label">Blank Line before Tag <a href="/docs/configuration/#blank_line_before_tag" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a></label>
+  <div class="control">
+    <input id="settings-blank-line-before-tag" class="input" type="text" placeholder="load,extends,include">
+  </div>
+</div>
+
+<div class="field">
+  <label class="label">Profile  <a href="/docs/configuration/#profile" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a></label>
+  <div class="control">
+    <div class="select">
+  <select id="settings-profile" >
+    <option value="html">html (default)</option>
+    <option value="django">django</option>
+    <option value="jinja">jinja</option>
+    <option value="nunjucks">nunjucks (nunjucks and twig)</option>
+    <option value="handlebars">handlebars (handlebars and mustache)</option>
+    <option value="golang">golang</option>
+    <option value="angular">angular</option>
+  </select>
+</div>
+  </div>
+</div>
+
+<div class="field">
+  <label class="label">Max Line Length <a href="/docs/configuration/#max_line_length" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a></label>
+  <div class="control">
+    <input id="settings-max-line-length"  class="input" type="text" placeholder="80">
+  </div>
+</div>
+<div class="field">
+  <label class="label">Max Attribute Length <a href="/docs/configuration/#max_attribute_length" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a></label>
+  <div class="control">
+    <input id="settings-max-attribute-length" class="input" type="text" placeholder="0">
+  </div>
+</div>
+<div class="field">
+<label class="checkbox">
+  <input id="settings-format-attribute-template-tags" type="checkbox">
+  Format Attribute Template Tags <a href="/docs/configuration/#format_attribute_template_tags" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a>
+</label>
+</div>
+<div class="field">
+<label  class="checkbox">
+  <input id="settings-preserve-leading-space" type="checkbox">
+  Preserve Leading Space <a href="/docs/configuration/#preserve_leading_space" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a>
+</label>
+</div>
+<div class="field">
+<label  class="checkbox">
+  <input id="settings-preserve-blank-space" type="checkbox">
+  Preserve Blank Space <a href="/docs/configuration/#preserve_blank_lines" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a>
+</label>
+</div>
+<div class="field">
+<label class="checkbox">
+  <input id="settings-format-js"  type="checkbox">
+  Format JS <a href="/docs/configuration/#format_js" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a>
+</label>
+</div>
+<div class="field">
+<label class="checkbox">
+  <input id="settings-format-css"  type="checkbox">
+  Format CSS <a href="/docs/configuration/#format_css" target="_blank"><span class="icon has-text-grey-light">
+  <i class="fas fa-circle-question"></i>
+</span></a>
+</label>
+</div>
+</form>
+      </div>
+      <div class="column" id="djlint-input">
+      </div>
+      <div class="column" id="djlint-output">
+      </div>
+    </div>
+  </div>
+
+{% rollup "src/static/js/editor.js" | url %}

package/docs/src/_includes/docs_layout.njk

@@ -0,0 +1,34 @@
+---
+layout: layout.njk
+---
+
+<div class="container">
+  <div class="columns">
+    <div class="column is-narrow mr-5">
+      <aside class="menu is-sticky">
+        <p class="menu-label">
+          {{ "documentation" | i18n }}
+        </p>
+        <ul class="menu-list">
+          <li>
+
+          <a class="{% if page.url == "lang_code_url" | i18n + "/docs/getting-started/" %}is-active{% endif %}" href="{{ "lang_code_url" | i18n }}/docs/getting-started/"><span class="icon mr-1"><i class="fa-solid fa-code-commit"></i></span>{{ "getting_started" | i18n }}</a></li>
+          <li><a class="{% if page.url == "lang_code_url" | i18n + "/docs/formatter/" %}is-active{% endif %}" href="{{ "lang_code_url" | i18n }}/docs/formatter/"><span class="icon mr-1"><i class="fa-solid fa-code-commit"></i></span>{{ "formatter" | i18n }}</a></li>
+          <li><a class="{% if page.url == "lang_code_url" | i18n + "/docs/linter/" %}is-active{% endif %}" href="{{ "lang_code_url" | i18n }}/docs/linter"><span class="icon mr-1"><i class="fa-solid fa-code-commit"></i></span>{{ "linter" | i18n }}</a></li>
+          <li><a class="{% if page.url == "lang_code_url" | i18n + "/docs/ignoring-code/" %}is-active{% endif %}" href="{{ "lang_code_url" | i18n }}/docs/ignoring-code/"><span class="icon mr-1"><i class="fa-solid fa-code-commit"></i></span>{{ "ignoring_code" | i18n }}</a></li>
+          <li><a class="{% if page.url == "lang_code_url" | i18n + "/docs/configuration/" %}is-active{% endif %}" href="{{ "lang_code_url" | i18n }}/docs/configuration/"><span class="icon mr-1"><i class="fa-solid fa-code-commit"></i></span>{{ "configuration" | i18n }}</a></li>
+          <li><a class="{% if page.url == "lang_code_url" | i18n + "/docs/integrations/" %}is-active{% endif %}" href="{{ "lang_code_url" | i18n }}/docs/integrations"><span class="icon mr-1"><i class="fa-solid fa-code-commit"></i></span>{{ "integrations" | i18n }}</a></li>
+          <li><a class="{% if page.url == "lang_code_url" | i18n + "/docs/best-practices/" %}is-active{% endif %}" href="{{ "lang_code_url" | i18n }}/docs/best-practices/"><span class="icon mr-1"><i class="fa-solid fa-code-commit"></i></span>{{ "best_practices" | i18n }}</a></li>
+          <li><a class="{% if page.url == "lang_code_url" | i18n + "/docs/changelog/" %}is-active{% endif %}" href="{{ "lang_code_url" | i18n }}/docs/changelog"><span class="icon mr-1"><i class="fa-solid fa-code-commit"></i></span>{{ "changelog" | i18n }}</a></li>
+          </ul>
+      </aside>
+    </div>
+    <div class="column mb-5">
+      {{ content | safe }}
+      <div class="is-flex is-justify-content-space-between">
+        <span>{% gh_edit page %}</span>
+        <em><small>{{ "updated" | i18n }} <strong>{{ page.date | niceDate }}</strong></small></em>
+      </div>
+    </div>
+  </div>
+</div>

package/docs/src/_includes/foot.njk

@@ -0,0 +1,26 @@
+<footer class="footer">
+    <div class="container">
+        <div class="columns">
+            <div class="column is-one-third">
+                <figure class="image" style="max-width: 100px;">
+                    {% image "./src/static/img/icon.png", "djlint icon", "(min-width:100px) 50vw, 100vw" %}
+                </figure>
+                <p class="my-4">
+                    {{ "description" | i18n }}
+                </p>
+            </div>
+            <div class="column"></div>
+            <div class="column">
+                <p class="copyright has-text-grey-dark has-text-right">
+                    djLint | ©{{ page.date | year }} Riverside Healthcare
+                </p>
+                <p class="has-text-grey-dark has-text-right mt-2">
+                    <small>{{ "footer_credits" | i18n | safe }}</small>
+                </p>
+                <p class="has-text-right pt-3">
+                  <a href="https://analytics.djlint.com/share/fdd3vGz2/djlint.com" target="_blank"><small>{{ "site_analytics" | i18n }}</small></a>
+                </p>
+            </div>
+        </div>
+    </div>
+</footer>

package/docs/src/_includes/index.njk

@@ -0,0 +1,187 @@
+---
+layout: layout.njk
+date: Last Modified
+
+---
+{% block body %}
+<div class="section">
+     <div class="container has-text-centered">
+                 <h1 class="title huge mt-5">dj<span class="has-text-weight-light">&#8201;Lint</span></h1>
+
+                 <h2 class="title is-2">
+                     {{ "index_title" |i18n }}</h2>
+
+<p class="story my-5 has-text-left">{{ "index_description" | i18n | safe }}
+
+<h2 class="title is-2 has-text-centered mb-5">{{ "index_fav_lang" | i18n }}</h2>
+<div class="columns is-multiline">
+   <div class="column is-one-quarter">
+      <a class="is-block card animated fadeInUp" href="{{ "lang_code_url" | i18n }}/docs/languages/django/">
+         <div class="card-content" >
+            <div class="content">
+            <figure class="image brand">
+                        {% image "./src/static/img/logos/django.png", "django logo", "(min-width:300px) 50vw, 100vw" %}
+                    </figure>
+                     <h3 class="title is-4 my-0 is-uppercase has-text-weight-light is-family-sans-serif has-text-grey">Django</h3>
+            </div>
+         </div>
+      </a>
+   </div>
+
+   <div class="column is-one-quarter">
+      <a class="is-block card animated fadeInUp" href="{{ "lang_code_url" | i18n }}/docs/languages/jinja/">
+         <div class="card-content">
+            <div class="content">
+             <figure class="image brand">
+                        {% image "./src/static/img/logos/jinja.png", "jinja logo", "(min-width:300px) 50vw, 100vw" %}
+                    </figure>
+                    <h3 class="title is-4 my-0 is-uppercase has-text-weight-light is-family-sans-serif has-text-grey">jinja</h3>
+            </div>
+         </div>
+      </a>
+   </div>
+
+   <div class="column is-one-quarter">
+      <a class="is-block card animated fadeInUp" href="{{ "lang_code_url" | i18n }}/docs/languages/nunjucks/">
+         <div class="card-content">
+            <div class="content">
+            <figure class="image brand">
+            {% image "./src/static/img/logos/nunjucks.png", "nunjucks logo", "(min-width:300px) 50vw, 100vw" %}
+            </figure>
+
+               <h3 class="title is-4 my-0 is-uppercase has-text-weight-light is-family-sans-serif has-text-grey">nunjucks</h3>
+            </div>
+         </div>
+      </a>
+   </div>
+
+   <div class="column is-one-quarter">
+      <a class="is-block card animated fadeInUp" href="{{ "lang_code_url" | i18n }}/docs/languages/twig/">
+         <div class="card-content">
+            <div class="content">
+            <figure class="image brand">
+            {% image "./src/static/img/logos/twig.png", "twig logo", "(min-width:300px) 50vw, 100vw" %}
+            </figure>
+               <h3 class="title is-4 my-0 is-uppercase has-text-weight-light is-family-sans-serif has-text-grey">twig</h3>
+            </div>
+         </div>
+      </a>
+   </div>
+
+   <div class="column is-one-quarter">
+      <a class="is-block card animated animated" data-animate="fadeInUp" href="{{ "lang_code_url" | i18n }}/docs/languages/handlebars/">
+         <div class="card-content">
+            <div class="content">
+             <figure class="image brand">
+            {% image "./src/static/img/logos/handlebars.png", "handlebars logo", "(min-width:300px) 50vw, 100vw" %}
+            </figure>
+               <h3 class="title is-4 my-0 is-uppercase has-text-weight-light is-family-sans-serif has-text-grey">handlebars</h3>
+            </div>
+         </div>
+      </a>
+   </div>
+
+   <div class="column is-one-quarter">
+      <a class="is-block card animated" data-animate="fadeInUp" href="{{ "lang_code_url" | i18n }}/docs/languages/mustache/">
+         <div class="card-content">
+            <div class="content">
+             <figure class="image brand">
+            {% image "./src/static/img/logos/mustache.png", "mustache logo", "(min-width:300px) 50vw, 100vw" %}
+            </figure>
+               <h3 class="title is-4 my-0 is-uppercase has-text-weight-light is-family-sans-serif has-text-grey">mustache</h3>
+            </div>
+         </div>
+      </a>
+   </div>
+
+   <div class="column is-one-quarter">
+      <a class="is-block card animated" data-animate="fadeInUp" href="{{ "lang_code_url" | i18n }}/docs/languages/golang/">
+         <div class="card-content">
+            <div class="content">
+             <figure class="image brand">
+            {% image "./src/static/img/logos/golang.png", "golang logo", "(min-width:300px) 50vw, 100vw" %}
+            </figure>
+               <h3 class="title is-4 my-0 is-uppercase has-text-weight-light is-family-sans-serif has-text-grey">golang</h3>
+            </div>
+         </div>
+      </a>
+   </div>
+   <div class="column is-one-quarter">
+      <a class="is-block card animated" data-animate="fadeInUp" href="{{ "lang_code_url" | i18n }}/docs/languages/angular/">
+         <div class="card-content">
+            <div class="content">
+             <figure class="image brand">
+            {% image "./src/static/img/logos/angular.png", "angular logo", "(min-width:300px) 50vw, 100vw" %}
+            </figure>
+               <h3 class="title is-4 my-0 is-uppercase has-text-weight-light is-family-sans-serif has-text-grey">angular</h3>
+            </div>
+         </div>
+      </a>
+   </div>
+
+</div>
+                  </div>
+ </div>
+
+<div class="container has-text-centered">
+<h2 class="title is-2">{{ "index_watch" | i18n }}</h2>
+
+    <figure class="image animated mx-auto is-framed" style="max-width:800px" data-animate="headShake">
+             <video autoplay loop muted playsinline>
+             <source src="/static/img/demo.webm" type="video/webm">
+                     <img src="/static/img/demo.gif" alt="djlint html template formatter demo" loading="lazy" decoding="async">
+</video>
+                 </figure>
+
+<h2 class="title is-2 mt-5">{{ "index_show_format" | i18n }}</h2>
+</div>
+<div class="container">
+
+
+{{ "index_add_badge" | i18n }} <code>readme.md</code>:
+
+{% highlight "md" %}
+[![Code style: djLint](https://img.shields.io/badge/html%20style-djLint-blue.svg)](https://github.com/Riverside-Healthcare/djlint)
+{% endhighlight %}
+
+{{ "index_add_badge" | i18n }} <code>readme.rst</code>:
+
+{% highlight "md" %}
+
+   .. image:: https://img.shields.io/badge/html%20style-djLint-blue.svg
+      :target: https://github.com/Riverside-Healthcare/djlint
+{% endhighlight %}
+
+<p>{{ "index_looks_like" | i18n }}</p>
+
+<figure class="image" style="max-width:120px;"><img width="120" height="22.64" src="https://img.shields.io/badge/html%20style-djLint-blue.svg" alt="https://github.com/Riverside-Healthcare/djlint" /></figure>
+
+</div>
+<div class="container has-text-centered mb-5">
+<h2 class="title is-2 mt-5">{{ "contributing" | i18n }}</h2>
+<p class="has-text-left">
+{{ "contributing_message" | i18n | safe }}</p>
+
+{% highlight "bash" %}
+# install poetry
+curl -sSL https://install.python-poetry.org | python3 -
+
+# install project deps
+poetry install
+
+# run tests
+poetry run pytest tests
+# or
+poetry run tox -e test-fast
+{% endhighlight %}
+</div>
+</div>
+
+<div class="container">
+  <div class="is-flex is-justify-content-space-between mb-3">
+    <span>{% gh_edit page %}</span>
+    <em><small>{{ "updated" | i18n }} <strong>{{ page.date | niceDate }}</strong></small></em>
+  </div>
+</div>
+
+{% endblock body %}

package/docs/src/_includes/languages_layout.njk

@@ -0,0 +1,11 @@
+---
+layout: layout.njk
+---
+
+<div class="container">
+  {{ content | safe }}
+  <div class="is-flex is-justify-content-space-between">
+    <span>{% gh_edit page %}</span>
+    <em><small>{{ "updated" | i18n }} <strong>{{ page.date | niceDate }}</strong></small></em>
+  </div>
+</div>