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.

5 files changed, 19 insertions, 11 deletions

diff --git a/src/pages/404.astro b/src/pages/404.astro
index 7c2b420..8bbd18a 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -3,9 +3,10 @@ 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 title={title} description={description}>
+<Layout title={title} description={description} lang={lang}>
 	<div style="text-align:center;">
 		<h1>404</h1>
 		<p><strong>Page not found</strong></p>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 6c904d0..c625057 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -24,6 +24,7 @@ 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 description = post.data.description;
+const lang = post.data.lang;
 ---
 
 <style lang="scss">
@@ -34,7 +35,7 @@ const description = post.data.description;
 	}
 </style>
 
-<Layout title={title} description={description}>
+<Layout title={title} description={description} lang={lang}>
 	<article>
 		<section>
 			<h1>{post.data.title}</h1>
@@ -44,7 +45,7 @@ const description = post.data.description;
 			<p>
 				<small>
 					Posted
-					<time datetime={post.data.pubDate.toISOString()}>{date}</time>
+					<time datetime={post.data.pubDate.toISOString()} lang="en">{date}</time>
 					by&nbsp;{post.data.author}
 					<span>&nbsp;•&nbsp;</span>
 					<span>{remarkPluginFrontmatter.minutesRead}</span>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index b240cfa..f800268 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -4,8 +4,9 @@ import { getCollection } from "astro:content";
 import Layout from "../../layouts/BaseLayout.astro";
 import PostElement from "../../components/PostElement.astro";
 
-const title = "Blog | Valentin Popov";
-const description = "A collection of articles on software development, tech leadership and open-source experiments.";
+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;
@@ -25,12 +26,16 @@ const postsByYear = posts.reduce<Record<string, CollectionEntry<"blog">[]>>((acc
 const years = Object.keys(postsByYear).sort((a, b) => Number(b) - Number(a));
 ---
 
-<Layout title={title} description={description}>
+<Layout title={title} description={description} lang={lang}>
+	<section>
+		<h1>Blog posts</h1>
+	</section>
+
 	<section style={{ "margin-top": "3rem" }}>
 		{
 			years.map((year) => (
 				<div>
-					<div style={{ "margin-bottom": "1rem" }}>{year}</div>
+					<h2>{year}</h2>
 					<ul>
 						{postsByYear[year].map((post) => (
 							<PostElement post={post} />
diff --git a/src/pages/feed.xml.js b/src/pages/feed.xml.js
index 05dd3ac..7c41b4f 100644
--- a/src/pages/feed.xml.js
+++ b/src/pages/feed.xml.js
@@ -10,7 +10,7 @@ export async function GET(context) {
 	});
 
 	return rss({
-		customData: `<language>ru-ru</language>`,
+		customData: `<language>en</language>`,
 		description: description,
 		items: posts.map((post) => ({
 			customData: post.data.customData,
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 42db836..f595b94 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,11 +4,12 @@ import LatestPostsSection from "../components/Sections/LatestPosts.astro";
 import SocialLinksSection from "../components/Sections/SocialLinks.astro";
 import WelcomeSection from "../components/Sections/Welcome.astro";
 
-const title = "Valentin Popov";
-const description = "A personal website of Valentin Popov, a software developer and team lead.";
+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 lang = "en";
 ---
 
-<Layout title={title} description={description}>
+<Layout title={title} description={description} lang={lang}>
 	<WelcomeSection />
 	<SocialLinksSection />
 	<LatestPostsSection />