chore(deps): update actions/checkout action to v7

chore(deps): update dependency astro to v6.4.8
chore(deps): update dependency astro to v6.4.7
2026-06-19 00:04:29 +00:00 · 2026-06-18 00:05:50 +00:00 · 2026-06-16 00:07:02 +00:00 · 2026-06-12 00:04:47 +00:00 · 2026-06-11 00:04:00 +00:00 · 2026-06-10 00:06:16 +00:00
103 changed files with 4871 additions and 5017 deletions
@@ -1,5 +1,5 @@
 {
-  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:24",
  "forwardPorts": [4321],
  "portsAttributes": {
    "4321": {
@@ -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.
@@ -1,16 +1,28 @@
 name: RenovateBot
+
 on:
  schedule:
    - cron: "@daily"
+  push:
+    branches:
+      - master

 jobs:
  renovate:
-    container: ghcr.io/renovatebot/renovate:38
+    container: ghcr.io/renovatebot/renovate:43
    runs-on: ubuntu-latest
+
    steps:
-      - uses: actions/checkout@v4
-      - run: renovate
+      - name: Checkout code
+        uses: actions/checkout@v7
+
+      - name: Run renovate
+        run: |
+          renovate
        env:
+          GITHUB_COM_TOKEN: ${{ secrets.RENOVATE_GITHUB_TOKEN }}
+          LOG_LEVEL: ${{ vars.RENOVATE_LOG_LEVEL }}
          RENOVATE_CONFIG_FILE: renovate.config.cjs
+          RENOVATE_LOG_LEVEL: ${{ vars.RENOVATE_LOG_LEVEL }}
          RENOVATE_REPOSITORIES: ${{ gitea.repository }}
          RENOVATE_TOKEN: ${{ secrets.RENOVATE_TOKEN }}
@@ -1,14 +1,16 @@
 name: Test
+
 on: [push, pull_request]

 jobs:
  test:
-    container: gitea/runner-images:ubuntu-latest
+    name: npm test
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v7
+      - uses: actions/setup-node@v6
        with:
-          node-version: 22
+          node-version: 24
      - run: npm ci
      - run: npm run check
+      - run: npm run typecheck
@@ -0,0 +1,14 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "devcontainers"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
@@ -30,7 +30,7 @@ export default {
 		},
 	],
 	plugins: ["prettier-plugin-astro"],
-	printWidth: 120,
+	printWidth: 256,
 	proseWrap: "never",
 	quoteProps: "consistent",
 	requirePragma: false,
@@ -1,24 +1,30 @@
 {
-  "assignees": [
-    "valentineus"
-  ],
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": [
    "config:recommended",
    ":disableDependencyDashboard"
  ],
+  "assignees": [
+    "valentineus"
+  ],
+  "labels": [
+    "dependencies",
+    "automated"
+  ],
  "packageRules": [
    {
      "groupName": "all digest updates",
      "groupSlug": "all-digest",
-      "matchPackagePatterns": [
-        "*"
-      ],
      "matchUpdateTypes": [
        "minor",
        "patch",
        "pin",
        "digest"
-      ]
+      ],
+      "matchPackageNames": [
+        "*"
+      ],
+      "automerge": true
    }
  ]
 }
@@ -0,0 +1,7 @@
+Copyright (c) 2025 Valentin Popov <valentin@popov.link>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -1,49 +1,54 @@
-# Personal site
+# popov.link

