address djlint lint

and autoformat js in templates

.pre-commit-config.yaml

@@ -42,6 +42,9 @@ repos:
       - id: djlint-reformat-jinja
         files: ".*templates/.*.html"
         types_or: ["html"]
+      - id: djlint-jinja
+        files: ".*templates/.*.html"
+        types_or: ["html"]
 
   # Autoformat and linting, misc. details
   - repo: https://github.com/pre-commit/pre-commit-hooks

docs/source/_templates/redoc.html

@@ -23,8 +23,12 @@
       document.body.innerText = "Rendered API specification doesn't work with file: protocol. Use sphinx-autobuild to do local builds of the docs, served over HTTP."
     } else {
       Redoc.init(
-      "{{ pathto('_static/rest-api.yml', 1) }}",
+        "{{ pathto('_static/rest-api.yml', 1) }}", {
-      {{ meta.redoc_options | default({}) }},
+          {
+            meta.redoc_options |
+              default ({})
+          }
+        },
         document.getElementById("redoc-spec"),
       );
     }

examples/service-announcement/templates/page.html

@@ -1,5 +1,7 @@
 {% extends "templates/page.html" %}
-{% block announcement %}<div class="container text-center announcement"></div>{% endblock %}
+{% block announcement %}
+  <div class="container text-center announcement"></div>
+{% endblock announcement %}
 {% block script %}
   {{ super() }}
   <script>
@@ -7,4 +9,4 @@
       $(".announcement").html(data["announcement"]);
     });
   </script>
-{% endblock %}
+{% endblock script %}

jupyterhub/singleuser/templates/page.html

@@ -17,7 +17,7 @@ It makes the following modifications:
        style="margin-right: 4px;
               margin-left: 2px">Control Panel</a>
   </span>
-{% endblock %}
+{% endblock header_buttons %}
 {% block logo %}
   <img src="{{ logo_url }}" alt="Jupyter Notebook" />
 {% endblock logo %}

pyproject.toml

