Version Packages

fix(cli): replace images to be responsive from the bottom up
chore: remove image hashes from tests
2026-03-21 08:51:18 +00:00 · 2021-06-21 16:25:40 +02:00 · 2021-06-21 16:20:48 +02:00 · 2021-06-21 15:56:41 +02:00 · 2021-06-21 14:37:07 +02:00 · 2021-06-21 14:35:51 +02:00
72 changed files with 1739 additions and 195 deletions
--- a/docs/docs/configuration/images.md
+++ b/docs/docs/configuration/images.md
@@ -0,0 +1,223 @@
+# Configuration >> Images ||40
+
+Rocket does handle content images automatically by
+
+- producing multiple sizes so users download images that are meant for their resolution
+- outputting multiple formats so the device can choose the best image format it supports
+
+And the best thing about is you don't need to do anything.
+
+## Usage
+
+If you are using markdown images you are good to go.
+
+```md
+![My Image](path/to/image.jpg)
+```
+
+will result in
+
+```html
+<picture>
+  <source
+    type="image/avif"
+    srcset="/images/5f03d82-300.avif 300w, /images/5f03d82-820.avif 820w"
+    sizes="(min-width: 1024px) 820px, calc(100vw - 20px)"
+  />
+  <source
+    type="image/jpeg"
+    srcset="/images/5f03d82-300.jpeg 300w, /images/5f03d82-820.jpeg 820w"
+    sizes="(min-width: 1024px) 820px, calc(100vw - 20px)"
+  />
+  <img
+    alt="My Image"
+    rocket-image="responsive"
+    src="/images/5f03d82-300.jpeg"
+    width="300"
+    height="158"
+    loading="lazy"
+    decoding="async"
+  />
+</picture>
+```
+
+## Benefits
+
+The main benefit is that we can serve the correct size and optimal image format depending on the browser capabilities leading to optimal loading times on different systems.
+
+- Smaller images for smaller screens
+
+  When providing `srcset` and `sizes` the browser can decide which image makes the most sense to download.
+  This will lead to much faster websites especially on mobile where smaller images can be served.
+  If you wanna know more check out [The anatomy of responsive images](https://jakearchibald.com/2015/anatomy-of-responsive-images/).
+
+- Serve the best/smallest image format the browser understands
+
+  There are currently ~3 formats you may want to consider `avif`, `webp` and `jpg`. The improvements are huge [webp is ~30% and avif ~50%](https://www.ctrl.blog/entry/webp-avif-comparison.html) smaller then the original jpg.
+
+## Adding a caption
+
+If you want to describe your image in more detail you can add a caption
+
+```md
+![My Image](path/to/image.jpg 'My caption text')
+```
+
+will result in
+
+```html
+<figure>
+  <picture>
+    <!-- picture code the same as above -->
+  </picture>
+  <figcaption>My caption text</figcaption>
+</figure>
+```
+
+## Adjusting options
+
+Under the hood it is using [11ty/image](https://www.11ty.dev/docs/plugins/image/) and all it's options are available.
+
+<inline-notification type="tip">
+
+If you are using a layout preset like `@rocket/launch` then you probably don't want to touch/change these options as the preset will set it for you accordion to its layout needs.
+
+The default preset for regular markdown content is available as `responsive`.
+
+</inline-notification>
+
+👉 `rocket.config.js`
+
+```js
+export default {
+  imagePresets: {
+    responsive: {
+      widths: [300, 820],
+      formats: ['avif', 'jpeg'],
+      sizes: '(min-width: 1024px) 820px, calc(100vw - 20px)',
+    },
+  },
+};
+```
+
+## Defining your own presets
+
+You can add your own image preset like so
+
+```js
+export default {
+  imagePresets: {
+    'my-image-preset': {
+      widths: [30, 60],
+      formats: ['avif', 'jpeg'],
+      sizes: '(min-width: 1024px) 30px, 60px',
+    },
+  },
+};
+```
+
+Once that `imagePreset` is defined you can use it by adding it to any `img` tag.
+
+```html
+<img src="./path/to/image.jpg" alt="my alt" rocket-image="my-image-preset" />
+```
+
+## How does it work?
+
+1. Each markdown image `![my image](path/to/image.jpg)` gets rendered as `<img src="path/to/image.jpg" alt="my image" rocket-image="responsive">`
+2. We parse the html output and process every image which has `rocket-image`
+3. Get the image preset settings from the name e.g. `rocket-image="my-image-preset"` reads `imagePreset['my-image-preset']`
+4. Pass the settings onto `@11ty/image` to generate the image sizes and formats
+5. With the metadata we render the html
+
+## Default Formats
+
+An [image file format](https://en.wikipedia.org/wiki/Image_file_formats) is a way of storing common image formats. Each format varies in capabilities like compression algorithm, availability, progressive rendering, encode and decode time, ...
+Ultimately newer formats are usually smaller while retaining image quality which leads to faster websites.
+
+By default, we generate `avif` and `jpg` because
+
+- we only want to generate two versions to limit CI time and html size
+- `avif` is significantly smaller than `webp`
+- `avif` is available in
+  - Chrome since August 2020
+  - Firefox since June 2021
+- `jpg` as a fallback for Edge, Safari, IE11
+- `webp` would only help a small percentage of Edge & Safari on macOS 11 (Big Sur) users
+
+This leads to the following situation:
+
+- Chrome, Firefox gets the small `avif`
+- Edge, Safari, IE11 gets the bigger `jpg`
+
+To learn more about `avif` take a look at [AVIF has landed](https://jakearchibald.com/2020/avif-has-landed/).
+
+If you want to add `webp` (or replace `avif` with it) you can do so by setting the formats
+
+👉 `rocket.config.js`
+
+```js
+export default {
+  imagePresets: {
+    responsive: {
+      formats: ['avif', 'webp', 'jpeg'],
+    },
+  },
+};
+```
+
+## Default widths
+
+In order to understand the need for having a single image in multiple resolutions we need to understand the our website is served to many different environments and each may come with its own specific device pixel ratio (DPR). The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the Galaxy S20 report a device pixel ratio of 3, because the physical linear resolution is triple the logical linear resolution.
+
+Physical resolution: 1440 x 3200
+Logical resolution: 480 x 1067
+
+And 1440 / 480 = 3.
+
+By default, we generate the following widths `600`, `900` and `1640` because
+
+- we only want to generate a small amount of widths to limit CI time and service worker cache size
+- `600` is good for mobile with DRP 2
+- `900` is good for mobile with DRP 3 and desktop with DPR of 1
+- `1640` is good for desktop with DPR of 2
+
+If you want to add more widths you can add them to `widths`.
+
+👉 `rocket.config.js`
+
+```js
+export default {
+  imagePresets: {
+    responsive: {
+      widths: [300, 600, 900, 1200, 1640],
+      sizes: '(min-width: 1024px) 820px, calc(100vw - 20px)',
+    },
+  },
+};
+```
+
+<inline-notification type="tip">
+
+As an end user in most cases you don't want to mess with this as a layout preset should set this for you. If you are building your own layout preset then be sure to set `widths` and `sizes` via `adjustImagePresets`
+
+```js
+export function myPreset() {
+  return {
+    adjustImagePresets: imagePresets => ({
+      ...imagePresets,
+      responsive: {
+        ...imagePresets.responsive,
+        widths: [600, 900, 1640],
+        sizes: '(min-width: 1024px) 820px, calc(100vw - 40px)',
+      },
+    }),
+  };
+}
+```
+
+</inline-notification>
+
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
+```
--- a/docs/docs/markdown-javascript/overview.md
+++ b/docs/docs/markdown-javascript/overview.md
@@ -1,5 +1,11 @@
 # Markdown JavaScript >> Overview || 10

+```js script
+import '@mdjs/mdjs-story/define';
+import '@mdjs/mdjs-preview/define';
+import { html } from '@mdjs/mdjs-story';
+```
+
 Markdown JavaScript (mdjs) is a format that allows you to use JavaScript with Markdown, to create interactive demos. It does so by "annotating" JavaScript that should be executed in Markdown.

 To annotate we use a code block with `js script`.
@@ -63,13 +69,6 @@ import '@mdjs/mdjs-preview/define';

 Once loaded you can use them like so:

-````md
-```js script
-import '@mdjs/mdjs-story/define';
-import '@mdjs/mdjs-preview/define';
-```
-````
-
 ### Story

 The code snippet will actually get executed at that place and you will have a live demo
@@ -117,12 +116,6 @@ export const JsPreviewStory = () => html` <demo-wc-card>JS Preview Story</demo-w

 Here is a live example from [demo-wc-card](https://www.npmjs.com/package/demo-wc-card).

-```js script
-import '@mdjs/mdjs-story/define';
-import '@mdjs/mdjs-preview/define';
-import { html } from 'lit-html';
-```
-
 ```js preview-story
 import 'demo-wc-card/demo-wc-card.js';
 export const header = () => {
--- a/docs/docs/markdown-javascript/preview.md
+++ b/docs/docs/markdown-javascript/preview.md
@@ -17,7 +17,7 @@ You can showcase live running code by annotating a code block with `js preview-s
 - Settings can be remembered for other pages / return visits

 ```js script
-import { html } from 'lit-html';
+import { html } from '@mdjs/mdjs-preview';
 import './assets/demo-element.js';
 ```

@@ -25,7 +25,7 @@ import './assets/demo-element.js';

 ````md
 ```js script
-import { html } from 'lit-html';
+import { html } from '@mdjs/mdjs-preview';
 import './assets/demo-element.js';
 ```

--- a/docs/docs/markdown-javascript/story.md
+++ b/docs/docs/markdown-javascript/story.md
@@ -3,12 +3,12 @@
 You can showcase live running code by annotating a code block with `js story`.

 ```js script
-import { html } from 'lit-html';
+import { html } from '@mdjs/mdjs-story';
 ```

 ````md
 ```js script
-import { html } from 'lit-html';
+import { html } from '@mdjs/mdjs-story';
 ```

 ```js story
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
  },
  "devDependencies": {
    "@changesets/cli": "^2.12.0",
-    "@open-wc/testing": "^2.5.32",
+    "@open-wc/testing": "^3.0.0-next.1",
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-typescript": "^8.1.0",
@@ -75,14 +75,14 @@
    "onchange": "^7.1.0",
    "prettier": "^2.2.1",
    "prettier-plugin-package": "^1.3.0",
-    "puppeteer": "^5.5.0",
+    "puppeteer": "^9.0.0",
    "remark-emoji": "^2.1.0",
    "rimraf": "^3.0.2",
    "rollup": "^2.36.1",
    "rollup-plugin-terser": "^7.0.2",
    "sinon": "^9.2.3",
    "ts-node": "^9.1.1",
-    "typescript": "^4.1.3"
+    "typescript": "^4.3.2"
  },
  "eslintConfig": {
    "parser": "@typescript-eslint/parser",
--- a/packages/blog/package.json
+++ b/packages/blog/package.json
@@ -38,6 +38,6 @@
    "testing"
  ],
  "dependencies": {
-    "plugins-manager": "^0.2.1"
+    "plugins-manager": "^0.2.2"
  }
 }
--- a/packages/building-rollup/CHANGELOG.md
+++ b/packages/building-rollup/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @rocket/building-rollup

+## 0.3.1
+
+### Patch Changes
+
+- 60e85a1: Support `picture` tags by handling `source` tags with `srcset` attributes in the rollup asset gathering build phase.
+
 ## 0.3.0

 ### Minor Changes
--- a/packages/building-rollup/package.json
+++ b/packages/building-rollup/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/building-rollup",
-  "version": "0.3.0",
+  "version": "0.3.1",
  "publishConfig": {
    "access": "public"
  },
@@ -56,7 +56,7 @@
    "@rollup/plugin-babel": "^5.2.2",
    "@rollup/plugin-node-resolve": "^11.0.1",
    "@rollup/plugin-replace": "^2.4.2",
-    "@web/rollup-plugin-html": "^1.6.0",
+    "@web/rollup-plugin-html": "^1.8.0",
    "@web/rollup-plugin-import-meta-assets": "^1.0.4",
    "@web/rollup-plugin-polyfills-loader": "^1.1.0",
    "browserslist": "^4.16.1",
--- a/packages/check-html-links/CHANGELOG.md
+++ b/packages/check-html-links/CHANGELOG.md
@@ -1,5 +1,31 @@
 # check-html-links

+## 0.2.3
+
+### Patch Changes
+
+- 5043429: Ignore `<a href="tel:9999">` links
+- f08f926: Add missing `slash` dependency
+- a0e8edf: Ignore links containing not http schema urls like `sketch://`, `vscode://`, ...
+
+  ```html
+  <a href="sketch://add-library?url=https%3A%2F%2Fmyexample.com%2Fdesign%2Fui-kit.xml"></a>
+  <a href="vscode://file/c:/myProject/package.json:5:10"></a>
+  ```
+
+- 1949b1e: Ignore plain and html encoded mailto links
+
+  ```html
+  <!-- source -->
+  <a href="mailto:address@example.com">contact</a>
+
+  <!-- html encoded -->
+  <a
+    href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#97;&#100;&#100;&#114;&#101;&#115;&#115;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;"
+    >contact</a
+  >
+  ```
+
 ## 0.2.2

 ### Patch Changes
--- a/packages/check-html-links/package.json
+++ b/packages/check-html-links/package.json
@@ -1,6 +1,6 @@
 {
  "name": "check-html-links",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "publishConfig": {
    "access": "public"
  },
@@ -37,7 +37,8 @@
    "command-line-args": "^5.1.1",
    "glob": "^7.0.0",
    "minimatch": "^3.0.4",
-    "sax-wasm": "^2.0.0"
+    "sax-wasm": "^2.0.0",
+    "slash": "^3.0.0"
  },
  "devDependencies": {
    "@types/glob": "^7.0.0"
--- a/packages/check-html-links/src/validateFolder.js
+++ b/packages/check-html-links/src/validateFolder.js
@@ -182,6 +182,18 @@ function getValueAndAnchor(inValue) {
  };
 }

+/**
+ * @param {string} url
+ * @returns {boolean}
+ */
+function isNonHttpSchema(url) {
+  const found = url.match(/([a-z]+):/);
+  if (found) {
+    return found.length > 0;
+  }
+  return false;
+}
+
 /**
 *
 * @param {Link[]} links
@@ -207,8 +219,13 @@ async function resolveLinks(links, { htmlFilePath, rootDir, ignoreUsage }) {

    if (ignoreUsage(value)) {
      // ignore
-    } else if (value.includes('mailto:')) {
+    } else if (
+      value.startsWith('mailto:') ||
+      value.startsWith('&#109;&#97;&#105;&#108;&#116;&#111;&#58;') // = "mailto:" but html encoded
+    ) {
      // ignore for now - could add a check to validate if the email address is valid
+    } else if (value.startsWith('tel:')) {
+      // ignore for now - could add a check to validate if the phone number is valid
    } else if (valueFile === '' && anchor !== '') {
      addLocalFile(htmlFilePath, anchor, usageObj);
    } else if (value.startsWith('//') || value.startsWith('http')) {
@@ -219,6 +236,8 @@ async function resolveLinks(links, { htmlFilePath, rootDir, ignoreUsage }) {
      addLocalFile(filePath, anchor, usageObj);
    } else if (value === '' && anchor === '') {
      // no need to check it
+    } else if (isNonHttpSchema(value)) {
+      // not a schema we handle
    } else {
      const filePath = path.join(path.dirname(htmlFilePath), valueFile);
      addLocalFile(filePath, anchor, usageObj);
--- a/packages/check-html-links/test-node/fixtures/mailto/index.html
+++ b/packages/check-html-links/test-node/fixtures/mailto/index.html
@@ -1 +1,3 @@
 <a href="mailto:foo@bar.com"></a>
+<!-- encoded mailto links -->
+<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#97;&#100;&#100;&#114;&#101;&#115;&#115;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;"></a>
--- a/packages/check-html-links/test-node/fixtures/not-http-schema/index.html
+++ b/packages/check-html-links/test-node/fixtures/not-http-schema/index.html
@@ -0,0 +1,2 @@
+<a href="sketch://add-library?url=https%3A%2F%2Fmyexample.com%2Fdesign%2Fui-kit.xml"></a>
+<a href="vscode://file/c:/myProject/package.json:5:10"></a>
--- a/packages/check-html-links/test-node/fixtures/tel/index.html
+++ b/packages/check-html-links/test-node/fixtures/tel/index.html
@@ -0,0 +1 @@
+<a href="tel:99999"></a>
--- a/packages/check-html-links/test-node/validateFolder.test.js
+++ b/packages/check-html-links/test-node/validateFolder.test.js
@@ -183,6 +183,16 @@ describe('validateFolder', () => {
    expect(cleanup(errors)).to.deep.equal([]);
  });

+  it('ignores tel links', async () => {
+    const { errors, cleanup } = await execute('fixtures/tel');
+    expect(cleanup(errors)).to.deep.equal([]);
+  });
+
+  it('ignore not http schema urls', async () => {
+    const { errors, cleanup } = await execute('fixtures/not-http-schema');
+    expect(cleanup(errors)).to.deep.equal([]);
+  });
+
  it('ignoring a folder', async () => {
    const { errors, cleanup } = await execute('fixtures/internal-link-ignore', {
      ignoreLinkPatterns: ['./relative/*', './relative/**/*'],
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,61 @@
 # @rocket/cli

+## 0.9.2
+
+### Patch Changes
+
+- 5330740: When replacing images with responsive picture tags do this from the bottom up so the initial dom parsing locations still hold true.
+
+## 0.9.1
+
+### Patch Changes
+
+- 43a7ca1: Responsive images need to respect a set pathPrefix
+
+## 0.9.0
+
+### Minor Changes
+
+- eae2007: Update to mdjs version that uses lit 2 and renders stories to light dom
+
+### Patch Changes
+
+- Updated dependencies [eae2007]
+  - @rocket/eleventy-plugin-mdjs-unified@0.5.0
+
+## 0.8.2
+
+### Patch Changes
+
+- 60e85a1: Support `picture` tags by handling `source` tags with `srcset` attributes in the rollup asset gathering build phase.
+- Updated dependencies [60e85a1]
+  - @rocket/building-rollup@0.3.1
+
+## 0.8.1
+
+### Patch Changes
+
+- c338696: Updated dependency of eleventy-img for M1 compatibility
+
+## 0.8.0
+
+### Minor Changes
+
+- 8bba4a8: Every content image in markdown will outputted in multiple widths and formats to ensure small image file sizes while retaining quality.
+  You can adjust the defaults by setting `imagePresets.responsive`.
+
+  ```js
+  export default {
+    imagePresets: {
+      responsive: {
+        widths: [600, 900, 1640],
+        formats: ['avif', 'jpeg'],
+        sizes: '(min-width: 1024px) 820px, calc(100vw - 40px)',
+      },
+    },
+  };
+  ```
+
 ## 0.7.0

 ### Minor Changes
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/cli",
-  "version": "0.7.0",
+  "version": "0.9.2",
  "publishConfig": {
    "access": "public"
  },
@@ -56,10 +56,10 @@
  ],
  "dependencies": {
    "@11ty/eleventy": "^0.11.1",
-    "@11ty/eleventy-img": "^0.7.4",
-    "@rocket/building-rollup": "^0.3.0",
+    "@11ty/eleventy-img": "^0.9.0",
+    "@rocket/building-rollup": "^0.3.1",
    "@rocket/core": "^0.1.2",
-    "@rocket/eleventy-plugin-mdjs-unified": "^0.4.1",
+    "@rocket/eleventy-plugin-mdjs-unified": "^0.5.0",
    "@rocket/eleventy-rocket-nav": "^0.3.0",
    "@rollup/plugin-babel": "^5.2.2",
    "@rollup/plugin-node-resolve": "^11.0.1",
@@ -67,12 +67,12 @@
    "@web/dev-server": "^0.1.4",
    "@web/dev-server-rollup": "^0.3.2",
    "@web/rollup-plugin-copy": "^0.2.0",
-    "check-html-links": "^0.2.2",
+    "check-html-links": "^0.2.3",
    "command-line-args": "^5.1.1",
    "command-line-usage": "^6.1.1",
    "fs-extra": "^9.0.1",
    "micromatch": "^4.0.2",
-    "plugins-manager": "^0.2.1",
+    "plugins-manager": "^0.2.2",
    "slash": "^3.0.0",
    "utf8": "^3.0.0",
    "workbox-window": "^6.1.5"
--- a/packages/cli/preset/_includes/layout-simulator.njk
+++ b/packages/cli/preset/_includes/layout-simulator.njk
@@ -11,7 +11,7 @@
      }
    </style>
    <script type="module">
-      import { render } from 'lit-html';
+      import { render } from '@mdjs/mdjs-story';

      async function onHashChange() {
        const urlParts = new URLSearchParams(document.location.hash.substr(1));
--- a/packages/cli/src/eleventy-plugins/insertResponsiveImages.cjs
+++ b/packages/cli/src/eleventy-plugins/insertResponsiveImages.cjs
@@ -0,0 +1,245 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const fs = require('fs');
+const path = require('path');
+const EleventyImage = require('@11ty/eleventy-img');
+const urlFilter = require('@11ty/eleventy/src/Filters/Url.js');
+const { SaxEventType, SAXParser } = require('sax-wasm');
+const { getComputedConfig } = require('../public/computedConfig.cjs');
+
+const saxPath = require.resolve('sax-wasm/lib/sax-wasm.wasm');
+const saxWasmBuffer = fs.readFileSync(saxPath);
+
+/** @typedef {import('../types').Heading} Heading */
+
+/** @typedef {import('sax-wasm').Text} Text */
+/** @typedef {import('sax-wasm').Tag} Tag */
+/** @typedef {import('sax-wasm').Position} Position */
+
+// Instantiate
+const parser = new SAXParser(
+  SaxEventType.CloseTag,
+  { highWaterMark: 256 * 1024 }, // 256k chunks
+);
+
+/**
+ * @param {object} options
+ * @param {string} options.html
+ * @param {Position} options.start
+ * @param {Position} options.end
+ * @param {string} options.insert
+ */
+function replaceBetween({ html, start, end, insert = '' }) {
+  const lines = html.split('\n');
+  const i = start.line;
+  const line = lines[i];
+  const upToChange = line.slice(0, start.character);
+  const afterChange = line.slice(end.character - 4);
+
+  lines[i] = `${upToChange}${insert}${afterChange}`;
+  return lines.join('\n');
+}
+
+/**
+ * @param {Tag} data
+ * @param {string} name
+ */
+function getAttribute(data, name) {
+  if (data.attributes) {
+    const { attributes } = data;
+    const foundIndex = attributes.findIndex(entry => entry.name.value === name);
+    if (foundIndex !== -1) {
+      return attributes[foundIndex].value.value;
+    }
+  }
+  return null;
+}
+
+/**
+ * @param {Tag} data
+ */
+function getAttributes(data) {
+  if (data.attributes) {
+    const { attributes } = data;
+    return attributes.map(entry => ({ name: entry.name.value, value: entry.value.value }));
+  }
+  return [];
+}
+
+// /**
+//  * @param {Tag} data
+//  */
+// function getText(data) {
+//   if (data.textNodes) {
+//     return data.textNodes.map(textNode => textNode.value).join('');
+//   }
+//   return null;
+// }
+
+// /**
+//  * @param {Tag} data
+//  */
+// function getClassList(data) {
+//   const classString = getAttribute(data, 'class');
+//   return classString ? classString.split(' ') : [];
+// }
+
+/**
+ * @param {string} html
+ */
+function getImages(html) {
+  /** @type {Heading[]} */
+  const images = [];
+  parser.eventHandler = (ev, _data) => {
+    if (ev === SaxEventType.CloseTag) {
+      const data = /** @type {Tag} */ (/** @type {any} */ (_data));
+      if (data.name === 'img') {
+        const { openStart, closeEnd } = data;
+
+        const attributes = getAttributes(data);
+        const presetName = getAttribute(data, 'rocket-image');
+        const src = getAttribute(data, 'src');
+        const title = getAttribute(data, 'title');
+        const alt = getAttribute(data, 'alt');
+        if (presetName) {
+          images.push({
+            presetName,
+            attributes,
+            src,
+            title,
+            alt,
+            openStart,
+            closeEnd,
+          });
+        }
+      }
+    }
+  };
+  parser.write(Buffer.from(html, 'utf8'));
+  parser.end();
+
+  // @ts-ignore
+  return images;
+}
+
+function getSrcsetAttribute(imageFormat) {
+  return `srcset="${imageFormat.map(entry => entry.srcset).join(', ')}"`;
+}
+
+async function responsiveImages(images, { inputPath, outputDir, imagePresets = {} }) {
+  for (let i = 0; i < images.length; i += 1) {
+    const { alt, filePath, title, src, presetName, attributes } = images[i];
+
+    if (alt === undefined) {
+      throw new Error(`Missing \`alt\` on responsive image from: ${src} in ${inputPath}`);
+    }
+
+    const presetSettings = imagePresets[presetName];
+    if (!presetSettings) {
+      throw new Error(`Could not find imagePresets: { ${presetName}: {} }`);
+    }
+    const sizes = presetSettings.sizes || '100vw';
+
+    const metadata = await EleventyImage(filePath, {
+      outputDir: path.join(outputDir, 'images'),
+      urlPath: urlFilter('/images/'),
+      ...presetSettings,
+    });
+    const lowsrc = metadata.jpeg[0];
+
+    let pictureStartWithSources = '';
+    let srcsetAttribute = '';
+    let sizesAttribute = '';
+    let pictureEnd = '';
+
+    if (Object.keys(metadata).length > 1) {
+      const sources = Object.values(metadata)
+        .map(imageFormat => {
+          return `<source type="${imageFormat[0].sourceType}" ${getSrcsetAttribute(
+            imageFormat,
+          )} sizes="${sizes}">`;
+        })
+        .join('\n');
+      pictureStartWithSources = `<picture>\n${sources}`;
+      pictureEnd = '</picture>';
+    } else {
+      srcsetAttribute = getSrcsetAttribute(Object.values(metadata)[0]);
+      sizesAttribute = `sizes="${sizes}"`;
+    }
+    const attributesString = attributes
+      .filter(attribute => !['src', 'title'].includes(attribute.name))
+      .map(attribute => `${attribute.name}="${attribute.value}"`)
+      .join(' ');
+
+    const figureStart = title ? '<figure>' : '';
+    const figureEndWithCaption = title ? `<figcaption>${title}</figcaption>\n</figure>` : '';
+
+    images[i].newHtml = `
+      ${figureStart}
+        ${pictureStartWithSources}
+          <img
+            ${attributesString}
+            src="${lowsrc.url}"
+            ${srcsetAttribute}
+            ${sizesAttribute}
+            width="${lowsrc.width}"
+            height="${lowsrc.height}"
+            loading="lazy"
+            decoding="async"
+          />
+        ${pictureEnd}
+      ${figureEndWithCaption}
+    `;
+  }
+  return images;
+}
+
+function updateHtml(html, changes) {
+  let newHtml = html;
+  for (const change of changes.reverse()) {
+    newHtml = replaceBetween({
+      html: newHtml,
+      start: change.openStart,
+      end: change.closeEnd,
+      insert: change.newHtml,
+    });
+  }
+  return newHtml;
+}
+
+function resolveFilePath(images, { inputPath }) {
+  for (let i = 0; i < images.length; i += 1) {
+    images[i].filePath = path.join(path.dirname(inputPath), images[i].src);
+  }
+  return images;
+}
+
+let isSetup = false;
+
+/**
+ * @param {string} html
+ */
+async function insertResponsiveImages(html) {
+  const config = getComputedConfig();
+
+  if (!isSetup) {
+    await parser.prepareWasm(saxWasmBuffer);
+    isSetup = true;
+  }
+
+  const options = {
+    inputPath: this.inputPath,
+    outputDir: this.outputDir,
+    imagePresets: config.imagePresets,
+  };
+
+  let images = getImages(html);
+  images = resolveFilePath(images, options);
+  images = await responsiveImages(images, options);
+  const newHtml = updateHtml(html, images);
+
+  return newHtml;
+}
+
+module.exports = {
+  insertResponsiveImages,
+};
--- a/packages/cli/src/eleventy-plugins/rocketFilters.cjs
+++ b/packages/cli/src/eleventy-plugins/rocketFilters.cjs
@@ -1,6 +1,7 @@
 const path = require('path');
 const fs = require('fs');
 const { processLocalReferences } = require('./processLocalReferences.cjs');
+const { insertResponsiveImages } = require('./insertResponsiveImages.cjs');

 function inlineFilePath(filePath) {
  let data = fs.readFileSync(filePath, function (err, contents) {
@@ -24,6 +25,7 @@ const rocketFilters = {

    eleventyConfig.addFilter('inlineFilePath', inlineFilePath);

+    eleventyConfig.addTransform('insertResponsiveImages', insertResponsiveImages);
    eleventyConfig.addTransform('processLocalReferences', processLocalReferences);
  },
 };
--- a/packages/cli/src/normalizeConfig.js
+++ b/packages/cli/src/normalizeConfig.js
@@ -45,11 +45,24 @@ export async function normalizeConfig(inConfig) {
    devServer: {},

    ...inConfig,
+    imagePresets: {
+      responsive: {
+        widths: [600, 900, 1640],
+        formats: ['avif', 'jpeg'],
+        sizes: '100vw',
+      },
+    },
  };

  if (inConfig && inConfig.devServer) {
    config.devServer = { ...config.devServer, ...inConfig.devServer };
  }
+  if (inConfig.imagePresets && inConfig.imagePresets.responsive) {
+    config.imagePresets.responsive = {
+      ...config.imagePresets.responsive,
+      ...inConfig.imagePresets.responsive,
+    };
+  }

  let userConfigFile;
  let __configDir = process.cwd();
@@ -73,7 +86,14 @@ export async function normalizeConfig(inConfig) {
          ...config.devServer,
          ...fileConfig.devServer,
        },
+        imagePresets: config.imagePresets,
      };
+      if (fileConfig.imagePresets && fileConfig.imagePresets.responsive) {
+        config.imagePresets.responsive = {
+          ...config.imagePresets.responsive,
+          ...fileConfig.imagePresets.responsive,
+        };
+      }
    }
  } catch (error) {
    console.error('Could not read rocket config file', error);
@@ -88,6 +108,10 @@ export async function normalizeConfig(inConfig) {
  for (const preset of config.presets) {
    config._presetPathes.push(preset.path);

+    if (preset.adjustImagePresets) {
+      config.imagePresets = preset.adjustImagePresets(config.imagePresets);
+    }
+
    if (preset.setupUnifiedPlugins) {
      config.setupUnifiedPlugins = [...config.setupUnifiedPlugins, ...preset.setupUnifiedPlugins];
    }
--- a/packages/cli/src/shared/.eleventy.cjs
+++ b/packages/cli/src/shared/.eleventy.cjs
@@ -5,6 +5,16 @@ const { getComputedConfig } = require('../public/computedConfig.cjs');
 const rocketFilters = require('../eleventy-plugins/rocketFilters.cjs');
 const rocketCopy = require('../eleventy-plugins/rocketCopy.cjs');
 const rocketCollections = require('../eleventy-plugins/rocketCollections.cjs');
+const { adjustPluginOptions } = require('plugins-manager');
+const image = require('./mdjsImageHandler.cjs');
+
+const defaultSetupUnifiedPlugins = [
+  adjustPluginOptions('remark2rehype', {
+    handlers: {
+      image,
+    },
+  }),
+];

 module.exports = function (eleventyConfig) {
  const config = getComputedConfig();
@@ -28,7 +38,9 @@ module.exports = function (eleventyConfig) {
    {
      name: 'eleventy-plugin-mdjs-unified',
      plugin: eleventyPluginMdjsUnified,
-      options: { setupUnifiedPlugins: config.setupUnifiedPlugins },
+      options: {
+        setupUnifiedPlugins: [...defaultSetupUnifiedPlugins, ...config.setupUnifiedPlugins],
+      },
    },
    {
      name: 'eleventy-rocket-nav',
--- a/packages/cli/src/shared/mdjsImageHandler.cjs
+++ b/packages/cli/src/shared/mdjsImageHandler.cjs
@@ -0,0 +1,17 @@
+const normalize = require('mdurl/encode');
+
+function image(h, node) {
+  const props = {
+    src: normalize(node.url),
+    alt: node.alt,
+    'rocket-image': 'responsive',
+  };
+
+  if (node.title !== null && node.title !== undefined) {
+    props.title = node.title;
+  }
+
+  return h(node, 'img', props);
+}
+
+module.exports = image;
--- a/packages/cli/test-helpers/index.js
+++ b/packages/cli/test-helpers/index.js
@@ -19,6 +19,7 @@ export function setFixtureDir(importMetaUrl) {
 * @property {boolean} stripStartEndWhitespace
 * @property {boolean} stripScripts
 * @property {boolean} formatHtml
+ * @property {boolean} replaceImageHashes
 * @property {start|build} type
 */

@@ -51,6 +52,7 @@ export async function readOutput(
    stripScripts = false,
    formatHtml = false,
    type = 'build',
+    replaceImageHashes = false,
  } = {},
 ) {
  if (!cli || !cli.config) {
@@ -70,6 +72,9 @@ export async function readOutput(
    const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;
    text = text.substring(0, scriptOpenTagEnd) + text.substring(scriptCloseTagStart);
  }
+  if (replaceImageHashes) {
+    text = text.replace(/\/images\/([a-z0-9]+)-/g, '/images/__HASH__-');
+  }
  if (formatHtml) {
    text = prettier.format(text, { parser: 'html', printWidth: 100 });
  }
--- a/packages/cli/test-node/RocketCli.computedConfig.test.js
+++ b/packages/cli/test-node/RocketCli.computedConfig.test.js
@@ -106,31 +106,33 @@ describe('RocketCli computedConfig', () => {
    cli = await executeStart('computed-config-fixtures/image-link/rocket.config.js');

    const namedMdContent = [
-      '<p><a href="../">Root</a>',
-      '<a href="../one-level/raw/">Raw</a>',
-      '<img src="../images/my-img.svg" alt="my-img">',
-      '<img src="/images/my-img.svg" alt="absolute-img"></p>',
+      '<p>',
+      '  <a href="../">Root</a>',
+      '  <a href="../one-level/raw/">Raw</a>',
+      '  <img src="../images/my-img.svg" alt="my-img" />',
+      '  <img src="/images/my-img.svg" alt="absolute-img" />',
+      '</p>',
    ];

    const namedHtmlContent = [
      '<div id="with-anchor">',
      '  <a href="../">Root</a>',
      '  <a href="../one-level/raw/">Raw</a>',
-      '  <img src="../images/my-img.svg" alt="my-img">',
-      '  <img src="/images/my-img.svg" alt="absolute-img">',
+      '  <img src="../images/my-img.svg" alt="my-img" />',
+      '  <img src="/images/my-img.svg" alt="absolute-img" />',
      '  <picture>',
-      '    <source media="(min-width:465px)" srcset="../images/picture-min-465.jpg">',
-      '    <img src="../images/picture-fallback.jpg" alt="Fallback" style="width:auto;">',
+      '    <source media="(min-width:465px)" srcset="../images/picture-min-465.jpg" />',
+      '    <img src="../images/picture-fallback.jpg" alt="Fallback" style="width: auto" />',
      '  </picture>',
      '</div>',
    ];

-    const templateHtml = await readStartOutput(cli, 'template/index.html');
+    const templateHtml = await readStartOutput(cli, 'template/index.html', { formatHtml: true });
    expect(templateHtml, 'template/index.html does not match').to.equal(
      namedHtmlContent.join('\n'),
    );

-    const guidesHtml = await readStartOutput(cli, 'guides/index.html');
+    const guidesHtml = await readStartOutput(cli, 'guides/index.html', { formatHtml: true });
    expect(guidesHtml, 'guides/index.html does not match').to.equal(
      [...namedMdContent, ...namedHtmlContent].join('\n'),
    );
@@ -157,27 +159,28 @@ describe('RocketCli computedConfig', () => {
    );

    // for index files no '../' will be added
-    const indexHtml = await readStartOutput(cli, 'index.html');
+    const indexHtml = await readStartOutput(cli, 'index.html', { formatHtml: true });
    expect(indexHtml, 'index.html does not match').to.equal(
      [
-        '<p><a href="./">Root</a>',
-        '<a href="guides/#with-anchor">Guides</a>',
-        '<a href="./one-level/raw/">Raw</a>',
-        '<a href="template/">Template</a>',
-        '<a href="./rules/tabindex/">EndingIndex</a>',
-        '<img src="./images/my-img.svg" alt="my-img">',
-        '<img src="/images/my-img.svg" alt="absolute-img"></p>',
-        '<div>',
+        '<p>',
        '  <a href="./">Root</a>',
-        '  👇<a href="guides/#with-anchor">Guides</a>',
-        '  👉 <a href="./one-level/raw/">Raw</a>',
+        '  <a href="guides/#with-anchor">Guides</a>',
+        '  <a href="./one-level/raw/">Raw</a>',
        '  <a href="template/">Template</a>',
        '  <a href="./rules/tabindex/">EndingIndex</a>',
-        '  <img src="./images/my-img.svg" alt="my-img">',
-        '  <img src="/images/my-img.svg" alt="absolute-img">',
+        '  <img src="./images/my-img.svg" alt="my-img" />',
+        '  <img src="/images/my-img.svg" alt="absolute-img" />',
+        '</p>',
+        '<div>',
+        '  <a href="./">Root</a>',
+        '  👇<a href="guides/#with-anchor">Guides</a> 👉 <a href="./one-level/raw/">Raw</a>',
+        '  <a href="template/">Template</a>',
+        '  <a href="./rules/tabindex/">EndingIndex</a>',
+        '  <img src="./images/my-img.svg" alt="my-img" />',
+        '  <img src="/images/my-img.svg" alt="absolute-img" />',
        '  <picture>',
-        '    <source media="(min-width:465px)" srcset="./images/picture-min-465.jpg">',
-        '    <img src="./images/picture-fallback.jpg" alt="Fallback" style="width:auto;">',
+        '    <source media="(min-width:465px)" srcset="./images/picture-min-465.jpg" />',
+        '    <img src="./images/picture-fallback.jpg" alt="Fallback" style="width: auto" />',
        '  </picture>',
        '</div>',
      ].join('\n'),
--- a/packages/cli/test-node/RocketCli.e2e.test.js
+++ b/packages/cli/test-node/RocketCli.e2e.test.js
@@ -102,6 +102,30 @@ describe('RocketCli e2e', () => {
    );
    const assetHtml = await readStartOutput(cli, 'use-assets/index.html');
    expect(assetHtml).to.equal('<link rel="stylesheet" href="/_merged_assets/some.css">');
+    const imageHtml = await readStartOutput(cli, 'image/index.html', { replaceImageHashes: true });
+    expect(imageHtml).to.equal(
+      [
+        '<p>',
+        '      <figure>',
+        '        <picture>',
+        '<source type="image/avif" srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w" sizes="100vw">',
+        '<source type="image/jpeg" srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w" sizes="100vw">',
+        '          <img',
+        '            alt="My Image Alternative Text" rocket-image="responsive"',
+        '            src="/images/__HASH__-600.jpeg"',
+        '            ',
+        '            ',
+        '            width="600"',
+        '            height="316"',
+        '            loading="lazy"',
+        '            decoding="async"',
+        '          />',
+        '        </picture>',
+        '      <figcaption>My Image Description</figcaption>',
+        '</figure>',
+        '    </p>',
+      ].join('\n'),
+    );
  });

  it('can add a pathPrefix that will be used in the build command', async () => {
@@ -119,6 +143,26 @@ describe('RocketCli e2e', () => {
    expect(assetHtml).to.equal(
      '<html><head><link rel="stylesheet" href="../41297ffa.css">\n\n</head><body>\n\n</body></html>',
    );
+    let imageHtml = await readBuildOutput(cli, 'image/index.html');
+    imageHtml = imageHtml.replace(/\.\.\/([a-z0-9]+)\./g, '../__HASH__.');
+    expect(imageHtml).to.equal(
+      [
+        '<html><head>',
+        '</head><body><p>',
+        '      </p><figure>',
+        '        <picture>',
+        '<source type="image/avif" srcset="../__HASH__.avif 600w, ../__HASH__.avif 900w" sizes="100vw">',
+        '<source type="image/jpeg" srcset="../__HASH__.jpeg 600w, ../__HASH__.jpeg 900w" sizes="100vw">',
+        '          <img alt="My Image Alternative Text" rocket-image="responsive" src="../__HASH__.jpeg" width="600" height="316" loading="lazy" decoding="async">',
+        '        </picture>',
+        '      <figcaption>My Image Description</figcaption>',
+        '</figure>',
+        '    <p></p>',
+        '',
+        '',
+        '</body></html>',
+      ].join('\n'),
+    );
  });

  it('smoke test for link checking', async () => {
--- a/packages/cli/test-node/RocketCli.images.test.js
+++ b/packages/cli/test-node/RocketCli.images.test.js
@@ -0,0 +1,223 @@
+import chai from 'chai';
+import chalk from 'chalk';
+import { executeStart, readStartOutput, setFixtureDir } from '@rocket/cli/test-helpers';
+
+const { expect } = chai;
+
+describe('RocketCli images', () => {
+  let cli;
+
+  before(() => {
+    // ignore colors in tests as most CIs won't support it
+    chalk.level = 0;
+    setFixtureDir(import.meta.url);
+  });
+
+  afterEach(async () => {
+    if (cli?.cleanup) {
+      await cli.cleanup();
+    }
+  });
+
+  describe('Images', () => {
+    it('does render content images responsive', async () => {
+      cli = await executeStart('e2e-fixtures/images/rocket.config.js');
+      const indexHtml = await readStartOutput(cli, 'index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+      expect(indexHtml).to.equal(
+        [
+          '<p>',
+          '  <figure>',
+          '    <picture>',
+          '      <source',
+          '        type="image/avif"',
+          '        srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
+          '        sizes="100vw"',
+          '      />',
+          '      <source',
+          '        type="image/jpeg"',
+          '        srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
+          '        sizes="100vw"',
+          '      />',
+          '      <img',
+          '        alt="My Image Alternative Text"',
+          '        rocket-image="responsive"',
+          '        src="/images/__HASH__-600.jpeg"',
+          '        width="600"',
+          '        height="316"',
+          '        loading="lazy"',
+          '        decoding="async"',
+          '      />',
+          '    </picture>',
+          '    <figcaption>My Image Description</figcaption>',
+          '  </figure>',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('renders multiple images in the correct order', async () => {
+      cli = await executeStart('e2e-fixtures/images/rocket.config.js');
+      const indexHtml = await readStartOutput(cli, 'two-images/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+      expect(indexHtml).to.equal(
+        [
+          '<h2 id="one">',
+          '  <a aria-hidden="true" tabindex="-1" href="#one"><span class="icon icon-link"></span></a>one',
+          '</h2>',
+          '<p>',
+          '  <picture>',
+          '    <source',
+          '      type="image/avif"',
+          '      srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
+          '      sizes="100vw"',
+          '    />',
+          '    <source',
+          '      type="image/jpeg"',
+          '      srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
+          '      sizes="100vw"',
+          '    />',
+          '    <img',
+          '      alt="one"',
+          '      rocket-image="responsive"',
+          '      src="/images/__HASH__-600.jpeg"',
+          '      width="600"',
+          '      height="316"',
+          '      loading="lazy"',
+          '      decoding="async"',
+          '    />',
+          '  </picture>',
+          '</p>',
+          '<h2 id="two">',
+          '  <a aria-hidden="true" tabindex="-1" href="#two"><span class="icon icon-link"></span></a>two',
+          '</h2>',
+          '<p>',
+          '  <picture>',
+          '    <source',
+          '      type="image/avif"',
+          '      srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
+          '      sizes="100vw"',
+          '    />',
+          '    <source',
+          '      type="image/jpeg"',
+          '      srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
+          '      sizes="100vw"',
+          '    />',
+          '    <img',
+          '      alt="two"',
+          '      rocket-image="responsive"',
+          '      src="/images/__HASH__-600.jpeg"',
+          '      width="600"',
+          '      height="316"',
+          '      loading="lazy"',
+          '      decoding="async"',
+          '    />',
+          '  </picture>',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('can configure those responsive images', async () => {
+      cli = await executeStart('e2e-fixtures/images/small.rocket.config.js');
+      const indexHtml = await readStartOutput(cli, 'index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+      expect(indexHtml).to.equal(
+        [
+          '<p>',
+          '  <figure>',
+          '    <picture>',
+          '      <source',
+          '        type="image/avif"',
+          '        srcset="/images/__HASH__-30.avif 30w, /images/__HASH__-60.avif 60w"',
+          '        sizes="(min-width: 1024px) 30px, 60px"',
+          '      />',
+          '      <source',
+          '        type="image/jpeg"',
+          '        srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
+          '        sizes="(min-width: 1024px) 30px, 60px"',
+          '      />',
+          '      <img',
+          '        alt="My Image Alternative Text"',
+          '        rocket-image="responsive"',
+          '        src="/images/__HASH__-30.jpeg"',
+          '        width="30"',
+          '        height="15"',
+          '        loading="lazy"',
+          '        decoding="async"',
+          '      />',
+          '    </picture>',
+          '    <figcaption>My Image Description</figcaption>',
+          '  </figure>',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('will only render a figure & figcaption if there is a caption/title', async () => {
+      cli = await executeStart('e2e-fixtures/images/small.rocket.config.js');
+      const indexHtml = await readStartOutput(cli, 'no-title/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+      expect(indexHtml).to.equal(
+        [
+          '<p>',
+          '  <picture>',
+          '    <source',
+          '      type="image/avif"',
+          '      srcset="/images/__HASH__-30.avif 30w, /images/__HASH__-60.avif 60w"',
+          '      sizes="(min-width: 1024px) 30px, 60px"',
+          '    />',
+          '    <source',
+          '      type="image/jpeg"',
+          '      srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
+          '      sizes="(min-width: 1024px) 30px, 60px"',
+          '    />',
+          '    <img',
+          '      alt="My Image Alternative Text"',
+          '      rocket-image="responsive"',
+          '      src="/images/__HASH__-30.jpeg"',
+          '      width="30"',
+          '      height="15"',
+          '      loading="lazy"',
+          '      decoding="async"',
+          '    />',
+          '  </picture>',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('will render an img with srcset and sizes if there is only one image format', async () => {
+      cli = await executeStart('e2e-fixtures/images/single-format.rocket.config.js');
+      const indexHtml = await readStartOutput(cli, 'no-title/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+      expect(indexHtml).to.equal(
+        [
+          '<p>',
+          '  <img',
+          '    alt="My Image Alternative Text"',
+          '    rocket-image="responsive"',
+          '    src="/images/__HASH__-30.jpeg"',
+          '    srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
+          '    sizes="(min-width: 1024px) 30px, 60px"',
+          '    width="30"',
+          '    height="15"',
+          '    loading="lazy"',
+          '    decoding="async"',
+          '  />',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+  });
+});
--- a/packages/cli/test-node/RocketCli.preset.test.js
+++ b/packages/cli/test-node/RocketCli.preset.test.js
@@ -104,4 +104,30 @@ describe('RocketCli preset', () => {
    const indexHtml = await readStartOutput(cli, 'index.html');
    expect(indexHtml).to.include('<meta name="added" content="at the top" />');
  });
+
+  it('a preset can provide an adjustImagePresets() function', async () => {
+    cli = await executeStart('preset-fixtures/use-preset/rocket.config.js');
+
+    const indexHtml = await readStartOutput(cli, 'index.html', {
+      formatHtml: true,
+      replaceImageHashes: true,
+    });
+    expect(indexHtml).to.equal(
+      [
+        '<p>',
+        '  <img',
+        '    alt="My Image Alternative Text"',
+        '    rocket-image="responsive"',
+        '    src="/images/__HASH__-30.jpeg"',
+        '    srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
+        '    sizes="30px"',
+        '    width="30"',
+        '    height="15"',
+        '    loading="lazy"',
+        '    decoding="async"',
+        '  />',
+        '</p>',
+      ].join('\n'),
+    );
+  });
 });
--- a/packages/cli/test-node/computed-config-fixtures/image-link/rocket.config.js
+++ b/packages/cli/test-node/computed-config-fixtures/image-link/rocket.config.js
@@ -1,3 +1,20 @@
+import { adjustPluginOptions } from 'plugins-manager';
+
+function image(h, node) {
+  return h(node, 'img', {
+    src: node.url,
+    alt: node.alt,
+  });
+}
+
 /** @type {Partial<import("../../../types/main").RocketCliOptions>} */
-const config = {};
+const config = {
+  setupUnifiedPlugins: [
+    adjustPluginOptions('remark2rehype', {
+      handlers: {
+        image,
+      },
+    }),
+  ],
+};
 export default config;
--- a/packages/cli/test-node/e2e-fixtures/content/docs/_assets/my-image.jpg
+++ b/packages/cli/test-node/e2e-fixtures/content/docs/_assets/my-image.jpg
--- a/packages/cli/test-node/e2e-fixtures/content/docs/image.md
+++ b/packages/cli/test-node/e2e-fixtures/content/docs/image.md
@@ -0,0 +1,5 @@
+---
+layout: layout-raw
+---
+
+![My Image Alternative Text](./_assets/my-image.jpg 'My Image Description')
--- a/packages/cli/test-node/e2e-fixtures/images/docs/.eleventyignore
+++ b/packages/cli/test-node/e2e-fixtures/images/docs/.eleventyignore
@@ -0,0 +1 @@
+**/*.njk
--- a/packages/cli/test-node/e2e-fixtures/images/docs/_assets/my-image.jpg
+++ b/packages/cli/test-node/e2e-fixtures/images/docs/_assets/my-image.jpg
--- a/packages/cli/test-node/e2e-fixtures/images/docs/index.md
+++ b/packages/cli/test-node/e2e-fixtures/images/docs/index.md
@@ -0,0 +1,5 @@
+---
+layout: layout-raw
+---
+
+![My Image Alternative Text](./_assets/my-image.jpg 'My Image Description')
--- a/packages/cli/test-node/e2e-fixtures/images/docs/no-title.md
+++ b/packages/cli/test-node/e2e-fixtures/images/docs/no-title.md
@@ -0,0 +1,5 @@
+---
+layout: layout-raw
+---
+
+![My Image Alternative Text](./_assets/my-image.jpg)
--- a/packages/cli/test-node/e2e-fixtures/images/docs/two-images.md
+++ b/packages/cli/test-node/e2e-fixtures/images/docs/two-images.md
@@ -0,0 +1,11 @@
+---
+layout: layout-raw
+---
+
+## one
+
+![one](./_assets/my-image.jpg)
+
+## two
+
+![two](./_assets/my-image.jpg)
--- a/packages/cli/test-node/e2e-fixtures/images/rocket.config.js
+++ b/packages/cli/test-node/e2e-fixtures/images/rocket.config.js
@@ -0,0 +1,3 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {};
+export default config;
--- a/packages/cli/test-node/e2e-fixtures/images/single-format.rocket.config.js
+++ b/packages/cli/test-node/e2e-fixtures/images/single-format.rocket.config.js
@@ -0,0 +1,11 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {
+  imagePresets: {
+    responsive: {
+      widths: [30, 60],
+      formats: ['jpeg'],
+      sizes: '(min-width: 1024px) 30px, 60px',
+    },
+  },
+};
+export default config;
--- a/packages/cli/test-node/e2e-fixtures/images/small.rocket.config.js
+++ b/packages/cli/test-node/e2e-fixtures/images/small.rocket.config.js
@@ -0,0 +1,11 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {
+  imagePresets: {
+    responsive: {
+      widths: [30, 60],
+      formats: ['avif', 'jpeg'],
+      sizes: '(min-width: 1024px) 30px, 60px',
+    },
+  },
+};
+export default config;
--- a/packages/cli/test-node/fixtures/overrides/rocket.config.js
+++ b/packages/cli/test-node/fixtures/overrides/rocket.config.js
@@ -7,4 +7,9 @@ export default {
      data: '--config-override--',
    },
  },
+  imagePresets: {
+    responsive: {
+      sizes: '--override-sizes--',
+    },
+  },
 };
--- a/packages/cli/test-node/normalizeConfig.test.js
+++ b/packages/cli/test-node/normalizeConfig.test.js
@@ -47,6 +47,13 @@ describe('normalizeConfig', () => {
        { commands: ['build'] },
        { commands: ['start', 'build', 'lint'] },
      ],
+      imagePresets: {
+        responsive: {
+          formats: ['avif', 'jpeg'],
+          sizes: '100vw',
+          widths: [600, 900, 1640],
+        },
+      },
      inputDir: 'docs',
      outputDir: '_site',
    });
@@ -77,6 +84,13 @@ describe('normalizeConfig', () => {
      setupCliPlugins: [],
      setupEleventyComputedConfig: [],
      presets: [],
+      imagePresets: {
+        responsive: {
+          formats: ['avif', 'jpeg'],
+          sizes: '100vw',
+          widths: [600, 900, 1640],
+        },
+      },
      serviceWorkerName: 'service-worker.js',
      plugins: [
        { commands: ['start'] },
@@ -110,6 +124,13 @@ describe('normalizeConfig', () => {
      setupCliPlugins: [],
      setupEleventyComputedConfig: [],
      presets: [],
+      imagePresets: {
+        responsive: {
+          formats: ['avif', 'jpeg'],
+          sizes: '--override-sizes--',
+          widths: [600, 900, 1640],
+        },
+      },
      serviceWorkerName: 'service-worker.js',
      plugins: [
        { commands: ['start'] },
@@ -146,6 +167,13 @@ describe('normalizeConfig', () => {
      setupCliPlugins: [],
      setupEleventyComputedConfig: [],
      presets: [],
+      imagePresets: {
+        responsive: {
+          formats: ['avif', 'jpeg'],
+          sizes: '100vw',
+          widths: [600, 900, 1640],
+        },
+      },
      serviceWorkerName: 'service-worker.js',
      plugins: [
        { commands: ['start'] },
--- a/packages/cli/test-node/preset-fixtures/use-preset/docs/.eleventyignore
+++ b/packages/cli/test-node/preset-fixtures/use-preset/docs/.eleventyignore
@@ -0,0 +1 @@
+**/*.njk
--- a/packages/cli/test-node/preset-fixtures/use-preset/docs/_assets/my-image.jpg
+++ b/packages/cli/test-node/preset-fixtures/use-preset/docs/_assets/my-image.jpg
--- a/packages/cli/test-node/preset-fixtures/use-preset/docs/_data/socialMediaImage.cjs
+++ b/packages/cli/test-node/preset-fixtures/use-preset/docs/_data/socialMediaImage.cjs
@@ -0,0 +1 @@
+module.exports = 'do-not-generate-a-social-media-image';
--- a/packages/cli/test-node/preset-fixtures/use-preset/docs/index.md
+++ b/packages/cli/test-node/preset-fixtures/use-preset/docs/index.md
@@ -0,0 +1,5 @@
+---
+layout: layout-raw
+---
+
+![My Image Alternative Text](./_assets/my-image.jpg)
--- a/packages/cli/test-node/preset-fixtures/use-preset/my-preset.js
+++ b/packages/cli/test-node/preset-fixtures/use-preset/my-preset.js
@@ -0,0 +1,19 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export function myPreset() {
+  return {
+    path: path.resolve(__dirname),
+    adjustImagePresets: imagePresets => ({
+      ...imagePresets,
+      responsive: {
+        ...imagePresets.responsive,
+        widths: [30, 60],
+        formats: ['jpeg'],
+        sizes: '30px',
+      },
+    }),
+  };
+}
--- a/packages/cli/test-node/preset-fixtures/use-preset/rocket.config.js
+++ b/packages/cli/test-node/preset-fixtures/use-preset/rocket.config.js
@@ -0,0 +1,8 @@
+import { myPreset } from './my-preset.js';
+
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {
+  presets: [myPreset()],
+};
+
+export default config;
--- a/packages/cli/types/main.d.ts
+++ b/packages/cli/types/main.d.ts
@@ -17,6 +17,14 @@ interface RocketStartConfig {
  createSocialMediaImages?: boolean;
 }

+type ImageFormat = 'avif' | 'webp' | 'jpg' | 'png' | 'svg';
+
+interface ImagePreset {
+  widths: number[];
+  formats: ImageFormat[];
+  sizes: string;
+}
+
 export interface RocketCliOptions {
  presets: Array<RocketPreset>;
  pathPrefix?: string;
@@ -27,6 +35,9 @@ export interface RocketCliOptions {
  absoluteBaseUrl?: string;
  watch: boolean;
  createSocialMediaImages?: boolean;
+  imagePresets: {
+    [key: string]: ImagePreset;
+  };

  start?: RocketStartConfig;

--- a/packages/eleventy-plugin-mdjs-unified/CHANGELOG.md
+++ b/packages/eleventy-plugin-mdjs-unified/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @rocket/eleventy-plugin-mdjs-unified

+## 0.5.0
+
+### Minor Changes
+
+- eae2007: Update to mdjs version that uses lit 2 and renders stories to light dom
+
 ## 0.4.1

 ### Patch Changes
--- a/packages/eleventy-plugin-mdjs-unified/package.json
+++ b/packages/eleventy-plugin-mdjs-unified/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/eleventy-plugin-mdjs-unified",
-  "version": "0.4.1",
+  "version": "0.5.0",
  "publishConfig": {
    "access": "public"
  },
@@ -31,7 +31,7 @@
    "mdjs"
  ],
  "dependencies": {
-    "@mdjs/core": "^0.7.1",
+    "@mdjs/core": "^0.8.0",
    "es-module-lexer": "^0.3.26",
    "unist-util-visit": "^2.0.3"
  },
--- a/packages/launch/CHANGELOG.md
+++ b/packages/launch/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @rocket/launch

+## 0.5.0
+
+### Minor Changes
+
+- 8bba4a8: Configure responsive image sizes to align with the launch preset breakpoints.
+  The set value is `sizes: '(min-width: 1024px) 820px, calc(100vw - 40px)'`.
+
 ## 0.4.2

 ### Patch Changes
--- a/packages/launch/package.json
+++ b/packages/launch/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/launch",
-  "version": "0.4.2",
+  "version": "0.5.0",
  "publishConfig": {
    "access": "public"
  },
--- a/packages/launch/preset/_assets/layout.css
+++ b/packages/launch/preset/_assets/layout.css
@@ -106,7 +106,7 @@ hr {
 #content-wrapper .content-area,
 #main-header .content-area,
 #main-footer .content-area {
-  padding: 0 30px;
+  padding: 0 20px;
 }

 #content-wrapper .content-area {
--- a/packages/launch/preset/_assets/markdown.css
+++ b/packages/launch/preset/_assets/markdown.css
@@ -463,9 +463,9 @@
 }

 .markdown-body img {
-  /* background-color: #fff; */
  box-sizing: content-box;
  max-width: 100%;
+  width: 100%;
  height: auto;
 }

--- a/packages/launch/preset/rocketLaunch.js
+++ b/packages/launch/preset/rocketLaunch.js
@@ -52,5 +52,13 @@ export function rocketLaunch() {
    setupEleventyComputedConfig: [
      adjustPluginOptions('layout', { defaultLayout: 'layout-sidebar' }),
    ],
+    adjustImagePresets: imagePresets => ({
+      ...imagePresets,
+      responsive: {
+        ...imagePresets.responsive,
+        widths: [600, 900, 1640],
+        sizes: '(min-width: 1024px) 820px, calc(100vw - 40px)',
+      },
+    }),
  };
 }
--- a/packages/mdjs-core/CHANGELOG.md
+++ b/packages/mdjs-core/CHANGELOG.md
@@ -1,5 +1,66 @@
 # Change Log

+## 0.8.0
+
+### Minor Changes
+
+- 814b5d2: **BREAKING CHANGE** Stories of `story` and `preview-story` are now rendered to light dom instead of shadow dom to allow usage of a scoped registry for the internal dom
+
+  ```js
+  export const story = html`
+    <p>my story</p>
+  `;
+  ```
+
+  ```html
+  <!-- before -->
+  <mdjs-story>
+    #shadow-root (open)
+    <p>my story</p>
+  </mdjs-story>
+
+  <!-- after -->
+  <mdjs-story>
+    <p>my story</p>
+  </mdjs-story>
+  ```
+
+- e1e96ac: **BREAKING CHANGE** The default renderer for `story` and `preview-story` updated to [lit](https://lit.dev/) 2
+
+  If your main lit-html version is 1.x be sure to import html for your story rendering from `@mdjs/mdjs-preview`.
+
+  ````md
+  ```js script
+  import { html } from '@mdjs/mdjs-preview';
+  ```
+
+  ```js preview-story
+  export const foo = () =>
+    html`
+      <demo-element></demo-element>
+    `;
+  ```
+  ````
+
+### Patch Changes
+
+- Updated dependencies [e1e96ac]
+- Updated dependencies [814b5d2]
+- Updated dependencies [814b5d2]
+- Updated dependencies [e1e96ac]
+  - @mdjs/mdjs-preview@0.5.0
+  - @mdjs/mdjs-story@0.3.0
+
+## 0.7.2
+
+### Patch Changes
+
+- ce9b12e: Support importing via es module
+
+  ```js
+  import { mdjsProcess } = from '@mdjs/core';
+  ```
+
 ## 0.7.1

 ### Patch Changes
--- a/packages/mdjs-core/package.json
+++ b/packages/mdjs-core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mdjs/core",
-  "version": "0.7.1",
+  "version": "0.8.0",
  "publishConfig": {
    "access": "public"
  },
@@ -32,6 +32,7 @@
  "files": [
    "*.d.ts",
    "*.js",
+    "*.mjs",
    "dist-types",
    "src",
    "types"
@@ -43,12 +44,12 @@
    "remark"
  ],
  "dependencies": {
-    "@mdjs/mdjs-preview": "^0.4.2",
-    "@mdjs/mdjs-story": "^0.2.0",
+    "@mdjs/mdjs-preview": "^0.5.0",
+    "@mdjs/mdjs-story": "^0.3.0",
    "@types/unist": "^2.0.3",
    "es-module-lexer": "^0.3.26",
    "github-markdown-css": "^4.0.0",
-    "plugins-manager": "^0.2.1",
+    "plugins-manager": "^0.2.2",
    "rehype-autolink-headings": "^5.0.1",
    "rehype-prism-template": "^0.4.1",
    "rehype-raw": "^5.0.0",
--- a/packages/mdjs-preview/CHANGELOG.md
+++ b/packages/mdjs-preview/CHANGELOG.md
@@ -1,5 +1,61 @@
 # @mdjs/mdjs-preview

+## 0.5.0
+
+### Minor Changes
+
+- e1e96ac: **BREAKING CHANGE** Update to [lit](https://lit.dev/) 2
+
+  If your main lit-html version is 1.x be sure to import html for your story rendering from `@mdjs/mdjs-preview`.
+
+  ````md
+  ```js script
+  import { html } from '@mdjs/mdjs-preview';
+  ```
+
+  ```js preview-story
+  export const foo = () =>
+    html`
+      <demo-element></demo-element>
+    `;
+  ```
+  ````
+
+- 814b5d2: **BREAKING CHANGE** Render stories to light dom
+
+  ```js
+  export const story = html`
+    <p>my story</p>
+  `;
+  ```
+
+  ```html
+  <!-- before -->
+  <mdjs-preview>
+    #shadow-root (open)
+      <div id="wrapper">
+        <div>
+          <p>my story</p>
+        </div>
+      </div>
+      <!-- more internal dom -->
+
+    <code><!-- ... --></code>
+  </mdjs-preview>
+
+  <!-- after -->
+  <mdjs-preview>
+    #shadow-root (open)
+      <div id="wrapper">
+      <!-- more internal dom -->
+
+    <code><!-- ... --></code>
+    <div slot="story">
+      <p>my story</p>
+    </div>
+  </mdjs-preview>
+  ```
+
 ## 0.4.2

 ### Patch Changes
--- a/packages/mdjs-preview/index.js
+++ b/packages/mdjs-preview/index.js
@@ -1 +1,62 @@
 export { MdJsPreview } from './src/MdJsPreview.js';
+
+// reexport used lit to ensure users can sync html & rendering
+export {
+  html,
+  CSSResult,
+  adoptStyles,
+  css,
+  getCompatibleStyle,
+  supportsAdoptingStyleSheets,
+  unsafeCSS,
+  UpdatingElement,
+  notEqual,
+  ReactiveElement,
+  svg,
+  noChange,
+  nothing,
+  render,
+  LitElement,
+  defaultConverter,
+} from 'lit';
+
+export {
+  customElement,
+  property,
+  state,
+  eventOptions,
+  query,
+  queryAll,
+  queryAsync,
+  queryAssignedNodes,
+} from 'lit/decorators.js';
+
+export { directive, Directive } from 'lit/directive.js';
+
+export { AsyncDirective } from 'lit/async-directive.js';
+
+export {
+  isPrimitive,
+  TemplateResultType,
+  isTemplateResult,
+  isDirectiveResult,
+  getDirectiveClass,
+  isSingleExpression,
+  insertPart,
+  setChildPartValue,
+  setCommittedValue,
+  getCommittedValue,
+  removePart,
+  clearPart,
+} from 'lit/directive-helpers.js';
+
+export { asyncAppend } from 'lit/directives/async-append.js';
+export { asyncReplace } from 'lit/directives/async-replace.js';
+export { cache } from 'lit/directives/cache.js';
+export { classMap } from 'lit/directives/class-map.js';
+export { guard } from 'lit/directives/guard.js';
+export { ifDefined } from 'lit/directives/if-defined.js';
+export { repeat } from 'lit/directives/repeat.js';
+export { styleMap } from 'lit/directives/style-map.js';
+export { unsafeHTML } from 'lit/directives/unsafe-html.js';
+export { until } from 'lit/directives/until.js';
--- a/packages/mdjs-preview/package.json
+++ b/packages/mdjs-preview/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mdjs/mdjs-preview",
-  "version": "0.4.2",
+  "version": "0.5.0",
  "publishConfig": {
    "access": "public"
  },
@@ -22,7 +22,6 @@
  "scripts": {
    "debug": "cd ../../ && npm run debug -- --group mdjs-preview",
    "test": "npm run test:web",
-    "test:watch": "onchange 'src/**/*.{js,cjs}' 'test-node/**/*.js' -- npm run test:node",
    "test:web": "cd ../../ && npm run test:web -- --group mdjs-preview"
  },
  "files": [
@@ -33,7 +32,7 @@
  ],
  "dependencies": {
    "@lion/accordion": "^0.4.2",
-    "lit-element": "^2.4.0"
+    "lit": "^2.0.0-rc.2"
  },
  "types": "dist-types/index.d.ts"
 }
--- a/packages/mdjs-preview/src/MdJsPreview.js
+++ b/packages/mdjs-preview/src/MdJsPreview.js
@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css, nothing, render } from 'lit';
 import '@lion/accordion/define';

 import {
@@ -11,7 +11,7 @@ import { addResizeHandler } from './resizeHandler.js';

 /**
 * @typedef {object} StoryOptions
- * @property {ShadowRoot | null} StoryOptions.shadowRoot
+ * @property {HTMLElement | null} StoryOptions.shadowRoot
 */

 /** @typedef {(options?: StoryOptions) => ReturnType<LitElement['render']>} LitHtmlStoryFn */
@@ -172,6 +172,11 @@ export class MdJsPreview extends LitElement {

  connectedCallback() {
    super.connectedCallback();
+    if (!this.lightDomRenderTarget) {
+      this.lightDomRenderTarget = document.createElement('div');
+      this.lightDomRenderTarget.setAttribute('slot', 'story');
+      this.appendChild(this.lightDomRenderTarget);
+    }
    if (this.sameSettings) {
      applySharedStates(this);
    }
@@ -225,6 +230,10 @@ export class MdJsPreview extends LitElement {
        unSubscribe(this.onSubscribe);
      }
    }
+
+    if (this.lightDomRenderTarget && changeProps.has('story')) {
+      render(this.story({ shadowRoot: this }), this.lightDomRenderTarget);
+    }
  }

  disconnectedCallback() {
@@ -549,9 +558,9 @@ export class MdJsPreview extends LitElement {
  render() {
    return html`
      <div id="wrapper">
-        ${this.deviceMode === false
-          ? html`<div>${this.story({ shadowRoot: this.shadowRoot })}</div>`
-          : html`
+        <slot name="story"></slot>
+        ${this.deviceMode === true
+          ? html`
              <iframe
                part="iframe"
                csp=${`script-src ${document.location.origin} 'unsafe-inline'; connect-src ws://${document.location.host}/`}
@@ -561,7 +570,8 @@ export class MdJsPreview extends LitElement {
              <p part="frame-description" style=${`width: ${this.sizeData.width + 4}px;`}>
                ${this.sizeData.name} - ${this.deviceHeight}x${this.sizeData.width}
              </p>
-            `}
+            `
+          : nothing}
      </div>
      <lion-accordion class="options">
        ${this.deviceMode
@@ -610,6 +620,10 @@ export class MdJsPreview extends LitElement {
        padding-bottom: 10px;
      }

+      :host([device-mode]) slot[name='story'] {
+        display: none;
+      }
+
      iframe {
        border: 2px solid #4caf50;
        background: #fff;
--- a/packages/mdjs-preview/test-web/mdjs-preview.test.js
+++ b/packages/mdjs-preview/test-web/mdjs-preview.test.js
@@ -1,4 +1,5 @@
 import { expect, fixture, html } from '@open-wc/testing';
+import { html as storyHtml } from '@mdjs/mdjs-preview';
 import '@mdjs/mdjs-preview/define';

 /** @typedef {import('@mdjs/mdjs-preview').MdJsPreview} MdJsPreview */
@@ -6,16 +7,16 @@ import '@mdjs/mdjs-preview/define';
 describe('mdjs-preview', () => {
  it('will render the element into the shadow root by default', async () => {
    const el = await fixture(html`
-      <mdjs-preview .story=${() => html`<p id="testing"></p>`}></mdjs-preview>
+      <mdjs-preview .story=${() => storyHtml`<p id="testing"></p>`}></mdjs-preview>
    `);
-    expect(el.shadowRoot.querySelectorAll('#testing').length).to.equal(1);
+    expect(el.querySelectorAll('#testing').length).to.equal(1);
  });

  it('sync simulator states between instances', async () => {
    const el = await fixture(html`
      <div>
-        <mdjs-preview .story=${() => html`<p></p>`}></mdjs-preview>
-        <mdjs-preview .story=${() => html`<p></p>`}></mdjs-preview>
+        <mdjs-preview .story=${() => storyHtml`<p></p>`}></mdjs-preview>
+        <mdjs-preview .story=${() => storyHtml`<p></p>`}></mdjs-preview>
      </div>
    `);
    const [preview1, preview2] = /** @type {MdJsPreview[]} */ (el.children);
--- a/packages/mdjs-story/CHANGELOG.md
+++ b/packages/mdjs-story/CHANGELOG.md
@@ -1,5 +1,47 @@
 # @mdjs/mdjs-story

+## 0.3.0
+
+### Minor Changes
+
+- 814b5d2: **BREAKING CHANGE** Render stories to light dom
+
+  ```js
+  export const story = html`
+    <p>my story</p>
+  `;
+  ```
+
+  ```html
+  <!-- before -->
+  <mdjs-story>
+    #shadow-root (open)
+    <p>my story</p>
+  </mdjs-story>
+
+  <!-- after -->
+  <mdjs-story>
+    <p>my story</p>
+  </mdjs-story>
+  ```
+
+- e1e96ac: **BREAKING CHANGE** Update to [lit](https://lit.dev/) 2
+
+  If your main lit-html version is 1.x be sure to import html for your story rendering from `@mdjs/mdjs-story`.
+
+  ````md
+  ```js script
+  import { html } from '@mdjs/mdjs-story';
+  ```
+
+  ```js story
+  export const foo = () =>
+    html`
+      <demo-element></demo-element>
+    `;
+  ```
+  ````
+
 ## 0.2.0

 ### Minor Changes
--- a/packages/mdjs-story/index.js
+++ b/packages/mdjs-story/index.js
@@ -1 +1,62 @@
 export { MdJsStory } from './src/MdJsStory.js';
+
+// reexport used lit to ensure users can sync html & rendering
+export {
+  html,
+  CSSResult,
+  adoptStyles,
+  css,
+  getCompatibleStyle,
+  supportsAdoptingStyleSheets,
+  unsafeCSS,
+  UpdatingElement,
+  notEqual,
+  ReactiveElement,
+  svg,
+  noChange,
+  nothing,
+  render,
+  LitElement,
+  defaultConverter,
+} from 'lit';
+
+export {
+  customElement,
+  property,
+  state,
+  eventOptions,
+  query,
+  queryAll,
+  queryAsync,
+  queryAssignedNodes,
+} from 'lit/decorators.js';
+
+export { directive, Directive } from 'lit/directive.js';
+
+export { AsyncDirective } from 'lit/async-directive.js';
+
+export {
+  isPrimitive,
+  TemplateResultType,
+  isTemplateResult,
+  isDirectiveResult,
+  getDirectiveClass,
+  isSingleExpression,
+  insertPart,
+  setChildPartValue,
+  setCommittedValue,
+  getCommittedValue,
+  removePart,
+  clearPart,
+} from 'lit/directive-helpers.js';
+
+export { asyncAppend } from 'lit/directives/async-append.js';
+export { asyncReplace } from 'lit/directives/async-replace.js';
+export { cache } from 'lit/directives/cache.js';
+export { classMap } from 'lit/directives/class-map.js';
+export { guard } from 'lit/directives/guard.js';
+export { ifDefined } from 'lit/directives/if-defined.js';
+export { repeat } from 'lit/directives/repeat.js';
+export { styleMap } from 'lit/directives/style-map.js';
+export { unsafeHTML } from 'lit/directives/unsafe-html.js';
+export { until } from 'lit/directives/until.js';
--- a/packages/mdjs-story/package.json
+++ b/packages/mdjs-story/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mdjs/mdjs-story",
-  "version": "0.2.0",
+  "version": "0.3.0",
  "publishConfig": {
    "access": "public"
  },
@@ -22,7 +22,6 @@
  "scripts": {
    "debug": "cd ../../ && npm run debug -- --group mdjs-story",
    "test": "npm run test:web",
-    "test:watch": "onchange 'src/**/*.{js,cjs}' 'test-node/**/*.js' -- npm run test:node",
    "test:web": "cd ../../ && npm run test:web -- --group mdjs-story"
  },
  "files": [
@@ -32,7 +31,7 @@
    "src"
  ],
  "dependencies": {
-    "lit-element": "^2.4.0"
+    "lit": "^2.0.0-rc.2"
  },
  "types": "dist-types/index.d.ts"
 }
--- a/packages/mdjs-story/src/MdJsStory.js
+++ b/packages/mdjs-story/src/MdJsStory.js
@@ -1,8 +1,8 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from 'lit';

 /**
 * @typedef {object} StoryOptions
- * @property {ShadowRoot | null} StoryOptions.shadowRoot
+ * @property {HTMLElement | null} StoryOptions.shadowRoot
 */

 /** @typedef {(options?: StoryOptions) => ReturnType<LitElement['render']>} LitHtmlStoryFn */
@@ -28,7 +28,11 @@ export class MdJsStory extends LitElement {
    this.story = () => html`<p>Loading...</p>`;
  }

+  createRenderRoot() {
+    return this;
+  }
+
  render() {
-    return this.story({ shadowRoot: this.shadowRoot });
+    return this.story({ shadowRoot: this });
  }
 }
--- a/packages/mdjs-story/test-web/mdjs-story.test.js
+++ b/packages/mdjs-story/test-web/mdjs-story.test.js
@@ -0,0 +1,15 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { html as storyHtml } from '@mdjs/mdjs-story';
+
+import '@mdjs/mdjs-story/define';
+
+/** @typedef {import('@mdjs/mdjs-preview').MdJsPreview} MdJsPreview */
+
+describe('mdjs-story', () => {
+  it('will render the element into the light dom by default', async () => {
+    const el = await fixture(html`
+      <mdjs-story .story=${() => storyHtml`<p id="testing"></p>`}></mdjs-story>
+    `);
+    expect(el.querySelectorAll('#testing').length).to.equal(1);
+  });
+});
--- a/packages/plugins-manager/CHANGELOG.md
+++ b/packages/plugins-manager/CHANGELOG.md
@@ -1,5 +1,11 @@
 # plugins-manager

+## 0.2.2
+
+### Patch Changes
+
+- 56fdb0c: Optional parameters are now also define as optional in types
+
 ## 0.2.1

 ### Patch Changes
--- a/packages/plugins-manager/package.json
+++ b/packages/plugins-manager/package.json
@@ -1,6 +1,6 @@
 {
  "name": "plugins-manager",
-  "version": "0.2.1",
+  "version": "0.2.2",
  "publishConfig": {
    "access": "public"
  },
--- a/packages/search/package.json
+++ b/packages/search/package.json
@@ -45,7 +45,7 @@
    "@open-wc/scoped-elements": "^1.3.2",
    "chalk": "^4.0.0",
    "minisearch": "^3.0.2",
-    "plugins-manager": "^0.2.1",
+    "plugins-manager": "^0.2.2",
    "sax-wasm": "^2.0.0"
  }
 }
--- a/rocket.config.js
+++ b/rocket.config.js
@@ -25,6 +25,7 @@ const config = {
    }),
  ],
  // serviceWorkerName: 'sw.js',
+  // pathPrefix: '/_site/',

  // emptyOutputDir: false,
 };
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,10 +7,10 @@
  resolved "https://registry.yarnpkg.com/@11ty/dependency-tree/-/dependency-tree-1.0.0.tgz#b1fa53da49aafe0ab3fe38bc6b6058b704aa59a1"
  integrity sha512-2FWYlkphQ/83MG7b9qqBJfJJ0K9zupNz/6n4EdDuNLw6hQHGp4Sp4UMDRyBvA/xCTYDBaPSuSjHuu45tSujegg==

-"@11ty/eleventy-cache-assets@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@11ty/eleventy-cache-assets/-/eleventy-cache-assets-2.0.4.tgz#8a4da7b61c0933566877cda8db9a47d6c594c78e"
-  integrity sha512-EP3QYeHo3yfKF92R5Mh9MaLLgZjZNxWM8c0BwLNUCeZpOOA4Ry9HOs8k+6pNQ0wletUvMSnuzIa1hMiC67OcGw==
+"@11ty/eleventy-cache-assets@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@11ty/eleventy-cache-assets/-/eleventy-cache-assets-2.2.1.tgz#465ebc794102b1e20b71207010de272c1a3191ab"
+  integrity sha512-RnbYXSFmj0d7+9kOPdCmdFou3616++aCNLBBNXxjVJF5tXdziO8PdjS9w0ktBgCIGfxz1/nwPHhL+HEqo3Iz/Q==
  dependencies:
    debug "^4.3.1"
    flat-cache "^3.0.4"
@@ -18,17 +18,17 @@
    p-queue "^6.6.2"
    short-hash "^1.0.0"

-"@11ty/eleventy-img@^0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@11ty/eleventy-img/-/eleventy-img-0.7.4.tgz#571f90f87bbfcfca1cffda9719de34965ada4a2e"
-  integrity sha512-yw1nxe9dBz7skrrcPoDodCGvqYjj4R77YWHsBz4UWBcyLcnWI+iJ+wJXhKfEhDkBNRmp9/28vJZFKqvL1q8fAQ==
+"@11ty/eleventy-img@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@11ty/eleventy-img/-/eleventy-img-0.9.0.tgz#bf9e469f3c48778fa0c6f6f7f949524207420cc3"
+  integrity sha512-bw6++TlUokFuv/VUvnAyVQp5bykSleVvmvedIWkN8iKMykrNnf+UAUi9byXrlsFwgUvWBdMZH+0j1/1nKhv5VQ==
  dependencies:
-    "@11ty/eleventy-cache-assets" "^2.0.4"
+    "@11ty/eleventy-cache-assets" "^2.2.1"
    debug "^4.3.1"
    fs-extra "^9.0.1"
    image-size "^0.9.3"
    p-queue "^6.6.2"
-    sharp "^0.27.0"
+    sharp "^0.28.2"
    short-hash "^1.0.0"

 "@11ty/eleventy@^0.11.1":
@@ -1096,6 +1096,13 @@
    minimatch "^3.0.4"
    strip-json-comments "^3.1.1"

+"@esm-bundle/chai@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@esm-bundle/chai/-/chai-4.3.4.tgz#74ed4a0794b3a9f9517ff235744ac6f4be0d34dc"
+  integrity sha512-6Tx35wWiNw7X0nLY9RMx8v3EL8SacCFW+eEZOE9Hc+XxmU5HFE2AFEg+GehUZpiyDGwVvPH75ckGlqC7coIPnA==
+  dependencies:
+    "@types/chai" "^4.2.12"
+
 "@lion/accordion@^0.4.2":
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/@lion/accordion/-/accordion-0.4.2.tgz#efeb56360113a2b68e182ff29ef0932edd17df8c"
@@ -1157,6 +1164,11 @@
    "@popperjs/core" "^2.5.4"
    singleton-manager "1.4.1"

+"@lit/reactive-element@^1.0.0-rc.1", "@lit/reactive-element@^1.0.0-rc.2":
+  version "1.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.0.0-rc.2.tgz#f24dba16ea571a08dca70f1783bd2ca5ec8de3ee"
+  integrity sha512-cujeIl5Ei8FC7UHf4/4Q3bRJOtdTe1vpJV/JEBYCggedmQ+2P8A2oz7eE+Vxi6OJ4nc0X+KZxXnBoH4QrEbmEQ==
+
 "@manypkg/find-root@^1.1.0":
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f"
@@ -1212,7 +1224,7 @@
  resolved "https://registry.yarnpkg.com/@open-wc/dedupe-mixin/-/dedupe-mixin-1.3.0.tgz#0df5d438285fc3482838786ee81895318f0ff778"
  integrity sha512-UfdK1MPnR6T7f3svzzYBfu3qBkkZ/KsPhcpc3JYhsUY4hbpwNF9wEQtD4Z+/mRqMTJrKg++YSxIxE0FBhY3RIw==

-"@open-wc/scoped-elements@^1.2.4", "@open-wc/scoped-elements@^1.3.2":
+"@open-wc/scoped-elements@^1.3.2":
  version "1.3.2"
  resolved "https://registry.yarnpkg.com/@open-wc/scoped-elements/-/scoped-elements-1.3.2.tgz#6ae54c49731bbe8c3e0b5383c989f983dcdfacf5"
  integrity sha512-DoP3XA8r03tGx+IrlJwP/voLuDFkyS56kvwhmXIhpESo7M5jMt5e0zScNrawj7EMe4b5gDaJjorx2Jza8FLaLw==
@@ -1228,6 +1240,15 @@
    "@open-wc/dedupe-mixin" "^1.3.0"
    lit-html "^1.0.0"

+"@open-wc/scoped-elements@^2.0.0-next.0":
+  version "2.0.0-next.3"
+  resolved "https://registry.yarnpkg.com/@open-wc/scoped-elements/-/scoped-elements-2.0.0-next.3.tgz#adbd9d6fddc67158fd11ffe78c5e11aefdaaf8af"
+  integrity sha512-9dT+0ea/RKO3s2m5H+U8gwG7m1jE89JhgWKI6FnkG4pE9xMx8KACoLZZcUfogVjb6/vKaIeoCj6Mqm+2HiqCeQ==
+  dependencies:
+    "@lit/reactive-element" "^1.0.0-rc.1"
+    "@open-wc/dedupe-mixin" "^1.3.0"
+    "@webcomponents/scoped-custom-element-registry" "0.0.1"
+
 "@open-wc/semantic-dom-diff@^0.13.16":
  version "0.13.21"
  resolved "https://registry.yarnpkg.com/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.13.21.tgz#718b9ec5f9a98935fc775e577ad094ae8d8b7dea"
@@ -1240,32 +1261,29 @@
  dependencies:
    "@types/chai" "^4.2.11"

-"@open-wc/testing-helpers@^1.8.12":
-  version "1.8.12"
-  resolved "https://registry.yarnpkg.com/@open-wc/testing-helpers/-/testing-helpers-1.8.12.tgz#449865689b0283c117326c1e0975834406bb0855"
-  integrity sha512-+4exEHYvnFqI1RGDDIKFHPZ7Ws5NK1epvEku3zLaOYN3zc+huX19SndNc5+X++v8A+quN/iXbHlh80ROyNaYDA==
+"@open-wc/testing-helpers@^2.0.0-next.0":
+  version "2.0.0-next.0"
+  resolved "https://registry.yarnpkg.com/@open-wc/testing-helpers/-/testing-helpers-2.0.0-next.0.tgz#ece19e1c22ff91ae5f6ff2fae199719b7a7bfce7"
+  integrity sha512-94TL8IK05w1JyN8xt7t+vQBQYPdPy/JSJbWJ/ytvStou085SoDN6p1xCPh1PNhjm9LALc60nWM8qb2J2YRT8QA==
  dependencies:
-    "@open-wc/scoped-elements" "^1.2.4"
-    lit-element "^2.2.1"
-    lit-html "^1.0.0"
+    "@open-wc/scoped-elements" "^2.0.0-next.0"
+    lit "^2.0.0-rc.1"

-"@open-wc/testing@^2.5.32":
-  version "2.5.32"
-  resolved "https://registry.yarnpkg.com/@open-wc/testing/-/testing-2.5.32.tgz#8bbb65773f650deff06b06277df8cdacd4d6806f"
-  integrity sha512-vl8VwTG3CVLwLcd1mpts8D9xPptc6xPL/9AHEbQxX1IQsFBEiFQdARSp1+V/i7gK2+peXeotqrZ5NvoHxl/lLw==
+"@open-wc/testing@^3.0.0-next.1":
+  version "3.0.0-next.1"
+  resolved "https://registry.yarnpkg.com/@open-wc/testing/-/testing-3.0.0-next.1.tgz#c5c08093439450ed2c871ad18a7ccef787ea15f4"
+  integrity sha512-dDgbqIgNTizSugrya6iSh9s3VS2xsZ3HURFpRVTlKGbEE7OYrRHcBBe73DiSWLRPeYyagVZsOshTUPfTBGamwQ==
  dependencies:
+    "@esm-bundle/chai" "^4.3.4"
    "@open-wc/chai-dom-equals" "^0.12.36"
    "@open-wc/semantic-dom-diff" "^0.19.3"
-    "@open-wc/testing-helpers" "^1.8.12"
+    "@open-wc/testing-helpers" "^2.0.0-next.0"
    "@types/chai" "^4.2.11"
    "@types/chai-dom" "^0.0.9"
-    "@types/mocha" "^5.0.0"
+    "@types/mocha" "^5.2.7"
    "@types/sinon-chai" "^3.2.3"
-    chai "^4.2.0"
    chai-a11y-axe "^1.3.1"
-    chai-dom "^1.8.1"
    mocha "^6.2.2"
-    sinon-chai "^3.3.0"

 "@popperjs/core@^2.5.4":
  version "2.6.0"
@@ -1404,6 +1422,11 @@
  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.14.tgz#44d2dd0b5de6185089375d976b4ec5caf6861193"
  integrity sha512-G+ITQPXkwTrslfG5L/BksmbLUA0M1iybEsmCWPqzSxsRRhJZimBKJkoMi8fr/CPygPTj4zO5pJH7I2/cm9M7SQ==

+"@types/chai@^4.2.12":
+  version "4.2.18"
+  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.18.tgz#0c8e298dbff8205e2266606c1ea5fbdba29b46e4"
+  integrity sha512-rS27+EkB/RE1Iz3u0XtVL5q36MGDWbgYe7zWiodyKNUnthxY0rukK5V36eiUCtCisB7NN8zKYH6DO2M37qxFEQ==
+
 "@types/command-line-args@^5.0.0":
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/@types/command-line-args/-/command-line-args-5.0.0.tgz#484e704d20dbb8754a8f091eee45cdd22bcff28c"
@@ -1550,7 +1573,7 @@
  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.1.tgz#283f669ff76d7b8260df8ab7a4262cc83d988256"
  integrity sha512-fZQQafSREFyuZcdWFAExYjBiCL7AUCdgsk80iO0q4yihYYdcIiH28CcuPTGFgLOCC8RlW49GSQxdHwZP+I7CNg==

-"@types/mocha@^5.0.0":
+"@types/mocha@^5.2.7":
  version "5.2.7"
  resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.2.7.tgz#315d570ccb56c53452ff8638738df60726d5b6ea"
  integrity sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==
@@ -1640,6 +1663,11 @@
  resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.2.tgz#3a84cf5ec3249439015e14049bd3161419bf9eae"
  integrity sha512-dIPoZ3g5gcx9zZEszaxLSVTvMReD3xxyyDnQUjA6IYDG9Ba2AV0otMPs+77sG9ojB4Qr2N2Vk5RnKeuA0X/0bg==

+"@types/trusted-types@^1.0.1":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-1.0.6.tgz#569b8a08121d3203398290d602d84d73c8dcf5da"
+  integrity sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw==
+
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
@@ -1847,13 +1875,14 @@
  dependencies:
    glob "^7.0.0"

-"@web/rollup-plugin-html@^1.6.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@web/rollup-plugin-html/-/rollup-plugin-html-1.6.0.tgz#fd3f406fd6d74a0cded581953a3146fe9f0454ad"
-  integrity sha512-m5xDI6ZhdAI2nfHwU3NXJ/dcDWghR+g/RrlAtIWYlj8NvXk/ZNqVVK1NbJrI/e5RlgDQ/+OycjmKgyAP9W1tWA==
+"@web/rollup-plugin-html@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@web/rollup-plugin-html/-/rollup-plugin-html-1.8.0.tgz#6be12acca2158f7aa105f1d6767ac8a95d5f02fc"
+  integrity sha512-aVOPpbnpXsIt0G3vVvtUz2ioKP9zUKmbE6wcTcFD/ncxM72JzTsUmIQAITGaoZMFjAwhKBEPYBbySDJJF/MvAg==
  dependencies:
    "@web/parse5-utils" "^1.2.2"
    glob "^7.1.6"
+    html-minifier-terser "^5.1.1"
    parse5 "^6.0.1"

 "@web/rollup-plugin-import-meta-assets@^1.0.4":
@@ -1959,6 +1988,11 @@
    portfinder "^1.0.28"
    source-map "^0.7.3"

+"@webcomponents/scoped-custom-element-registry@0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@webcomponents/scoped-custom-element-registry/-/scoped-custom-element-registry-0.0.1.tgz#196365260a019f87bddbded154ab09faf0e666fc"
+  integrity sha512-ef5/v4U2vCxrnSMpo41LSWTjBOXCQ4JOt4+Y6PaSd8ympYioPhOP6E1tKmIk2ppwLSjCKbTyYf7ocHvwDat7bA==
+
 "@webcomponents/webcomponentsjs@^2.5.0":
  version "2.5.0"
  resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.5.0.tgz#61b27785a6ad5bfd68fa018201fe418b118cb38d"
@@ -2184,11 +2218,6 @@ array-differ@^3.0.0:
  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-3.0.0.tgz#3cbb3d0f316810eafcc47624734237d6aee4ae6b"
  integrity sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==

-array-flatten@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-3.0.0.tgz#6428ca2ee52c7b823192ec600fa3ed2f157cd541"
-  integrity sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA==
-
 array-union@^1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -2563,6 +2592,14 @@ callsites@^3.0.0:
  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==

+camel-case@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
+  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
+  dependencies:
+    pascal-case "^3.1.2"
+    tslib "^2.0.3"
+
 camelcase-keys@^6.2.2:
  version "6.2.2"
  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
@@ -2622,11 +2659,6 @@ chai-a11y-axe@^1.3.1:
  dependencies:
    axe-core "^4.0.2"

-chai-dom@^1.8.1:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/chai-dom/-/chai-dom-1.8.2.tgz#e06353baeafa8fddaaabda96a67f859c111a3c7c"
-  integrity sha512-kk2SnCuJliouO5M58OjA7M8VXN338WAxHOm+LbpjeL09pJgRpXugSC5aj8uwFm/6Lmpcdtq7hf+DldTdBm5/Sw==
-
 chai@^4.2.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/chai/-/chai-4.2.0.tgz#760aa72cf20e3795e84b12877ce0e83737aa29e5"
@@ -2758,7 +2790,7 @@ ci-info@^2.0.0:
  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==

-clean-css@^4.1.11:
+clean-css@^4.1.11, clean-css@^4.2.3:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
  integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
@@ -2940,6 +2972,11 @@ commander@^2.19.0, commander@^2.2.0, commander@^2.20.0:
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==

+commander@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^5.1.0:
  version "5.1.0"
  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -3274,13 +3311,6 @@ decompress-response@^4.2.0:
  dependencies:
    mimic-response "^2.0.0"

-decompress-response@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
-  integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==
-  dependencies:
-    mimic-response "^3.1.0"
-
 dedent@^0.7.0:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
@@ -3402,6 +3432,11 @@ devtools-protocol@0.0.818844:
  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.818844.tgz#d1947278ec85b53e4c8ca598f607a28fa785ba9e"
  integrity sha512-AD1hi7iVJ8OD0aMLQU5VK0XH9LDlA1+BcPIgrAxPfaibx2DbWucuyOhc4oyQCbnvDDO68nN6/LcKfqTP343Jjg==

+devtools-protocol@0.0.869402:
+  version "0.0.869402"
+  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.869402.tgz#03ade701761742e43ae4de5dc188bcd80f156d8d"
+  integrity sha512-VvlVYY+VDJe639yHs5PHISzdWTLL3Aw8rO4cvUtwvoxFd6FHbE4OpHHcde52M6096uYYazAmd4l0o5VuFRO2WA==
+
 diff@3.5.0:
  version "3.5.0"
  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -3441,6 +3476,14 @@ doctypes@^1.1.0:
  resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
  integrity sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=

+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
 dynamic-import-polyfill@^0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/dynamic-import-polyfill/-/dynamic-import-polyfill-0.1.1.tgz#e1f9eb1876ee242bd56572f8ed4df768e143083f"
@@ -4498,7 +4541,7 @@ hastscript@^6.0.0:
    property-information "^5.0.0"
    space-separated-tokens "^1.0.0"

-he@1.2.0:
+he@1.2.0, he@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -4513,6 +4556,19 @@ html-escaper@^2.0.0:
  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==

+html-minifier-terser@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054"
+  integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==
+  dependencies:
+    camel-case "^4.1.1"
+    clean-css "^4.2.3"
+    commander "^4.1.1"
+    he "^1.2.0"
+    param-case "^3.0.3"
+    relateurl "^0.2.7"
+    terser "^4.6.3"
+
 html-void-elements@^1.0.0:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"
@@ -5342,18 +5398,42 @@ listr2@^3.2.2:
    rxjs "^6.6.3"
    through "^2.3.8"

-lit-element@^2.0.1, lit-element@^2.2.1, lit-element@^2.4.0, lit-element@~2.4.0:
+lit-element@^2.0.1, lit-element@^2.4.0, lit-element@~2.4.0:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.4.0.tgz#b22607a037a8fc08f5a80736dddf7f3f5d401452"
  integrity sha512-pBGLglxyhq/Prk2H91nA0KByq/hx/wssJBQFiYqXhGDvEnY31PRGYf1RglVzyLeRysu0IHm2K0P196uLLWmwFg==
  dependencies:
    lit-html "^1.1.1"

+lit-element@^3.0.0-rc.2:
+  version "3.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.0.0-rc.2.tgz#883d0b6fd7b846226d360699d1b713da5fc7e1b7"
+  integrity sha512-2Z7DabJ3b5K+p5073vFjMODoaWqy5PIaI4y6ADKm+fCGc8OnX9fU9dMoUEBZjFpd/bEFR9PBp050tUtBnT9XTQ==
+  dependencies:
+    "@lit/reactive-element" "^1.0.0-rc.2"
+    lit-html "^2.0.0-rc.3"
+
 lit-html@^1.0.0, lit-html@^1.1.1, lit-html@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.3.0.tgz#c80f3cc5793a6dea6c07172be90a70ab20e56034"
  integrity sha512-0Q1bwmaFH9O14vycPHw8C/IeHMk/uSDldVLIefu/kfbTBGIc44KGH6A8p1bDfxUfHdc8q6Ct7kQklWoHgr4t1Q==

+lit-html@^2.0.0-rc.3:
+  version "2.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.0.0-rc.3.tgz#1c216e548630e18d3093d97f4e29563abce659af"
+  integrity sha512-Y6P8LlAyQuqvzq6l/Nc4z5/P5M/rVLYKQIRxcNwSuGajK0g4kbcBFQqZmgvqKG+ak+dHZjfm2HUw9TF5N/pkCw==
+  dependencies:
+    "@types/trusted-types" "^1.0.1"
+
+lit@^2.0.0-rc.1, lit@^2.0.0-rc.2:
+  version "2.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.0.0-rc.2.tgz#724a2d621aa098001d73bf7106f3a72b7b5948ef"
+  integrity sha512-BOCuoJR04WaTV8UqTKk09cNcQA10Aq2LCcBOiHuF7TzWH5RNDsbCBP5QM9sLBSotGTXbDug/gFO08jq6TbyEtw==
+  dependencies:
+    "@lit/reactive-element" "^1.0.0-rc.2"
+    lit-element "^3.0.0-rc.2"
+    lit-html "^2.0.0-rc.3"
+
 load-json-file@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
@@ -5475,6 +5555,13 @@ longest@^1.0.1:
  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
  integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=

+lower-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+  dependencies:
+    tslib "^2.0.3"
+
 lru-cache@^4.0.1, lru-cache@^4.1.5:
  version "4.1.5"
  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -5789,11 +5876,6 @@ mimic-response@^2.0.0:
  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-2.1.0.tgz#d13763d35f613d09ec37ebb30bac0469c0ee8f43"
  integrity sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==

-mimic-response@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
-  integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
-
 min-indent@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -6001,10 +6083,18 @@ nise@^4.0.4:
    just-extend "^4.0.2"
    path-to-regexp "^1.7.0"

-node-abi@^2.7.0:
-  version "2.19.3"
-  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.19.3.tgz#252f5dcab12dad1b5503b2d27eddd4733930282d"
-  integrity sha512-9xZrlyfvKhWme2EXFKQhZRp1yNWT/uI1luYPr3sFl+H4keYY4xR+1jO7mvTTijIsHf1M+QDe9uWuKeEpLInIlg==
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
+node-abi@^2.21.0:
+  version "2.26.0"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.26.0.tgz#355d5d4bc603e856f74197adbf3f5117a396ba40"
+  integrity sha512-ag/Vos/mXXpWLLAYWsAoQdgS+gW7IwvgMLOgqopm/DbzAjazLltzgzpVMsFlgmo9TzG5hGXeaBZx2AI731RIsQ==
  dependencies:
    semver "^5.4.1"

@@ -6107,7 +6197,7 @@ npm-run-path@^4.0.0:
  dependencies:
    path-key "^3.0.0"

-npmlog@^4.0.1, npmlog@^4.1.2:
+npmlog@^4.0.1:
  version "4.1.2"
  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -6347,6 +6437,14 @@ p-try@^2.0.0:
  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==

+param-case@^3.0.3:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 parent-module@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -6444,6 +6542,14 @@ parseurl@^1.3.2, parseurl@~1.3.2:
  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==

+pascal-case@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
 path-exists@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -6617,10 +6723,10 @@ portscanner@2.1.1:
    async "1.5.2"
    is-number-like "^1.0.3"

-prebuild-install@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-6.0.0.tgz#669022bcde57c710a869e39c5ca6bf9cd207f316"
-  integrity sha512-h2ZJ1PXHKWZpp1caLw0oX9sagVpL2YTk+ZwInQbQ3QqNd4J03O6MpFNmMTJlkfgPENWqe5kP0WjQLqz5OjLfsw==
+prebuild-install@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-6.1.2.tgz#6ce5fc5978feba5d3cbffedca0682b136a0b5bff"
+  integrity sha512-PzYWIKZeP+967WuKYXlTOhYBgGOvTRSfaKI89XnfJ0ansRAH7hDU45X+K+FZeI1Wb/7p/NnuctPH3g0IqKUuSQ==
  dependencies:
    detect-libc "^1.0.3"
    expand-template "^2.0.3"
@@ -6628,7 +6734,7 @@ prebuild-install@^6.0.0:
    minimist "^1.2.3"
    mkdirp-classic "^0.5.3"
    napi-build-utils "^1.0.1"
-    node-abi "^2.7.0"
+    node-abi "^2.21.0"
    noop-logger "^0.1.1"
    npmlog "^4.0.1"
    pump "^3.0.0"
@@ -6636,7 +6742,6 @@ prebuild-install@^6.0.0:
    simple-get "^3.0.3"
    tar-fs "^2.0.0"
    tunnel-agent "^0.6.0"
-    which-pm-runs "^1.0.0"

 preferred-pm@^3.0.0:
  version "3.0.2"
@@ -6880,19 +6985,19 @@ puppeteer-core@^5.5.0:
    unbzip2-stream "^1.3.3"
    ws "^7.2.3"

-puppeteer@^5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-5.5.0.tgz#331a7edd212ca06b4a556156435f58cbae08af00"
-  integrity sha512-OM8ZvTXAhfgFA7wBIIGlPQzvyEETzDjeRa4mZRCRHxYL+GNH5WAuYUQdja3rpWZvkX/JKqmuVgbsxDNsDFjMEg==
+puppeteer@^9.0.0:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-9.1.1.tgz#f74b7facf86887efd6c6b9fabb7baae6fdce012c"
+  integrity sha512-W+nOulP2tYd/ZG99WuZC/I5ljjQQ7EUw/jQGcIb9eu8mDlZxNY2SgcJXTLG9h5gRvqA3uJOe4hZXYsd3EqioMw==
  dependencies:
    debug "^4.1.0"
-    devtools-protocol "0.0.818844"
+    devtools-protocol "0.0.869402"
    extract-zip "^2.0.0"
-    https-proxy-agent "^4.0.0"
+    https-proxy-agent "^5.0.0"
    node-fetch "^2.6.1"
    pkg-dir "^4.2.0"
    progress "^2.0.1"
-    proxy-from-env "^1.0.0"
+    proxy-from-env "^1.1.0"
    rimraf "^3.0.2"
    tar-fs "^2.0.0"
    unbzip2-stream "^1.3.3"
@@ -7179,6 +7284,11 @@ rehype-stringify@^8.0.0:
  dependencies:
    hast-util-to-html "^7.1.1"

+relateurl@^0.2.7:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
+
 remark-autolink-headings@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/remark-autolink-headings/-/remark-autolink-headings-6.0.1.tgz#074470b8ec7714a0f06fa151e293152bf9723df9"
@@ -7463,6 +7573,13 @@ semver@^7.2.1, semver@^7.3.2, semver@^7.3.4:
  dependencies:
    lru-cache "^6.0.0"

+semver@^7.3.5:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.16.2:
  version "0.16.2"
  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
@@ -7544,19 +7661,17 @@ setprototypeof@1.2.0:
  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==

-sharp@^0.27.0:
-  version "0.27.0"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.27.0.tgz#523fba913ba674985dcc688a6a5237384079d80f"
-  integrity sha512-II+YBCW3JuVWQZdpTEA2IBjJcYXPuoKo3AUqYuW+FK9Um93v2gPE2ihICCsN5nHTUoP8WCjqA83c096e8n//Rw==
+sharp@^0.28.2:
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.28.2.tgz#31c6ebdf8ddb9b4ca3e30179e3f4a73f0c7474e4"
+  integrity sha512-CdmySbsQVe/+ZM2j9zzvUfWumM0L0iHj1kpxJMFuyWvSuBULebvGCdOLb1f5vbbBrIGroX714Fx1wiWaKniz4A==
  dependencies:
-    array-flatten "^3.0.0"
    color "^3.1.3"
    detect-libc "^1.0.3"
    node-addon-api "^3.1.0"
-    npmlog "^4.1.2"
-    prebuild-install "^6.0.0"
-    semver "^7.3.4"
-    simple-get "^4.0.0"
+    prebuild-install "^6.1.2"
+    semver "^7.3.5"
+    simple-get "^3.1.0"
    tar-fs "^2.1.1"
    tunnel-agent "^0.6.0"

@@ -7611,7 +7726,7 @@ simple-concat@^1.0.0:
  resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
  integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==

-simple-get@^3.0.3:
+simple-get@^3.0.3, simple-get@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-3.1.0.tgz#b45be062435e50d159540b576202ceec40b9c6b3"
  integrity sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==
@@ -7620,15 +7735,6 @@ simple-get@^3.0.3:
    once "^1.3.1"
    simple-concat "^1.0.0"

-simple-get@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.0.tgz#73fa628278d21de83dadd5512d2cc1f4872bd675"
-  integrity sha512-ZalZGexYr3TA0SwySsr5HlgOOinS4Jsa8YB2GJ6lUNAazyAu4KG/VmzMTwAt2YVXzzVj8QmefmAonZIK2BSGcQ==
-  dependencies:
-    decompress-response "^6.0.0"
-    once "^1.3.1"
-    simple-concat "^1.0.0"
-
 simple-swizzle@^0.2.2:
  version "0.2.2"
  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -7641,11 +7747,6 @@ singleton-manager@1.4.1:
  resolved "https://registry.yarnpkg.com/singleton-manager/-/singleton-manager-1.4.1.tgz#0a9cd1db2b26e5cbc4ecdc20d5a16f284b36aabb"
  integrity sha512-HOvKT/WcHvl2cLYGqmO6MaC2J4wAA82LntGwtLn6avnTq15UDLCnSRVXedmglVooLbQGVsQJ+dQz2sKz+2GUZA==

-sinon-chai@^3.3.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/sinon-chai/-/sinon-chai-3.5.0.tgz#c9a78304b0e15befe57ef68e8a85a00553f5c60e"
-  integrity sha512-IifbusYiQBpUxxFJkR3wTU68xzBN0+bxCScEaKMjBvAQERg6FnTTc1F17rseLb1tjmkJ23730AXpFI0c47FgAg==
-
 sinon@^9.2.3:
  version "9.2.3"
  resolved "https://registry.yarnpkg.com/sinon/-/sinon-9.2.3.tgz#f68ce414e843e2fd638703043c97f260697caa52"
@@ -7774,7 +7875,7 @@ socket.io@2.1.1:
    socket.io-client "2.1.1"
    socket.io-parser "~3.2.0"

-source-map-support@^0.5.17, source-map-support@~0.5.19:
+source-map-support@^0.5.17, source-map-support@~0.5.12, source-map-support@~0.5.19:
  version "0.5.19"
  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -7787,7 +7888,7 @@ source-map@^0.5.0, source-map@~0.5.1:
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=

-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
  version "0.6.1"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -8156,6 +8257,15 @@ term-size@^2.1.0:
  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
  integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==

+terser@^4.6.3:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
+  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
 terser@^5.0.0:
  version "5.5.1"
  resolved "https://registry.yarnpkg.com/terser/-/terser-5.5.1.tgz#540caa25139d6f496fdea056e414284886fb2289"
@@ -8293,6 +8403,11 @@ tslib@^1.8.1, tslib@^1.9.0:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

+tslib@^2.0.3:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
+  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
+
 tsscmp@1.0.6:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
@@ -8364,10 +8479,10 @@ type-is@^1.6.16:
    media-typer "0.3.0"
    mime-types "~2.1.24"

-typescript@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
-  integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==
+typescript@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"
+  integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==

 typical@^4.0.0:
  version "4.0.0"
Author	SHA1	Message	Date
github-actions[bot]	bcf8f4fe83	Version Packages	2021-06-21 16:25:40 +02:00
Thomas Allmer	5330740cb3	fix(cli): replace images to be responsive from the bottom up	2021-06-21 16:20:48 +02:00
Thomas Allmer	2edd61beaa	chore: remove image hashes from tests	2021-06-21 15:56:41 +02:00
github-actions[bot]	2a5fc08f35	Version Packages	2021-06-21 14:37:07 +02:00
Thomas Allmer	43a7ca10c3	fix(cli): responsive images need to respect pathPrefix	2021-06-21 14:35:51 +02:00
github-actions[bot]	da39fa72f3	Version Packages	2021-06-16 09:08:08 +02:00
Thomas Allmer	a0e8edfbb9	fix(check-html-links): ignore not http schema urls	2021-06-16 09:04:05 +02:00
Thomas Allmer	50434293bb	fix(check-html-links): ignore tel links	2021-06-16 09:04:05 +02:00
Thomas Allmer	f08f92615b	fix(check-html-links): add missing `slash` dependency	2021-06-16 09:04:05 +02:00
Thomas Allmer	1949b1e1cb	fix(check-html-links): ignore html encoded mailto links	2021-06-16 09:04:05 +02:00
github-actions[bot]	340bf8e653	Version Packages	2021-06-11 17:56:06 +02:00
Thomas Allmer	eae200708d	feat: update to mdjs version with lit 2 and render to light dom	2021-06-11 17:52:15 +02:00
github-actions[bot]	f707f636fa	Version Packages	2021-06-11 13:15:48 +02:00
Thomas Allmer	814b5d29ad	feat: render mdjs stories to light dom	2021-06-11 13:03:24 +02:00
Thomas Allmer	e1e96acceb	feat: update mdjs to lit	2021-06-11 13:03:24 +02:00
github-actions[bot]	7543a129cf	Version Packages	2021-06-08 22:28:18 +02:00
Thomas Allmer	60e85a17a7	fix: support picture tags with <source srset="...">	2021-06-08 08:56:43 +02:00
github-actions[bot]	fd8f97859a	Version Packages	2021-05-30 15:30:38 +02:00
Thomas Allmer	56fdb0cbd4	fix(plugins-manager): fix types for optional parameters	2021-05-30 15:27:44 +02:00
github-actions[bot]	e6d9c74510	Version Packages	2021-05-28 09:13:38 +02:00
Maarten Stolte	c338696482	chore: add changeset	2021-05-28 09:10:47 +02:00
Maarten Stolte	2ff4b4c542	chore: updated yarn.lock	2021-05-28 09:10:47 +02:00
Maarten Stolte	ba64b45ebf	fix: update puppeteer to support M1	2021-05-28 09:10:47 +02:00
Maarten Stolte	e437e02cb9	fix(cli): Update eleventy-img to get M1 support	2021-05-28 09:10:47 +02:00
Thomas Allmer	ce9b12edd4	fix(mdjs-core): support importing via es module	2021-05-28 09:05:25 +02:00
github-actions[bot]	d034f799c0	Version Packages	2021-05-17 21:56:56 +02:00
Thomas Allmer	8bba4a88c8	feat: support for generating responsive images	2021-05-17 21:52:02 +02:00
				`@@ -0,0 +1 @@`
				`module.exports = 'do-not-generate-a-social-media-image';`