-This is my main site. The site publishes articles, useful information and notes. Also, the site serves as a hosting of free and personal images.
+[![512KB club](https://512kb.club/assets/images/green-team.svg)](https://512kb.club)

-Principles of site development:
+Personal website source code built with [Astro](https://astro.build/).

-   Lightness and minimalism. The site is designed to store information, it's not a heavy application;
+## Requirements

-   Maximum cross-platform. Information should be read from any device and software;
-
-   Focusing on content perception. Only useful information, nothing superfluous;
-
-   No JS on the site. The site should be completely safe for the user;
+- Node.js v22 or later
+- npm v11 or later

 ## Development

-To start a local server for development, you need:
-
-1. Clone the source repository:
+1. Install dependencies:

 ```bash
-git clone "https://github.com/valentineus/valentineus.github.io.git"
+npm ci
 ```

-2. Install packages:
+2. Start the development server:

 ```bash
-cd valentineus.github.io && bundle update
+npm run dev
 ```

-3. Start the server:
+3. Open your browser and go to http://localhost:3000 to view changes live.
+
+## Build & Preview
+
+- To build the project for production:

 ```bash
-bundle exec jekyll serve --host "${IP}" --port "${PORT}" --trace
+npm run build
 ```

-Please note in the executable command uses environment variables `IP` and `PORT`.
+- To preview the production build locally:

-## License hosted material
+```bash
+npm run preview
+```

-<img width="256px" alt="CC BY-NC 3.0 License" src="https://raw.githubusercontent.com/valentineus/valentineus.github.io/master/assets/images/87624cb5-4a8f-4be4-90b6-0ec5b9a90333.png" />
+## Project Info

-Material on the site is published on the CC BY-NC 3.0 license.
+- Issues: [GitHub](https://github.com/valentineus/popov.link/issues)
+- Read-only mirror: [git.popov.link](https://git.popov.link/popov.link/)
+- Maintained by [Valentin Popov](mailto:valentin@popov.link)

-## Source Code License
+## Comments

-<img width="256px" alt="MIT License" src="https://raw.githubusercontent.com/valentineus/valentineus.github.io/master/assets/images/7d05cad0-d553-42c7-be1f-7007926ba720.png" />
+Comments on the site are powered by [giscus.app](https://giscus.app) and stored in [GitHub Discussions](https://github.com/valentineus/popov.link/discussions).

-[MIT](LICENSE.txt). Copyright (c) [Valentin Popov](https://valentineus.link/).
+## License
+
+This project is licensed under the [MIT License](LICENSE.txt).
@@ -1,26 +1,56 @@
 import { defineConfig } from "astro/config";
-import { remarkReadingTime } from "./src/plugins/remarkReadingTime";
-import cloudflare from "@astrojs/cloudflare";
-import icon from "astro-icon";
+import { globbySync } from "globby";
+import fs from "node:fs";
+import matter from "gray-matter";
+import path from "node:path";
+import rehypeExternalLinks from "rehype-external-links";
 import sitemap from "@astrojs/sitemap";

+import { remarkReadingTime } from "./src/plugins/remarkReadingTime";
+import ogImages from "./src/integrations/ogImages";
+import rehypeLazyImages from "./src/plugins/rehypeLazyImages";
+
+const blogDir = path.resolve("./src/content/blog");
+
+const lastmodBySlug = Object.fromEntries(
+	globbySync("*.md", { cwd: blogDir }).map((file) => {
+		const slug = file.replace(/\.md$/, "");
+		const { data } = matter(fs.readFileSync(path.join(blogDir, file), "utf8"));
+		const date = data.dateModified ?? data.datePublished;
+		return [slug, new Date(date).toISOString()];
+	})
+);
+
+const buildLastmod = new Date().toISOString();
+
 export default defineConfig({
 	site: "https://popov.link",
-	output: "hybrid",
-	adapter: cloudflare({
-		imageService: "compile",
+	output: "static",
+	integrations: [
+		sitemap({
+			serialize(item) {
+				const url = new URL(item.url);
+				const match = url.pathname.match(/^\/blog\/([^/]+)\/?$/);
+
+				if (match && lastmodBySlug[match[1]]) {
+					item.lastmod = lastmodBySlug[match[1]];
+				} else {
+					item.lastmod = buildLastmod;
+				}
+
+				return item;
+			},
 		}),
-	integrations: [icon(), sitemap()],
+		ogImages(),
+	],
 	build: {
 		inlineStylesheets: "always",
 	},
 	markdown: {
 		remarkPlugins: [remarkReadingTime],
-	},
-	redirects: {
-		"/blog": {
-			destination: "/",
-			status: 301,
+		rehypePlugins: [[rehypeExternalLinks, { target: "_blank", rel: ["noopener", "noreferrer"] }], rehypeLazyImages],
+		shikiConfig: {
+			theme: "vitesse-dark",
 		},
 	},
 });
@@ -1,9 +1,17 @@
 {
  "name": "website",
  "type": "module",
-  "version": "0.0.1",
+  "version": "2025.01.24",
+  "private": true,
+  "license": "MIT",
+  "packageManager": "npm@11.17.0",
+  "browserslist": [
+    ">0.2%",
+    "not dead"
+  ],
  "scripts": {
    "format": "prettier --write .",
+    "typecheck": "tsc --noEmit",
    "dev": "astro dev",
    "start": "astro dev",
    "check": "astro check",
@@ -12,24 +20,34 @@
    "astro": "astro"
  },
  "dependencies": {
-    "@astrojs/check": "^0.9.3",
-    "@astrojs/cloudflare": "^11.1.0",
-    "@astrojs/rss": "^4.0.7",
-    "@astrojs/sitemap": "^3.1.6",
-    "@iconify-json/hugeicons": "^1.2.0",
-    "astro": "^4.15.10",
-    "astro-icon": "^1.1.1",
-    "autoprefixer": "^10.4.20",
-    "cssnano": "^7.0.6",
-    "cssnano-preset-advanced": "^7.0.6",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/rss": "^4.0.12",
+    "@astrojs/sitemap": "^3.4.1",
+    "@resvg/resvg-js": "^2.6.2",
+    "astro": "^6.0.0",
+    "autoprefixer": "^10.4.21",
+    "cssnano": "^8.0.0",
+    "cssnano-preset-advanced": "^8.0.0",
    "dayjs": "^1.11.13",
+    "globby": "^16.0.0",
+    "gray-matter": "^4.0.3",
+    "markdown-it": "^14.1.1",
    "mdast-util-to-string": "^4.0.0",
    "reading-time": "^1.5.0",
-    "sass": "^1.79.4",
-    "typescript": "^5.6.2"
+    "rehype-external-links": "^3.0.0",
+    "sanitize-html": "^2.17.3",
+    "sass": "^1.89.1",
+    "satori": "^0.26.0",
+    "satori-html": "^0.3.2",
+    "schema-dts": "^2.0.0",
+    "sharp": "^0.35.0",
+    "typescript": "^5",
+    "unist-util-visit": "^5.1.0"
  },
  "devDependencies": {
-    "prettier": "^3.3.3",
+    "@types/markdown-it": "^14.1.2",
+    "@types/sanitize-html": "^2.16.1",
+    "prettier": "^3.5.3",
    "prettier-plugin-astro": "^0.14.1"
  }
 }
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>
@@ -0,0 +1,2 @@
+*
+!.gitignore
@@ -0,0 +1,24 @@
+{
+  "name": "Valentin Popov's Blog",
+  "short_name": "popov.link",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "google-touch-icon.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "background_color": "#181818",
+  "theme_color": "#181818",
+  "display": "standalone"
+}
@@ -1,6 +1,6 @@
 module.exports = {
 	endpoint: "https://code.popov.link",
-	gitAuthor: "RenovateBot <renovatebot@noreply.localhost>",
+	gitAuthor: "renovate[bot] <renovatebot@noreply.localhost>",
 	optimizeForDisabled: true,
 	platform: "gitea",
 };
@@ -1,17 +1 @@
---
-type Props = {
-	readonly title: string;
-};
-
-const path = Astro.url.pathname;
-const { title } = Astro.props;
---
-
-<!-- AppMetrix -->
-<script is:inline src="https://appmetrix.com/pixel/T5X0z12SoASBV8Dv"></script>
-
-<!-- GoatCounter -->
-<script is:inline data-goatcounter="https://analytics.popov.link/count" src="//gc.zgo.at/count.js"></script>
-<noscript>
-	<img alt="pixel" src={`https://analytics.popov.link/count?p=${encodeURI(path)}&t=${encodeURI(title)}`} />
-</noscript>
+<script is:inline defer src="https://appmetrix.com/pixel/T5X0z12SoASBV8Dv"></script>
@@ -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}
@@ -1,60 +0,0 @@
---
-import { Icon } from "astro-icon/components";
-import dayjs from "dayjs";
---
-
-<style lang="scss">
-	@import "../scss/_variables.scss";
-
-	footer {
-		bottom: 0;
-		height: 4em;
-		left: 0;
-		padding: 1em 4em;
-		position: absolute;
-		right: 0;
-	}
-
-	a {
-		color: $colorText;
-
-		&:visited {
-			color: $colorText;
-		}
-	}
-
-	.left-nav,
-	.right-nav {
-		display: inline-block;
-		vertical-align: top;
-		width: 49%;
-	}
-
-	.left-nav {
-		float: left;
-		font-size: $fontSizeBase * 0.75;
-		text-align: left;
-	}
-
-	.right-nav {
-		float: right;
-		text-align: right;
-	}
-
-	@media (width <=684px) {
-		footer {
-			padding: 4em 1em 2em;
-		}
-	}
-</style>
-
-<footer>
-	<div class="left-nav">
-		<span>&copy; {dayjs().year()} <a href="mailto:valentin@popov.link">Valentin Popov</a></span>
-	</div>
-	<div class="right-nav">
-		<a href="https://github.com/valentineus" target="_blank"><Icon name="hugeicons:github-01" /></a>
-		<a href="https://analytics.popov.link" target="_blank"><Icon name="hugeicons:analytics-up" /></a>
-		<a href="/feed.xml" target="_blank"><Icon name="hugeicons:rss" /></a>
-	</div>
-</footer>
@@ -1,24 +1,78 @@
 ---
+import type { Thing } from "schema-dts";
+import { config } from "../config";
+import JsonLd from "./JsonLd.astro";
+
 type Props = {
 	readonly description: string;
+	readonly lang: string;
+	readonly modifiedTime?: string;
+	readonly ogType?: "website" | "article";
+	readonly preview: string;
+	readonly publishedTime?: string;
+	readonly robots?: string;
+	readonly schema: Thing[];
 	readonly title: string;
 };

-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-const { description, title } = Astro.props;
+const { description, lang, modifiedTime, ogType = "website", preview, publishedTime, robots = "index, follow", schema, title } = Astro.props;
+
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
+const previewUrl = new URL(preview, Astro.site);
+const ogLocale = lang === "ru" ? "ru_RU" : "en_US";
 ---

 <head>
-	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<!-- Meta Tags -->
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />

 	<meta name="description" content={description} />
-	<meta name="robots" content="index, follow" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<meta name="robots" content={robots} />
+	<meta name="author" content={config.author.name} />

 	<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" />
+	<link href={config.author.url} rel="author" />
+
+	<!-- hreflang -->
+	<link rel="alternate" hreflang={lang} href={canonicalUrl} />
+	<link rel="alternate" hreflang="x-default" href={canonicalUrl} />

 	<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="#181818" />
+
+	<!-- Open Graph -->
+	<meta property="og:type" content={ogType} />
+	<meta property="og:site_name" content={config.og.website} />
+	<meta property="og:locale" content={ogLocale} />
+	<meta property="og:title" content={title} />
+	<meta property="og:description" content={description} />
+	<meta property="og:url" content={canonicalUrl} />
+	<meta property="og:image" content={previewUrl} />
+	<meta property="og:image:width" content={String(config.og.dimensions.width)} />
+	<meta property="og:image:height" content={String(config.og.dimensions.height)} />
+	<meta property="og:image:alt" content={title} />
+
+	{ogType === "article" && publishedTime && <meta property="article:published_time" content={publishedTime} />}
+	{ogType === "article" && modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}
+	{ogType === "article" && <meta property="article:author" content={config.author.url} />}
+
+	<!-- Twitter Cards -->
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:site" content="@valyaha" />
+	<meta name="twitter:creator" content="@valyaha" />
+	<meta name="twitter:title" content={title} />
+	<meta name="twitter:description" content={description} />
+	<meta name="twitter:image" content={previewUrl} />
+	<meta name="twitter:image:alt" content={title} />
+
+	<JsonLd schema={schema} />
 </head>
@@ -1,64 +1,16 @@
---
-import { Icon } from "astro-icon/components";
-
-const { pathname } = Astro.url;
---
-
 <style lang="scss">
-	@import "../scss/_variables.scss";
-
-	[data-icon] {
-		vertical-align: middle;
-	}
-
-	header {
-		background-color: $colorBg;
-		left: 0;
-		line-height: 3.5em;
-		opacity: 0.975;
-		position: absolute;
-		right: 0;
-		top: 0;
-	}
-
-	nav {
-		margin: auto;
-		max-width: 52em;
-		padding: 0 4em;
-	}
-
 	a {
-		color: $colorText;
+		margin-right: 1.5rem;

-		&:visited {
-			color: $colorText;
-		}
-	}
-
-	@media (width <=684px) {
-		header {
-			position: fixed;
-			text-align: center;
+		&:last-child {
+			margin-right: 0;
 		}
 	}
 </style>

 <header>
-	<nav>
-		<a href="/">
-			{
-				pathname !== "/" ? (
-					<>
-						<Icon name="hugeicons:arrow-left-01" />
-						<span>Home</span>
-					</>
-				) : (
-					<>
-						<Icon name="hugeicons:source-code" />
-						<span>{import.meta.env.DEFAULT_TITLE}</span>
-					</>
-				)
-			}
-		</a>
+	<nav aria-label="Navigation">
+		<a href="/" lang="en">Home</a>
+		<a href="/blog/" lang="en">Blog</a>
 	</nav>
 </header>
@@ -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" rel="noopener" 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>
@@ -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" rel="noopener" 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>
@@ -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" rel="noopener" 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>
@@ -0,0 +1,17 @@
+<style lang="scss">
+	a {
+		display: inline-block;
+	}
+
+	svg {
+		vertical-align: middle;
+	}
+</style>
+
+<a href="/feed.xml" title="RSS Feed" rel="noopener" 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>
@@ -0,0 +1,19 @@
+---
+import type { Thing } from "schema-dts";
+
+type Props = {
+	readonly schema: Thing[];
+};
+
+const { schema } = Astro.props;
+
+const payload = {
+	"@context": "https://schema.org",
+	"@graph": schema,
+};
+
+const json = JSON.stringify(payload);
+---
+
+<!-- JSON-LD -->
+<script is:inline type="application/ld+json" set:html={json} />
@@ -1,35 +0,0 @@
---
-type Props = {
-	readonly nextUrl?: string;
-	readonly prevUrl?: string;
-};
-
-const { nextUrl, prevUrl } = Astro.props;
---
-
-<style lang="scss">
-	div {
-		text-align: center;
-	}
-
-	span {
-		margin: 0 2em;
-	}
-</style>
-
-<div>
-	{
-		prevUrl && (
-			<span>
-				<a href={prevUrl}>&lt; Prev</a>
-			</span>
-		)
-	}
-	{
-		nextUrl && (
-			<span>
-				<a href={nextUrl}>Next &gt;</a>
-			</span>
-		)
-	}
-</div>
@@ -0,0 +1,40 @@
+---
+import { type CollectionEntry, render } from "astro:content";
+import dayjs from "dayjs";
+
+type Props = {
+	readonly post: CollectionEntry<"blog">;
+};
+
+const { post } = Astro.props;
+const { remarkPluginFrontmatter } = await render(post);
+
+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;
+	}
+</style>
+
+<li>
+	<article>
+		<a href={`/blog/${post.id}`} lang={post.data.lang}>{post.data.title}</a>
+		<div>
+			<small>
+				<time datetime={datePublished} lang={post.data.lang}>{formattedDate}</time>
+				<span>•</span>
+				<span>{remarkPluginFrontmatter.minutesRead}</span>
+			</small>
+		</div>
+	</article>
+</li>
@@ -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">
-	@import "../scss/_variables.scss";
-
-	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>
@@ -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.id}`} lang={post.data.lang}>
+						{post.data.title}
+					</a>
+
+					<small>
+						<time datetime={post.data.datePublished.toISOString()} lang={post.data.lang}>
+							{dayjs(post.data.datePublished.toString()).format("MMMM DD, YYYY")}
+						</time>
+					</small>
+				</li>
+			))
+		}
+	</ul>
+</section>
@@ -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>
@@ -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>
@@ -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",
+	},
+};
@@ -0,0 +1,18 @@
+import { defineCollection } from "astro:content";
+import { glob } from "astro/loaders";
+import { z } from "astro/zod";
+
+const blog = defineCollection({
+	loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
+	schema: z.object({
+		basedOn: z.optional(z.string()),
+		dateModified: z.coerce.date(),
+		datePublished: z.coerce.date(),
+		description: z.string(),
+		draft: z.optional(z.boolean()),
+		lang: z.string(),
+		title: z.string(),
+	}),
+});
+
+export const collections = { blog };
@@ -1,8 +1,10 @@
 ---
-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."
+basedOn: "https://adrianhenke.wordpress.com/2008/12/05/create-lib-file-from-dll/"
+title: "Create .lib file from .dll (archive)"
+description: "Quick guide to create a .lib from a .dll on Windows: list exports with dumpbin, make a .def file, then generate the import library with lib."
+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/)).
@@ -1,8 +1,9 @@
 ---
 title: "Горячая перезагрузка ElectronJS приложения"
-author: "Valentin Popov"
-pubDate: "2019-08-15"
-description: "Руководство по автоматической перезагрузке приложений на Electron с помощью пакетов electron-reload и electron-webpack. Обход проблем с совместимостью и использование HMR для renderer процесса."
+description: "Горячая перезагрузка ElectronJS: перезапуск main через nodemon и автообновление renderer с HMR/chokidar. Пошагово, без electron-reload и с Webpack."
+datePublished: "2019-08-15"
+dateModified: "2019-08-15"
+lang: "ru"
 ---

 ## Main процесс
@@ -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
 ---

@@ -1,8 +1,9 @@
 ---
 title: 'Получение исходного кода "Chromium Projects"'
-author: "Valentin Popov"
-pubDate: "2012-01-30"
-description: "Изучение исходных кодов Chromium: подготовка системы и установка необходимых программных компонентов. Руководство для начинающих разработчиков. Получите инструкции по установке Microsoft Visual Studio, Cygwin, Python и других инструментов. Действительно на январь-февраль 2012 года."
+description: "Как получить и подготовить исходники Chromium на Windows: Visual Studio, Cygwin, depot_tools, команды gclient. Краткая пошаговая инструкция."
+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/)).
@@ -1,8 +1,9 @@
 ---
 title: "Установка Moodle в Fedora"
-author: "Valentin Popov"
-pubDate: "2018-07-23"
-description: "Решение проблем установки Moodle из-за SELinux: как настроить правила доступа для устранения ошибок в веб-интерфейсе и при работе с cURL. Практические советы и команды."
+description: "Установка Moodle в Fedora: как исправить зависание инсталлятора и cURL error из-за SELinux. Правильные setsebool и chcon для доступа к сети и каталогам."
+datePublished: "2018-07-23"
+dateModified: "2018-07-23"
+lang: "ru"
 ---

 Во время установки Moodle, сталкиваешься со следующими проблемами:
@@ -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 сервера.'
+description: "Кросс-компиляция Rust для OpenWrt на TL-MR3020 (MIPS): rustup, cross-rs, Docker/Podman, UPX, пример 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.
@@ -1,14 +0,0 @@
-import { defineCollection, z } from "astro:content";
-
-const blog = defineCollection({
-	type: "content",
-	schema: z.object({
-		author: z.string(),
-		description: z.string(),
-		draft: z.optional(z.boolean()),
-		pubDate: z.coerce.date(),
-		title: z.string(),
-	}),
-});
-
-export const collections = { blog };
@@ -1,9 +1 @@
 /// <reference path="../.astro/types.d.ts" />
-interface ImportMetaEnv {
-	readonly DEFAULT_TITLE: string;
-	readonly DEFAULT_DESCRIPTION: string;
-}
-
-interface ImportMeta {
-	readonly env: ImportMetaEnv;
-}
@@ -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`);
+				}
+			},
+		},
+	};
+}
@@ -1,30 +1,36 @@
 ---
+import type { Thing } from "schema-dts";
 import Analytics from "../components/Analytics.astro";
-import Footer from "../components/Footer.astro";
 import Head from "../components/Head.astro";
 import Header from "../components/Header.astro";
 import "../scss/global.scss";

 type Props = {
-	readonly description?: string;
-	readonly title?: string;
+	readonly description: string;
+	readonly lang: string;
+	readonly modifiedTime?: string;
+	readonly ogType?: "website" | "article";
+	readonly preview: string;
+	readonly publishedTime?: string;
+	readonly robots?: string;
+	readonly schema: Thing[];
+	readonly title: string;
 };

-const { description, title } = Astro.props;
+const { description, lang, modifiedTime, ogType, preview, publishedTime, robots, schema, title } = Astro.props;
 ---

-<html lang="ru">
-	<Head
-		description={description ?? import.meta.env.DEFAULT_DESCRIPTION}
-		title={title ?? import.meta.env.DEFAULT_TITLE}
-	/>
+<html lang={lang}>
+	<Head title={title} description={description} preview={preview} robots={robots} schema={schema} lang={lang} ogType={ogType} publishedTime={publishedTime} modifiedTime={modifiedTime} />

 	<body>
-		<Header />
 		<main>
+			<section>
+				<Header />
+			</section>
+
 			<slot />
 		</main>
-		<Footer />
-		<Analytics title={title ?? import.meta.env.DEFAULT_TITLE} />
+		<Analytics />
 	</body>
 </html>
@@ -1,17 +1,34 @@
 ---
+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 siteUrl = new URL("/", Astro.site).toString();
+
+const schema = [
+	pageSchema({
+		siteUrl,
+		page: "/404",
+		title,
+		description,
+		lang,
+	}),
+];
 ---

-<Layout>
-	<div style="text-align:center;">
+<Layout title={title} description={description} preview={preview} lang={lang} robots="noindex, follow" schema={schema}>
+	<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')}`>
-					let me know
-				</a>
+				<a href=`mailto:valentin@popov.link?subject=${encodeURIComponent('I found a broken page')}`>let me know</a>
 			</small>
 		</p>
 	</div>
@@ -1,33 +0,0 @@
---
-import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
-import { getCollection } from "astro:content";
-import Layout from "../layouts/BaseLayout.astro";
-import Pagination from "../components/Pagination.astro";
-import PostSummary from "../components/PostSummary.astro";
-
-type Props = InferGetStaticPropsType<typeof getStaticPaths>;
-
-export const getStaticPaths = (async ({ paginate }) => {
-	const posts = await getCollection("blog", ({ data }) => {
-		return data.draft !== true;
-	});
-
-	posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
-
-	return paginate(posts, {
-		pageSize: 10,
-	});
-}) satisfies GetStaticPaths;
-
-const { page } = Astro.props;
---
-
-<Layout>
-	<section style={{ "margin-top": "3rem" }}>
-		{page.data.map((post) => <PostSummary post={post} />)}
-	</section>
-
-	<section>
-		<Pagination nextUrl={page.url.next} prevUrl={page.url.prev} />
-	</section>
-</Layout>
@@ -1,8 +1,13 @@
 ---
-import { type CollectionEntry, getCollection } from "astro:content";
+import { type CollectionEntry, getCollection, render } from "astro:content";
+import dayjs from "dayjs";
+import blogPostSchema from "../../utils/schemas/blogPostSchema";
+import breadcrumbSchema from "../../utils/schemas/breadcrumbSchema";
 import Comments from "../../components/Comments.astro";
 import Layout from "../../layouts/BaseLayout.astro";
-import dayjs from "dayjs";
+import personSchema from "../../utils/schemas/personSchema";
+import websiteSchema from "../../utils/schemas/websiteSchema";
+import { config } from "../../config";

 type Props = CollectionEntry<"blog">;

@@ -12,34 +17,79 @@ export async function getStaticPaths() {
 	});

 	return posts.map((post) => ({
-		params: { slug: post.slug },
+		params: { slug: post.id },
 		props: post,
 	}));
 }

 const post = Astro.props;
