diff --git a/package.json b/package.json
index cb47470..5898f6d 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,8 @@
"@astrojs/tailwind": "^5.1.0",
"@tailwindcss/typography": "^0.5.12",
"astro": "^4.5.16",
+ "astro-og-canvas": "^0.4.2",
+ "canvaskit-wasm": "^0.39.1",
"clsx": "^2.1.0",
"fuse.js": "^7.0.0",
"sharp": "^0.33.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2d2a416..f477d91 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,12 @@ dependencies:
astro:
specifier: ^4.5.16
version: 4.5.16(typescript@5.4.4)
+ astro-og-canvas:
+ specifier: ^0.4.2
+ version: 0.4.2(astro@4.5.16)
+ canvaskit-wasm:
+ specifier: ^0.39.1
+ version: 0.39.1
clsx:
specifier: ^2.1.0
version: 2.1.0
@@ -1524,6 +1530,10 @@ packages:
resolution: {integrity: sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ==}
dev: false
+ /@webgpu/types@0.1.21:
+ resolution: {integrity: sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==}
+ dev: false
+
/acorn-jsx@5.3.2(acorn@8.11.3):
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
peerDependencies:
@@ -1614,6 +1624,18 @@ packages:
hasBin: true
dev: false
+ /astro-og-canvas@0.4.2(astro@4.5.16):
+ resolution: {integrity: sha512-OQsH6Gr2HX9ZRHdVy2OcXVBIPI65WvEtLG/60krnphh8d3ldhuAFunymYaNGcrdSZcYgXkHWejbPt//3qaRidA==}
+ engines: {node: '>=18.14.1'}
+ peerDependencies:
+ astro: ^3.0.0 || ^4.0.0
+ dependencies:
+ astro: 4.5.16(typescript@5.4.4)
+ canvaskit-wasm: 0.37.2
+ deterministic-object-hash: 2.0.2
+ entities: 4.5.0
+ dev: false
+
/astro@4.5.16(typescript@5.4.4):
resolution: {integrity: sha512-1nOVsMq2OJiXnG6gO0Y77vTAboGN9nLQSy/8SGazq4h6x+alzbsMbQbArBgvaLzOSUXD0m91XLs3D8bOSuavrQ==}
engines: {node: '>=18.14.1', npm: '>=6.14.0'}
@@ -1882,6 +1904,16 @@ packages:
resolution: {integrity: sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==}
dev: false
+ /canvaskit-wasm@0.37.2:
+ resolution: {integrity: sha512-212imazRF98gLOTiU4JAXM7xDvaknI7jaPtAg4ETXGW5rLQs6pomgIvVPUSfoKnQVTdGgzj+B4e+/u0Da20aGg==}
+ dev: false
+
+ /canvaskit-wasm@0.39.1:
+ resolution: {integrity: sha512-Gy3lCmhUdKq+8bvDrs9t8+qf7RvcjuQn+we7vTVVyqgOVO1UVfHpsnBxkTZw+R4ApEJ3D5fKySl9TU11hmjl/A==}
+ dependencies:
+ '@webgpu/types': 0.1.21
+ dev: false
+
/ccount@2.0.1:
resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
dev: false
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index e2a6456..1f647c1 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -1,7 +1,7 @@
---
import { ViewTransitions } from "astro:transitions";
-interface Props {
+export interface Props {
title: string;
description: string;
image?: string;
diff --git a/src/images/open-graph-background.png b/src/images/open-graph-background.png
new file mode 100644
index 0000000..10fd453
Binary files /dev/null and b/src/images/open-graph-background.png differ
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index d0a8dde..5b96493 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -4,8 +4,15 @@ import BaseHead from "@components/BaseHead.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import Drawer from "@components/Drawer.astro";
-const { title, description } = Astro.props;
import { SITE } from "@consts";
+
+export interface Props {
+ title: string;
+ description: string;
+ image?: string;
+}
+
+const { title, description, image } = Astro.props;
---
@@ -14,6 +21,7 @@ import { SITE } from "@consts";