Add linting of CSS and HTML files using MegaLinter

.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+# Reformat html files using djLint @johannaengland 12/09/2024
+c53dafbd8632f101d960a67d950245e4bb42f21e

.github/workflows/megalinter.yml

@@ -0,0 +1,44 @@
+# MegaLinter GitHub Action configuration file
+# More info at https://megalinter.io
+name: MegaLinter
+on:
+  push:
+    branches: main
+  pull_request:
+
+jobs:
+  megalinter:
+    name: MegaLinter
+    runs-on: ubuntu-latest
+    permissions:
+      # Give the linter write permission to comment on PRs (if PR is not from fork)
+      issues: write
+      pull-requests: write
+    steps:
+      # Git Checkout
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          fetch-depth: 0
+      # MegaLinter
+      - name: MegaLinter
+        id: ml
+        # You can override MegaLinter flavor used to have faster performances
+        # More info at https://megalinter.io/flavors/
+        uses: oxsecurity/megalinter/flavors/python@v8
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # Validate whole codebase on pushes and only changes on pull requests
+          # VALIDATE_ALL_CODEBASE: ${{ github.event_name == 'push'}}
+          VALIDATE_ALL_CODEBASE: true
+
+      # Upload MegaLinter artifacts
+      - name: Archive production artifacts
+        if: success() || failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: MegaLinter reports
+          path: |
+            megalinter-reports
+            mega-linter.log

.gitignore

@@ -18,4 +18,7 @@ src/argus_htmx/tailwindtheme/tailwindcss
 
 !.gitattributes
 !.gitignore
+!.git-blame-ignore-revs
 !.pre-commit-config.yaml
+!.mega-linter.yml
+!.github

.mega-linter.yml

@@ -0,0 +1,15 @@
+# All available variables are described in documentation
+# https://megalinter.io/configuration/
+
+LINTER_RULES_PATH: .
+
+ENABLE_LINTERS:
+  - HTML_DJLINT
+  - CSS_STYLELINT
+
+# Make workflow fail even on non blocking errors
+FORMATTERS_DISABLE_ERRORS: false
+
+HTML_DJLINT_ARGUMENTS: "--lint --check"
+
+CSS_STYLELINT_CONFIG_FILE: stylelint.config.js

.pre-commit-config.yaml

@@ -13,3 +13,14 @@ repos:
         name: "Flake8: critical"
         args: ['--count', '--select=E9,F63,F7,F82', '--show-source', '--statistics']
         types: [file, python]
+
+-   repo: https://github.com/djlint/djLint
+    rev: v1.35.2
+    hooks:
+    -   id: djlint-reformat
+    -   id: djlint
+
+-   repo: https://github.com/thibaudcolas/pre-commit-stylelint
+    rev: v14.4.0
+    hooks:
+    -   id: stylelint

src/argus_htmx/templates/htmx/_base_form_modal.html

@@ -1,12 +1,13 @@
-<button class="btn"
-        onclick="htmx.find('#{{ dialog_id }}').showModal()"
->
-    {{ button_title }}
-</button>
+<button class="btn" onclick="htmx.find('#{{ dialog_id }}').showModal()">{{ button_title }}</button>
 <dialog id="{{ dialog_id }}" class="modal">
     <div class="modal-box card card-compact shadow-xl">
-        <div class="divider divider-start"><h3 class="card-title">{{ header }}</h3></div>
-        <form id="{{ dialog_id }}-form" class="card-body" method="post" action="{{ endpoint }}">
+        <div class="divider divider-start">
+            <h3 class="card-title">{{ header }}</h3>
+        </div>
+        <form id="{{ dialog_id }}-form"
+              class="card-body"
+              method="post"
+              action="{{ endpoint }}">
             {% csrf_token %}
             <fieldset class="menu menu-vertical gap-4">
                 <legend class="antialiased text-base font-bold py-2">{{ explanation }}</legend>
@@ -17,8 +18,7 @@
         <div class="modal-action card-actions">
             <form method="dialog" class="w-full">
                 <div class="divider divider-end">
-                    <button type="submit" form="{{ dialog_id }}-form"
-                            class="btn btn-primary">{{ submit_text }}</button>
+                    <button type="submit" form="{{ dialog_id }}-form" class="btn btn-primary">{{ submit_text }}</button>
                     <button class="btn">{{ cancel_text }}</button>
                 </div>
             </form>

src/argus_htmx/templates/htmx/base.html

@@ -1,6 +1,5 @@
 {% extends "htmx_base.html" %}
 {% load static %}
-
 {% block header %}
     <header class="bg-neutral text-neutral-content">
         <nav class="navbar">
@@ -16,9 +15,15 @@
             <div class="navbar-center flex">
                 <ul class="menu menu-horizontal px-1">
                     {% block navlinks %}
