valentineus/popov.link
0
Fork 0
mirror of https://github.com/valentineus/popov.link.git synced 2025-07-04 16:40:26 +03:00
Code Issues Releases Activity

feat: integrate schema.org support and enhance component structure

Browse Source 
- 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.
This commit is contained in:
Valentin Popov
2025-06-11 23:20:36 +00:00
parent 16fa8a3b5d
commit 67f245a48f
22 changed files with 383 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Analytics.astro
View File

@ -1,2 +1 @@
<!-- AppMetrix -->
<script is:inline defer src="https://appmetrix.com/pixel/T5X0z12SoASBV8Dv"></script>

8
src/components/Head.astro
View File

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

7
src/components/Header.astro
View File

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

20
src/components/Icons/Email.astro Normal file
View File

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

22
src/components/Icons/GitHub.astro Normal file
View File

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

21
src/components/Icons/LinkedIn.astro Normal file
View File

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

17
src/components/Icons/RSS.astro Normal file
View File

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

12
src/components/JsonLd.astro Normal file
View File

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

10
src/components/Sections/LatestPosts.astro
View File

@ -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>
))
}

42
src/components/Sections/SocialLinks.astro
View File

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

2
src/components/Sections/Welcome.astro
View File

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