Add Main og Image

Author: WebDevSimplified

src/pages/[date]/[title]/og.webp.js

@@ -1,171 +1,14 @@
-import satori from "satori"
-import fs from "fs/promises"
-import path from "path"
-import sharp from "sharp"
-
-const [bgImg, logo, regularFont, boldFont] = await Promise.all([
-  fs.readFile(path.resolve("./src/assets/og/graph-paper.svg"), "base64"),
-  fs.readFile(path.resolve("./src/assets/og/logo.png"), "base64"),
-  fs.readFile(path.resolve("./src/assets/og/Barlow-Regular.ttf")),
-  fs.readFile(path.resolve("./src/assets/og/Barlow-Bold.ttf")),
-])
-
-const satoriOptions = {
-  width: 1200,
-  height: 630,
-  fonts: [
-    {
-      name: "Barlow",
-      data: regularFont,
-      weight: 400,
-      style: "normal",
-    },
-    {
-      name: "Barlow",
-      data: boldFont,
-      weight: 600,
-      style: "normal",
-    },
-  ],
-}
-
-export async function get({ props: { post } }) {
-  const { title, tags, date } = post
-
-  const svg = await satori(
-    {
-      type: "div",
-      props: {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-          width: "100%",
-          height: "100%",
-          padding: "3rem",
-          background: "#111",
-          boxSizing: "border-box",
-          position: "relative",
-          gap: "1rem",
-          color: "#F0F0F0",
-          fontFamily: "Barlow",
-        },
-        children: [
-          {
-            type: "div",
-            props: {
-              style: {
-                backgroundImage: `url("data:image/svg+xml;base64,${bgImg}")`,
-                position: "absolute",
-                inset: 0,
-                width: "100%",
-                height: "100%",
-                maskImage:
-                  "radial-gradient(60% 60%, hsl(0, 0%, 0%, .80), transparent)",
-              },
-            },
-          },
-          {
-            type: "div",
-            props: {
-              style: {
-                display: "flex",
-                gap: "1rem",
-              },
-              children: tags.map(tag => ({
-                type: "div",
-                props: {
-                  style: {
-                    border: "1px solid #CCC",
-                    color: "#CCC",
-                    padding: "0.5rem 1rem",
-                    borderRadius: "999px",
-                    fontSize: "1.25rem",
-                    background: "#111",
-                  },
-                  children: tag,
-                },
-              })),
-            },
-          },
-          {
-            type: "h1",
-            props: {
-              style: {
-                textAlign: "center",
-                fontSize: "5.5rem",
-                fontWeight: "bold",
-                margin: 0,
-                lineHeight: "1",
-                textWrap: "balance",
-              },
-              children: title,
-            },
-          },
-          {
-            type: "div",
-            props: {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "1rem",
-              },
-              children: [
-                {
-                  type: "img",
-                  props: {
-                    src: `data:image/png;base64,${logo}`,
-                    style: {
-                      width: "5rem",
-                    },
-                  },
-                },
-                {
-                  type: "div",
-                  props: {
-                    style: {
-                      display: "flex",
-                      flexDirection: "column",
-                    },
-                    children: [
-                      {
-                        type: "div",
-                        props: {
-                          style: {
-                            fontSize: "2rem",
-                            color: "#CCC",
-                          },
-                          children: "Web Dev Simplified",
-                        },
-                      },
-                      {
-                        type: "div",
-                        props: {
-                          style: {
-                            fontSize: "1.5rem",
-                            color: "#AAA",
-                          },
-                          children: Intl.DateTimeFormat("en-US", {
-                            dateStyle: "medium",
-                          }).format(new Date(date)),
-                        },
-                      },
-                    ],
-                  },
-                },
-              ],
-            },
-          },
-        ],
-      },
-    },
-    satoriOptions,
-  )
-
-  const webp = await sharp(Buffer.from(svg)).webp({ quality: 100 }).toBuffer()
-
-  return new Response(webp, { headers: { "Content-Type": "image/webp" } })
+import { generateOpenGraphImage } from "src/utils/generateOpenGraphImage"
+
+export function get({ props: { post } }) {
+  return generateOpenGraphImage({
+    title: post.title,
+    tags: post.tags ?? [],
+    secondaryText: post.author || "Web Dev Simplified",
+    tertiaryText: Intl.DateTimeFormat("en-US", {
+      dateStyle: "medium",
+    }).format(new Date(post.updatedDate ?? post.date)),
+  })
 }
 
 export async function getStaticPaths() {

src/pages/index.astro

@@ -5,6 +5,7 @@ import "../styles/blog.css"
 import BaseHead from "../components/BaseHead.astro"
 import BlogList from "/src/components/BlogList.jsx"
 import BaseTopOfBody from "src/components/BaseTopOfBody.astro"
+import path from "path"
 
 interface MarkdownFrontmatter {
   date: number
@@ -19,8 +20,7 @@ interface MarkdownFrontmatter {
 // It will run during the build, but never in the browser.
 // All variables are available to use in the HTML template below.
 let title = "Web Dev Simplified Blog"
-// TODO: Update description
-let description = "Web Dev Simplified Blog"
+let description = "In depth articles with interactive examples about every web dev topic."
 let permalink = "https://blog.webdevsimplified.com"
 
 // Data Fetching: List all Markdown posts in the repo.
@@ -43,13 +43,15 @@ const allPosts = allMarkdownPosts
     return bDate - aDate
   })
 
+  const url = Astro.request.url
+
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
 
 <html lang="en">
   <head>
-    <BaseHead {title} {description} {permalink} />
+    <BaseHead {title} {description} {permalink} image={path.join(url, "og.webp")} />
 
     <style>
       .content {

src/pages/og.webp.js

@@ -0,0 +1,14 @@
+import { generateOpenGraphImage } from "src/utils/generateOpenGraphImage"
+
+export function get() {
+  const count = Object.values(
+    import.meta.glob("./**/*.mdx", { eager: true }),
+  ).length
+
+  return generateOpenGraphImage({
+    title: "Web Dev Simplified Blog",
+    tags: ["TypeScript", "React", "CSS", "Next.js", "Technical Explainers"],
+    secondaryText: "No Stack to Full Stack",
+    tertiaryText: `${count} Articles`,
+  })
+}

src/pages/rss.xml.js

@@ -10,8 +10,8 @@ export function get(context) {
 
   return rss({
     title: "Web Dev Simplified Blog",
-    // TODO: Update description
-    description: "Web Dev Simplified Blog",
+    description:
+      "In depth articles with interactive examples about every web dev topic.",
     customData: `<language>en-us</language>`,
     site: context.site,
     items: allPosts.map(item => ({