diff --git a/package-lock.json b/package-lock.json index 304fd16..9f5ebd6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@expressive-code/plugin-line-numbers": "^0.37.0", "astro": "^4.15.9", "astro-expressive-code": "^0.37.0", + "astro-og-canvas": "^0.5.3", "childprocess": "^2.0.2", "rehype-autolink-headings": "^7.1.0", "rehype-slug": "^6.0.0" @@ -1730,6 +1731,12 @@ "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", "license": "ISC" }, + "node_modules/@webgpu/types": { + "version": "0.1.21", + "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.21.tgz", + "integrity": "sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==", + "license": "BSD-3-Clause" + }, "node_modules/acorn": { "version": "8.12.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", @@ -1937,6 +1944,23 @@ "astro": "^4.0.0-beta || ^5.0.0-beta || ^3.3.0" } }, + "node_modules/astro-og-canvas": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/astro-og-canvas/-/astro-og-canvas-0.5.3.tgz", + "integrity": "sha512-xy4k3D/fq4vq71B8CKsqBRuAd2kRJjMaeOMH9EFVtPPqudrDGXG2k87SdxPr5FATvttWpIjYplqK/vYJAoZ2DA==", + "license": "MIT", + "dependencies": { + "canvaskit-wasm": "^0.39.1", + "deterministic-object-hash": "^2.0.2", + "entities": "^4.4.0" + }, + "engines": { + "node": ">=18.14.1" + }, + "peerDependencies": { + "astro": "^3.0.0 || ^4.0.0" + } + }, "node_modules/axobject-query": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", @@ -2111,6 +2135,15 @@ ], "license": "CC-BY-4.0" }, + "node_modules/canvaskit-wasm": { + "version": "0.39.1", + "resolved": "https://registry.npmjs.org/canvaskit-wasm/-/canvaskit-wasm-0.39.1.tgz", + "integrity": "sha512-Gy3lCmhUdKq+8bvDrs9t8+qf7RvcjuQn+we7vTVVyqgOVO1UVfHpsnBxkTZw+R4ApEJ3D5fKySl9TU11hmjl/A==", + "license": "BSD-3-Clause", + "dependencies": { + "@webgpu/types": "0.1.21" + } + }, "node_modules/ccount": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", diff --git a/package.json b/package.json index af62e64..0db792a 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@expressive-code/plugin-line-numbers": "^0.37.0", "astro": "^4.15.9", "astro-expressive-code": "^0.37.0", + "astro-og-canvas": "^0.5.3", "childprocess": "^2.0.2", "rehype-autolink-headings": "^7.1.0", "rehype-slug": "^6.0.0" diff --git a/src/amoses.png b/src/amoses.png new file mode 100644 index 0000000..744905d Binary files /dev/null and b/src/amoses.png differ diff --git a/src/amoses.svg b/src/amoses.svg new file mode 100644 index 0000000..c962ab0 --- /dev/null +++ b/src/amoses.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 87b0109..ca4a34e 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -2,16 +2,21 @@ import Footer from "../components/Footer.astro"; import Header from "../components/Header.astro"; import "../styles/global.css"; + +const { imgLink } = Astro.props; --- + Andrew Moses + + {imgLink && }
diff --git a/src/layouts/Blog.astro b/src/layouts/Blog.astro index 8d6482d..82a6d44 100644 --- a/src/layouts/Blog.astro +++ b/src/layouts/Blog.astro @@ -2,9 +2,10 @@ import BaseLayout from "./BaseLayout.astro"; const { frontmatter } = Astro.props; const hasTags = frontmatter.tags && frontmatter.tags.length > 0; +const imgLink = `${Astro.site.origin}/og/${Astro.props.post.slug}.png`; --- - +

{frontmatter.title}

{frontmatter.subtitle}

diff --git a/src/pages/about.md b/src/pages/about.md index eea1767..d1ce1e7 100644 --- a/src/pages/about.md +++ b/src/pages/about.md @@ -6,6 +6,8 @@ author: Andrew tags: ["one", "two", "three"] --- +![Example image](/og/index.png) + External Link with Subdomain
Google
diff --git a/src/pages/og/[...route].ts b/src/pages/og/[...route].ts new file mode 100644 index 0000000..a39f7b0 --- /dev/null +++ b/src/pages/og/[...route].ts @@ -0,0 +1,39 @@ +import { OGImageRoute } from "astro-og-canvas"; + +const pages = await import.meta.glob("/src/pages/**/*.md", { eager: true }); +console.log(pages); + +export const { getStaticPaths, GET } = OGImageRoute({ + param: "route", + pages, + getImageOptions: (_path, page) => ({ + title: page.frontmatter.title || "Default Title", + description: page.frontmatter.subtitle || "Default Subtitle", + dir: page.dir, + logo: { path: "./src/amoses.png", size: [50] }, + border: { color: [240, 231, 216], width: 20, side: "inline-start" }, + bgGradient: [[27, 25, 25]], + padding: 60, + font: { + title: { + size: 78, + families: ["Charter"], + weight: "Bold", + color: [240, 231, 216], + }, + description: { + size: 45, + lineHeight: 1.25, + families: ["Charter"], + weight: "Normal", + color: [240, 231, 216], + }, + }, + fonts: [ + "https://cdn.jsdelivr.net/npm/charter-webfont@4/fonts/charter_regular.woff2", + "https://cdn.jsdelivr.net/npm/charter-webfont@4/fonts/charter_bold.woff2", + "https://cdn.jsdelivr.net/npm/charter-webfont@4/fonts/charter_italic.woff2", + "https://cdn.jsdelivr.net/npm/charter-webfont@4/fonts/charter_bold_italic.woff2", + ], + }), +});