410 enforce a html formatter and linter

.djlintrc

@@ -0,0 +1,26 @@
+{
+  "indent": 2,
+  "preserve_blank_lines": false,
+  "ignore_inline_styles": true,
+  "single_quote": true,
+  "ignore":"H022,H021,H006,H013",
+  "max_line_length": 80,
+  "newline_after_block": true,
+  "strip_spaces": true,
+  "require_single_line_if_statement": true,
+  "require_single_line_for": true,
+  "preserve_attribute_whitespace": true,
+  "self_closing_tags": true,
+  "custom_attributes": [
+    "hx-get",
+    "hx-post",
+    "hx-put",
+    "hx-delete",
+    "hx-target",
+    "hx-swap",
+    "hx-trigger",
+    "x-data",
+    "x-bind",
+    "x-on"
+  ]
+}

.gitignore

@@ -9,9 +9,11 @@ media/submissions/csv/*
 __pycache__
 .DS_Store
 /.cache
-.vscode/settings.json
 *.code-workspace
-.vscode
+.vscode/*
+!/.vscode/settings.json
+!/.vscode/launch.json
+!/.vscode/extensions.json
 
 node_modules
 

.vscode/extensions.json

@@ -0,0 +1,16 @@
+{
+  "recommendations": [
+    // Recommended extensions...
+    "streetsidesoftware.code-spell-checker", // Source code spell checker
+    "ms-python.black-formatter", // Python formatter
+    "batisteo.vscode-django", // Django support
+    "junstyle.vscode-django-support", // Django Template Support Intellisense
+    "monosans.djlint", // Linting Support for Django (.html)
+    "otovo-oss.htmx-tags", // htmx Tag Support (Auto-completion)
+    "dbaeumer.vscode-eslint", // ESLint for JS Linting
+    "bradlc.vscode-tailwindcss", // TailwindCSS Intellisense
+  ],
+  "unwantedRecommendations": [
+    // Discouraged extensions...
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,48 @@
+{
+  "python.languageServer": "Pylance",
+  "python.analysis.typeCheckingMode": "off",
+  "files.associations": {
+    "**/templates/**/*.html": "django-html",
+  },
+  "breadcrumbs.enabled": true, // Enable breadcrumbs for file navigation
+  "explorer.autoReveal": true, // Automatically reveal the active file in the explorer
+  "[django-html]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "monosans.djlint",
+    // Indentation and formatting
+    "editor.tabSize": 2, // Use 2 spaces for tabs
+    "editor.insertSpaces": true, // Converts tabs to spaces
+    "editor.trimAutoWhitespace": true, // Removes unnecessary whitespace
+    "editor.formatOnType": true, // Automatically formats code while typing
+    "editor.autoIndent": "full", // Applies auto-indentation in Django HTML files
+    "editor.folding": true, // Enable folding for better navigation
+    "editor.foldingStrategy": "indentation",
+    "files.trimTrailingWhitespace": true, // Remove trailing whitespace on save
+    "files.insertFinalNewline": true, // Ensure files end with a newline
+    // Brackets and pairs
+    "editor.guides.indentation": true, // Shows vertical indentation guides
+    "editor.guides.bracketPairsHorizontal": true, // Horizontal guides for bracket pairs
+    "editor.autoClosingBrackets": "always", // Automatically close brackets
+    "editor.autoClosingQuotes": "always", // Automatically close quotes
+    // Word wrapping
+    "editor.wordWrap": "on", // Enables word wrapping
+    "editor.wordWrapColumn": 80, // Wraps lines at 80 characters
+    // Cursor and selection
+    "editor.cursorSmoothCaretAnimation": "on", // Smooth cursor movement
+    "editor.cursorBlinking": "expand", // Makes the cursor more noticeable
+    "editor.selectionHighlight": true, // Highlights similar selections
+    "editor.occurrencesHighlight": "singleFile", // Highlights other occurrences of a word
+    // Scrolling
+    "editor.minimap.enabled": true, // Enable the minimap on the right
+    "editor.scrollBeyondLastLine": false, // Prevent excessive scrolling past the end
+    "editor.smoothScrolling": true, // Smooth scrolling for a better user experience
+    // Code actions
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": "always", // Organize imports automatically
+      "source.fixAll": "always" // Fix simple issues automatically
+    },
+    "editor.linkedEditing": true,
+    "editor.guides.bracketPairs": true,
+  },
+  "djlint.configuration": ".djlintrc",
+}

documentation/docs/developer/code-style.md

