feat: integrate schema.org support and enhance component structure

- Added schema.org support by introducing `schema-dts` for structured data in components.
- Updated `Head`, `BaseLayout`, and various page components to accept and utilize schema props for better SEO.
- Created new utility schemas for blog posts and website to standardize structured data implementation.
- Enhanced the `SocialLinks` section by utilizing dedicated icon components for improved maintainability.
- Refactored the `Header` component to improve accessibility and structure.
- Introduced new icons for social links and integrated them into the layout.

2 files changed, 35 insertions, 13 deletions

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index c625057..8d5169a 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -2,6 +2,7 @@
 import { type CollectionEntry, getCollection } from "astro:content";
 import Comments from "../../components/Comments.astro";
 import Layout from "../../layouts/BaseLayout.astro";
+import blogPostSchema from "../../utils/schemas/blogPostSchema";
 import dayjs from "dayjs";
 
 type Props = CollectionEntry<"blog">;
@@ -21,10 +22,21 @@ const post = Astro.props;
 
 const { Content, remarkPluginFrontmatter } = await post.render();
 
-const date = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
-const title = `${post.data.title} | Valentin Popov`;
+const title = post.data.title;
 const description = post.data.description;
+const author = post.data.author;
 const lang = post.data.lang;
+
+const formattedData = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
+const data = post.data.pubDate.toISOString();
+
+const schema = blogPostSchema({
+	siteUrl: new URL("/", Astro.site).toString(),
+	title,
+	slug: post.slug,
+	datePublished: data,
+	author,
+});
 ---
 
 <style lang="scss">
@@ -35,18 +47,18 @@ const lang = post.data.lang;
 	}
 </style>
 
-<Layout title={title} description={description} lang={lang}>
+<Layout title={title} description={description} lang={lang} schema={schema}>
 	<article>
 		<section>
-			<h1>{post.data.title}</h1>
+			<h1>{title}</h1>
 		</section>
 
 		<section>
 			<p>
 				<small>
 					Posted
-					<time datetime={post.data.pubDate.toISOString()} lang="en">{date}</time>
-					by&nbsp;{post.data.author}
+					<time datetime={data} lang="en">{formattedData}</time>
+					by&nbsp;{author}
 					<span>&nbsp;•&nbsp;</span>
 					<span>{remarkPluginFrontmatter.minutesRead}</span>
 				</small>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index f800268..611d0fc 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -3,10 +3,8 @@ import type { CollectionEntry } from "astro:content";
 import { getCollection } from "astro:content";
 import Layout from "../../layouts/BaseLayout.astro";
 import PostElement from "../../components/PostElement.astro";
-
-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 lang = "en";
+import blogSchema from "../../utils/schemas/blogSchema";
+import RSSIcon from "../../components/Icons/RSS.astro";
 
 const posts = await getCollection("blog", ({ data }) => {
 	return data.draft !== true;
@@ -24,14 +22,26 @@ const postsByYear = posts.reduce<Record<string, CollectionEntry<"blog">[]>>((acc
 }, {});
 
 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 lang = "en";
+
+const schema = blogSchema({
+	siteUrl: new URL("/", Astro.site).toString(),
+	title,
+});
 ---
 
-<Layout title={title} description={description} lang={lang}>
+<Layout title={title} description={description} lang={lang} schema={schema}>
 	<section>
-		<h1>Blog posts</h1>
+		<h1>
+			Blog posts
+			<RSSIcon />
+		</h1>
 	</section>
 
-	<section style={{ "margin-top": "3rem" }}>
+	<section>
 		{
 			years.map((year) => (
 				<div>