astro-opengraph-images 0.0.0-dev.706

package/dist/presets/render-examples.js

@@ -0,0 +1,57 @@
+import { Resvg } from "@resvg/resvg-js";
+import satori from "satori";
+import { presets } from "./index.js";
+import * as fs from "node:fs/promises";
+import { getFilePath } from "#src/util.js";
+import * as jsdom from "jsdom";
+import { sanitizeHtml } from "#src/extract.js";
+import { fileURLToPath } from "node:url";
+// Updates the examples for the README
+// Run with `npx tsx src/presets/render-examples.ts`
+async function renderExamples() {
+    const pathname = "dist/index/";
+    const dir = new URL("../../examples/preset", import.meta.url);
+    const htmlFile = await getFilePath({
+        dir: fileURLToPath(dir),
+        page: pathname,
+    });
+    const htmlBuffer = await fs.readFile(htmlFile);
+    const html = htmlBuffer.toString();
+    const document = new jsdom.JSDOM(sanitizeHtml(html)).window.document;
+    const page = {
+        title: "3D Graphics with OpenGL",
+        description: "An introduction to 3D graphics rendering and OpenGL.",
+        url: "https://example.com/3d-graphics",
+        type: "article",
+        image: "https://example.com/3d-graphics.png",
+        pathname: pathname,
+        dir,
+        document,
+    };
+    const options = {
+        width: 1200,
+        height: 630,
+        fonts: [
+            {
+                name: "Roboto",
+                weight: 400,
+                style: "normal",
+                data: await fs.readFile("node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff"),
+            },
+        ],
+    };
+    const promises = Object.entries(presets).map(async ([name, preset]) => {
+        const node = await preset(page);
+        const svg = await satori(node, options);
+        const resvg = new Resvg(svg, {
+            font: { loadSystemFonts: false },
+            fitTo: { mode: "width", value: options.width },
+        });
+        const target = `assets/presets/${name}.png`;
+        await fs.writeFile(target, resvg.render().asPng());
+        console.warn(`Wrote ${target}`);
+    });
+    await Promise.all(promises);
+}
+await renderExamples();
+//# sourceMappingURL=render-examples.js.map

package/dist/presets/render-examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-examples.js","sourceRoot":"","sources":["../../src/presets/render-examples.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,MAA8B,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,sCAAsC;AACtC,oDAAoD;AACpD,KAAK,UAAU,cAAc;IAC3B,MAAM,QAAQ,GAAG,aAAa,CAAC;IAC/B,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,uBAAuB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE9D,MAAM,QAAQ,GAAG,MAAM,WAAW,CAAC;QACjC,GAAG,EAAE,aAAa,CAAC,GAAG,CAAC;QACvB,IAAI,EAAE,QAAQ;KACf,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,MAAM,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC/C,MAAM,IAAI,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAC;IACnC,MAAM,QAAQ,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;IAErE,MAAM,IAAI,GAAwB;QAChC,KAAK,EAAE,yBAAyB;QAChC,WAAW,EAAE,sDAAsD;QACnE,GAAG,EAAE,iCAAiC;QACtC,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,qCAAqC;QAC5C,QAAQ,EAAE,QAAQ;QAClB,GAAG;QACH,QAAQ;KACT,CAAC;IAEF,MAAM,OAAO,GAAkB;QAC7B,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,GAAG;QACX,KAAK,EAAE;YACL;gBACE,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,GAAG;gBACX,KAAK,EAAE,QAAQ;gBACf,IAAI,EAAE,MAAM,EAAE,CAAC,QAAQ,CACrB,oEAAoE,CACrE;aACF;SACF;KACF,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,EAAE;QACpE,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC;QAChC,MAAM,GAAG,GAAG,MAAM,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxC,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,EAAE;YAC3B,IAAI,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE;YAChC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE;SAC/C,CAAC,CAAC;QACH,MAAM,MAAM,GAAG,kBAAkB,IAAI,MAAM,CAAC;QAC5C,MAAM,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;QACnD,OAAO,CAAC,IAAI,CAAC,SAAS,MAAM,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC9B,CAAC;AAED,MAAM,cAAc,EAAE,CAAC"}

package/dist/presets/simple-blog.d.ts

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

