Version Packages

feat(cli): add async before11ty hook (#183 )
Version Packages
2026-03-21 15:54:57 +00:00 · 2021-07-02 13:42:36 +02:00 · 2021-07-02 11:58:54 +02:00 · 2021-06-30 15:24:07 +02:00 · 2021-06-30 15:20:51 +02:00 · 2021-06-30 15:18:36 +02:00
159 changed files with 4480 additions and 1490 deletions
--- a/.changeset/chilled-turkeys-help.md
+++ b/.changeset/chilled-turkeys-help.md
@@ -1,5 +0,0 @@
---
-'@rocket/search': patch
---
-
-chore: generalize label & add alt when no img
--- a/.changeset/many-points-eat.md
+++ b/.changeset/many-points-eat.md
@@ -1,5 +0,0 @@
---
-'@mdjs/core': minor
---
-
-Extract building of the JavaScript setup code into a unified plugin called mdjsSetupCode
--- a/.changeset/yellow-moose-play.md
+++ b/.changeset/yellow-moose-play.md
@@ -1,5 +0,0 @@
---
-'@mdjs/core': patch
---
-
-You can provide a highlightCode function to the mdjsSetupCode unified plugin
--- a/docs/_assets/body.css
+++ b/docs/_assets/body.css
@@ -0,0 +1,10 @@
+html {
+  --demo-background-color: #eee;
+  --demo-color: #222;
+}
+
+html[theme="dark"] body {
+  background: #333;
+  --demo-background-color: #888;
+  --demo-color: #eee;
+}
--- a/docs/_data/site.cjs
+++ b/docs/_data/site.cjs
@@ -9,6 +9,11 @@ module.exports = async function () {
        name: 'GitHub',
        url: 'https://github.com/modernweb-dev/rocket',
      },
+      {
+        name: 'Slack',
+        url:
+          'https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw',
+      },
    ],
    gitSiteUrl: 'https://github.com/modernweb-dev/rocket',
    gitBranch: 'main',
--- a/docs/_includes/_joiningBlocks/head/site.njk
+++ b/docs/_includes/_joiningBlocks/head/site.njk
@@ -1,9 +1,3 @@
-<link
-  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
-  rel="stylesheet"
-/>
-<link
-  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
-  rel="stylesheet"
-/>
 <meta name="twitter:creator" content="@modern_web_dev" />
+
+<link rel="stylesheet" href="{{ '/_assets/body.css' | asset | url }}" mdjs-use>
--- a/docs/_includes/layout-playground.njk
+++ b/docs/_includes/layout-playground.njk
@@ -1,14 +0,0 @@
-<html lang="en">
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Playground</title>
-  <body>
-    <rocket-playground></rocket-playground>
-
-    <script src="https://unpkg.com/wasm-flate@0.1.12-alpha/dist/bootstrap.js"></script>
-
-    <script type="module">
-      import '@rocket/playground/rocket-playground';
-    </script>
-  </body>
-</html>
--- a/docs/docs/configuration/images.md
+++ b/docs/docs/configuration/images.md
@@ -0,0 +1,299 @@
+# 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)',
+    },
+  },
+};
+```
+
+## Ignoring Images
+
+Files ending in `.svg` or that include `rocket-ignore.` will remain untouched.
+
+For example
+
+```md
+![Logo stays svg](logo.svg)
+![Ignore by file name](my-image.rocket-unresponsive.jpg)
+![My Image Alternative Text](my-image.jpeg)
+```
+
+becomes
+
+```html
+<img src="logo.svg" alt="Logo stays svg" rocket-image="responsive" />
+<img src="my-image.rocket-unresponsive.jpg" alt="Ignore by file name" rocket-image="responsive" />
+<picture>[...] </picture>
+```
+
+### Adjusting ignore function
+
+The default ignore function looks like this
+
+```js
+/**
+ * The default responsive ignore function will ignore files
+ * - ending in `.svg`
+ * - containing `rocket-unresponsive.`
+ *
+ * @param {object} opts
+ * @param {string} opts.src
+ * @param {string} opts.title
+ * @param {string} opts.alt
+ * @param {{name: string, value: string}[]} opts.attributes
+ * @returns {boolean}
+ */
+function ignore({ src }) {
+  return src.endsWith('svg') || src.includes('rocket-unresponsive.');
+}
+```
+
+and you can adjust it by setting it via the `imagePreset`.
+
+For this example we want to also ignore `.jpeg` files.
+
+👉 `rocket.config.js`
+
+```js
+export default {
+  imagePresets: {
+    responsive: {
+      // ...
+      ignore: ({ src }) =>
+        src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
+    },
+  },
+};
+```
+
+With that setting we get the following behavior
+
+```md
+![Logo stays svg](logo.svg)
+![Ignore by file name](my-image.rocket-unresponsive.jpg)
+![My Image Alternative Text](my-image.jpeg)
+```
+
+becomes
+
+```html
+<img src="logo.svg" alt="Logo stays svg" rocket-image="responsive" />
+<img src="my-image.rocket-unresponsive.jpg" alt="Ignore by file name" rocket-image="responsive" />
+<img src="my-image.jpeg" alt="My Image Alternative Text" rocket-image="responsive" />
+```
+
+## 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/configuration/overview.md
+++ b/docs/docs/configuration/overview.md
@@ -1,4 +1,4 @@
-# Configuration >> Overview ||10
+# Configuration >> Overview || 10

 The configuration file is `rocket.config.js` or `rocket.config.mjs`.

@@ -86,3 +86,15 @@ const config = {

 export default config;
 ```
