Skip to content

Commit

Permalink
feat: pass instance as parameter
Browse files Browse the repository at this point in the history 
Fixes #252

BREAKING CHANGE: outputFileSlug and shortcodeOutput options get OgImage instance as parameter instead of this
  • Loading branch information
@KiwiKilian
KiwiKilian committed Jun 6, 2024
1 parent 427fa10 commit b04eaf6
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 32 deletions.
36 changes: 16 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,23 +87,19 @@ For applied usage see the [example](./example).

The following options can be passed when adding the plugin:

| Property | Type | Default | |
| --------------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `inputFileGlob` | `glob` | `**/*.og.*` | This must match the OG-image-templates to prevent HTML compilation. |
| `hashLength` | `number` | `8` | |
| `outputFileExtension` | [sharp output file formats](https://sharp.pixelplumbing.com/api-output#toformat) | `png` | |
| `outputDir` | `string` | `og-images` | Directory into which OG images will be emitted. Relative to your eleventy `output`. |
| `previewDir` | `string` | `${outputDir}/preview` | Directory used for preview during `watch` or `serve`. Relative to your eleventy `output`. |
| `urlPath` | `string` | `${outputDir}` | URL-prefix which will be used in returned meta-tags. |
| `outputFileSlug` | `function` | [See source](src/utils/mergeOptions.js) | Generation of the output file slug, must be url safe and exclude the file extension. Use `this` to access og image instance. |
| `shortcodeOutput` | `function` | [See source](src/utils/mergeOptions.js) | Change the HTML returned by the shortcode in pages. Use `this` to access og image instance. |
| `satoriOptions` | [satori options](https://github.com/search?q=repo:vercel/satori+%22export+type+SatoriOptions%22&type=code) | `{ width: 1200, height: 630, fonts: [] }` | If an OG-image-template contains text, it's required to load a font ([example](#usage)). |
| `sharpOptions` | [sharp output options](https://sharp.pixelplumbing.com/api-output#toformat) | `undefined` | Options must be corresponding to chosen `outputFileExtension`. |
| `OgImage` | `class CustomOgImage extends OgImage` | [`OgImage`](src/OgImage.js) | [Extend the `OgImage`](#extending-ogimage-class) class for maximum customization. |

> [!IMPORTANT]
> Both `outputFileSlug` and `shortcodeOutput` must be defined as a function and **NOT** as an arrow function.
> Otherwise `this` [will not be defined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#cannot_be_used_as_methods).
| Property | Type | Default | |
| --------------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------- |
| `inputFileGlob` | `glob` | `**/*.og.*` | This must match the OG-image-templates to prevent HTML compilation. |
| `hashLength` | `number` | `8` | |
| `outputFileExtension` | [sharp output file formats](https://sharp.pixelplumbing.com/api-output#toformat) | `png` | |
| `outputDir` | `string` | `og-images` | Directory into which OG images will be emitted. Relative to your eleventy `output`. |
| `previewDir` | `string` | `${outputDir}/preview` | Directory used for preview during `watch` or `serve`. Relative to your eleventy `output`. |
| `urlPath` | `string` | `${outputDir}` | URL-prefix which will be used in returned meta-tags. |
| `outputFileSlug` | `function` | [See source](src/utils/mergeOptions.js) | Generation of the output file slug, must be url safe and exclude the file extension. |
| `shortcodeOutput` | `function` | [See source](src/utils/mergeOptions.js) | Change the HTML returned by the shortcode in pages. |
| `satoriOptions` | [satori options](https://github.com/search?q=repo:vercel/satori+%22export+type+SatoriOptions%22&type=code) | `{ width: 1200, height: 630, fonts: [] }` | If an OG-image-template contains text, it's required to load a font ([example](#usage)). |
| `sharpOptions` | [sharp output options](https://sharp.pixelplumbing.com/api-output#toformat) | `undefined` | Options must be corresponding to chosen `outputFileExtension`. |
| `OgImage` | `class CustomOgImage extends OgImage` | [`OgImage`](src/OgImage.js) | [Extend the `OgImage`](#extending-ogimage-class) class for maximum customization. |

```diff
- outputFileSlug: async () => {},
Expand All @@ -124,7 +120,7 @@ For better performance OG images are cached based on a hash from generated HTML

### Extending OgImage Class

You can extend and overwrite any of the functions from the [`OgImage`](src/OgImage.js) class. Than you can pass your custom class as the `OgImage` parameter to the plugin.
You can extend and overwrite any of the functions from the [`OgImage`](src/OgImage.js) class. Then you can pass your custom class as the `OgImage` parameter to the plugin.

```js
import EleventyPluginOgImage from 'eleventy-plugin-og-image';
Expand Down Expand Up @@ -160,8 +156,8 @@ If you don't want to directly generate HTML with the shortcode, you can modify t

```js
eleventyConfig.addPlugin(EleventyPluginOgImage, {
async shortcodeOutput() {
return this.outputUrl();
async shortcodeOutput(ogImage) {
return ogImage.outputUrl();
},
});
```
Expand Down
4 changes: 2 additions & 2 deletions index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ type EleventyPluginOgImageOptions = {
previewDir?: string;
urlPath?: string;

outputFileSlug?(this: OgImage): Promise<string>;
shortcodeOutput?(this: OgImage): Promise<string>;
outputFileSlug?(ogImage: OgImage): Promise<string>;
shortcodeOutput?(ogImage: OgImage): Promise<string>;

OgImage?: typeof OgImage;

Expand Down
4 changes: 2 additions & 2 deletions src/OgImage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export class OgImage {

/** @returns {Promise<string>} */
async outputFileSlug() {
return this.options.outputFileSlug.bind(this)();
return this.options.outputFileSlug(this);
}

/** @returns {Promise<string>} */
Expand Down Expand Up @@ -133,7 +133,7 @@ export class OgImage {

/** @returns {Promise<string>} */
async shortcodeOutput() {
return this.options.shortcodeOutput.bind(this)();
return this.options.shortcodeOutput(this);
}

/** @returns {string} */
Expand Down
12 changes: 4 additions & 8 deletions src/utils/mergeOptions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,11 @@ export function mergeOptions({ directoriesConfig, pluginOptions }) {
previewDir: path.join(...(previewDir ? [eleventyOutput, previewDir] : [joinedOutputDir, 'preview'])),
urlPath: urlPath || outputDir || 'og-images',

/** @this {OgImage} */
outputFileSlug() {
return this.hash();
},
/** @param {OgImage} ogImage */
outputFileSlug: (ogImage) => ogImage.hash(),

/** @this {OgImage} */
async shortcodeOutput() {
return `<meta property="og:image" content="${await this.outputUrl()}" />`;
},
/** @param {OgImage} ogImage */
shortcodeOutput: async (ogImage) => `<meta property="og:image" content="${await ogImage.outputUrl()}" />`,

...options,

Expand Down

0 comments on commit b04eaf6

Please sign in to comment.