package/dist/presets/simple-blog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-blog.d.ts","sourceRoot":"","sources":["../../src/presets/simple-blog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAIzD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,GACZ,EAAE,mBAAmB,GAAG,KAAK,CAAC,SAAS,CAiBvC"}

package/dist/presets/simple-blog.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const { twj } = await import("tw-to-css");
+// from https://fullstackheroes.com/resources/vercel-og-templates/simple/
+export function simpleBlog({ title, description, }) {
+    return (_jsx("div", { style: twj("h-full w-full flex items-start justify-start border border-blue-500 border-[12px] bg-gray-50"), children: _jsx("div", { style: twj("flex items-start justify-start h-full"), children: _jsxs("div", { style: twj("flex flex-col justify-between w-full h-full"), children: [_jsx("h1", { style: twj("text-[80px] p-20 font-black text-left"), children: title }), _jsx("div", { style: twj("text-2xl pb-10 px-20 font-bold mb-0"), children: description })] }) }) }));
+}
+//# sourceMappingURL=simple-blog.js.map

package/dist/presets/simple-blog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-blog.js","sourceRoot":"","sources":["../../src/presets/simple-blog.tsx"],"names":[],"mappings":";AACA,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC;AAE1C,yEAAyE;AACzE,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,GACS;IACpB,OAAO,CACL,cACE,KAAK,EAAE,GAAG,CACR,8FAA8F,CAC/F,YAED,cAAK,KAAK,EAAE,GAAG,CAAC,uCAAuC,CAAC,YACtD,eAAK,KAAK,EAAE,GAAG,CAAC,6CAA6C,CAAC,aAC5D,aAAI,KAAK,EAAE,GAAG,CAAC,uCAAuC,CAAC,YAAG,KAAK,GAAM,EACrE,cAAK,KAAK,EAAE,GAAG,CAAC,qCAAqC,CAAC,YACnD,WAAW,GACR,IACF,GACF,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/presets/tailwind.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.d.ts","sourceRoot":"","sources":["../../src/presets/tailwind.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGzD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,GACZ,EAAE,mBAAmB,GAAG,KAAK,CAAC,SAAS,CAyBvC"}

package/dist/presets/tailwind.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const { twj } = await import("tw-to-css");
+export function tailwind({ title, description, }) {
+    return (_jsx("div", { style: twj("flex flex-col w-full h-full items-center justify-center bg-white"), children: _jsx("div", { style: twj("bg-gray-50 flex w-full"), children: _jsx("div", { style: twj("flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8"), children: _jsxs("h2", { style: twj("flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left"), children: [_jsx("span", { children: title }), _jsx("span", { style: twj("text-indigo-600"), children: description })] }) }) }) }));
+}
+//# sourceMappingURL=tailwind.js.map

package/dist/presets/tailwind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.js","sourceRoot":"","sources":["../../src/presets/tailwind.tsx"],"names":[],"mappings":";AACA,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC;AAE1C,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,GACS;IACpB,OAAO,CACL,cACE,KAAK,EAAE,GAAG,CACR,kEAAkE,CACnE,YAED,cAAK,KAAK,EAAE,GAAG,CAAC,wBAAwB,CAAC,YACvC,cACE,KAAK,EAAE,GAAG,CACR,iFAAiF,CAClF,YAED,cACE,KAAK,EAAE,GAAG,CACR,qFAAqF,CACtF,aAED,yBAAO,KAAK,GAAQ,EACpB,eAAM,KAAK,EAAE,GAAG,CAAC,iBAAiB,CAAC,YAAG,WAAW,GAAQ,IACtD,GACD,GACF,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/presets/vercel.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"vercel.d.ts","sourceRoot":"","sources":["../../src/presets/vercel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,SAAS,CAiDtE"}

package/dist/presets/vercel.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function vercel({ title }) {
+    return (_jsxs("div", { style: {
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            textAlign: "center",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            flexWrap: "nowrap",
+            backgroundColor: "white",
+            backgroundImage: "radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)",
+            backgroundSize: "100px 100px",
+        }, children: [_jsx("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsx("svg", { height: 80, viewBox: "0 0 75 65", fill: "black", style: { margin: "0 75px" }, children: _jsx("path", { d: "M37.59.25l36.95 64H.64l36.95-64z" }) }) }), _jsx("div", { style: {
+                    display: "flex",
+                    fontSize: 40,
+                    fontStyle: "normal",
+                    color: "black",
+                    marginTop: 30,
+                    lineHeight: 1.8,
+                    whiteSpace: "pre-wrap",
+                }, children: _jsx("b", { children: title }) })] }));
+}
+//# sourceMappingURL=vercel.js.map

