feat: add previewHtml

KiwiKilian · Apr 28, 2024 · 7406914 · 7406914
1 parent fad2edc
commit 7406914
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -120,6 +120,7 @@ export default async function (eleventyConfig, pluginOptions) {
         } catch {}
 
         await fs.copyFile(outputFilePath, previewFilePath);
+        await fs.writeFile(`${previewFilePath}.html`, await ogImage.previewHtml());
       }
 
       return ogImage.generateHTML();

diff --git a/README.md b/README.md
@@ -93,7 +93,7 @@ The following options can be passed when adding the plugin:
 | `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` and `serve`. 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.                                                                         |
 | `getOutputFileSlug`   | `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. |
 | `generateHTML`        | `function`                                                                                                 | [See source](src/utils/mergeOptions.js)   | Change the rendered HTML in pages. Use `this` to access og image instance.                                                   |
@@ -112,9 +112,9 @@ The following options can be passed when adding the plugin:
 + async generateHTML() {},
 ```
 
-## Development Mode
+## Preview Mode during Development
 
-During development the OG image files are also copied into the `previewDir`, named by the url slug of the pages they are generated from. The `previewDir` will be deleted during a production build.
+During development with `watch` or `serve` the OG image files are also copied into the `previewDir`, named by the url slug of the pages they are generated from. Next to it there is a HTML placed which shows the generated HTML, SVG and output image. The `previewDir` will be deleted during a production build.
 
 ## Caching
 

diff --git a/src/OgImage.js b/src/OgImage.js
@@ -145,4 +145,37 @@ export class OgImage {
       ),
     );
   }
+
+  /** @returns {Promise<string>} */
+  async previewHtml() {
+    return `<html>
+<head>
+  <title>OG Image: ${this.data.page.url}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <style>
+    * {
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+      position: relative;
+    }
+
+    #eleventy-plugin-og-image-html {
+      width: ${this.options.satoriOptions.width}px;
+      height: ${this.options.satoriOptions.height}px;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+<div id="eleventy-plugin-og-image-html">${await this.html()}</div>
+${await this.svg()}
+<img
+  width="${this.options.satoriOptions.width}"
+  height="${this.options.satoriOptions.height}"
+  src="${await this.outputURL()}"/>
+</body>
+</html>
+`;
+  }
 }