feat: add custom property preset

README.md

@@ -287,6 +287,22 @@ export default defineConfig({
 
 ![](assets/presets/brandedLogo.png)
 
+### `customProperty`
+
+```diff
+import opengraphImages, { presets } from "astro-opengraph-images";
+
+export default defineConfig({
+  integrations: [
+    opengraphImages({
++      render: presets.customProperty,
+    }),
+  ],
+});
+```
+
+![](assets/presets/customProperty.png)
+
 ### `gradients`
 
 ```diff

example/astro.config.mjs

@@ -16,7 +16,7 @@ export default defineConfig({
           },
         ],
       },
-      render: presets.blackAndWhite,
+      render: presets.customProperty,
     }),
   ],
 });

src/hook.ts

@@ -41,7 +41,7 @@ async function handlePage({ page, options, render, dir, logger }: HandlePageInpu
   const html = fs.readFileSync(htmlFile).toString();
   const pageDetails = extract(html);
 
-  const reactNode = await render({ ...page, ...pageDetails });
+  const reactNode = await render({ ...page, ...pageDetails, dir: dir });
   const svg = await satori(reactNode, options);
   const resvg = new Resvg(svg, {
     font: {

src/presets/customProperty.tsx

@@ -0,0 +1,32 @@
+import { fileURLToPath } from "url";
+import { sanitizeHtml } from "../extract.js";
+import type { RenderFunctionInput } from "../types.js";
+import { getFilePath } from "../util.js";
+import * as jsdom from "jsdom";
+import * as fs from "fs";
+
+// This preset demonstrates how to extract arbitrary content from an HTML file
+// and render it in an opengraph image.
+export async function customProperty({ title, pathname, dir }: RenderFunctionInput): Promise<React.ReactNode> {
+  const htmlFile = getFilePath({ dir: fileURLToPath(dir), page: pathname });
+  const html = fs.readFileSync(htmlFile).toString();
+  const htmlDoc = new jsdom.JSDOM(sanitizeHtml(html)).window.document;
+
+  // extract the body
+  const body = htmlDoc.querySelector("body")?.textContent ?? "";
+  // truncate the body to 50 characters, add ellipsis if truncated
+  const bodyTruncated = body.substring(0, 50) + (body.length > 50 ? "..." : "");
+
+  const twj = (await import("tw-to-css")).twj;
+
+  return (
+    <div style={twj("h-full w-full flex items-start justify-start border border-blue-500 border-[12px] bg-gray-50")}>
+      <div style={twj("flex items-start justify-start h-full")}>
+        <div style={twj("flex flex-col justify-between w-full h-full")}>
+          <h1 style={twj("text-[80px] p-20 font-black text-left")}>{title}</h1>
+          <div style={twj("text-2xl pb-10 px-20 font-bold mb-0")}>{bodyTruncated}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/presets/index.ts

@@ -1,6 +1,7 @@
 import { backgroundImage } from "./backgroundImage.js";
 import { blackAndWhite } from "./blackAndWhite.js";
 import { brandedLogo } from "./brandedLogo.js";
+import { customProperty } from "./customProperty.js";
 import { gradients } from "./gradients.js";
 import { podcast } from "./podcast.js";
 import { rauchg } from "./rauchg.js";
@@ -20,4 +21,5 @@ export const presets = {
   podcast,
   simpleBlog,
   waveSvg,
+  customProperty,
 };

src/presets/renderExamples.ts

@@ -13,7 +13,8 @@ async function renderExamples() {
     url: "https://example.com/3d-graphics",
     type: "article",
     image: "https://example.com/3d-graphics.png",
-    pathname: "empty",
+    pathname: "dist/index/",
+    dir: new URL("../../example", import.meta.url),
   };
 
   const options: SatoriOptions = {

src/types.ts

@@ -35,6 +35,7 @@ export interface AstroBuildDoneHookInput {
 /** The input arguments to a `RenderFunction` */
 export type RenderFunctionInput = {
   pathname: string;
+  dir: URL;
 } & PageDetails;
 
 /** A function that renders some page input to React */