From 933d6874b1fe1dbb113e9de39425f2d713a72408 Mon Sep 17 00:00:00 2001 From: Valentin Popov Date: Wed, 22 Apr 2026 17:53:21 +0000 Subject: 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. --- src/components/Head.astro | 37 ++++++++++++++++++++++------ src/components/Header.astro | 4 +-- src/components/PostElement.astro | 2 +- src/components/Sections/LatestPosts.astro | 2 +- src/layouts/BaseLayout.astro | 7 ++++-- src/pages/blog/[...slug].astro | 15 +++++------ src/pages/feed.xml.js | 41 ++++++++++++++++++++++++------- src/plugins/rehypeLazyImages.ts | 13 ++++++++++ 8 files changed, 92 insertions(+), 29 deletions(-) create mode 100644 src/plugins/rehypeLazyImages.ts (limited to 'src') diff --git a/src/components/Head.astro b/src/components/Head.astro index 258162d..fbfba1c 100644 --- 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"; --- - - + + - + + + + + + {title} @@ -36,20 +47,32 @@ const previewUrl = new URL(preview, Astro.site); - + - + + + - + + + + + + {ogType === "article" && publishedTime && } + {ogType === "article" && modifiedTime && } + {ogType === "article" && } + + + diff --git a/src/components/Header.astro b/src/components/Header.astro index f9a0c57..3013520 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -10,7 +10,7 @@
diff --git a/src/components/PostElement.astro b/src/components/PostElement.astro index 051a8ff..e201102 100644 --- a/src/components/PostElement.astro +++ b/src/components/PostElement.astro @@ -31,7 +31,7 @@ const datePublished = post.data.datePublished.toISOString(); {post.data.title}
- + • {remarkPluginFrontmatter.minutesRead} diff --git a/src/components/Sections/LatestPosts.astro b/src/components/Sections/LatestPosts.astro index 5c6afd9..daba4c8 100644 --- a/src/components/Sections/LatestPosts.astro +++ b/src/components/Sections/LatestPosts.astro @@ -32,7 +32,7 @@ const latestPosts = posts.slice(0, 5); - diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index a2f0327..8336a3c 100644 --- 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; --- - +
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index 5ba6b3b..907f64e 100644 --- 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 = [ } - +
-

{title}

+

{headline}

diff --git a/src/pages/feed.xml.js b/src/pages/feed.xml.js index 5aea78b..005f2d8 100644 --- 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: `en`, - description: description, + title, + description, + site: context.site, + 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: [`en`, ``].join(""), items: posts.map((post) => ({ + title: post.data.title, description: post.data.description, - link: `/blog/${post.id}`, + link: `/blog/${post.id}/`, pubDate: post.data.datePublished, - title: post.data.title, + 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: `${post.data.lang}`, })), - site: context.site, - title: title, }); } diff --git a/src/plugins/rehypeLazyImages.ts b/src/plugins/rehypeLazyImages.ts new file mode 100644 index 0000000..eb470a4 --- /dev/null +++ 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"; + }); + }; +} -- cgit v1.2.3