chore(deps): update dependency sass to v1.100.0

Reviewed-on: #47

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",
 		},

package.json

@@ -3,11 +3,11 @@
   "type": "module",
   "version": "2025.01.24",
   "private": true,
-  "packageManager": "npm@11.12.1",
+  "license": "MIT",
+  "packageManager": "npm@11.15.0",
   "browserslist": [
     ">0.2%",
-    "not dead",
-    "IE 11"
+    "not dead"
   ],
   "scripts": {
     "format": "prettier --write .",
@@ -24,24 +24,29 @@
     "@astrojs/rss": "^4.0.12",
     "@astrojs/sitemap": "^3.4.1",
     "@resvg/resvg-js": "^2.6.2",
-    "astro": "^5.9.0",
+    "astro": "^6.0.0",
     "autoprefixer": "^10.4.21",
-    "cssnano": "^7.0.7",
-    "cssnano-preset-advanced": "^7.0.7",
+    "cssnano": "^8.0.0",
+    "cssnano-preset-advanced": "^8.0.0",
     "dayjs": "^1.11.13",
-    "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": {
+    "@types/markdown-it": "^14.1.2",
+    "@types/sanitize-html": "^2.16.1",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1"
   }

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"
 }

renovate.config.cjs

@@ -3,4 +3,4 @@ module.exports = {
 	gitAuthor: "renovate[bot] <renovatebot@noreply.localhost>",
 	optimizeForDisabled: true,
 	platform: "gitea",
-};
+};

src/components/Head.astro

@@ -1,32 +1,44 @@
 ---
-import type { WithContext, Thing } from "schema-dts";
+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 schema: WithContext<Thing>;
+	readonly publishedTime?: string;
+	readonly robots?: string;
+	readonly schema: Thing[];
 	readonly title: string;
 };
 
