Add HTML linting to pre-commit (lucyparsons#968)

lucyparsons#239 I added `djlint` linting to the `pre-commit` script and made the corresponding changes. - [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.
OrcaCollective · Sep 25, 2023 · 87d0e1a · 87d0e1a
1 parent 82c2598
commit 87d0e1a
Show file tree

Hide file tree

Showing 35 changed files with 354 additions and 302 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -100,9 +100,18 @@ repos:
     rev: v1.31.1
     hooks:
       - id: djlint-reformat
+        pass_filenames: false
         args:
           - OpenOversight/app/templates
           - --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
@@ -1,9 +1,11 @@
 {% extends "base.html" %}
-{% block title %}About OpenOversight{% endblock %}
+{% block title %}
+  About OpenOversight
+{% endblock title %}
 {% block meta %}
   <meta name="description"
         content="OpenOversight is a Seattle Tech Bloc project that aims to improve law enforcement visibility and transparency using public and crowdsourced data. We maintain databases, digital galleries, and profiles of individual law enforcement officers from departments the so called Pacific Northwest that consolidate information including names, birthdates, mentions in news articles, salaries, and photographs." />
-{% endblock %}
+{% endblock meta %}
 {% block content %}
   <div role="main">
     <div class="hero-section no-sub">
@@ -23,15 +25,17 @@
         <small>
           This is an independent instance of OpenOversight hosted by Seattle
           regional techbloc. For more info or reporting problems, reach out to
-          <a href="http://twitter.com/TechBlocSEA"
+          <a href="https://twitter.com/TechBlocSEA"
              rel="noopener noreferrer"
              target="_blank">TechBlocSEA on Twitter</a>
           or
           <a href="mailto:techblocsea@protonmail.com">techblocsea@protonmail.com</a>.
         </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">
@@ -121,4 +125,4 @@ <h2>Press Release</h2>
       </div>
     </div>
   </div>
-{% endblock %}
+{% endblock content %}
diff --git a/OpenOversight/app/templates/base.html b/OpenOversight/app/templates/base.html
@@ -58,28 +58,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>
@@ -150,7 +150,7 @@ <h5>OpenOversight</h5>
                rel="noopener noreferrer">Lucy Parsons Labs</a>
             <br>
             Maintained by
-            <a href="http://twitter.com/TechBlocSEA"
+            <a href="https://twitter.com/TechBlocSEA"
                target="_blank"
                rel="noopener noreferrer">Seattle Tech Bloc</a>
             <br />
@@ -161,7 +161,7 @@ <h5>OpenOversight</h5>
           <h5>Contact</h5>
           <p>
             <a title="TechBloc Twitter"
-               href="http://twitter.com/TechBlocSEA"
+               href="https://twitter.com/TechBlocSEA"
                rel="noopener noreferrer"
                target="_blank">
               <i class="fa fa-twitter-square fa-3x social" aria-hidden="true"></i>
@@ -182,7 +182,7 @@ <h5>Contact</h5>
               <i class="fa fa-globe fa-3x social" aria-hidden="true"></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">
@@ -43,4 +47,4 @@ <h2>
       {% endfor %}
     </div>
   </div>
-{% endblock %}
+{% endblock content %}
diff --git a/OpenOversight/app/templates/cop_face.html b/OpenOversight/app/templates/cop_face.html
@@ -42,7 +42,7 @@ <h2>
           </div>
           <div class="col-sm-3 text-center">
             <div class="docs-data">
-              <form {% if department %} action="{{ url_for('main.label_data', image_id=image.id, department_id=department.id) }}" {% else %} action="{{ url_for('main.label_data', image_id=image.id) }}" {% endif %}
+              <form action="{{ url_for('main.label_data', image_id=image.id, department_id=department.id if department else None) }}"
                     method="post">
                 {{ form.hidden_tag() }}
                 <div class="input-group input-group-sm">
@@ -164,56 +164,63 @@ <h2>
               <a href="{{ url_for('main.label_data', department_id=department.id) }}"
                  class="btn btn-lg btn-primary"
                  role="button">
-              {% else %}
-                <a href="{{ url_for("main.label_data") }}"
-                   class="btn btn-lg btn-primary"
-                   role="button">
-                {% endif %}
-                <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> Next Photo</a>
-            </div>
-            <div class="col-sm-2 text-center done-button">
-              <a href="{{ url_for('main.complete_tagging', image_id=image.id, department_id=department.id, contains_cops=0) }}"
-                 class="btn btn-sm btn-success">
-                <span class="glyphicon glyphicon glyphicon-ok" aria-hidden="true"></span>
-                All officers have been identified!
+                <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
+                Next Photo
               </a>
-            </div>
-            <hr>
-            <div class="row">
-              <div class="col-sm-12">
-                <div class="text-center button-explanation">
-                  <div class="text done-button-explanation">
-                    <b>Explanation</b>: click this button ONLY when all officers in it have been identified. This will remove it from the identification queue for ALL users.
-                  </div>
-                  <div class="text skip-button-explanation">
-                    <b>Explanation</b>: click this button if you would like to move on to the next image, without saving any info about this image.
-                  </div>
-                  <div class="text launchroster-button-explanation">
-                    <b>Explanation</b>: click this button to open the police roster.  Use the roster to find the officer's OpenOversight ID.
-                  </div>
+            {% else %}
+              <a href="{{ url_for("main.label_data") }}"
+                 class="btn btn-lg btn-primary"
+                 role="button">
+                <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
+                Next Photo
+              </a>
+            {% endif %}
+          </div>
+          <div class="col-sm-2 text-center done-button">
+            <a href="{{ url_for('main.complete_tagging', image_id=image.id, department_id=department.id, contains_cops=0) }}"
+               class="btn btn-sm btn-success">
+              <span class="glyphicon glyphicon glyphicon-ok" aria-hidden="true"></span>
+              All officers have been identified!
+            </a>
+          </div>
+          <hr>
+          <div class="row">
+            <div class="col-sm-12">
+              <div class="text-center button-explanation">
+                <div class="text done-button-explanation">
+                  <b>Explanation</b>: click this button ONLY when all officers in it have been identified. This will remove it from the identification queue for ALL users.
+                </div>
+                <div class="text skip-button-explanation">
+                  <b>Explanation</b>: click this button if you would like to move on to the next image, without saving any info about this image.
+                </div>
+                <div class="text launchroster-button-explanation">
+                  <b>Explanation</b>: click this button to open the police roster.  Use the roster to find the officer's OpenOversight ID.
                 </div>
               </div>
             </div>
           </div>
-        {% elif current_user.is_disabled == True %}
-          <h3>Your account has been disabled due to too many incorrect classifications/tags!</h3>
-          <p>
-            <a href="mailto:techblocsea@protonmail.com"
-               class="btn btn-lg btn-primary"
-               role="button">Mail us to get it enabled again</a>
-          </p>
-        {% else %}
-          <h3>All images have been tagged!</h3>
-          <h4>
-            <small class="muted">{{ department.name }}</small>
-          </h4>
-          <p>
-            <a href="{{ url_for("main.submit_data") }}"
-               class="btn btn-lg btn-primary"
-               role="button">Submit officer pictures to us</a>
-          </p>
-        {% endif %}
+        </div>
+      {% elif current_user.is_disabled == True %}
+        <h3>Your account has been disabled due to too many incorrect classifications/tags!</h3>
+        <p>
+          <a href="mailto:techblocsea@protonmail.com"
+             class="btn btn-lg btn-primary"
+             role="button">Mail us to get it enabled again</a>
+        </p>
+      {% else %}
+        <h3>All images have been tagged!</h3>
+        <h4>
+          <small class="muted">{{ department.name }}</small>
+        </h4>
+        <p>
+          <a href="{{ url_for("main.submit_data") }}"
+             class="btn btn-lg btn-primary"
+             role="button">Submit officer pictures to us</a>
+        </p>
       {% endif %}
-    </div>
-  {% endblock %}
-  {% block footer_class %}bottom-10{% endblock %}
+    {% endif %}
+  </div>
+{% endblock content %}
+{% block footer_class %}
+  bottom-10
+{% endblock footer_class %}