Added previews.

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/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>