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.
2025-07-04 00:20:26 +03:00 · 2025-06-11 23:20:36 +00:00
parent 16fa8a3b5d
commit 67f245a48f
22 changed files with 383 additions and 209 deletions
--- a/src/components/Analytics.astro
+++ b/src/components/Analytics.astro
@ -1,2 +1 @@
-<!-- AppMetrix -->
 <script is:inline defer src="https://appmetrix.com/pixel/T5X0z12SoASBV8Dv"></script>
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@ -1,11 +1,15 @@
 ---
+import type { WithContext, Thing } from "schema-dts";
+import JsonLd from "./JsonLd.astro";
+
 type Props = {
 	readonly description: string;
 	readonly title: string;
+	readonly schema: WithContext<Thing>;
 };

 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-const { description, title } = Astro.props;
+const { description, title, schema } = Astro.props;
 ---

 <head>
@ -27,4 +31,6 @@ const { description, title } = Astro.props;
 	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 	<link rel="manifest" href="/manifest.json" />
 	<meta name="theme-color" content="#ffffff" />
+
+	<JsonLd schema={schema} />
 </head>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@ -1,7 +1,6 @@
 <style lang="scss">
 	a {
 		margin-right: 1.5rem;
-		text-decoration: none;

 		&:last-child {
 			margin-right: 0;
@ -10,6 +9,8 @@
 </style>

 <header>
-	<a href="/" lang="en" aria-label="Home">Home</a>
-	<a href="/blog/" lang="en" aria-label="Blog">Blog</a>
+	<nav aria-label="Navigation">
+		<a href="/" lang="en" aria-label="Home">Home</a>
+		<a href="/blog/" lang="en" aria-label="Blog">Blog</a>
+	</nav>
 </header>
--- a/src/components/Icons/Email.astro
+++ b/src/components/Icons/Email.astro
@ -0,0 +1,20 @@
+<style lang="scss">
+	@use "../../scss/variables" as *;
+
+	a {
+		color: $colorText;
+		display: inline-block;
+		margin: 0 0.5rem;
+	}
+
+	svg {
+		vertical-align: middle;
+	}
+</style>
+
+<a href="mailto:valentin@popov.link" title="E-Mail" target="_blank">
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="E-Mail">
+		<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+		<polyline points="22,6 12,13 2,6"></polyline>
+	</svg>
+</a>
--- a/src/components/Icons/GitHub.astro
+++ b/src/components/Icons/GitHub.astro
@ -0,0 +1,22 @@
+<style lang="scss">
+	@use "../../scss/variables" as *;
+
+	a {
+		color: $colorText;
+		display: inline-block;
+		margin: 0 0.5rem;
+	}
+
+	svg {
+		vertical-align: middle;
+	}
+</style>
+
+<a href="https://github.com/valentineus" title="GitHub" target="_blank">
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="GitHub">
+		<path
+			d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+		>
+		</path>
+	</svg>
+</a>
--- a/src/components/Icons/LinkedIn.astro
+++ b/src/components/Icons/LinkedIn.astro
@ -0,0 +1,21 @@
+<style lang="scss">
+	@use "../../scss/variables" as *;
+
+	a {
+		color: $colorText;
+		display: inline-block;
+		margin: 0 0.5rem;
+	}
+
+	svg {
+		vertical-align: middle;
+	}
+</style>
+
+<a href="https://www.linkedin.com/in/valentineus/" title="LinkedIn" target="_blank">
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="LinkedIn">
+		<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+		<rect x="2" y="9" width="4" height="12"></rect>
+		<circle cx="4" cy="4" r="2"></circle>
+	</svg>
+</a>
--- a/src/components/Icons/RSS.astro
+++ b/src/components/Icons/RSS.astro
@ -0,0 +1,17 @@
+<style lang="scss">
+	a {
+		display: inline-block;
+	}
+
+	svg {
+		vertical-align: middle;
+	}
+</style>
+
+<a href="/feed.xml" title="RSS Feed" target="_blank">
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="RSS Feed">
+		<path d="M4 11a9 9 0 0 1 9 9"></path>
+		<path d="M4 4a16 16 0 0 1 16 16"></path>
+		<circle cx="5" cy="19" r="1"></circle>
+	</svg>
+</a>
--- a/src/components/JsonLd.astro
+++ b/src/components/JsonLd.astro
@ -0,0 +1,12 @@
+---
+import type { WithContext, Thing } from "schema-dts";
+
+type Props = {
+	readonly schema: WithContext<Thing>;
+};
+
+const { schema } = Astro.props;
+const json = JSON.stringify(schema);
+---
+
+<script is:inline type="application/ld+json" set:html={json} />
--- a/src/components/Sections/LatestPosts.astro
+++ b/src/components/Sections/LatestPosts.astro
@ -1,6 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import dayjs from "dayjs";
+import RSSIcon from "../Icons/RSS.astro";

 const posts = await getCollection("blog", ({ data }) => {
 	return data.draft !== true;
@ -21,7 +22,7 @@ const latestPosts = posts.slice(0, 5);
 </style>

 <section>
-	<h2>Latest posts</h2>
+	<h2>Latest posts <RSSIcon /></h2>
 	<ul>
 		{
 			latestPosts.map((post) => (
@ -29,7 +30,12 @@ const latestPosts = posts.slice(0, 5);
 					<a href={`/blog/${post.slug}`} lang={post.data.lang}>
 						{post.data.title}
 					</a>
-					<small>{dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY")}</small>
+
+					<small>
+						<time datetime={post.data.pubDate.toISOString()} lang="en">
+							{dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY")}
+						</time>
+					</small>
 				</li>
 			))
 		}
--- a/src/components/Sections/SocialLinks.astro
+++ b/src/components/Sections/SocialLinks.astro
@ -1,43 +1,19 @@
-<style lang="scss">
-	@use "../../scss/variables" as *;
+---
+import GitHubIcon from "../Icons/GitHub.astro";
+import LinkedInIcon from "../Icons/LinkedIn.astro";
+import EmailIcon from "../Icons/Email.astro";
+---

+<style lang="scss">
 	div {
 		margin-bottom: 2rem;
 	}
-
-	a {
-		display: inline-block;
-		margin: 0 0.5rem;
-		color: $colorText;
-		text-decoration: none;
-	}
-	a svg {
-		vertical-align: middle;
-	}
 </style>

 <section>
 	<div>
-		<a href="https://github.com/valentineus" title="GitHub" target="_blank">
-			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="GitHub">
-				<path
-					d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
-				>
-				</path>
-			</svg>
-		</a>
-		<a href="mailto:valentin@popov.link" title="E-Mail" target="_blank">
-			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="E-Mail">
-				<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
-				<polyline points="22,6 12,13 2,6"></polyline>
-			</svg>
-		</a>
-		<a href="/feed.xml" title="RSS" target="_blank">
-			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="RSS">
-				<path d="M4 11a9 9 0 0 1 9 9"></path>
-				<path d="M4 4a16 16 0 0 1 16 16"></path>
-				<circle cx="5" cy="19" r="1"></circle>
-			</svg>
-		</a>
+		<GitHubIcon />
+		<LinkedInIcon />
+		<EmailIcon />
 	</div>
 </section>
--- a/src/components/Sections/Welcome.astro
+++ b/src/components/Sections/Welcome.astro
@ -1,6 +1,6 @@
 <section>
 	<div>
-		<h1>Hi, I'm Valentin Popov 👋</h1>
+		<h1>Hi, I'm Valentin 👋</h1>
 		<p>I'm a professional software developer currently working as a project manager and team lead. On my personal website, I share thoughts on tech, leadership, and digital life.</p>
 		<p>Welcome, and feel free to explore!</p>
 	</div>
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -1,4 +1,5 @@
 ---
+import type { WithContext, Thing } from "schema-dts";
 import Analytics from "../components/Analytics.astro";
 import Head from "../components/Head.astro";
 import Header from "../components/Header.astro";
@ -8,13 +9,14 @@ type Props = {
 	readonly description: string;
 	readonly title: string;
 	readonly lang: string;
+	readonly schema: WithContext<Thing>;
 };

-const { title, description, lang } = Astro.props;
+const { title, description, lang, schema } = Astro.props;
 ---

 <html lang={lang}>
-	<Head title={title} description={description} />
+	<Head title={title} description={description} schema={schema} />

 	<body>
 		<main>
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@ -1,13 +1,19 @@
 ---
 import Layout from "../layouts/BaseLayout.astro";
+import websiteSchema from "../utils/schemas/websiteSchema";

 const title = "404 — Page Not Found | Valentin Popov";
 const description = "The page you're looking for doesn't exist!";
 const lang = "en";
+
+const schema = websiteSchema({
+	siteUrl: new URL("/", Astro.site).toString(),
+	title,
+});
 ---

-<Layout title={title} description={description} lang={lang}>
-	<div style="text-align:center;">
+<Layout title={title} description={description} lang={lang} schema={schema}>
+	<div style={{ "text-align": "center" }}>
 		<h1>404</h1>
 		<p><strong>Page not found</strong></p>
 		<p>
--- 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>
--- 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>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -3,13 +3,19 @@ import Layout from "../layouts/BaseLayout.astro";
 import LatestPostsSection from "../components/Sections/LatestPosts.astro";
 import SocialLinksSection from "../components/Sections/SocialLinks.astro";
 import WelcomeSection from "../components/Sections/Welcome.astro";
+import websiteSchema from "../utils/schemas/websiteSchema";

 const title = "Valentin Popov – Software Developer & Team Lead | Tech Insights";
-const description = "Valentin Popov is an experienced project manager and team lead sharing expert insights on software development, leadership, and digital innovation.";
+const description = "Blog by Valentin Popov — software developer and team lead writing about code, side projects, digital tools, and fun experiments.";
 const lang = "en";
+
+const schema = websiteSchema({
+	siteUrl: new URL("/", Astro.site).toString(),
+	title,
+});
 ---

-<Layout title={title} description={description} lang={lang}>
+<Layout title={title} description={description} lang={lang} schema={schema}>
 	<WelcomeSection />
 	<SocialLinksSection />
 	<LatestPostsSection />
--- a/src/utils/schemas/blogPostSchema.ts
+++ b/src/utils/schemas/blogPostSchema.ts
@ -0,0 +1,21 @@
+import type { WithContext, BlogPosting } from "schema-dts";
+
+export type BlogPostSchemaParams = {
+	readonly siteUrl: string;
+	readonly title: string;
+	readonly slug: string;
+	readonly datePublished: string;
+	readonly author: string;
+};
+
+export default ({ siteUrl, title, slug, datePublished, author }: BlogPostSchemaParams): WithContext<BlogPosting> => ({
+	"@context": "https://schema.org",
+	"@type": "BlogPosting",
+	"url": new URL(`/blog/${slug}`, siteUrl).toString(),
+	"headline": title,
+	"datePublished": datePublished,
+	"author": {
+		"@type": "Person",
+		"name": author,
+	},
+});
--- a/src/utils/schemas/blogSchema.ts
+++ b/src/utils/schemas/blogSchema.ts
@ -0,0 +1,13 @@
+import type { WithContext, Blog } from "schema-dts";
+
+export type BlogSchemaParams = {
+	readonly siteUrl: string;
+	readonly title: string;
+};
+
+export default ({ siteUrl, title }: BlogSchemaParams): WithContext<Blog> => ({
+	"@context": "https://schema.org",
+	"@type": "Blog",
+	"url": new URL("/blog/", siteUrl).toString(),
+	"name": title,
+});
--- a/src/utils/schemas/websiteSchema.ts
+++ b/src/utils/schemas/websiteSchema.ts
@ -0,0 +1,13 @@
+import type { WithContext, WebSite } from "schema-dts";
+
+export type WebsiteSchemaParams = {
+	readonly siteUrl: string;
+	readonly title: string;
+};
+
+export default ({ siteUrl, title }: WebsiteSchemaParams): WithContext<WebSite> => ({
+	"@context": "https://schema.org",
+	"@type": "WebSite",
+	"url": new URL("/", siteUrl).toString(),
+	"name": title,
+});