rendered HTML minification

2024-09-22 19:22:02 +03:00 · 2024-09-06 14:52:16 +03:00 · 2024-09-06 14:52:16 +03:00 · 08e597ccd9
commit 08e597ccd9
parent 6dc4b53ce0
6 changed files with 133 additions and 67 deletions
--- a/README.md
+++ b/README.md
@ -24,6 +24,12 @@ I didn't want to create a 404 page. I wanted to keep things simple so that all p

 **CLOUDFLARE CREATE A DEFAULT 404 PAGE PLEASE**

+## About HTML minification
+
+The build script has some issues with indentation and code beautification. I'm too lazy to fix them, so I decided to minify the rendered HTML instead.
+
+I'm using [this excellent tool](https://github.com/wilsonzlin/minify-html) to minify rendered HTML.
+
 ## A little historical note

 Previously, I didn't want to simplify the site that much, and there are a lot more pages and material here. You can see the old version [here](https://41ecb9be.arbuzicu.pages.dev/).
--- a/blog_template.html
+++ b/blog_template.html
@ -1 +1,41 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta property="og:site_name" content="Arbuz?">{{%META%}}<link rel="stylesheet" href="/custom.css"><link rel="stylesheet" href="/favicon.ico"><link rel="icon" href="https://avatars.githubusercontent.com/u/61203964"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script><script>hljs.highlightAll()</script><title>{{%TITLE%}}</title></head><body><nav><b>mrkrk</b><a href="/">Home</a><a href="/projects">Projects</a></nav><main class="mc">{{%CONTENT%}}</main><script>MathJax={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},svg:{fontCache:"global"}}</script><script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script></body></html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta property="og:site_name" content="Arbuz?">
+    {{%META%}}
+    <link rel="stylesheet" href="/custom.css">
+    <link rel="stylesheet" href="/favicon.ico">
+    <link rel="icon" href="https://avatars.githubusercontent.com/u/61203964">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
+    <script>
+      hljs.highlightAll()
+    </script>
+    <title>{{%TITLE%}}</title>
+  </head>
+  <body>
+    <nav>
+      <b>mrkrk</b>
+      <a href="/">Home</a>
+      <a href="/projects">Projects</a>
+    </nav>
+    <main class="mc">{{%CONTENT%}}</main>
+    <script>
+      MathJax = {
+        tex: {
+          inlineMath: [
+            ["$", "$"],
+            ["\\(", "\\)"]
+          ]
+        },
+        svg: {
+          fontCache: "global"
+        }
+      }
+    </script>
+    <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
+  </body>
+</html>
--- a/build.py
+++ b/build.py
@ -1,7 +1,9 @@
 import os
 import shutil
 import json
+
 import mistune
+import minify_html

 markdown_renderer = mistune.create_markdown(
    plugins=[
@ -61,10 +63,12 @@ def generate_html_content(directory, filename, is_blog=False):

    template_to_use = blog_template_text if is_blog else template_text

-    return (
+    return minify_html.minify(
        template_to_use.replace("{{%CONTENT%}}", markdown_renderer(md_text))
        .replace("{{%TITLE%}}", meta.get("title", ""))
-        .replace("{{%META%}}", meta_data)
+        .replace("{{%META%}}", meta_data),
+        minify_js=True,
+        remove_processing_instructions=True,
    )


--- a/requirements.txt
+++ b/requirements.txt
@ -1 +1,2 @@
-mistune
+mistune
+minify-html
--- a/static/custom.css
+++ b/static/custom.css
@ -1,25 +1,24 @@
 :root {
-    --font: 'Onest', sans-serif;
+    --font: "Onest", sans-serif;
    --bg-color: #15171f;
    --font-color: #dadada;
    --nav-font-color: white;
    --font-size: 1.2rem;
-}
-
-@font-face {
+  }
+  
+  @font-face {
    src: url("./fonts/Onest-Medium.ttf");
    font-family: "Onest";
    font-weight: bold;
-}
-
-@font-face {
+  }
+  
+  @font-face {
    src: url("./fonts/Onest-Regular.ttf");
    font-family: "Onest";
    font-weight: normal;
-}
-
-
-body {
+  }
+  
+  body {
    margin: 1rem auto;
    background-color: var(--bg-color);
    font-family: var(--font);
@ -28,57 +27,60 @@ body {
    line-height: 1.8;
    max-width: min(54rem, 85%);
    padding: 0 1rem;
-}
-
-nav * {
-  margin-right: 1rem;
-  color: var(--nav-font-color);
-}
-
-img {
-  max-inline-size: 85%;
-  block-size: auto;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.mc {
+  }
+  
+  nav * {
+    margin-right: 1rem;
+    color: var(--nav-font-color);
+  }
+  
+  img {
+    max-inline-size: 85%;
+    block-size: auto;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .mc {
    overflow-x: auto;
    text-align: justify;
-}
-
-nav a {
+  }
+  
+  nav a {
    text-decoration: none;
-}
-
-/* РАЗМЕТКА */
-.mc h1, .mc h2, .mc h3, .mc h4, .mc h5 {
+  }
+  
+  .mc h1,
+  .mc h2,
+  .mc h3,
+  .mc h4,
+  .mc h5 {
    color: #fff;
-    text-align: left!important;
-}
-
-.mc a {
+    text-align: left !important;
+  }
+  
+  .mc a {
    color: #fff;
    font-weight: 400;
-    text-align: left!important;
-}
-
-.mc a:hover {
+    text-align: left !important;
+  }
+  
+  .mc a:hover {
    text-decoration: underline;
-}
-
-.mc code {
+  }
+  
+  .mc code {
    color: #fff;
    background-color: #0d0e13;
    border-radius: 0.1rem;
-}
-
-.mc pre {
+  }
+  
+  .mc pre {
    background-color: #0d0e13;
-}
-
-.mc table {
+  }
+  
+  .mc table {
    display: block;
    overflow-x: auto;
    width: 100%;
@ -87,16 +89,11 @@ nav a {
    border-collapse: collapse;
    white-space: nowrap;
    margin-bottom: 15px;
-}
-
-.mc table * {
-
-}
-
-.mc table td, table th {
+  }
+  
+  .mc table td,
+  table th {
    padding: 15px;
    border-bottom: 1px solid #d6d6d6;
-}
-
-
-img[alt=play_button_exp] { width: 120px; }
+  }
+  
--- a/template.html
+++ b/template.html
@ -1 +1,19 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">{{%META%}}<link rel="stylesheet" href="/custom.css"><link rel="icon" href="/favicon.ico"><title>{{%TITLE%}}</title></head><body><nav data-nosnippet><b>mrkrk</b><a href="/">Home</a><a href="/projects">Projects</a></nav><main class="mc">{{%CONTENT%}}</main></body></html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    {{%META%}}
+    <link rel="stylesheet" href="/custom.css">
+    <link rel="icon" href="/favicon.ico">
+    <title>{{%TITLE%}}</title>
+  </head>
+  <body>
+    <nav data-nosnippet>
+      <b>mrkrk</b>
+      <a href="/">Home</a>
+      <a href="/projects">Projects</a>
+    </nav>
+    <main class="mc">{{%CONTENT%}}</main>
+  </body>
+</html>