feat: enhance accessibility and language support across components

- Updated various components to include `lang` attributes for improved accessibility and SEO.
- Introduced a new `env.d.ts` file to define environment variables for better type safety.
- Adjusted the print width in `.prettierrc.mjs` for improved code formatting.
- Streamlined the `Header`, `PostElement`, and `SocialLinks` components for better structure and clarity.
- Added language support to blog posts and updated the layout to reflect these changes.

.env

@@ -1,2 +0,0 @@
-DEFAULT_TITLE=Valentin Popov’s Blog
-DEFAULT_DESCRIPTION=Tech insights and coding best practices from an OpenSource enthusiast and ethical hacker.

.prettierrc.mjs

@@ -30,7 +30,7 @@ export default {
 		},
 	],
 	plugins: ["prettier-plugin-astro"],
-	printWidth: 120,
+	printWidth: 256,
 	proseWrap: "never",
 	quoteProps: "consistent",
 	requirePragma: false,

src/components/Analytics.astro

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

src/components/Comments.astro

@@ -15,6 +15,7 @@ const theme = "transparent_dark";
 
 <script
 	is:inline
+	defer
 	src="https://giscus.app/client.js"
 	data-category-id={categoryId}
 	data-category={category}

src/components/Header.astro

@@ -1,24 +1,4 @@
 <style lang="scss">
