Context
The repository runs its git hooks with prek (see .pre-commit-config.yaml, added in #249). The hooks cover Python (ruff, django-upgrade, Django checks, missing migrations) and generic files, but nothing checks the Django templates.
djLint is a linter and formatter for HTML templates with template syntax (Django profile). It was evaluated in #249 and left out because it does not pass on the current templates. This issue tracks fixing the templates and then enabling djLint as a prek hook.
Scope
13 templates:
pythonie/core/templates/404.html
pythonie/core/templates/500.html
pythonie/core/templates/base.html
pythonie/core/templates/footer.html
pythonie/core/templates/header.html
pythonie/core/templates/navbar.html
pythonie/core/templates/navbar_tree.html
pythonie/core/templates/core/home_page.html
pythonie/core/templates/core/meetup.html
pythonie/core/templates/core/segment.html
pythonie/core/templates/core/simple_page.html
pythonie/core/templates/core/sponsor.html
pythonie/templates/wagtailembeds/embed_frontend.html
Current state (djLint 1.46.2, master at 90cf69d)
uvx --from djlint==1.46.2 djlint pythonie --lint --profile=django reports 12 errors:
| File |
Line |
Rule |
Message |
core/templates/500.html |
5 |
H005 |
<html> should have a non-empty lang attribute |
core/templates/base.html |
8 |
H005 |
<html> should have a non-empty lang attribute |
core/templates/base.html |
9, 45, 63 |
H014 |
Extra blank lines |
core/templates/base.html |
43, 44, 78 |
H024 |
Omit type on scripts and styles |
core/templates/core/meetup.html |
5 |
H025 |
Tag seems to be an orphan (<div class="col-md-12">) |
core/templates/header.html |
8 |
H013 |
<img> should have an alt attribute |
core/templates/navbar.html |
21, 22 |
T001 |
Tags should be wrapped in whitespace ({%include ...%}, {%endfor%}) |
djlint pythonie --check --profile=django reports that all 13 files would be reformatted (about 216 changed lines in total).
Real markup bugs in core/templates/core/meetup.html
The H025 warning points at actual bugs in the sponsor block of the meetup list:
- Line 24:
<div class="col-md-8">has a stray backtick, so the browser parses a brokenclassattribute and thecol-md-8` column class is not applied.
<div class="name"> (line 25) is never closed: 5 <div> are opened inside the loop body (col-md-12, sponsor-list, sponsor, col-md-8, name) and only 4 are closed, so the browser closes the elements implicitly and the layout of the sponsor list depends on error recovery.
Tasks
Split the work into separate commits so the review stays easy:
1. Fix the lint errors (fix(templates): ...)
meetup.html: remove the stray backtick and close <div class="name"> right after the sponsor name block (before the {% if sponsor.note %} caption, or after it if the caption belongs to the name block; check the rendering).base.html and 500.html: add lang="en" to <html>. In 500.html the <html> tag sits inside IE conditional comments (<!--[if ...]>); the non-IE branch (line 5) is the one djLint flags, add lang="en" to every branch for consistency (or drop the IE conditional comments, IE is no longer supported by Bootstrap/the site).header.html: add alt="Python Ireland" to the logo <img>.base.html: drop type="text/javascript" on the three <script> tags (lines 43, 44, 78). Line 78 is inside {% compress js %}: django-compressor handles scripts without a type attribute as JavaScript, but verify it by rendering a page with COMPRESS_ENABLED=True (or running manage.py compress if offline compression is used) and checking that theme-toggle.js is still bundled.navbar.html: {%include "navbar_tree.html" %} becomes {% include "navbar_tree.html" %}, {%endfor%} becomes {% endfor %}.base.html: remove the extra blank lines.
After this commit, djlint pythonie --lint --profile=django must report 0 errors.
2. Reformat the templates (style(templates): ...), optional
Run djlint pythonie --reformat --profile=django and commit the result on its own. It changes whitespace and indentation only, but djLint also reflows some inline content (for example pythonie/templates/wagtailembeds/embed_frontend.html is collapsed to a single line), so check the rendered pages visually (home page, a simple page, the navbar with nested pages, the meetup list with sponsors, the 404 page).
If the formatter output is not acceptable on some templates, keep only the linter (task 3 without djlint-reformat-django) and mention it in the PR.
3. Configure djLint and enable the prek hook (chore(dev): ...)
-
Add the configuration to pyproject.toml so the CLI, the hook and editors share it:
[tool.djlint]
profile = "django"
# ignore = "H030,H031" # only if some rules are deliberately skipped, with a comment explaining why
-
Add the hooks to .pre-commit-config.yaml, pinned on a tag (latest at the time of writing: v1.46.2, check with gh api repos/djlint/djLint/tags --jq '.[0].name'):
- repo: https://github.com/djlint/djLint
rev: v1.46.2
hooks:
- id: djlint-reformat-django # only if task 2 is done
- id: djlint-djangodjLint only targets .html files by default. The vendored assets under pythonie/core/static/{css,fonts,js} are already excluded by the global exclude of the config.
-
Nothing to change in CI: the prek job in .github/workflows/test.yml runs every hook with --all-files. Renovate already updates the hook revisions (the pre-commit manager is enabled in renovate.json, grouped in the "pre-commit hooks" PR).
-
Document djLint in the list of hooks in CONTRIBUTING.md (section "Git Hooks (prek)") and in CLAUDE.md (section "Git Hooks (prek)").
Acceptance criteria
Out of scope
- Redesigning the templates or upgrading Bootstrap.
base.html loads Typekit from //use.typekit.net/qgj1xay.js. Whether this kit still exists is worth checking, but in a separate issue.
Context
The repository runs its git hooks with prek (see
.pre-commit-config.yaml, added in #249). The hooks cover Python (ruff, django-upgrade, Django checks, missing migrations) and generic files, but nothing checks the Django templates.djLint is a linter and formatter for HTML templates with template syntax (Django profile). It was evaluated in #249 and left out because it does not pass on the current templates. This issue tracks fixing the templates and then enabling djLint as a prek hook.
Scope
13 templates:
Current state (djLint 1.46.2, master at 90cf69d)
uvx --from djlint==1.46.2 djlint pythonie --lint --profile=djangoreports 12 errors:core/templates/500.html<html>should have a non-emptylangattributecore/templates/base.html<html>should have a non-emptylangattributecore/templates/base.htmlcore/templates/base.htmltypeon scripts and stylescore/templates/core/meetup.html<div class="col-md-12">)core/templates/header.html<img>should have analtattributecore/templates/navbar.html{%include ...%},{%endfor%})djlint pythonie --check --profile=djangoreports that all 13 files would be reformatted (about 216 changed lines in total).Real markup bugs in
core/templates/core/meetup.htmlThe H025 warning points at actual bugs in the sponsor block of the meetup list:
<div class="col-md-8">has a stray backtick, so the browser parses a brokenclassattribute and thecol-md-8` column class is not applied.<div class="name">(line 25) is never closed: 5<div>are opened inside the loop body (col-md-12,sponsor-list,sponsor,col-md-8,name) and only 4 are closed, so the browser closes the elements implicitly and the layout of the sponsor list depends on error recovery.Tasks
Split the work into separate commits so the review stays easy:
1. Fix the lint errors (
fix(templates): ...)meetup.html: remove the stray backtick and close<div class="name">right after the sponsor name block (before the{% if sponsor.note %}caption, or after it if the caption belongs to the name block; check the rendering).base.htmland500.html: addlang="en"to<html>. In500.htmlthe<html>tag sits inside IE conditional comments (<!--[if ...]>); the non-IE branch (line 5) is the one djLint flags, addlang="en"to every branch for consistency (or drop the IE conditional comments, IE is no longer supported by Bootstrap/the site).header.html: addalt="Python Ireland"to the logo<img>.base.html: droptype="text/javascript"on the three<script>tags (lines 43, 44, 78). Line 78 is inside{% compress js %}: django-compressor handles scripts without atypeattribute as JavaScript, but verify it by rendering a page withCOMPRESS_ENABLED=True(or runningmanage.py compressif offline compression is used) and checking thattheme-toggle.jsis still bundled.navbar.html:{%include "navbar_tree.html" %}becomes{% include "navbar_tree.html" %},{%endfor%}becomes{% endfor %}.base.html: remove the extra blank lines.After this commit,
djlint pythonie --lint --profile=djangomust report 0 errors.2. Reformat the templates (
style(templates): ...), optionalRun
djlint pythonie --reformat --profile=djangoand commit the result on its own. It changes whitespace and indentation only, but djLint also reflows some inline content (for examplepythonie/templates/wagtailembeds/embed_frontend.htmlis collapsed to a single line), so check the rendered pages visually (home page, a simple page, the navbar with nested pages, the meetup list with sponsors, the 404 page).If the formatter output is not acceptable on some templates, keep only the linter (task 3 without
djlint-reformat-django) and mention it in the PR.3. Configure djLint and enable the prek hook (
chore(dev): ...)Add the configuration to
pyproject.tomlso the CLI, the hook and editors share it:Add the hooks to
.pre-commit-config.yaml, pinned on a tag (latest at the time of writing:v1.46.2, check withgh api repos/djlint/djLint/tags --jq '.[0].name'):djLint only targets
.htmlfiles by default. The vendored assets underpythonie/core/static/{css,fonts,js}are already excluded by the globalexcludeof the config.Nothing to change in CI: the
prekjob in.github/workflows/test.ymlruns every hook with--all-files. Renovate already updates the hook revisions (thepre-commitmanager is enabled inrenovate.json, grouped in the "pre-commit hooks" PR).Document djLint in the list of hooks in
CONTRIBUTING.md(section "Git Hooks (prek)") and inCLAUDE.md(section "Git Hooks (prek)").Acceptance criteria
prek run --all-filespasses, djLint hooks includeddjlint pythonie --lint --profile=djangoreports 0 errorsmeetup.htmlare fixed)theme-toggle.jsis still loaded and bundled by django-compressoruv run python pythonie/manage.py test pythonie --settings=pythonie.settings.testspasses (run it withenv -u DATABASE_URLif aDATABASE_URLis exported in the shell, otherwise the test settings use that database)prekandtestjobs are greenOut of scope
base.htmlloads Typekit from//use.typekit.net/qgj1xay.js. Whether this kit still exists is worth checking, but in a separate issue.