From 54dd3042f8150c8b945fac41851bc7d8074e685c Mon Sep 17 00:00:00 2001
From: Pavel Kirilin <win10@list.ru>
Date: Fri, 25 Jul 2025 19:06:54 +0200
Subject: [PATCH] Fixed code styles and preview images.

---
 config.toml                             |  8 +---
 content/posts/kube-intro/index.md       |  4 +-
 themes/hermit_zola/sass/style.scss      | 10 ++---
 themes/hermit_zola/templates/index.html | 54 +++++++------------------
 4 files changed, 23 insertions(+), 53 deletions(-)

diff --git a/config.toml b/config.toml
index 2743382..e872c65 100644
--- a/config.toml
+++ b/config.toml
@@ -3,7 +3,7 @@ title = "s3rius blog"
 base_url = "https://s3rius.blog"
 theme = "hermit_zola"
 compile_sass = true
-minify_html = true
+minify_html = false
 
 build_search_index = true
 generate_sitemap = true
@@ -16,6 +16,7 @@ render_emojis = true
 smart_punctuation = true
 
 [extra]
+preview_image = "preview.png"
 home_subtitle = "Notes on writing unmaintainable software"
 
 footer_copyright = ' &#183; <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
@@ -32,11 +33,6 @@ hermit_social = [
 ]
 
 
-[extra.highlightjs]
-enable = true
-clipboard = true
-theme = "https://unpkg.com/nord-highlightjs@0.1.0/dist/nord.css"
-
 [extra.author]
 name = "Pavel Kirilin"
 email = "s3rius@le-memese.com"
diff --git a/content/posts/kube-intro/index.md b/content/posts/kube-intro/index.md
index f63ed07..fa79d6f 100644
--- a/content/posts/kube-intro/index.md
+++ b/content/posts/kube-intro/index.md
@@ -4,9 +4,7 @@ weight = 0
 date = "2025-07-22"
 
 [extra]
-image = "posts/kube-intro/preview.png"
-image_width = 1200
-image_height = 720
+preview_image = "posts/kube-intro/preview.png"
 +++
 
 ![Intro](./imgs/intro.png)
diff --git a/themes/hermit_zola/sass/style.scss b/themes/hermit_zola/sass/style.scss
index 89315ea..a9df7f5 100644
--- a/themes/hermit_zola/sass/style.scss
+++ b/themes/hermit_zola/sass/style.scss
@@ -42,7 +42,7 @@ pre tt {
 
 pre {
   max-height: 40em;
-  padding: 0.7em 1.1em;
+  padding: 0em;
   overflow: auto;
   overflow-y: auto;
   overflow-x: scroll;
@@ -67,7 +67,8 @@ pre {
   }
 
   code {
-    padding: 0;
+    display: block;
+    padding: 0.7em;
     margin: 0;
 
     table {
@@ -81,7 +82,6 @@ pre {
   }
 
   code[data-name] {
-    display: block;
     position: relative;
     padding-top: 2em !important;
 
@@ -91,10 +91,10 @@ pre {
       font-weight: bold;
       top: 0;
       left: 0;
-      padding-left: 1em;
+      padding-left: 0.7em;
       padding-top: 0.2em;
       width: 100%;
-      background-color: $midnightblue;
+      background-color: $highlight-grey;
       z-index: 1;
       color: $text;
     }
diff --git a/themes/hermit_zola/templates/index.html b/themes/hermit_zola/templates/index.html
index 5254c11..6d5f22b 100644
--- a/themes/hermit_zola/templates/index.html
+++ b/themes/hermit_zola/templates/index.html
@@ -42,22 +42,24 @@
   {% endif %}
 
   <meta name="twitter:card" content="summary_large_image" />
-  {% if page.extra and page.extra.image %}
-  <meta property="og:image" content="{{get_url(path=page.extra.image)}}" />
-  <meta property="og:image:width" content="{{page.extra.image_width}}" />
-  <meta property="og:image:height" content="{{page.extra.image_height}}" />
+  {% if page.extra and page.extra.preview_image %}
+  {% set meta = get_image_metadata(path=page.extra.preview_image) %}
+  <meta property="og:image" content="{{get_url(path=page.extra.preview_image)}}" />
+  <meta property="og:image:width" content="{{meta.width}}" />
+  <meta property="og:image:height" content="{{meta.height}}" />
 
-  <meta name="twitter:image" content="{{get_url(path=page.extra.image)}}" />
-  <meta name="twitter:image:width" content="{{page.extra.image_width}}" />
-  <meta name="twitter:image:height" content="{{page.extra.image_height}}" />
+  <meta name="twitter:image" content="{{get_url(path=page.extra.preview_image)}}" />
+  <meta name="twitter:image:width" content="{{meta.width}}" />
+  <meta name="twitter:image:height" content="{{meta.height}}" />
   {% else %}
-  <meta property="og:image" content="{{get_url(path='preview.png')}}" />
-  <meta property="og:image:width" content="1200" />
-  <meta property="og:image:height" content="720" />
+  {% set meta = get_image_metadata(path=config.extra.preview_image) %}
+  <meta property="og:image" content="{{get_url(path=config.extra.preview_image)}}" />
+  <meta property="og:image:width" content="{{meta.width}}" />
+  <meta property="og:image:height" content="{{meta.height}}" />
 
-  <meta name="twitter:image" content="{{get_url(path='preview.png')}}" />
-  <meta name="twitter:image:width" content="1200" />
-  <meta name="twitter:image:height" content="720" />
+  <meta name="twitter:image" content="{{get_url(path=config.extra.preview_image)}}" />
+  <meta name="twitter:image:width" content="{{meta.width}}" />
+  <meta name="twitter:image:height" content="{{meta.height}}" />
   {% endif %}
 
   <!-- Twitter/X -->
@@ -119,32 +121,6 @@
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
         onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script>
 
-    {% if config.extra.highlightjs.enable %}
-    <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/default.min.css">
-    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/highlight.min.js"></script>
-    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/languages/dockerfile.min.js"></script>
-		<script src="https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js"></script>
-
-		<link href="{{config.extra.highlightjs.theme}}" rel="stylesheet">
-		<script>
-      hljs.highlightAll("pre>code");
-		</script>
-		{% if config.extra.highlightjs.clipboard %}
-			<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
-			<script>
-				var options = {
-					copyIconClass: "gg-clipboard",
-					checkIconClass: "gg-check"
-				};
-				window.highlightJsBadge(options);
-			</script>
-		{% endif %}
-
-	{% endif %}
-
-	{% if not config.extra.highlightjs.enable %}
-	<script src="{{get_url(path="js/copy.js")}}"></script>
-	{% endif %}
 	<script src="{{get_url(path="js/main.js")}}"></script>
 
     {% block js_footer %}