feat: implement Open Graph image generation and enhance configuration

- Added ogImages integration to generate Open Graph images for blog posts.
- Updated configuration to include Open Graph settings and default preview image.
- Refactored Head component to utilize new preview property for Open Graph meta tags.
- Enhanced blog post schema to include preview image for structured data representation.
- Introduced utility functions for creating Open Graph images with dynamic content.

src/pages/404.astro

@@ -1,9 +1,11 @@
 ---
+import { config } from "../config";
 import Layout from "../layouts/BaseLayout.astro";
 import pageSchema from "../utils/schemas/pageSchema";
 
 const title = "404 — Page Not Found | Valentin Popov";
 const description = "The page you're looking for doesn't exist!";
+const preview = config.og.defaultPreview;
 const lang = "en";
 
 const schema = pageSchema({
@@ -15,7 +17,7 @@ const schema = pageSchema({
 });
 ---
 
-<Layout title={title} description={description} lang={lang} schema={schema}>
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
 	<div style={{ "text-align": "center" }}>
 		<h1>404</h1>
 		<p><strong>Page not found</strong></p>

src/pages/blog/[...slug].astro

@@ -25,6 +25,7 @@ const { Content, remarkPluginFrontmatter } = await post.render();
 const description = post.data.description;
 const isBasedOn = post.data.basedOn;
 const lang = post.data.lang;
+const preview = `/images/preview/${post.slug}.png`;
 const slug = post.slug;
 const title = post.data.title;
 
@@ -34,13 +35,14 @@ const formattedDate = dayjs(post.data.datePublished.toString()).format("MMMM DD,
 
 const schema = blogPostSchema({
 	siteUrl: new URL("/", Astro.site).toString(),
-	title,
-	description,
-	slug,
-	datePublished,
 	dateModified,
-	lang,
+	datePublished,
+	description,
 	isBasedOn,
+	lang,
+	preview,
+	slug,
+	title,
 });
 ---
 
@@ -52,7 +54,7 @@ const schema = blogPostSchema({
 	}
 </style>
 
-<Layout title={title} description={description} lang={lang} schema={schema}>
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
 	<article>
 		<header>
 			<h1>{title}</h1>

src/pages/blog/index.astro

@@ -1,9 +1,10 @@
 ---
 import type { CollectionEntry } from "astro:content";
+import { config } from "../../config";
 import { getCollection } from "astro:content";
+import blogSchema from "../../utils/schemas/blogSchema";
 import Layout from "../../layouts/BaseLayout.astro";
 import PostElement from "../../components/PostElement.astro";
-import blogSchema from "../../utils/schemas/blogSchema";
 import RSSIcon from "../../components/Icons/RSS.astro";
 
 const posts = await getCollection("blog", ({ data }) => {
@@ -25,6 +26,7 @@ const years = Object.keys(postsByYear).sort((a, b) => Number(b) - Number(a));
 
 const title = "Valentin Popov's Blog | Software Development, Leadership & Open-Source";
 const description = "Explore Valentin Popov's blog on software development, tech leadership, and open-source experiments. Stay updated with in-depth tutorials and expert insights.";
+const preview = config.og.defaultPreview;
 const lang = "en";
 
 const schema = blogSchema({
@@ -34,7 +36,7 @@ const schema = blogSchema({
 });
 ---
 
-<Layout title={title} description={description} lang={lang} schema={schema}>
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
 	<section>
 		<h1>
 			Blog posts

src/pages/index.astro

@@ -1,12 +1,14 @@
 ---
-import Layout from "../layouts/BaseLayout.astro";
+import { config } from "../config";
 import LatestPostsSection from "../components/Sections/LatestPosts.astro";
+import Layout from "../layouts/BaseLayout.astro";
+import pageSchema from "../utils/schemas/pageSchema";
 import SocialLinksSection from "../components/Sections/SocialLinks.astro";
 import WelcomeSection from "../components/Sections/Welcome.astro";
-import pageSchema from "../utils/schemas/pageSchema";
 
 const title = "Valentin Popov – Software Developer & Team Lead | Tech Insights";
 const description = "Blog by Valentin Popov — software developer and team lead writing about code, side projects, digital tools, and fun experiments.";
+const preview = config.og.defaultPreview;
 const lang = "en";
 
 const schema = pageSchema({
@@ -18,7 +20,7 @@ const schema = pageSchema({
 });
 ---
 
-<Layout title={title} description={description} lang={lang} schema={schema}>
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
 	<WelcomeSection />
 	<SocialLinksSection />
 	<LatestPostsSection />