aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorValentin Popov <valentin@popov.link>2025-06-12 02:20:36 +0300
committerValentin Popov <valentin@popov.link>2025-06-12 02:20:36 +0300
commit67f245a48faf6e89989aca2ea571b657fd4c8888 (patch)
tree110c7f4f842d30ef1c79d916d40e143d30adec5a /src
parent16fa8a3b5de7dd7c4fa763fecbba0063f6b4369b (diff)
downloadpopov.link-67f245a48faf6e89989aca2ea571b657fd4c8888.tar.xz
popov.link-67f245a48faf6e89989aca2ea571b657fd4c8888.zip
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.
Diffstat (limited to 'src')
-rw-r--r--src/components/Analytics.astro1
-rw-r--r--src/components/Head.astro8
-rw-r--r--src/components/Header.astro7
-rw-r--r--src/components/Icons/Email.astro20
-rw-r--r--src/components/Icons/GitHub.astro22
-rw-r--r--src/components/Icons/LinkedIn.astro21
-rw-r--r--src/components/Icons/RSS.astro17
-rw-r--r--src/components/JsonLd.astro12
-rw-r--r--src/components/Sections/LatestPosts.astro10
-rw-r--r--src/components/Sections/SocialLinks.astro42
-rw-r--r--src/components/Sections/Welcome.astro2
-rw-r--r--src/layouts/BaseLayout.astro6
-rw-r--r--src/pages/404.astro10
-rw-r--r--src/pages/blog/[...slug].astro24
-rw-r--r--src/pages/blog/index.astro24
-rw-r--r--src/pages/index.astro10
-rw-r--r--src/utils/schemas/blogPostSchema.ts21
-rw-r--r--src/utils/schemas/blogSchema.ts13
-rw-r--r--src/utils/schemas/websiteSchema.ts13
19 files changed, 223 insertions, 60 deletions
diff --git a/src/components/Analytics.astro b/src/components/Analytics.astro
index 3be88c7..0c22f52 100644
--- 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>
diff --git a/src/components/Head.astro b/src/components/Head.astro
index de74ff2..a421915 100644
--- 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>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index bd04320..f9a0c57 100644
--- 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>
diff --git a/src/components/Icons/Email.astro b/src/components/Icons/Email.astro
new file mode 100644
index 0000000..053b84e
--- /dev/null
+++ 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>
diff --git a/src/components/Icons/GitHub.astro b/src/components/Icons/GitHub.astro
new file mode 100644
index 0000000..39a6c1f
--- /dev/null
+++ 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>
diff --git a/src/components/Icons/LinkedIn.astro b/src/components/Icons/LinkedIn.astro
new file mode 100644
index 0000000..5e87e86
--- /dev/null
+++ 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>
diff --git a/src/components/Icons/RSS.astro b/src/components/Icons/RSS.astro
new file mode 100644
index 0000000..67f4c42
--- /dev/null
+++ 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>
diff --git a/src/components/JsonLd.astro b/src/components/JsonLd.astro
new file mode 100644
index 0000000..a589f7b
--- /dev/null
+++ 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} />
diff --git a/src/components/Sections/LatestPosts.astro b/src/components/Sections/LatestPosts.astro
index 070dc46..e91cb4c 100644
--- 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>
))
}
diff --git a/src/components/Sections/SocialLinks.astro b/src/components/Sections/SocialLinks.astro
index 53b8243..c804b60 100644
--- 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>
diff --git a/src/components/Sections/Welcome.astro b/src/components/Sections/Welcome.astro
index 8056202..ee7cae5 100644
--- 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>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index f33ca69..216287e 100644
--- 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>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 8bbd18a..4215a60 100644
--- 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>
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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f595b94..fb52e79 100644
--- 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 />
diff --git a/src/utils/schemas/blogPostSchema.ts b/src/utils/schemas/blogPostSchema.ts
new file mode 100644
index 0000000..b20f248
--- /dev/null
+++ 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,
+ },
+});
diff --git a/src/utils/schemas/blogSchema.ts b/src/utils/schemas/blogSchema.ts
new file mode 100644
index 0000000..7ff84d8
--- /dev/null
+++ 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,
+});
diff --git a/src/utils/schemas/websiteSchema.ts b/src/utils/schemas/websiteSchema.ts
new file mode 100644
index 0000000..bebb963
--- /dev/null
+++ 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,
+});
Copyright © 2025 Valentin A. Popov. All Rights Reverse Engineered.