astro canvas initial commit

AndrewDTR · Oct 9, 2024 · b90124a · b90124a
1 parent 36406c9
commit b90124a
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
diff --git a/src/amoses.svg b/src/amoses.svg
diff --git 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;
 ---
 
 <html lang="en">
   <head>
+
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/amoses.svg" />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charter-webfont@4/charter.min.css" />
     <title>Andrew Moses</title>
+
+    {imgLink && <meta property="og:image" content={imgLink} />}
   </head>
   <body>
     <div class="page-wrapper">

diff --git 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`;
 ---
 
-<BaseLayout>
+<BaseLayout imgLink={imgLink}>
   <div slot="outside-content" class="top">
     <p class="blog-title">{frontmatter.title}</p>
     <p class="subtitle">{frontmatter.subtitle}</p>

diff --git 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)
+
 
 <a href="https://sub.example.com/page">External Link with Subdomain</a><br>
     <a href="https://www.google.com/" target="_blank">Google</a><br>

diff --git a/src/pages/og/[...route].ts 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",
+    ],
+  }),
+});