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