astro-opengraph-images 1.2.1 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.3.1](https://github.com/shepherdjerred/astro-opengraph-images/compare/v1.3.0...v1.3.1) (2024-06-29)
+
+
+### Bug Fixes
+
+* update import ([585b310](https://github.com/shepherdjerred/astro-opengraph-images/commit/585b3100ec97f3634a67d8b8a9694a56380fd388))
+
+## [1.3.0](https://github.com/shepherdjerred/astro-opengraph-images/compare/v1.2.1...v1.3.0) (2024-06-29)
+
+
+### Features
+
+* use React jsx ([b2e8622](https://github.com/shepherdjerred/astro-opengraph-images/commit/b2e862217788735eacebf20396951193dfdb894d))
+
 ## [1.2.1](https://github.com/shepherdjerred/astro-opengraph-images/compare/v1.2.0...v1.2.1) (2024-06-29)
 
 

package/README.md

@@ -1,32 +1,128 @@
-# Astro OpenGraph Images
+<div align="center">
+  <h1>Astro OpenGraph Images</h1>
 
 [![astro-opengraph-images](https://img.shields.io/npm/v/astro-opengraph-images.svg)](https://www.npmjs.com/package/astro-opengraph-images)
 
-Generate fully customizable OpenGraph images with a few lines of code.
+Generate fully customizable OpenGraph images for your entire Astro site with just a few lines of code.
+
+This project is actively maintained. If you have a feature request or need help, please [create an issue](https://github.com/shepherdjerred/astro-opengraph-images/issues/new).
+
+</div>
+
+## Features
+
+- Generate OpenGraph images for every page on your site.
+- Use a preset renderer to get started quickly.
+- Use React syntax or vanilla JavaScript to define your own custom images.
+- Supports both static pages and Astro content collections.
+- Pages can be written in Markdown, MDX, HTML, or any other format.
+
+> [!WARNING]
+> This integration has only been tested with statically rendered sites. It is untested with server-side rendering.
 
 ## Quick Start
 
 1. Add this integration:
 
-   ```bash
-   npm i astro-opengraph-images
+   - Option 1: use the `astro` command:
+
+     ```bash
+     npx astro add astro-opengraph-images
+     ```
+
+   - Option 2: install the package and add the integration to your `astro.config.js`:
+
+     ```bash
+     npm i astro-opengraph-images
+     ```
+
+     ```typescript
+     import opengraphImages from "astro-opengraph-images";
+
+     export default defineConfig({
+       integrations: [opengraphImages()],
+     });
+     ```
+
+1. Configure the integration in your `astro.config.js` file:
+
+   ```typescript
+   // import presets
+   import astroOpenGraphImages, { presets } from "astro-opengraph-images";
+
+   // load any fonts you want to use
+   // either store these fonts with your project, or use `fetch` to download them when building
+   const path = new URL("./public/fonts/CommitMono/CommitMono-700-Regular.otf", import.meta.url);
+   const font = fs.readFileSync(path);
+
+   export default defineConfig({
+     integrations: [
+       opengraphImages({
+         options: {
+           width: 1200,
+           height: 630,
+           fonts: [
+             {
+               data: font,
+               name: "Commit Mono",
+               weight: 400,
+               style: "normal",
+             },
+           ],
+         },
+         // use a preset render function to get started
+         render: presets.blackAndWhite,
+       }),
+     ],
+   });
    ```
 
 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
----
-const { url } = Astro;
----
+   The integration will replace `[[OPENGRAPH IMAGE]]` with the path to the image it generated for that page. Note: `site` must be defined in your Astro config.
+
+   The image text comes from your page `<title />` and `<meta name="description" />` tags, so those should be defined.
 
-<meta property="og:title" content="" />
-<meta property="og:type" content="" />
-<meta property="og:url" content={url} />
-<meta property="og:image" content={url.toString()}openGraph.png} />
-```
+   ```astro
+   ---
+   const { url, site } = Astro;
+   ---
+
+   <title>Your page title</title>
+
+   <meta name="description" content="Your page description" />
+
+   <meta property="og:title" content="" />
+   <meta property="og:type" content="" />
+   <meta property="og:url" content={url} />
+   <meta property="og:image" content={`${site?.toString()}[[OPENGRAPH IMAGE]]`} />
+   ```
 
 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.
 
+## Presets
+
+Presets are located in [`src/presets/`](https://github.com/shepherdjerred/astro-opengraph-images/tree/main/src/presets). [Open a pull request](https://github.com/shepherdjerred/astro-opengraph-images/compare) to contribute a preset you've created.
+
+Here are the current presets:
+
+### Black and White
+
+This is what I use for my personal blog. It's a good starting point for creating your own custom images.
+
+![The black and white preset](./assets/presets/blackAndWhite.png)
+
+## Custom Renderers
+
+You can create your own custom images with a render function. Take a look at how [a preset](https://github.com/shepherdjerred/astro-opengraph-images/blob/main/src/presets/blackAndWhite.tsx) works.
+
+This library uses [Satori](https://github.com/vercel/satori) to convert React components to SVG. The SVG is then converted to a PNG using [resvg-js](https://github.com/yisibl/resvg-js).
+
+> [!TIP]
+> Satori supports [a subset of CSS](https://github.com/vercel/satori?tab=readme-ov-file#css). Be sure to familiarize yourself with its limitations.
+>
+> You can use the [Satori playground](https://og-playground.vercel.app/) to work on your images.
+
 ## Alternatives
 
 Here are some similar libraries using Satori and Astro. I haven't done a feature comparison.

package/dist/presets/{blackAndWhite.jsx → blackAndWhite.js}

@@ -1,6 +1,6 @@
 import React from "react";
 export function blackAndWhite({ title, description }) {
-    return (<div style={{
+    return (React.createElement("div", { style: {
             height: "100%",
             width: "100%",
             display: "flex",
@@ -10,17 +10,12 @@ export function blackAndWhite({ title, description }) {
             color: "#fff",
             fontFamily: "Commit Mono",
             fontSize: 72,
-        }}>
-      <div style={{
-            marginTop: 96,
-        }}>
-        {title}
-      </div>
-      <div style={{
-            fontSize: 40,
-        }}>
-        {description ?? ""}
-      </div>
-    </div>);
+        } },
+        React.createElement("div", { style: {
+                marginTop: 96,
+            } }, title),
+        React.createElement("div", { style: {
+                fontSize: 40,
+            } }, description ?? "")));
 }
-//# sourceMappingURL=blackAndWhite.jsx.map
+//# sourceMappingURL=blackAndWhite.js.map

package/dist/presets/blackAndWhite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blackAndWhite.js","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,6BACE,KAAK,EAAE;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;QAED,6BACE,KAAK,EAAE;gBACL,SAAS,EAAE,EAAE;aACd,IAEA,KAAK,CACF;QACN,6BACE,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb,IAEA,WAAW,IAAI,EAAE,CACd,CACF,CACP,CAAC;AACJ,CAAC"}

package/dist/presets/index.d.ts

@@ -1,4 +1,4 @@
-import { blackAndWhite } from "./blackAndWhite.jsx";
+import { blackAndWhite } from "./blackAndWhite.js";
 export declare const presets: {
     blackAndWhite: typeof blackAndWhite;
 };

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

package/dist/presets/index.js

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

package/dist/presets/index.js.map

@@ -1 +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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,aAAa,EAAE,aAAa;CAC7B,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-opengraph-images",
   "type": "module",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "scripts": {
     "prepare": "husky",
     "lint": "eslint src",

package/src/presets/index.ts

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

package/dist/presets/blackAndWhite.jsx.map

@@ -1 +0,0 @@
-{"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"}