aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-Bold.ttfbin0 -> 277828 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-BoldItalic.ttfbin0 -> 279832 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-ExtraBold.ttfbin0 -> 279404 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttfbin0 -> 281616 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-ExtraLight.ttfbin0 -> 274144 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttfbin0 -> 274240 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-Italic.ttfbin0 -> 276840 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-Light.ttfbin0 -> 276452 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-LightItalic.ttfbin0 -> 277104 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-Medium.ttfbin0 -> 273860 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-MediumItalic.ttfbin0 -> 276804 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-Regular.ttfbin0 -> 273900 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-SemiBold.ttfbin0 -> 277092 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttfbin0 -> 279828 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-Thin.ttfbin0 -> 270112 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMono-ThinItalic.ttfbin0 -> 272984 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-Bold.ttfbin0 -> 210988 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-BoldItalic.ttfbin0 -> 214132 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBold.ttfbin0 -> 213372 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBoldItalic.ttfbin0 -> 215456 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLight.ttfbin0 -> 209072 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLightItalic.ttfbin0 -> 209884 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-Italic.ttfbin0 -> 211624 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-Light.ttfbin0 -> 210840 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-LightItalic.ttfbin0 -> 212320 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-Medium.ttfbin0 -> 208276 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-MediumItalic.ttfbin0 -> 211604 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-Regular.ttfbin0 -> 208576 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBold.ttfbin0 -> 209864 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBoldItalic.ttfbin0 -> 214032 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-Thin.ttfbin0 -> 206004 bytes
-rw-r--r--src/assets/JetBrainsMono/JetBrainsMonoNL-ThinItalic.ttfbin0 -> 209124 bytes
-rw-r--r--src/components/Head.astro26
-rw-r--r--src/components/OpenGraph.astro26
-rw-r--r--src/config.ts23
-rw-r--r--src/integrations/ogImages.ts47
-rw-r--r--src/layouts/BaseLayout.astro7
-rw-r--r--src/pages/404.astro4
-rw-r--r--src/pages/blog/[...slug].astro14
-rw-r--r--src/pages/blog/index.astro6
-rw-r--r--src/pages/index.astro8
-rw-r--r--src/utils/createOgImage.ts52
-rw-r--r--src/utils/ogResources.ts15
-rw-r--r--src/utils/schemas/blogPostSchema.ts5
44 files changed, 182 insertions, 51 deletions
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-Bold.ttf b/src/assets/JetBrainsMono/JetBrainsMono-Bold.ttf
new file mode 100644
index 0000000..8c93043
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-Bold.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-BoldItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-BoldItalic.ttf
new file mode 100644
index 0000000..1ddf216
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-BoldItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-ExtraBold.ttf b/src/assets/JetBrainsMono/JetBrainsMono-ExtraBold.ttf
new file mode 100644
index 0000000..435d7a7
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-ExtraBold.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf
new file mode 100644
index 0000000..79e616e
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-ExtraLight.ttf b/src/assets/JetBrainsMono/JetBrainsMono-ExtraLight.ttf
new file mode 100644
index 0000000..c131cbf
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-ExtraLight.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf
new file mode 100644
index 0000000..a768985
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-Italic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-Italic.ttf
new file mode 100644
index 0000000..ccc9d6a
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-Italic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-Light.ttf b/src/assets/JetBrainsMono/JetBrainsMono-Light.ttf
new file mode 100644
index 0000000..15f15a2
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-Light.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-LightItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-LightItalic.ttf
new file mode 100644
index 0000000..506208f
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-LightItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-Medium.ttf b/src/assets/JetBrainsMono/JetBrainsMono-Medium.ttf
new file mode 100644
index 0000000..9767115
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-Medium.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-MediumItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-MediumItalic.ttf
new file mode 100644
index 0000000..415a9e3
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-MediumItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-Regular.ttf b/src/assets/JetBrainsMono/JetBrainsMono-Regular.ttf
new file mode 100644
index 0000000..dff66cc
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-Regular.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-SemiBold.ttf b/src/assets/JetBrainsMono/JetBrainsMono-SemiBold.ttf
new file mode 100644
index 0000000..a70e69b
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-SemiBold.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf
new file mode 100644
index 0000000..968602e
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-Thin.ttf b/src/assets/JetBrainsMono/JetBrainsMono-Thin.ttf
new file mode 100644
index 0000000..7dbe2ac
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-Thin.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMono-ThinItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMono-ThinItalic.ttf
new file mode 100644
index 0000000..c6ad6c2
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMono-ThinItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-Bold.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-Bold.ttf
new file mode 100644
index 0000000..f78f84f
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-Bold.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-BoldItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-BoldItalic.ttf
new file mode 100644
index 0000000..9fb8c83
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-BoldItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBold.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBold.ttf
new file mode 100644
index 0000000..fe5be6a
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBold.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBoldItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBoldItalic.ttf
new file mode 100644
index 0000000..59fc980
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraBoldItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLight.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLight.ttf
new file mode 100644
index 0000000..6da7b75
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLight.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLightItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLightItalic.ttf
new file mode 100644
index 0000000..5733efc
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-ExtraLightItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-Italic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-Italic.ttf
new file mode 100644
index 0000000..4e9c380
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-Italic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-Light.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-Light.ttf
new file mode 100644
index 0000000..0b79b0c
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-Light.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-LightItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-LightItalic.ttf
new file mode 100644
index 0000000..b5e0842
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-LightItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-Medium.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-Medium.ttf
new file mode 100644
index 0000000..1454372
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-Medium.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-MediumItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-MediumItalic.ttf
new file mode 100644
index 0000000..8d63c6c
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-MediumItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-Regular.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-Regular.ttf
new file mode 100644
index 0000000..70d2ec9
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-Regular.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBold.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBold.ttf
new file mode 100644
index 0000000..ce60a88
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBold.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBoldItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBoldItalic.ttf
new file mode 100644
index 0000000..3b3f8f6
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-SemiBoldItalic.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-Thin.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-Thin.ttf
new file mode 100644
index 0000000..bea837e
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-Thin.ttf
Binary files differ
diff --git a/src/assets/JetBrainsMono/JetBrainsMonoNL-ThinItalic.ttf b/src/assets/JetBrainsMono/JetBrainsMonoNL-ThinItalic.ttf
new file mode 100644
index 0000000..f0bfed7
--- /dev/null
+++ b/src/assets/JetBrainsMono/JetBrainsMonoNL-ThinItalic.ttf
Binary files 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<Thing>;
+ 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);
---
<head>
@@ -24,7 +26,7 @@ const { description, title, schema } = Astro.props;
<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={canonicalUrl} rel="canonical" />
<title>{title}</title>
@@ -35,6 +37,18 @@ const { description, title, schema } = Astro.props;
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#ffffff" />
- <OpenGraph title={title} description={description} />
+ <!-- Open Graph -->
+ <meta property="og:type" content="website" />
+ <meta property="og:title" content={title} />
+ <meta property="og:description" content={description} />
+ <meta property="og:image" content={previewUrl} />
+ <meta property="og:url" content={canonicalUrl} />
+
+ <!-- Twitter Cards -->
+ <meta name="twitter:card" content="summary_large_image" />
+ <meta name="twitter:title" content={title} />
+ <meta name="twitter:description" content={description} />
+ <meta name="twitter:image" content={previewUrl} />
+
<JsonLd schema={schema} />
</head>
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();
----
-
-<!-- Open Graph -->
-<meta property="og:type" content="website" />
-<meta property="og:title" content={title} />
-<meta property="og:description" content={description} />
-<meta property="og:image" content={image} />
-<meta property="og:url" content={canonicalURL} />
-
-<!-- Twitter Cards -->
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:title" content={title} />
-<meta name="twitter:description" content={description} />
-<meta name="twitter:image" content={image} />
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<Thing>;
+ readonly title: string;
};
-const { title, description, lang, schema } = Astro.props;
+const { description, lang, preview, schema, title } = Astro.props;
---
<html lang={lang}>
- <Head title={title} description={description} schema={schema} />
+ <Head title={title} description={description} preview={preview} schema={schema} />
<body>
<main>
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({
});
---
-<Layout title={title} description={description} lang={lang} schema={schema}>
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
<div style={{ "text-align": "center" }}>
<h1>404</h1>
<p><strong>Page not found</strong></p>
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({
}
</style>
-<Layout title={title} description={description} lang={lang} schema={schema}>
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
<article>
<header>
<h1>{title}</h1>
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({
});
---
-<Layout title={title} description={description} lang={lang} schema={schema}>
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
<section>
<h1>
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({
});
---
-<Layout title={title} description={description} lang={lang} schema={schema}>
+<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>
<WelcomeSection />
<SocialLinksSection />
<LatestPostsSection />
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<Buffer> {
+ const formattedDate = dayjs(datePublished).format("MMMM DD, YYYY");
+
+ const markup = await satori(
+ html(`
+<div tw="flex flex-col w-full h-full" style="background-color: ${config.og.color.bg}">
+ <div tw="flex flex-col w-full h-4/5 p-10 justify-center">
+ <div tw="text-2xl mb-6" style="color: ${config.og.color.text}">${formattedDate}</div>
+ <div tw="flex text-6xl w-full font-bold" style="color: ${config.og.color.text}">${title}</div>
+ </div>
+ <div tw="w-full h-1/5 flex p-10 items-center justify-between text-2xl" style="border-top: 1px solid ${config.og.color.bgCode}">
+ <div tw="flex items-center">
+ <span tw="ml-3" style="color: ${config.og.color.text}">${config.og.website.toLocaleUpperCase()}</span>
+ </div>
+ <div tw="flex items-center">
+ <img src="${resources.photoBase64}" tw="w-15 h-15 rounded-full" />
+ <div tw="flex flex-col ml-4">
+ <span style="color: ${config.og.color.text}">${config.author.name}</span>
+ <span style="color: ${config.og.color.blossom}">${config.author.email}</span>
+ </div>
+ </div>
+ </div>
+</div>
+`),
+ {
+ 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<BlogPosting> => ({
+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(config.posts.defaultImage, siteUrl).toString(),
+ "image": new URL(preview, siteUrl).toString(),
"datePublished": datePublished,
"dateModified": dateModified,
"inLanguage": lang,