Add HTML linting to pre-commit (#968)

## Fixes issue #239 ## Description of Changes I added `djlint` linting to the `pre-commit` script and made the corresponding changes. ## Tests and linting - [x] This branch is up-to-date with the `develop` branch. - [x] `pytest` passes on my local development environment. - [x] `pre-commit` passes on my local development environment.
lucyparsons · Jul 13, 2023 · eb84c13 · eb84c13
1 parent 7be3e2f
commit eb84c13
Show file tree

Hide file tree

Showing 34 changed files with 305 additions and 283 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -90,10 +90,18 @@ repos:
     rev: v1.31.1
     hooks:
       - id: djlint-reformat
+        pass_filenames: false
         args:
           - OpenOversight/app/templates
-          - --format-js
           - --format-css
           - --profile=jinja
           - --indent=2
           - --quiet
+      - id: djlint
+        require_serial: true
+        pass_filenames: false
+        args:
+          - OpenOversight/app/templates
+          - --profile=jinja
+          - --use-gitignore
+          - --ignore=H006,T028,H031,H021,H013,H011
diff --git a/OpenOversight/app/main/views.py b/OpenOversight/app/main/views.py
@@ -144,7 +144,7 @@ def browse():
 @sitemap_include
 @main.route("/find", methods=[HTTPMethod.GET, HTTPMethod.POST])
 def get_officer():
-    jsloads = ["js/find_officer.js"]
+    js_loads = ["js/find_officer.js"]
     form = FindOfficerForm()
 
     departments_dict = [dept_choice.toCustomDict() for dept_choice in dept_choices()]
@@ -180,7 +180,7 @@ def get_officer():
         "input_find_officer.html",
         form=form,
         depts_dict=departments_dict,
-        jsloads=jsloads,
+        jsloads=js_loads,
     )
 
 

diff --git a/OpenOversight/app/templates/about.html b/OpenOversight/app/templates/about.html
@@ -20,7 +20,9 @@
         </small>
       </p>
       <div class="text-center pb-50">
-        <a href="/find" class="btn btn-lg btn-info" id="try-it">Try it</a>
+        <a href="{{ url_for("main.get_officer") }}"
+           class="btn btn-lg btn-info"
+           id="try-it">Try it</a>
       </div>
       <div class="row font-weight-300 text-center display-flex">
         <div class="col-lg-4 col-half-border">

diff --git a/OpenOversight/app/templates/base.html b/OpenOversight/app/templates/base.html
@@ -54,28 +54,28 @@
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
             </button>
-            <a class="navbar-link navbar-brand" href="/">OpenOversight</a>
+            <a class="navbar-link navbar-brand" href="{{ url_for("main.index") }}">OpenOversight</a>
           </div>
           <div id="navbar" class="navbar-collapse collapse">
             <ul class="nav navbar-nav">
               <li>
-                <a class="navbar-link" href="/browse">Browse</a>
+                <a class="navbar-link" href="{{ url_for("main.browse") }}">Browse</a>
               </li>
               <li>
-                <a class="navbar-link" href="/find">Find an Officer</a>
+                <a class="navbar-link" href="{{ url_for("main.get_officer") }}">Find an Officer</a>
               </li>
               <li>
-                <a class="navbar-link" href="/submit">Submit Images</a>
+                <a class="navbar-link" href="{{ url_for("main.submit_data") }}">Submit Images</a>
               </li>
               <li>
-                <a class="navbar-link" href="/label">Volunteer</a>
+                <a class="navbar-link" href="{{ url_for("main.get_started_labeling") }}">Volunteer</a>
               </li>
               <li>
-                <a class="navbar-link" href="/about">About</a>
+                <a class="navbar-link" href="{{ url_for("main.about_oo") }}">About</a>
               </li>
               {% if current_user and current_user.is_administrator %}
                 <li>
-                  <a class="navbar-link" href="/auth/users">Users</a>
+                  <a class="navbar-link" href="{{ url_for("auth.get_users") }}">Users</a>
                 </li>
               {% endif %}
             </ul>
@@ -154,7 +154,7 @@ <h5>Contact</h5>
             <a href="https://github.com/lucyparsons/openoversight"><i class="fa fa-github fa-3x social"></i></a>
             <a href="mailto:[email protected]"><i class="fa fa-envelope-square fa-3x social"></i></a>
             <br>
-            <a href="/privacy" class="btn">Privacy Policy</a>
+            <a href="{{ url_for("main.privacy_oo") }}" class="btn">Privacy Policy</a>
           </p>
         </div>
         <div class="col-sm-4">

diff --git a/OpenOversight/app/templates/browse.html b/OpenOversight/app/templates/browse.html
@@ -1,7 +1,11 @@
 {% extends "base.html" %}
 {% import "bootstrap/wtf.html" as wtf %}
-{% block title %}Browse OpenOversight{% endblock %}
-{% block meta %}<meta name="description" content="Browse a department on OpenOversight.">{% endblock %}
+{% block title %}
+  Browse OpenOversight
+{% endblock title %}
+{% block meta %}
+  <meta name="description" content="Browse a department on OpenOversight.">
+{% endblock meta %}
 {% block content %}
   <div class="container theme-showcase" role="main">
     <div class="text-center frontpage-leads">
@@ -34,4 +38,4 @@ <h2>
       {% endfor %}
     </div>
   </div>
-{% endblock %}
+{% endblock content %}