feat: generate open graph images

2026-03-10 08:51:24 +00:00 · 2022-03-25 21:07:54 +01:00
parent 1d75d0b62f
commit bf8764583d
27 changed files with 470 additions and 40 deletions
--- a/config/rocket.config.js
+++ b/config/rocket.config.js
@@ -54,5 +54,5 @@ export default {
  // serviceWorkerName: 'sw.js',
  // pathPrefix: '/_site/',

-  // emptyOutputDir: false,
+  // clearOutputDir: false,
 };
--- a/package.json
+++ b/package.json
@@ -124,6 +124,10 @@
      "pre-commit": "lint-staged"
    }
  },
+  "imports": {
+    "#pageTree": "./site/pages/__shared/pageTree.js",
+    "#assets/*": "./site/src/assets/*"
+  },
  "lint-staged": {
    "*.js": [
      "eslint --fix",
@@ -140,8 +144,5 @@
    "packages/*",
    "examples/*",
    "presets/*"
-  ],
-  "imports": {
-    "#pageTree": "./site/pages/__shared/pageTree.js"
-  }
+  ]
 }
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -30,7 +30,7 @@
    "rocket:build": "node src/cli.js build -c demo",
    "rocket:start": "node src/cli.js start -c demo",
    "start": "npm run rocket:start",
-    "test": "mocha --require ../../scripts/testMochaGlobalHooks.js test-node/**/*.test.{js,cjs} test-node/*.test.{js,cjs}",
+    "test": "mocha --require ../../scripts/testMochaGlobalHooks.js test-node/**/*.test.{js,cjs} test-node/*.test.{js,cjs} --timeout 5000",
    "test:watch": "onchange 'src/**/*.{js,cjs}' 'test-node/**/*.{js,cjs}' -- npm test",
    "types:copy": "copyfiles \"./types/**/*.d.ts\" dist-types/",
    "xtest:watch": "mocha test/**/*.test.js --parallel --watch"
@@ -60,6 +60,7 @@
    "commander": "^9.0.0",
    "fs-extra": "^9.0.1",
    "gray-matter": "^4.0.3",