package/dist/presets/vercel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vercel.js","sourceRoot":"","sources":["../../src/presets/vercel.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,MAAM,CAAC,EAAE,KAAK,EAAuB;IACnD,OAAO,CACL,eACE,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,aAAa,EAAE,QAAQ;YACvB,QAAQ,EAAE,QAAQ;YAClB,eAAe,EAAE,OAAO;YACxB,eAAe,EACb,wIAAwI;YAC1I,cAAc,EAAE,aAAa;SAC9B,aAED,cACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,QAAQ;iBACzB,YAED,cACE,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,YAE3B,eAAM,CAAC,EAAC,kCAAkC,GAAQ,GAC9C,GACF,EACN,cACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,QAAQ,EAAE,EAAE;oBACZ,SAAS,EAAE,QAAQ;oBACnB,KAAK,EAAE,OAAO;oBACd,SAAS,EAAE,EAAE;oBACb,UAAU,EAAE,GAAG;oBACf,UAAU,EAAE,UAAU;iBACvB,YAED,sBAAI,KAAK,GAAK,GACV,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/presets/wave-svg.d.ts

@@ -0,0 +1,3 @@
+import type { RenderFunctionInput } from "#src/types.js";
+export declare function waveSvg({ title }: RenderFunctionInput): React.ReactNode;
+//# sourceMappingURL=wave-svg.d.ts.map

package/dist/presets/wave-svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wave-svg.d.ts","sourceRoot":"","sources":["../../src/presets/wave-svg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAIzD,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,SAAS,CA2BvE"}