@@ -124,6 +124,18 @@ select = [
 # https://djlint.com/docs/configuration/
 [tool.djlint]
 indent = 2
+# ignore often-incorrect lint
+# H006: image height/width attributes
+# ignore style lint that formatter doesn't catch
+# H008: double-quotes
+# H029: form method case
+ignore = "H006,H008,H021,H029"
+use_gitignore = true
+
+format_js = true
+
+[tool.djlint.js]
+indent_size = 2
 
 # tbump is used to simplify and standardize the release process when updating
 # the version, making a git commit and tag, and pushing changes.

share/jupyterhub/templates/404.html

@@ -1,2 +1,4 @@
 {% extends "error.html" %}
-{% block error_detail %}<p>Jupyter has lots of moons, but this is not one...</p>{% endblock %}
+{% block error_detail %}
+  <p>Jupyter has lots of moons, but this is not one...</p>
+{% endblock error_detail %}

share/jupyterhub/templates/accept-share.html

@@ -1,5 +1,6 @@
 {% extends "page.html" %}
-{% block login_widget %}{% endblock %}
+{% block login_widget %}
+{% endblock login_widget %}
 {% block main %}
   <div class="container">
     <div class="row justify-content-center">
@@ -16,7 +17,7 @@
             to start the server before you can access it.
           </p>
         {% endif %}
-        <form method="POST" action="">
+        <form method="post" action="">
           <div class="card">
             <div class="card-header">
               By accepting the invitation, you will be granted the following permissions,
@@ -48,4 +49,4 @@
       </div>
     </div>
   </div>
-{% endblock %}
+{% endblock main %}

share/jupyterhub/templates/admin.html

@@ -7,7 +7,7 @@
     </script>
     <script src={{ static_url("js/admin-react.js") }}></script>
   </div>
-{% endblock %}
+{% endblock main %}
 {% block footer %}
   <div class="py-2 px-4 bg-body-tertiary small version_footer">JupyterHub {{ server_version }}</div>
-{% endblock %}
+{% endblock footer %}

share/jupyterhub/templates/error.html

@@ -1,5 +1,6 @@
 {% extends "page.html" %}
-{% block login_widget %}{% endblock %}
+{% block login_widget %}
+{% endblock login_widget %}
 {% block main %}
   <div class="error">
     {% block h1_error %}
@@ -11,7 +12,7 @@
       {% if extra_error_html %}<p>{{ extra_error_html | safe }}</p>{% endif %}
     {% endblock error_detail %}
   </div>
-{% endblock %}
+{% endblock main %}
 {% block script %}
   {{ super() }}
   <script type="text/javascript">
@@ -40,4 +41,4 @@
 
     _remove_redirects_from_url();
   </script>
-{% endblock %}
+{% endblock script %}

share/jupyterhub/templates/home.html

@@ -86,5 +86,7 @@
 {% endblock main %}
 {% block script %}
   {{ super() }}
-  <script type="text/javascript">require(["home"]);</script>
+  <script type="text/javascript">
-{% endblock %}
+    require(["home"]);
+  </script>
+{% endblock script %}

share/jupyterhub/templates/login.html

@@ -2,7 +2,8 @@
 {% if announcement_login is string %}
   {% set announcement = announcement_login %}
 {% endif %}
-{% block login_widget %}{% endblock %}
+{% block login_widget %}
+{% endblock login_widget %}
 {% block main %}
   {% block login %}
     <div id="login-main" class="container">
@@ -86,7 +87,7 @@
       {% endblock login_container %}
     </div>
   {% endblock login %}
-{% endblock %}
+{% endblock main %}
 {% block script %}
   {{ super() }}
   <script>
@@ -103,4 +104,4 @@ $('form').submit((e) => {
       form.find('.feedback-widget>*').toggleClass('fa-pulse');
     });
   </script>
-{% endblock %}
+{% endblock script %}

share/jupyterhub/templates/logout.html

@@ -6,4 +6,4 @@
   <div id="logout-main" class="container">
     <p>Successfully logged out.</p>
   </div>
-{% endblock %}
+{% endblock main %}

share/jupyterhub/templates/not_running.html

@@ -11,7 +11,7 @@
               Server not running
             {% endif %}
           </h1>
-        {% endblock %}
+        {% endblock heading %}
         {% block message %}
           <p>
             {% if failed %}
@@ -35,7 +35,7 @@
               {% endif %}
             {% endif %}
           </p>
-        {% endblock %}
+        {% endblock message %}
         {% block start_button %}
           <a id="start"
              role="button"
@@ -48,17 +48,21 @@
             {% endif %}
             Server {{ server_name }}
           </a>
-        {% endblock %}
+        {% endblock start_button %}
       </div>
     </div>
   </div>
-{% endblock %}
+{% endblock main %}
 {% block script %}
   {{ super () }}
   {% if implicit_spawn_seconds %}
     <script type="text/javascript">
       var spawn_url = "{{ spawn_url }}";
-  var implicit_spawn_seconds = {{ implicit_spawn_seconds }};
+      var implicit_spawn_seconds = {
+        {
+          implicit_spawn_seconds
+        }
+      };
       setTimeout(function() {
           console.log("redirecting to spawn at", spawn_url);
           window.location = spawn_url;
@@ -67,5 +71,7 @@
       );
     </script>
   {% endif %}
-  <script type="text/javascript">require(["not_running"]);</script>
+  <script type="text/javascript">
+    require(["not_running"]);
+  </script>
 {% endblock script %}

share/jupyterhub/templates/oauth.html

@@ -1,5 +1,6 @@
 {% extends "page.html" %}
-{% block login_widget %}{% endblock %}
+{% block login_widget %}
+{% endblock login_widget %}
 {% block main %}
   <div class="container">
     <div class="row justify-content-center">
@@ -14,7 +15,7 @@
             your behalf.
           {% endif %}
         </p>
-        <form method="POST" action="">
+        <form method="post" action="">
           <div class="card">
             <div class="card-header">
               <p class="h5">This will grant the application permission to:</p>
@@ -26,9 +27,12 @@
               {% for scope_info in scope_descriptions %}
                 <div class="checkbox input-group">
                   <label>
-                    <input type="checkbox" name="raw-scopes" checked="true" title="This authorization is required"
+                    {# disabled because it's required #}
-                      disabled="disabled"
+                    <input type="checkbox"
-                      {# disabled because it's required #} />
+                           name="raw-scopes"
+                           checked="true"
+                           title="This authorization is required"
+                           disabled="disabled" />
                     <span>
                       {{ scope_info['description'] }}
                       {% if scope_info['filter'] %}Applies to {{ scope_info['filter'] }}.{% endif %}
@@ -44,4 +48,5 @@
         </form>
       </div>
     </div>
-    {% endblock %}
+  </div>
+{% endblock main %}

share/jupyterhub/templates/page.html

@@ -10,9 +10,7 @@
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <h2 class="modal-title" id="{{ key }}-label">
+          <h2 class="modal-title" id="{{ key }}-label">{{ title }}</h2>
-            {{ title }}
-          </h1>
           <button type="button"
                   class="btn-close"
                   data-bs-dismiss="modal"
@@ -34,22 +32,30 @@
   <head>
     <meta charset="utf-8">
     <title>
-      {% block title %}JupyterHub{% endblock %}
+      {%- block title -%}
+        JupyterHub
+      {%- endblock title -%}
     </title>
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {% block stylesheet %}
       <link rel="stylesheet" href="{{ static_url("css/style.min.css") }}" type="text/css" />
-    {% endblock %}
+    {% endblock stylesheet %}
-    {% block favicon %}<link rel="icon" href="{{ static_url("favicon.ico") }}" type="image/x-icon">{% endblock %}
+    {% block favicon %}
+      <link rel="icon" href="{{ static_url("favicon.ico") }}" type="image/x-icon">
+    {% endblock favicon %}
     {% block scripts %}
       <script src="{{static_url("components/bootstrap/dist/js/bootstrap.bundle.min.js") }}" type="text/javascript" charset="utf-8"></script>
       <script src="{{static_url("components/requirejs/require.js") }}" type="text/javascript" charset="utf-8"></script>
       <script src="{{static_url("components/jquery/dist/jquery.min.js") }}" type="text/javascript" charset="utf-8"></script>
-    {% endblock %}
+    {% endblock scripts %}
-    <script>
+    {# djlint js formatting doesn't handle template blocks in js #}
+    {# djlint: off #}
+    <script type="text/javascript">
       require.config({
-          {% if version_hash %}urlArgs: "v={{version_hash}}",{% endif %}
+        {% if version_hash %}
+        urlArgs: "v={{version_hash}}",
+        {% endif %}
         baseUrl: '{{static_url("js", include_version=False)}}',
         paths: {
           components: '../components',
@@ -57,17 +63,14 @@
           moment: "../components/moment/moment",
         },
       });
-    </script>
+
-    <script type="text/javascript">
       window.jhdata = {
         base_url: "{{base_url}}",
         prefix: "{{prefix}}",
         {% if user %}
-        {#
+        {#- Autoescaping in templates is turned on in JupyterHub, #}
-          Autoescaping in templates is turned on in JupyterHub,
+        {#-  need `| safe` to prevent escaping #}
-          need `| safe` to prevent escaping
+        {#- `https://github.com/pallets/markupsafe/blob/2.1.4/src/markupsafe/_native.py#L6` #}
-          https://github.com/pallets/markupsafe/blob/2.1.4/src/markupsafe/_native.py#L6
-        #}
         user: "{{ user.json_escaped_name | safe }}",
         {% endif %}
         {% if admin_access %}
@@ -81,10 +84,14 @@
         options_form: false,
         {% endif %}
         xsrf_token: "{{ xsrf_token }}",
-      }
+      };
+
 </script>
+    {# djlint: on #}
     {% block meta %}
-{% endblock %}
+      <meta name="description" content="JupyterHub">
+      <meta name="keywords" content="Jupyter, JupyterHub">
+    {% endblock meta %}
   </head>
   <body>
     <noscript>
@@ -100,12 +107,21 @@ Please enable it to proceed.
           {% block logo %}
             <span id="jupyterhub-logo" class="navbar-brand">
               <a href="{{ logo_url or base_url }}">
-<img src='{{ base_url }}logo' alt='JupyterHub logo' class='jpy-logo' title='Home' />
+                <img src='{{ base_url }}logo'
+                     alt='JupyterHub logo'
+                     class='jpy-logo'
+                     title='Home' />
               </a>
             </span>
-{% endblock %}
+          {% endblock logo %}
           {% if user %}
-<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#thenavbar" aria-controls="thenavbar" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#thenavbar"
+                    aria-controls="thenavbar"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
             </button>
           {% endif %}
@@ -126,19 +142,23 @@ Please enable it to proceed.
                   {% endif %}
                   {% if services %}
                     <li class="nav-item dropdown">
-<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">Services</a>
+                      <a href="#"
+                         class="nav-link dropdown-toggle"
+                         data-bs-toggle="dropdown"
+                         role="button"
+                         aria-expanded="false">Services</a>
                       <ul class="dropdown-menu">
                         {% for service in services %}
                           {% block service scoped %}
                             <li>
                               <a class="dropdown-item" href="{{ service.href }}">{{ service.name }}</a>
                             </li>
-{% endblock %}
+                          {% endblock service %}
                         {% endfor %}
                       </ul>
                     </li>
                   {% endif %}
-{% endblock %}
+                {% endblock nav_bar_left_items %}
               </ul>
             {% endif %}
             <ul class="nav navbar-nav me-2">
@@ -148,30 +168,40 @@ Please enable it to proceed.
                     <span id="login_widget">
                       {% if user %}
                         <span class="navbar-text">{{ user.name }}</span>
-<a id="logout" role="button" class="btn btn-sm btn-outline-dark" href="{{ logout_url }}"> <i aria-hidden="true" class="fa fa-sign-out"></i> Logout</a>
+                        <a id="logout"
+                           role="button"
+                           class="btn btn-sm btn-outline-dark"
+                           href="{{ logout_url }}"> <i aria-hidden="true" class="fa fa-sign-out"></i> Logout</a>
                       {% else %}
-<a id="login" role="button" class="btn btn-sm btn-outline-dark" href="{{ login_url }}">Login</a>
+                        <a id="login"
+                           role="button"
+                           class="btn btn-sm btn-outline-dark"
+                           href="{{ login_url }}">Login</a>
                       {% endif %}
                     </span>
-{% endblock %}
+                  {% endblock login_widget %}
                 </li>
-{% endblock %}
+              {% endblock nav_bar_right_items %}
             </ul>
           </div>
-{% block header %}{% endblock %}
+          {% block header %}
+          {% endblock header %}
         </div>
       </nav>
-{% endblock %}
+    {% endblock nav_bar %}
     {% block announcement %}
       {% if announcement %}
         <div class="container text-center announcement alert alert-warning">{{ announcement | safe }}</div>
       {% endif %}
-{% endblock %}
+    {% endblock announcement %}
-{% block main %}{% endblock %}
+    {% block main %}
-{% block footer %}{% endblock %}
+    {% endblock main %}
+    {% block footer %}
+    {% endblock footer %}
     {% call modal('Error', btn_label='OK') %}
       <div class="ajax-error alert-danger">The error</div>
     {% endcall %}
-{% block script %}{% endblock %}
+    {% block script %}
+    {% endblock script %}
   </body>
 </html>

share/jupyterhub/templates/spawn.html

@@ -8,7 +8,7 @@
       <div class="row text-center">
         <h1>Server Options</h1>
       </div>
-    {% endblock %}
+    {% endblock heading %}
     <div class="row justify-content-center">
       <div class="col-md-8">
         {% if for_user and user.name != for_user.name -%}
@@ -31,7 +31,8 @@
         </form>
       </div>
     </div>
-  {% endblock %}
+  </div>
+{% endblock main %}
 {% block script %}
   {{ super() }}
   <script>
@@ -43,4 +44,4 @@ $('form').submit((e) => {
       form.find('.feedback-widget>*').toggleClass('fa-pulse');
     });
   </script>
-  {% endblock %}
+{% endblock script %}

share/jupyterhub/templates/spawn_pending.html

@@ -6,15 +6,14 @@
         {% block message %}
           <p>Your server is starting up.</p>
           <p>You will be redirected automatically when it's ready for you.</p>
-        {% endblock %}
+        {% endblock message %}
         <div class="progress">
           <div id="progress-bar"
                class="progress-bar"
                role="progressbar"
                aria-valuenow="0"
                aria-valuemin="0"
-               aria-valuemax="100"
+               aria-valuemax="100">
-               style="width: 0%">
             <span class="sr-only"><span id="sr-progress">0%</span> Complete</span>
           </div>
         </div>
@@ -30,7 +29,7 @@
       </div>
     </div>
   </div>
-{% endblock %}
+{% endblock main %}
 {% block script %}
   {{ super() }}
   <script type="text/javascript">
@@ -93,4 +92,4 @@ require(["jquery"], function ($) {
       window._jupyterhub_page_loaded = true;
     });
   </script>
-{% endblock %}
+{% endblock script %}

share/jupyterhub/templates/stop_pending.html

@@ -14,7 +14,7 @@
       </div>
     </div>
   </div>
-{% endblock %}
+{% endblock main %}
 {% block script %}
   {{ super() }}
   <script type="text/javascript">
@@ -27,4 +27,4 @@ require(["jquery"], function ($) {
       }, 5000);
     });
   </script>
-{% endblock %}
+{% endblock script %}

share/jupyterhub/templates/token.html

@@ -166,6 +166,7 @@
                   </td>
                   <td class="col-sm-1 text-center">
                     <button class="revoke-token-btn btn btn-xs btn-danger">revoke</button>
+                  </td>
                 {% endblock client_row %}
               </tr>
             {% endfor %}
@@ -177,5 +178,7 @@
 {% endblock main %}
 {% block script %}
   {{ super() }}
-    <script type="text/javascript">require(["token"]);</script>
+  <script type="text/javascript">
+    require(["token"]);
+  </script>
 {% endblock script %}