-                        <li><a href="{% url 'htmx:incident-list' %}">Incidents</a></li>
-                        <li><a href="{% url 'htmx:timeslot-placeholder' %}">Timeslots</a></li>
-                        <li><a href="{% url 'htmx:notificationprofile-placeholder' %}">Profiles</a></li>
+                        <li>
+                            <a href="{% url 'htmx:incident-list' %}">Incidents</a>
+                        </li>
+                        <li>
+                            <a href="{% url 'htmx:timeslot-placeholder' %}">Timeslots</a>
+                        </li>
+                        <li>
+                            <a href="{% url 'htmx:notificationprofile-placeholder' %}">Profiles</a>
+                        </li>
                     {% endblock navlinks %}
                 </ul>
             </div>
@@ -38,9 +43,7 @@
                                     Logged in as: <span class="text-info">{{ request.user }}</span>
                                     <div class="divider divider-secondary my-0"></div>
                                 </li>
-                                <li>
-                                    {% include 'htmx/themes/theme_dropdown.html' %}
-                                </li>
+                                <li>{% include 'htmx/themes/theme_dropdown.html' %}</li>
                                 <li>
                                     <form class="flex" action="{% url "htmx:logout" %}" method="POST">
                                         {% csrf_token %}

src/argus_htmx/templates/htmx/incidents/_incident_ack.html

@@ -1,4 +1,7 @@
 <a class="link" href="{% url 'htmx:incident-add-ack' pk=incident.pk %}">
-	{% if incident.acked %}<span class="badge badge-primary">Acked</span>
-	{% else %}<span class="badge badge-accent">Unacked</span>{% endif %}
+    {% if incident.acked %}
+        <span class="badge badge-primary">Acked</span>
+    {% else %}
+        <span class="badge badge-accent">Unacked</span>
+    {% endif %}
 </a>

src/argus_htmx/templates/htmx/incidents/_incident_acknowledge_modal.html

@@ -1,11 +1,19 @@
 {% extends 'htmx/_base_form_modal.html' %}
 {% block dialogform %}
-    <label class="indicator input input-bordered flex items-center gap-2 w-full">Message
+    <label class="indicator input input-bordered flex items-center gap-2 w-full">
+        Message
         <span class="indicator-item indicator-top indicator-start badge border-none mask mask-circle text-warning text-base">＊</span>
-        <input name="description" type="text" placeholder="Acknowledgment message" required
-               class="appearance-none grow border-none"/>
+        <input name="description"
+               type="text"
+               placeholder="Acknowledgment message"
+               required
+               class="appearance-none grow border-none" />
     </label>
-    <label class="input input-bordered flex items-center gap-2 w-full">Expiration
-        <input name="expiration" type="date" placeholder="Expiry date" class="appearance-none grow border-none"/>
+    <label class="input input-bordered flex items-center gap-2 w-full">
+        Expiration
+        <input name="expiration"
+               type="date"
+               placeholder="Expiry date"
+               class="appearance-none grow border-none" />
     </label>
 {% endblock dialogform %}

src/argus_htmx/templates/htmx/incidents/_incident_checkbox.html

@@ -1,7 +1,6 @@
 <label for="select-incident-{{ incident.pk }}" class="sr-only">Select all visible</label>
-<input id="select-incident-{{ incident.pk }}" 
-       hx-preserve 
-       type="checkbox" 
+<input id="select-incident-{{ incident.pk }}"
+       hx-preserve
+       type="checkbox"
        class="row-select checkbox checkbox-sm checkbox-accent border"
-       hx-on:change="event.target.checked ? htmx.find('.tab-select').checked = event.target.checked : null;"
->
+       hx-on:change="event.target.checked ? htmx.find('.tab-select').checked = event.target.checked : null;">

src/argus_htmx/templates/htmx/incidents/_incident_close_modal.html

@@ -1,6 +1,10 @@
 {% extends 'htmx/_base_form_modal.html' %}
 {% block dialogform %}
-<label>Reason for closing
-  <input name="description" type="text" placeholder="Closing message" class="input input-bordered w-full max-w-xs" />
-</label>
+    <label>
+        Reason for closing
+        <input name="description"
+               type="text"
+               placeholder="Closing message"
+               class="input input-bordered w-full max-w-xs" />
+    </label>
 {% endblock dialogform %}

src/argus_htmx/templates/htmx/incidents/_incident_combined_status.html

@@ -1,6 +1,12 @@
-{% if incident.open %}<span class="badge badge-primary">Open</span>
-{% else %}<span class="badge badge-accent">Closed</span>{% endif %}
+{% if incident.open %}
+    <span class="badge badge-primary">Open</span>
+{% else %}
+    <span class="badge badge-accent">Closed</span>
+{% endif %}
 <a class="link" href="{% url 'htmx:incident-add-ack' pk=incident.pk %}">