+
+## Lifecycle
+
+You can hook into the rocket lifecycle by specifying a function for `before11ty`. This function runs before 11ty calls it's write method. If it is an async function, Rocket will await it's promise.
+
+```js
+export default {
+  async before11ty() {
+    await copyDataFiles();
+  },
+};
+```
--- a/docs/docs/configuration/service-worker.md
+++ b/docs/docs/configuration/service-worker.md
@@ -0,0 +1,45 @@
+# Configuration >> Service Worker ||30
+
+Rocket does come with a default service worker that will
+
+- cache already visited pages
+- cache assets of visited pages (up to 100 files then it replaces older entries)
+- reload the page if a newer html page version is available on service worker activation
+
+## Adjusting the file name
+
+Changing the service worker file name can be quite a hassle so you can adjust generate file name via a config.
+
+👉 `rocket.config.js`
+
+```js
+export default {
+  serviceWorkerName: 'my-service-worker-name.js',
+};
+```
+
+## Meet the Service Worker
+
+The default service worker will work for many scenarios however your needs my vary.
+To enable different service worker strategies you can replace the default service worker code by providing a file at `_assets/service-worker.js`.
+This file will be auto transformed and generated in the root of the website using the defined `serviceWorkerName`.
+
+For inspiration, you can take a look at the default config.
+
+[https://github.com/modernweb-dev/rocket/blob/main/packages/cli/preset/\_assets/service-worker.js](https://github.com/modernweb-dev/rocket/blob/main/packages/cli/preset/_assets/service-worker.js)
+
+Be sure to check out [workbox](https://developers.google.com/web/tools/workbox) for more service worker magic.
+
+And if you wanna have a 30 minutes crash course we highly recommend the talk [Service Workers For The Rest Of Us](https://vimeo.com/362260166) by [Philip Walton](https://twitter.com/philwalton).
+
+## Registration
+
+The registration happens via another file that you can also overwrite at `_assets/scripts/registerServiceWorker.js`.
+
+Below you find the default implementation.
+
+<!-- prettier-ignore-start -->
+```js
+{{ '/_assets/scripts/registerServiceWorker.js' | asset | toAbsPath | inlineFilePath; }}
+```
+<!-- prettier-ignore-end -->
--- a/docs/docs/markdown-javascript/assets/demo-element.js
+++ b/docs/docs/markdown-javascript/assets/demo-element.js
@@ -0,0 +1,69 @@
+class DemoElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    this.platform = 'the web';
+    this.language = 'en-US';
+    this.theme = 'light';
+
+    this.observer = new MutationObserver(this.updateData);
+  }
+
+  updateData = () => {
+    this.platform = document.documentElement.getAttribute('platform') || 'the web';
+    this.language = document.documentElement.getAttribute('data-lang') || 'en-US';
+    this.theme = document.documentElement.getAttribute('theme') || 'light';
+    this.requestUpdate();
+  };
+
+  connectedCallback() {
+    this.updateData();
+
+    this.observer.observe(document.documentElement, { attributes: true });
+  }
+
+  requestUpdate() {
+    this.shadowRoot.innerHTML = this.render();
+  }
+
+  render() {
+    return `
+      <style>
+        :host {
+          display: block;
+          background: var(--demo-background-color);
+          color: var(--demo-color);
+          padding: 10px;
+        }
+
+        :host[platform~="web"] {
+          border-bottom: 2px solid #333;
+        }
+
+        @media screen and (min-width: 640px) {
+          .about {
+            display: flex;
+          }
+          .about ul {
+            width: 50%;
+          }
+        }
+      </style>
+
+      <p>Hello I am DemoElement 👋</p>
+      <div class="about">
+        <ul>
+          <li>My purpose is to demonstrate how an element can adopt to different environments</li>
+          <li>I like <strong>${this.platform}</strong></li>
+        </ul>
+        <ul>
+          <li>My mother languages is <strong>${this.language}</strong></li>
+          <li>I feel very comfortable in the <strong>${this.theme}</strong></li>
+        </ul>
+      </div>
+    `;
+  }
+}
+
+customElements.define('demo-element', DemoElement);
--- 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`.
@@ -56,20 +62,13 @@ mdjs comes with some additional helpers you can choose to import:

 ````md
 ```js script
-import '@mdjs/mdjs-story/mdjs-story.js';
-import '@mdjs/mdjs-preview/mdjs-preview.js';
+import '@mdjs/mdjs-story/define';
+import '@mdjs/mdjs-preview/define';
 ```
 ````

 Once loaded you can use them like so:

-````md
-```js script
-import '@mdjs/mdjs-story/mdjs-story.js';
-import '@mdjs/mdjs-preview/mdjs-preview.js';
-```
-````
-
 ### 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/mdjs-story.js';
-import '@mdjs/mdjs-preview/mdjs-preview.js';
-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
@@ -2,22 +2,165 @@

 You can showcase live running code by annotating a code block with `js preview-story`.

+## Features
+
+- Shows components inside the page as they are
+- You can enable “Simulation Mode” to break them out
+- Simulation mode renders in an iframe to supporting media queries and isolated Simulation settings
+- Simulation Settings
+  - Style (windows, mac, android, iOS)
+  - Size (small, medium, large, Galaxy S5, iPhone X, iPad …)
+  - Automatic Height
+  - Theme (light, dark)
+  - Language (en, nl, …)
+- Settings are ”global” for all Simulators (e.g. changing one will change all)
+- 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';
 ```

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

 ```js preview-story
-export const foo = () => html` <p>my html</p> `;
+export const foo = () => html`<demo-element></demo-element>`;
 ```
 ````

 will result in

 ```js preview-story
-export const foo = () => html` <p>my html</p> `;
+export const foo = () => html` <demo-element></demo-element> `;
+```
+
+## HTML Story
+
+````md
+```html preview-story
+<demo-element></demo-element>
+```
+````
+
+will result in
+
+```html preview-story
+<demo-element></demo-element>
+```
+
+## Setup Simulation Mode
+
+For simulation mode we need a dedicated html file that will be used as an iframe target while loading stories.
+
+The fastest way to create such a file is to use the `layout-simulator` layout.
+
+Create a file `docs/simulator.md` with the following content.
+
+```md
+---
+layout: layout-simulator
+eleventyExcludeFromCollections: true
+excludeFromSearch: true
+---
+```
+
+Once you have that you need to configure it for the story renderer by setting it in your `rocket.config.js`.
+
+```js
+export default {
+  setupUnifiedPlugins: [
+    adjustPluginOptions('mdjsSetupCode', {
+      simulationSettings: { simulatorUrl: '/simulator/' },
+    }),
+  ],
+};
+```
+
+<inline-notification type="tip">
+
+You can freely choose the path for the "simulator" by creating the md file in a different folder and adjusting the path in the config.
+
+</inline-notification>
+
+## Simulator states
+
+To simulate these stats that usually come from the device itself we put those infos on the document tag.
+
+We can simulate the following settings
+
+1. `platform`
+   Adopting styles and behavior depending on which device platform you are.
+   ```html
+   <html platform="web"></html>
+   <html platform="android"></html>
+   <html platform="ios"></html>
+   <!-- potentially later -->
+   <html platform="web-windows"></html>
+   <html platform="web-mac"></html>
+   ```
+2. `theme`
+   Adjust your styles based on a theme - light/dark are the default but you can add as many as you want.
+   ```html
+   <html theme="light"></html>
+   <html theme="dark"></html>
+   ```
+3. `language`
+   Best to relay on `data-lang` as `lang` often gets changes by translations services which may interfere with your translation loading system.
+   ```html
+   <html lang="en-US" data-lang="en-US"></html>
+   <html lang="de-DE" data-lang="de-DE"></html>
+   ```
+
+If you want to react to such document changes you can use an [MutationObserver](https://developer.mozilla.org/de/docs/Web/API/MutationObserver).
+
+For a vanilla web component it could look something like this:
+
+```js
+class DemoElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    this.platform = 'the web';
+    this.language = 'en-US';
+    this.theme = 'light';
+
+    this.observer = new MutationObserver(this.updateData);
+  }
+
+  updateData = () => {
+    this.platform = document.documentElement.getAttribute('platform') || 'the web';
+    this.language = document.documentElement.getAttribute('data-lang') || 'en-US';
+    this.theme = document.documentElement.getAttribute('theme') || 'light';
+    this.requestUpdate();
+  };
+
+  connectedCallback() {
+    this.updateData();
+
+    this.observer.observe(document.documentElement, { attributes: true });
+  }
+
+  requestUpdate() {
+    this.shadowRoot.innerHTML = this.render();
+  }
+
+  render() {
+    return `
+      ...
+    `;
+  }
+}
+
+customElements.define('demo-element', DemoElement);
+```
+
+```js script
+import '@rocket/launch/inline-notification/inline-notification.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/docs/docs/tools/rollup-config.md
+++ b/docs/docs/tools/rollup-config.md
@@ -8,7 +8,6 @@ You write modern JavaScript using the latest browser features. Rollup will optim
 - Set HTML or JavaScript as input and/or output
 - Optimized for browsers which support modules
 - Loads polyfills using feature detection
- Generates a service worker
 - Minifies JavaScript
 - Minifies lit-html templates

--- a/docs/guides/go-live/social-media.md
+++ b/docs/guides/go-live/social-media.md
@@ -5,7 +5,7 @@ For that reason Rocket creates those automatically with the title, parent title,

 It will look like this but with your logo:

-<img src="{{ socialMediaImage }}" width="1200" height="630" alt="Social Media Image of this page" style="border: 1px solid #000" />
+<img src="{{ socialMediaImage | url }}" width="1200" height="630" alt="Social Media Image of this page" style="border: 1px solid #000" />

 There are multiple ways you can modify it.

--- a/docs/guides/presets/options.md
+++ b/docs/guides/presets/options.md
@@ -0,0 +1,11 @@
+# Presets >> Create your own > Options || 10
+
+Your preset can hook into the rocket lifecycle by specifying a function for `before11ty`. This function runs before 11ty calls it's write method. If it is an async function, Rocket will await it's promise.
+
+```js
+export default {
+  async before11ty() {
+    await copyDataFiles();
+  },
+};
+```
--- a/docs/playground.md
+++ b/docs/playground.md
@@ -1,3 +0,0 @@
---
-layout: layout-playground
---
--- a/docs/simulator.md
+++ b/docs/simulator.md
@@ -0,0 +1,5 @@
+---
+layout: layout-simulator
+eleventyExcludeFromCollections: true
+excludeFromSearch: true
+---
--- 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,23 @@
 # @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
+
+- 2724f07: Stop auto generating a service worker from a template. Setup your own and then bundle via `createServiceWorkerConfig`.
+
+## 0.2.0
+
+### Minor Changes
+
+- bad4686: Preserve attributes on script tags. Preserve export names.
+
 ## 0.1.3

 ### Patch Changes
--- a/packages/building-rollup/index.js
+++ b/packages/building-rollup/index.js
@@ -6,3 +6,7 @@
 export { createBasicConfig, createBasicMetaConfig } from './src/createBasicConfig.js';
 export { createSpaConfig, createSpaMetaConfig } from './src/createSpaConfig.js';
 export { createMpaConfig, createMpaMetaConfig } from './src/createMpaConfig.js';
+export {
+  createServiceWorkerConfig,
+  createServiceWorkerMetaConfig,
+} from './src/createServiceWorkerConfig.js';
--- a/packages/building-rollup/package.json
+++ b/packages/building-rollup/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/building-rollup",
-  "version": "0.1.3",
+  "version": "0.3.1",
  "publishConfig": {
    "access": "public"
  },
@@ -13,8 +13,8 @@
  },
  "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
  "homepage": "https://rocket.modern-web.dev/docs/tools/building-rollup/",
-  "type": "module",
  "main": "./index.js",
+  "type": "module",
  "exports": {
    ".": "./index.js"
  },
@@ -55,11 +55,16 @@
    "@babel/preset-env": "^7.12.11",
    "@rollup/plugin-babel": "^5.2.2",
    "@rollup/plugin-node-resolve": "^11.0.1",
-    "@web/rollup-plugin-html": "^1.4.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@web/rollup-plugin-html": "^1.8.0",
    "@web/rollup-plugin-import-meta-assets": "^1.0.4",
-    "@web/rollup-plugin-polyfills-loader": "^1.0.3",
+    "@web/rollup-plugin-polyfills-loader": "^1.1.0",
    "browserslist": "^4.16.1",
    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-workbox": "^6.1.0"
+    "workbox-broadcast-update": "^6.1.5",
+    "workbox-cacheable-response": "^6.1.5",
+    "workbox-expiration": "^6.1.5",
+    "workbox-routing": "^6.1.5",
+    "workbox-strategies": "^6.1.5"
  }
 }
--- a/packages/building-rollup/src/createBasicConfig.js
+++ b/packages/building-rollup/src/createBasicConfig.js
@@ -22,7 +22,7 @@ export function createBasicMetaConfig(userConfig = { output: {} }) {
  const assetName = `[${developmentMode ? 'name' : 'hash'}][extname]`;

  const config = {
-    preserveEntrySignatures: false,
+    preserveEntrySignatures: 'strict',
    treeshake: !developmentMode,
    setupPlugins: [],
    ...userConfig,
--- a/packages/building-rollup/src/createMpaConfig.js
+++ b/packages/building-rollup/src/createMpaConfig.js
@@ -15,10 +15,6 @@ export function createMpaMetaConfig(userConfig = { output: {}, setupPlugins: []
    adjustPluginOptions('html', {
      flattenOutput: false,
    }),
-    adjustPluginOptions('workbox', config => {
-      delete config.navigateFallback;
-      return config;
-    }),
    ...config.setupPlugins,
  ];

--- a/packages/building-rollup/src/createServiceWorkerConfig.js
+++ b/packages/building-rollup/src/createServiceWorkerConfig.js
@@ -0,0 +1,91 @@
+import resolve from '@rollup/plugin-node-resolve';
+import { terser } from 'rollup-plugin-terser';
+import babelPkg from '@rollup/plugin-babel';
+import replace from '@rollup/plugin-replace';
+
+import { metaConfigToRollupConfig } from 'plugins-manager';
+
+const { babel } = babelPkg;
+
+export function createServiceWorkerConfig(userConfig) {
+  const { config, metaPlugins } = createServiceWorkerMetaConfig(userConfig);
+  return metaConfigToRollupConfig(config, metaPlugins);
+}
+
+export function createServiceWorkerMetaConfig(userConfig = { output: {} }) {
+  const developmentMode =
+    typeof userConfig.developmentMode !== undefined
+      ? userConfig.developmentMode
+      : !!process.env.ROLLUP_WATCH;
+  delete userConfig.developmentMode;
+
+  const config = {
+    treeshake: !developmentMode,
+    setupPlugins: [],
+    ...userConfig,
+
+    output: {
+      format: 'iife',
+      file: 'service-worker.js',
+      ...userConfig.output,
+    },
+  };
+
+  let metaPlugins = [
+    {
+      name: 'node-resolve',
+      plugin: resolve,
+      options: {
+        moduleDirectories: ['node_modules', 'web_modules'],
+      },
+    },
+    {
+      name: 'replace',
+      plugin: replace,
+      options: {
+        'process.env.NODE_ENV': JSON.stringify(developmentMode ? 'development' : 'production'),
+      },
+    },
+    {
+      name: 'babel',
+      plugin: babel,
+      options: {
+        babelHelpers: 'bundled',
+        compact: true,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: [
+                'last 3 Chrome major versions',
+                'last 3 ChromeAndroid major versions',
+                'last 3 Firefox major versions',
+                'last 3 Edge major versions',
+                'last 3 Safari major versions',
+                'last 3 iOS major versions',
+              ],
+              useBuiltIns: false,
+              shippedProposals: true,
+              modules: false,
+              bugfixes: true,
+            },
+          ],
+        ],
+      },
+    },
+    {
+      name: 'terser',
+      plugin: terser,
+      options: {
+        mangle: {
+          toplevel: true,
+          properties: {
+            regex: /(^_|_$)/,
+          },
+        },
+      },
+    },
+  ];
+
+  return { config, metaPlugins, developmentMode };
+}
--- a/packages/building-rollup/src/createSpaConfig.js
+++ b/packages/building-rollup/src/createSpaConfig.js
@@ -1,6 +1,4 @@
-import path from 'path';
 import { rollupPluginHTML } from '@web/rollup-plugin-html';
-import { generateSW } from 'rollup-plugin-workbox';
 import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
 import { polyfillsLoader } from '@web/rollup-plugin-polyfills-loader';
 import { metaConfigToRollupConfig } from 'plugins-manager';
@@ -37,31 +35,6 @@ export function createSpaMetaConfig(userConfig = { output: {} }) {
      options: {
        rootDir,
        absoluteBaseUrl,
-        injectServiceWorker: true,
-        serviceWorkerPath: path.join(config.output.dir, 'service-worker.js'),
-      },
-    },
-    {
-      name: 'workbox',
-      plugin: generateSW,
-      options: {
-        // Keep 'legacy-*.js' just for retro compatibility
-        globIgnores: ['polyfills/*.js', 'legacy-*.js', 'nomodule-*.js'],
-        navigateFallback: '/index.html',
-        // where to output the generated sw
-        swDest: path.join(config.output.dir, 'service-worker.js'),
-        // directory to match patterns against to be precached
-        globDirectory: path.join(config.output.dir),
-        // cache any html js and css by default
-        globPatterns: ['**/*.{html,js,css,webmanifest}', '**/*-search-index.json'],
-        skipWaiting: true,
-        clientsClaim: true,
-        runtimeCaching: [
-          {
-            urlPattern: 'polyfills/*.js',
-            handler: 'CacheFirst',
-          },
-        ],
      },
    },
    {
--- a/packages/building-rollup/test-node/createConfig.test.js
+++ b/packages/building-rollup/test-node/createConfig.test.js
@@ -9,13 +9,13 @@ describe('plugin count', () => {
    expect(config.plugins.length).to.equal(3);
  });

-  it('createSpaConfig has 7 plugins', () => {
+  it('createSpaConfig has 6 plugins', () => {
    const config = createSpaConfig();
-    expect(config.plugins.length).to.equal(7);
+    expect(config.plugins.length).to.equal(6);
  });

-  it('createMpaConfig has 7 plugins', () => {
+  it('createMpaConfig has 6 plugins', () => {
    const config = createMpaConfig();
-    expect(config.plugins.length).to.equal(7);
+    expect(config.plugins.length).to.equal(6);
  });
 });
--- a/packages/building-rollup/test-node/createMpaConfig.test.js
+++ b/packages/building-rollup/test-node/createMpaConfig.test.js
@@ -26,10 +26,7 @@ async function execute(configString) {
  const config = (await import(configPath)).default;
  await buildAndWrite(config);

-  return async (
-    fileName,
-    { stripServiceWorker = false, stripToBody = false, stripStartEndWhitespace = true } = {},
-  ) => {
+  return async (fileName, { stripToBody = false, stripStartEndWhitespace = true } = {}) => {
    let text = await fs.promises.readFile(
      path.join(config.output.dir, fileName.split('/').join(path.sep)),
    );
@@ -39,11 +36,6 @@ async function execute(configString) {
      const bodyCloseTagStart = text.indexOf('</body>');
      text = text.substring(bodyOpenTagEnd, bodyCloseTagStart);
    }
-    if (stripServiceWorker) {
-      const scriptOpenTagEnd = text.indexOf('<script inject-service-worker');
-      const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;
-      text = text.substring(0, scriptOpenTagEnd) + text.substring(scriptCloseTagStart);
-    }
    if (stripStartEndWhitespace) {
      text = text.trim();
    }
@@ -57,25 +49,26 @@ describe('createMapConfig', () => {

    const indexHtml = await readOutput('index.html', {
      stripToBody: true,
-      stripServiceWorker: true,
    });
    expect(indexHtml).to.equal('<h1>Only static HTML content in index.html</h1>');

    const subHtmlIndexHtml = await readOutput('sub-html/index.html', {
      stripToBody: true,
-      stripServiceWorker: true,
    });
    expect(subHtmlIndexHtml).to.equal('<h1>Only static HTML content in sub-html/index.html</h1>');

    const subJsIndexHtml = await readOutput('sub-js/index.html', {
      stripToBody: true,
-      stripServiceWorker: true,
    });
    expect(subJsIndexHtml).to.equal(
      '<h1>Has js in sub-js/index.html</h1>\n\n\n<script type="module" src="../sub-js.js"></script>',
    );

-    const serviceWorkerJs = await readOutput('service-worker.js');
-    expect(serviceWorkerJs).to.include('Promise'); // not empty string might be enough...
+    const subJsAbsoluteIndexHtml = await readOutput('sub-js-absolute/index.html', {
+      stripToBody: true,
+    });
+    expect(subJsAbsoluteIndexHtml).to.equal(
+      '<h1>Has js in sub-js-absolute/index.html</h1>\n\n\n<script type="module" src="../sub-js-absolute.js"></script>',
+    );
  });
 });
--- a/packages/building-rollup/test-node/fixtures/mpa/sub-js-absolute/index.html
+++ b/packages/building-rollup/test-node/fixtures/mpa/sub-js-absolute/index.html
@@ -0,0 +1,2 @@
+<h1>Has js in sub-js-absolute/index.html</h1>
+<script type="module" src="/sub-js-absolute/sub-js-absolute.js"></script>
--- a/packages/building-rollup/test-node/fixtures/mpa/sub-js-absolute/sub-js-absolute.js
+++ b/packages/building-rollup/test-node/fixtures/mpa/sub-js-absolute/sub-js-absolute.js
--- a/packages/check-html-links/CHANGELOG.md
+++ b/packages/check-html-links/CHANGELOG.md
@@ -1,5 +1,37 @@
 # 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
+
+- 66c2d78: fix: windows path issue
+
 ## 0.2.1

 ### 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.1",
+  "version": "0.2.3",
  "publishConfig": {
    "access": "public"
  },
@@ -13,11 +13,11 @@
  },
  "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
  "homepage": "https://rocket.modern-web.dev/docs/tools/check-html-links/",
+  "main": "./index.js",
  "bin": {
    "check-html-links": "src/cli.js"
  },
  "type": "module",
-  "main": "./index.js",
  "exports": {
    ".": "./index.js"
  },
@@ -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
@@ -6,6 +6,7 @@ import { createRequire } from 'module';

 import { listFiles } from './listFiles.js';
 import path from 'path';
+import slash from 'slash';

 /** @typedef {import('../types/main').Link} Link */
 /** @typedef {import('../types/main').LocalFile} LocalFile */
@@ -45,7 +46,7 @@ function extractReferences(htmlFilePath) {
    if (ev === SaxEventType.Attribute) {
      const data = /** @type {Attribute} */ (/** @type {any} */ (_data));
      const attributeName = data.name.toString();
-      const value = data.value.toString();
+      const value = slash(data.value.toString());
      const entry = {
        attribute: attributeName,
        value,
@@ -181,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
@@ -206,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')) {
@@ -218,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,144 @@
 # @rocket/cli

+## 0.9.5
+
+### Patch Changes
+
+- 1b9559f: Adds `before11ty` hook to config and presets
+
+## 0.9.4
+
+### Patch Changes
+
+- 2b5c61d: Allow configuring the imagePreset ignore rules via the option `ignore`
+
+  ```js
+  export default {
+    imagePresets: {
+      responsive: {
+        // ...
+        ignore: ({ src }) =>
+          src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
+      },
+    },
+  };
+  ```
+
+- 2b5c61d: Do not generate responsive images for files ending in `.svg` or that include `rocket-ignore.`
+- ce0b00e: don't transform external images
+- 3b1a0cf: Allow to configure check-html-links
+
+  ```js
+  export default {
+    checkLinks: {
+      /* ... */
+    },
+  };
+  ```
+
+## 0.9.3
+
+### Patch Changes
+
+- 795a361: The server worker url should respect a set pathPrefix.
+
+## 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
+
+- 2724f07: The service worker no longer precaches all urls and assets. It now
+
+  - caches already visited pages
+  - caches assets of visited pages (up to 100 files then it replaces older entries)
+  - on service worker activation it will reload the page if a newer version is available
+
+### Patch Changes
+
+- Updated dependencies [2724f07]
+  - @rocket/building-rollup@0.3.0
+
+## 0.6.3
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+- Updated dependencies [2b7f1ee]
+  - @rocket/eleventy-plugin-mdjs-unified@0.4.1
+
+## 0.6.2
+
+### Patch Changes
+
+- ed86ff2: Do not set `data-localize-lang` in the simulator iframe html tag
+- f4a0ab5: Pass document shadowRoot to iframe
+- c675820: fix: windows path issue avoid filtering of index section of collections
+
+## 0.6.1
+
+### Patch Changes
+
+- abc8a02: You can now use an absolute path for the rootDir
+- Updated dependencies [bad4686]
+- Updated dependencies [2267e72]
+  - @rocket/building-rollup@0.2.0
+  - @rocket/eleventy-plugin-mdjs-unified@0.4.0
+
 ## 0.6.0

 ### Minor Changes
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/cli",
-  "version": "0.6.0",
+  "version": "0.9.5",
  "publishConfig": {
    "access": "public"
  },
@@ -13,11 +13,11 @@
  },
  "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
  "homepage": "https://rocket.modern-web.dev/",
+  "main": "./index.cjs",
  "bin": {
    "rocket": "src/cli.js"
  },
  "type": "module",
-  "main": "./index.cjs",
  "exports": {
    ".": {
      "require": "./index.cjs",
@@ -56,10 +56,10 @@
  ],
  "dependencies": {
    "@11ty/eleventy": "^0.11.1",
-    "@11ty/eleventy-img": "^0.7.4",
-    "@rocket/building-rollup": "^0.1.3",
+    "@11ty/eleventy-img": "^0.9.0",
+    "@rocket/building-rollup": "^0.3.1",
    "@rocket/core": "^0.1.2",
-    "@rocket/eleventy-plugin-mdjs-unified": "^0.3.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,13 +67,15 @@
    "@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.1",
+    "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",
-    "utf8": "^3.0.0"
+    "plugins-manager": "^0.2.2",
+    "slash": "^3.0.0",
+    "utf8": "^3.0.0",
+    "workbox-window": "^6.1.5"
  },
  "types": "dist-types/index.d.ts"
 }
--- a/packages/cli/preset/_assets/scripts/registerServiceWorker.js
+++ b/packages/cli/preset/_assets/scripts/registerServiceWorker.js
@@ -0,0 +1,22 @@
+(async () => {
+  if ('serviceWorker' in navigator) {
+    const { Workbox } = await import('workbox-window');
+
+    const url = window.__rocketServiceWorkerUrl || '/service-worker.js';
+    const wb = new Workbox(url);
+    wb.addEventListener('message', event => {
+      if (event.data.type === 'CACHE_UPDATED') {
+        const { updatedURL } = event.data.payload;
+        console.log(`Reloading as a newer version of ${updatedURL} became available!`);
+        window.location.reload();
+      }
+    });
+    wb.register()
+      .then(function () {
+        console.log('ServiceWorker registered.');
+      })
+      .catch(function (err) {
+        console.log('ServiceWorker registration failed: ', err);
+      });
+  }
+})();
--- a/packages/cli/preset/_assets/service-worker.js
+++ b/packages/cli/preset/_assets/service-worker.js
@@ -0,0 +1,29 @@
+import { registerRoute } from 'workbox-routing';
+import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
+import { BroadcastUpdatePlugin } from 'workbox-broadcast-update';
+import { ExpirationPlugin } from 'workbox-expiration';
+
+addEventListener('install', () => {
+  // eslint-disable-next-line no-undef
+  skipWaiting();
+});
+
+// addEventListener('activate', () => {
+//   console.log('activate');
+// });
+
+const cacheFirst = new CacheFirst({
+  cacheName: 'assets',
+  plugins: [
+    new ExpirationPlugin({
+      maxEntries: 100,
+    }),
+  ],
+});
+const staleWhileRevalidate = new StaleWhileRevalidate({
+  cacheName: 'pages',
+  plugins: [new BroadcastUpdatePlugin()],
+});
+
+registerRoute(/(\/|\.html)$/, staleWhileRevalidate);
+registerRoute(/\.(css|m?js|svg|woff2|png|jpg|gif|json|xml)$/, cacheFirst);
--- a/packages/cli/preset/_includes/_joiningBlocks/bottom/180-register-service-worker.njk
+++ b/packages/cli/preset/_includes/_joiningBlocks/bottom/180-register-service-worker.njk
@@ -0,0 +1,7 @@
+{% set rocketServiceWorkerUrl = '/' + rocketConfig.serviceWorkerName %}
+
+<script>
+  window.__rocketServiceWorkerUrl = '{{ rocketServiceWorkerUrl | url }}';
+</script>
+
+<script type="module" inject-service-worker="" src="{{ '/_assets/scripts/registerServiceWorker.js' | asset | url }}"></script>
--- a/packages/cli/preset/_includes/_joiningBlocks/bottom/180-service-worker-update.njk
+++ b/packages/cli/preset/_includes/_joiningBlocks/bottom/180-service-worker-update.njk
@@ -1,3 +0,0 @@
-<script>
-  {{ '_assets/_inline-scripts/serviceWorkerUpdate.js' | asset | toAbsPath | inlineFilePath | safe }}
-</script>
--- a/packages/cli/preset/_includes/_joiningBlocks/head/20-social-media.njk
+++ b/packages/cli/preset/_includes/_joiningBlocks/head/20-social-media.njk
@@ -1,7 +1,7 @@
 <meta property="og:site_name" content="{{ site.name }}"/>
 <meta property="og:type" content="website"/>

-<meta property="og:image" content="{{ socialMediaImage }}"/>
-<meta property="og:url" content="{{ page.url }}"/>
+<meta property="og:image" content="{{ socialMediaImage | url }}"/>
+<meta property="og:url" content="{{ page.url | url }}"/>

 <meta name="twitter:card" content="summary_large_image"/>
--- a/packages/cli/preset/_includes/layout-simulator.njk
+++ b/packages/cli/preset/_includes/layout-simulator.njk
@@ -0,0 +1,69 @@
+<html theme="light" platform="web" lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type="text/css">
+      body {
+        margin: 0;
+        height: fit-content;
+      }
+      html[edge-distance] body {
+        padding: 8px;
+      }
+    </style>
+    <script type="module">
+      import { render } from '@mdjs/mdjs-story';
+
+      async function onHashChange() {
+        const urlParts = new URLSearchParams(document.location.hash.substr(1));
+
+        if (urlParts.get('stylesheets')) {
+          for (const stylesheet of urlParts.getAll('stylesheets')) {
+            if (!document.querySelector(`link[rel="stylesheet"][href="${stylesheet}"]`)) {
+              const link = document.createElement('link');
+              link.rel = 'stylesheet';
+              link.href = stylesheet;
+              document.head.appendChild(link);
+            }
+          }
+        }
+        if (urlParts.get('theme')) {
+          document.documentElement.setAttribute('theme', urlParts.get('theme'));
+        }
+        if (urlParts.get('platform')) {
+          document.documentElement.setAttribute('platform', urlParts.get('platform'));
+        }
+        if (urlParts.get('language')) {
+          document.documentElement.setAttribute('lang', urlParts.get('language'));
+          document.documentElement.setAttribute('data-lang', urlParts.get('language'));
+        }
+        if (urlParts.get('story-key')) {
+          document.documentElement.setAttribute('story-key', urlParts.get('story-key'));
+        }
+        if (urlParts.get('edge-distance') === 'true') {
+          document.documentElement.setAttribute('edge-distance', '');
+        } else {
+          document.documentElement.removeAttribute('edge-distance');
+        }
+
+        const mod = await import(urlParts.get('story-file'));
+        render(mod[urlParts.get('story-key')]({ shadowRoot: document }), document.body);
+      }
+
+      window.addEventListener('hashchange', onHashChange, false);
+      onHashChange();
+
+      const observer = new ResizeObserver(() => {
+        const dimensions = document.body.getBoundingClientRect();
+        const data = {
+          action: 'mdjs-viewer-resize',
+          storyKey: document.documentElement.getAttribute('story-key'),
+          width: dimensions.width,
+          height: dimensions.height,
+        };
+        parent.postMessage(JSON.stringify(data), '*');
+      });
+      observer.observe(document.body);
+    </script>
+  </head>
+  <body></body>
+</html>
--- a/packages/cli/src/RocketBuild.js
+++ b/packages/cli/src/RocketBuild.js
@@ -3,9 +3,10 @@

 import { rollup } from 'rollup';
 import fs from 'fs-extra';
+import path from 'path';
 import { copy } from '@web/rollup-plugin-copy';

-import { createMpaConfig } from '@rocket/building-rollup';
+import { createMpaConfig, createServiceWorkerConfig } from '@rocket/building-rollup';
 import { addPlugin, adjustPluginOptions } from 'plugins-manager';

 /**
@@ -45,7 +46,7 @@ async function productionBuild(config) {
      dir: config.outputDir,
    },
    // custom
-    rootDir: config.outputDevDir,
+    rootDir: path.resolve(config.outputDevDir),
    absoluteBaseUrl: config.absoluteBaseUrl,
    setupPlugins: [
      ...defaultSetupPlugins,
@@ -55,6 +56,18 @@ async function productionBuild(config) {
  });

  await buildAndWrite(mpaConfig);
+
+  const serviceWorkerSourcePath = path.resolve('docs/_merged_assets/service-worker.js');
+  if (fs.existsSync(serviceWorkerSourcePath)) {
+    const serviceWorkerConfig = createServiceWorkerConfig({
+      input: serviceWorkerSourcePath,
+      output: {
+        file: path.join(path.resolve(config.outputDir), config.serviceWorkerName),
+      },
+    });
+
+    await buildAndWrite(serviceWorkerConfig);
+  }
 }

 export class RocketBuild {
--- a/packages/cli/src/RocketCli.js
+++ b/packages/cli/src/RocketCli.js
@@ -31,6 +31,7 @@ export class RocketEleventy extends Eleventy {

  async write() {
    await this.__rocketCli.mergePresets();
+    for (const fn of this.__rocketCli.config.__before11tyFunctions) await fn();
    await super.write();
    await this.__rocketCli.update();
  }
@@ -120,7 +121,7 @@ export class RocketCli {
    for (const folder of ['_assets', '_data', '_includes']) {
      const to = path.join(this.config._inputDirCwdRelative, `_merged${folder}`);
      await fs.emptyDir(to);
-      for (const sourceDir of this.config._presetPathes) {
+      for (const sourceDir of this.config._presetPaths) {
        const from = path.join(sourceDir, folder);
        if (fs.existsSync(from)) {
          if (folder === '_includes') {
--- a/packages/cli/src/RocketLint.js
+++ b/packages/cli/src/RocketLint.js
@@ -50,6 +50,7 @@ export class RocketLint {

    const checkLinks = new CheckHtmlLinksCli();
    checkLinks.setOptions({
+      ...this.config.checkLinks,
      rootDir: this.config.lintInputDir,
      printOnError: false,
      continueOnError: true,
--- a/packages/cli/src/RocketStart.js
+++ b/packages/cli/src/RocketStart.js
@@ -58,12 +58,6 @@ export class RocketStart {

        setupRollupPlugins: this.config.setupDevAndBuildPlugins,
        setupPlugins: this.config.setupDevPlugins,
-        middleware: [
-          function rewriteIndex(context, next) {
-            context.set('Access-Control-Allow-Origin', '*');
-            return next();
-          },
-        ],
      },
      [],
      { rollupWrapperFunction: fromRollup },
--- a/packages/cli/src/eleventy-plugins/insertResponsiveImages.cjs
+++ b/packages/cli/src/eleventy-plugins/insertResponsiveImages.cjs
@@ -0,0 +1,265 @@
+/* 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 src {string} image src attribute value.
+ * @returns {boolean} true if src starts with https://, http:// or //
+ */
+
+function isExternalSrc(src) {
+  return /^(?:https?:)?\/\//.test(src);
+}
+
+/**
+ * @param {string} html
+ */
+function getImages(html, { imagePresets }) {
+  /** @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) {
+          const presetSettings = imagePresets[presetName];
+          if (!presetSettings) {
+            throw new Error(`Could not find imagePresets: { ${presetName}: {} }`);
+          }
+          const { ignore } = presetSettings;
+          const ignoreFn = typeof ignore === 'function' ? ignore : () => false;
+
+          if (!isExternalSrc(src) && !ignoreFn({ src, title, alt, attributes })) {
+            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, options);
+  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/rocketCollections.cjs
+++ b/packages/cli/src/eleventy-plugins/rocketCollections.cjs
@@ -1,5 +1,6 @@
 const path = require('path');
 const fs = require('fs');
+const slash = require('slash');
 const { readdirSync } = require('fs');

 function getDirectories(source) {
@@ -23,7 +24,7 @@ const rocketCollections = {
          let docs = [
            ...collection.getFilteredByGlob(`${_inputDirCwdRelative}/${section}/**/*.md`),
          ];
-          docs = docs.filter(page => page.inputPath !== `./${indexSection}`);
+          docs = docs.filter(page => page.inputPath !== `./${slash(indexSection)}`);

          return docs;
        });
--- 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
@@ -5,6 +5,7 @@
 /** @typedef {import('@web/dev-server').DevServerConfig} DevServerConfig */

 /** @typedef {import('../types/main').RocketCliOptions} RocketCliOptions */
+/** @typedef {import('../types/main').ImagePreset} ImagePreset */
 /** @typedef {import('../types/main').RocketPlugin} RocketPlugin */

 import path from 'path';
@@ -19,9 +20,25 @@ import { fileURLToPath } from 'url';

 const __dirname = path.dirname(fileURLToPath(import.meta.url));

+/**
+ * The default responsive ignore function will ignore files
+ * - ending in `.svg`
+ * - containing `rocket-unresponsive.`
+ *
+ * @param {object} opts
+ * @param {string} opts.src
+ * @param {string} opts.title
+ * @param {string} opts.alt
+ * @param {{name: string, value: string}[]} opts.attributes
+ * @returns {boolean}
+ */
+function ignore({ src }) {
+  return src.endsWith('svg') || src.includes('rocket-unresponsive.');
+}
+
 /**
 * @param {Partial<RocketCliOptions>} inConfig
- * @returns {Promise<RocketCliOptions>}
+ * @returns {Promise<RocketCliOptions & { __before11tyFunctions: RocketCliOptions['before11ty'][] }>}
 */
 export async function normalizeConfig(inConfig) {
  let config = {
@@ -40,15 +57,35 @@ export async function normalizeConfig(inConfig) {
    inputDir: 'docs',
    outputDir: '_site',
    outputDevDir: '_site-dev',
+    serviceWorkerName: 'service-worker.js',
    build: {},
    devServer: {},

    ...inConfig,
+
+    /** @type{RocketCliOptions['before11ty'][]} */
+    __before11tyFunctions: [],
+
+    /** @type{{[key: string]: ImagePreset}} */
+    imagePresets: {
+      responsive: {
+        widths: [600, 900, 1640],
+        formats: ['avif', 'jpeg'],
+        sizes: '100vw',
+        ignore,
+      },
+    },
  };

  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();
@@ -72,7 +109,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);
@@ -83,9 +127,13 @@ export async function normalizeConfig(inConfig) {
  const _inputDirCwdRelative = path.join(_configDirCwdRelative, config.inputDir);

  // cli core preset is always first
-  config._presetPathes = [path.join(__dirname, '..', 'preset')];
+  config._presetPaths = [path.join(__dirname, '..', 'preset')];
  for (const preset of config.presets) {
-    config._presetPathes.push(preset.path);
+    config._presetPaths.push(preset.path);
+
+    if (preset.adjustImagePresets) {
+      config.imagePresets = preset.adjustImagePresets(config.imagePresets);
+    }

    if (preset.setupUnifiedPlugins) {
      config.setupUnifiedPlugins = [...config.setupUnifiedPlugins, ...preset.setupUnifiedPlugins];
@@ -117,9 +165,13 @@ export async function normalizeConfig(inConfig) {
    if (preset.setupCliPlugins) {
      config.setupCliPlugins = [...config.setupCliPlugins, ...preset.setupCliPlugins];
    }
+
+    if (typeof preset.before11ty === 'function') {
+      config.__before11tyFunctions.push(preset.before11ty);
+    }
  }
  // add "local" preset
-  config._presetPathes.push(path.resolve(_inputDirCwdRelative));
+  config._presetPaths.push(path.resolve(_inputDirCwdRelative));

  /** @type {MetaPlugin[]} */
  let pluginsMeta = [
@@ -144,6 +196,10 @@ export async function normalizeConfig(inConfig) {
    plugins.push(pluginInst);
  }

+  if (typeof config.before11ty === 'function') {
+    config.__before11tyFunctions.push(config.before11ty);
+  }
+
  // TODO: check pathPrefix to NOT have a '/' at the end as it will mean it may get ignored by 11ty 🤷‍♂️

  return {
--- 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
@@ -15,11 +15,11 @@ export function setFixtureDir(importMetaUrl) {

 /**
 * @typedef {object} readOutputOptions
- * @property {boolean} stripServiceWorker
 * @property {boolean} stripToBody
 * @property {boolean} stripStartEndWhitespace
 * @property {boolean} stripScripts
 * @property {boolean} formatHtml
+ * @property {boolean} replaceImageHashes
 * @property {start|build} type
 */

@@ -47,12 +47,12 @@ export async function readOutput(
  cli,
  fileName,
  {
-    stripServiceWorker = false,
    stripToBody = false,
    stripStartEndWhitespace = true,
    stripScripts = false,
    formatHtml = false,
    type = 'build',
+    replaceImageHashes = false,
  } = {},
 ) {
  if (!cli || !cli.config) {
@@ -67,16 +67,14 @@ export async function readOutput(
    const bodyCloseTagStart = text.indexOf('</body>');
    text = text.substring(bodyOpenTagEnd, bodyCloseTagStart);
  }
-  if (stripServiceWorker) {
-    const scriptOpenTagEnd = text.indexOf('<script inject-service-worker');
-    const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;
-    text = text.substring(0, scriptOpenTagEnd) + text.substring(scriptCloseTagStart);
-  }
  if (stripScripts) {
    const scriptOpenTagEnd = text.indexOf('<script>');
    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
@@ -66,7 +66,6 @@ describe('RocketCli computedConfig', () => {

    const indexHtml = await readBuildOutput(cli, 'index.html', {
      stripToBody: true,
-      stripServiceWorker: true,
    });
    expect(indexHtml).to.equal('/_merged_assets/11ty-img/5893749-1200.png');
  });
@@ -107,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'),
    );
@@ -158,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
@@ -75,9 +75,6 @@ describe('RocketCli e2e', () => {
    cli = await executeBuild('e2e-fixtures/rollup-plugin/devbuild-build.rocket.config.js');
    const inlineModule = await readBuildOutput(cli, 'e97af63d.js');
    expect(inlineModule).to.equal('var a={test:"data"};console.log(a);');
-
-    const swCode = await readBuildOutput(cli, 'my-service-worker.js');
-    expect(swCode).to.not.be.undefined;
  });

  it('can adjust the inputDir', async () => {
@@ -105,13 +102,36 @@ 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 () => {
    cli = await executeBuild('e2e-fixtures/content/pathPrefix.rocket.config.js');

    const linkHtml = await readBuildOutput(cli, 'link/index.html', {
-      stripServiceWorker: true,
      stripToBody: true,
    });
    expect(linkHtml).to.equal(
@@ -119,12 +139,30 @@ describe('RocketCli e2e', () => {
        '\n',
      ),
    );
-    const assetHtml = await readBuildOutput(cli, 'use-assets/index.html', {
-      stripServiceWorker: true,
-    });
+    const assetHtml = await readBuildOutput(cli, 'use-assets/index.html');
    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,296 @@
+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'),
+      );
+
+      const keepSvgHtml = await readStartOutput(cli, 'ignores/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+
+      // ignores src="[...].svg" and src="[...]rocket-unresponsive.[...]"
+      expect(keepSvgHtml).to.equal(
+        [
+          '<p>Ignore SVG</p>',
+          '<p><img src="../_assets/logo.svg" alt="Logo stays svg" rocket-image="responsive" /></p>',
+          '<p>Ignore if contains <code>rocket-unresponsive.</code></p>',
+          '<p>',
+          '  <img',
+          '    src="../_assets/my-image.rocket-unresponsive.jpg"',
+          '    alt="Logo stays svg"',
+          '    rocket-image="responsive"',
+          '  />',
+          '</p>',
+          '<p>Responsive</p>',
+          '<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="My Image Alternative Text"',
+          '      rocket-image="responsive"',
+          '      src="/images/__HASH__-600.jpeg"',
+          '      width="600"',
+          '      height="316"',
+          '      loading="lazy"',
+          '      decoding="async"',
+          '    />',
+          '  </picture>',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('can configure more patterns to ignore', async () => {
+      cli = await executeStart('e2e-fixtures/images/ignore-more.rocket.config.js');
+      const keepSvgHtml = await readStartOutput(cli, 'ignores/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+
+      // ignores src="[...].svg" and src="[...]rocket-unresponsive.[...]"
+      expect(keepSvgHtml).to.equal(
+        [
+          '<p>Ignore SVG</p>',
+          '<p><img src="../_assets/logo.svg" alt="Logo stays svg" rocket-image="responsive" /></p>',
+          '<p>Ignore if contains <code>rocket-unresponsive.</code></p>',
+          '<p>',
+          '  <img',
+          '    src="../_assets/my-image.rocket-unresponsive.jpg"',
+          '    alt="Logo stays svg"',
+          '    rocket-image="responsive"',
+          '  />',
+          '</p>',
+          '<p>Responsive</p>',
+          '<p>',
+          '  <img src="../_assets/my-image.jpeg" alt="My Image Alternative Text" rocket-image="responsive" />',
+          '</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
@@ -86,6 +86,12 @@ describe('RocketCli preset', () => {
        '    </div>',
        '',
        '    <footer id="main-footer"></footer>',
+        '',
+        '    <script',
+        '      type="module"',
+        '      inject-service-worker=""',
+        '      src="/_merged_assets/scripts/registerServiceWorker.js"',
+        '    ></script>',
        '  </body>',
        '</html>',
      ].join('\n'),
@@ -98,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/RocketCli.service-worker.test.js
+++ b/packages/cli/test-node/RocketCli.service-worker.test.js
@@ -0,0 +1,66 @@
+import chai from 'chai';
+import chalk from 'chalk';
+import { executeBuild, readStartOutput, setFixtureDir } from '@rocket/cli/test-helpers';
+
+const { expect } = chai;
+
+function getInjectServiceWorker(text) {
+  const scriptOpenTagStart = text.indexOf('<script type="module" inject-service-worker=""');
+  const scriptCloseTagEnd = text.indexOf('</script>', scriptOpenTagStart) + 9;
+  text = text.substring(scriptOpenTagStart, scriptCloseTagEnd);
+  return text;
+}
+
+function getServiceWorkerUrl(text) {
+  const matches = text.match(/window\.__rocketServiceWorkerUrl = '(.*?)';/);
+  return matches[1];
+}
+
+describe('RocketCli e2e', () => {
+  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();
+    }
+  });
+
+  it('will add a script to inject the service worker', async () => {
+    cli = await executeBuild('e2e-fixtures/service-worker/rocket.config.js');
+    const indexHtml = await readStartOutput(cli, 'index.html');
+    const indexInject = getInjectServiceWorker(indexHtml);
+    expect(indexInject).to.equal(
+      '<script type="module" inject-service-worker="" src="/_merged_assets/scripts/registerServiceWorker.js"></script>',
+    );
+    expect(getServiceWorkerUrl(indexHtml)).to.equal('/service-worker.js');
+    const subHtml = await readStartOutput(cli, 'sub/index.html');
+    const subInject = getInjectServiceWorker(subHtml);
+    expect(subInject).to.equal(
+      '<script type="module" inject-service-worker="" src="/_merged_assets/scripts/registerServiceWorker.js"></script>',
+    );
+    expect(getServiceWorkerUrl(subHtml)).to.equal('/service-worker.js');
+  });
+
+  // TODO: find a way to run these test either by forcing pathPrefix in start or skipping asset gathering for build or ...
+  it.skip('will add a script to inject the service worker', async () => {
+    cli = await executeBuild('e2e-fixtures/service-worker/pathPrefix.rocket.config.js');
+    const indexHtml = await readStartOutput(cli, 'index.html');
+    const indexInject = getInjectServiceWorker(indexHtml);
+    expect(indexInject).to.equal(
+      '<script type="module" inject-service-worker="" src="/my-prefix-folder/_merged_assets/scripts/registerServiceWorker.js"></script>',
+    );
+    expect(getServiceWorkerUrl(indexHtml)).to.equal('/my-prefix-folder/service-worker.js');
+    const subHtml = await readStartOutput(cli, 'sub/index.html');
+    const subInject = getInjectServiceWorker(subHtml);
+    expect(subInject).to.equal(
+      '<script type="module" inject-service-worker="" src="/my-prefix-folder/_merged_assets/scripts/registerServiceWorker.js"></script>',
+    );
+    expect(getServiceWorkerUrl(subHtml)).to.equal('/my-prefix-folder/service-worker.js');
+  });
+});
--- a/packages/cli/test-node/RocketCli.useCases.test.js
+++ b/packages/cli/test-node/RocketCli.useCases.test.js
@@ -34,12 +34,7 @@ describe('RocketCli use cases', () => {
    expect(aboutHtml).to.equal(
      [
        '<p><code>about.md</code></p>',
-        '<script type="module">',
-        '  import { myData } from "../sub/assets/myData.js";',
-        '  import("../sub/assets/myData.js");',
-        '  const name = "myData";',
-        '  import(`../sub/assets/${name}.js`);',
-        '</script>',
+        '<script type="module" src="/about/__mdjs-stories.js" mdjs-setup></script>',
      ].join('\n'),
    );

@@ -47,12 +42,7 @@ describe('RocketCli use cases', () => {
    expect(subHtml).to.equal(
      [
        '<p><code>sub/index.md</code></p>',
-        '<script type="module">',
-        '  import { myData } from "./assets/myData.js";',
-        '  import("./assets/myData.js");',
-        '  const name = "myData";',
-        '  import(`./assets/${name}.js`);',
-        '</script>',
+        '<script type="module" src="/sub/__mdjs-stories.js" mdjs-setup></script>',
      ].join('\n'),
    );

@@ -62,12 +52,7 @@ describe('RocketCli use cases', () => {
    expect(subDetailsHtml).to.equal(
      [
        '<p><code>sub/details.md</code></p>',
-        '<script type="module">',
-        '  import { myData } from "../assets/myData.js";',
-        '  import("../assets/myData.js");',
-        '  const name = "myData";',
-        '  import(`../assets/${name}.js`);',
-        '</script>',
+        '<script type="module" src="/sub/details/__mdjs-stories.js" mdjs-setup></script>',
      ].join('\n'),
    );

@@ -75,12 +60,7 @@ describe('RocketCli use cases', () => {
    expect(indexHtml).to.equal(
      [
        '<p><code>index.md</code></p>',
-        '<script type="module">',
-        '  import { myData } from "./sub/assets/myData.js";',
-        '  import("./sub/assets/myData.js");',
-        '  const name = "myData";',
-        '  import(`./sub/assets/${name}.js`);',
-        '</script>',
+        '<script type="module" src="/__mdjs-stories.js" mdjs-setup></script>',
      ].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/logo.svg
+++ b/packages/cli/test-node/e2e-fixtures/images/docs/_assets/logo.svg
@@ -0,0 +1,33 @@
+<svg fill="#e63946" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.998 511.998" xml:space="preserve">
+   <g>
+  <path d="M98.649,430.256c-46.365,28.67-71.17,30.939-78.916,23.51c-7.75-7.433-6.519-32.307,20.182-79.832
+    c24.953-44.412,65.374-96.693,113.818-147.211l-11.279-10.817C93.124,267.348,51.871,320.751,26.291,366.279
+    c-19.228,34.22-37.848,79.134-17.375,98.766c5.84,5.6,13.599,7.935,22.484,7.935c22.269,0,51.606-14.677,75.469-29.432
+    c44.416-27.464,96.044-70.919,145.373-122.362l-11.279-10.817C192.517,360.888,141.976,403.464,98.649,430.256z"/>
+
+    <rect x="238.112" y="272.64" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 237.9094 656.5383)" width="25.589" height="15.628"/>
+
+    <rect x="268.895" y="302.163" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 270.4774 728.6761)" width="25.589" height="15.628"/>
+
+    <rect x="232.827" y="268.929" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 297.4719 673.0591)" width="102.364" height="15.628"/>
+  <path d="M500.916,41.287c-7.769,1.59-76.412,16.062-93.897,34.294l-50.728,52.899l-114.703-3.629l-39.198,40.876l79.28,40.569
+    l-21.755,22.687l72.848,69.858l21.755-22.687l43.857,77.51l39.197-40.876l-8.433-114.451l50.727-52.899
+    c17.485-18.234,29.067-87.422,30.331-95.251l1.801-11.169L500.916,41.287z M228.209,161.383l19.842-20.692l93.688,2.964
+    l-48.775,50.864L228.209,161.383z M401.632,327.686l-35.822-63.308l48.776-50.865l6.886,93.482L401.632,327.686z
+      M332.298,276.743l-50.287-48.223L412.89,92.037l50.288,48.223L332.298,276.743z M473.009,128.036l-48.316-46.334
+    c14.54-8.427,44.787-17.217,68.076-22.632C488.336,82.567,480.82,113.155,473.009,128.036z"/>
+
+    <rect x="302.369" y="231.988" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 384.0262 633.9694)" width="34.12" height="15.628"/>
+
+    <rect x="411.311" y="127.35" transform="matrix(-0.6921 0.7218 -0.7218 -0.6921 807.9747 -74.331)" width="17.061" height="15.628"/>
+
+    <rect x="394.288" y="145.087" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 586.0206 542.7934)" width="15.628" height="17.06"/>
+
+    <rect x="376.571" y="163.565" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 542.7271 562.3462)" width="15.628" height="17.06"/>
+
+    <rect x="161.111" y="185.158" transform="matrix(0.7071 0.7071 -0.7071 0.7071 192.1943 -60.3323)" width="15.628" height="33.35"/>
+
+    <rect x="184.683" y="172.695" transform="matrix(0.707 0.7072 -0.7072 0.707 182.4625 -83.9076)" width="15.628" height="11.118"/>
+    </g>
+</svg>
--- a/packages/cli/test-node/e2e-fixtures/images/docs/_assets/my-image.jpeg
+++ b/packages/cli/test-node/e2e-fixtures/images/docs/_assets/my-image.jpeg
--- 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/_assets/my-image.rocket-unresponsive.jpg
+++ b/packages/cli/test-node/e2e-fixtures/images/docs/_assets/my-image.rocket-unresponsive.jpg
--- a/packages/cli/test-node/e2e-fixtures/images/docs/ignores.md
+++ b/packages/cli/test-node/e2e-fixtures/images/docs/ignores.md
@@ -0,0 +1,15 @@
+---
+layout: layout-raw
+---
+
+Ignore SVG
+
+![Logo stays svg](./_assets/logo.svg)
+
+Ignore if contains `rocket-unresponsive.`
+
+![Logo stays svg](./_assets/my-image.rocket-unresponsive.jpg)
+
+Responsive
+
+![My Image Alternative Text](./_assets/my-image.jpeg)
--- 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/ignore-more.rocket.config.js
+++ b/packages/cli/test-node/e2e-fixtures/images/ignore-more.rocket.config.js
@@ -0,0 +1,10 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {
+  imagePresets: {
+    responsive: {
+      ignore: ({ src }) =>
+        src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
+    },
+  },
+};
+export default config;
--- 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/e2e-fixtures/rollup-plugin/devbuild-build.rocket.config.js
+++ b/packages/cli/test-node/e2e-fixtures/rollup-plugin/devbuild-build.rocket.config.js
@@ -1,19 +1,11 @@
 // @ts-no-check
-import path from 'path';
-import { fileURLToPath } from 'url';
-
 import json from '@rollup/plugin-json';
 import { addPlugin, adjustPluginOptions } from 'plugins-manager';

-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const outputDir = path.join(__dirname, '__output');
-
 /** @type {Partial<import("../../../types/main").RocketCliOptions>} */
 const config = {
  setupDevAndBuildPlugins: [addPlugin({ name: 'json', plugin: json, location: 'top' })],
-  setupBuildPlugins: [
-    adjustPluginOptions('workbox', { swDest: path.join(outputDir, 'my-service-worker.js') }),
-  ],
+  setupBuildPlugins: [adjustPluginOptions('html', { absoluteBaseUrl: 'https://test-me.com' })],
 };

 export default config;
--- a/packages/cli/test-node/e2e-fixtures/service-worker/docs/.eleventyignore
+++ b/packages/cli/test-node/e2e-fixtures/service-worker/docs/.eleventyignore
@@ -0,0 +1 @@
+**/*.njk
--- a/packages/cli/test-node/e2e-fixtures/service-worker/docs/_data/socialMediaImage.cjs
+++ b/packages/cli/test-node/e2e-fixtures/service-worker/docs/_data/socialMediaImage.cjs
@@ -0,0 +1 @@
+module.exports = 'https://example.com';
--- a/packages/cli/test-node/e2e-fixtures/service-worker/docs/index.md
+++ b/packages/cli/test-node/e2e-fixtures/service-worker/docs/index.md
@@ -0,0 +1,5 @@
+---
+layout: layout-default
+---
+
+Content inside `docs/index.md`
--- a/packages/cli/test-node/e2e-fixtures/service-worker/docs/sub.md
+++ b/packages/cli/test-node/e2e-fixtures/service-worker/docs/sub.md
@@ -0,0 +1,5 @@
+---
+layout: layout-default
+---
+
+Content inside `docs/sub.md`
--- a/packages/cli/test-node/e2e-fixtures/service-worker/pathPrefix.rocket.config.js
+++ b/packages/cli/test-node/e2e-fixtures/service-worker/pathPrefix.rocket.config.js
@@ -0,0 +1,6 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {
+  pathPrefix: '/my-prefix-folder/',
+};
+
+export default config;
--- a/packages/cli/test-node/e2e-fixtures/service-worker/rocket.config.js
+++ b/packages/cli/test-node/e2e-fixtures/service-worker/rocket.config.js
@@ -0,0 +1,3 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {};
+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/helpers.js
+++ b/packages/cli/test-node/helpers.js
@@ -31,12 +31,7 @@ export async function expectThrowsAsync(method, { errorMatch, errorMessage } = {
 export async function readOutput(
  cli,
  fileName,
-  {
-    stripServiceWorker = false,
-    stripToBody = false,
-    stripStartEndWhitespace = true,
-    type = 'build',
-  } = {},
+  { stripToBody = false, stripStartEndWhitespace = true, type = 'build' } = {},
 ) {
  const outputDir = type === 'build' ? cli.config.outputDir : cli.config.outputDevDir;
  let text = await fs.promises.readFile(path.join(outputDir, fileName));
@@ -46,11 +41,6 @@ export async function readOutput(
    const bodyCloseTagStart = text.indexOf('</body>');
    text = text.substring(bodyOpenTagEnd, bodyCloseTagStart);
  }
-  if (stripServiceWorker) {
-    const scriptOpenTagEnd = text.indexOf('<script inject-service-worker');
-    const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;
-    text = text.substring(0, scriptOpenTagEnd) + text.substring(scriptCloseTagStart);
-  }
  if (stripStartEndWhitespace) {
    text = text.trim();
  }
--- a/packages/cli/test-node/normalizeConfig.test.js
+++ b/packages/cli/test-node/normalizeConfig.test.js
@@ -10,9 +10,10 @@ function cleanup(config) {
  const configNoPaths = { ...config };
  delete configNoPaths._inputDirCwdRelative;
  delete configNoPaths.configFile;
-  delete configNoPaths._presetPathes;
+  delete configNoPaths._presetPaths;
  delete configNoPaths.eleventy;
  delete configNoPaths.outputDevDir;
+  delete configNoPaths.imagePresets.responsive.ignore;
  return configNoPaths;
 }

@@ -23,11 +24,12 @@ describe('normalizeConfig', () => {

    // testing pathes is always a little more complicted 😅
    expect(config._inputDirCwdRelative).to.match(/empty\/docs$/);
-    expect(config._presetPathes[0]).to.match(/cli\/preset$/);
-    expect(config._presetPathes[1]).to.match(/empty\/docs$/);
+    expect(config._presetPaths[0]).to.match(/cli\/preset$/);
+    expect(config._presetPaths[1]).to.match(/empty\/docs$/);
    expect(config.outputDevDir).to.match(/_site-dev$/);

    expect(cleanup(config)).to.deep.equal({
+      __before11tyFunctions: [],
      command: 'help',
      createSocialMediaImages: true,
      devServer: {},
@@ -41,11 +43,19 @@ describe('normalizeConfig', () => {
      setupEleventyComputedConfig: [],
      setupCliPlugins: [],
      presets: [],
+      serviceWorkerName: 'service-worker.js',
      plugins: [
        { commands: ['start'] },
        { commands: ['build'] },
        { commands: ['start', 'build', 'lint'] },
      ],
+      imagePresets: {
+        responsive: {
+          formats: ['avif', 'jpeg'],
+          sizes: '100vw',
+          widths: [600, 900, 1640],
+        },
+      },
      inputDir: 'docs',
      outputDir: '_site',
    });
@@ -61,6 +71,7 @@ describe('normalizeConfig', () => {
    });

    expect(cleanup(config)).to.deep.equal({
+      __before11tyFunctions: [],
      command: 'help',
      createSocialMediaImages: true,
      devServer: {
@@ -76,6 +87,14 @@ describe('normalizeConfig', () => {
      setupCliPlugins: [],
      setupEleventyComputedConfig: [],
      presets: [],
+      imagePresets: {
+        responsive: {
+          formats: ['avif', 'jpeg'],
+          sizes: '100vw',
+          widths: [600, 900, 1640],
+        },
+      },
+      serviceWorkerName: 'service-worker.js',
      plugins: [
        { commands: ['start'] },
        { commands: ['build'] },
@@ -93,6 +112,7 @@ describe('normalizeConfig', () => {
    });

    expect(cleanup(config)).to.deep.equal({
+      __before11tyFunctions: [],
      command: 'help',
      createSocialMediaImages: true,
      devServer: {
@@ -108,6 +128,14 @@ describe('normalizeConfig', () => {
      setupCliPlugins: [],
      setupEleventyComputedConfig: [],
      presets: [],
+      imagePresets: {
+        responsive: {
+          formats: ['avif', 'jpeg'],
+          sizes: '--override-sizes--',
+          widths: [600, 900, 1640],
+        },
+      },
+      serviceWorkerName: 'service-worker.js',
      plugins: [
        { commands: ['start'] },
        { commands: ['build'] },
@@ -130,6 +158,7 @@ describe('normalizeConfig', () => {
    });

    expect(cleanup(config)).to.deep.equal({
+      __before11tyFunctions: [],
      command: 'help',
      createSocialMediaImages: true,
      devServer: {},
@@ -143,6 +172,14 @@ describe('normalizeConfig', () => {
      setupCliPlugins: [],
      setupEleventyComputedConfig: [],
      presets: [],
+      imagePresets: {
+        responsive: {
+          formats: ['avif', 'jpeg'],
+          sizes: '100vw',
+          widths: [600, 900, 1640],
+        },
+      },
+      serviceWorkerName: 'service-worker.js',
      plugins: [
        { commands: ['start'] },
        { commands: ['build'] },
--- 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
@@ -1,57 +1,79 @@
 import { DevServerConfig } from '@web/dev-server';
+import { CheckHtmlLinksCliOptions } from 'check-html-links/dist-types/types/main';

 export interface RocketPreset {
  path: string;

+  adjustImagePresets?: (preset: { [key: string]: ImagePreset }) => { [key: string]: ImagePreset };
+
+  before11ty?: () => void | Promise<void>;
+
  // TODO: improve all setup functions
  setupUnifiedPlugins?: function[];
-  setupDevAndBuildPlugins: function[];
-  setupBuildPlugins: function[];
-  setupDevPlugins: function[];
-  setupCliPlugins: function[];
-  setupEleventyPlugins: function[];
-  setupEleventyComputedConfig: function[];
+  setupDevAndBuildPlugins?: function[];
+  setupBuildPlugins?: function[];
+  setupDevPlugins?: function[];
+  setupCliPlugins?: function[];
+  setupEleventyPlugins?: function[];
+  setupEleventyComputedConfig?: function[];
 }

 interface RocketStartConfig {
  createSocialMediaImages?: boolean;
 }

+type ImageFormat = 'avif' | 'webp' | 'jpg' | 'jpeg' | 'png' | 'svg';
+
+interface ImagePreset {
+  widths: number[];
+  formats: ImageFormat[];
+  sizes: string;
+}
+
 export interface RocketCliOptions {
-  presets: Array<RocketPreset>;
+  presets?: Array<RocketPreset>;
  pathPrefix?: string;
-  inputDir: string;
-  outputDir: string;
+  serviceWorkerName?: string;
+  inputDir?: string;
+  outputDir?: string;
  emptyOutputDir?: boolean;
  absoluteBaseUrl?: string;
-  watch: boolean;
+  watch?: boolean;
  createSocialMediaImages?: boolean;
+  imagePresets?: {
+    [key: string]: ImagePreset;
+  };
+
+  before11ty?: () => void | Promise<void>;
+
+  checkLinks?: Partial<CheckHtmlLinksCliOptions>;

  start?: RocketStartConfig;

  // TODO: improve all setup functions
  setupUnifiedPlugins?: function[];
-  setupDevAndBuildPlugins: function[];
-  setupBuildPlugins: function[];
-  setupDevPlugins: function[];
-  setupCliPlugins: function[];
-  setupEleventyPlugins: function[];
-  setupEleventyComputedConfig: function[];
+  setupDevAndBuildPlugins?: function[];
+  setupBuildPlugins?: function[];
+  setupDevPlugins?: function[];
+  setupCliPlugins?: function[];
+  setupEleventyPlugins?: function[];
+  setupEleventyComputedConfig?: function[];

  // advanced
-  devServer: DevServerConfig;
-  eleventy: function; // TODO: improve
-  plugins: RocketPlugin[];
+  devServer?: DevServerConfig;
+  eleventy?: (eleventyConfig: any) => void; // TODO: improve
+  plugins?: RocketPlugin[];

  // rarely used
-  command: string;
+  command?: string;
  configFile?: string;
-  outputDevDir: string;
+  outputDevDir?: string;

-  private _inputDirCwdRelative: string;
-  private _presetPathes?: Array<string>;
+  private _inputDirCwdRelative?: string;
+  private _presetPaths?: string[];
+  private __before11tyFunctions?: (() => void | Promise<void>)[];
 }

 export interface RocketPlugin {
-  commands: Array<string>;
+  commands: string[];
 }
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -13,8 +13,8 @@
  },
  "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
  "homepage": "https://rocket.modern-web.dev/",
-  "type": "module",
  "main": "./dist/title.cjs",
+  "type": "module",
  "exports": {
    "./title": {
      "require": "./dist/title.cjs",
--- a/packages/drawer/CHANGELOG.md
+++ b/packages/drawer/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @rocket/drawer

+## 0.1.3
+
+### Patch Changes
+
+- 0b64116: Update @lion dependencies
+
 ## 0.1.2

 ### Patch Changes
--- a/packages/drawer/package.json
+++ b/packages/drawer/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/drawer",
-  "version": "0.1.2",
+  "version": "0.1.3",
  "publishConfig": {
    "access": "public"
  },
@@ -33,7 +33,7 @@
    "testing"
  ],
  "dependencies": {
-    "@lion/overlays": "^0.23.2",
+    "@lion/overlays": "^0.26.1",
    "lit-element": "^2.4.0"
  },
  "types": "dist-types/index.d.ts"
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
github-actions[bot]	8df9a3e9c3	Version Packages	2021-07-02 13:42:36 +02:00
Benny Powers	1b9559f2a5	feat(cli): add async `before11ty` hook (#183 )	2021-07-02 11:58:54 +02:00
github-actions[bot]	8eede4b16b	Version Packages	2021-06-30 15:24:07 +02:00
Thomas Allmer	2294ccf4a2	chore: only release patch versions	2021-06-30 15:20:51 +02:00
Benny Powers	3b1a0cf26a	feat(cli): expose checkLinks options	2021-06-30 15:18:36 +02:00
Benny Powers	cf442215a9	feat: add slack invite	2021-06-30 15:02:33 +02:00
Thomas Allmer	41049f3908	chore: fix launch tests	2021-06-30 14:36:54 +02:00
Thomas Allmer	2b5c61d19c	feat: no responsive images for svgs & option to define ignores	2021-06-30 14:36:54 +02:00
Jorge del Casar	f5d349e256	feat(launch): load used fonts from google fonts	2021-06-28 21:00:13 +02:00
Jorge del Casar	ce0b00e7a1	fix(cli): don't transform external images Fix #141	2021-06-28 20:59:28 +02:00
github-actions[bot]	83286a99de	Version Packages	2021-06-22 18:42:00 +02:00
Thijs Louisse	6cabdba5f6	feat(rocket): upgrade to lit2	2021-06-22 18:27:19 +02:00
github-actions[bot]	f5f2d69d0c	Version Packages	2021-06-22 15:00:26 +02:00
Thomas Allmer	795a3613af	fix(cli): service worker url respects pathPrefix	2021-06-22 14:57:52 +02:00
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
github-actions[bot]	c7261aa2b0	Version Packages	2021-05-04 21:26:53 +02:00
Thomas Allmer	690075d335	chore: fix typo on service worker page	2021-05-04 07:19:47 +02:00
Thomas Allmer	2724f073fc	feat: adopt a service worker flow with more control	2021-05-04 06:55:33 +02:00
github-actions[bot]	d08692c7f3	Version Packages	2021-04-29 12:35:04 +02:00
Thomas Allmer	2b7f1ee719	fix: support pathprefix in cli, launch, mdjs, search	2021-04-29 12:30:47 +02:00
github-actions[bot]	3802778be4	Version Packages	2021-04-29 08:30:57 +02:00
Thomas Allmer	26f4a1ebff	chore: align versions	2021-04-29 00:35:26 +02:00
Thomas Allmer	81edf45fe2	fix: drastically reduce the amount of js files in build output	2021-04-29 00:35:26 +02:00
github-actions[bot]	c5a1d7e8d1	Version Packages	2021-04-24 17:12:15 +02:00
Thomas Allmer	74dd8d1bcc	fix(mdjs-preview): autoheight will not grow bigger than the current size height	2021-04-24 17:05:20 +02:00
Thomas Allmer	72f631ac86	chore: add releases	2021-04-23 13:06:44 +02:00
Thomas Allmer	fafb99b0fa	feat(mdjs-preview): add a copy code button	2021-04-23 13:06:44 +02:00
Thomas Allmer	f5769b9aa9	fix(mdjs-preview): improve customization capabilities	2021-04-23 13:06:44 +02:00
Konstantinos Norgias	12d9cc3b44	fix: configure simulator themes & platforms	2021-04-23 11:37:34 +02:00
Konstantinos Norgias	ef9b373aa1	style: add color theming with css custom props	2021-04-23 11:37:34 +02:00
Konstantinos Norgias	560234d663	fix: default no render empty themes and platforms	2021-04-23 11:37:34 +02:00
Konstantinos Norgias	024514e901	style: add simulator css vars	2021-04-23 11:37:34 +02:00
Mathieu Puech	66c2d781e6	fix: windows path issue when using rocket lint	2021-04-23 11:18:53 +02:00
github-actions[bot]	14721d1e0f	Version Packages	2021-04-20 12:58:41 +02:00
Thomas Allmer	0f6709ac4b	fix(mdjs-preview): initial setting should come from the element	2021-04-20 12:55:32 +02:00
Thomas Allmer	ed86ff2346	fix(cli): do not set `data-localize-lang` in the simulator iframe html tag	2021-04-20 12:55:32 +02:00
Mathieu Puech	c675820163	fix: windows path issue avoid filtering of index section of collections	2021-04-20 12:28:19 +02:00
Konstantinos Norgias	f4a0ab559f	fix: add changeset & update drawer	2021-04-20 12:27:12 +02:00
Konstantinos Norgias	a8cdaebab1	fix(simulator): document shadowRoot n/a in iframe	2021-04-20 12:27:12 +02:00
github-actions[bot]	22393dd172	Version Packages	2021-04-20 06:50:18 +02:00
Thomas Allmer	a6fdb31f1e	fix(mdjs-preview): do not restory empty values	2021-04-19 23:55:52 +02:00
Thomas Allmer	dd15d4fc65	chore: fix tests	2021-04-19 23:55:52 +02:00
Thomas Allmer	edb1abf82b	feat(mdjs-preview): rework preview and add a simulation mode	2021-04-19 23:55:52 +02:00
Thomas Allmer	0b6411661e	chore: update lion dependencies for drawer and search	2021-04-19 23:55:52 +02:00
Thomas Allmer	604a80e6cb	feat(mdjs-story): force /define entrypoint	2021-04-19 23:55:52 +02:00
Thomas Allmer	fe6a929f1e	feat(mdjs-core): keep the original code block and wrap it for preview story	2021-04-19 23:55:52 +02:00
Thomas Allmer	2267e728cf	feat(eleventy-plugin-mdjs-unified): write mdjs javascript to file instead of inline	2021-04-19 23:55:52 +02:00
Thomas Allmer	abc8a02b72	fix(cli): supporting an absolute path for the rootDir	2021-04-19 23:55:52 +02:00
Thomas Allmer	2270887faf	chore: format package.json	2021-04-19 23:55:52 +02:00
Thomas Allmer	bad4686506	feat(building-rollup): preserve export names & attributes on script tags,	2021-04-19 23:55:52 +02:00
				`@@ -0,0 +1 @@`
				`module.exports = 'do-not-generate-a-social-media-image';`