Add header images for blog posts

Author: cloudlena

package-lock.json

@@ -7,6 +7,7 @@ excerpt:
   "Avoid common serverless pitfalls and level up your game with this
   comprehensive guide covering logging, tracing, cold starts, security, and
   deployment strategies."
+image: ../../assets/blog/serverless-game.png
 ---
 
 Is your serverless project running into unexpected snags? You're not alone. From

src/assets/blog/external-engineers.png

@@ -7,6 +7,7 @@ excerpt:
   "Maximize the value of external consultants with effective onboarding, clear
   communication, and well-defined expectations to ensure they contribute
   meaningfully to your project."
+image: ../../assets/blog/external-engineers.png
 ---
 
 So, you hired external engineers to help with your project — but now you realize

src/assets/blog/serverless-game.png

@@ -2,14 +2,15 @@ import { defineCollection, z } from "astro:content";
 
 const blog = defineCollection({
   type: "content",
-  schema: z.object({
-    title: z.string(),
-    author: z.string(),
-    date: z.date(),
-    tags: z.array(z.string()),
-    excerpt: z.string(),
-    image: z.string().optional(),
-  }),
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      author: z.string(),
+      date: z.date(),
+      tags: z.array(z.string()),
+      excerpt: z.string(),
+      image: image().optional(),
+    }),
 });
 
 const customers = defineCollection({

src/content/blog/level-up-your-serverless-game.md

@@ -50,6 +50,21 @@ const ts = {
 
   // Values Section
   "values.title": "Üsi Wärte",
+  "values.empathy.title": "Empathie",
+  "values.empathy.description":
+    "Nur wenn mir üsi eigene u d Wärte, Perspektive u Gfühl vo üsem Gegenüber verstöh, chöi mir effizient mit ihne kommuniziere u zämeschaffe. Empathie tribt üs aa, aktiv zloses, enand z ungerstütze u Usefordrige mit Mitgfühl azgah – sei das mit Teammitgliedere, Chunde oder Partner.",
+  "values.transparency.title": "Transparänz",
+  "values.transparency.description":
+    "Offeni Kommunikation schafft Vertroue. Mir pflege transparänti Prozäss u Entscheidigë u steue sicher, dass aui d Informatione hei, wo si bruche. Diräkti Kommunikation hilft üs, Konflikte schnäu z löse u Missverständnis z vermiide.",
+  "values.ownership.title": "Eigeverantwortig",
+  "values.ownership.description":
+    "Eigeverantwortig bedütet, di volli Verantwortig für üsi Büetz u ihri Uswirkigë z übernäh. Mir befähige jedes Teammitglied, i sinere Rolle aus Leader z agiere u mit Verantwortigsbewusstsii u Stolz Ergebnis z erziele. Eigeverantwortig bedütet, d Initiative z ergriffe, proaktiv z handle, us Fähler z lerne u sech kontinuierlich z verbessere.",
+  "values.passion.title": "Lideschaft",
+  "values.passion.description":
+    "Üsi Begeischterig für d Art u Wiis, wie mir schaffe, u für d Lüt u Technologie, mit dene mir zämeschaffe, tribt Innovation u Kreativität aa. Öb bim Ustuusch mit üsere Community, bim Erkunde vo neue Technologie, bim Iitrete für FOSS oder bim Nochgah vo üsere aageborene Nöigier – üsi Lideschaft haut üs inspiriert u motiviert. Mir fire Nerdtum u d Freud am läbeslange Lerne.",
+  "values.simplicity.title": "Eifachheit",
+  "values.simplicity.description":
+    "Sei das i üsere Kommunikation, i Designs, Code oder Verträg – mir eliminiere unnötigi Komplexität i auem, wo mir mache. Indäm mir üs uf das konzentriere, wo würklech wichtig isch, u das i eifache Wörter kommuniziere, erliichtere mir üsem Team, üsne Chunde u Partner, effektiv u sinnvoll zäme z schaffe.",
 
   // What We Do Section
   "whatwedo.title": "Was mir mache",

src/content/blog/make-the-most-out-of-external-workforce.md

@@ -51,6 +51,21 @@ const de = {
 
   // Values Section
   "values.title": "Unsere Werte",
+  "values.empathy.title": "Empathie",
+  "values.empathy.description":
+    "Nur durch das Verständnis unserer eigenen und der Werte, Perspektiven und Gefühle unseres Gegenübers können wir effizient mit ihnen kommunizieren und zusammenarbeiten. Empathie treibt uns an, aktiv zuzuhören, einander zu unterstützen und Herausforderungen mit Mitgefühl zu begegnen – sei es mit Teammitgliedern, Kunden oder Partnern.",
+  "values.transparency.title": "Transparenz",
+  "values.transparency.description":
+    "Offene Kommunikation schafft Vertrauen. Wir pflegen transparente Prozesse und Entscheidungen und stellen sicher, dass alle die Informationen haben, die sie benötigen. Direkte Kommunikation hilft uns, Konflikte schnell zu lösen und Missverständnisse zu vermeiden.",
+  "values.ownership.title": "Eigenverantwortung",
+  "values.ownership.description":
+    "Eigenverantwortung bedeutet, die volle Verantwortung für unsere Arbeit und ihre Auswirkungen zu übernehmen. Wir befähigen jedes Teammitglied, in seiner Rolle als Leader zu agieren und mit Verantwortungsbewusstsein und Stolz Ergebnisse zu erzielen. Eigenverantwortung bedeutet, die Initiative zu ergreifen, proaktiv zu handeln, aus Fehlern zu lernen und sich kontinuierlich zu verbessern.",
+  "values.passion.title": "Leidenschaft",
+  "values.passion.description":
+    "Unsere Begeisterung für die Art und Weise, wie wir arbeiten, und für die Menschen und Technologien, mit denen wir zusammenarbeiten, treibt Innovation und Kreativität an. Ob beim Austausch mit unserer Community, beim Erkunden neuer Technologien, beim Eintreten für FOSS oder beim Nachgehen unserer angeborenen Neugier – unsere Leidenschaft hält uns inspiriert und motiviert. Wir feiern Nerdtum und die Freude am lebenslangen Lernen.",
+  "values.simplicity.title": "Einfachheit",
+  "values.simplicity.description":
+    "Sei es in unserer Kommunikation, in Designs, Code oder Verträgen – wir eliminieren unnötige Komplexität in allem, was wir tun. Indem wir uns auf das konzentrieren, was wirklich wichtig ist, und es in einfachen Worten kommunizieren, erleichtern wir es unserem Team, unseren Kunden und Partnern, effektiv und sinnvoll zusammenzuarbeiten.",
 
   // What We Do Section
   "whatwedo.title": "Was wir tun",

src/content/config.ts

@@ -1,4 +1,5 @@
 ---
+import { Image } from "astro:assets";
 import ContentDetailPage from "../../../layouts/ContentDetailPage.astro";
 import { getCollectionStaticPaths } from "../../../lib/paths";
 import { useI18n } from "../../../i18n/utils";
@@ -36,6 +37,8 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site).toString();
     publishedTime: post.data.date.toISOString(),
     author: post.data.author,
     tags: post.data.tags,
+    image: post.data.image?.src,
+    imageAlt: post.data.title,
   }}
   structuredData={{
     type: "BlogPosting",
@@ -45,8 +48,17 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site).toString();
     author: post.data.author,
     tags: post.data.tags,
     url: canonicalUrl,
+    image: post.data.image?.src,
   }}
 >
+  {
+    post.data.image && (
+      <div slot="header-after" class="header-image">
+        <Image src={post.data.image} alt={post.data.title} />
+      </div>
+    )
+  }
+
   <div slot="header-after" class="tags">
     {post.data.tags.map((tag: string) => <span class="tag">{tag}</span>)}
   </div>
@@ -55,6 +67,19 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site).toString();
 </ContentDetailPage>
 
 <style>
+  .header-image {
+    width: 100%;
+    margin-bottom: 2rem;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .header-image img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
   .tags {
     display: flex;
     flex-wrap: wrap;