@@ -9,7 +9,8 @@ We recommend the use of the popular [VSCode](https://code.visualstudio.com/) edi
 
 The below instructions regarding linting and formatting assume the use of VSCode
 
-## Linter
+## Python (.py) files
+### Linter
 
 We use the PyLint linter. It promotes consistency if all of the team use the same linting and formatting rules.
 
@@ -24,9 +25,9 @@ You may need to install the `pylint_django` plugin and add `--load-plugins=pylin
 
 - In `Python > Linting Pylint Args` add `--load-plugins=pylint_django`
 
-## Formatter
+### Formatter
 
-## Imports
+### Imports
 
 Python imports should be categorised:
 
@@ -43,3 +44,15 @@ In addition, both packages and individual functions/classes should be listed alp
 All of the above measures help to prevent duplicates, ensures tidiness and maintainability, and lets us see easily which of our imports are most reliable and trusted.
 
 Further details on RCPCH code style and preferences are found in the [RCPCH Playbook](https://playbook.rcpch.tech/)
+
+## Django Template Files (templates/**/*/.html)
+
+### Linter + Formatter
+We utilise [djlint](https://djlint.com/) for both formatting and linting of template DJANGO files. We recommend the development environment has the [djlint vscode extension](https://marketplace.visualstudio.com/items?itemName=monosans.djlint) installed.
+
+#### Running djlint
+To lint:
+`djlint ./project/npda/templates/* --configuration .djlintrc --lint`
+To reformat (automatically fix) files:
+`djlint ./project/npda/templates/* --configuration .djlintrc --reformat`
+

project/npda/templates/base.html

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
-<html class="scroll-smooth">
+<html class="scroll-smooth" lang="en-GB">
   {% load static %}
-
   <head>
     <meta charset="utf-8" />
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no" />
-    <meta name="description" content="National Paediatric Diabetes Audit Platform." />
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no" />
+    <meta name="description"
+          content="National Paediatric Diabetes Audit Platform." />
     <meta name="keywords" content="National Paediatric Diabetes Audit Platform" />
     <meta name="author" content="RCPCH" />
     <meta name="theme-color" content="#ffffff" />
@@ -15,37 +16,32 @@
     <link rel="icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+          rel="stylesheet" />
     <link href="https://fonts.cdnfonts.com/css/arial-2" rel="stylesheet" />
-    <script src="https://unpkg.com/htmx.org@1.9.11/dist/htmx.js" integrity="sha384-l9bYT9SL4CAW0Hl7pAOpfRc18mys1b0wK4U8UtGnWOxPVbVMgrOdB+jyz/WY8Jue" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/htmx.org@1.9.11/dist/htmx.js"
+            integrity="sha384-l9bYT9SL4CAW0Hl7pAOpfRc18mys1b0wK4U8UtGnWOxPVbVMgrOdB+jyz/WY8Jue"
+            crossorigin="anonymous"></script>
     <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
-
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/fontawesome.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/solid.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/brands.js"></script>
-
     <link href="{% static 'tailwind.css' %}" rel="stylesheet" />
     <link rel="stylesheet" href="{% static 'css/styles.css' %}" />
   </head>
-
   <body id="root">
     {% csrf_token %}
-
     {% block nav %}
       {% include 'nav.html' %}
     {% endblock %}
-
-  <div>
-    {% block content %}{% endblock %}
-  </div>
-
-  {% include 'footer.html' %}
-
-  {% block toasts %}
-  {% include 'toasts.html' %}
-  {% endblock %}
-</body>
-
+    <div>
+      {% block content %}{% endblock %}
+    </div>
+    {% include 'footer.html' %}
+    {% block toasts %}
+      {% include 'toasts.html' %}
+    {% endblock %}
+  </body>
 </html>
 <script>
   window.addEventListener('DOMContentLoaded', function() {
@@ -56,4 +52,4 @@
     document.body.setAttribute('data-theme', savedTheme);
     localStorage.setItem('theme', savedTheme);
 });
-</script>
+</script>

project/npda/templates/dashboard.html

@@ -2,27 +2,36 @@
 {% load static %}
 {% load npda_tags %}
 {% block content %}
-{% url 'dashboard' as hx_get %}
-
+  {% url 'dashboard' as hx_get %}
   <section class="bg-rcpch_dark_blue font-montserrat">
-    <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
-      <h1 class="mb-4 text-4xl font-extrabold font-arial tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl text-white">National Paediatric Diabetes Audit</h1>
-      <p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">
+    <div class="mx-auto max-w-screen-xl px-4 py-8 text-center lg:px-12 lg:py-16">
+      <h1 class="font-arial mb-4 text-4xl font-extrabold tracking-tight leading-none text-white text-gray-900 lg:text-6xl md:text-5xl">
+        National Paediatric Diabetes Audit
+      </h1>
+      <p class="mb-8 text-lg font-normal text-white lg:text-xl sm:px-16 xl:px-48">
         We are now accepting data for the 2023-24 audit year. <b>{% text_for_data_submission can_upload_csv can_complete_questionnaire %}</b>
         For more information check out our user guide.
       </p>
-      <div class="flex flex-col mb-8 lg:mb-16 space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
-        <a href="http://0.0.0.0:8007/" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 focus:ring-primary-900">
-          Learn more<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+      <div class="flex flex-col mb-8 space-y-4 lg:mb-16 sm:flex-row sm:justify-center sm:space-x-4 sm:space-y-0">
+        <a href="http://0.0.0.0:8007/"
+           class="bg-primary-700 inline-flex justify-center items-center px-5 py-3 text-base font-medium text-center text-white rounded-lg focus:ring-primary-300 focus:ring-primary-900 focus:ring-4 hover:bg-primary-800"><!-- noqa -->
+          Learn more
+          <svg class="-mr-1 w-5 h-5 ml-2"
+               fill="currentColor"
+               viewBox="0 0 20 20"
+               xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd">
+            </path>
           </svg>
         </a>
       </div>
     </div>
   </section>
-
-  <section class="mb-5 container-mx-auto flex items-center justify-center"  hx-get="{{ hx_get }}" hx-trigger="dashboard from:body" hx-target="#dashboard">
-    <div id="dashboard" class="max-h-screen w-full mt-5 mx-2">
+  <section class="container-mx-auto flex justify-center items-center mb-5"
+           hx-get="{{ hx_get }}"
+           hx-trigger="dashboard from:body"
+           hx-target="#dashboard">
+    <div id="dashboard" class="w-full max-h-screen mx-2 mt-5">
       {% include 'partials/kpi_table.html' with kpi_results=kpi_results pdu=pdu aggregation_level=aggregation_level %}
     </div>
   </section>

project/npda/templates/errors/400.html

@@ -1,13 +1,9 @@
 {% extends "errors/error_base.html" %}
-
-{% block error_number %}
-400
-{% endblock %}
-
+{% block error_number %}400{% endblock %}
 {% block error_msg %}
-<p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">
-  Sorry, something went wrong on the page.
-  <br />
-  Please try again and contact the NPDA team if the problem persists.
-</p>
-{% endblock %}
+  <p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">
+    Sorry, something went wrong on the page.
+    <br />
+    Please try again and contact the NPDA team if the problem persists.
+  </p>
+{% endblock %}

project/npda/templates/errors/403.html

@@ -1,13 +1,9 @@
 {% extends "errors/error_base.html" %}
-
-{% block error_number %}
-403
-{% endblock %}
-
+{% block error_number %}403{% endblock %}
 {% block error_msg %}
-<p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">
-  You don't have permission to view this page.
-  <br />
-  Please contact the NPDA team if you require access.
-</p>
-{% endblock %}
+  <p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">
+    You don't have permission to view this page.
+    <br />
+    Please contact the NPDA team if you require access.
+  </p>
+{% endblock %}

project/npda/templates/errors/404.html

@@ -1,13 +1,9 @@
 {% extends "errors/error_base.html" %}
-
-{% block error_number %}
-404
-{% endblock %}
-
+{% block error_number %}404{% endblock %}
 {% block error_msg %}
-<p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">
-  The page you requested does not exist or the link is broken.
-  <br />
-  Please check the web address and try again.
-</p>
-{% endblock %}
+  <p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">
+    The page you requested does not exist or the link is broken.
+    <br />
+    Please check the web address and try again.
+  </p>
+{% endblock %}

project/npda/templates/errors/500.html

@@ -1,13 +1,9 @@
 {% extends "errors/error_base.html" %}
-
-{% block error_number %}
-500
-{% endblock %}
-
+{% block error_number %}500{% endblock %}
 {% block error_msg %}
-<p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">
-  Sorry, something went wrong on the server for this page.
-  <br />
-  Please try again and contact the NPDA team if the problem persists.
-</p>
-{% endblock %}
+  <p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">
+    Sorry, something went wrong on the server for this page.
+    <br />
+    Please try again and contact the NPDA team if the problem persists.
+  </p>
+{% endblock %}

project/npda/templates/errors/csrf_fail.html

@@ -1,14 +1,13 @@
 {% extends "errors/error_base.html" %}
-
 {% block error_number %}
-CSRF Failure
-{% endblock %}
-
+  CSRF Failure
+{% endblock error_number %}
 {% block error_msg %}
-<p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">
-  Sorry but your login session is invalid or out of date
-  <br />
-  Please log out, log in again and retry your request.
-  <br />
-  If the problem persists, please report to the NPDA team quoting "CSRF token validation error".
-{% endblock %}
+  <p class="mb-8 text-lg font-normal text-white lg:text-xl sm:px-16 xl:px-48">
+    Sorry but your login session is invalid or out of date
+    <br />
+    Please log out, log in again and retry your request.
+    <br />
+    If the problem persists, please report to the NPDA team quoting "CSRF token validation error".
+  </p>
+{% endblock error_msg %}