Minify bookmark list HTML (#332)

bookmarks/templates/bookmarks/bookmark_list.html

@@ -1,7 +1,7 @@
 {% load shared %}
 {% load pagination %}
-
-<ul class="bookmark-list">
+{% htmlmin %}
+  <ul class="bookmark-list">
     {% for bookmark in bookmarks %}
       <li data-is-bookmark-item>
         <label class="form-checkbox bulk-edit-toggle">
@@ -23,7 +23,6 @@
             </span>
           {% endif %}
           {% if bookmark.tag_names and bookmark.resolved_description %} | {% endif %}
-
           {% if bookmark.resolved_description %}
             <span>{{ bookmark.resolved_description }}</span>
           {% endif %}
@@ -33,7 +32,8 @@
             <span class="date-label text-gray text-sm">
               {% if bookmark.web_archive_snapshot_url %}
                 <a href="{{ bookmark.web_archive_snapshot_url }}"
-                           title="Show snapshot on the Internet Archive Wayback Machine" target="{{ link_target }}" rel="noopener">
+                   title="Show snapshot on the Internet Archive Wayback Machine" target="{{ link_target }}"
+                   rel="noopener">
               {% endif %}
               <span>{{ bookmark.date_added|humanize_relative_date }}</span>
               {% if bookmark.web_archive_snapshot_url %}
@@ -47,7 +47,8 @@
             <span class="date-label text-gray text-sm">
               {% if bookmark.web_archive_snapshot_url %}
                 <a href="{{ bookmark.web_archive_snapshot_url }}"
-                           title="Show snapshot on the Internet Archive Wayback Machine" target="{{ link_target }}" rel="noopener">
+                   title="Show snapshot on the Internet Archive Wayback Machine" target="{{ link_target }}"
+                   rel="noopener">
               {% endif %}
               <span>{{ bookmark.date_added|humanize_absolute_date }}</span>
               {% if bookmark.web_archive_snapshot_url %}
@@ -63,29 +64,35 @@
                class="btn btn-link btn-sm">Edit</a>
             {% if bookmark.is_archived %}
               <button type="submit" name="unarchive" value="{{ bookmark.id }}"
-                           class="btn btn-link btn-sm">Unarchive</button>
+                      class="btn btn-link btn-sm">Unarchive
+              </button>
             {% else %}
               <button type="submit" name="archive" value="{{ bookmark.id }}"
-                           class="btn btn-link btn-sm">Archive</button>
+                      class="btn btn-link btn-sm">Archive
+              </button>
             {% endif %}
             <button type="submit" name="remove" value="{{ bookmark.id }}"
-                       class="btn btn-link btn-sm btn-confirmation">Remove</button>
+                    class="btn btn-link btn-sm btn-confirmation">Remove
+            </button>
             {% if bookmark.unread %}
               <span class="text-gray text-sm">|</span>
               <button type="submit" name="mark_as_read" value="{{ bookmark.id }}"
-                              class="btn btn-link btn-sm">Mark as read</button>
+                      class="btn btn-link btn-sm">Mark as read
+              </button>
             {% endif %}
           {% else %}
             {# Shared bookmark actions #}
             <span class="text-gray text-sm">Shared by
-                      <a class="text-gray" href="?{% replace_query_param user=bookmark.owner.username %}">{{ bookmark.owner.username }}</a>
+              <a class="text-gray"
+                 href="?{% replace_query_param user=bookmark.owner.username %}">{{ bookmark.owner.username }}</a>
             </span>
           {% endif %}
         </div>
       </li>
     {% endfor %}
-</ul>
+  </ul>
 
-<div class="bookmark-pagination">
+  <div class="bookmark-pagination">
     {% pagination bookmarks %}
-</div>
+  </div>
+{% endhtmlmin %}

bookmarks/templates/bookmarks/bookmarklet.js

@@ -1,4 +1,4 @@
-(function() {
+(function () {
   var bookmarkUrl = window.location;
   var applicationUrl = '{{ application_url }}';
 

bookmarks/templates/bookmarks/bulk_edit/bar.html

@@ -1,3 +1,5 @@
+{% load shared %}
+{% htmlmin %}
 <div class="bulk-edit-bar">
   <div class="bulk-edit-actions bg-gray">
     <label class="form-checkbox bulk-edit-all-toggle">
@@ -29,3 +31,4 @@
     </button>
   </div>
 </div>
+{% endhtmlmin %}

bookmarks/templates/bookmarks/bulk_edit/toggle.html

@@ -2,7 +2,8 @@
     <span class="btn" title="Bulk edit">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20px"
              height="20px">
-            <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/>
+            <path
+                d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/>
         </svg>
     </span>
 </label>

bookmarks/templates/bookmarks/edit.html

@@ -7,7 +7,8 @@
       <div class="content-area-header">
         <h2>Edit bookmark</h2>
       </div>
-            <form action="{% url 'bookmarks:edit' bookmark_id %}?return_url={{ return_url|urlencode }}" method="post" class="col-6 col-md-12" novalidate>
+      <form action="{% url 'bookmarks:edit' bookmark_id %}?return_url={{ return_url|urlencode }}" method="post"
+            class="col-6 col-md-12" novalidate>
         {% bookmark_form form return_url bookmark_id %}
       </form>
     </section>

bookmarks/templates/bookmarks/empty_bookmarks.html

@@ -3,6 +3,7 @@
   <p class="empty-subtitle">
     You can get started by <a href="{% url 'bookmarks:new' %}">adding</a> bookmarks,
     <a href="{% url 'bookmarks:settings.general' %}">importing</a> your existing bookmarks or configuring the
-        <a href="{% url 'bookmarks:settings.integrations' %}">browser extension</a> or the <a href="{% url 'bookmarks:settings.integrations' %}">bookmarklet</a>.
+    <a href="{% url 'bookmarks:settings.integrations' %}">browser extension</a> or the <a
+      href="{% url 'bookmarks:settings.integrations' %}">bookmarklet</a>.
   </p>
 </div>

bookmarks/templates/bookmarks/nav_menu.html

@@ -1,11 +1,16 @@
+{% load shared %}
+{% htmlmin %}
 {# Basic menu list #}
 <div class="hide-md">
   <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
   <div class="dropdown">
     <a href="#" class="btn btn-link dropdown-toggle" tabindex="0" style="padding-right: 0.2rem">
       Bookmarks
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" style="height:1rem;width:1rem;vertical-align: text-bottom;">
-            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
+           style="height:1rem;width:1rem;vertical-align: text-bottom;">
+        <path fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"/>
       </svg>
     </a>
     <ul class="menu">
@@ -34,14 +39,16 @@
 {# Menu drop-down for smaller devices #}
 <div class="show-md">
   <a href="{% url 'bookmarks:new' %}" class="btn btn-primary">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px; height: 24px">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+         style="width: 24px; height: 24px">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
     </svg>
   </a>
   <div class="dropdown dropdown-right">
     <a href="#" id="mobile-nav-menu-trigger" class="btn btn-link dropdown-toggle" tabindex="0">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px; height: 24px">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+           style="width: 24px; height: 24px">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
       </svg>
     </a>
     <!-- menu component -->
@@ -72,6 +79,7 @@
     </ul>
   </div>
 </div>
+{% endhtmlmin %}
 <script>
   // Hide mobile menu on outside click
   // The Spectre CSS component relies on focus changes to show/hide the dropdown, however mobile browsers like

bookmarks/templates/bookmarks/search.html

@@ -15,7 +15,7 @@
 
 {# Replace search input with auto-complete component #}
 <script type="application/javascript">
-    window.addEventListener("load", function() {
+  window.addEventListener("load", function () {
     const currentTagsString = '{{ tags_string }}';
     const currentTags = currentTagsString.split(' ');
     const uniqueTags = [...new Set(currentTags)]

bookmarks/templates/bookmarks/tag_cloud.html

@@ -1,6 +1,6 @@
 {% load shared %}
-
-<div class="tag-cloud">
+{% htmlmin %}
+  <div class="tag-cloud">
     {% if has_selected_tags %}
       <p class="selected-tags">
         {% for tag in selected_tags %}
@@ -19,7 +19,8 @@
             {% if forloop.counter == 1 %}
               <a href="?{% append_to_query_param q=tag.name|hash_tag %}"
                  class="mr-2" data-is-tag-item>
-                            <span class="highlight-char">{{ tag.name|first_char }}</span><span>{{ tag.name|remaining_chars:1 }}</span>
+                <span
+                    class="highlight-char">{{ tag.name|first_char }}</span><span>{{ tag.name|remaining_chars:1 }}</span>
               </a>
             {% else %}
               {# Render remaining tags normally #}
@@ -32,4 +33,5 @@
         </p>
       {% endfor %}
     </div>
-</div>
+  </div>
+{% endhtmlmin %}

bookmarks/templatetags/shared.py

@@ -1,3 +1,5 @@
+import re
+
 from django import template
 
 from bookmarks import utils
@@ -48,6 +50,7 @@ def remove_from_query_param(context, **kwargs):
 
     return query.urlencode()
 
+
 @register.simple_tag(takes_context=True)
 def replace_query_param(context, **kwargs):
     query = context.request.GET.copy()
@@ -87,3 +90,22 @@ def humanize_relative_date(value):
     if value in (None, ''):
         return ''
     return utils.humanize_relative_date(value)
+
+
+@register.tag
+def htmlmin(parser, token):
+    nodelist = parser.parse(('endhtmlmin',))
+    parser.delete_first_token()
+    return HtmlMinNode(nodelist)
+
+
+class HtmlMinNode(template.Node):
+    def __init__(self, nodelist):
+        self.nodelist = nodelist
+
+    def render(self, context):
+        output = self.nodelist.render(context)
+
+        output = re.sub(r'\s+', ' ', output)
+
+        return output