valentineus/popov.link
1
Fork 0
Code Issues Pull Requests Actions Activity

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

Browse Source 
- 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.
This commit is contained in:
Valentin Popov
2026-04-22 17:53:21 +00:00
parent 5e818d804d
commit 933d6874b1
12 changed files with 1152 additions and 710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
astro.config.mjs
View File

@@ -1,17 +1,54 @@
import { defineConfig } from "astro/config"; 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 { remarkReadingTime } from "./src/plugins/remarkReadingTime";
import ogImages from "./src/integrations/ogImages"; 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({ export default defineConfig({
site: "https://popov.link", site: "https://popov.link",
output: "static", 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: { build: {
inlineStylesheets: "always", inlineStylesheets: "always",
}, },
markdown: { markdown: {
remarkPlugins: [remarkReadingTime], remarkPlugins: [remarkReadingTime],
rehypePlugins: [[rehypeExternalLinks, { target: "_blank", rel: ["noopener", "noreferrer"] }], rehypeLazyImages],
shikiConfig: { shikiConfig: {
theme: "vitesse-dark", theme: "vitesse-dark",
}, },

1682
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@@ -32,14 +32,18 @@
"geist": "^1.4.2", "geist": "^1.4.2",
"globby": "^16.0.0", "globby": "^16.0.0",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"markdown-it": "^14.1.1",
"mdast-util-to-string": "^4.0.0", "mdast-util-to-string": "^4.0.0",
"reading-time": "^1.5.0", "reading-time": "^1.5.0",
"rehype-external-links": "^3.0.0",
"sanitize-html": "^2.17.3",
"sass": "^1.89.1", "sass": "^1.89.1",
"satori": "^0.26.0", "satori": "^0.26.0",
"satori-html": "^0.3.2", "satori-html": "^0.3.2",
"schema-dts": "^2.0.0", "schema-dts": "^2.0.0",
"sharp": "^0.34.2", "sharp": "^0.34.2",
"typescript": "^5" "typescript": "^5",
"unist-util-visit": "^5.1.0"
}, },
"devDependencies": { "devDependencies": {
"prettier": "^3.5.3", "prettier": "^3.5.3",

6
public/manifest.json
View File

@@ -18,7 +18,7 @@
"type": "image/png" "type": "image/png"
} }
], ],
"background_color": "#ffffff", "background_color": "#181818",
"theme_color": "#ffffff", "theme_color": "#181818",
"display": "fullscreen" "display": "standalone"
} }

37
src/components/Head.astro
View File