-	@use "../scss/variables" as *;
-
-	header {
-		padding-bottom: 1rem;
-		position: relative;
-	}
-
-	.site-title {
-		color: $colorText;
-		font-weight: bold;
-		left: 0;
-		position: absolute;
-		text-decoration: none;
-		top: 0;
-	}
-
-	.nav-links {
-		text-align: right;
-	}
-
 	a {
 		margin-right: 1.5rem;
 		text-decoration: none;
@@ -30,9 +10,6 @@
 </style>
 
 <header>
-	<a class="site-title" href="/">{import.meta.env.DEFAULT_TITLE}</a>
+	<a href="/" lang="en" aria-label="Home">Home</a>
-	<div class="nav-links">
+	<a href="/blog/" lang="en" aria-label="Blog">Blog</a>
-		<a href="/">Home</a>
-		<a href="/blog/">Blog</a>
-	</div>
 </header>

src/components/PostElement.astro

@@ -14,6 +14,10 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
 <style lang="scss">
 	@use "../scss/variables" as *;
 
+	a {
+		color: $colorText;
+	}
+
 	small {
 		font-size: $fontSizeBase * 0.75;
 		opacity: 0.5;
@@ -21,10 +25,10 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
 </style>
 
 <li>
-	<a href={`/blog/${post.slug}`}>{post.data.title}</a>
+	<a href={`/blog/${post.slug}`} lang={post.data.lang}>{post.data.title}</a>
 	<div>
 		<small>
-			<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
+			<time datetime={post.data.pubDate.toISOString()} lang="en">{formattedDate}</time>
 			<span>•</span>
 			<span>{remarkPluginFrontmatter.minutesRead}</span>
 		</small>

src/components/PostSummary.astro

@@ -1,49 +0,0 @@
----
-import { type CollectionEntry } from "astro:content";
-import dayjs from "dayjs";
-
-type Props = {
-	readonly post: CollectionEntry<"blog">;
-};
-
-const { post } = Astro.props;
-const { remarkPluginFrontmatter } = await post.render();
-const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
----
-
-<style lang="scss">
-	@use "../scss/variables" as *;
-
-	a {
-		color: $colorText;
-		display: block;
-		padding-bottom: 3rem;
-
-		&:visited {
-			color: $colorText;
-		}
-	}
-
-	h2 {
-		color: $colorBlossom;
-		font-size: 1.25em;
-		margin: 0.5em 0;
-	}
-
-	div {
-		font-size: $fontSizeBase * 0.75;
-		opacity: 0.5;
-	}
-</style>
-
-<a href={`/blog/${post.slug}`}>
-	<article>
-		<div>
-			<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
-			<span>•</span>
-			<span>{remarkPluginFrontmatter.minutesRead}</span>
-		</div>
-		<h2>{post.data.title}</h2>
-		<p>{post.data.description}</p>
-	</article>
-</a>

src/components/Sections/LatestPosts.astro

@@ -0,0 +1,37 @@
+---
+import { getCollection } from "astro:content";
+import dayjs from "dayjs";
+
+const posts = await getCollection("blog", ({ data }) => {
+	return data.draft !== true;
+});
+
+posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
+
+const latestPosts = posts.slice(0, 5);
+---
+
+<style lang="scss">
+	@use "../../scss/variables" as *;
+
+	small {
+		font-size: $fontSizeBase * 0.75;
+		opacity: 0.5;
+	}
+</style>
+
+<section>
+	<h2>Latest posts</h2>
+	<ul>
+		{
+			latestPosts.map((post) => (
+				<li>
+					<a href={`/blog/${post.slug}`} lang={post.data.lang}>
+						{post.data.title}
+					</a>
+					<small>{dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY")}</small>
+				</li>
+			))
+		}
+	</ul>
+</section>

src/components/Sections/SocialLinks.astro

@@ -0,0 +1,43 @@
+<style lang="scss">
+	@use "../../scss/variables" as *;
+
+	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>
+	</div>
+</section>

src/components/Sections/Welcome.astro

@@ -0,0 +1,7 @@
+<section>
+	<div>
+		<h1>Hi, I'm Valentin Popov 👋</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>
+</section>

src/content/blog/create-lib-file-from-dll.md

@@ -3,6 +3,7 @@ title: 'Create ".lib" file from ".dll" (archive)'
 author: "Adrian Henke"
 pubDate: "2023-05-04"
 description: "Learn how to generate a *.lib file from a *.dll with this comprehensive guide. Using the Visual Studio Command Prompt and Microsoft's recommended tools, this article walks you through the steps for a seamless process. Perfect for developers working with 3rd party win dll's."
+lang: "en"
 ---
 
 > This's a copy of a non-my post. The original article [is here](https://adrianhenke.wordpress.com/2008/12/05/create-lib-file-from-dll/) ([archive](https://web.archive.org/web/20161118122539/https://adrianhenke.wordpress.com/2008/12/05/create-lib-file-from-dll/)).

src/content/blog/electron-reload.md

@@ -3,6 +3,7 @@ title: "Горячая перезагрузка ElectronJS приложения"
 author: "Valentin Popov"
 pubDate: "2019-08-15"
 description: "Руководство по автоматической перезагрузке приложений на Electron с помощью пакетов electron-reload и electron-webpack. Обход проблем с совместимостью и использование HMR для renderer процесса."
+lang: "ru"
 ---
 
 ## Main процесс

src/content/blog/example-content.md

@@ -3,6 +3,7 @@ title: "Example Content"
 author: "Example User"
 pubDate: "2018-01-01"
 description: "Howdy! This is an example blog post that shows several types of HTML content supported in this theme."
+lang: "en"
 draft: true
 ---
 

src/content/blog/getting-source-code-of-chromium.md

@@ -3,6 +3,7 @@ title: 'Получение исходного кода "Chromium Projects"'
 author: "Valentin Popov"
 pubDate: "2012-01-30"
 description: "Изучение исходных кодов Chromium: подготовка системы и установка необходимых программных компонентов. Руководство для начинающих разработчиков. Получите инструкции по установке Microsoft Visual Studio, Cygwin, Python и других инструментов. Действительно на январь-февраль 2012 года."
+lang: "ru"
 ---
 
 > Перенос [оригинальной статьи](https://adeptus-mechanicus.blogspot.com/2012/01/chromium-projects.html) 2012 года из моего [старого блога](https://adeptus-mechanicus.blogspot.com/) ([зеркало](https://web.archive.org/web/20160217052148/http://adeptus-mechanicus.blogspot.com/)).

src/content/blog/installing-moodle-to-fedora.md

@@ -3,6 +3,7 @@ title: "Установка Moodle в Fedora"
 author: "Valentin Popov"
 pubDate: "2018-07-23"
 description: "Решение проблем установки Moodle из-за SELinux: как настроить правила доступа для устранения ошибок в веб-интерфейсе и при работе с cURL. Практические советы и команды."
+lang: "ru"
 ---
 
 Во время установки Moodle, сталкиваешься со следующими проблемами:

src/content/blog/rust-and-tl-mr3020.md

@@ -3,6 +3,7 @@ title: "Компиляция Rust на TL-MR3020"
 author: "Valentin Popov"
 pubDate: "2023-05-01"
 description: 'Как настроить и оптимизировать проект Rust для кросс-компиляции на TP-Link TL-MR3020 с использованием Fedora Linux 38 и OpenWrt 22.03.4. Шаг за шагом от базового "Hello, World!" до асинхронного TCP сервера.'
+lang: "ru"
 ---
 
 Информация в статье актуальна для дистрибутива [Fedora Linux 38](https://docs.fedoraproject.org/en-US/releases/f38/), прошивки [OpenWrt 22.03.4](https://openwrt.org/releases/22.03/notes-22.03.4) и устройства [TP-Link TL-MR3020](https://www.tp-link.com/en/home-networking/3g-4g-router/tl-mr3020/) ревизии v3.20.

src/content/config.ts

@@ -8,6 +8,7 @@ const blog = defineCollection({
 		draft: z.optional(z.boolean()),
 		pubDate: z.coerce.date(),
 		title: z.string(),
+		lang: z.string(),
 	}),
 });
 

src/layouts/BaseLayout.astro

@@ -5,18 +5,16 @@ import Header from "../components/Header.astro";
 import "../scss/global.scss";
 
 type Props = {
-	readonly description?: string;
+	readonly description: string;
-	readonly title?: string;
+	readonly title: string;
+	readonly lang: string;
 };
 
-const { description, title } = Astro.props;
+const { title, description, lang } = Astro.props;
 ---
 
-<html lang="ru">
+<html lang={lang}>
-	<Head
+	<Head title={title} description={description} />
-		title={title ?? import.meta.env.DEFAULT_TITLE}
-		description={description ?? import.meta.env.DEFAULT_DESCRIPTION}
-	/>
 
 	<body>
 		<main>

src/pages/404.astro

@@ -1,17 +1,19 @@
 ---
 import Layout from "../layouts/BaseLayout.astro";
+
+const title = "404 — Page Not Found | Valentin Popov";
+const description = "The page you're looking for doesn't exist!";
+const lang = "en";
 ---
 
-<Layout>
+<Layout title={title} description={description} lang={lang}>
 	<div style="text-align:center;">
 		<h1>404</h1>
 		<p><strong>Page not found</strong></p>
 		<p>
 			<small>
 				If you see this message, please
-				<a href=`mailto:valentin@popov.link?subject=${encodeURIComponent('I found a broken page')}`>
+				<a href=`mailto:valentin@popov.link?subject=${encodeURIComponent('I found a broken page')}`>let me know</a>
-					let me know
-				</a>
 			</small>
 		</p>
 	</div>

src/pages/blog/[...slug].astro

@@ -18,8 +18,13 @@ export async function getStaticPaths() {
 }
 
 const post = Astro.props;
+
 const { Content, remarkPluginFrontmatter } = await post.render();
-const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
+
+const date = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
+const title = `${post.data.title} | Valentin Popov`;
+const description = post.data.description;
+const lang = post.data.lang;
 ---
 
 <style lang="scss">
@@ -30,7 +35,7 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
 	}
 </style>
 
-<Layout description={post.data.description} title={post.data.title}>
+<Layout title={title} description={description} lang={lang}>
 	<article>
 		<section>
 			<h1>{post.data.title}</h1>
@@ -40,7 +45,7 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
 			<p>
 				<small>
 					Posted
-					<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
+					<time datetime={post.data.pubDate.toISOString()} lang="en">{date}</time>
 					by&nbsp;{post.data.author}
 					<span>&nbsp;•&nbsp;</span>
 					<span>{remarkPluginFrontmatter.minutesRead}</span>

src/pages/blog/index.astro

@@ -1,19 +1,48 @@
 ---
+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";
+
 const posts = await getCollection("blog", ({ data }) => {
 	return data.draft !== true;
 });
 
 posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
+
+const postsByYear = posts.reduce<Record<string, CollectionEntry<"blog">[]>>((acc, post) => {
+	const year = post.data.pubDate.getFullYear().toString();
+	if (!acc[year]) {
+		acc[year] = [];
+	}
+	acc[year].push(post);
+	return acc;
+}, {});
+
+const years = Object.keys(postsByYear).sort((a, b) => Number(b) - Number(a));
 ---
 
-<Layout>
+<Layout title={title} description={description} lang={lang}>
+	<section>
+		<h1>Blog posts</h1>
+	</section>
+
 	<section style={{ "margin-top": "3rem" }}>
-		<ul>
+		{
-			{posts.map((post) => <PostElement post={post} />)}
+			years.map((year) => (
-		</ul>
+				<div>
+					<h2>{year}</h2>
+					<ul>
+						{postsByYear[year].map((post) => (
+							<PostElement post={post} />
+						))}
+					</ul>
+				</div>
+			))
+		}
 	</section>
 </Layout>

src/pages/feed.xml.js

@@ -2,13 +2,16 @@ import { getCollection } from "astro:content";
 import rss from "@astrojs/rss";
 
 export async function GET(context) {
+	const title = "RSS Feed | Valentin Popov Blog";
+	const description = "Follow the latest posts from Valentin Popov via RSS.";
+
 	const posts = await getCollection("blog", ({ data }) => {
 		return data.draft !== true;
 	});
 
 	return rss({
-		customData: `<language>ru-ru</language>`,
+		customData: `<language>en</language>`,
-		description: import.meta.env.DEFAULT_DESCRIPTION,
+		description: description,
 		items: posts.map((post) => ({
 			customData: post.data.customData,
 			description: post.data.description,
@@ -17,6 +20,6 @@ export async function GET(context) {
 			title: post.data.title,
 		})),
 		site: context.site,
-		title: import.meta.env.DEFAULT_TITLE,
+		title: title,
 	});
 }

src/pages/index.astro

@@ -1,17 +1,16 @@
 ---
-import { getCollection } from "astro:content";
 import Layout from "../layouts/BaseLayout.astro";
-import PostSummary from "../components/PostSummary.astro";
+import LatestPostsSection from "../components/Sections/LatestPosts.astro";
+import SocialLinksSection from "../components/Sections/SocialLinks.astro";
+import WelcomeSection from "../components/Sections/Welcome.astro";
 
-const posts = await getCollection("blog", ({ data }) => {
+const title = "Valentin Popov – Software Developer & Team Lead | Tech Insights";
-	return data.draft !== true;
+const description = "Valentin Popov is an experienced project manager and team lead sharing expert insights on software development, leadership, and digital innovation.";
-});
+const lang = "en";
-
-posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
 ---
 
-<Layout>
+<Layout title={title} description={description} lang={lang}>
-	<section style={{ "margin-top": "3rem" }}>
+	<WelcomeSection />
-		{posts.map((post) => <PostSummary post={post} />)}
+	<SocialLinksSection />
-	</section>
+	<LatestPostsSection />
 </Layout>