astro-opengraph-images 1.16.1-dev.2362 → 1.16.1-dev.2389

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md.tmpl +308 -308
  2. package/package.json +1 -1
package/README.md.tmpl CHANGED
@@ -1,308 +1,308 @@
1
- <div align="center">
2
- <picture>
3
- <source media="(prefers-color-scheme: dark)" srcset="https://cdn.rawgit.com/shepherdjerred/astro-opengraph-images/main/assets/logo-dark.png">
4
- <source media="(prefers-color-scheme: light)" srcset="https://cdn.rawgit.com/shepherdjerred/astro-opengraph-images/main/assets/logo-light.png">
5
- <img alt="project logo" src="https://cdn.rawgit.com/shepherdjerred/astro-opengraph-images/main/assets/logo-light.png" height=75>
6
- </picture>
7
-
8
- [![astro-opengraph-images](https://img.shields.io/npm/v/astro-opengraph-images.svg)](https://www.npmjs.com/package/astro-opengraph-images)
9
-
10
- Generate Open Graph images for your Astro site.
11
-
12
- 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).
13
-
14
- </div>
15
-
16
- ## What is Open Graph?
17
-
18
- [Open Graph](https://ogp.me/) is a protocol created by Facebook. It allows pages on your site to be richly embedded into other sites and applications.
19
-
20
- You've probably seen this in action when posting a link on Facebook, Twitter, Slack, iMessage, or Discord. Links posted in supported applications will display the Open Graph metadata which often includes an image. This library will generate those images for you.
21
-
22
- ## Features
23
-
24
- > [!WARNING]
25
- > This integration has only been tested with statically rendered sites. It is untested with server-side rendering.
26
-
27
- - Written in TypeScript
28
- - Generate Open Graph images for every page on your site.
29
- - Use a preset renderer to get started quickly.
30
- - Images are fully customizable using [Satori](https://github.com/vercel/satori).
31
- - Use React/JSX + Tailwind syntax or vanilla JavaScript to define your own custom images.
32
- - Supports both static pages and Astro content collections.
33
- - Pages can be written in Markdown, MDX, HTML, or any other format.
34
-
35
- ## Quick Start
36
-
37
- To better illustrate these steps, I've created a [video](https://www.loom.com/share/a66a65be8a4e48ec8612b78489db590d?sid=3e9f7cd6-68ec-49da-b942-75eb4608cb5e) following them to help others follow along.
38
-
39
- 1. Add this integration to your Astro config:
40
-
41
- - Option 1: use the `astro` command:
42
-
43
- ```bash
44
- npx astro add astro-opengraph-images
45
- ```
46
-
47
- - Option 2: install the package and add the integration to your Astro config:
48
-
49
- ```bash
50
- npm i astro-opengraph-images
51
- ```
52
-
53
- ```diff
54
- +import opengraphImages from "astro-opengraph-images";
55
-
56
- export default defineConfig({
57
- integrations: [
58
- + opengraphImages()
59
- ],
60
- });
61
- ```
62
-
63
- 1. Install React. React is used by the presets, and can be used to easily author custom images. Note that React is only used for generating the images and will not be shipped to clients.
64
-
65
- ```bash
66
- npm i -D react
67
- ```
68
-
69
- 1. Install the fonts you want to use. Fonts must be explicitly declared to be used for images. System fonts are _not_ available. For this quick start guide, we'll install the [Roboto](https://fontsource.org/fonts/roboto) font:
70
-
71
- ```bash
72
- npm i @fontsource/roboto
73
- ```
74
-
75
- You can find more fonts on [Fontsource](https://fontsource.org/), or you can use any font file that you have. See [Satori's font documentation](https://github.com/vercel/satori?tab=readme-ov-file#fonts) for more information.
76
-
77
- 1. Configure the integration in your Astro config:
78
-
79
- ```diff
80
- -import opengraphImages from "astro-opengraph-images";
81
- +import opengraphImages, { presets } from "astro-opengraph-images";
82
-
83
- export default defineConfig({
84
- integrations: [
85
- - opengraphImages()
86
- + opengraphImages({
87
- + options: {
88
- + fonts: [
89
- + {
90
- + name: "Roboto",
91
- + weight: 400,
92
- + style: "normal",
93
- + data: fs.readFileSync("node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff"),
94
- + },
95
- + ],
96
- + },
97
- + render: presets.blackAndWhite,
98
- + }),
99
- ],
100
- });
101
- ```
102
-
103
- 1. Set the [`site`](https://docs.astro.build/en/reference/configuration-reference/#site) property in your Astro config:
104
-
105
- Open Graph requires URLs to be absolute, including the domain your site is hosted at. This integration uses the site defined in your Astro config to create the correct URLs for Open Graph which is `site` must be defined.
106
-
107
- ```diff
108
- export default defineConfig({
109
- + site: "https://<your site>.com",
110
- integrations: [
111
- opengraphImages({
112
- options: {
113
- fonts: [
114
- {
115
- name: "Roboto",
116
- weight: 400,
117
- style: "normal",
118
- data: fs.readFileSync("node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff"),
119
- },
120
- ],
121
- },
122
- render: presets.blackAndWhite,
123
- }),
124
- ],
125
- });
126
- ```
127
-
128
- 1. Update your main Astro layout with the appropriate `meta` tags. The [Open Graph site](https://ogp.me/) has more information possible tags.
129
-
130
- The following `meta` tags must be defined:
131
-
132
- * `og:title`
133
- * This field may be used when generating images.
134
- * `og:type`
135
- * See the [Open Graph documentation](https://ogp.me/#types) for valid values.
136
- * `og:image`
137
- * Set this to the return value of `getImagePath` (example shown below).
138
- * If the value of `og:image` does not match what this integration expects then your site will fail to build. This will ensure your site is correctly configured to display Open Graph images.
139
- * `og:description`
140
- * Optional. This field may be used when generating images.
141
-
142
- Your site will fail to build if the tags above are not set.
143
-
144
- * Option 1: Use the [`astro-seo`](https://github.com/jonasmerlin/astro-seo) package:
145
-
146
- Install the `astro-seo` package:
147
-
148
- ```bash
149
- npm i astro-seo
150
- ```
151
-
152
- Update your Astro layout to use the `SEO` component:
153
-
154
- ```diff
155
- ---
156
- +import { SEO } from "astro-seo";
157
- +import { getImagePath } from "astro-opengraph-images";
158
-
159
- interface Props {
160
- title: string;
161
- }
162
-
163
- const { title } = Astro.props;
164
- +const { url, site } = Astro;
165
- +const openGraphImageUrl = getImagePath({ url, site });
166
- ---
167
-
168
- <!doctype html>
169
- <html lang="en">
170
- <head>
171
- <meta charset="UTF-8" />
172
- <meta name="description" content="Astro description" />
173
- <meta name="viewport" content="width=device-width" />
174
- <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
175
- <meta name="generator" content={Astro.generator} />
176
- <title>{title}</title>
177
-
178
- + <SEO
179
- + openGraph={
180
- + {
181
- + basic: {
182
- + title: title,
183
- + type: "website",
184
- + image: openGraphImageUrl,
185
- + url: url,
186
- + },
187
- + optional: {
188
- + description: "My page description",
189
- + },
190
- + }
191
- + }
192
- + />
193
- </head>
194
- <body>
195
- <slot />
196
- </body>
197
- </html>
198
- ```
199
-
200
- * Option 2: Manually add the `meta` tags to your Astro layout.
201
-
202
- 1. Build your site. You should see a `.png` file next to each `.html` page in your `dist` folder. Double-check that the `og:image` proprety in your `.html` file matches the path to the `.png` file.
203
-
204
- 1. Deploy your site. You can verify that your images are correct by:
205
-
206
- * Sending a link to your site in an application that supports Open Graph like iMessage, Slack, Discord, etc.
207
- * Visit [opengraph.xyz](http://opengraph.xyz/) and test your site.
208
-
209
- ## Examples
210
-
211
- There are example sites using this integration under [`examples/`](https://github.com/shepherdjerred/astro-opengraph-images/tree/main/examples).
212
-
213
- ### Sites Using This
214
-
215
- If you're using this project, [open a PR](https://github.com/shepherdjerred/astro-opengraph-images/compare) to add your site to this list.
216
-
217
- * [sjer.red](https://sjer.red) ([source](https://github.com/shepherdjerred/sjer.red))
218
-
219
- ## Filtering Pages
220
-
221
- By default, this integration generates an Open Graph image for every page in your build output. Pass an optional `filter` callback to skip pages — for example, the 404 page, utility routes, or sections where images don't apply.
222
-
223
- The callback receives the same `RenderFunctionInput` as your renderer (pathname, parsed DOM, Open Graph metadata). Return `true` to render the image, `false` to skip it. The callback may be synchronous or return a `Promise<boolean>`.
224
-
225
- ```diff
226
- import opengraphImages, { presets } from "astro-opengraph-images";
227
-
228
- export default defineConfig({
229
- integrations: [
230
- opengraphImages({
231
- options: { fonts: [/* ... */] },
232
- render: presets.blackAndWhite,
233
- + // Only generate images for blog posts
234
- + filter: ({ pathname }) => pathname.startsWith("/blog/"),
235
- }),
236
- ],
237
- });
238
- ```
239
-
240
- More examples:
241
-
242
- ```typescript
243
- // Exclude utility pages
244
- filter: ({ pathname }) => !["/404/", "/"].includes(pathname);
245
-
246
- // Filter on DOM content or async data
247
- filter: async ({ document, pathname }) =>
248
- document.querySelector('meta[property="og:image"]') !== null &&
249
- pathname.startsWith("/blog/");
250
- ```
251
-
252
- When `verbose: true` is set on `options`, skipped pages are logged.
253
-
254
- ## Custom Renderers
255
-
256
- 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.
257
-
258
- Renderers have access to the page's DOM using [jsdom](https://github.com/jsdom/jsdom). You can use this to render your Open Graph image using any of the content from the associated HTML page. An example of this is shown in the [custom property preset](https://github.com/shepherdjerred/astro-opengraph-images/blob/main/src/presets/customProperty.tsx) which shows a preview of the page's body text in the Open Graph image.
259
-
260
- 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).
261
-
262
- > [!TIP]
263
- > Satori supports [a subset of CSS](https://github.com/vercel/satori?tab=readme-ov-file#css). Be sure to familiarize yourself with its limitations.
264
- >
265
- > You can use the [Satori playground](https://og-playground.vercel.app/) to work on your images.
266
- >
267
- > You can use Tailwind syntax with [tw-to-css](https://github.com/vinicoder/tw-to-css). An example is the [Tailwind preset](https://github.com/shepherdjerred/astro-opengraph-images/blob/main/src/presets/tailwind.tsx). You'll need to install this package yourself.
268
-
269
- ## Presets
270
-
271
- 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.
272
-
273
- Note: some presets use the [`tw-to-css`](https://github.com/vinicoder/tw-to-css) library. You'll need to install this dependency separately when using one of these presets. You'll see an error if the library is not already installed.
274
-
275
- ```bash
276
- npm i tw-to-css
277
- ```
278
-
279
- {{ range $preset := (ds "presets") -}}
280
- ### `{{ strings.ReplaceAll ".png" "" $preset }}`
281
-
282
- ```diff
283
- import opengraphImages, { presets } from "astro-opengraph-images";
284
-
285
- export default defineConfig({
286
- integrations: [
287
- opengraphImages({
288
- + render: presets.{{ strings.ReplaceAll ".png" "" $preset }},
289
- }),
290
- ],
291
- });
292
- ```
293
-
294
- ![](assets/presets/{{ $preset }})
295
-
296
- {{ end }}
297
-
298
- ## Alternatives
299
-
300
- Here are some similar libraries using Satori and Astro. I haven't done a feature comparison.
301
-
302
- - https://github.com/florian-lefebvre/satori-astro (This library looks excellent)
303
- - https://github.com/delucis/astro-og-canvas (Doesn't allow arbitrary layouts)
304
- - https://github.com/thewebforge/astro-og-images (Only allows you to choose from a list of templates)
305
- - https://github.com/tomaskebrle/astro-og-image (Seems limited)
306
- - https://github.com/cijiugechu/astro-satori (Possibly dead, hasn't been updated in a year)
307
- - https://github.com/kevinzunigacuellar/astro-satori (Possibly dead, hasn't been updated in a year)
308
- - https://github.com/rumaan/astro-vercel-og (Possibly dead, hasn't been updated in a year)
1
+ <div align="center">
2
+ <picture>
3
+ <source media="(prefers-color-scheme: dark)" srcset="https://cdn.rawgit.com/shepherdjerred/astro-opengraph-images/main/assets/logo-dark.png">
4
+ <source media="(prefers-color-scheme: light)" srcset="https://cdn.rawgit.com/shepherdjerred/astro-opengraph-images/main/assets/logo-light.png">
5
+ <img alt="project logo" src="https://cdn.rawgit.com/shepherdjerred/astro-opengraph-images/main/assets/logo-light.png" height=75>
6
+ </picture>
7
+
8
+ [![astro-opengraph-images](https://img.shields.io/npm/v/astro-opengraph-images.svg)](https://www.npmjs.com/package/astro-opengraph-images)
9
+
10
+ Generate Open Graph images for your Astro site.
11
+
12
+ 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).
13
+
14
+ </div>
15
+
16
+ ## What is Open Graph?
17
+
18
+ [Open Graph](https://ogp.me/) is a protocol created by Facebook. It allows pages on your site to be richly embedded into other sites and applications.
19
+
20
+ You've probably seen this in action when posting a link on Facebook, Twitter, Slack, iMessage, or Discord. Links posted in supported applications will display the Open Graph metadata which often includes an image. This library will generate those images for you.
21
+
22
+ ## Features
23
+
24
+ > [!WARNING]
25
+ > This integration has only been tested with statically rendered sites. It is untested with server-side rendering.
26
+
27
+ - Written in TypeScript
28
+ - Generate Open Graph images for every page on your site.
29
+ - Use a preset renderer to get started quickly.
30
+ - Images are fully customizable using [Satori](https://github.com/vercel/satori).
31
+ - Use React/JSX + Tailwind syntax or vanilla JavaScript to define your own custom images.
32
+ - Supports both static pages and Astro content collections.
33
+ - Pages can be written in Markdown, MDX, HTML, or any other format.
34
+
35
+ ## Quick Start
36
+
37
+ To better illustrate these steps, I've created a [video](https://www.loom.com/share/a66a65be8a4e48ec8612b78489db590d?sid=3e9f7cd6-68ec-49da-b942-75eb4608cb5e) following them to help others follow along.
38
+
39
+ 1. Add this integration to your Astro config:
40
+
41
+ - Option 1: use the `astro` command:
42
+
43
+ ```bash
44
+ npx astro add astro-opengraph-images
45
+ ```
46
+
47
+ - Option 2: install the package and add the integration to your Astro config:
48
+
49
+ ```bash
50
+ npm i astro-opengraph-images
51
+ ```
52
+
53
+ ```diff
54
+ +import opengraphImages from "astro-opengraph-images";
55
+
56
+ export default defineConfig({
57
+ integrations: [
58
+ + opengraphImages()
59
+ ],
60
+ });
61
+ ```
62
+
63
+ 1. Install React. React is used by the presets, and can be used to easily author custom images. Note that React is only used for generating the images and will not be shipped to clients.
64
+
65
+ ```bash
66
+ npm i -D react
67
+ ```
68
+
69
+ 1. Install the fonts you want to use. Fonts must be explicitly declared to be used for images. System fonts are _not_ available. For this quick start guide, we'll install the [Roboto](https://fontsource.org/fonts/roboto) font:
70
+
71
+ ```bash
72
+ npm i @fontsource/roboto
73
+ ```
74
+
75
+ You can find more fonts on [Fontsource](https://fontsource.org/), or you can use any font file that you have. See [Satori's font documentation](https://github.com/vercel/satori?tab=readme-ov-file#fonts) for more information.
76
+
77
+ 1. Configure the integration in your Astro config:
78
+
79
+ ```diff
80
+ -import opengraphImages from "astro-opengraph-images";
81
+ +import opengraphImages, { presets } from "astro-opengraph-images";
82
+
83
+ export default defineConfig({
84
+ integrations: [
85
+ - opengraphImages()
86
+ + opengraphImages({
87
+ + options: {
88
+ + fonts: [
89
+ + {
90
+ + name: "Roboto",
91
+ + weight: 400,
92
+ + style: "normal",
93
+ + data: fs.readFileSync("node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff"),
94
+ + },
95
+ + ],
96
+ + },
97
+ + render: presets.blackAndWhite,
98
+ + }),
99
+ ],
100
+ });
101
+ ```
102
+
103
+ 1. Set the [`site`](https://docs.astro.build/en/reference/configuration-reference/#site) property in your Astro config:
104
+
105
+ Open Graph requires URLs to be absolute, including the domain your site is hosted at. This integration uses the site defined in your Astro config to create the correct URLs for Open Graph which is `site` must be defined.
106
+
107
+ ```diff
108
+ export default defineConfig({
109
+ + site: "https://<your site>.com",
110
+ integrations: [
111
+ opengraphImages({
112
+ options: {
113
+ fonts: [
114
+ {
115
+ name: "Roboto",
116
+ weight: 400,
117
+ style: "normal",
118
+ data: fs.readFileSync("node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff"),
119
+ },
120
+ ],
121
+ },
122
+ render: presets.blackAndWhite,
123
+ }),
124
+ ],
125
+ });
126
+ ```
127
+
128
+ 1. Update your main Astro layout with the appropriate `meta` tags. The [Open Graph site](https://ogp.me/) has more information possible tags.
129
+
130
+ The following `meta` tags must be defined:
131
+
132
+ * `og:title`
133
+ * This field may be used when generating images.
134
+ * `og:type`
135
+ * See the [Open Graph documentation](https://ogp.me/#types) for valid values.
136
+ * `og:image`
137
+ * Set this to the return value of `getImagePath` (example shown below).
138
+ * If the value of `og:image` does not match what this integration expects then your site will fail to build. This will ensure your site is correctly configured to display Open Graph images.
139
+ * `og:description`
140
+ * Optional. This field may be used when generating images.
141
+
142
+ Your site will fail to build if the tags above are not set.
143
+
144
+ * Option 1: Use the [`astro-seo`](https://github.com/jonasmerlin/astro-seo) package:
145
+
146
+ Install the `astro-seo` package:
147
+
148
+ ```bash
149
+ npm i astro-seo
150
+ ```
151
+
152
+ Update your Astro layout to use the `SEO` component:
153
+
154
+ ```diff
155
+ ---
156
+ +import { SEO } from "astro-seo";
157
+ +import { getImagePath } from "astro-opengraph-images";
158
+
159
+ interface Props {
160
+ title: string;
161
+ }
162
+
163
+ const { title } = Astro.props;
164
+ +const { url, site } = Astro;
165
+ +const openGraphImageUrl = getImagePath({ url, site });
166
+ ---
167
+
168
+ <!doctype html>
169
+ <html lang="en">
170
+ <head>
171
+ <meta charset="UTF-8" />
172
+ <meta name="description" content="Astro description" />
173
+ <meta name="viewport" content="width=device-width" />
174
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
175
+ <meta name="generator" content={Astro.generator} />
176
+ <title>{title}</title>
177
+
178
+ + <SEO
179
+ + openGraph={
180
+ + {
181
+ + basic: {
182
+ + title: title,
183
+ + type: "website",
184
+ + image: openGraphImageUrl,
185
+ + url: url,
186
+ + },
187
+ + optional: {
188
+ + description: "My page description",
189
+ + },
190
+ + }
191
+ + }
192
+ + />
193
+ </head>
194
+ <body>
195
+ <slot />
196
+ </body>
197
+ </html>
198
+ ```
199
+
200
+ * Option 2: Manually add the `meta` tags to your Astro layout.
201
+
202
+ 1. Build your site. You should see a `.png` file next to each `.html` page in your `dist` folder. Double-check that the `og:image` proprety in your `.html` file matches the path to the `.png` file.
203
+
204
+ 1. Deploy your site. You can verify that your images are correct by:
205
+
206
+ * Sending a link to your site in an application that supports Open Graph like iMessage, Slack, Discord, etc.
207
+ * Visit [opengraph.xyz](http://opengraph.xyz/) and test your site.
208
+
209
+ ## Examples
210
+
211
+ There are example sites using this integration under [`examples/`](https://github.com/shepherdjerred/astro-opengraph-images/tree/main/examples).
212
+
213
+ ### Sites Using This
214
+
215
+ If you're using this project, [open a PR](https://github.com/shepherdjerred/astro-opengraph-images/compare) to add your site to this list.
216
+
217
+ * [sjer.red](https://sjer.red) ([source](https://github.com/shepherdjerred/sjer.red))
218
+
219
+ ## Filtering Pages
220
+
221
+ By default, this integration generates an Open Graph image for every page in your build output. Pass an optional `filter` callback to skip pages — for example, the 404 page, utility routes, or sections where images don't apply.
222
+
223
+ The callback receives the same `RenderFunctionInput` as your renderer (pathname, parsed DOM, Open Graph metadata). Return `true` to render the image, `false` to skip it. The callback may be synchronous or return a `Promise<boolean>`.
224
+
225
+ ```diff
226
+ import opengraphImages, { presets } from "astro-opengraph-images";
227
+
228
+ export default defineConfig({
229
+ integrations: [
230
+ opengraphImages({
231
+ options: { fonts: [/* ... */] },
232
+ render: presets.blackAndWhite,
233
+ + // Only generate images for blog posts
234
+ + filter: ({ pathname }) => pathname.startsWith("/blog/"),
235
+ }),
236
+ ],
237
+ });
238
+ ```
239
+
240
+ More examples:
241
+
242
+ ```typescript
243
+ // Exclude utility pages
244
+ filter: ({ pathname }) => !["/404/", "/"].includes(pathname);
245
+
246
+ // Filter on DOM content or async data
247
+ filter: async ({ document, pathname }) =>
248
+ document.querySelector('meta[property="og:image"]') !== null &&
249
+ pathname.startsWith("/blog/");
250
+ ```
251
+
252
+ When `verbose: true` is set on `options`, skipped pages are logged.
253
+
254
+ ## Custom Renderers
255
+
256
+ 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.
257
+
258
+ Renderers have access to the page's DOM using [jsdom](https://github.com/jsdom/jsdom). You can use this to render your Open Graph image using any of the content from the associated HTML page. An example of this is shown in the [custom property preset](https://github.com/shepherdjerred/astro-opengraph-images/blob/main/src/presets/customProperty.tsx) which shows a preview of the page's body text in the Open Graph image.
259
+
260
+ 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).
261
+
262
+ > [!TIP]
263
+ > Satori supports [a subset of CSS](https://github.com/vercel/satori?tab=readme-ov-file#css). Be sure to familiarize yourself with its limitations.
264
+ >
265
+ > You can use the [Satori playground](https://og-playground.vercel.app/) to work on your images.
266
+ >
267
+ > You can use Tailwind syntax with [tw-to-css](https://github.com/vinicoder/tw-to-css). An example is the [Tailwind preset](https://github.com/shepherdjerred/astro-opengraph-images/blob/main/src/presets/tailwind.tsx). You'll need to install this package yourself.
268
+
269
+ ## Presets
270
+
271
+ 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.
272
+
273
+ Note: some presets use the [`tw-to-css`](https://github.com/vinicoder/tw-to-css) library. You'll need to install this dependency separately when using one of these presets. You'll see an error if the library is not already installed.
274
+
275
+ ```bash
276
+ npm i tw-to-css
277
+ ```
278
+
279
+ {{ range $preset := (ds "presets") -}}
280
+ ### `{{ strings.ReplaceAll ".png" "" $preset }}`
281
+
282
+ ```diff
283
+ import opengraphImages, { presets } from "astro-opengraph-images";
284
+
285
+ export default defineConfig({
286
+ integrations: [
287
+ opengraphImages({
288
+ + render: presets.{{ strings.ReplaceAll ".png" "" $preset }},
289
+ }),
290
+ ],
291
+ });
292
+ ```
293
+
294
+ ![](assets/presets/{{ $preset }})
295
+
296
+ {{ end }}
297
+
298
+ ## Alternatives
299
+
300
+ Here are some similar libraries using Satori and Astro. I haven't done a feature comparison.
301
+
302
+ - https://github.com/florian-lefebvre/satori-astro (This library looks excellent)
303
+ - https://github.com/delucis/astro-og-canvas (Doesn't allow arbitrary layouts)
304
+ - https://github.com/thewebforge/astro-og-images (Only allows you to choose from a list of templates)
305
+ - https://github.com/tomaskebrle/astro-og-image (Seems limited)
306
+ - https://github.com/cijiugechu/astro-satori (Possibly dead, hasn't been updated in a year)
307
+ - https://github.com/kevinzunigacuellar/astro-satori (Possibly dead, hasn't been updated in a year)
308
+ - https://github.com/rumaan/astro-vercel-og (Possibly dead, hasn't been updated in a year)
package/package.json CHANGED
@@ -17,7 +17,7 @@
17
17
  "url": "https://github.com/shepherdjerred/monorepo/issues"
18
18
  },
19
19
  "type": "module",
20
- "version": "1.16.1-dev.2362",
20
+ "version": "1.16.1-dev.2389",
21
21
  "imports": {
22
22
  "#src/*": "./src/*"
23
23
  },