Minify inline CSS and remove HTML comments
authorAlex Chan <alex@alexwlchan.net>
Wed, 16 Dec 2020 20:13:08 +0000 (20:13 +0000)
committerAlex Chan <alex@alexwlchan.net>
Wed, 16 Dec 2020 20:13:08 +0000 (20:13 +0000)
scripts/render_html.py
templates/_review_entry.html
templates/_review_style.css [new file with mode: 0644]

index f241441..ca217ac 100755 (executable)
@@ -10,6 +10,8 @@ import subprocess
 import sys
 
 import attr
+import bs4
+import cssmin
 import frontmatter
 import htmlmin
 from jinja2 import Environment, FileSystemLoader, select_autoescape
@@ -168,7 +170,19 @@ def save_html(template, out_name="", **kwargs):
     html = template.render(**kwargs)
     out_path = pathlib.Path("_html") / out_name / "index.html"
     out_path.parent.mkdir(exist_ok=True, parents=True)
-    out_path.write_text(htmlmin.minify(html))
+    html_str = htmlmin.minify(html)
+
+    soup = bs4.BeautifulSoup(html_str, "html.parser")
+
+    # Minify the CSS in all inline <style> tags.
+    for style_tag in soup.find_all("style"):
+        style_tag.string = cssmin.cssmin(style_tag.string)
+
+    # Remove any comments
+    for comment in soup(text=lambda text: isinstance(text, bs4.Comment)):
+        comment.extract()
+
+    out_path.write_text(str(soup))
 
 
 def _create_new_thumbnail(src_path, dst_path):
index 8ac6bf0..865664b 100644 (file)
@@ -3,28 +3,7 @@
 {% set b = (tint_colors[review_entry.book.cover_image][2] * 255) | int %}
 
 <style>
-  #review_preview_{{ r }}_{{ g }}_{{ b }} {
-    background: rgba({{ r }}, {{ g }}, {{ b }}, 0.05);
-    border-color: rgb({{ r }}, {{ g }}, {{ b }});
-  }
-
-{% if review_entry.review.rating == 5 %}
-  #review_preview_{{ r }}_{{ g }}_{{ b }}.review_fave {
-    background: rgba({{ r }}, {{ g }}, {{ b }}, 0.2);
-    border-color: rgb({{ r }}, {{ g }}, {{ b }});
-    border-width: 3px;
-    margin-left:  -1px;
-    margin-right: -1px;
-  }
-{% endif %}
-
-  #review_preview_{{ r }}_{{ g }}_{{ b }} a:hover {
-    background: rgba({{ r }}, {{ g }}, {{ b }}, 0.3);
-  }
-
-  #review_preview_{{ r }}_{{ g }}_{{ b }} .review_preview img {
-    box-shadow: 0px 2.5px 2.5px rgba({{ r }}, {{ g }}, {{ b }}, 0.25);
-  }
+  {% include "_review_style.css" %}
 </style>
 
 <div class="review_preview {% if review_entry.review.rating == 5 and not is_index %}review_fave{% endif %}"
diff --git a/templates/_review_style.css b/templates/_review_style.css
new file mode 100644 (file)
index 0000000..23c41eb
--- /dev/null
@@ -0,0 +1,26 @@
+{% set r = (tint_colors[review_entry.book.cover_image][0] * 255) | int %}
+{% set g = (tint_colors[review_entry.book.cover_image][1] * 255) | int %}
+{% set b = (tint_colors[review_entry.book.cover_image][2] * 255) | int %}
+
+#review_preview_{{ r }}_{{ g }}_{{ b }} {
+  background: rgba({{ r }}, {{ g }}, {{ b }}, 0.05);
+  border-color: rgb({{ r }}, {{ g }}, {{ b }});
+}
+
+{% if review_entry.review.rating == 5 %}
+  #review_preview_{{ r }}_{{ g }}_{{ b }}.review_fave {
+    background: rgba({{ r }}, {{ g }}, {{ b }}, 0.2);
+    border-color: rgb({{ r }}, {{ g }}, {{ b }});
+    border-width: 3px;
+    margin-left:  -1px;
+    margin-right: -1px;
+  }
+{% endif %}
+
+#review_preview_{{ r }}_{{ g }}_{{ b }} a:hover {
+  background: rgba({{ r }}, {{ g }}, {{ b }}, 0.3);
+}
+
+#review_preview_{{ r }}_{{ g }}_{{ b }} .review_preview img {
+  box-shadow: 0px 2.5px 2.5px rgba({{ r }}, {{ g }}, {{ b }}, 0.25);
+}