-const { description, preview, 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="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={config.author.url} rel="author" />
+
+	<!-- hreflang -->
+	<link rel="alternate" hreflang={lang} href={canonicalUrl} />
+	<link rel="alternate" hreflang="x-default" href={canonicalUrl} />
 
 	<title>{title}</title>
 
@@ -35,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>

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>

src/components/JsonLd.astro

@@ -1,12 +1,18 @@
 ---
-import type { WithContext, Thing } from "schema-dts";
+import type { Thing } from "schema-dts";
 
 type Props = {
-	readonly schema: WithContext<Thing>;
+	readonly schema: Thing[];
 };
 
 const { schema } = Astro.props;
-const json = JSON.stringify(schema);
+
+const payload = {
+	"@context": "https://schema.org",
+	"@graph": schema,
+};
+
+const json = JSON.stringify(payload);
 ---
 
 <!-- JSON-LD -->

src/components/PostElement.astro

@@ -1,5 +1,5 @@
 ---
-import { type CollectionEntry } from "astro:content";
+import { type CollectionEntry, render } from "astro:content";
 import dayjs from "dayjs";
 
 type Props = {
@@ -7,7 +7,7 @@ type Props = {
 };
 
 const { post } = Astro.props;
-const { remarkPluginFrontmatter } = await post.render();
+const { remarkPluginFrontmatter } = await render(post);
 
 const formattedDate = dayjs(post.data.datePublished.toString()).format("MMMM DD, YYYY");
 const datePublished = post.data.datePublished.toISOString();
@@ -28,10 +28,10 @@ const datePublished = post.data.datePublished.toISOString();
 
 <li>
 	<article>
-		<a href={`/blog/${post.slug}`} lang={post.data.lang}>{post.data.title}</a>
+		<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>

src/components/Sections/LatestPosts.astro

@@ -27,12 +27,12 @@ const latestPosts = posts.slice(0, 5);
 		{
 			latestPosts.map((post) => (
 				<li>
-					<a href={`/blog/${post.slug}`} lang={post.data.lang}>
+					<a href={`/blog/${post.id}`} lang={post.data.lang}>
 						{post.data.title}
 					</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>

src/content.config.ts

@@ -1,7 +1,9 @@
-import { defineCollection, z } from "astro:content";
+import { defineCollection } from "astro:content";
+import { glob } from "astro/loaders";
+import { z } from "astro/zod";
 
 const blog = defineCollection({
-	type: "content",
+	loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
 	schema: z.object({
 		basedOn: z.optional(z.string()),
 		dateModified: z.coerce.date(),

src/env.d.ts

@@ -1,9 +1 @@
 /// <reference path="../.astro/types.d.ts" />
-interface ImportMetaEnv {
-	readonly DEFAULT_TITLE: string;
-	readonly DEFAULT_DESCRIPTION: string;
-}
-
-interface ImportMeta {
-	readonly env: ImportMetaEnv;
-}

src/layouts/BaseLayout.astro

@@ -1,5 +1,5 @@
 ---
-import type { WithContext, Thing } from "schema-dts";
+import type { Thing } from "schema-dts";
 import Analytics from "../components/Analytics.astro";
 import Head from "../components/Head.astro";
 import Header from "../components/Header.astro";
@@ -8,16 +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 schema: WithContext<Thing>;
+	readonly publishedTime?: string;
+	readonly robots?: string;
+	readonly schema: Thing[];
 	readonly title: string;
 };
 
-const { description, lang, preview, 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} schema={schema} />
+	<Head title={title} description={description} preview={preview} robots={robots} schema={schema} lang={lang} ogType={ogType} publishedTime={publishedTime} modifiedTime={modifiedTime} />
 
 	<body>
 		<main>

src/pages/404.astro

@@ -8,16 +8,20 @@ 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,
-});
+const siteUrl = new URL("/", Astro.site).toString();
+
+const schema = [
+	pageSchema({
+		siteUrl,
+		page: "/404",
+		title,
+		description,
+		lang,
+	}),
+];
 ---
 
-<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
+<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>

src/pages/blog/[...slug].astro

@@ -1,9 +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 blogPostSchema from "../../utils/schemas/blogPostSchema";
-import dayjs from "dayjs";
+import personSchema from "../../utils/schemas/personSchema";
+import websiteSchema from "../../utils/schemas/websiteSchema";
+import { config } from "../../config";
 
 type Props = CollectionEntry<"blog">;
 
@@ -13,37 +17,52 @@ export async function getStaticPaths() {
 	});
 
 	return posts.map((post) => ({
-		params: { slug: post.slug },
+		params: { slug: post.id },
 		props: post,
 	}));
 }
 
 const post = Astro.props;
 
-const { Content, remarkPluginFrontmatter } = await post.render();
+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.slug}.png`;
-const slug = post.slug;
-const title = post.data.title;
+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?.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");
 
-const schema = blogPostSchema({
-	siteUrl: new URL("/", Astro.site).toString(),
-	dateModified,
-	datePublished,
-	description,
-	isBasedOn,
-	lang,
-	preview,
-	slug,
-	title,
-});
+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}` },
+		],
+	}),
+];
 ---
 
 <style lang="scss">
@@ -54,10 +73,10 @@ const schema = blogPostSchema({
 	}
 </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>

src/pages/blog/index.astro

@@ -3,9 +3,11 @@ 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;
@@ -29,11 +31,19 @@ const description = "Explore Valentin Popov's blog on software development, tech
 const preview = config.og.defaultPreview;
 const lang = "en";
 
-const schema = blogSchema({
-	siteUrl: new URL("/", Astro.site).toString(),
-	title,
-	posts,
-});
+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}>

src/pages/feed.xml.js

@@ -1,25 +0,0 @@
-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>en</language>`,
-		description: 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: title,
-	});
-}

src/pages/feed.xml.ts

@@ -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>`,
+		})),
+	});
+}

src/pages/index.astro

@@ -3,21 +3,19 @@ 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 schema = pageSchema({
-	siteUrl: new URL("/", Astro.site).toString(),
-	page: "/",
-	title,
-	description,
-	lang,
-});
+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}>

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

src/utils/createOgImage.ts