-const { Content } = await post.render();
-const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
+
+const { Content, remarkPluginFrontmatter } = await render(post);
+
+const description = post.data.description;
+const isBasedOn = post.data.basedOn;
+const lang = post.data.lang;
+const preview = `/images/preview/${post.id}.png`;
+const slug = post.id;
+const headline = post.data.title;
+const title = `${post.data.title} | Valentin Popov`;
+
+const dateModified = (post.data.dateModified ?? post.data.datePublished).toISOString();
+const datePublished = post.data.datePublished.toISOString();
+const formattedDate = dayjs(post.data.datePublished.toString()).format("MMMM DD, YYYY");
+
+const siteUrl = new URL("/", Astro.site).toString();
+
+const schema = [
+	websiteSchema({ siteUrl, name: config.og.website, description, lang }),
+	personSchema({ siteUrl }),
+	blogPostSchema({
+		siteUrl,
+		dateModified,
+		datePublished,
+		description,
+		isBasedOn,
+		lang,
+		preview,
+		slug,
+		title: headline,
+	}),
+	breadcrumbSchema({
+		siteUrl,
+		items: [
+			{ name: "Home", url: "/" },
+			{ name: "Blog", url: "/blog/" },
+			{ name: headline, url: `/blog/${slug}` },
+		],
+	}),
+];
 ---