-{% if incident.acked %}<span class="badge badge-primary">Acked</span>
-{% else %}<span class="badge badge-accent">Unacked</span>{% endif %}
+    {% if incident.acked %}
+        <span class="badge badge-primary">Acked</span>
+    {% else %}
+        <span class="badge badge-accent">Unacked</span>
+    {% endif %}
 </a>

src/argus_htmx/templates/htmx/incidents/_incident_filterbox.html

@@ -1,13 +1,11 @@
 {% load widget_tweaks %}
 <form>
-    <fieldset
-            hx-get="{% url 'htmx:incident-list' %}"
-            hx-include="this"
-            hx-trigger="change delay:100ms"
-            hx-target="#table"
-            hx-swap="outerHTML"
-            hx-push-url="true"
-    >
+    <fieldset hx-get="{% url 'htmx:incident-list' %}"
+              hx-include="this"
+              hx-trigger="change delay:100ms"
+              hx-target="#table"
+              hx-swap="outerHTML"
+              hx-push-url="true">
         <legend class="sr-only">Filter incidents</legend>
         <ul class="menu menu-horizontal menu-sm flex items-center gap-2 py-1.5">
             {% for field in filter_form %}
@@ -20,9 +18,7 @@
                             <div>
                                 {{ field|add_class:"range range-primary range-xs" }}
                                 <div class="flex w-full justify-between px-2 text-xs">
-                                    {% for tick in "12345" %}
-                                    <span>{{ tick }}</span>
-                                    {% endfor %}
+                                    {% for tick in "12345" %}<span>{{ tick }}</span>{% endfor %}
                                 </div>
                             </div>
                         {% elif field|field_type == "choicefield" %}
@@ -35,11 +31,8 @@
                     </label>
                 </li>
             {% empty %}
-                <li>
-                    No filter fields configured
-                </li>
+                <li>No filter fields configured</li>
             {% endfor %}
         </ul>
-
     </fieldset>
 </form>

src/argus_htmx/templates/htmx/incidents/_incident_reopen_modal.html

@@ -1,6 +1,10 @@
 {% extends 'htmx/_base_form_modal.html' %}
 {% block dialogform %}
-<label>Reason for reopening
-  <input name="description" type="text" placeholder="Reopening message" class="input input-bordered w-full max-w-xs" />
-</label>
+    <label>
+        Reason for reopening
+        <input name="description"
+               type="text"
+               placeholder="Reopening message"
+               class="input input-bordered w-full max-w-xs" />
+    </label>
 {% endblock dialogform %}

src/argus_htmx/templates/htmx/incidents/_incident_row.html

@@ -1,21 +1,21 @@
-  <li>
-	  HTMX-app
-	  {% block incident_pk %}
-	  {% include "htmx/incidents/_incident_pk.html" %}
-	  {% endblock %}
-	  {% block status %}
-	  {% include "htmx/incidents/_incident_status.html" %}
-	  {% endblock %}
-	  {% block acknowledgement %}
-	  {% include "htmx/incidents/_incident_ack.html" %}
-	  {% endblock %}
-	  {% block tag %}
-	  {% include "htmx/incidents/_incident_tag.html" with tag="location" %}
-	  {% endblock %}
-	  {% block start_time %}
-	  {% include "htmx/incidents/_incident_start_time.html" %}
-	  {% endblock %}
-	  {% block description %}
-	  {% include "htmx/incidents/_incident_description.html" %}
-	  {% endblock %}
-  </li>
+<li>
+    HTMX-app
+    {% block incident_pk %}
+        {% include "htmx/incidents/_incident_pk.html" %}
+    {% endblock %}
+    {% block status %}
+        {% include "htmx/incidents/_incident_status.html" %}
+    {% endblock %}
+    {% block acknowledgement %}
+        {% include "htmx/incidents/_incident_ack.html" %}
+    {% endblock %}
+    {% block tag %}
+        {% include "htmx/incidents/_incident_tag.html" with tag="location" %}
+    {% endblock %}
+    {% block start_time %}
+        {% include "htmx/incidents/_incident_start_time.html" %}
+    {% endblock %}
+    {% block description %}
+        {% include "htmx/incidents/_incident_description.html" %}
+    {% endblock %}
+</li>

src/argus_htmx/templates/htmx/incidents/_incident_status.html

@@ -1,2 +1,5 @@
-{% if incident.open %}<span class="badge badge-primary">Open</span>
-{% else %}<span class="badge badge-accent">Closed</span>{% endif %}
+{% if incident.open %}
+    <span class="badge badge-primary">Open</span>
+{% else %}
+    <span class="badge badge-accent">Closed</span>
+{% endif %}