@@ -1,33 +1,44 @@
--- ---
import type { Thing } from "schema-dts"; import type { Thing } from "schema-dts";
import { config } from "../config";
import JsonLd from "./JsonLd.astro"; import JsonLd from "./JsonLd.astro";
type Props = { type Props = {
readonly description: string; readonly description: string;
readonly lang: string;
readonly modifiedTime?: string;
readonly ogType?: "website" | "article";
readonly preview: string; readonly preview: string;
readonly publishedTime?: string;
readonly robots?: string; readonly robots?: string;
readonly schema: Thing[]; readonly schema: Thing[];
readonly title: string; 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 canonicalUrl = new URL(Astro.url.pathname, Astro.site);
const previewUrl = new URL(preview, Astro.site); const previewUrl = new URL(preview, Astro.site);
const ogLocale = lang === "ru" ? "ru_RU" : "en_US";
--- ---
<head> <head>
<!-- Meta Tags --> <!-- Meta Tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content={description} /> <meta name="description" content={description} />
<meta name="robots" content={robots} /> <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="/feed.xml" rel="alternate" title="RSS" type="application/atom+xml" />
<link href="/sitemap-index.xml" rel="sitemap" /> <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> <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="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#181818" />
<!-- Open Graph --> <!-- 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:title" content={title} />
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />
<meta property="og:image" content={previewUrl} />
<meta property="og:url" content={canonicalUrl} /> <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 --> <!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" /> <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:title" content={title} />
<meta name="twitter:description" content={description} /> <meta name="twitter:description" content={description} />
<meta name="twitter:image" content={previewUrl} /> <meta name="twitter:image" content={previewUrl} />
<meta name="twitter:image:alt" content={title} />
<JsonLd schema={schema} /> <JsonLd schema={schema} />
</head> </head>

4
src/components/Header.astro
View File

@@ -10,7 +10,7 @@
<header> <header>
<nav aria-label="Navigation"> <nav aria-label="Navigation">
<a href="/" lang="en" aria-label="Home">Home</a> <a href="/" lang="en">Home</a>
<a href="/blog/" lang="en" aria-label="Blog">Blog</a> <a href="/blog/" lang="en">Blog</a>
</nav> </nav>
</header> </header>

2
src/components/PostElement.astro
View File

@@ -31,7 +31,7 @@ const datePublished = post.data.datePublished.toISOString();
<a href={`/blog/${post.id}`} lang={post.data.lang}>{post.data.title}</a> <a href={`/blog/${post.id}`} lang={post.data.lang}>{post.data.title}</a>
<div> <div>
<small> <small>
<time datetime={datePublished} lang="en">{formattedDate}</time> <time datetime={datePublished} lang={post.data.lang}>{formattedDate}</time>
<span>•</span> <span>•</span>
<span>{remarkPluginFrontmatter.minutesRead}</span> <span>{remarkPluginFrontmatter.minutesRead}</span>
</small> </small>

2
src/components/Sections/LatestPosts.astro
View File

@@ -32,7 +32,7 @@ const latestPosts = posts.slice(0, 5);
</a> </a>
<small> <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")} {dayjs(post.data.datePublished.toString()).format("MMMM DD, YYYY")}
</time> </time>
</small> </small>

7
src/layouts/BaseLayout.astro
View File

@@ -8,17 +8,20 @@ import "../scss/global.scss";
type Props = { type Props = {
readonly description: string; readonly description: string;
readonly lang: string; readonly lang: string;
readonly modifiedTime?: string;
readonly ogType?: "website" | "article";
readonly preview: string; readonly preview: string;
readonly publishedTime?: string;
readonly robots?: string; readonly robots?: string;
readonly schema: Thing[]; readonly schema: Thing[];
readonly title: string; 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}> <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> <body>
<main> <main>

15
src/pages/blog/[...slug].astro
View File

@@ -1,9 +1,9 @@
--- ---
import { type CollectionEntry, getCollection, render } from "astro:content"; import { type CollectionEntry, getCollection, render } from "astro:content";
import dayjs from "dayjs";
import blogPostSchema from "../../utils/schemas/blogPostSchema"; import blogPostSchema from "../../utils/schemas/blogPostSchema";
import breadcrumbSchema from "../../utils/schemas/breadcrumbSchema"; import breadcrumbSchema from "../../utils/schemas/breadcrumbSchema";
import Comments from "../../components/Comments.astro"; import Comments from "../../components/Comments.astro";
import dayjs from "dayjs";
import Layout from "../../layouts/BaseLayout.astro"; import Layout from "../../layouts/BaseLayout.astro";
import personSchema from "../../utils/schemas/personSchema"; import personSchema from "../../utils/schemas/personSchema";
import websiteSchema from "../../utils/schemas/websiteSchema"; import websiteSchema from "../../utils/schemas/websiteSchema";
@@ -31,9 +31,10 @@ const isBasedOn = post.data.basedOn;
const lang = post.data.lang; const lang = post.data.lang;
const preview = `/images/preview/${post.id}.png`; const preview = `/images/preview/${post.id}.png`;
const slug = post.id; 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 datePublished = post.data.datePublished.toISOString();
const formattedDate = dayjs(post.data.datePublished.toString()).format("MMMM DD, YYYY"); const formattedDate = dayjs(post.data.datePublished.toString()).format("MMMM DD, YYYY");
@@ -51,14 +52,14 @@ const schema = [
lang, lang,
preview, preview,
slug, slug,
title, title: headline,
}), }),
breadcrumbSchema({ breadcrumbSchema({
siteUrl, siteUrl,
items: [ items: [
{ name: "Home", url: "/" }, { name: "Home", url: "/" },
{ name: "Blog", url: "/blog/" }, { name: "Blog", url: "/blog/" },
{ name: title, url: `/blog/${slug}` }, { name: headline, url: `/blog/${slug}` },
], ],
}), }),
]; ];
@@ -72,10 +73,10 @@ const schema = [
} }
</style> </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> <article>
<header> <header>
<h1>{title}</h1> <h1>{headline}</h1>
<p> <p>
<small> <small>

47
src/pages/feed.xml.js
View File

@@ -1,24 +1,47 @@
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import MarkdownIt from "markdown-it";
import rss from "@astrojs/rss"; 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) { export async function GET(context) {
const title = "RSS Feed | Valentin Popov Blog"; const title = "RSS Feed | Valentin Popov Blog";
const description = "Follow the latest posts from Valentin Popov via RSS."; const description = "Follow the latest posts from Valentin Popov via RSS.";
const posts = await getCollection("blog", ({ data }) => { const posts = (await getCollection("blog", ({ data }) => data.draft !== true)).sort((a, b) => b.data.datePublished.getTime() - a.data.datePublished.getTime());
return data.draft !== true;
}); const feedUrl = new URL("/feed.xml", context.site).toString();
return rss({ return rss({
customData: `<language>en</language>`, title,
description: description, description,
items: posts.map((post) => ({
description: post.data.description,
link: `/blog/${post.id}`,
pubDate: post.data.datePublished,
title: post.data.title,
})),
site: context.site, 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>`,
})),
}); });
} }

13
src/plugins/rehypeLazyImages.ts Normal file
View File

@@ -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";
});
};
}