Add Djlint and Prettier formatter

.git-blame-ignore-revs

@@ -0,0 +1,5 @@
+# chore: reformat JS and CSS files with Prettier
+748e84f2fa4deb6a96ed09a647d87603b8726977
+
+# chore: reformat HTML templates with djlint
+08f4f09d1fe3338fa5d1a0928705fbad077fcd44

.github/workflows/actions.yml

@@ -6,8 +6,8 @@ on:
     branches: develop
 
 env:
-  DOCKER_BUILDKIT: "1"
-  DOCKER_IMAGE: "registry.revsys.com/boost"
+  DOCKER_BUILDKIT: '1'
+  DOCKER_IMAGE: 'registry.revsys.com/boost'
 
 jobs:
   test:
@@ -20,7 +20,7 @@ jobs:
           POSTGRES_USER: postgres
           POSTGRES_PASSWORD: postgres
           POSTGRES_DB: postgres
-        ports: ["5432:5432"]
+        ports: ['5432:5432']
         # options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
 
       redis:
@@ -39,33 +39,43 @@ jobs:
         with:
           python-version: 3.13
 
-      - uses: actions/cache@v4
+      - id: cache
+        uses: actions/cache@v4
         with:
-          path: ~/.cache/pip
-          key: ${{ runner.os }}-pip-${{ hashFiles('**/base.txt') }}
+          path: ~/.cache/uv
+          key: ${{ runner.os }}-uv-${{ hashFiles('requirements.txt', 'requirements-dev.txt') }}
           restore-keys: |
-            ${{ runner.os }}-pip-
-            ${{ runner.os }}-
+            ${{ runner.os }}-uv-
 
       - name: Install dependencies
         run: |
           python -m pip install --upgrade uv
-          uv pip install -r requirements.txt --system
+          uv pip install -r requirements.txt -r requirements-dev.txt --system
           sudo apt-get install -y ruby ruby-dev build-essential
           sudo gem install asciidoctor
-        if: steps.cache.outputs.cache-hit != 'true'
 
       - name: Test with pytest
         env:
-          DATABASE_URL: "postgres://postgres:postgres@localhost:${{ job.services.postgres.ports[5432] }}/postgres"
-          HYPERKITTY_DATABASE_URL: "postgres://postgres:postgres@localhost:${{ job.services.postgres.ports[5432] }}/lists_production_web"
-          SECRET_KEY: "for-testing-only"
-          REDIS_HOST: "localhost"
-          CI: "true"
+          DATABASE_URL: 'postgres://postgres:postgres@localhost:${{ job.services.postgres.ports[5432] }}/postgres'
+          HYPERKITTY_DATABASE_URL: 'postgres://postgres:postgres@localhost:${{ job.services.postgres.ports[5432] }}/lists_production_web'
+          SECRET_KEY: 'for-testing-only'
+          REDIS_HOST: 'localhost'
+          CI: 'true'
           OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
         run: |
           python -m pytest
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install Node dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Check formatting with Prettier
+        run: yarn prettier:check
+
       - name: Lints with pre-commit
         run: |
           pre-commit run -a

.pre-commit-config.yaml

@@ -5,10 +5,10 @@ exclude: .*migrations\/.*|static\/img\/.*|static\/animations\/.*|static\/js\/boo
 
 repos:
   - repo: https://github.com/adamchainz/django-upgrade
-    rev: "1.27.0"
+    rev: '1.27.0'
     hooks:
       - id: django-upgrade
-        args: [--target-version, "5.2"]   # Replace with Django version
+        args: [--target-version, '5.2'] # Replace with Django version
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v5.0.0
     hooks:
@@ -28,10 +28,11 @@ repos:
     hooks:
       - id: ruff
         args: [--fix]
-  - repo: https://github.com/rtts/djhtml
-    rev: 3.0.7
+  - repo: https://github.com/djlint/djLint
+    rev: v1.36.4
     hooks:
