og api & component

package.json

@@ -12,7 +12,7 @@
     "preview": "astro preview",
     "sync": "astro sync",
     "astro": "npx astro",
-    "format": "prettier --write './src/**/*.{js,ts,json,astro}'",
+    "format": "prettier --write './src/**/*.{js,ts,mjs,json,astro}'",
     "prepare": "husky"
   },
   "dependencies": {
@@ -51,7 +51,10 @@
     "rehype-pretty-code": "0.13.0",
     "rehype-slug": "6.0.0",
     "remark-gfm": "4.0.0",
-    "remark-math": "6.0.0"
+    "remark-math": "6.0.0",
+    "satori": "^0.10.13",
+    "satori-html": "^0.3.2",
+    "sharp": "^0.33.2"
   },
   "packageManager": "yarn@1.22.15",
   "engines": {

src/components/Svg/index.astro

@@ -9,7 +9,8 @@ type Props = {
 const svgGetter = (iconName: string) => {
   const filepath = `./icons/${iconName}.svg`
   const files = import.meta.glob<string>('./icons/**/*.svg', {
-    as: 'raw',
+    query: '?raw',
+    import: 'default',
     eager: true,
   })
 

src/pages/og/[type]/[slug].png.ts

@@ -0,0 +1,31 @@
+import type { APIRoute, APIContext } from 'astro'
+import { getCollection } from 'astro:content'
+// import { readFileSync } from 'fs'
+// import satori from 'satori'
+// import { html } from 'satori-html'
+
+const entries = await getCollection('blog')
+const pages = await getCollection('page')
+const articles = [...entries, ...pages]
+
+export const GET: APIRoute = async ({ params }: APIContext) => {
+  const res = new Response('OG Image Not found', { status: 404 })
+  const { type, slug } = params
+  if (type === 'article') {
+    const article = articles.find((a) => `${a.collection}/${a.slug}` === slug)
+    if (article) {
+      // const isArticle = article.collection === "blog"
+      // const img =
+    }
+  }
+
+  return res
+}
+
+export const getStaticPaths = async () => {
+  const ogs = articles.map((a) => ({
+    params: { type: 'article', slug: `${a.collection}/${a.slug}` },
+  }))
+
+  return ogs
+}