astro-opengraph-images 1.0.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [1.2.1](https://github.com/shepherdjerred/astro-opengraph-images/compare/v1.2.0...v1.2.1) (2024-06-29)
+
+
+### Bug Fixes
+
+* resolve merge conflict ([ba0c596](https://github.com/shepherdjerred/astro-opengraph-images/commit/ba0c596b3f10a95d0cbe67bf9eef51b552fc7afe))
+
+## [1.2.0](https://github.com/shepherdjerred/astro-opengraph-images/compare/v1.1.0...v1.2.0) (2024-06-29)
+
+
+### Features
+
+* simplify ([d82ab03](https://github.com/shepherdjerred/astro-opengraph-images/commit/d82ab031aa971437a9b02999be52c04a8a9e089c))
+* simplify ([0e1e7c6](https://github.com/shepherdjerred/astro-opengraph-images/commit/0e1e7c6b1d4effa4fb0caa5fcf676168d3b03dd2))
+
+
+### Bug Fixes
+
+* fix json ([0799f5f](https://github.com/shepherdjerred/astro-opengraph-images/commit/0799f5f055d12a3cabd9cc72dd30c9cef9219b84))
+
+## [1.1.0](https://github.com/shepherdjerred/astro-opengraph-images/compare/v1.0.0...v1.1.0) (2024-06-29)
+
+
+### Features
+
+* simplify setup ([08a922e](https://github.com/shepherdjerred/astro-opengraph-images/commit/08a922e7d096930e3af40865d34ac18c480384fa))
+
 ## 1.0.0 (2024-06-28)
 
 

package/README.md

@@ -1,140 +1,17 @@
 # Astro OpenGraph Images
 
-This is an [Astro](https://astro.build/) integration that generates images for [OpenGraph](https://ogp.me/) using [Satori](https://github.com/vercel/satori) and [resvg-js](https://github.com/yisibl/resvg-js).
+[![astro-opengraph-images](https://img.shields.io/npm/v/astro-opengraph-images.svg)](https://www.npmjs.com/package/astro-opengraph-images)
 
-OpenGraph images are the link preview you see when linking a site to Slack, Discord, Twitter, Facebook, etc.
+Generate fully customizable OpenGraph images with a few lines of code.
 
-## Usage
+## Quick Start
 
-1. Install this package:
+1. Add this integration:
 
    ```bash
-   npm i astro-satori
+   npm i astro-opengraph-images
    ```
 
-1. If you want to use React syntax (recommended), install `@types/react`:
-
-   ```bash
-   npm i -D @types/react
-   ```
-
-1. Define a render function:
-
-   - Satori supports a [limited subset of CSS](https://github.com/vercel/satori?tab=readme-ov-file#css).
-   - You can use the [Satori playground](https://og-playground.vercel.app/) to iterate on your render function
-
-   - Using React:
-
-   Create a `.tsx` file to define your render function. Note: Astro does not support `.tsx` files for a static file endpoint, so you must define the render function in a separate `.tsx` file.
-
-   ```tsx
-   import type { APIContext } from "astro";
-   import type { ReactNode } from "react";
-   import React from "react";
-
-   export const render = ({ params, request }: APIContext): ReactNode => {
-     const title = params.slug;
-     const type = "blog";
-
-     return (
-       <div
-         style={{
-           height: "100%",
-           width: "100%",
-           display: "flex",
-           flexDirection: "column",
-           backgroundColor: "#000",
-           padding: "55px 70px",
-           color: "#fff",
-           fontFamily: "Atkinson",
-           fontSize: 72,
-         }}
-       >
-         <div
-           style={{
-             marginTop: 96,
-           }}
-         >
-           {title}
-         </div>
-         <div
-           style={{
-             fontSize: 40,
-           }}
-         >
-           {type === "blog" ? "by Jerred Shepherd" : ""}
-         </div>
-       </div>
-     );
-   };
-   ```
-
-   - Using vanilla JavaScript:
-
-     ```typescript
-     export function render() ({
-         type: "div",
-         props: {
-             style: {
-             height: "100%",
-             width: "100%",
-             display: "flex",
-             flexDirection: "column",
-             backgroundColor: "#000",
-             padding: "55px 70px",
-             color: "#fff",
-             fontFamily: "CommitMono",
-             fontSize: 72,
-             },
-             children: [
-             {
-                 type: "div",
-                 props: {
-                 style: {
-                     marginTop: 96,
-                 },
-                 children: title,
-                 },
-             },
-             {
-                 type: "div",
-                 props: {
-                 style: {
-                     fontSize: 40,
-                 },
-                 children: type === "blog" ? "by Jerred Shepherd" : "",
-                 },
-             },
-             ],
-         },
-     });
-     ```
-
-1. Add this integration to your Astro config
-
-   ```typescript
-   import satoriOpenGraph from "satro-satori";
-
-   // You'll need to provide _every_ font that you use with Satori. Satori does not have any fonts by default.
-   const commitMono = fs.readFileSync("public/fonts/CommitMono/CommitMono-450-Regular.otf");
-
-   // https://astro.build/config
-   export default defineConfig({
-       integrations: [satoriOpenGraph(options: {
-           fonts: [
-             {
-               name: "Commit Mono",
-               data: commitMono,
-               weight: 400,
-               style: "normal",
-             },
-           ],
-       }, render)],
-   });
-   ```
-
-   The integration will generate a `openGraph.png` file next to every `.html` in your Astro site.
-
 1. Update your layout to add the appropriate `meta` tags. The [OpenGraph site](https://ogp.me/) has more information about valid tags. At a minimum, you should define the tags below.
 
 ```astro
@@ -150,13 +27,6 @@ const { url } = Astro;
 
 1. Confirm that your OpenGraph images are accessible. After you deploy these changes, navigate to [OpenGraph.xyz](https://www.opengraph.xyz/) and test your site.
 
-## Resources
-
-I consulted these resources while building this library.
-
-- https://dietcode.io/p/astro-og/
-- https://github.com/sdnts/dietcode/blob/914e3970f6a0f555113768b12db3229dd822e6f1/astro.config.ts#L55
-
 ## Alternatives
 
 Here are some similar libraries using Satori and Astro. I haven't done a feature comparison.
@@ -168,24 +38,3 @@ Here are some similar libraries using Satori and Astro. I haven't done a feature
 - https://github.com/cijiugechu/astro-satori (Possibly dead, hasn't been updated in a year)
 - https://github.com/kevinzunigacuellar/astro-satori (Possibly dead, hasn't been updated in a year)
 - https://github.com/rumaan/astro-vercel-og (Possibly dead, hasn't been updated in a year)
-
-## Related
-
-I didn't consult these resources, but they're relevant if you wanted to build your own version of this library.
-
-- https://www.knaap.dev/posts/dynamic-og-images-with-any-static-site-generator/
-- https://blog.otterlord.dev/posts/dynamic-opengraph/
-- https://egghead.io/lessons/astro-implement-dynamic-og-image-generation-with-astro-api-routes-and-satori
-- https://arne.me/blog/static-og-images-in-astro/
-- https://jafaraziz.com/blog/generate-open-graph-images-with-astro-and-satori/
-- https://rumaan.dev/blog/open-graph-images-using-satori
-- https://www.alperdogan.dev/blog/og-image-with-satori-and-astro/
-- https://techsquidtv.com/blog/generating-open-graph-images-for-astro/
-- https://blog.vhng.dev/posts/20230901-dynamically-generate-og-image
-- https://www.kozhuhds.com/blog/generating-static-open-graph-og-images-in-astro-using-vercel-og/
-- https://arne.me/blog/static-og-images-in-astro
-- https://aidankinzett.com/blog/astro-open-graph-image/
-- https://dev.to/jxd-dev/open-graph-image-generation-with-astro-gnp
-- https://www.omar45.com/blog/dynamic-og-images-with-astro
-- https://www.jafaraziz.com/blog/generate-open-graph-images-with-astro-and-satori/
-- https://www.merlinmason.co.uk/blog/generate-open-graph-images-with-astro

package/dist/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const placeholder = "[[OPENGRAPH IMAGE]]";
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,wBAAwB,CAAC"}

package/dist/constants.js

@@ -0,0 +1,2 @@
+export const placeholder = `[[OPENGRAPH IMAGE]]`;
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,qBAAqB,CAAC"}

package/dist/extract.d.ts

@@ -0,0 +1,4 @@
+import type { PageDetails } from "./types.js";
+export declare function sanitizeHtml(html: string): string;
+export declare function extract(html: string): PageDetails;
+//# sourceMappingURL=extract.d.ts.map

package/dist/extract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract.d.ts","sourceRoot":"","sources":["../src/extract.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAM9C,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAIjD;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAYjD"}

package/dist/extract.js

@@ -0,0 +1,23 @@
+import * as jsdom from "jsdom";
+// Astro CSS parsing fails: Error: Could not parse CSS stylesheet
+// Remove CSS from the HTML
+// https://github.com/jsdom/jsdom/issues/2005#issuecomment-1758940894
+export function sanitizeHtml(html) {
+    return html
+        .replace(/<style([\S\s]*?)>([\S\s]*?)<\/style>/gim, "")
+        .replace(/<script([\S\s]*?)>([\S\s]*?)<\/script>/gim, "");
+}
+export function extract(html) {
+    const htmlDoc = new jsdom.JSDOM(sanitizeHtml(html)).window.document;
+    const title = htmlDoc.title;
+    const description = htmlDoc.querySelector("meta[name=description]")?.getAttribute("content");
+    const returnVal = {};
+    if (title) {
+        returnVal.title = title;
+    }
+    if (description) {
+        returnVal.description = description;
+    }
+    return returnVal;
+}
+//# sourceMappingURL=extract.js.map

package/dist/extract.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract.js","sourceRoot":"","sources":["../src/extract.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,iEAAiE;AACjE,2BAA2B;AAC3B,qEAAqE;AACrE,MAAM,UAAU,YAAY,CAAC,IAAY;IACvC,OAAO,IAAI;SACR,OAAO,CAAC,yCAAyC,EAAE,EAAE,CAAC;SACtD,OAAO,CAAC,2CAA2C,EAAE,EAAE,CAAC,CAAC;AAC9D,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,IAAY;IAClC,MAAM,OAAO,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;IACpE,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;IAC5B,MAAM,WAAW,GAAG,OAAO,CAAC,aAAa,CAAC,wBAAwB,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAC7F,MAAM,SAAS,GAAgB,EAAE,CAAC;IAClC,IAAI,KAAK,EAAE,CAAC;QACV,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC;IAC1B,CAAC;IACD,IAAI,WAAW,EAAE,CAAC;QAChB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IACtC,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/hook.d.ts

@@ -0,0 +1,6 @@
+import type { AstroBuildDoneHookInput, IntegrationOptions, RenderFunction } from "./types.js";
+export declare function buildDoneHook({ logger, pages, options, dir, render, }: AstroBuildDoneHookInput & {
+    options: IntegrationOptions;
+    render: RenderFunction;
+}): Promise<void>;
+//# sourceMappingURL=hook.d.ts.map

package/dist/hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../src/hook.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,kBAAkB,EAAQ,cAAc,EAAE,MAAM,YAAY,CAAC;AAOpG,wBAAsB,aAAa,CAAC,EAClC,MAAM,EACN,KAAK,EACL,OAAO,EACP,GAAG,EACH,MAAM,GACP,EAAE,uBAAuB,GAAG;IAC3B,OAAO,EAAE,kBAAkB,CAAC;IAC5B,MAAM,EAAE,cAAc,CAAC;CACxB,iBASA"}

package/dist/hook.js

@@ -0,0 +1,39 @@
+import { Resvg } from "@resvg/resvg-js";
+import satori from "satori";
+import * as fs from "fs";
+import { extract } from "./extract.js";
+import { getFilePath } from "./util.js";
+import { placeholder } from "./constants.js";
+export async function buildDoneHook({ logger, pages, options, dir, render, }) {
+    logger.info("Generating OpenGraph images");
+    for (const page of pages) {
+        try {
+            await handlePage({ page, options, render, dir, logger });
+        }
+        catch (e) {
+            logger.error(e);
+        }
+    }
+}
+async function handlePage({ page, options, render, dir, logger }) {
+    const file = getFilePath({ dir: dir.pathname, page: page.pathname });
+    const html = fs.readFileSync(file).toString();
+    const data = extract(html);
+    const svg = await satori(render({ ...page, ...data }), options);
+    const resvg = new Resvg(svg, {
+        fitTo: {
+            mode: "width",
+            value: options.width,
+        },
+    });
+    const target = file.replace(/\.html$/, ".png");
+    fs.writeFileSync(target, resvg.render().asPng());
+    // remove local filesystem pathname
+    let sitePath = target.replace(process.cwd(), "");
+    // remove leading dist/ from the path
+    sitePath = sitePath.replace("/dist/", "");
+    const content = fs.readFileSync(file).toString();
+    fs.writeFileSync(file, content.replace(placeholder, sitePath));
+    logger.info(`Generated ${sitePath} for ${page.pathname}`);
+}
+//# sourceMappingURL=hook.js.map

package/dist/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.js","sourceRoot":"","sources":["../src/hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,MAAM,MAAM,QAAQ,CAAC;AAE5B,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,EAClC,MAAM,EACN,KAAK,EACL,OAAO,EACP,GAAG,EACH,MAAM,GAIP;IACC,MAAM,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;IAC3C,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC;YACH,MAAM,UAAU,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC;QAC3D,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,MAAM,CAAC,KAAK,CAAC,CAAW,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC;AACH,CAAC;AAUD,KAAK,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAmB;IAC/E,MAAM,IAAI,GAAG,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACrE,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;IAC9C,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE3B,MAAM,GAAG,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC;IAChE,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,EAAE;QAC3B,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,KAAK;SACrB;KACF,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAC/C,EAAE,CAAC,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;IAEjD,mCAAmC;IACnC,IAAI,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC;IACjD,qCAAqC;IACrC,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAE1C,MAAM,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;IACjD,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE/D,MAAM,CAAC,IAAI,CAAC,aAAa,QAAQ,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;AAC5D,CAAC"}

package/dist/index.d.ts

@@ -1,21 +1,6 @@
-import type { APIContext, AstroIntegration } from "astro";
-import { type SatoriOptions } from "satori";
-import type { RenderFunction, RenderRouteFunction } from "./types.js";
-export type DefaultOptions = SatoriOptions & {
-    width?: number;
-    height?: number;
-};
-export type Options = DefaultOptions & {
-    width: number;
-    height: number;
-};
-export default function satoriOpenGraph({ options, render, }: {
-    options: DefaultOptions;
-    render: RenderFunction;
-}): AstroIntegration;
-export declare function handleRoute({ context, options, render, }: {
-    context: APIContext;
-    options: Options;
-    render: RenderRouteFunction;
-}): Promise<Buffer>;
+import { astroOpenGraphImages } from "./integration.js";
+export { placeholder } from "./constants.js";
+export * from "./presets/index.js";
+export * from "./types.js";
+export default astroOpenGraphImages;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAe,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAQ,cAAc,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAO5E,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,cAAc,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAO,EACP,MAAM,GACP,EAAE;IACD,OAAO,EAAE,cAAc,CAAC;IACxB,MAAM,EAAE,cAAc,CAAC;CACxB,GAAG,gBAAgB,CAiBnB;AAuBD,wBAAsB,WAAW,CAAC,EAChC,OAAO,EACP,OAAO,EACP,MAAM,GACP,EAAE;IACD,OAAO,EAAE,UAAU,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,mBAAmB,CAAC;CAC7B,mBASA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAE3B,eAAe,oBAAoB,CAAC"}

package/dist/index.js

@@ -1,47 +1,6 @@
-import * as fs from "fs";
-import { Resvg } from "@resvg/resvg-js";
-import satori from "satori";
-const defaults = {
-    width: 1200,
-    height: 630,
-};
-export default function satoriOpenGraph({ options, render, }) {
-    const optionsWithDefaults = { ...defaults, ...options };
-    return {
-        name: "astro-satori",
-        hooks: {
-            "astro:build:done": async (entry) => {
-                try {
-                    for (const page of entry.pages) {
-                        await handlePage({ page, options: optionsWithDefaults, render, dir: entry.dir });
-                        entry.logger.info(`Generated OpenGraph image for ${page.pathname}`);
-                    }
-                }
-                catch (e) {
-                    entry.logger.error(e);
-                }
-            },
-        },
-    };
-}
-async function handlePage({ page, options, render, dir, }) {
-    const svg = await satori(render(page), options);
-    const resvg = new Resvg(svg, {
-        fitTo: {
-            mode: "width",
-            value: options.width,
-        },
-    });
-    fs.writeFileSync(`${dir.pathname}${page.pathname}openGraph.png`, resvg.render().asPng());
-}
-export async function handleRoute({ context, options, render, }) {
-    const svg = await satori(render(context), options);
-    const resvg = new Resvg(svg, {
-        fitTo: {
-            mode: "width",
-            value: options.width,
-        },
-    });
-    return resvg.render().asPng();
-}
+import { astroOpenGraphImages } from "./integration.js";
+export { placeholder } from "./constants.js";
+export * from "./presets/index.js";
+export * from "./types.js";
+export default astroOpenGraphImages;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,MAA8B,MAAM,QAAQ,CAAC;AAGpD,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,GAAG;CACZ,CAAC;AAYF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAO,EACP,MAAM,GAIP;IACC,MAAM,mBAAmB,GAAY,EAAE,GAAG,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAC;IACjE,OAAO;QACL,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE;YACL,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;gBAClC,IAAI,CAAC;oBACH,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;wBAC/B,MAAM,UAAU,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;wBACjF,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,iCAAiC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;oBACtE,CAAC;gBACH,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACX,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAW,CAAC,CAAC;gBAClC,CAAC;YACH,CAAC;SACF;KACF,CAAC;AACJ,CAAC;AAED,KAAK,UAAU,UAAU,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,MAAM,EACN,GAAG,GAMJ;IACC,MAAM,GAAG,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;IAChD,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,EAAE;QAC3B,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,KAAK;SACrB;KACF,CAAC,CAAC;IACH,EAAE,CAAC,aAAa,CAAC,GAAG,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,eAAe,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;AAC3F,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,EAChC,OAAO,EACP,OAAO,EACP,MAAM,GAKP;IACC,MAAM,GAAG,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;IACnD,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,EAAE;QAC3B,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,KAAK;SACrB;KACF,CAAC,CAAC;IACH,OAAO,KAAK,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC;AAChC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAE3B,eAAe,oBAAoB,CAAC"}

package/dist/integration.d.ts

@@ -0,0 +1,4 @@
+import type { AstroIntegration } from "astro";
+import type { IntegrationInput } from "./types.js";
+export declare function astroOpenGraphImages({ options, render }: IntegrationInput): AstroIntegration;
+//# sourceMappingURL=integration.d.ts.map

package/dist/integration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration.d.ts","sourceRoot":"","sources":["../src/integration.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAE,gBAAgB,EAAsB,MAAM,YAAY,CAAC;AAQvE,wBAAgB,oBAAoB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,gBAAgB,GAAG,gBAAgB,CAe5F"}

package/dist/integration.js

@@ -0,0 +1,21 @@
+import { buildDoneHook } from "./hook.js";
+const defaults = {
+    width: 1200,
+    height: 630,
+};
+export function astroOpenGraphImages({ options, render }) {
+    const optionsWithDefaults = { ...defaults, ...options };
+    return {
+        name: "astro-opengraph-images",
+        hooks: {
+            "astro:build:done": async (entry) => {
+                await buildDoneHook({
+                    ...entry,
+                    options: optionsWithDefaults,
+                    render,
+                });
+            },
+        },
+    };
+}
+//# sourceMappingURL=integration.js.map

package/dist/integration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration.js","sourceRoot":"","sources":["../src/integration.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE1C,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF,MAAM,UAAU,oBAAoB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAoB;IACxE,MAAM,mBAAmB,GAAuB,EAAE,GAAG,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAC;IAE5E,OAAO;QACL,IAAI,EAAE,wBAAwB;QAC9B,KAAK,EAAE;YACL,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;gBAClC,MAAM,aAAa,CAAC;oBAClB,GAAG,KAAK;oBACR,OAAO,EAAE,mBAAmB;oBAC5B,MAAM;iBACP,CAAC,CAAC;YACL,CAAC;SACF;KACF,CAAC;AACJ,CAAC"}

package/dist/presets/blackAndWhite.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { RenderFunctionInput } from "../types.js";
+export declare function blackAndWhite({ title, description }: RenderFunctionInput): React.ReactNode;
+//# sourceMappingURL=blackAndWhite.d.ts.map

package/dist/presets/blackAndWhite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blackAndWhite.d.ts","sourceRoot":"","sources":["../../src/presets/blackAndWhite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEvD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,SAAS,CA+B1F"}

package/dist/presets/blackAndWhite.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+export function blackAndWhite({ title, description }) {
+    return (<div style={{
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            backgroundColor: "#000",
+            padding: "55px 70px",
+            color: "#fff",
+            fontFamily: "Commit Mono",
+            fontSize: 72,
+        }}>
+      <div style={{
+            marginTop: 96,
+        }}>
+        {title}
+      </div>
+      <div style={{
+            fontSize: 40,
+        }}>
+        {description ?? ""}
+      </div>
+    </div>);
+}
+//# sourceMappingURL=blackAndWhite.jsx.map

package/dist/presets/blackAndWhite.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"blackAndWhite.jsx","sourceRoot":"","sources":["../../src/presets/blackAndWhite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,WAAW,EAAuB;IACvE,OAAO,CACL,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,eAAe,EAAE,MAAM;YACvB,OAAO,EAAE,WAAW;YACpB,KAAK,EAAE,MAAM;YACb,UAAU,EAAE,aAAa;YACzB,QAAQ,EAAE,EAAE;SACb,CAAC,CAEF;MAAA,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,SAAS,EAAE,EAAE;SACd,CAAC,CAEF;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,EAAE;SACb,CAAC,CAEF;QAAA,CAAC,WAAW,IAAI,EAAE,CACpB;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/dist/presets/index.d.ts

@@ -0,0 +1,5 @@
+import { blackAndWhite } from "./blackAndWhite.jsx";
+export declare const presets: {
+    blackAndWhite: typeof blackAndWhite;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/presets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

package/dist/presets/index.js

@@ -0,0 +1,5 @@
+import { blackAndWhite } from "./blackAndWhite.jsx";
+export const presets = {
+    blackAndWhite: blackAndWhite,
+};
+//# sourceMappingURL=index.js.map

package/dist/presets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,aAAa,EAAE,aAAa;CAC7B,CAAC"}

package/dist/types.d.ts

@@ -1,22 +1,55 @@
-import type { APIContext } from "astro";
+import type { AstroIntegrationLogger, RouteData } from "astro";
 import type { ReactNode } from "react";
+export interface IntegrationInput {
+    options: DefaultIntegrationOptions;
+    render: RenderFunction;
+}
+export type DefaultIntegrationOptions = SatoriOptions & {
+    width?: number;
+    height?: number;
+};
+export type IntegrationOptions = DefaultIntegrationOptions & {
+    width: number;
+    height: number;
+};
+/** This is the page data passed in by Astro */
 export interface Page {
     pathname: string;
 }
-export type RenderFunction = (page: Page) => ReactNode;
-export type RenderRouteFunction = (context: APIContext) => ReactNode;
-export type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-export type FontStyle = "normal" | "italic";
-export interface FontOptions {
+/** The input Astro passes to the build done hook */
+export interface AstroBuildDoneHookInput {
+    logger: AstroIntegrationLogger;
+    pages: {
+        pathname: string;
+    }[];
+    dir: URL;
+    routes: RouteData[];
+    cacheManifest: boolean;
+}
+/** The input arguments to a `RenderFunction` */
+export type RenderFunctionInput = {
+    pathname: string;
+} & PageDetails;
+/** A function that renders some page input to React */
+export type RenderFunction = (input: RenderFunctionInput) => ReactNode;
+/** Basic information about a page */
+export interface PageDetails {
+    title?: string;
+    description?: string;
+}
+/** Types copied from Satori */
+export type SatoriWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+export type SatoriFontStyle = "normal" | "italic";
+export interface SatoriFontOptions {
     data: Buffer | ArrayBuffer;
     name: string;
-    weight?: Weight;
-    style?: FontStyle;
+    weight?: SatoriWeight;
+    style?: SatoriFontStyle;
     lang?: string;
 }
 export interface SatoriOptions {
     width: number;
     height: number;
-    fonts: FontOptions[];
+    fonts: SatoriFontOptions[];
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,IAAI;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,EAAE,UAAU,KAAK,SAAS,CAAC;AAGrE,MAAM,MAAM,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC5C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,yBAAyB,CAAC;IACnC,MAAM,EAAE,cAAc,CAAC;CACxB;AAED,MAAM,MAAM,yBAAyB,GAAG,aAAa,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,GAAG;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,+CAA+C;AAC/C,MAAM,WAAW,IAAI;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,oDAAoD;AACpD,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,sBAAsB,CAAC;IAC/B,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM,CAAC;KAClB,EAAE,CAAC;IACJ,GAAG,EAAE,GAAG,CAAC;IACT,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,gDAAgD;AAChD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,WAAW,CAAC;AAEhB,uDAAuD;AACvD,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;AAEvE,qCAAqC;AACrC,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,+BAA+B;AAC/B,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAClD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,iBAAiB,EAAE,CAAC;CAC5B"}

package/dist/util.d.ts

@@ -0,0 +1,5 @@
+export declare function getFilePath({ dir, page }: {
+    dir: string;
+    page: string;
+}): string;
+//# sourceMappingURL=util.d.ts.map

package/dist/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAMA,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,UAWvE"}

package/dist/util.js

@@ -0,0 +1,18 @@
+import * as fs from "fs";
+// 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
+export function getFilePath({ dir, page }) {
+    let target;
+    if (fs.existsSync(`${dir}${page}`)) {
+        target = `${dir}${page}index.html`;
+    }
+    else {
+        target = `${dir}${page}`;
+        target = target.slice(0, -1);
+        target = target + ".html";
+    }
+    return target;
+}
+//# sourceMappingURL=util.js.map

package/dist/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AAEzB,mEAAmE;AACnE,yDAAyD;AACzD,uDAAuD;AACvD,kDAAkD;AAClD,MAAM,UAAU,WAAW,CAAC,EAAE,GAAG,EAAE,IAAI,EAAiC;IACtE,IAAI,MAAc,CAAC;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC,GAAG,GAAG,GAAG,IAAI,EAAE,CAAC,EAAE,CAAC;QACnC,MAAM,GAAG,GAAG,GAAG,GAAG,IAAI,YAAY,CAAC;IACrC,CAAC;SAAM,CAAC;QACN,MAAM,GAAG,GAAG,GAAG,GAAG,IAAI,EAAE,CAAC;QACzB,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAC7B,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5B,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-opengraph-images",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "scripts": {
     "prepare": "husky",
     "lint": "eslint src",
@@ -11,27 +11,37 @@
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "keywords": [
+    "astro-integration",
+    "withastro",
+    "seo",
+    "ui",
+    "renderer"
+  ],
   "dependencies": {
     "@resvg/resvg-js": "^2.6.2",
+    "jsdom": "^24.1.0",
+    "react": "^18.3.1",
     "satori": "^0.10.13"
   },
   "devDependencies": {
-    "astro": "^4.11.3",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
-    "@eslint/js": "^9.4.0",
+    "@eslint/js": "^9.6.0",
     "@tsconfig/node20": "^20.1.4",
     "@tsconfig/strictest": "^2.0.5",
+    "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
+    "astro": "^4.11.3",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
     "eslint": "^8.57.0",
     "husky": "^9.0.11",
-    "lint-staged": "^15.2.5",
-    "prettier": "^3.3.0",
-    "typescript": "^5.4.5",
-    "typescript-eslint": "^7.11.0",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.2",
+    "typescript": "^5.5.2",
+    "typescript-eslint": "^7.14.1",
     "vitest": "^1.6.0"
   },
   "lint-staged": {

package/src/constants.ts

@@ -0,0 +1 @@
+export const placeholder = `[[OPENGRAPH IMAGE]]`;

package/src/extract.ts

@@ -0,0 +1,25 @@
+import type { PageDetails } from "./types.js";
+import * as jsdom from "jsdom";
+
+// Astro CSS parsing fails: Error: Could not parse CSS stylesheet
+// Remove CSS from the HTML
+// https://github.com/jsdom/jsdom/issues/2005#issuecomment-1758940894
+export function sanitizeHtml(html: string): string {
+  return html
+    .replace(/<style([\S\s]*?)>([\S\s]*?)<\/style>/gim, "")
+    .replace(/<script([\S\s]*?)>([\S\s]*?)<\/script>/gim, "");
+}
+
+export function extract(html: string): PageDetails {
+  const htmlDoc = new jsdom.JSDOM(sanitizeHtml(html)).window.document;
+  const title = htmlDoc.title;
+  const description = htmlDoc.querySelector("meta[name=description]")?.getAttribute("content");
+  const returnVal: PageDetails = {};
+  if (title) {
+    returnVal.title = title;
+  }
+  if (description) {
+    returnVal.description = description;
+  }
+  return returnVal;
+}

package/src/hook.ts

@@ -0,0 +1,63 @@
+import { Resvg } from "@resvg/resvg-js";
+import satori from "satori";
+import type { AstroBuildDoneHookInput, IntegrationOptions, Page, RenderFunction } from "./types.js";
+import * as fs from "fs";
+import type { AstroIntegrationLogger } from "astro";
+import { extract } from "./extract.js";
+import { getFilePath } from "./util.js";
+import { placeholder } from "./constants.js";
+
+export async function buildDoneHook({
+  logger,
+  pages,
+  options,
+  dir,
+  render,
+}: AstroBuildDoneHookInput & {
+  options: IntegrationOptions;
+  render: RenderFunction;
+}) {
+  logger.info("Generating OpenGraph images");
+  for (const page of pages) {
+    try {
+      await handlePage({ page, options, render, dir, logger });
+    } catch (e) {
+      logger.error(e as string);
+    }
+  }
+}
+
+interface HandlePageInput {
+  page: Page;
+  options: IntegrationOptions;
+  render: RenderFunction;
+  dir: URL;
+  logger: AstroIntegrationLogger;
+}
+
+async function handlePage({ page, options, render, dir, logger }: HandlePageInput) {
+  const file = getFilePath({ dir: dir.pathname, page: page.pathname });
+  const html = fs.readFileSync(file).toString();
+  const data = extract(html);
+
+  const svg = await satori(render({ ...page, ...data }), options);
+  const resvg = new Resvg(svg, {
+    fitTo: {
+      mode: "width",
+      value: options.width,
+    },
+  });
+
+  const target = file.replace(/\.html$/, ".png");
+  fs.writeFileSync(target, resvg.render().asPng());
+
+  // remove local filesystem pathname
+  let sitePath = target.replace(process.cwd(), "");
+  // remove leading dist/ from the path
+  sitePath = sitePath.replace("/dist/", "");
+
+  const content = fs.readFileSync(file).toString();
+  fs.writeFileSync(file, content.replace(placeholder, sitePath));
+
+  logger.info(`Generated ${sitePath} for ${page.pathname}`);
+}

package/src/index.ts

@@ -1,85 +1,7 @@
-import type { APIContext, 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 { astroOpenGraphImages } from "./integration.js";
 
-const defaults = {
-  width: 1200,
-  height: 630,
-};
+export { placeholder } from "./constants.js";
+export * from "./presets/index.js";
+export * from "./types.js";
 
-export type DefaultOptions = SatoriOptions & {
-  width?: number;
-  height?: number;
-};
-
-export type Options = DefaultOptions & {
-  width: number;
-  height: number;
-};
-
-export default function satoriOpenGraph({
-  options,
-  render,
-}: {
-  options: DefaultOptions;
-  render: RenderFunction;
-}): AstroIntegration {
-  const optionsWithDefaults: Options = { ...defaults, ...options };
-  return {
-    name: "astro-satori",
-    hooks: {
-      "astro:build:done": async (entry) => {
-        try {
-          for (const page of entry.pages) {
-            await handlePage({ page, options: optionsWithDefaults, render, dir: entry.dir });
-            entry.logger.info(`Generated OpenGraph image for ${page.pathname}`);
-          }
-        } catch (e) {
-          entry.logger.error(e as string);
-        }
-      },
-    },
-  };
-}
-
-async function handlePage({
-  page,
-  options,
-  render,
-  dir,
-}: {
-  page: Page;
-  dir: URL;
-  options: Options;
-  render: RenderFunction;
-}) {
-  const svg = await satori(render(page), options);
-  const resvg = new Resvg(svg, {
-    fitTo: {
-      mode: "width",
-      value: options.width,
-    },
-  });
-  fs.writeFileSync(`${dir.pathname}${page.pathname}openGraph.png`, resvg.render().asPng());
-}
-
-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();
-}
+export default astroOpenGraphImages;

package/src/integration.ts

@@ -0,0 +1,25 @@
+import type { AstroIntegration } from "astro";
+import type { IntegrationInput, IntegrationOptions } from "./types.js";
+import { buildDoneHook } from "./hook.js";
+
+const defaults = {
+  width: 1200,
+  height: 630,
+};
+
+export function astroOpenGraphImages({ options, render }: IntegrationInput): AstroIntegration {
+  const optionsWithDefaults: IntegrationOptions = { ...defaults, ...options };
+
+  return {
+    name: "astro-opengraph-images",
+    hooks: {
+      "astro:build:done": async (entry) => {
+        await buildDoneHook({
+          ...entry,
+          options: optionsWithDefaults,
+          render,
+        });
+      },
+    },
+  };
+}

package/src/presets/blackAndWhite.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import type { RenderFunctionInput } from "../types.js";
+
+export function blackAndWhite({ title, description }: RenderFunctionInput): React.ReactNode {
+  return (
+    <div
+      style={{
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "#000",
+        padding: "55px 70px",
+        color: "#fff",
+        fontFamily: "Commit Mono",
+        fontSize: 72,
+      }}
+    >
+      <div
+        style={{
+          marginTop: 96,
+        }}
+      >
+        {title}
+      </div>
+      <div
+        style={{
+          fontSize: 40,
+        }}
+      >
+        {description ?? ""}
+      </div>
+    </div>
+  );
+}

package/src/presets/index.ts

@@ -0,0 +1,5 @@
+import { blackAndWhite } from "./blackAndWhite.jsx";
+
+export const presets = {
+  blackAndWhite: blackAndWhite,
+};

package/src/types.ts

@@ -1,26 +1,63 @@
-import type { APIContext } from "astro";
+import type { AstroIntegrationLogger, RouteData } from "astro";
 import type { ReactNode } from "react";
 
+export interface IntegrationInput {
+  options: DefaultIntegrationOptions;
+  render: RenderFunction;
+}
+
+export type DefaultIntegrationOptions = SatoriOptions & {
+  width?: number;
+  height?: number;
+};
+
+export type IntegrationOptions = DefaultIntegrationOptions & {
+  width: number;
+  height: number;
+};
+
+/** This is the page data passed in by Astro */
 export interface Page {
   pathname: string;
 }
 
-export type RenderFunction = (page: Page) => ReactNode;
+/** The input Astro passes to the build done hook */
+export interface AstroBuildDoneHookInput {
+  logger: AstroIntegrationLogger;
+  pages: {
+    pathname: string;
+  }[];
+  dir: URL;
+  routes: RouteData[];
+  cacheManifest: boolean;
+}
+
+/** The input arguments to a `RenderFunction` */
+export type RenderFunctionInput = {
+  pathname: string;
+} & PageDetails;
 
-export type RenderRouteFunction = (context: APIContext) => ReactNode;
+/** A function that renders some page input to React */
+export type RenderFunction = (input: RenderFunctionInput) => ReactNode;
+
+/** Basic information about a page */
+export interface PageDetails {
+  title?: string;
+  description?: string;
+}
 
-// copied from Satori
-export type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-export type FontStyle = "normal" | "italic";
-export interface FontOptions {
+/** Types copied from Satori */
+export type SatoriWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+export type SatoriFontStyle = "normal" | "italic";
+export interface SatoriFontOptions {
   data: Buffer | ArrayBuffer;
   name: string;
-  weight?: Weight;
-  style?: FontStyle;
+  weight?: SatoriWeight;
+  style?: SatoriFontStyle;
   lang?: string;
 }
 export interface SatoriOptions {
   width: number;
   height: number;
-  fonts: FontOptions[];
+  fonts: SatoriFontOptions[];
 }

package/src/util.ts

@@ -0,0 +1,18 @@
+import * as fs from "fs";
+
+// 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
+export function getFilePath({ dir, page }: { dir: string; page: string }) {
+  let target: string;
+  if (fs.existsSync(`${dir}${page}`)) {
+    target = `${dir}${page}index.html`;
+  } else {
+    target = `${dir}${page}`;
+    target = target.slice(0, -1);
+    target = target + ".html";
+  }
+
+  return target;
+}