-<Layout description={post.data.description} title={post.data.title}>
+<style lang="scss">
+	@use "../../scss/variables" as *;
+
+	p {
+		opacity: 0.5;
+	}
+</style>
+
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema} ogType="article" publishedTime={datePublished} modifiedTime={dateModified}>
 	<article>
-		<section>
-			<h1>{post.data.title}</h1>
-		</section>
+		<header>
+			<h1>{headline}</h1>

-		<section>
-			<Content />
-		</section>
-
-		<section>
 			<p>
 				<small>
 					Posted
-					<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
-					by&nbsp;{post.data.author}
+					<time datetime={datePublished} lang="en">{formattedDate}</time>
+					<span>&nbsp;•&nbsp;</span>
+					<span>{remarkPluginFrontmatter.minutesRead}</span>
 				</small>
 			</p>
+		</header>
+
+		<section>
+			<Content />
 		</section>

 		<section>
@@ -0,0 +1,71 @@
+---
+import type { CollectionEntry } from "astro:content";
+import { config } from "../../config";
+import { getCollection } from "astro:content";
+import blogSchema from "../../utils/schemas/blogSchema";
+import breadcrumbSchema from "../../utils/schemas/breadcrumbSchema";
+import Layout from "../../layouts/BaseLayout.astro";
+import PostElement from "../../components/PostElement.astro";
+import RSSIcon from "../../components/Icons/RSS.astro";
+import websiteSchema from "../../utils/schemas/websiteSchema";
+
+const posts = await getCollection("blog", ({ data }) => {
+	return data.draft !== true;
+});
+
+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 siteUrl = new URL("/", Astro.site).toString();
+
+const schema = [
+	websiteSchema({ siteUrl, name: config.og.website, description, lang }),
+	blogSchema({ siteUrl, title, description, lang, posts }),
+	breadcrumbSchema({
+		siteUrl,
+		items: [
+			{ name: "Home", url: "/" },
+			{ name: "Blog", url: "/blog/" },
+		],
+	}),
+];
+---
+
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
+	<section>
+		<h1>
+			Blog posts
+			<RSSIcon />
+		</h1>
+	</section>
+
+	<section>
+		{
+			years.map((year) => (
+				<div>
+					<h2>{year}</h2>
+					<ul>
+						{postsByYear[year].map((post) => (
+							<PostElement post={post} />
+						))}
+					</ul>
+				</div>
+			))
+		}
+	</section>
+</Layout>
@@ -1,22 +0,0 @@
-import { getCollection } from "astro:content";
-import rss from "@astrojs/rss";
-
-export async function GET(context) {
-	const posts = await getCollection("blog", ({ data }) => {
-		return data.draft !== true;
-	});
-
-	return rss({
-		customData: `<language>ru-ru</language>`,
-		description: import.meta.env.DEFAULT_DESCRIPTION,
-		items: posts.map((post) => ({
-			customData: post.data.customData,
-			description: post.data.description,
-			link: `/blog/${post.slug}`,
-			pubDate: post.data.pubDate,
-			title: post.data.title,
-		})),
-		site: context.site,
-		title: import.meta.env.DEFAULT_TITLE,
-	});
-}
@@ -0,0 +1,48 @@
+import type { APIContext } from "astro";
+import { getCollection } from "astro:content";
+import MarkdownIt from "markdown-it";
+import rss from "@astrojs/rss";
+import sanitizeHtml from "sanitize-html";
+import { config } from "../config";
+
+const parser = new MarkdownIt({ html: false, linkify: true });
+
+export async function GET(context: APIContext) {
+	const title = "RSS Feed | Valentin Popov Blog";
+	const description = "Follow the latest posts from Valentin Popov via RSS.";
+
+	const posts = (await getCollection("blog", ({ data }) => data.draft !== true)).sort((a, b) => b.data.datePublished.getTime() - a.data.datePublished.getTime());
+
+	const feedUrl = new URL("/feed.xml", context.site).toString();
+
+	return rss({
+		title,
+		description,
+		site: context.site ?? config.author.url,
+		xmlns: {
+			atom: "http://www.w3.org/2005/Atom",
+			content: "http://purl.org/rss/1.0/modules/content/",
+			dc: "http://purl.org/dc/elements/1.1/",
+		},
+		customData: `<atom:link href="${feedUrl}" rel="self" type="application/rss+xml"/>`,
+		items: posts.map((post) => ({
+			title: post.data.title,
+			description: post.data.description,
+			link: `/blog/${post.id}/`,
+			pubDate: post.data.datePublished,
+			author: `${config.author.email} (${config.author.name})`,
+			content: sanitizeHtml(parser.render(post.body ?? ""), {
+				allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img", "pre", "code", "span"]),
+				allowedAttributes: {
+					...sanitizeHtml.defaults.allowedAttributes,
+					img: ["src", "alt", "title", "loading", "decoding"],
+					code: ["class"],
+					span: ["class"],
+					pre: ["class"],
+					a: ["href", "name", "target", "rel"],
+				},
+			}),
+			customData: `<dc:language>${post.data.lang}</dc:language>`,
+		})),
+	});
+}
@@ -0,0 +1,25 @@
+---
+import { config } from "../config";
+import LatestPostsSection from "../components/Sections/LatestPosts.astro";
+import Layout from "../layouts/BaseLayout.astro";
+import pageSchema from "../utils/schemas/pageSchema";
+import personSchema from "../utils/schemas/personSchema";
+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 = "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 siteUrl = new URL("/", Astro.site).toString();
+
+const schema = [websiteSchema({ siteUrl, name: config.og.website, description, lang }), personSchema({ siteUrl }), pageSchema({ siteUrl, page: "/", title, description, lang, type: "ProfilePage" })];
+---
+
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
+	<WelcomeSection />
+	<SocialLinksSection />
+	<LatestPostsSection />
+</Layout>
@@ -0,0 +1,13 @@
+import type { Element, Root } from "hast";
+import { visit } from "unist-util-visit";
+
+export default function rehypeLazyImages() {
+	return (tree: Root): void => {
+		visit(tree, "element", (node: Element) => {
+			if (node.tagName !== "img") return;
+			node.properties ??= {};
+			node.properties.loading ??= "lazy";
+			node.properties.decoding ??= "async";
+		});
+	};
+}
@@ -1,3 +1,5 @@
+@use "variables" as *;
+
 *,
 *::after,
 *::before {
@@ -35,7 +37,7 @@ body {
 	margin: auto;
 	max-width: 52em;
 	min-height: 100vh;
-	padding: 4em;
+	padding: 2em 4em;
 	position: relative;
 	text-rendering: optimizelegibility;
 }
@@ -43,7 +45,7 @@ body {
@media (width <=684px) {
 	body {
 		font-size: $fontSizeBase * 0.85;
-		padding: 4em 1em 2em;
+		padding: 2em 1em;
 	}
 }

@@ -1,5 +1,7 @@
@media print {
 	body {
+		background: #fff;
+		color: #000;
 		padding: 0;
 	}

@@ -18,4 +20,25 @@
 	img {
 		max-width: 500px;
 	}
+
+	* {
+		background: none;
+		border-color: #000;
+		color: #000;
+	}
+
+	a {
+		color: #000;
+		text-decoration: underline;
+	}
+
+	table {
+		border: 1px solid #000;
+	}
+
+	th,
+	td {
+		background: none;
+		border: 1px solid #000;
+	}
 }
@@ -1,5 +1,5 @@
-$colorBg: #212529;
-$colorBgAlt: hwb(0deg 0% 100% / 20%);
+$colorBg: #181818;
+$colorBgAlt: rgba(0, 0, 0, 0.2);
 $colorBgCode: #3b3d42;
 $colorBlossom: #6da13f;
 $colorFade: #598332;
@@ -1,3 +1,3 @@
-@import "variables";
-@import "framework";
-@import "print";
+@use "variables";
+@use "framework";
+@use "print";
@@ -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<Uint8Array> {
+	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();
+}
@@ -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");
+	})(),
+};
@@ -0,0 +1,38 @@
+import type { BlogPosting } from "schema-dts";
+import { personId, websiteId } from "./ids";
+
+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): BlogPosting => {
+	const url = new URL(`/blog/${slug}`, siteUrl).toString();
+
+	return {
+		"@type": "BlogPosting",
+		"@id": url,
+		"url": url,
+		"headline": title,
+		"description": description,
+		"image": new URL(preview, siteUrl).toString(),
+		"datePublished": datePublished,
+		"dateModified": dateModified,
+		"inLanguage": lang,
+		"author": { "@id": personId(siteUrl) },
+		"publisher": { "@id": personId(siteUrl) },
+		"isPartOf": { "@id": websiteId(siteUrl) },
+		"mainEntityOfPage": {
+			"@type": "WebPage",
+			"@id": url,
+		},
+		...(isBasedOn && { isBasedOn: isBasedOn }),
+	};
+};
@@ -0,0 +1,36 @@
+import type { CollectionPage } from "schema-dts";
+import type { CollectionEntry } from "astro:content";
+import { websiteId } from "./ids";
+
+export type BlogSchemaParams = {
+	readonly description: string;
+	readonly lang: string;
+	readonly posts: CollectionEntry<"blog">[];
+	readonly siteUrl: string;
+	readonly title: string;
+};
+
+export default ({ siteUrl, title, description, lang, posts }: BlogSchemaParams): CollectionPage => {
+	const url = new URL("/blog/", siteUrl).toString();
+
+	return {
+		"@type": "CollectionPage",
+		"@id": url,
+		"url": url,
+		"name": title,
+		"description": description,
+		"inLanguage": lang,
+		"isPartOf": { "@id": websiteId(siteUrl) },
+		"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.id}`, siteUrl).toString(),
+				"name": post.data.title,
+			})),
+		},
+	};
+};
@@ -0,0 +1,21 @@
+import type { BreadcrumbList } from "schema-dts";
+
+export type BreadcrumbItem = {
+	readonly name: string;
+	readonly url: string;
+};
+
+export type BreadcrumbSchemaParams = {
+	readonly items: BreadcrumbItem[];
+	readonly siteUrl: string;
+};
+
+export default ({ items, siteUrl }: BreadcrumbSchemaParams): BreadcrumbList => ({
+	"@type": "BreadcrumbList",
+	"itemListElement": items.map((item, index) => ({
+		"@type": "ListItem",
+		"position": index + 1,
+		"name": item.name,
+		"item": new URL(item.url, siteUrl).toString(),
+	})),
+});
@@ -0,0 +1,3 @@
+export const websiteId = (siteUrl: string): string => new URL("#website", siteUrl).toString();
+
+export const personId = (siteUrl: string): string => new URL("#person", siteUrl).toString();
--- a/Show More
+++ b/Show More