fix(deps): update dependency astro to v5.12.0 (#68)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.devcontainer/devcontainer.json

@@ -1,5 +1,5 @@
 {
-  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:24",
   "forwardPorts": [4321],
   "portsAttributes": {
     "4321": {

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

.github/workflows/ci.yml

@@ -24,3 +24,5 @@ jobs:
         run: npm ci
       - name: Run checks
         run: npm run check
+      - name: Run type checks
+        run: npm run typecheck

.github/workflows/mirror.yml

@@ -0,0 +1,25 @@
+name: Mirror
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+permissions:
+  contents: read
+
+jobs:
+  mirror:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Mirror to remote repository
+        uses: yesolutions/mirror-action@master
+        with:
+          REMOTE: "https://git.popov.link/popov.link.git"
+          GIT_USERNAME: ${{ secrets.GIT_USERNAME }}
+          GIT_PASSWORD: ${{ secrets.GIT_PASSWORD }}

.prettierrc.mjs

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

README.md

@@ -41,9 +41,9 @@ npm run preview
 
 ## Project Info
 
-- Maintained by [Valentin Popov](mailto:valentin@popov.link)
 - Issues: [GitHub](https://github.com/valentineus/popov.link/issues)
-- Read-only mirror: [code.popov.link](https://code.popov.link/valentineus/popov.link)
+- Read-only mirror: [git.popov.link](https://git.popov.link/popov.link/)
+- Maintained by [Valentin Popov](mailto:valentin@popov.link)
 
 ## Comments
 

astro.config.mjs

@@ -1,11 +1,12 @@
 import { defineConfig } from "astro/config";
 import { remarkReadingTime } from "./src/plugins/remarkReadingTime";
+import ogImages from "./src/integrations/ogImages";
 import sitemap from "@astrojs/sitemap";
 
 export default defineConfig({
 	site: "https://popov.link",
 	output: "static",
-	integrations: [sitemap()],
+	integrations: [sitemap(), ogImages()],
 	build: {
 		inlineStylesheets: "always",
 	},

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "2025.01.24",
   "private": true,
-  "packageManager": "npm@11.4.1",
+  "packageManager": "npm@11.4.2",
   "browserslist": [
     ">0.2%",
     "not dead",
@@ -11,6 +11,7 @@
   ],
   "scripts": {
     "format": "prettier --write .",
+    "typecheck": "tsc --noEmit",
     "dev": "astro dev",
     "start": "astro dev",
     "check": "astro check",
@@ -22,14 +23,22 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/rss": "^4.0.12",
     "@astrojs/sitemap": "^3.4.1",
+    "@resvg/resvg-js": "^2.6.2",
     "astro": "^5.9.0",
     "autoprefixer": "^10.4.21",
     "cssnano": "^7.0.7",
     "cssnano-preset-advanced": "^7.0.7",
     "dayjs": "^1.11.13",
+    "geist": "^1.4.2",
+    "globby": "^14.1.0",
+    "gray-matter": "^4.0.3",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
     "sass": "^1.89.1",
+    "satori": "^0.15.2",
+    "satori-html": "^0.3.2",
+    "schema-dts": "^1.1.5",
+    "sharp": "^0.34.2",
     "typescript": "^5"
   },
   "devDependencies": {

public/images/preview/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

src/components/Analytics.astro

@@ -1,2 +1 @@
-<!-- AppMetrix -->
+<script is:inline defer src="https://appmetrix.com/pixel/T5X0z12SoASBV8Dv"></script>
-<script is:inline 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/Head.astro

@@ -1,14 +1,22 @@
 ---
+import type { WithContext, Thing } from "schema-dts";
+import JsonLd from "./JsonLd.astro";
+
 type Props = {
 	readonly description: string;
+	readonly preview: string;
+	readonly schema: WithContext<Thing>;
 	readonly title: string;
 };
 
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const { description, preview, schema, title } = Astro.props;
-const { description, title } = Astro.props;
+
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
+const previewUrl = new URL(preview, Astro.site);
 ---
 
 <head>
+	<!-- Meta Tags -->
 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
@@ -18,13 +26,29 @@ const { description, title } = Astro.props;
 
 	<link href="/feed.xml" rel="alternate" title="RSS" type="application/atom+xml" />
 	<link href="/sitemap-index.xml" rel="sitemap" />
-	<link href={canonicalURL} rel="canonical" />
+	<link href={canonicalUrl} rel="canonical" />
 
 	<title>{title}</title>
 
+	<!-- Icons -->
 	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 	<link rel="icon" type="image/png" href="/favicon.png" />
 	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 	<link rel="manifest" href="/manifest.json" />
 	<meta name="theme-color" content="#ffffff" />
+
+	<!-- Open Graph -->
+	<meta property="og:type" content="website" />
+	<meta property="og:title" content={title} />
+	<meta property="og:description" content={description} />
+	<meta property="og:image" content={previewUrl} />
+	<meta property="og:url" content={canonicalUrl} />
+
+	<!-- Twitter Cards -->
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content={title} />
+	<meta name="twitter:description" content={description} />
+	<meta name="twitter:image" content={previewUrl} />
+
+	<JsonLd schema={schema} />
 </head>

src/components/Header.astro

@@ -1,27 +1,6 @@
 <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;
 
 		&:last-child {
 			margin-right: 0;
@@ -30,9 +9,8 @@
 </style>
 
 <header>
-	<a class="site-title" href="/">{import.meta.env.DEFAULT_TITLE}</a>
+	<nav aria-label="Navigation">
-	<div class="nav-links">
+		<a href="/" lang="en" aria-label="Home">Home</a>
-		<a href="/">Home</a>
+		<a href="/blog/" lang="en" aria-label="Blog">Blog</a>
-		<a href="/blog/">Blog</a>
+	</nav>
-	</div>
 </header>

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" aria-hidden="true">
+		<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>

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" aria-hidden="true">
+		<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>

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" aria-hidden="true">
+		<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>

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" aria-hidden="true">
+		<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>

src/components/JsonLd.astro

@@ -0,0 +1,13 @@
+---
+import type { WithContext, Thing } from "schema-dts";
+
+type Props = {
+	readonly schema: WithContext<Thing>;
+};
+
+const { schema } = Astro.props;
+const json = JSON.stringify(schema);
+---
+
+<!-- JSON-LD -->
+<script is:inline type="application/ld+json" set:html={json} />

src/components/PostElement.astro

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

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,43 @@
+---
+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;
+});
+
+posts.sort((a, b) => b.data.datePublished.getTime() - a.data.datePublished.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 <RSSIcon /></h2>
+	<ul>
+		{
+			latestPosts.map((post) => (
+				<li>
+					<a href={`/blog/${post.slug}`} lang={post.data.lang}>
+						{post.data.title}
+					</a>
+
+					<small>
+						<time datetime={post.data.datePublished.toISOString()} lang="en">
+							{dayjs(post.data.datePublished.toString()).format("MMMM DD, YYYY")}
+						</time>
+					</small>
+				</li>
+			))
+		}
+	</ul>
+</section>

src/components/Sections/SocialLinks.astro

@@ -0,0 +1,19 @@
+---
+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;
+	}
+</style>
+
+<section>
+	<div>
+		<GitHubIcon />
+		<LinkedInIcon />
+		<EmailIcon />
+	</div>
+</section>

src/components/Sections/Welcome.astro

@@ -0,0 +1,7 @@
+<section>
+	<div>
+		<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>
+</section>

src/config.ts

@@ -0,0 +1,29 @@
+export const config = {
+	author: {
+		name: "Valentin Popov",
+		email: "valentin@popov.link",
+		url: "https://popov.link/",
+		sameAs: ["https://www.linkedin.com/in/valentineus/", "https://github.com/valentineus"],
+	},
+
+	// Open Graph
+	og: {
+		color: {
+			bg: "#181818",
+			bgCode: "#3b3d42",
+			blossom: "#6da13f",
+			text: "#dee2e6",
+		},
+		defaultPreview: "/images/photo.png",
+		dimensions: {
+			height: 630,
+			width: 1200,
+		},
+		fonts: {
+			bold: "./src/assets/JetBrainsMono/JetBrainsMono-Bold.ttf",
+			regular: "./src/assets/JetBrainsMono/JetBrainsMono-Regular.ttf",
+		},
+		photo: "./public/images/photo.png",
+		website: "popov.link",
+	},
+};

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

@@ -1,8 +1,10 @@
 ---
+basedOn: "https://adrianhenke.wordpress.com/2008/12/05/create-lib-file-from-dll/"
 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."
+datePublished: "2023-05-04"
+dateModified: "2023-05-04"
+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

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

src/content/blog/example-content.md

@@ -1,8 +1,9 @@
 ---
 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."
+datePublished: "2018-01-01"
+dateModified: "2018-01-01"
+lang: "en"
 draft: true
 ---
 

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

@@ -1,8 +1,9 @@
 ---
 title: 'Получение исходного кода "Chromium Projects"'
-author: "Valentin Popov"
-pubDate: "2012-01-30"
 description: "Изучение исходных кодов Chromium: подготовка системы и установка необходимых программных компонентов. Руководство для начинающих разработчиков. Получите инструкции по установке Microsoft Visual Studio, Cygwin, Python и других инструментов. Действительно на январь-февраль 2012 года."
+datePublished: "2012-01-30"
+dateModified: "2012-01-30"
+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

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

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

@@ -1,8 +1,9 @@
 ---
 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 сервера.'
+datePublished: "2023-05-01"
+dateModified: "2023-05-01"
+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

@@ -3,10 +3,12 @@ import { defineCollection, z } from "astro:content";
 const blog = defineCollection({
 	type: "content",
 	schema: z.object({
-		author: z.string(),
+		basedOn: z.optional(z.string()),
+		dateModified: z.coerce.date(),
+		datePublished: z.coerce.date(),
 		description: z.string(),
 		draft: z.optional(z.boolean()),
-		pubDate: z.coerce.date(),
+		lang: z.string(),
 		title: z.string(),
 	}),
 });

src/integrations/ogImages.ts

@@ -0,0 +1,47 @@
+import type { AstroIntegration } from "astro";
+import { createOgImage } from "../utils/createOgImage";
+import { globby } from "globby";
+import fs from "fs/promises";
+import matter from "gray-matter";
+import path from "path";
+
+const postsDir = path.resolve("./src/content/blog");
+const outDir = path.resolve("./public/images/preview");
+
+export default function ogImageGenerator(): AstroIntegration {
+	return {
+		name: "og-images",
+		hooks: {
+			"astro:build:setup": async ({ logger }) => {
+				await fs.mkdir(outDir, { recursive: true });
+				const mdFiles = await globby("*.md", { cwd: postsDir });
+				logger.info(`${mdFiles.length} posts found`);
+
+				const results = await Promise.allSettled(
+					mdFiles.map(async (file) => {
+						const slug = file.replace(/\.md$/, "");
+						const content = await fs.readFile(path.join(postsDir, file), "utf-8");
+						const { data } = matter(content);
+
+						const png = await createOgImage(data.title, data.datePublished);
+						const outPath = path.join(outDir, `${slug}.png`);
+						await fs.writeFile(outPath, png);
+
+						logger.info(`OG image created: ${slug}`);
+					})
+				);
+
+				results.forEach((r) => {
+					if (r.status === "rejected") {
+						logger.error(`Error for ${r.reason.slug}: ${r.reason.message}`);
+					}
+				});
+
+				const failures = results.filter((r) => r.status === "rejected");
+				if (failures.length) {
+					throw new Error(`Failed to generate OG images for ${failures.length} posts`);
+				}
+			},
+		},
+	};
+}

src/layouts/BaseLayout.astro

@@ -1,22 +1,23 @@
 ---
+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";
 import "../scss/global.scss";
 
 type Props = {
-	readonly description?: string;
+	readonly description: string;
-	readonly title?: string;
+	readonly lang: string;
+	readonly preview: string;
+	readonly schema: WithContext<Thing>;
+	readonly title: string;
 };
 
-const { description, title } = Astro.props;
+const { description, lang, preview, schema, title } = Astro.props;
 ---
 
-<html lang="ru">
+<html lang={lang}>
-	<Head
+	<Head title={title} description={description} preview={preview} schema={schema} />
-		title={title ?? import.meta.env.DEFAULT_TITLE}
-		description={description ?? import.meta.env.DEFAULT_DESCRIPTION}
-	/>
 
 	<body>
 		<main>

src/pages/404.astro

@@ -1,17 +1,30 @@
 ---
+import { config } from "../config";
 import Layout from "../layouts/BaseLayout.astro";
+import pageSchema from "../utils/schemas/pageSchema";
+
+const title = "404 — Page Not Found | Valentin Popov";
+const description = "The page you're looking for doesn't exist!";
+const preview = config.og.defaultPreview;
+const lang = "en";
+
+const schema = pageSchema({
+	siteUrl: new URL("/", Astro.site).toString(),
+	page: "/404",
+	title,
+	description,
+	lang,
+});
 ---
 
-<Layout>
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
-	<div style="text-align:center;">
+	<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

@@ -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">;
@@ -18,8 +19,31 @@ 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 description = post.data.description;
+const isBasedOn = post.data.basedOn;
+const lang = post.data.lang;
+const preview = `/images/preview/${post.slug}.png`;
+const slug = post.slug;
+const title = post.data.title;
+
+const dateModified = post.data.dateModified?.toISOString();
+const datePublished = post.data.datePublished.toISOString();
+const formattedDate = dayjs(post.data.datePublished.toString()).format("MMMM DD, YYYY");
+
+const schema = blogPostSchema({
+	siteUrl: new URL("/", Astro.site).toString(),
+	dateModified,
+	datePublished,
+	description,
+	isBasedOn,
+	lang,
+	preview,
+	slug,
+	title,
+});
 ---
 
 <style lang="scss">
@@ -30,23 +54,20 @@ 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} preview={preview} lang={lang} schema={schema}>
 	<article>
-		<section>
+		<header>
-			<h1>{post.data.title}</h1>
+			<h1>{title}</h1>
-		</section>
 
-		<section>
 			<p>
 				<small>
 					Posted
-					<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
+					<time datetime={datePublished} lang="en">{formattedDate}</time>
-					by&nbsp;{post.data.author}
 					<span>&nbsp;•&nbsp;</span>
 					<span>{remarkPluginFrontmatter.minutesRead}</span>
 				</small>
 			</p>
-		</section>
+		</header>
 
 		<section>
 			<Content />

src/pages/blog/index.astro

@@ -1,19 +1,61 @@
 ---
+import type { CollectionEntry } from "astro:content";
+import { config } from "../../config";
 import { getCollection } from "astro:content";
+import blogSchema from "../../utils/schemas/blogSchema";
 import Layout from "../../layouts/BaseLayout.astro";
 import PostElement from "../../components/PostElement.astro";
+import RSSIcon from "../../components/Icons/RSS.astro";
 
 const posts = await getCollection("blog", ({ data }) => {
 	return data.draft !== true;
 });
 
-posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
+posts.sort((a, b) => b.data.datePublished.getTime() - a.data.datePublished.getTime());
+
+const postsByYear = posts.reduce<Record<string, CollectionEntry<"blog">[]>>((acc, post) => {
+	const year = post.data.datePublished.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));
+
+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 preview = config.og.defaultPreview;
+const lang = "en";
+
+const schema = blogSchema({
+	siteUrl: new URL("/", Astro.site).toString(),
+	title,
+	posts,
+});
 ---
 
-<Layout>
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
-	<section style={{ "margin-top": "3rem" }}>
+	<section>
-		<ul>
+		<h1>
-			{posts.map((post) => <PostElement post={post} />)}
+			Blog posts
-		</ul>
+			<RSSIcon />
+		</h1>
+	</section>
+
+	<section>
+		{
+			years.map((year) => (
+				<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,27 @@
 ---
-import { getCollection } from "astro:content";
+import { config } from "../config";
+import LatestPostsSection from "../components/Sections/LatestPosts.astro";
 import Layout from "../layouts/BaseLayout.astro";
-import PostSummary from "../components/PostSummary.astro";
+import pageSchema from "../utils/schemas/pageSchema";
+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 = "Blog by Valentin Popov — software developer and team lead writing about code, side projects, digital tools, and fun experiments.";
+const preview = config.og.defaultPreview;
+const lang = "en";
+
+const schema = pageSchema({
+	siteUrl: new URL("/", Astro.site).toString(),
+	page: "/",
+	title,
+	description,
+	lang,
 });
-
-posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
 ---
 
-<Layout>
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
-	<section style={{ "margin-top": "3rem" }}>
+	<WelcomeSection />
-		{posts.map((post) => <PostSummary post={post} />)}
+	<SocialLinksSection />
-	</section>
+	<LatestPostsSection />
 </Layout>

src/utils/createOgImage.ts

@@ -0,0 +1,52 @@
+import { config } from "../config";
+import { html } from "satori-html";
+import { resources } from "./ogResources";
+import { Resvg } from "@resvg/resvg-js";
+import dayjs from "dayjs";
+import satori from "satori";
+
+export async function createOgImage(title: string, datePublished: Date): Promise<Buffer> {
+	const formattedDate = dayjs(datePublished).format("MMMM DD, YYYY");
+
+	const markup = await satori(
+		html(`
+<div tw="flex flex-col w-full h-full" style="background-color: ${config.og.color.bg}">
+	<div tw="flex flex-col w-full h-4/5 p-10 justify-center">
+		<div tw="text-2xl mb-6" style="color: ${config.og.color.text}">${formattedDate}</div>
+		<div tw="flex text-6xl w-full font-bold" style="color: ${config.og.color.text}">${title}</div>
+	</div>
+	<div tw="w-full h-1/5 flex p-10 items-center justify-between text-2xl" style="border-top: 1px solid ${config.og.color.bgCode}">
+		<div tw="flex items-center">
+			<span tw="ml-3" style="color: ${config.og.color.text}">${config.og.website.toLocaleUpperCase()}</span>
+		</div>
+		<div tw="flex items-center">
+			<img src="${resources.photoBase64}" tw="w-15 h-15 rounded-full" />
+			<div tw="flex flex-col ml-4">
+				<span style="color: ${config.og.color.text}">${config.author.name}</span>
+				<span style="color: ${config.og.color.blossom}">${config.author.email}</span>
+			</div>
+		</div>
+	</div>
+</div>
+`),
+		{
+			width: config.og.dimensions.width,
+			height: config.og.dimensions.height,
+			fonts: [
+				{
+					name: "Inter",
+					data: resources.fonts.regular,
+					weight: 400,
+				},
+				{
+					name: "Inter",
+					data: resources.fonts.bold,
+					weight: 700,
+				},
+			],
+		}
+	);
+
+	const image = new Resvg(markup, { fitTo: { mode: "width", value: config.og.dimensions.width } });
+	return image.render().asPng();
+}

src/utils/ogResources.ts

@@ -0,0 +1,15 @@
+import { config } from "../config";
+import fs from "fs/promises";
+import path from "path";
+import sharp from "sharp";
+
+export const resources = {
+	fonts: {
+		regular: await fs.readFile(path.resolve(config.og.fonts.regular)),
+		bold: await fs.readFile(path.resolve(config.og.fonts.bold)),
+	},
+	photoBase64: await (async () => {
+		const buf = await fs.readFile(path.resolve(config.og.photo));
+		return "data:image/png;base64," + (await sharp(buf).resize(120, 120).png({ quality: 95 }).toBuffer()).toString("base64");
+	})(),
+};

src/utils/schemas/blogPostSchema.ts

@@ -0,0 +1,37 @@
+import type { WithContext, BlogPosting } from "schema-dts";
+import { config } from "../../config";
+
+export type BlogPostSchemaParams = {
+	readonly dateModified: string;
+	readonly datePublished: string;
+	readonly description: string;
+	readonly isBasedOn?: string;
+	readonly lang: string;
+	readonly preview: string;
+	readonly siteUrl: string;
+	readonly slug: string;
+	readonly title: string;
+};
+
+export default ({ siteUrl, slug, title, description, preview, datePublished, dateModified, lang, isBasedOn }: BlogPostSchemaParams): WithContext<BlogPosting> => ({
+	"@context": "https://schema.org",
+	"@type": "BlogPosting",
+	"url": new URL(`/blog/${slug}`, siteUrl).toString(),
+	"headline": title,
+	"description": description,
+	"image": new URL(preview, siteUrl).toString(),
+	"datePublished": datePublished,
+	"dateModified": dateModified,
+	"inLanguage": lang,
+	"author": {
+		"@type": "Person",
+		"name": config.author.name,
+		"url": config.author.url,
+		"sameAs": config.author.sameAs,
+	},
+	"mainEntityOfPage": {
+		"@type": "WebPage",
+		"@id": new URL(`/blog/${slug}`, siteUrl).toString(),
+	},
+	...(isBasedOn && { isBasedOn: isBasedOn }),
+});

src/utils/schemas/blogSchema.ts

@@ -0,0 +1,26 @@
+import type { WithContext, CollectionPage } from "schema-dts";
+import type { CollectionEntry } from "astro:content";
+
+export type BlogSchemaParams = {
+	readonly posts: CollectionEntry<"blog">[];
+	readonly siteUrl: string;
+	readonly title: string;
+};
+
+export default ({ siteUrl, title, posts }: BlogSchemaParams): WithContext<CollectionPage> => ({
+	"@context": "https://schema.org",
+	"@type": "CollectionPage",
+	"url": new URL("/blog/", siteUrl).toString(),
+	"name": title,
+	"mainEntity": {
+		"@type": "ItemList",
+		"itemListOrder": "https://schema.org/ItemListOrderDescending",
+		"numberOfItems": posts.length,
+		"itemListElement": posts.map((post, index) => ({
+			"@type": "ListItem",
+			"position": index + 1,
+			"url": new URL(`/blog/${post.slug}`, siteUrl).toString(),
+			"name": post.data.title,
+		})),
+	},
+});

src/utils/schemas/pageSchema.ts

@@ -0,0 +1,23 @@
+import type { WithContext, WebPage } from "schema-dts";
+
+export type WebsiteSchemaParams = {
+	readonly description: string;
+	readonly page: string;
+	readonly siteUrl: string;
+	readonly title: string;
+	readonly lang: string;
+};
+
+export default ({ siteUrl, page, title, description, lang }: WebsiteSchemaParams): WithContext<WebPage> => ({
+	"@context": "https://schema.org",
+	"@type": "WebPage",
+	"@id": new URL(page, siteUrl).toString(),
+	"url": new URL(page, siteUrl).toString(),
+	"name": title,
+	"description": description,
+	"inLanguage": lang,
+	"mainEntity": {
+		"@type": "WebSite",
+		"@id": new URL("/", siteUrl).toString(),
+	},
+});