From a81117972d39df35574bbab809bb590abc874761 Mon Sep 17 00:00:00 2001 From: Valentin Popov Date: Sat, 14 Jun 2025 19:25:16 +0000 Subject: feat: implement Open Graph image generation and enhance configuration - Added ogImages integration to generate Open Graph images for blog posts. - Updated configuration to include Open Graph settings and default preview image. - Refactored Head component to utilize new preview property for Open Graph meta tags. - Enhanced blog post schema to include preview image for structured data representation. - Introduced utility functions for creating Open Graph images with dynamic content. --- src/assets/JetBrainsMono/JetBrainsMono-Bold.ttf | Bin 0 -> 277828 bytes .../JetBrainsMono/JetBrainsMono-BoldItalic.ttf | Bin 0 -> 279832 bytes .../JetBrainsMono/JetBrainsMono-ExtraBold.ttf | Bin 0 -> 279404 bytes .../JetBrainsMono-ExtraBoldItalic.ttf | Bin 0 -> 281616 bytes .../JetBrainsMono/JetBrainsMono-ExtraLight.ttf | Bin 0 -> 274144 bytes .../JetBrainsMono-ExtraLightItalic.ttf | Bin 0 -> 274240 bytes src/assets/JetBrainsMono/JetBrainsMono-Italic.ttf | Bin 0 -> 276840 bytes src/assets/JetBrainsMono/JetBrainsMono-Light.ttf | Bin 0 -> 276452 bytes .../JetBrainsMono/JetBrainsMono-LightItalic.ttf | Bin 0 -> 277104 bytes src/assets/JetBrainsMono/JetBrainsMono-Medium.ttf | Bin 0 -> 273860 bytes .../JetBrainsMono/JetBrainsMono-MediumItalic.ttf | Bin 0 -> 276804 bytes src/assets/JetBrainsMono/JetBrainsMono-Regular.ttf | Bin 0 -> 273900 bytes .../JetBrainsMono/JetBrainsMono-SemiBold.ttf | Bin 0 -> 277092 bytes .../JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf | Bin 0 -> 279828 bytes src/assets/JetBrainsMono/JetBrainsMono-Thin.ttf | Bin 0 -> 270112 bytes .../JetBrainsMono/JetBrainsMono-ThinItalic.ttf | Bin 0 -> 272984 bytes src/assets/JetBrainsMono/JetBrainsMonoNL-Bold.ttf | Bin 0 -> 210988 bytes .../JetBrainsMono/JetBrainsMonoNL-BoldItalic.ttf | Bin 0 -> 214132 bytes .../JetBrainsMono/JetBrainsMonoNL-ExtraBold.ttf | Bin 0 -> 213372 bytes .../JetBrainsMonoNL-ExtraBoldItalic.ttf | Bin 0 -> 215456 bytes .../JetBrainsMono/JetBrainsMonoNL-ExtraLight.ttf | Bin 0 -> 209072 bytes .../JetBrainsMonoNL-ExtraLightItalic.ttf | Bin 0 -> 209884 bytes .../JetBrainsMono/JetBrainsMonoNL-Italic.ttf | Bin 0 -> 211624 bytes src/assets/JetBrainsMono/JetBrainsMonoNL-Light.ttf | Bin 0 -> 210840 bytes .../JetBrainsMono/JetBrainsMonoNL-LightItalic.ttf | Bin 0 -> 212320 bytes .../JetBrainsMono/JetBrainsMonoNL-Medium.ttf | Bin 0 -> 208276 bytes .../JetBrainsMono/JetBrainsMonoNL-MediumItalic.ttf | Bin 0 -> 211604 bytes .../JetBrainsMono/JetBrainsMonoNL-Regular.ttf | Bin 0 -> 208576 bytes .../JetBrainsMono/JetBrainsMonoNL-SemiBold.ttf | Bin 0 -> 209864 bytes .../JetBrainsMonoNL-SemiBoldItalic.ttf | Bin 0 -> 214032 bytes src/assets/JetBrainsMono/JetBrainsMonoNL-Thin.ttf | Bin 0 -> 206004 bytes .../JetBrainsMono/JetBrainsMonoNL-ThinItalic.ttf | Bin 0 -> 209124 bytes src/components/Head.astro | 26 ++++++++--- src/components/OpenGraph.astro | 26 ----------- src/config.ts | 23 ++++++++- src/integrations/ogImages.ts | 47 +++++++++++++++++++ src/layouts/BaseLayout.astro | 7 +-- src/pages/404.astro | 4 +- src/pages/blog/[...slug].astro | 14 +++--- src/pages/blog/index.astro | 6 ++- src/pages/index.astro | 8 ++-- src/utils/createOgImage.ts | 52 +++++++++++++++++++++ src/utils/ogResources.ts | 15 ++++++ src/utils/schemas/blogPostSchema.ts | 5 +- 44 files changed, 182 insertions(+), 51 deletions(-) create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-Bold.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-BoldItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-ExtraBold.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-ExtraLight.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-Italic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-Light.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-LightItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-Medium.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-MediumItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-Regular.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-SemiBold.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-Thin.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMono-ThinItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-Bold.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-BoldItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBold.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBoldItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLight.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLightItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-Italic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-Light.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-LightItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-Medium.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-MediumItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-Regular.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBold.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBoldItalic.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-Thin.ttf create mode 100644 src/assets/JetBrainsMono/JetBrainsMonoNL-ThinItalic.ttf delete mode 100644 src/components/OpenGraph.astro create mode 100644 src/integrations/ogImages.ts create mode 100644 src/utils/createOgImage.ts create mode 100644 src/utils/ogResources.ts (limited to 'src') diff --git a/src/assets/JetBrainsMono/JetBrainsMono-Bold.ttf b/src/assets/JetBrainsMono/JetBrainsMono-Bold.ttf new file mode 100644 index 0000000..8c93043 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-Bold.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-BoldItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-BoldItalic.ttf new file mode 100644 index 0000000..1ddf216 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-BoldItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-ExtraBold.ttf b/src/assets/JetBrainsMono/JetBrainsMono-ExtraBold.ttf new file mode 100644 index 0000000..435d7a7 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-ExtraBold.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf new file mode 100644 index 0000000..79e616e Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-ExtraLight.ttf b/src/assets/JetBrainsMono/JetBrainsMono-ExtraLight.ttf new file mode 100644 index 0000000..c131cbf Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-ExtraLight.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf new file mode 100644 index 0000000..a768985 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-Italic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-Italic.ttf new file mode 100644 index 0000000..ccc9d6a Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-Italic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-Light.ttf b/src/assets/JetBrainsMono/JetBrainsMono-Light.ttf new file mode 100644 index 0000000..15f15a2 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-Light.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-LightItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-LightItalic.ttf new file mode 100644 index 0000000..506208f Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-LightItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-Medium.ttf b/src/assets/JetBrainsMono/JetBrainsMono-Medium.ttf new file mode 100644 index 0000000..9767115 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-Medium.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-MediumItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-MediumItalic.ttf new file mode 100644 index 0000000..415a9e3 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-MediumItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-Regular.ttf b/src/assets/JetBrainsMono/JetBrainsMono-Regular.ttf new file mode 100644 index 0000000..dff66cc Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-Regular.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-SemiBold.ttf b/src/assets/JetBrainsMono/JetBrainsMono-SemiBold.ttf new file mode 100644 index 0000000..a70e69b Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-SemiBold.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf new file mode 100644 index 0000000..968602e Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-Thin.ttf b/src/assets/JetBrainsMono/JetBrainsMono-Thin.ttf new file mode 100644 index 0000000..7dbe2ac Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-Thin.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMono-ThinItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-ThinItalic.ttf new file mode 100644 index 0000000..c6ad6c2 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMono-ThinItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-Bold.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-Bold.ttf new file mode 100644 index 0000000..f78f84f Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-Bold.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-BoldItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-BoldItalic.ttf new file mode 100644 index 0000000..9fb8c83 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-BoldItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBold.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBold.ttf new file mode 100644 index 0000000..fe5be6a Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBold.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBoldItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBoldItalic.ttf new file mode 100644 index 0000000..59fc980 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBoldItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLight.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLight.ttf new file mode 100644 index 0000000..6da7b75 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLight.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLightItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLightItalic.ttf new file mode 100644 index 0000000..5733efc Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLightItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-Italic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-Italic.ttf new file mode 100644 index 0000000..4e9c380 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-Italic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-Light.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-Light.ttf new file mode 100644 index 0000000..0b79b0c Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-Light.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-LightItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-LightItalic.ttf new file mode 100644 index 0000000..b5e0842 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-LightItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-Medium.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-Medium.ttf new file mode 100644 index 0000000..1454372 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-Medium.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-MediumItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-MediumItalic.ttf new file mode 100644 index 0000000..8d63c6c Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-MediumItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-Regular.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-Regular.ttf new file mode 100644 index 0000000..70d2ec9 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-Regular.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBold.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBold.ttf new file mode 100644 index 0000000..ce60a88 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBold.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBoldItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBoldItalic.ttf new file mode 100644 index 0000000..3b3f8f6 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBoldItalic.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-Thin.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-Thin.ttf new file mode 100644 index 0000000..bea837e Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-Thin.ttf differ diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-ThinItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-ThinItalic.ttf new file mode 100644 index 0000000..f0bfed7 Binary files /dev/null and b/src/assets/JetBrainsMono/JetBrainsMonoNL-ThinItalic.ttf differ diff --git a/src/components/Head.astro b/src/components/Head.astro index 0026886..3fded95 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -1,16 +1,18 @@ --- import type { WithContext, Thing } from "schema-dts"; import JsonLd from "./JsonLd.astro"; -import OpenGraph from "./OpenGraph.astro"; type Props = { readonly description: string; - readonly title: string; + readonly preview: string; readonly schema: WithContext; + readonly title: string; }; -const canonicalURL = new URL(Astro.url.pathname, Astro.site); -const { description, title, schema } = Astro.props; +const { description, preview, schema, title } = Astro.props; + +const canonicalUrl = new URL(Astro.url.pathname, Astro.site); +const previewUrl = new URL(preview, Astro.site); --- @@ -24,7 +26,7 @@ const { description, title, schema } = Astro.props; - + {title} @@ -35,6 +37,18 @@ const { description, title, schema } = Astro.props; - + + + + + + + + + + + + + diff --git a/src/components/OpenGraph.astro b/src/components/OpenGraph.astro deleted file mode 100644 index 6ca1856..0000000 --- a/src/components/OpenGraph.astro +++ /dev/null @@ -1,26 +0,0 @@ ---- -import { config } from "../config"; - -type Props = { - readonly description: string; - readonly title: string; -}; - -const canonicalURL = new URL(Astro.url.pathname, Astro.site); -const { description, title } = Astro.props; - -const image = new URL(config.posts.defaultImage, Astro.site).toString(); ---- - - - - - - - - - - - - - diff --git a/src/config.ts b/src/config.ts index a1b0c15..d0c98ea 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,10 +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"], }, - posts: { - defaultImage: "/images/photo.png", + + // 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", }, }; diff --git a/src/integrations/ogImages.ts b/src/integrations/ogImages.ts new file mode 100644 index 0000000..5d9146c --- /dev/null +++ b/src/integrations/ogImages.ts @@ -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`); + } + }, + }, + }; +} diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 216287e..ed3baeb 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -7,16 +7,17 @@ import "../scss/global.scss"; type Props = { readonly description: string; - readonly title: string; readonly lang: string; + readonly preview: string; readonly schema: WithContext; + readonly title: string; }; -const { title, description, lang, schema } = Astro.props; +const { description, lang, preview, schema, title } = Astro.props; --- - +
diff --git a/src/pages/404.astro b/src/pages/404.astro index cb3fca1..3ec9feb 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -1,9 +1,11 @@ --- +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 schema = pageSchema({ @@ -15,7 +17,7 @@ const schema = pageSchema({ }); --- - +

404

Page not found

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index e347eda..d12ff05 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -25,6 +25,7 @@ const { Content, remarkPluginFrontmatter } = await post.render(); 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; @@ -34,13 +35,14 @@ const formattedDate = dayjs(post.data.datePublished.toString()).format("MMMM DD, const schema = blogPostSchema({ siteUrl: new URL("/", Astro.site).toString(), - title, - description, - slug, - datePublished, dateModified, - lang, + datePublished, + description, isBasedOn, + lang, + preview, + slug, + title, }); --- @@ -52,7 +54,7 @@ const schema = blogPostSchema({ } - +

{title}

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index de5a0a9..3a27111 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -1,9 +1,10 @@ --- import type { CollectionEntry } from "astro:content"; +import { config } from "../../config"; import { getCollection } from "astro:content"; +import blogSchema from "../../utils/schemas/blogSchema"; import Layout from "../../layouts/BaseLayout.astro"; import PostElement from "../../components/PostElement.astro"; -import blogSchema from "../../utils/schemas/blogSchema"; import RSSIcon from "../../components/Icons/RSS.astro"; const posts = await getCollection("blog", ({ data }) => { @@ -25,6 +26,7 @@ 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 schema = blogSchema({ @@ -34,7 +36,7 @@ const schema = blogSchema({ }); --- - +

Blog posts diff --git a/src/pages/index.astro b/src/pages/index.astro index b72c55a..b235b9b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,12 +1,14 @@ --- -import Layout from "../layouts/BaseLayout.astro"; +import { config } from "../config"; import LatestPostsSection from "../components/Sections/LatestPosts.astro"; +import Layout from "../layouts/BaseLayout.astro"; +import pageSchema from "../utils/schemas/pageSchema"; import SocialLinksSection from "../components/Sections/SocialLinks.astro"; import WelcomeSection from "../components/Sections/Welcome.astro"; -import pageSchema from "../utils/schemas/pageSchema"; 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({ @@ -18,7 +20,7 @@ const schema = pageSchema({ }); --- - + diff --git a/src/utils/createOgImage.ts b/src/utils/createOgImage.ts new file mode 100644 index 0000000..da2cece --- /dev/null +++ b/src/utils/createOgImage.ts @@ -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 { + const formattedDate = dayjs(datePublished).format("MMMM DD, YYYY"); + + const markup = await satori( + html(` +
+
+
${formattedDate}
+
${title}
+
+
+
+ ${config.og.website.toLocaleUpperCase()} +
+
+ +
+ ${config.author.name} + ${config.author.email} +
+
+
+
+`), + { + 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(); +} diff --git a/src/utils/ogResources.ts b/src/utils/ogResources.ts new file mode 100644 index 0000000..8049fb2 --- /dev/null +++ b/src/utils/ogResources.ts @@ -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"); + })(), +}; diff --git a/src/utils/schemas/blogPostSchema.ts b/src/utils/schemas/blogPostSchema.ts index 9e43478..87e1bf2 100644 --- a/src/utils/schemas/blogPostSchema.ts +++ b/src/utils/schemas/blogPostSchema.ts @@ -7,18 +7,19 @@ export type BlogPostSchemaParams = { 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, datePublished, dateModified, lang, isBasedOn }: BlogPostSchemaParams): WithContext => ({ +export default ({ siteUrl, slug, title, description, preview, datePublished, dateModified, lang, isBasedOn }: BlogPostSchemaParams): WithContext => ({ "@context": "https://schema.org", "@type": "BlogPosting", "url": new URL(`/blog/${slug}`, siteUrl).toString(), "headline": title, "description": description, - "image": new URL(config.posts.defaultImage, siteUrl).toString(), + "image": new URL(preview, siteUrl).toString(), "datePublished": datePublished, "dateModified": dateModified, "inLanguage": lang, -- cgit v1.2.3