feat: enhance blog and SEO features with new plugins and metadata

- Introduced rehypeLazyImages plugin for lazy loading images in blog posts. - Updated sitemap integration to include last modified dates for blog posts. - Enhanced Head and BaseLayout components to support additional Open Graph metadata. - Improved RSS feed generation with sanitized content and author information. - Updated manifest.json for a darker theme and standalone display mode. - Added support for language-specific attributes in various components. - Refactored blog post handling to include modified and published timestamps.
2026-04-22 17:53:21 +00:00
parent 5e818d804d
commit 933d6874b1
12 changed files with 1152 additions and 710 deletions
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,17 +1,54 @@
 import { defineConfig } from "astro/config";
+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 sitemap from "@astrojs/sitemap";
+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: "static",
-	integrations: [sitemap(), ogImages()],
+	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;
+			},
+		}),
+		ogImages(),
+	],
 	build: {
 		inlineStylesheets: "always",
 	},
 	markdown: {
 		remarkPlugins: [remarkReadingTime],
+		rehypePlugins: [[rehypeExternalLinks, { target: "_blank", rel: ["noopener", "noreferrer"] }], rehypeLazyImages],
 		shikiConfig: {
 			theme: "vitesse-dark",
 		},
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -32,14 +32,18 @@
    "geist": "^1.4.2",
    "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",
+    "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.34.2",
-    "typescript": "^5"
+    "typescript": "^5",
+    "unist-util-visit": "^5.1.0"
  },
  "devDependencies": {
    "prettier": "^3.5.3",
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -18,7 +18,7 @@
      "type": "image/png"
    }
  ],
-  "background_color": "#ffffff",
-  "theme_color": "#ffffff",
-  "display": "fullscreen"
+  "background_color": "#181818",
+  "theme_color": "#181818",
+  "display": "standalone"
 }
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@@ -1,33 +1,44 @@
 ---
 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 { description, preview, robots = "index, follow", schema, 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 Tags -->
-	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />

 	<meta name="description" content={description} />
 	<meta name="robots" content={robots} />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<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={config.author.url} rel="author" />
+
+	<!-- hreflang -->
+	<link rel="alternate" hreflang={lang} href={canonicalUrl} />
+	<link rel="alternate" hreflang="x-default" href={canonicalUrl} />

 	<title>{title}</title>

@@ -36,20 +47,32 @@ const previewUrl = new URL(preview, Astro.site);
 	<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" />
+	<meta name="theme-color" content="#181818" />

 	<!-- Open Graph -->
-	<meta property="og:type" content="website" />
+	<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:image" content={previewUrl} />
 	<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>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -10,7 +10,7 @@

 <header>
 	<nav aria-label="Navigation">
-		<a href="/" lang="en" aria-label="Home">Home</a>
-		<a href="/blog/" lang="en" aria-label="Blog">Blog</a>
+		<a href="/" lang="en">Home</a>
+		<a href="/blog/" lang="en">Blog</a>
 	</nav>
 </header>
--- a/src/components/PostElement.astro
+++ b/src/components/PostElement.astro
@@ -31,7 +31,7 @@ const datePublished = post.data.datePublished.toISOString();
 		<a href={`/blog/${post.id}`} lang={post.data.lang}>{post.data.title}</a>
 		<div>
 			<small>
-				<time datetime={datePublished} lang="en">{formattedDate}</time>
+				<time datetime={datePublished} lang={post.data.lang}>{formattedDate}</time>
 				<span>•</span>
 				<span>{remarkPluginFrontmatter.minutesRead}</span>
 			</small>
--- a/src/components/Sections/LatestPosts.astro
+++ b/src/components/Sections/LatestPosts.astro
@@ -32,7 +32,7 @@ const latestPosts = posts.slice(0, 5);
 					</a>

 					<small>
-						<time datetime={post.data.datePublished.toISOString()} lang="en">
+						<time datetime={post.data.datePublished.toISOString()} lang={post.data.lang}>
 							{dayjs(post.data.datePublished.toString()).format("MMMM DD, YYYY")}
 						</time>
 					</small>
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -8,17 +8,20 @@ import "../scss/global.scss";
 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 { description, lang, preview, robots, schema, title } = Astro.props;
+const { description, lang, modifiedTime, ogType, preview, publishedTime, robots, schema, title } = Astro.props;
 ---

 <html lang={lang}>
-	<Head title={title} description={description} preview={preview} robots={robots} schema={schema} />
+	<Head title={title} description={description} preview={preview} robots={robots} schema={schema} lang={lang} ogType={ogType} publishedTime={publishedTime} modifiedTime={modifiedTime} />

 	<body>
 		<main>
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -1,9 +1,9 @@
 ---
 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 dayjs from "dayjs";
 import Layout from "../../layouts/BaseLayout.astro";
 import personSchema from "../../utils/schemas/personSchema";
 import websiteSchema from "../../utils/schemas/websiteSchema";
@@ -31,9 +31,10 @@ const isBasedOn = post.data.basedOn;
 const lang = post.data.lang;
 const preview = `/images/preview/${post.id}.png`;
 const slug = post.id;
-const title = post.data.title;
+const headline = post.data.title;
+const title = `${post.data.title} | Valentin Popov`;

-const dateModified = post.data.dateModified?.toISOString();
+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");

@@ -51,14 +52,14 @@ const schema = [
 		lang,
 		preview,
 		slug,
-		title,
+		title: headline,
 	}),
 	breadcrumbSchema({
 		siteUrl,
 		items: [
 			{ name: "Home", url: "/" },
 			{ name: "Blog", url: "/blog/" },
-			{ name: title, url: `/blog/${slug}` },
+			{ name: headline, url: `/blog/${slug}` },
 		],
 	}),
 ];
@@ -72,10 +73,10 @@ const schema = [
 	}
 </style>

-<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema} ogType="article" publishedTime={datePublished} modifiedTime={dateModified}>
 	<article>
 		<header>
-			<h1>{title}</h1>
+			<h1>{headline}</h1>

 			<p>
 				<small>
--- a/src/pages/feed.xml.js
+++ b/src/pages/feed.xml.js
@@ -1,24 +1,47 @@
 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: true, linkify: true });

 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;
-	});
+	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({
-		customData: `<language>en</language>`,
-		description: description,
-		items: posts.map((post) => ({
-			description: post.data.description,
-			link: `/blog/${post.id}`,
-			pubDate: post.data.datePublished,
-			title: post.data.title,
-		})),
+		title,
+		description,
 		site: context.site,
-		title: title,
+		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: [`<language>en</language>`, `<atom:link href="${feedUrl}" rel="self" type="application/rss+xml"/>`].join(""),
+		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", "style"],
+					pre: ["class", "style"],
+					a: ["href", "name", "target", "rel"],
+				},
+			}),
+			customData: `<dc:language>${post.data.lang}</dc:language>`,
+		})),
 	});
 }
--- a/src/plugins/rehypeLazyImages.ts
+++ b/src/plugins/rehypeLazyImages.ts
@@ -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";
+		});
+	};
+}