@@ -5,7 +5,7 @@ import { Resvg } from "@resvg/resvg-js";
 import dayjs from "dayjs";
 import satori from "satori";
 
-export async function createOgImage(title: string, datePublished: Date): Promise<Buffer> {
+export async function createOgImage(title: string, datePublished: Date): Promise<Uint8Array> {
 	const formattedDate = dayjs(datePublished).format("MMMM DD, YYYY");
 
 	const markup = await satori(

src/utils/schemas/blogPostSchema.ts

@@ -1,5 +1,5 @@
-import type { WithContext, BlogPosting } from "schema-dts";
-import { config } from "../../config";
+import type { BlogPosting } from "schema-dts";
+import { personId, websiteId } from "./ids";
 
 export type BlogPostSchemaParams = {
 	readonly dateModified: string;
@@ -13,25 +13,26 @@ export type BlogPostSchemaParams = {
 	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 }),
-});
+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 }),
+	};
+};

src/utils/schemas/blogSchema.ts

@@ -1,26 +1,36 @@
-import type { WithContext, CollectionPage } from "schema-dts";
+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, 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,
-		})),
-	},
-});
+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,
+			})),
+		},
+	};
+};

src/utils/schemas/breadcrumbSchema.ts

@@ -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(),
+	})),
+});

src/utils/schemas/ids.ts

@@ -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();

src/utils/schemas/pageSchema.ts

@@ -1,23 +1,35 @@
-import type { WithContext, WebPage } from "schema-dts";
+import type { ProfilePage, WebPage } from "schema-dts";
+import { personId, websiteId } from "./ids";
 
 export type WebsiteSchemaParams = {
 	readonly description: string;
+	readonly lang: string;
 	readonly page: string;
 	readonly siteUrl: string;
 	readonly title: string;
-	readonly lang: string;
+	readonly type?: "WebPage" | "ProfilePage";
 };
 
-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(),
-	},
-});
+export default ({ siteUrl, page, title, description, lang, type = "WebPage" }: WebsiteSchemaParams): WebPage | ProfilePage => {
+	const url = new URL(page, siteUrl).toString();
+
+	const base = {
+		"@type": type,
+		"@id": url,
+		"url": url,
+		"name": title,
+		"description": description,
+		"inLanguage": lang,
+		"isPartOf": { "@id": websiteId(siteUrl) },
+	} as const;
+
+	if (type === "ProfilePage") {
+		return {
+			...base,
+			"@type": "ProfilePage",
+			"mainEntity": { "@id": personId(siteUrl) },
+		};
+	}
+
+	return base;
+};

src/utils/schemas/personSchema.ts

@@ -0,0 +1,17 @@
+import type { Person } from "schema-dts";
+import { config } from "../../config";
+import { personId } from "./ids";
+
+export type PersonSchemaParams = {
+	readonly siteUrl: string;
+};
+
+export default ({ siteUrl }: PersonSchemaParams): Person => ({
+	"@type": "Person",
+	"@id": personId(siteUrl),
+	"name": config.author.name,
+	"url": config.author.url,
+	"email": config.author.email,
+	"image": new URL(config.og.defaultPreview, siteUrl).toString(),
+	"sameAs": config.author.sameAs,
+});

src/utils/schemas/websiteSchema.ts

@@ -0,0 +1,23 @@
+import type { WebSite } from "schema-dts";
+import { config } from "../../config";
+import { personId, websiteId } from "./ids";
+
+export type WebsiteSchemaParams = {
+	readonly description: string;
+	readonly lang: string;
+	readonly name: string;
+	readonly siteUrl: string;
+};
+
+export default ({ siteUrl, name, description, lang }: WebsiteSchemaParams): WebSite => ({
+	"@type": "WebSite",
+	"@id": websiteId(siteUrl),
+	"url": siteUrl,
+	"name": name,
+	"description": description,
+	"inLanguage": lang,
+	"publisher": { "@id": personId(siteUrl) },
+	"author": { "@id": personId(siteUrl) },
+	"copyrightHolder": { "@id": personId(siteUrl) },
+	"sameAs": config.author.sameAs,
+});