-      - id: djhtml
-        entry: djhtml --tabwidth 2
-        files: .*/templates/.*\.html$
+      - id: djlint-reformat-django
+        files: (^|/)templates/.*\.html$
         alias: autoformat
+      - id: djlint-django
+        files: (^|/)templates/.*\.html$

.prettierignore

@@ -0,0 +1,14 @@
+# Generated CSS output
+static-deploy/css/
+
+# Vendored / bundled JS
+static/js/vendor/
+*.min.js
+*.min.css
+
+# Dependencies
+node_modules/
+
+# Django
+*.py
+*.html

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

README.md

@@ -235,12 +235,54 @@ We use [pre-commit hooks](https://pre-commit.com/) to check code for style, synt
 | --------------- | ----------- |
 | [Black](https://github.com/psf/black) | Formats Python code using the `black` code formatter |
 | [Ruff](https://github.com/charliermarsh/ruff) | Wrapper around `flake8` and `isort`, among other linters |
-| [Djhtml](https://github.com/rtts/djhtml) | Auto-formats Django templates |
+| [djlint](https://www.djlint.com/) | Formats and lints Django HTML templates |
 
 Example commands for running specific hooks:
 
 | Hook | Example |
 | --------------- | --------------- |
 | Black | `pre-commit run black` |
 | Ruff | `pre-commit run ruff` |
-| Djhtml | `pre-commit run djhtml` |
+| djlint | `pre-commit run djlint-reformat-django` |
+
+## Formatting
+
+We use [Prettier](https://prettier.io/) for JS/CSS and [djlint](https://www.djlint.com/) for HTML templates. Both are checked in CI via `yarn format:check`.
+
+| Command | Description |
+| ------- | ----------- |
+| `just format` | Format all JS, CSS, and HTML files |
+| `just format-check` | Check formatting without modifying files |
+| `just prettier` | Format JS and CSS only |
+| `just djlint` | Format HTML templates only |
+
+### djlint quirks
+
+1. **Multi-line Alpine.js attributes:** djlint will mangle multi-line `x-data`, `x-init`, or similar Alpine.js attributes that contain JavaScript objects or functions. Wrap them with `{# djlint:off #}` / `{# djlint:on #}` to preserve formatting:
+
+```html
+<div class="my-component"
+  {# djlint:off #}
+  x-data="{
+    open: false,
+    toggle() { this.open = !this.open }
+  }"
+  {# djlint:on #}
+>
+```
+
+Simple single-line attributes like `x-data="{ show: true }"` do not need wrapping.
+
+2. **`<style>` inside `{% comment %}` blocks:** djlint parses `<style>` tags even inside Django `{% comment %}` blocks, which breaks indentation for the rest of the file. Avoid writing `<style>` in comment blocks — use backticks (e.g. `` `style` ``) or plain text instead.
+
+### Vendor JS
+
+Third-party libraries and generated bundles live in `static/js/vendor/` and are excluded from Prettier. Only custom project JS files at `static/js/*.js` are formatted. When adding a new vendor library or generated bundle, place it in its own subfolder under `static/js/vendor/`.
+
+### Git blame
+
+Bulk formatting commits are listed in `.git-blame-ignore-revs` so they don't show up in `git blame`. To enable this locally:
+
+```bash
+git config blame.ignoreRevsFile .git-blame-ignore-revs
+```

core/tests/content/leaf.html

@@ -48,7 +48,7 @@
 <!-- detect dark or light mode -->
 <script src="/static/js/DetectMode.js"></script>
 <script defer="" src="/static/js/scroll-to-link.js"></script>
-<script defer="" src="/static/js/boost-gecko/main.D1bdgn0u.js"></script>
+<script defer="" src="/static/js/vendor/boost-gecko/main.D1bdgn0u.js"></script>
 <link href="/static/css/styles.css" rel="stylesheet"/>
 <link data-modernizer="boost-legacy-docs-extra-head" href="/static/css/fonts.css" rel="stylesheet"/>
 </link></link><!-- END Manually appending items --></head>

frontend/docsstyles.css

@@ -27,7 +27,6 @@ hr:first-of-type {
   @apply outline-none border-0 bg-transparent;
 }
 
-
 div.section:first-of-type,
 div.spirit-nav:first-of-type,
 div.copyright-footer:first-of-type,
@@ -37,12 +36,13 @@ div.book:first-of-type {
   @apply max-w-7xl px-3 md:px-6 mx-auto;
 }
 
-#avatar>div,
-#avatar>div>img {
+#avatar > div,
+#avatar > div > img {
   @apply rounded;
 }
 
-#userMenu, #guideMenu {
+#userMenu,
+#guideMenu {
   border: 1px solid #d1d5db;
 }
 
@@ -55,7 +55,7 @@ div.book:first-of-type {
   @apply !text-orange;
 }
 
-#avatar>div {
+#avatar > div {
   @apply bg-white text-slate rounded dark:text-white dark:bg-slate;
 }
 
@@ -98,9 +98,9 @@ div.book:first-of-type {
   padding-top: 3.25rem;
 }
 
-
 /* Unframed docs styles */
 
-body:not([class]), body:not([class]) #navbar-container {
+body:not([class]),
+body:not([class]) #navbar-container {
   max-width: 77rem;
 }

frontend/styles.css

@@ -53,18 +53,18 @@
   textarea {
     @apply w-full rounded bg-white dark:bg-charcoal border border-slate;
   }
-  input[type=email] {
+  input[type='email'] {
     @apply w-full rounded bg-white dark:bg-charcoal border border-slate;
   }
-  input[type=checkbox] {
+  input[type='checkbox'] {
     @apply mr-3 rounded bg-white dark:bg-charcoal border border-slate text-orange dark:border-slate;
     @apply cursor-pointer;
   }
-  input[type=file] {
+  input[type='file'] {
     @apply block w-full px-3 py-1 text-base text-slate dark:text-white font-normal bg-clip-padding border border-solid border-slate rounded transition ease-in-out my-2;
   }
-  #signup_form input[type=email],
-  #signup_form input[type=password]{
+  #signup_form input[type='email'],
+  #signup_form input[type='password'] {
     @apply rounded bg-white dark:bg-charcoal text-slate dark:text-white border border-slate w-full;
   }
   #authpages #footerSignup {
@@ -83,7 +83,10 @@
 
   /* use both .link and .link-force on an icon in order to bypass the following style and use all styles from .link */
   i:not(.link-force) {
-    i.fa, i.fab, i.fa-brands, i.fas {
+    i.fa,
+    i.fab,
+    i.fa-brands,
+    i.fas {
       @apply text-slate dark:text-white;
     }
   }
@@ -148,14 +151,22 @@ html:has(#docsiframe):has(.version_alert) {
 }
 
 html:has(#docsiframe) body {
-  padding-top: calc(var(--header-height, 41px) + var(--version-alert-height, 0px));
+  padding-top: calc(
+    var(--header-height, 41px) + var(--version-alert-height, 0px)
+  );
 }
 
 #docsiframe {
   @apply w-full mx-0 my-auto overflow-hidden p-0 mt-[1px];
-  height: calc(100vh - var(--header-height, 41px) - var(--version-alert-height, 0px)); /* Fallback for older browsers*/
-  height: calc(100svh - var(--header-height, 41px) - var(--version-alert-height, 0px));
-  max-height: calc(100svh - var(--header-height, 41px) - var(--version-alert-height, 0px));
+  height: calc(
+    100vh - var(--header-height, 41px) - var(--version-alert-height, 0px)
+  ); /* Fallback for older browsers*/
+  height: calc(
+    100svh - var(--header-height, 41px) - var(--version-alert-height, 0px)
+  );
+  max-height: calc(
+    100svh - var(--header-height, 41px) - var(--version-alert-height, 0px)
+  );
 }
 
 .version_alert {