feat: simplify setup

example/src/og.tsx

@@ -1,7 +1,7 @@
 import type { APIContext } from "astro";
 import type { ReactNode } from "react";
-import React from "react";
 import { BlogSchema } from "./content/config";
+import React from "react";
 
 export const render = (_context: APIContext): ReactNode => {
   return (

package.json

@@ -11,6 +11,9 @@
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "keywords": [
+    "astro-integration"
+  ],
   "dependencies": {
     "@resvg/resvg-js": "^2.6.2",
     "satori": "^0.10.13"

src/index.ts

@@ -1,8 +1,8 @@
-import type { APIContext, AstroIntegration } from "astro";
+import type { AstroIntegration } from "astro";
 import * as fs from "fs";
 import { Resvg } from "@resvg/resvg-js";
 import satori, { type SatoriOptions } from "satori";
-import type { Page, RenderFunction, RenderRouteFunction } from "./types.js";
+import type { Page, RenderFunction } from "./types.js";
 
 const defaults = {
   width: 1200,
@@ -19,7 +19,7 @@ export type Options = DefaultOptions & {
   height: number;
 };
 
-export default function satoriOpenGraph({
+export default function astroOpenGraphImages({
   options,
   render,
 }: {
@@ -31,6 +31,7 @@ export default function satoriOpenGraph({
     name: "astro-opengraph-images",
     hooks: {
       "astro:build:done": async (entry) => {
+        entry.logger.info("Generating OpenGraph images");
         try {
           for (const page of entry.pages) {
             await handlePage({ page, options: optionsWithDefaults, render, dir: entry.dir });
@@ -62,24 +63,19 @@ async function handlePage({
       value: options.width,
     },
   });
-  fs.writeFileSync(`${dir.pathname}${page.pathname}openGraph.png`, resvg.render().asPng());
-}
+  let target: string;
 
-export async function handleRoute({
-  context,
-  options,
-  render,
-}: {
-  context: APIContext;
-  options: Options;
-  render: RenderRouteFunction;
-}) {
-  const svg = await satori(render(context), options);
-  const resvg = new Resvg(svg, {
-    fitTo: {
-      mode: "width",
-      value: options.width,
-    },
-  });
-  return resvg.render().asPng();
+  // some files, e.g. index or 404 pages, are served without a folder
+  // other files, e.g. blog posts, are served from a folder
+  // I don't fully understand how Astro decides this, so:
+  // Check if `page.pathname` is a directory on disk
+  if (fs.existsSync(`${dir.pathname}${page.pathname}`)) {
+    // if it is, save the image in that directory
+    target = `${dir.pathname}${page.pathname}opengraph.png`;
+  } else {
+    // otherwise, save it in the root directory
+    target = `${dir.pathname}opengraph.png`;
+  }
+
+  fs.writeFileSync(target, resvg.render().asPng());
 }