Fixed styles for code.

config.toml

@@ -1,5 +1,5 @@
 # The URL the site will be built for
-title = "s3rius"
+title = "s3rius blog"
 base_url = "https://s3rius.blog"
 theme = "hermit_zola"
 compile_sass = true

content/posts/kube-intro/index.md

@@ -2,6 +2,11 @@
 title = "Intro to kubernetes"
 weight = 0
 date = "2025-07-22"
+
+[extra]
+image = "posts/kube-intro/preview.png"
+image_width = 1200
+image_height = 720
 +++
 
 ![Intro](./imgs/intro.png)

themes/hermit_zola/sass/style.scss

@@ -82,6 +82,7 @@ pre {
 
   code[data-name] {
     display: block;
+    position: relative;
     padding-top: 2em !important;
 
     &::before {
@@ -91,7 +92,7 @@ pre {
       top: 0;
       left: 0;
       padding-left: 1em;
-      padding-top: 0.7em;
+      padding-top: 0.2em;
       width: 100%;
       background-color: $midnightblue;
       z-index: 1;

themes/hermit_zola/templates/index.html

@@ -19,6 +19,48 @@
     rel="shortcut icon"
     href="{{get_url(path="favicon.ico")}}"
   />
+
+  <!-- Open Graph -->
+  <meta property="og:type" content="{% if page and page.relative_path is starting_with("posts") %}article{% else %}website{% endif %}" />
+  <meta property="og:site_name" content="{{config.title}}" />
+  {% if page.title %}
+  <meta property="og:title" content="{{page.title}}" />
+  <meta name="twitter:title" content="{{page.title}}" />
+  {% else %}
+  <meta property="og:title" content="{{config.title}}" />
+  <meta name="twitter:title" content="{{config.title}}" />
+  {% endif %}
+  {% if page.description %}
+  <meta property="og:description" content="{{page.description}}" />
+  <meta name="twitter:description" content="{{page.description}}" />
+  {% else %}
+  <meta property="og:description" content="{{config.extra.home_subtitle}}" />
+  <meta name="twitter:description" content="{{config.extra.home_subtitle}}" />
+  {% endif %}
+  {% if page.relative_url %}
+  <meta property="og:url" content="{{get_url(path=page.relative_url)}}" />
+  {% 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}}" />
+
+  <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}}" />
+  {% 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" />
+
+  <meta name="twitter:image" content="{{get_url(path='preview.png')}}" />
+  <meta name="twitter:image:width" content="1200" />
+  <meta name="twitter:image:height" content="720" />
+  {% endif %}
+
+  <!-- Twitter/X -->
   <link rel="stylesheet" href="{{get_url(path="style.css")}}"/>
   {% if page.title %}
   <title>{{page.title}}</title>
@@ -78,15 +120,14 @@
         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 href="https://unpkg.com/highlightjs-badge/highlightjs/styles/{{config.extra.highlightjs.theme}}.css" rel="stylesheet">
-		<!-- https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.1/build/styles/  for min version -->
-		<script src="https://unpkg.com/highlightjs-badge/highlightjs/highlight.pack.js"></script>
+    <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>
-			var pres = document.querySelectorAll("pre>code");
-			for (var i = 0; i < pres.length; i++) {
-				hljs.highlightBlock(pres[i]);
-			}
+      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>

values.yaml

@@ -11,6 +11,7 @@ ingress:
   annotations:
     cert-manager.io/cluster-issuer: cert-issuer
     external-dns.alpha.kubernetes.io/hostname: s3rius.blog
+    external-dns.alpha.kubernetes.io/cloudflare-proxied: "false"
   tls:
     - hosts:
         - s3rius.blog