package/dist/presets/wave-svg.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const { twj } = await import("tw-to-css");
+// from https://fullstackheroes.com/resources/vercel-og-templates/wave/
+export function waveSvg({ title }) {
+    return (_jsxs("div", { style: twj("h-full w-full flex items-start justify-start bg-yellow-50 relative"), children: [_jsx("h1", { style: twj("text-7xl p-20 font-bold text-left text-gray-900"), children: title }), _jsx("svg", { style: twj("absolute bottom-0 left-0 right-0"), viewBox: "0 0 1200 627", width: "1200", height: "627", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 513L28.5 509.8C57 506.7 114 500.3 171.2 484.5C228.3 468.7 285.7 443.3 342.8 435C400 426.7 457 435.3 514.2 447.3C571.3 459.3 628.7 474.7 685.8 490.7C743 506.7 800 523.3 857.2 522.5C914.3 521.7 971.7 503.3 1028.8 491.8C1086 480.3 1143 475.7 1171.5 473.3L1200 471L1200 628L1171.5 628C1143 628 1086 628 1028.8 628C971.7 628 914.3 628 857.2 628C800 628 743 628 685.8 628C628.7 628 571.3 628 514.2 628C457 628 400 628 342.8 628C285.7 628 228.3 628 171.2 628C114 628 57 628 28.5 628L0 628Z", fill: "#fbbf24", strokeLinecap: "round", strokeLinejoin: "miter" }) })] }));
+}
+//# sourceMappingURL=wave-svg.js.map

package/dist/presets/wave-svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wave-svg.js","sourceRoot":"","sources":["../../src/presets/wave-svg.tsx"],"names":[],"mappings":";AACA,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC;AAE1C,uEAAuE;AACvE,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAuB;IACpD,OAAO,CACL,eACE,KAAK,EAAE,GAAG,CACR,oEAAoE,CACrE,aAED,aAAI,KAAK,EAAE,GAAG,CAAC,iDAAiD,CAAC,YAC9D,KAAK,GACH,EAEL,cACE,KAAK,EAAE,GAAG,CAAC,kCAAkC,CAAC,EAC9C,OAAO,EAAC,cAAc,EACtB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,4BAA4B,YAElC,eACE,CAAC,EAAC,ueAAue,EACze,IAAI,EAAC,SAAS,EACd,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,GACJ,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,64 @@
+import type { BaseIntegrationHooks } from "astro";
+import type { ReactNode } from "react";
+export type IntegrationInput = {
+    options: PartialIntegrationOptions;
+    render: RenderFunction;
+};
+/** When applied to PartialIntegrationOptions this type equals IntegrationOptions */
+export type IntegrationDefaults = {
+    width: number;
+    height: number;
+    verbose: boolean;
+};
+/**
+ * IntegrationOptions with some optional properties. This is what we expose to the user. It allows us to
+ * merge the defaults with the user's options and ensure that all required properties are present.
+ */
+export type PartialIntegrationOptions = Omit<Omit<SatoriOptions, "width">, "height"> & Partial<IntegrationDefaults>;
+/**
+ * The options that we use internally. This ensures that all options are configured, either with something
+ * the user provided or with a default value.
+ */
+export type IntegrationOptions = PartialIntegrationOptions & IntegrationDefaults;
+/** This is the page data passed in by Astro */
+export type Page = {
+    pathname: string;
+};
+/** The input Astro passes to the build done hook */
+export type AstroBuildDoneHookInput = Parameters<BaseIntegrationHooks["astro:build:done"]>[0];
+/** The input arguments to a `RenderFunction` */
+export type RenderFunctionInput = {
+    pathname: string;
+    dir: URL;
+    document: Document;
+} & PageDetails;
+/** A function that renders some page input to React */
+export type RenderFunction = (input: RenderFunctionInput) => ReactNode | Promise<ReactNode>;
+/** Basic information about a page */
+export type PageDetails = {
+    title: string;
+    description?: string;
+    url: string;
+    type: string;
+    image: string;
+};
+type NonEmptyArray<T> = [T, ...T[]];
+/** Types copied from Satori */
+export type SatoriWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+export type SatoriFontStyle = "normal" | "italic";
+export type SatoriFontOptions = {
+    data: Buffer | ArrayBuffer;
+    name: string;
+    weight?: SatoriWeight;
+    style?: SatoriFontStyle;
+    lang?: string;
+};
+export type SatoriOptions = {
+    width: number;
+    height: number;
+    fonts: NonEmptyArray<SatoriFontOptions>;
+    /** Callback to load additional assets like emoji images or fallback fonts */
+    loadAdditionalAsset?: (languageCode: string, segment: string) => Promise<string | SatoriFontOptions[]>;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,yBAAyB,CAAC;IACnC,MAAM,EAAE,cAAc,CAAC;CACxB,CAAC;AAEF,oFAAoF;AACpF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,EAC5B,QAAQ,CACT,GACC,OAAO,CAAC,mBAAmB,CAAC,CAAC;AAE/B;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,GACxD,mBAAmB,CAAC;AAEtB,+CAA+C;AAC/C,MAAM,MAAM,IAAI,GAAG;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,oDAAoD;AACpD,MAAM,MAAM,uBAAuB,GAAG,UAAU,CAC9C,oBAAoB,CAAC,kBAAkB,CAAC,CACzC,CAAC,CAAC,CAAC,CAAC;AAEL,gDAAgD;AAChD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,GAAG,CAAC;IACT,QAAQ,EAAE,QAAQ,CAAC;CACpB,GAAG,WAAW,CAAC;AAEhB,uDAAuD;AACvD,MAAM,MAAM,cAAc,GAAG,CAC3B,KAAK,EAAE,mBAAmB,KACvB,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAEpC,qCAAqC;AACrC,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;AAEpC,+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,MAAM,iBAAiB,GAAG;IAC9B,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,CAAC;AACF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACxC,6EAA6E;IAC7E,mBAAmB,CAAC,EAAE,CACpB,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,MAAM,KACZ,OAAO,CAAC,MAAM,GAAG,iBAAiB,EAAE,CAAC,CAAC;CAC5C,CAAC"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/util.d.ts

@@ -0,0 +1,9 @@
+export declare function getFilePath({ dir, page, }: {
+    dir: string;
+    page: string;
+}): Promise<string>;
+export declare function getImagePath({ url, site, }: {
+    url: URL;
+    site: URL | undefined;
+}): 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":"AAeA,wBAAsB,WAAW,CAAC,EAChC,GAAG,EACH,IAAI,GACL,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,mBAQA;AAED,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,IAAI,GACL,EAAE;IACD,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,GAAG,GAAG,SAAS,CAAC;CACvB,GAAG,MAAM,CA0BT"}

package/dist/util.js

@@ -0,0 +1,43 @@
+import path from "node:path";
+import { access } from "node:fs/promises";
+async function fileExists(filePath) {
+    try {
+        await access(filePath);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+// 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:
+export async function getFilePath({ dir, page, }) {
+    let target = path.join(dir, page, "index.html");
+    if (!(await fileExists(target))) {
+        target = path.join(dir, page.slice(0, -1) + ".html");
+    }
+    return target;
+}
+export function getImagePath({ url, site, }) {
+    if (site === undefined) {
+        throw new Error("`site` must be set in your Astro configuration: https://docs.astro.build/en/reference/configuration-reference/#site");
+    }
+    let target = url.pathname;
+    // if url ends with a slash, it's a directory
+    // add index.png to the end
+    target = target.endsWith("/") ? target + "index.png" : target + ".png";
+    // Astro creates these as top-level files rather than in a folder
+    if (target === "/404/index.png") {
+        return site.toString() + "404.png";
+    }
+    else if (target === "/500/index.png") {
+        return site.toString() + "500.png";
+    }
+    // remove leading slash
+    target = target.slice(1);
+    // add site URL
+    target = site.toString() + target;
+    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,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,KAAK,UAAU,UAAU,CAAC,QAAgB;IACxC,IAAI,CAAC;QACH,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC;AAED,mEAAmE;AACnE,yDAAyD;AACzD,uDAAuD;AACvD,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,EAChC,GAAG,EACH,IAAI,GAIL;IACC,IAAI,MAAM,GAAW,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC;IAExD,IAAI,CAAC,CAAC,MAAM,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;QAChC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC;IACvD,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAC3B,GAAG,EACH,IAAI,GAIL;IACC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,MAAM,IAAI,KAAK,CACb,qHAAqH,CACtH,CAAC;IACJ,CAAC;IAED,IAAI,MAAM,GAAG,GAAG,CAAC,QAAQ,CAAC;IAE1B,6CAA6C;IAC7C,2BAA2B;IAC3B,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC;IAEvE,iEAAiE;IACjE,IAAI,MAAM,KAAK,gBAAgB,EAAE,CAAC;QAChC,OAAO,IAAI,CAAC,QAAQ,EAAE,GAAG,SAAS,CAAC;IACrC,CAAC;SAAM,IAAI,MAAM,KAAK,gBAAgB,EAAE,CAAC;QACvC,OAAO,IAAI,CAAC,QAAQ,EAAE,GAAG,SAAS,CAAC;IACrC,CAAC;IAED,uBAAuB;IACvB,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACzB,eAAe;IACf,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,MAAM,CAAC;IAElC,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/dist/util.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=util.test.d.ts.map

package/dist/util.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.test.d.ts","sourceRoot":"","sources":["../src/util.test.ts"],"names":[],"mappings":""}

package/dist/util.test.js

@@ -0,0 +1,46 @@
+import { expect, test } from "vitest";
+import { getFilePath } from "./util.js";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { mkdir, mkdtemp, writeFile } from "node:fs/promises";
+test("getFilePath index", async () => {
+    const tmpDir = await createTempDir();
+    // change the current working directory to the temp dir
+    process.chdir(tmpDir);
+    // create a folder named blog inside the temp dir
+    await writeFile(path.join(tmpDir, "index.html"), "");
+    const result = await getFilePath({ dir: "", page: "index/" });
+    // change the current working directory back to the original
+    process.chdir(import.meta.dirname);
+    expect(path.normalize(result)).toBe(path.normalize("index.html"));
+});
+test("getFilePath 404", async () => {
+    const tmpDir = await createTempDir();
+    // change the current working directory to the temp dir
+    process.chdir(tmpDir);
+    // create a folder named blog inside the temp dir
+    await writeFile(path.join(tmpDir, "404.html"), "");
+    const result = await getFilePath({ dir: "", page: "404/" });
+    // change the current working directory back to the original
+    process.chdir(import.meta.dirname);
+    expect(path.normalize(result)).toBe(path.normalize("404.html"));
+});
+test("getFilePath blog", async () => {
+    const tmpDir = await createTempDir();
+    // change the current working directory to the temp dir
+    process.chdir(tmpDir);
+    // create a folder named blog inside the temp dir
+    await mkdir(path.join(tmpDir, "blog"));
+    await writeFile(path.join(tmpDir, "blog", "index.html"), "");
+    const result = await getFilePath({ dir: "", page: "blog/" });
+    // change the current working directory back to the original
+    process.chdir(import.meta.dirname);
+    expect(path.normalize(result)).toBe(path.normalize("blog/index.html"));
+});
+// https://sdorra.dev/posts/2024-02-12-vitest-tmpdir
+async function createTempDir() {
+    const ostmpdir = tmpdir();
+    const dir = path.join(ostmpdir, "unit-test-");
+    return await mkdtemp(dir);
+}
+//# sourceMappingURL=util.test.js.map

package/dist/util.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.test.js","sourceRoot":"","sources":["../src/util.test.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "astro-opengraph-images",
+  "description": "Generate Open Graph images for your Astro site.",
+  "author": {
+    "name": "Jerred Shepherd",
+    "email": "npm@sjer.red",
+    "url": "https://sjer.red"
+  },
+  "homepage": "https://github.com/shepherdjerred/monorepo/tree/main/packages/astro-opengraph-images",
+  "license": "GPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shepherdjerred/monorepo.git",
+    "directory": "packages/astro-opengraph-images"
+  },
+  "bugs": {
+    "url": "https://github.com/shepherdjerred/monorepo/issues"
+  },
+  "type": "module",
+  "version": "0.0.0-dev.706",
+  "imports": {
+    "#src/*": "./src/*"
+  },
+  "scripts": {
+    "lint": "eslint src --cache",
+    "build": "tsc",
+    "watch": "tsc -w",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./types.js": {
+      "types": "./dist/types.d.ts",
+      "default": "./dist/types.js"
+    },
+    "./util.js": {
+      "types": "./dist/util.d.ts",
+      "default": "./dist/util.js"
+    },
+    "./extract.js": {
+      "types": "./dist/extract.d.ts",
+      "default": "./dist/extract.js"
+    }
+  },
+  "keywords": [
+    "astro-integration",
+    "withastro",
+    "seo",
+    "ui",
+    "renderer"
+  ],
+  "dependencies": {
+    "@resvg/resvg-js": "^2.6.2",
+    "jsdom": "^28.0.0",
+    "react": "^19.0.0",
+    "satori": "^0.19.0"
+  },
+  "peerDependencies": {
+    "tw-to-css": "^0.0.12"
+  },
+  "devDependencies": {
+    "@fontsource/roboto": "^5.2.5",
+    "@shepherdjerred/eslint-config": "^0.2.0",
+    "@tsconfig/node24": "^24.0.0",
+    "@tsconfig/strictest": "^2.0.5",
+    "@types/bun": "^1.3.9",
+    "@types/jsdom": "^27.0.0",
+    "@types/node": "^25.0.0",
+    "@types/react": "^19.0.10",
+    "astro": "^5.4.3",
+    "eslint": "^9.22.0",
+    "jiti": "^2.6.1",
+    "typescript": "^5.8.2",
+    "vitest": "^4.0.0"
+  },
+  "files": [
+    "dist",
+    "src",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "bun.lock",
+    "CHANGELOG.md"
+  ],
+  "patchedDependencies": {}
+}

package/src/extract.ts

@@ -0,0 +1,58 @@
+import type { PageDetails } from "./types.ts";
+
+// 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
+    .replaceAll(/<style[^>]*>[^<]*<\/style>/gi, "")
+    .replaceAll(/<script[^>]*>[^<]*<\/script>/gi, "");
+}
+
+function getMetaContent(document: Document, property: string): string | null {
+  const content = document
+    .querySelector(`meta[property='${property}']`)
+    ?.getAttribute("content");
+  if (content === undefined || content === null || content === "") {
+    return null;
+  }
+  return content;
+}
+
+export function extract(document: Document): PageDetails {
+  const title = getMetaContent(document, "og:title");
+  const description = getMetaContent(document, "og:description");
+  const url = getMetaContent(document, "og:url");
+  const type = getMetaContent(document, "og:type");
+  const image = getMetaContent(document, "og:image");
+
+  const required = { title, url, type, image };
+  const missing = Object.entries(required)
+    .filter(([, value]) => value === null)
+    .map(([key]) => `og:${key}`);
+
+  if (missing.length > 0) {
+    const html = missing.map(
+      (tag) => `<meta property="${tag}" content="some value"/>`,
+    );
+    throw new Error(
+      `Missing required meta tags: ${missing.join(", ")}. Add the following to your page:\n${html.join("\n")}`,
+    );
+  }
+
+  // After the check above, these values are guaranteed to be non-null strings
+  const safeTitle = title ?? "";
+  const safeUrl = url ?? "";
+  const safeType = type ?? "";
+  const safeImage = image ?? "";
+  const returnVal: PageDetails = {
+    title: safeTitle,
+    url: safeUrl,
+    type: safeType,
+    image: safeImage,
+  };
+  if (description !== null && description !== title) {
+    returnVal.description = description;
+  }
+  return returnVal;
+}

package/src/hook.ts

@@ -0,0 +1,103 @@
+import { Resvg } from "@resvg/resvg-js";
+import satori from "satori";
+import type {
+  AstroBuildDoneHookInput,
+  IntegrationOptions,
+  Page,
+  RenderFunction,
+} from "./types.ts";
+import * as fs from "node:fs/promises";
+import type { AstroIntegrationLogger } from "astro";
+import { extract, sanitizeHtml } from "./extract.ts";
+import { getFilePath } from "./util.ts";
+import { fileURLToPath } from "node:url";
+import * as jsdom from "jsdom";
+import path from "node:path";
+
+export async function buildDoneHook({
+  logger,
+  pages,
+  options,
+  dir,
+  render,
+}: AstroBuildDoneHookInput & {
+  options: IntegrationOptions;
+  render: RenderFunction;
+}) {
+  logger.info("Generating Open Graph images");
+  const promises = pages.map((page) =>
+    handlePage({ page, options, render, dir, logger }),
+  );
+  await Promise.all(promises);
+}
+
+type HandlePageInput = {
+  page: Page;
+  options: IntegrationOptions;
+  render: RenderFunction;
+  dir: URL;
+  logger: AstroIntegrationLogger;
+};
+
+async function handlePage({
+  page,
+  options,
+  render,
+  dir,
+  logger,
+}: HandlePageInput) {
+  // gets the absolute path to the HTML file. E.g. /home/user/project/dist/blog/index.html
+  // fileURLToPath() converts the URL to a file path. Without it, the path would start with a leading slash on Windows
+  // systems, resulting in an invalid path.
+  const htmlFile = await getFilePath({
+    dir: fileURLToPath(dir),
+    page: page.pathname,
+  });
+
+  // read the HTML file and parse it with jsdom
+  const htmlBuffer = await fs.readFile(htmlFile);
+  const html = htmlBuffer.toString();
+  const document = new jsdom.JSDOM(sanitizeHtml(html)).window.document;
+
+  // extract the OpenGraph properties from the HTML file
+  const pageDetails = extract(document);
+
+  // render the image using Satori and Resvg
+  const reactNode = await render({ ...page, ...pageDetails, dir, document });
+  const svg = await satori(reactNode, options);
+  const resvg = new Resvg(svg, {
+    font: {
+      loadSystemFonts: false,
+    },
+    fitTo: {
+      mode: "width",
+      value: options.width,
+    },
+  });
+
+  // save the image as a PNG file. The file name is the same as the HTML file, but with a .png extension.
+  const pngFile = htmlFile.replace(/\.html$/, ".png");
+  await fs.writeFile(pngFile, resvg.render().asPng());
+
+  // get the relative filesystem path to the PNG file from the output directory. E.g. blog/index.png
+  // path.relative() returns the relative path from the first argument to the second argument.
+  const relativePngFile = path
+    .relative(fileURLToPath(dir), pngFile)
+    .replaceAll("\\", "/");
+
+  // convert the image path to a URL, decode URL-encoded characters, and remove the leading slash
+  const imageUrl = decodeURIComponent(
+    new URL(pageDetails.image).pathname.slice(1),
+  );
+
+  // check that the og:image property matches the sitePath
+  if (imageUrl !== relativePngFile) {
+    throw new Error(
+      `The og:image property in ${htmlFile} (${imageUrl}) does not match the generated image (${relativePngFile}).`,
+    );
+  }
+
+  if (options.verbose) {
+    logger.info(`Generated ${relativePngFile} for ${htmlFile}.`);
+  }
+}