+    "playwright": "^1.15.0",
    "plugins-manager": "^0.3.0"
  },
  "devDependencies": {
--- a/packages/cli/src/RocketBuild.js
+++ b/packages/cli/src/RocketBuild.js
@@ -2,6 +2,9 @@
 // @ts-nocheck

 import { Engine } from '@rocket/engine/server';
+import { gatherFiles } from '@rocket/engine';
+
+import { fromRollup } from '@web/dev-server-rollup';

 import { rollup } from 'rollup';
 import path from 'path';
@@ -10,7 +13,9 @@ import { rollupPluginHTML } from '@web/rollup-plugin-html';
 import { createMpaConfig, createServiceWorkerConfig } from '@rocket/building-rollup';
 import { adjustPluginOptions } from 'plugins-manager';
 import { existsSync } from 'fs';
-import { readFile, writeFile } from 'fs/promises';
+import { readFile, unlink, writeFile } from 'fs/promises';
+
+import { chromium } from 'playwright';

 /**
 * @param {object} config
@@ -88,9 +93,14 @@ export class RocketBuild {
      outputDir: this.cli.options.outputDevDir,
      setupPlugins: this.cli.options.setupEnginePlugins,
      renderMode: 'production',
+      clearOutputDir: this.cli.options.clearOutputDir,
    });
    await this.engine.build({ autoStop: this.cli.options.buildAutoStop });

+    if (this.cli.options.buildOpenGraphImages) {
+      await this.buildOpenGraphImages();
+    }
+
    if (this.cli.options.buildOptimize) {
      await productionBuild(this.cli.options);
      await this.engine.copyPublicFilesTo(this.cli.options.outputDir);
@@ -109,4 +119,85 @@ export class RocketBuild {
      await writeFile(notFoundHtmlFilePath, notFoundHtml);
    }
  }
+
+  async buildOpenGraphImages() {
+    const openGraphFiles = await gatherFiles(this.cli.options.outputDevDir, {
+      fileEndings: ['.opengraph.html'],
+    });
+    if (openGraphFiles.length === 0) {
+      return;
+    }
+
+    // TODO: enable URL support in the Engine and remove this "workaround"
+    if (
+      typeof this.cli.options.inputDir !== 'string' ||
+      typeof this.cli.options.outputDevDir !== 'string'
+    ) {
+      return;
+    }
+
+    const withWrap = this.cli.options.setupDevServerAndBuildPlugins
+      ? this.cli.options.setupDevServerAndBuildPlugins.map(modFunction => {
+          modFunction.wrapPlugin = fromRollup;
+          return modFunction;
+        })
+      : [];
+
+    this.engine = new Engine();
+    this.engine.setOptions({
+      docsDir: this.cli.options.inputDir,
+      outputDir: this.cli.options.outputDevDir,
+      setupPlugins: this.cli.options.setupEnginePlugins,
+      open: false,
+      clearOutputDir: false,
+      adjustDevServerOptions: this.cli.options.adjustDevServerOptions,
+      setupDevServerMiddleware: this.cli.options.setupDevServerMiddleware,
+      setupDevServerPlugins: [...this.cli.options.setupDevServerPlugins, ...withWrap],
+    });
+    try {
+      await this.engine.start();
+
+      const browser = await chromium.launch();
+      // In 2022 Twitter & Facebook recommend a size of 1200x628 - we capture with 2 dpr for retina displays
+      const context = await browser.newContext({
+        viewport: { width: 1200, height: 628 },
+        deviceScaleFactor: 2,
+      });
+      const page = await context.newPage();
+
+      for (const openGraphFile of openGraphFiles) {
+        const relUrl = path.relative(this.cli.options.outputDevDir, openGraphFile);
+        const imagePath = openGraphFile.replace('.opengraph.html', '.opengraph.png');
+        const htmlPath = openGraphFile.replace('.opengraph.html', '.html');
+        const relImageUrl = path.basename(imagePath);
+
+        let htmlString = await readFile(htmlPath, 'utf8');
+        if (!htmlString.includes('<meta property="og:image"')) {
+          if (htmlString.includes('</head>')) {
+            htmlString = htmlString.replace(
+              '</head>',
+              [
+                '    <meta property="og:image:width" content="2400">',
+                '    <meta property="og:image:height" content="1256">',
+                `    <meta property="og:image" content="./${relImageUrl}">`,
+                '  </head>',
+              ].join('\n'),
+            );
+          }
+        }
+        const url = `http://localhost:${this.engine.devServer.config.port}/${relUrl}`;
+        await page.goto(url);
+        await page.screenshot({ path: imagePath });
+
+        await unlink(openGraphFile);
+        await writeFile(htmlPath, htmlString);
+      }
+      await browser.close();
+
+      await this.engine.stop();
+    } catch (e) {
+      console.log('Could not start dev server to generate open graph images');
+      console.error(e);
+    }
+  }
 }
--- a/packages/cli/src/RocketCli.js
+++ b/packages/cli/src/RocketCli.js
@@ -40,13 +40,14 @@ export class RocketCli {
    serviceWorkerName: 'service-worker.js',
    buildOptimize: true,
    buildAutoStop: true,
+    buildOpenGraphImages: true,

    adjustBuildOptions: options => options,
    adjustDevServerOptions: options => options,

    configFile: '',
    absoluteBaseUrl: '',
-    emptyOutputDir: true,
+    clearOutputDir: true,

    // /** @type {{[key: string]: ImagePreset}} */
    // imagePresets: {
--- a/packages/cli/src/RocketStart.js
+++ b/packages/cli/src/RocketStart.js
@@ -52,6 +52,7 @@ export class RocketStart {
      outputDir: this.cli.options.outputDir,
      setupPlugins: this.cli.options.setupEnginePlugins,
      open: this.cli.options.open,
+      clearOutputDir: this.cli.options.clearOutputDir,
      adjustDevServerOptions: this.cli.options.adjustDevServerOptions,
      setupDevServerMiddleware: this.cli.options.setupDevServerMiddleware,
      setupDevServerPlugins: [...this.cli.options.setupDevServerPlugins, ...withWrap],
--- a/packages/cli/test-node/04-open-graph.test.js
+++ b/packages/cli/test-node/04-open-graph.test.js
@@ -0,0 +1,116 @@
+import chai from 'chai';
+import { setupTestCli } from './test-helpers.js';
+
+const { expect } = chai;
+
+describe('Open Graph', () => {
+  it('generates the image and adds the meta tags', async () => {
+    const { build, readOutput, outputExists } = await setupTestCli(
+      'fixtures/04-open-graph/01-generate-image-and-inject-meta',
+      undefined,
+      {
+        buildOptimize: true,
+      },
+    );
+    await build();
+
+    expect(readOutput('index.html', { replaceImageHashes: true })).to.equal(
+      [
+        '<!DOCTYPE html>',
+        '<html lang="en">',
+        '  <head>',
+        '    <meta charset="utf-8" />',
+        '    <meta property="og:image:width" content="2400" />',
+        '    <meta property="og:image:height" content="1256" />',
+        '    <meta property="og:image" content="http://my-site.com/__HASH__.png" />',
+        '  </head>',
+        '  <body>',
+        '    <h1>Hello World!</h1>',
+        '  </body>',
+        '</html>',
+      ].join('\n'),
+    );
+
+    expect(outputExists('./index.opengraph.html')).to.be.false;
+  });
+
+  it('handles multiple pages', async () => {
+    const { build, readOutput } = await setupTestCli(
+      'fixtures/04-open-graph/02-multiple-pages',
+      undefined,
+      {
+        buildOptimize: true,
+      },
+    );
+    await build();
+
+    expect(readOutput('index.html', { replaceImageHashes: true })).to.equal(
+      [
+        '<!DOCTYPE html>',
+        '<html lang="en">',
+        '  <head>',
+        '    <meta charset="utf-8" />',
+        '    <meta property="og:image:width" content="2400" />',
+        '    <meta property="og:image:height" content="1256" />',
+        '    <meta property="og:image" content="http://my-site.com/__HASH__.png" />',
+        '  </head>',
+        '  <body>',
+        '    <h1>Hello World!</h1>',
+        '  </body>',
+        '</html>',
+      ].join('\n'),
+    );
+
+    expect(readOutput('components/index.html', { replaceImageHashes: true })).to.equal(
+      [
+        '<!DOCTYPE html>',
+        '<html lang="en">',
+        '  <head>',
+        '    <meta charset="utf-8" />',
+        '    <meta property="og:image:width" content="2400" />',
+        '    <meta property="og:image:height" content="1256" />',
+        '    <meta property="og:image" content="http://my-site.com/__HASH__.png" />',
+        '  </head>',
+        '  <body>',
+        '    <h1>Components</h1>',
+        '  </body>',
+        '</html>',
+      ].join('\n'),
+    );
+
+    expect(readOutput('components/accordion/index.html', { replaceImageHashes: true })).to.equal(
+      [
+        '<!DOCTYPE html>',
+        '<html lang="en">',
+        '  <head>',
+        '    <meta charset="utf-8" />',
+        '    <meta property="og:image:width" content="2400" />',
+        '    <meta property="og:image:height" content="1256" />',
+        '    <meta property="og:image" content="http://my-site.com/__HASH__.png" />',
+        '  </head>',
+        '  <body>',
+        '    <h1>Accordion</h1>',
+        '  </body>',
+        '</html>',
+      ].join('\n'),
+    );
+
+    // This image is "wrong" as it does not output the page title as the page is not added to the page tree
+    expect(readOutput('components/special.html', { replaceImageHashes: true })).to.equal(
+      [
+        '<!DOCTYPE html>',
+        '<html lang="en">',
+        '  <head>',
+        '    <meta charset="utf-8" />',
+        '    <meta property="og:image:width" content="2400" />',
+        '    <meta property="og:image:height" content="1256" />',
+        '    <meta property="og:image" content="http://my-site.com/__HASH__.png" />',
+        '  </head>',
+        '  <body>',
+        '    <h1>Special</h1>',
+        '  </body>',
+        '</html>',
+      ].join('\n'),
+    );
+  });
+});
--- a/packages/cli/test-node/fixtures/04-open-graph/01-generate-image-and-inject-meta/config/rocket.config.js
+++ b/packages/cli/test-node/fixtures/04-open-graph/01-generate-image-and-inject-meta/config/rocket.config.js
@@ -0,0 +1,3 @@
+export default /** @type {import('../../../../../types/main').RocketCliOptions} */ ({
+  absoluteBaseUrl: 'http://my-site.com',
+});
--- a/packages/cli/test-node/fixtures/04-open-graph/01-generate-image-and-inject-meta/site/pages/index.rocket.js
+++ b/packages/cli/test-node/fixtures/04-open-graph/01-generate-image-and-inject-meta/site/pages/index.rocket.js
@@ -0,0 +1,7 @@
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = 'index.rocket.js';
+import { layout, openGraphLayout, html } from './local.data.js';
+export { layout, openGraphLayout, html };
+/* END - Rocket auto generated - do not touch */
+
+export default () => html`<h1>Hello World!</h1>`;
--- a/packages/cli/test-node/fixtures/04-open-graph/01-generate-image-and-inject-meta/site/pages/local.data.js
+++ b/packages/cli/test-node/fixtures/04-open-graph/01-generate-image-and-inject-meta/site/pages/local.data.js
@@ -0,0 +1,32 @@
+import { PageTree } from '@rocket/engine';
+import { html } from 'lit';
+
+export const layout = data => html`
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8" />
+    </head>
+    <body>
+      ${data.content()}
+    </body>
+  </html>
+`;
+
+const pageTree = new PageTree();
+await pageTree.restore(new URL('./pageTreeData.rocketGenerated.json', import.meta.url));
+
+export const openGraphLayout = data => html`
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8" />
+    </head>
+    <body>
+      <h1>${pageTree.getPage(data.sourceRelativeFilePath)?.model?.name}</h1>
+      <footer>Generated by <a href="https://next.rocket.modern-web.dev/">Rocket</a></footer>
+    </body>
+  </html>
+`;
+
+export { html };
--- a/packages/cli/test-node/fixtures/04-open-graph/01-generate-image-and-inject-meta/site/pages/pageTreeData.rocketGenerated.json
+++ b/packages/cli/test-node/fixtures/04-open-graph/01-generate-image-and-inject-meta/site/pages/pageTreeData.rocketGenerated.json
@@ -0,0 +1,9 @@
+{
+  "h1": "Hello World!",
+  "name": "Hello World!",
+  "menuLinkText": "Hello World!",
+  "url": "/",
+  "outputRelativeFilePath": "index.html",
+  "sourceRelativeFilePath": "index.rocket.js",
+  "level": 0
+}
--- a/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/config/rocket.config.js
+++ b/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/config/rocket.config.js
@@ -0,0 +1,3 @@
+export default /** @type {import('../../../../../types/main').RocketCliOptions} */ ({
+  absoluteBaseUrl: 'http://my-site.com',
+});
--- a/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/site/pages/components/accordion.rocket.js
+++ b/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/site/pages/components/accordion.rocket.js
@@ -0,0 +1,7 @@
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = 'components/accordion.rocket.js';
+import { layout, openGraphLayout, html } from '../recursive.data.js';
+export { layout, openGraphLayout, html };
+/* END - Rocket auto generated - do not touch */
+
+export default () => html`<h1>Accordion</h1>`;
--- a/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/site/pages/components/index.rocket.js
+++ b/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/site/pages/components/index.rocket.js
@@ -0,0 +1,7 @@
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = 'components/index.rocket.js';
+import { layout, openGraphLayout, html } from '../recursive.data.js';
+export { layout, openGraphLayout, html };
+/* END - Rocket auto generated - do not touch */
+
+export default () => html`<h1>Components</h1>`;
--- a/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/site/pages/components/special.html.rocket.js
+++ b/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/site/pages/components/special.html.rocket.js
@@ -0,0 +1,7 @@
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = 'components/special.html.rocket.js';
+import { layout, openGraphLayout, html } from '../recursive.data.js';
+export { layout, openGraphLayout, html };
+/* END - Rocket auto generated - do not touch */
+
+export default () => html`<h1>Special</h1>`;
--- a/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/site/pages/index.rocket.js
+++ b/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/site/pages/index.rocket.js
@@ -0,0 +1,7 @@
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = 'index.rocket.js';
+import { layout, openGraphLayout, html } from './recursive.data.js';
+export { layout, openGraphLayout, html };
+/* END - Rocket auto generated - do not touch */
+
+export default () => html`<h1>Hello World!</h1>`;
--- a/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/site/pages/pageTreeData.rocketGenerated.json
+++ b/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/site/pages/pageTreeData.rocketGenerated.json
@@ -0,0 +1,31 @@
+{
+  "h1": "Hello World!",
+  "name": "Hello World!",
+  "menuLinkText": "Hello World!",
+  "url": "/",
+  "outputRelativeFilePath": "index.html",
+  "sourceRelativeFilePath": "index.rocket.js",
+  "level": 0,
+  "children": [
+    {
+      "h1": "Components",
+      "name": "Components",
+      "menuLinkText": "Components",
+      "url": "/components/",
+      "outputRelativeFilePath": "components/index.html",
+      "sourceRelativeFilePath": "components/index.rocket.js",
+      "level": 1,
+      "children": [
+        {
+          "h1": "Accordion",
+          "name": "Accordion",
+          "menuLinkText": "Accordion",
+          "url": "/components/accordion/",
+          "outputRelativeFilePath": "components/accordion/index.html",
+          "sourceRelativeFilePath": "components/accordion.rocket.js",
+          "level": 2
+        }
+      ]
+    }
+  ]
+}
--- a/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/site/pages/recursive.data.js
+++ b/packages/cli/test-node/fixtures/04-open-graph/02-multiple-pages/site/pages/recursive.data.js
@@ -0,0 +1,32 @@
+import { PageTree } from '@rocket/engine';
+import { html } from 'lit';
+
+export const layout = data => html`
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8" />
+    </head>
+    <body>
+      ${data.content()}
+    </body>
+  </html>
+`;
+
+const pageTree = new PageTree();
+await pageTree.restore(new URL('./pageTreeData.rocketGenerated.json', import.meta.url));
+
+export const openGraphLayout = data => html`
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8" />
+    </head>
+    <body>
+      <h1>${pageTree.getPage(data.sourceRelativeFilePath)?.model?.name}</h1>
+      <footer>Generated by <a href="https://next.rocket.modern-web.dev/">Rocket</a></footer>
+    </body>
+  </html>
+`;
+
+export { html };
--- a/packages/cli/test-node/test-helpers.js
+++ b/packages/cli/test-node/test-helpers.js
@@ -113,7 +113,10 @@ export async function setupTestCli(cwd, cliOptions = ['build'], options = {}) {
  }
  cli.setOptions(useOptions);

-  function readOutput(toInspect, { format = 'auto', cleanupLitMarkers = true } = {}) {
+  function readOutput(
+    toInspect,
+    { format = 'auto', cleanupLitMarkers = true, replaceImageHashes = false } = {},
+  ) {
    const filePath = path.join(cli.options.outputDir, toInspect);
    if (!existsSync(filePath)) {
      throw new Error(`Rendering to ${toInspect} did not happen\nFull path: ${filePath}`);
@@ -122,6 +125,9 @@ export async function setupTestCli(cwd, cliOptions = ['build'], options = {}) {
    if (cleanupLitMarkers) {
      text = cleanupLitMarkersFn(text);
    }
+    if (replaceImageHashes) {
+      text = text.replace(/http:\/\/my-site.com\/([a-z0-9]+)/g, 'http://my-site.com/__HASH__');
+    }

    let useFormat = format === 'auto' ? toInspect.split('.').pop() : format;
    if (useFormat) {
--- a/packages/cli/types/main.d.ts
+++ b/packages/cli/types/main.d.ts
@@ -23,7 +23,7 @@ export interface FullRocketCliOptions extends Pick<RocketPreset, PresetKeys> {
  cwd: string;
  inputDir: URL | string;
  outputDir: URL | string;
-  emptyOutputDir: boolean;
+  clearOutputDir: boolean;
  absoluteBaseUrl: string;
  watch: boolean;
  open: boolean;
@@ -38,6 +38,7 @@ export interface FullRocketCliOptions extends Pick<RocketPreset, PresetKeys> {
  plugins: RocketCliPlugin[];

  buildOptimize: boolean;
+  buildOpenGraphImages: boolean;
  buildAutoStop: boolean;

  // rarely used
--- a/packages/components/src/CardIcon.js
+++ b/packages/components/src/CardIcon.js
@@ -34,7 +34,7 @@ export class CardIcon extends LitElement {
    }

    .icon {
-      width: 40px;
+      width: 53%;
    }

    :host([variation='green']) {
--- a/packages/engine/src/Engine.js
+++ b/packages/engine/src/Engine.js
@@ -39,6 +39,7 @@ export class Engine {
    setupPlugins: [],
    renderMode: 'development',
    open: false,
+    clearOutputDir: true,
  };

  events = new EventEmitter();
@@ -110,7 +111,7 @@ export class Engine {
    await rm(this.outputDir, { recursive: true, force: true });
  }

-  async prepare({ clearOutputDir = true } = {}) {
+  async prepare({ clearOutputDir = this.options.clearOutputDir } = {}) {
    const defaultPlugins = this.options.defaultPlugins ? [...this.options.defaultPlugins] : [];
    this.options = applyPlugins(this.options, defaultPlugins);

--- a/packages/engine/src/file-header/urlPathConverter.js
+++ b/packages/engine/src/file-header/urlPathConverter.js
@@ -29,8 +29,11 @@ export async function urlToSourceFilePath(url, rootDir) {
    urlToFileMap.set(url, sourceFilePath);
  }

-  if (urlToFileMap.has(url)) {
-    return urlToFileMap.get(url);
+  let checkUrl = url.endsWith('.opengraph.html') ? url.replace('.opengraph.html', '.html') : url;
+  checkUrl = checkUrl.endsWith('index.html') ? checkUrl.replace('index.html', '') : checkUrl;
+
+  if (urlToFileMap.has(checkUrl)) {
+    return urlToFileMap.get(checkUrl);
  }

  // throw new Error(`Could not find source file for url: ${url}`);
--- a/packages/engine/src/index.js
+++ b/packages/engine/src/index.js
@@ -6,6 +6,8 @@ import '@lit-labs/ssr/lib/install-global-dom-shim.js';
 export { renderJoiningGroup } from './helpers/renderJoiningGroup.js';
 export { inlineFile } from './helpers/inlineFile.js';

+export { gatherFiles } from './gatherFiles.js';
+
 export { Layout } from './layouts/Layout.js';
 export { LayoutRaw } from './layouts/LayoutRaw.js';
 export { LayoutSitemap } from './layouts/LayoutSitemap.js';
--- a/packages/engine/src/worker/renderWorker.js
+++ b/packages/engine/src/worker/renderWorker.js
@@ -133,7 +133,22 @@ async function renderFile({ sourceFilePath, outputDir, inputDir, renderMode = 'd
          ? openGraphLayout.render(layoutData)
          : openGraphLayout(layoutData);
      const openGraphHtml = await litServerRender(openGraphTemplateResult);
-      await writeFile(layoutData.openGraphOutputFilePath, openGraphHtml);
+
+      let processedOpenGraphHtml = await transformFile(openGraphHtml, {
+        setupPlugins: data.setupEnginePlugins,
+        sourceFilePath,
+        outputFilePath: layoutData.openGraphOutputFilePath,
+        sourceRelativeFilePath,
+        outputRelativeFilePath: layoutData.openGraphOutputRelativeFilePath,
+        url: layoutData.openGraphUrl,
+      });
+
+      processedOpenGraphHtml = processedOpenGraphHtml.trim();
+      // remove leading/ending lit markers as with them web dev server falsy thinks this page is a HTML fragment and will not inject websockets
+      processedOpenGraphHtml = processedOpenGraphHtml.replace(/^<!--lit-part.*?-->/gm, '');
+      processedOpenGraphHtml = processedOpenGraphHtml.replace(/<!--\/lit-part-->$/gm, '');
+
+      await writeFile(layoutData.openGraphOutputFilePath, processedOpenGraphHtml);
    }
  } catch (error) {
    const typed = /** @type {Error} */ (error);
--- a/packages/engine/types/main.d.ts
+++ b/packages/engine/types/main.d.ts
@@ -7,6 +7,7 @@ export interface EngineOptions {
  outputDir: string;
  watchDir: string;
  open: boolean;
+  clearOutputDir: boolean;
  plugins: EnginePlugin[];
  defaultPlugins: MetaPluginOfEngine[];
  setupPlugins: MetaPluginOfEngine[];
--- a/yarn.lock
+++ b/yarn.lock
@@ -3417,6 +3417,11 @@ command-line-usage@^6.1.1:
    table-layout "^1.0.1"
    typical "^5.2.0"

+commander@8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
 commander@^2.20.0:
  version "2.20.3"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -3427,7 +3432,7 @@ commander@^4.1.1:
  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==

-commander@^6.1.0, commander@^6.2.0:
+commander@^6.2.0:
  version "6.2.1"
  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
@@ -4619,7 +4624,7 @@ graceful-fs@^4.2.2:
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==

-graceful-fs@^4.2.9:
+graceful-fs@^4.2.4, graceful-fs@^4.2.9:
  version "4.2.9"
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
@@ -5357,6 +5362,11 @@ jest-worker@^26.2.1:
    merge-stream "^2.0.0"
    supports-color "^7.0.0"

+jpeg-js@0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.3.tgz#6158e09f1983ad773813704be80680550eff977b"
+  integrity sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q==
+
 jpeg-js@^0.4.2:
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.2.tgz#8b345b1ae4abde64c2da2fe67ea216a114ac279d"
@@ -6369,6 +6379,11 @@ mime-types@^2.1.18, mime-types@^2.1.27, mime-types@~2.1.24:
  dependencies:
    mime-db "1.44.0"

+mime@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
+  integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
+
 mime@^2.4.6:
  version "2.4.7"
  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.7.tgz#962aed9be0ed19c91fd7dc2ece5d7f4e89a90d74"
@@ -6961,7 +6976,7 @@ pirates@^4.0.1:
  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==

-pixelmatch@^5.2.1:
+pixelmatch@5.2.1, pixelmatch@^5.2.1:
  version "5.2.1"
  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-5.2.1.tgz#9e4e4f4aa59648208a31310306a5bed5522b0d65"
  integrity sha512-WjcAdYSnKrrdDdqTcVEY7aB7UhhwjYQKYhHiBXdJef0MOaQeYpUdQ+iVyBLa5YBKS8MPVPPMX7rpOByISLpeEQ==
@@ -6989,6 +7004,30 @@ pkg-up@^3.1.0:
  dependencies:
    find-up "^3.0.0"

+playwright-core@1.20.1:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.20.1.tgz#2d892964dd3ddc93f6e185be4b59621f3a339d4c"
+  integrity sha512-A8ZsZ09gaSbxP0UijoLyzp3LJc0kWMxDooLPi+mm4/5iYnTbd6PF5nKjoFw1a7KwjZIEgdhJduah4BcUIh+IPA==
+  dependencies:
+    colors "1.4.0"
+    commander "8.3.0"
+    debug "4.3.3"
+    extract-zip "2.0.1"
+    https-proxy-agent "5.0.0"
+    jpeg-js "0.4.3"
+    mime "3.0.0"
+    pixelmatch "5.2.1"
+    pngjs "6.0.0"
+    progress "2.0.3"
+    proper-lockfile "4.1.2"
+    proxy-from-env "1.1.0"
+    rimraf "3.0.2"
+    socks-proxy-agent "6.1.1"
+    stack-utils "2.0.5"
+    ws "8.4.2"
+    yauzl "2.10.0"
+    yazl "2.5.1"
+
 playwright-core@=1.18.1:
  version "1.18.1"
  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.18.1.tgz#a5cf3f212d10692382e2acd1f7bc8c9ff9bbb849"
@@ -7011,25 +7050,12 @@ playwright-core@=1.18.1:
    yauzl "^2.10.0"
    yazl "^2.5.1"

-playwright@^1.14.0:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.15.2.tgz#b350056d1fffbe5de5b1bdaca6ab73e35758baad"
-  integrity sha512-+Z+7ckihyxR6rK5q8DWC6eUbKARfXpyxpjNcoJfgwSr64lAOzjhyFQiPC/JkdIqhsLgZjxpWfl1S7fLb+wPkgA==
+playwright@^1.14.0, playwright@^1.15.0:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.20.1.tgz#2796c7d4de10afd39d2ca741a754565291803d4d"
+  integrity sha512-d/25SFUk6Rkt3h+RU13T7h6o0UTCLKXKYJILWVlC+NmrE7Tvn3LlXxoREfFXVNFikRZWTV60WBCZKgNbj7RfrA==
  dependencies:
-    commander "^6.1.0"
-    debug "^4.1.1"
-    extract-zip "^2.0.1"
-    https-proxy-agent "^5.0.0"
-    jpeg-js "^0.4.2"
-    mime "^2.4.6"
-    pngjs "^5.0.0"
-    progress "^2.0.3"
-    proper-lockfile "^4.1.1"
-    proxy-from-env "^1.1.0"
-    rimraf "^3.0.2"
-    stack-utils "^2.0.3"
-    ws "^7.4.6"
-    yazl "^2.5.1"
+    playwright-core "1.20.1"

 please-upgrade-node@^3.2.0:
  version "3.2.0"
@@ -7038,6 +7064,11 @@ please-upgrade-node@^3.2.0:
  dependencies:
    semver-compare "^1.0.0"

+pngjs@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-6.0.0.tgz#ca9e5d2aa48db0228a52c419c3308e87720da821"
+  integrity sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==
+
 pngjs@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-4.0.1.tgz#f803869bb2fc1bfe1bf99aa4ec21c108117cfdbe"
@@ -7119,6 +7150,15 @@ prompts@^2.2.0:
    kleur "^3.0.3"
    sisteransi "^1.0.5"

+proper-lockfile@4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/proper-lockfile/-/proper-lockfile-4.1.2.tgz#c8b9de2af6b2f1601067f98e01ac66baa223141f"
+  integrity sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==
+  dependencies:
+    graceful-fs "^4.2.4"
+    retry "^0.12.0"
+    signal-exit "^3.0.2"
+
 proper-lockfile@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/proper-lockfile/-/proper-lockfile-4.1.1.tgz#284cf9db9e30a90e647afad69deb7cb06881262c"
@@ -7923,7 +7963,7 @@ smartwrap@^1.2.3:
    wcwidth "^1.0.1"
    yargs "^15.1.0"

-socks-proxy-agent@^6.1.0:
+socks-proxy-agent@6.1.1, socks-proxy-agent@^6.1.0:
  version "6.1.1"
  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-6.1.1.tgz#e664e8f1aaf4e1fb3df945f09e3d94f911137f87"
  integrity sha512-t8J0kG3csjA4g6FTbsMOWws+7R7vuRC8aQ/wy3/1OWmsgwA68zs/+cExQ0koSitUDXqhufF/YJr9wtNMZHw5Ew==
@@ -8039,7 +8079,7 @@ sshpk@^1.7.0:
    safer-buffer "^2.0.2"
    tweetnacl "~0.14.0"

-stack-utils@^2.0.3:
+stack-utils@2.0.5, stack-utils@^2.0.3:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
@@ -8954,6 +8994,11 @@ wrappy@1:
  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=

+ws@8.4.2:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.4.2.tgz#18e749868d8439f2268368829042894b6907aa0b"
+  integrity sha512-Kbk4Nxyq7/ZWqr/tarI9yIt/+iNNFOjBXEWgTb4ydaNHBNGgvf2QHbS9fdfsndfjFlFwEd4Al+mw83YkaD10ZA==
+
 ws@8.5.0:
  version "8.5.0"
  resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f"
@@ -9071,7 +9116,7 @@ yargs@^15.1.0:
    y18n "^4.0.0"
    yargs-parser "^18.1.2"

-yauzl@^2.10.0:
+yauzl@2.10.0, yauzl@^2.10.0:
  version "2.10.0"
  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
@@ -9079,7 +9124,7 @@ yauzl@^2.10.0:
    buffer-crc32 "~0.2.3"
    fd-slicer "~1.1.0"

-yazl@^2.5.1:
+yazl@2.5.1, yazl@^2.5.1:
  version "2.5.1"
  resolved "https://registry.yarnpkg.com/yazl/-/yazl-2.5.1.tgz#a3d65d3dd659a5b0937850e8609f22fffa2b5c35"
  integrity sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==