feat: generate ogImage dynamically

.github/workflows/deploy.yaml

@@ -32,7 +32,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.164.0
+      HUGO_VERSION: 0.168.0
     steps:
       - name: Install Hugo CLI
         run: |

.github/workflows/pullrequest.yaml

@@ -26,7 +26,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.164.0
+      HUGO_VERSION: 0.168.0
     steps:
       - name: Install Hugo CLI
         run: |

hugo.yaml

@@ -36,7 +36,7 @@ module:
     - source: "node_modules/@material-symbols/svg-700/rounded"
       target: "static/icons/material-symbols-rounded"
   hugoVersion:
-    min: "0.164.0"
+    min: "0.168.0"
 
 related:
   includeNewer: true

layouts/_partials/headMeta.html

@@ -33,8 +33,9 @@
     website
   {{- end -}}"
 />
-<meta property="og:image" content="{{ .Site.BaseURL }}og-image.jpg" />
-<meta property="og:image:type" content="image/jpg" />
+{{- $ogImage := (partial "helper/ogImage" .) -}}
+<meta property="og:image" content="{{ $ogImage.Permalink }}" />
+<meta property="og:image:type" content="image/jpeg" />
 <meta property="og:image:width" content="1200" />
 <meta property="og:image:height" content="630" />
 {{- $isNoIndexPage := or (in .RelPermalink "/privacy/") (in .RelPermalink "/imprint/") (eq .RelPermalink "/404.html") (in .RelPermalink "/404/") -}}

layouts/_partials/helper/ogImage.html

@@ -0,0 +1,18 @@
+{{- $contentImage := (partial "helper/contentImage" .).firstImage -}}
+{{- if reflect.IsImageResourceProcessable $contentImage -}}
+  {{- $image := $contentImage.Fill "1200x630 center jpg q85" -}}
+  {{- $logo := resources.Get "images/og-image-overlay.jpg" -}}
+  {{- $overlay := images.Overlay $logo 0 540 -}}
+  {{- $title := truncate 35 .Title -}}
+  {{- $text := images.Text $title (dict
+    "color" "#000000"
+    "size" 48
+    "x" 15
+    "y" 556
+    )
+  -}}
+  {{- $image := $image | images.Filter $overlay | images.Filter $text -}}
+  {{- return $image -}}
+{{- else -}}
+  {{- return "{{ .Site.BaseURL }}og-image.jpg" -}}
+{{- end -}}

layouts/_partials/structuredData.html

@@ -12,7 +12,7 @@
   {{ $mainEntity = "FAQPage" }}
 {{ end }}
 
-{{ $image := (partial "helper/contentImage" .).firstImage.Permalink }}
+{{ $image := (partial "helper/ogImage" .).Permalink }}
 
 <script type="application/ld+json">{
   "@context": "https://schema.org",

layouts/rss.xml

@@ -13,7 +13,7 @@
             {{ $cleanedHTML := .Summary | plainify | transform.XMLEscape | safeHTML }}
             <description>{{ $cleanedHTML }}</description>
             <pubDate>{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
-            {{- with (partial "helper/contentImage" .).firstImage -}}
+            {{- with (partial "helper/ogImage" .) -}}
             <enclosure url="{{- .Permalink -}}" />
             {{- end -}}
         </item>

netlify.toml

@@ -3,4 +3,4 @@
   publish = "public"
 
 [build.environment]
-  HUGO_VERSION = "0.164.0"
+  HUGO_VERSION = "0.168.0"