Version Packages

chore: fix typo on service worker page
feat: adopt a service worker flow with more control
2026-03-21 08:51:18 +00:00 · 2021-05-04 21:26:53 +02:00 · 2021-05-04 07:19:47 +02:00 · 2021-05-04 06:55:33 +02:00 · 2021-04-29 12:35:04 +02:00 · 2021-04-29 12:30:47 +02:00
144 changed files with 3413 additions and 1185 deletions
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@

 ## The Goal for Rocket

-> Our goal is to provide developers with a meta framework for static websites with a spricle of JavaScript.
+> Our goal is to provide developers with a meta framework for static websites with a sprinkle of JavaScript.

 Get a site up and running in no time and focus on the content.
 You can still tweak every detail of every underlying tool that gets used.
@@ -54,7 +54,7 @@ Rocket is part of the [Modern Web Family](https://twitter.com/modern_web_dev).

 We are always looking for contributors of all skill levels! If you're looking to ease your way into the project, try out a [good first issue](https://github.com/modernweb-dev/rocket/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22).

-If you are interested in helping contribute to Modern Web, please take a look at our [Contributing Guide](https://github.com/modernweb-dev/rocket/blob/main/CONTRIBUTING.md). Also, feel free to drop into [slack](https://rocket.modern-web.dev/discover/slack/) and say hi. 👋
+If you are interested in helping contribute to Modern Web, please take a look at our [Contributing Guide](https://github.com/modernweb-dev/rocket/blob/main/CONTRIBUTING.md). Also, feel free to drop into [slack](https://rocket.modern-web.dev/about/slack/) and say hi. 👋

 ### Financial Contributors

--- 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/_includes/_joiningBlocks/head/site.njk
+++ b/docs/_includes/_joiningBlocks/head/site.njk
@@ -7,3 +7,5 @@
  rel="stylesheet"
 />
 <meta name="twitter:creator" content="@modern_web_dev" />
+
+<link rel="stylesheet" href="{{ '/_assets/body.css' | asset | url }}" mdjs-use>
--- 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
@@ -56,8 +56,8 @@ 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';
 ```
 ````

@@ -65,8 +65,8 @@ 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';
+import '@mdjs/mdjs-story/define';
+import '@mdjs/mdjs-preview/define';
 ```
 ````

@@ -118,8 +118,8 @@ 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 '@mdjs/mdjs-story/define';
+import '@mdjs/mdjs-preview/define';
 import { html } from 'lit-html';
 ```

@@ -132,31 +132,6 @@ export const header = () => {

 ## Supported Systems

-### es-dev-server
-
-Preview your mdjs readme with live demos and auto reload.
-
- Add to your `package.json`:
-
-  ```json
-  "scripts": {
-    "start": "es-dev-server",
-  }
-  ```
-
- Create a `es-dev-server.config.js` in the root of your repository.
-
-  ```js
-  const { mdjsTransformer } = require('@mdjs/core');
-
-  module.exports = {
-    nodeResolve: true,
-    open: 'README.md',
-    watch: true,
-    responseTransformers: [mdjsTransformer],
-  };
-  ```
-
 ### Storybook

 Please check out [@open-wc/demoing-storybook](https://open-wc.org/demoing/) for a fully integrated setup.
--- a/docs/docs/markdown-javascript/preview.md
+++ b/docs/docs/markdown-javascript/preview.md
@@ -2,18 +2,165 @@

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

-````md
-```js preview-story
-import { html } from 'lit-html';
+## Features

-export const foo = () => html` <p>my html</p> `;
+- 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 './assets/demo-element.js';
+```
+
+## JavaScript Story
+
+````md
+```js script
+import { html } from 'lit-html';
+import './assets/demo-element.js';
+```
+
+```js preview-story
+export const foo = () => html`<demo-element></demo-element>`;
 ```
 ````

 will result in

 ```js preview-story
-import { html } from 'lit-html';
-
-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
@@ -2,10 +2,16 @@

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

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

+````md
+```js script
+import { html } from 'lit-html';
+```
+
+```js story
 export const foo = () => html` <p>my html</p> `;
 ```
 ````
@@ -13,7 +19,5 @@ export const foo = () => html` <p>my html</p> `;
 will result in

 ```js story
-import { html } from 'lit-html';
-
 export const foo = () => html` <p>my html</p> `;
 ```
--- a/docs/docs/tools/check-html-links.md
+++ b/docs/docs/tools/check-html-links.md
@@ -1,7 +1,17 @@
 # Tools >> Check HTML Links ||30

+```js
+import '@rocket/launch/inline-notification/inline-notification.js';
+```
+
 A fast checker for broken links/references in HTML.

+<inline-notification type="tip">
+
+Read the [Introducing Check HTMl Links - no more bad links](../../blog/introducing-check-html-links.md) Blog post to find out how it came to be and how it works.
+
+</inline-notification>
+
 ## Features

 - Checks all html files for broken local links/references (in href, src, srcset)
@@ -16,10 +26,25 @@ A fast checker for broken links/references in HTML.
 npm i -D check-html-links
 ```

-## Usage
+## CLI flags

-```
+| Name                | Type    | Description                                                                                         |
+| ------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| root-dir            | string  | the root directory to serve files from. Defaults to the current working directory                   |
+| ignore-link-pattern | string  | do not check links matching the pattern                                                             |
+| continue-on-error   | boolean | if present it will not exit with an error code - useful while writing or for temporary passing a ci |
+
+## Usage Examples
+
+```bash
+# check a folder _site
 npx check-html-links _site
+
+# ignore all links like <a href="/users/123">
+npx check-html-links _site --ignore-link-pattern "/users/*" "/users/**/*"
+
+# ignore all links like <a href="/users/123"> & <a href="/users/123/details">
+npx check-html-links _site --ignore-link-pattern "/users/*" "/users/**/*"
 ```

 ## Example Output
--- 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/first-pages/manage-sidebar.md
+++ b/docs/guides/first-pages/manage-sidebar.md
@@ -47,3 +47,9 @@ export const headlineConverter = () => html`
 ```

 How it then works is very similar to https://www.11ty.dev/docs/plugins/navigation/
+
+## Sidebar redirects
+
+By default, the sidebar nav redirects clicks on category headings to the first child page in that category.
+
+To disable those redirects, override `_includes/_joiningBlocks/_layoutSidebar/sidebar/20-navigation.njk` and add the `no-redirects` attribute to the `<rocket-navigation>` element.
--- 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.

@@ -129,3 +129,25 @@ const config = {

 {% endraw %}
 ```
+
+## Enabling / Disabling
+
+Generating images from SVG is quite fast but it can still add that's why by default during `rocket start` there will be no social media images created.
+
+If you with so create them also during start you can
+
+```js
+const config = {
+  start: {
+    createSocialMediaImages: true,
+  },
+};
+```
+
+Similarly, if you never want to create social media images even during build then you can globally disable it via
+
+```js
+const config = {
+  createSocialMediaImages: true,
+};
+```
--- a/docs/simulator.md
+++ b/docs/simulator.md
@@ -0,0 +1,5 @@
+---
+layout: layout-simulator
+eleventyExcludeFromCollections: true
+excludeFromSearch: true
+---
--- a/packages/blog/package.json
+++ b/packages/blog/package.json
@@ -38,6 +38,6 @@
    "testing"
  ],
  "dependencies": {
-    "plugins-manager": "^0.2.0"
+    "plugins-manager": "^0.2.1"
  }
 }
--- a/packages/building-rollup/CHANGELOG.md
+++ b/packages/building-rollup/CHANGELOG.md
@@ -1,5 +1,23 @@
 # @rocket/building-rollup

+## 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
+
+- be0d0b3: fix: add missing main entry to the packages
+
 ## 0.1.2

 ### 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.2",
+  "version": "0.3.0",
  "publishConfig": {
    "access": "public"
  },
@@ -13,6 +13,7 @@
  },
  "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
  "homepage": "https://rocket.modern-web.dev/docs/tools/building-rollup/",
+  "main": "./index.js",
  "type": "module",
  "exports": {
    ".": "./index.js"
@@ -54,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.6.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}'],
-        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,31 @@
 # check-html-links

+## 0.2.2
+
+### Patch Changes
+
+- 66c2d78: fix: windows path issue
+
+## 0.2.1
+
+### Patch Changes
+
+- be0d0b3: fix: add missing main entry to the packages
+
+## 0.2.0
+
+### Minor Changes
+
+- 750418b: Uses a class for the CLI and adding the following options:
+
+  - `--root-dir` the root directory to serve files from. Defaults to the current working directory
+  - `--ignore-link-pattern` do not check links matching the pattern
+  - `--continue-on-error` if present it will not exit with an error code - useful while writing or for temporary passing a ci
+
+  BREAKING CHANGE:
+
+  - Exists with an error code if a broken link is found
+
 ## 0.1.2

 ### Patch Changes
--- a/packages/check-html-links/index.js
+++ b/packages/check-html-links/index.js
@@ -1,2 +1,3 @@
 export { validateFolder } from './src/validateFolder.js';
 export { formatErrors } from './src/formatErrors.js';
+export { CheckHtmlLinksCli } from './src/CheckHtmlLinksCli.js';
--- a/packages/check-html-links/package.json
+++ b/packages/check-html-links/package.json
@@ -1,6 +1,6 @@
 {
  "name": "check-html-links",
-  "version": "0.1.2",
+  "version": "0.2.2",
  "publishConfig": {
    "access": "public"
  },
@@ -13,6 +13,7 @@
  },
  "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"
  },
@@ -33,7 +34,9 @@
  ],
  "dependencies": {
    "chalk": "^4.0.0",
+    "command-line-args": "^5.1.1",
    "glob": "^7.0.0",
+    "minimatch": "^3.0.4",
    "sax-wasm": "^2.0.0"
  },
  "devDependencies": {
--- a/packages/check-html-links/src/CheckHtmlLinksCli.js
+++ b/packages/check-html-links/src/CheckHtmlLinksCli.js
@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+/** @typedef {import('../types/main').CheckHtmlLinksCliOptions} CheckHtmlLinksCliOptions */
+
+import path from 'path';
+import chalk from 'chalk';
+
+import commandLineArgs from 'command-line-args';
+import { validateFiles } from './validateFolder.js';
+import { formatErrors } from './formatErrors.js';
+import { listFiles } from './listFiles.js';
+
+export class CheckHtmlLinksCli {
+  /** @type {CheckHtmlLinksCliOptions} */
+  options;
+
+  constructor({ argv } = { argv: undefined }) {
+    const mainDefinitions = [
+      { name: 'ignore-link-pattern', type: String, multiple: true },
+      { name: 'root-dir', type: String, defaultOption: true },
+      { name: 'continue-on-error', type: Boolean, defaultOption: false },
+    ];
+    const options = commandLineArgs(mainDefinitions, {
+      stopAtFirstUnknown: true,
+      argv,
+    });
+    this.options = {
+      printOnError: true,
+      continueOnError: options['continue-on-error'],
+      rootDir: options['root-dir'],
+      ignoreLinkPatterns: options['ignore-link-pattern'],
+    };
+  }
+
+  /**
+   * @param {Partial<CheckHtmlLinksCliOptions>} newOptions
+   */
+  setOptions(newOptions) {
+    this.options = {
+      ...this.options,
+      ...newOptions,
+    };
+  }
+
+  async run() {
+    const { ignoreLinkPatterns, rootDir: userRootDir } = this.options;
+    const rootDir = userRootDir ? path.resolve(userRootDir) : process.cwd();
+    const performanceStart = process.hrtime();
+
+    console.log('👀 Checking if all internal links work...');
+    const files = await listFiles('**/*.html', rootDir);
+
+    const filesOutput =
+      files.length == 0
+        ? '🧐 No files to check. Did you select the correct folder?'
+        : `🔥 Found a total of ${chalk.green.bold(files.length)} files to check!`;
+    console.log(filesOutput);
+
+    const { errors, numberLinks } = await validateFiles(files, rootDir, { ignoreLinkPatterns });
+
+    console.log(`🔗 Found a total of ${chalk.green.bold(numberLinks)} links to validate!\n`);
+
+    const performance = process.hrtime(performanceStart);
+    /** @type {string[]} */
+    let output = [];
+    let message = '';
+    if (errors.length > 0) {
+      let referenceCount = 0;
+      for (const error of errors) {
+        referenceCount += error.usage.length;
+      }
+      output = [
+        `❌ Found ${chalk.red.bold(
+          errors.length.toString(),
+        )} missing reference targets (used by ${referenceCount} links) while checking ${
+          files.length
+        } files:`,
+        ...formatErrors(errors)
+          .split('\n')
+          .map(line => `  ${line}`),
+        `Checking links duration: ${performance[0]}s ${performance[1] / 1000000}ms`,
+      ];
+      message = output.join('\n');
+      if (this.options.printOnError === true) {
+        console.error(message);
+      }
+      if (this.options.continueOnError === false) {
+        process.exit(1);
+      }
+    } else {
+      console.log(
+        `✅ All internal links are valid. (executed in ${performance[0]}s ${
+          performance[1] / 1000000
+        }ms)`,
+      );
+    }
+
+    return { errors, message };
+  }
+}
--- a/packages/check-html-links/src/cli.js
+++ b/packages/check-html-links/src/cli.js
@@ -1,55 +1,6 @@
 #!/usr/bin/env node

-import path from 'path';
-import chalk from 'chalk';
-import { validateFiles } from './validateFolder.js';
-import { formatErrors } from './formatErrors.js';
-import { listFiles } from './listFiles.js';
+import { CheckHtmlLinksCli } from './CheckHtmlLinksCli.js';

-async function main() {
-  const userRootDir = process.argv[2];
-  const rootDir = userRootDir ? path.resolve(userRootDir) : process.cwd();
-  const performanceStart = process.hrtime();
-
-  console.log('👀 Checking if all internal links work...');
-  const files = await listFiles('**/*.html', rootDir);
-
-  const filesOutput =
-    files.length == 0
-      ? '🧐 No files to check. Did you select the correct folder?'
-      : `🔥 Found a total of ${chalk.green.bold(files.length)} files to check!`;
-  console.log(filesOutput);
-
-  const { errors, numberLinks } = await validateFiles(files, rootDir);
-
-  console.log(`🔗 Found a total of ${chalk.green.bold(numberLinks)} links to validate!\n`);
-
-  const performance = process.hrtime(performanceStart);
-  if (errors.length > 0) {
-    let referenceCount = 0;
-    for (const error of errors) {
-      referenceCount += error.usage.length;
-    }
-    const output = [
-      `❌ Found ${chalk.red.bold(
-        errors.length.toString(),
-      )} missing reference targets (used by ${referenceCount} links) while checking ${
-        files.length
-      } files:`,
-      ...formatErrors(errors)
-        .split('\n')
-        .map(line => `  ${line}`),
-      `Checking links duration: ${performance[0]}s ${performance[1] / 1000000}ms`,
-    ];
-    console.error(output.join('\n'));
-    process.exit(1);
-  } else {
-    console.log(
-      `✅ All internal links are valid. (executed in %ds %dms)`,
-      performance[0],
-      performance[1] / 1000000,
-    );
-  }
-}
-
-main();
+const cli = new CheckHtmlLinksCli();
+cli.run();
--- a/packages/check-html-links/src/validateFolder.js
+++ b/packages/check-html-links/src/validateFolder.js
@@ -1,15 +1,18 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import fs from 'fs';
 import saxWasm from 'sax-wasm';
+import minimatch from 'minimatch';
 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 */
 /** @typedef {import('../types/main').Usage} Usage */
 /** @typedef {import('../types/main').Error} Error */
+/** @typedef {import('../types/main').Options} Options */
 /** @typedef {import('sax-wasm').Attribute} Attribute */

 const require = createRequire(import.meta.url);
@@ -43,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,
@@ -185,8 +188,9 @@ function getValueAndAnchor(inValue) {
 * @param {object} options
 * @param {string} options.htmlFilePath
 * @param {string} options.rootDir
+ * @param {function(string): boolean} options.ignoreUsage
 */
-async function resolveLinks(links, { htmlFilePath, rootDir }) {
+async function resolveLinks(links, { htmlFilePath, rootDir, ignoreUsage }) {
  for (const hrefObj of links) {
    const { value, anchor } = getValueAndAnchor(hrefObj.value);

@@ -201,7 +205,9 @@ async function resolveLinks(links, { htmlFilePath, rootDir }) {

    let valueFile = value.endsWith('/') ? path.join(value, 'index.html') : value;

-    if (value.includes('mailto:')) {
+    if (ignoreUsage(value)) {
+      // ignore
+    } else if (value.includes('mailto:')) {
      // ignore for now - could add a check to validate if the email address is valid
    } else if (valueFile === '' && anchor !== '') {
      addLocalFile(htmlFilePath, anchor, usageObj);
@@ -261,8 +267,9 @@ async function validateLocalFiles(checkLocalFiles) {
 /**
 * @param {string[]} files
 * @param {string} rootDir
+ * @param {Options} opts?
 */
-export async function validateFiles(files, rootDir) {
+export async function validateFiles(files, rootDir, opts) {
  await parserReferences.prepareWasm(saxWasmBuffer);
  await parserIds.prepareWasm(saxWasmBuffer);

@@ -270,10 +277,20 @@ export async function validateFiles(files, rootDir) {
  checkLocalFiles = [];
  idCache = new Map();
  let numberLinks = 0;
+
+  const ignoreLinkPatternRegExps = opts
+    ? opts.ignoreLinkPatterns?.map(pattern => minimatch.makeRe(pattern))
+    : null;
+
+  /** @type {function(string): boolean} */
+  const ignoreUsage = ignoreLinkPatternRegExps
+    ? usage => !!ignoreLinkPatternRegExps.find(regExp => usage.match(regExp))
+    : () => false;
+
  for (const htmlFilePath of files) {
    const { links } = await extractReferences(htmlFilePath);
    numberLinks += links.length;
-    await resolveLinks(links, { htmlFilePath, rootDir });
+    await resolveLinks(links, { htmlFilePath, rootDir, ignoreUsage });
  }
  await validateLocalFiles(checkLocalFiles);

@@ -282,10 +299,11 @@ export async function validateFiles(files, rootDir) {

 /**
 * @param {string} inRootDir
+ * @param {Options} opts?
 */
-export async function validateFolder(inRootDir) {
+export async function validateFolder(inRootDir, opts) {
  const rootDir = path.resolve(inRootDir);
  const files = await listFiles('**/*.html', rootDir);
-  const { errors } = await validateFiles(files, rootDir);
+  const { errors } = await validateFiles(files, rootDir, opts);
  return errors;
 }
--- a/packages/check-html-links/test-node/fixtures/external-link/index.html
+++ b/packages/check-html-links/test-node/fixtures/external-link/index.html
@@ -0,0 +1,5 @@
+<!-- ignore known subsystems -->
+<a href="/docs/"></a>
+<a href="/developer/getting-started.html#js"></a>
+<a href="/developer/language-guides/"></a>
+<a href="/developer/javascript.html"></a>
--- a/packages/check-html-links/test-node/fixtures/internal-link-ignore/index.html
+++ b/packages/check-html-links/test-node/fixtures/internal-link-ignore/index.html
@@ -0,0 +1,8 @@
+<a href="/absolute/index.html"></a>
+<a href="./relative/index.html"></a>
+<a href="./relative/subfolder/index.html"></a>
+
+<!-- valid -->
+<a href="./page.html"></a>
+<a href=" ./page.html "></a>
+<a href=" /page.html "></a>
--- a/packages/check-html-links/test-node/fixtures/internal-link-ignore/page.html
+++ b/packages/check-html-links/test-node/fixtures/internal-link-ignore/page.html
--- a/packages/check-html-links/test-node/test-helpers.js
+++ b/packages/check-html-links/test-node/test-helpers.js
@@ -5,9 +5,9 @@ import { validateFolder } from 'check-html-links';

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

-export async function execute(inPath) {
+export async function execute(inPath, opts) {
  const testDir = path.join(__dirname, inPath.split('/').join(path.sep));
-  const errors = await validateFolder(testDir);
+  const errors = await validateFolder(testDir, opts);
  return {
    cleanup: items => {
      const newItems = [];
--- a/packages/check-html-links/test-node/validateFolder.test.js
+++ b/packages/check-html-links/test-node/validateFolder.test.js
@@ -183,6 +183,28 @@ describe('validateFolder', () => {
    expect(cleanup(errors)).to.deep.equal([]);
  });

+  it('ignoring a folder', async () => {
+    const { errors, cleanup } = await execute('fixtures/internal-link-ignore', {
+      ignoreLinkPatterns: ['./relative/*', './relative/**/*'],
+    });
+    expect(cleanup(errors)).to.deep.equal([
+      {
+        filePath: 'fixtures/internal-link-ignore/absolute/index.html',
+        onlyAnchorMissing: false,
+        usage: [
+          {
+            anchor: '',
+            attribute: 'href',
+            character: 9,
+            file: 'fixtures/internal-link-ignore/index.html',
+            line: 0,
+            value: '/absolute/index.html',
+          },
+        ],
+      },
+    ]);
+  });
+
  it('can handle img src', async () => {
    const { errors, cleanup } = await execute('fixtures/internal-images');
    expect(cleanup(errors)).to.deep.equal([
--- a/packages/check-html-links/types/main.d.ts
+++ b/packages/check-html-links/types/main.d.ts
@@ -25,3 +25,14 @@ export interface Error {
  onlyAnchorMissing: boolean;
  usage: Usage[];
 }
+
+interface Options {
+  ignoreLinkPatterns: string[] | null;
+}
+
+export interface CheckHtmlLinksCliOptions {
+  printOnError: boolean;
+  rootDir: string;
+  ignoreLinkPatterns: string[] | null;
+  continueOnError: boolean;
+}
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,89 @@
 # @rocket/cli

+## 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
+
+- 5edc40f: Make sure each rocket instance has it's own eleventy config'
+- ef8ebb0: To support dynamically created content to be part of the anchor navigation of the page we now analyze the final html output instead of `entry.templateContent`.
+
+  BREAKING CHANGE:
+
+  - only add anchors for the currently active pages (before it added anchor for every page)
+
+### Patch Changes
+
+- be0d0b3: fix: add missing main entry to the packages
+- Updated dependencies [be0d0b3]
+- Updated dependencies [ef8ebb0]
+  - @rocket/building-rollup@0.1.3
+  - check-html-links@0.2.1
+  - @rocket/core@0.1.2
+  - plugins-manager@0.2.1
+  - @rocket/eleventy-rocket-nav@0.3.0
+
+## 0.5.2
+
+### Patch Changes
+
+- 8e095b7: Watching `_assets`, `_data`, `_includes` for changes to trigger updated automatically
+
+## 0.5.1
+
+### Patch Changes
+
+- f44a0f4: Rewrite dynamic imports with "`"
+- 74f7ddf: Adds performance improvements for social media images by:
+  - creating social media images only in `rocket build` phase
+  - adds a config `createSocialMediaImages` to enable (default) or disable it globally
+  - adds config `start.createSocialMediaImages` to enable or disable (default) it during `rocket start`
+- 750418b: Use class-based node API of check-html-links
+- Updated dependencies [f44a0f4]
+- Updated dependencies [750418b]
+  - @rocket/eleventy-plugin-mdjs-unified@0.3.1
+  - check-html-links@0.2.0
+
 ## 0.5.0

 ### Minor Changes
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/cli",
-  "version": "0.5.0",
+  "version": "0.7.0",
  "publishConfig": {
    "access": "public"
  },
@@ -13,6 +13,7 @@
  },
  "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"
  },
@@ -56,22 +57,25 @@
  "dependencies": {
    "@11ty/eleventy": "^0.11.1",
    "@11ty/eleventy-img": "^0.7.4",
-    "@rocket/building-rollup": "^0.1.2",
-    "@rocket/core": "^0.1.1",
-    "@rocket/eleventy-plugin-mdjs-unified": "^0.3.0",
-    "@rocket/eleventy-rocket-nav": "^0.2.1",
+    "@rocket/building-rollup": "^0.3.0",
+    "@rocket/core": "^0.1.2",
+    "@rocket/eleventy-plugin-mdjs-unified": "^0.4.1",
+    "@rocket/eleventy-rocket-nav": "^0.3.0",
    "@rollup/plugin-babel": "^5.2.2",
    "@rollup/plugin-node-resolve": "^11.0.1",
    "@web/config-loader": "^0.1.3",
    "@web/dev-server": "^0.1.4",
    "@web/dev-server-rollup": "^0.3.2",
    "@web/rollup-plugin-copy": "^0.2.0",
-    "check-html-links": "^0.1.2",
+    "check-html-links": "^0.2.2",
    "command-line-args": "^5.1.1",
    "command-line-usage": "^6.1.1",
    "fs-extra": "^9.0.1",
-    "plugins-manager": "^0.2.0",
-    "utf8": "^3.0.0"
+    "micromatch": "^4.0.2",
+    "plugins-manager": "^0.2.1",
+    "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,5 @@
+<script>
+  window.__rocketServiceWorkerUrl = '/{{ rocketConfig.serviceWorkerName }}';
+</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 'lit-html';
+
+      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
@@ -10,6 +10,7 @@ import computedConfigPkg from './public/computedConfig.cjs';

 import path from 'path';
 import Eleventy from '@11ty/eleventy';
+import TemplateConfig from '@11ty/eleventy/src/TemplateConfig.js';
 import { fileURLToPath } from 'url';
 import fs from 'fs-extra';

@@ -33,6 +34,35 @@ export class RocketEleventy extends Eleventy {
    await super.write();
    await this.__rocketCli.update();
  }
+
+  // forks it so we can watch for changes but don't include them while building
+  getChokidarConfig() {
+    let ignores = this.eleventyFiles.getGlobWatcherIgnores();
+
+    const keepWatching = [
+      path.join(this.__rocketCli.config._inputDirCwdRelative, '_assets', '**'),
+      path.join(this.__rocketCli.config._inputDirCwdRelative, '_data', '**'),
+      path.join(this.__rocketCli.config._inputDirCwdRelative, '_includes', '**'),
+    ];
+
+    ignores = ignores.filter(ignore => !keepWatching.includes(ignore));
+    // debug("Ignoring watcher changes to: %o", ignores);
+
+    let configOptions = this.config.chokidarConfig;
+
+    // can’t override these yet
+    // TODO maybe if array, merge the array?
+    delete configOptions.ignored;
+
+    return Object.assign(
+      {
+        ignored: ignores,
+        ignoreInitial: true,
+        // also interesting: awaitWriteFinish
+      },
+      configOptions,
+    );
+  }
 }

 export class RocketCli {
@@ -70,11 +100,16 @@ export class RocketCli {
      await this.mergePresets();

      const elev = new RocketEleventy(_inputDirCwdRelative, outputDevDir, this);
-      elev.isVerbose = false;
      // 11ty always wants a relative path to cwd - why?
      const rel = path.relative(process.cwd(), path.join(__dirname));
      const relCwdPathToConfig = path.join(rel, 'shared', '.eleventy.cjs');
+
+      const config = new TemplateConfig(null, relCwdPathToConfig);
+      elev.config = config.getConfig();
+      elev.resetConfig();
      elev.setConfigPathOverride(relCwdPathToConfig);
+
+      elev.isVerbose = false;
      await elev.init();

      this.eleventy = elev;
--- a/packages/cli/src/RocketLint.js
+++ b/packages/cli/src/RocketLint.js
@@ -2,8 +2,7 @@

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

-import chalk from 'chalk';
-import { validateFolder, formatErrors } from 'check-html-links';
+import { CheckHtmlLinksCli } from 'check-html-links';

 export class RocketLint {
  static pluginName = 'RocketLint';
@@ -49,31 +48,20 @@ export class RocketLint {
      return;
    }

-    const performanceStart = process.hrtime();
-    console.log('👀 Checking if all internal links work...');
-    const errors = await validateFolder(this.config.lintInputDir);
-    const performance = process.hrtime(performanceStart);
+    const checkLinks = new CheckHtmlLinksCli();
+    checkLinks.setOptions({
+      rootDir: this.config.lintInputDir,
+      printOnError: false,
+      continueOnError: true,
+    });
+
+    const { errors, message } = await checkLinks.run();
    if (errors.length > 0) {
-      let referenceCount = 0;
-      for (const error of errors) {
-        referenceCount += error.usage.length;
-      }
-      const output = [
-        `❌ Found ${chalk.red.bold(
-          errors.length.toString(),
-        )} missing reference targets (used by ${referenceCount} links):`,
-        ...formatErrors(errors)
-          .split('\n')
-          .map(line => `  ${line}`),
-        `Checking links duration: ${performance[0]}s ${performance[1] / 1000000}ms`,
-      ];
-      if (this.config.watch) {
-        console.log(output.join('\n'));
+      if (this.config.command === 'start') {
+        console.log(message);
      } else {
-        throw new Error(output.join('\n'));
+        throw new Error(message);
      }
-    } else {
-      console.log('✅ All internal links are valid.');
    }
  }

--- a/packages/cli/src/RocketStart.js
+++ b/packages/cli/src/RocketStart.js
@@ -15,6 +15,7 @@ export class RocketStart {
   */
  setupCommand(config) {
    delete config.pathPrefix;
+    config.createSocialMediaImages = !!config?.start?.createSocialMediaImages;
    return config;
  }

--- 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/normalizeConfig.js
+++ b/packages/cli/src/normalizeConfig.js
@@ -36,9 +36,11 @@ export async function normalizeConfig(inConfig) {
    eleventy: () => {},
    command: 'help',
    watch: true,
+    createSocialMediaImages: true,
    inputDir: 'docs',
    outputDir: '_site',
    outputDevDir: '_site-dev',
+    serviceWorkerName: 'service-worker.js',
    build: {},
    devServer: {},

--- a/packages/cli/src/public/createSocialImage.cjs
+++ b/packages/cli/src/public/createSocialImage.cjs
@@ -2,14 +2,14 @@ const path = require('path');
 const fs = require('fs');
 const Image = require('@11ty/eleventy-img');
 const { getComputedConfig } = require('./computedConfig.cjs');
-const { createSocialImageSvg: defaultcreateSocialImageSvg } = require('./createSocialImageSvg.cjs');
+const { createSocialImageSvg: defaultCreateSocialImageSvg } = require('./createSocialImageSvg.cjs');

 async function createSocialImage(args) {
  const {
    title = '',
    subTitle = '',
    footer = '',
-    createSocialImageSvg = defaultcreateSocialImageSvg,
+    createSocialImageSvg = defaultCreateSocialImageSvg,
  } = args;
  const cleanedUpArgs = { ...args };
  delete cleanedUpArgs.createSocialImageSvg;
--- a/packages/cli/src/public/generateEleventyComputed.cjs
+++ b/packages/cli/src/public/generateEleventyComputed.cjs
@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 const { processContentWithTitle } = require('@rocket/core/title');
-const { createSocialImage: defaultcreateSocialImage } = require('./createSocialImage.cjs');
+const { createSocialImage: defaultCreateSocialImage } = require('./createSocialImage.cjs');
 const { getComputedConfig } = require('./computedConfig.cjs');
 const { executeSetupFunctions } = require('plugins-manager');

@@ -71,7 +71,7 @@ function layoutPlugin({ defaultLayout = 'layout-default' } = {}) {
 }

 function socialMediaImagePlugin(args = {}) {
-  const { createSocialImage = defaultcreateSocialImage } = args;
+  const { createSocialImage = defaultCreateSocialImage, rocketConfig = {} } = args;

  const cleanedUpArgs = { ...args };
  delete cleanedUpArgs.createSocialImage;
@@ -80,6 +80,11 @@ function socialMediaImagePlugin(args = {}) {
    if (data.socialMediaImage) {
      return data.socialMediaImage;
    }
+
+    if (rocketConfig.createSocialMediaImages === false) {
+      return;
+    }
+
    if (!data.title) {
      return;
    }
@@ -158,7 +163,7 @@ function generateEleventyComputed() {
    { name: 'title', plugin: titlePlugin },
    { name: 'eleventyNavigation', plugin: eleventyNavigationPlugin },
    { name: 'section', plugin: sectionPlugin },
-    { name: 'socialMediaImage', plugin: socialMediaImagePlugin },
+    { name: 'socialMediaImage', plugin: socialMediaImagePlugin, options: { rocketConfig } },
    { name: '_joiningBlocks', plugin: joiningBlocksPlugin, options: rocketConfig },
    { name: 'layout', plugin: layoutPlugin },
  ];
--- a/packages/cli/test-helpers/index.js
+++ b/packages/cli/test-helpers/index.js
@@ -15,10 +15,10 @@ export function setFixtureDir(importMetaUrl) {

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

@@ -46,7 +46,6 @@ export async function readOutput(
  cli,
  fileName,
  {
-    stripServiceWorker = false,
    stripToBody = false,
    stripStartEndWhitespace = true,
    stripScripts = false,
@@ -54,6 +53,10 @@ export async function readOutput(
    type = 'build',
  } = {},
 ) {
+  if (!cli || !cli.config) {
+    throw new Error(`No valid cli provided to readOutput - you passed a ${typeof cli}: ${cli}`);
+  }
+
  const outputDir = type === 'build' ? cli.config.outputDir : cli.config.outputDevDir;
  let text = await fs.promises.readFile(path.join(outputDir, fileName));
  text = text.toString();
@@ -62,11 +65,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 (stripScripts) {
    const scriptOpenTagEnd = text.indexOf('<script>');
    const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;
@@ -81,6 +79,16 @@ export async function readOutput(
  return text;
 }

+export function startOutputExist(cli, fileName) {
+  const outputDir = cli.config.outputDevDir;
+  return fs.existsSync(path.join(outputDir, fileName));
+}
+
+export function buildOutputExist(cli, fileName) {
+  const outputDir = cli.config.outputDir;
+  return fs.existsSync(path.join(outputDir, fileName));
+}
+
 /**
 * @param {*} cli
 * @param {string} fileName
@@ -91,10 +99,21 @@ export async function readStartOutput(cli, fileName, options = {}) {
  return readOutput(cli, fileName, options);
 }

+/**
+ * @param {*} cli
+ * @param {string} fileName
+ * @param {readOutputOptions} options
+ */
+export async function readBuildOutput(cli, fileName, options = {}) {
+  options.type = 'build';
+  return readOutput(cli, fileName, options);
+}
+
 export async function execute(cli, configFileDir) {
  await cli.setup();
  cli.config.outputDevDir = path.join(configFileDir, '__output-dev');
  cli.config.devServer.open = false;
+  cli.config.devServer.port = 8080;
  cli.config.watch = false;
  cli.config.outputDir = path.join(configFileDir, '__output');
  await cli.run();
@@ -110,6 +129,15 @@ export async function executeStart(pathToConfig) {
  return cli;
 }

+export async function executeBuild(pathToConfig) {
+  const configFile = path.join(fixtureDir, pathToConfig.split('/').join(path.sep));
+  const cli = new RocketCli({
+    argv: ['build', '--config-file', configFile],
+  });
+  await execute(cli, path.dirname(configFile));
+  return cli;
+}
+
 export async function executeLint(pathToConfig) {
  const configFile = path.join(fixtureDir, pathToConfig.split('/').join(path.sep));
  const cli = new RocketCli({
--- a/packages/cli/test-node/RocketCli.computedConfig.test.js
+++ b/packages/cli/test-node/RocketCli.computedConfig.test.js
@@ -1,6 +1,12 @@
 import chai from 'chai';
 import chalk from 'chalk';
-import { executeStart, readOutput, readStartOutput, setFixtureDir } from '@rocket/cli/test-helpers';
+import {
+  executeBuild,
+  executeStart,
+  readBuildOutput,
+  readStartOutput,
+  setFixtureDir,
+} from '@rocket/cli/test-helpers';

 const { expect } = chai;

@@ -22,42 +28,48 @@ describe('RocketCli computedConfig', () => {
  it('will extract a title from markdown and set first folder as section', async () => {
    cli = await executeStart('computed-config-fixtures/headlines/rocket.config.js');

-    const indexHtml = await readOutput(cli, 'index.html', {
-      type: 'start',
-    });
+    const indexHtml = await readStartOutput(cli, 'index.html');
    const [indexTitle, indexSection] = indexHtml.split('\n');
    expect(indexTitle).to.equal('Root');
    expect(indexSection).to.be.undefined;

-    const subHtml = await readOutput(cli, 'sub/index.html', {
-      type: 'start',
-    });
+    const subHtml = await readStartOutput(cli, 'sub/index.html');
    const [subTitle, subSection] = subHtml.split('\n');
    expect(subTitle).to.equal('Root: Sub');
    expect(subSection).to.equal('sub');

-    const subSubHtml = await readOutput(cli, 'sub/subsub/index.html', {
-      type: 'start',
-    });
+    const subSubHtml = await readStartOutput(cli, 'sub/subsub/index.html');
    const [subSubTitle, subSubSection] = subSubHtml.split('\n');
    expect(subSubTitle).to.equal('Sub: SubSub');
    expect(subSubSection).to.equal('sub');

-    const sub2Html = await readOutput(cli, 'sub2/index.html', {
-      type: 'start',
-    });
+    const sub2Html = await readStartOutput(cli, 'sub2/index.html');
    const [sub2Title, sub2Section] = sub2Html.split('\n');
    expect(sub2Title).to.equal('Root: Sub2');
    expect(sub2Section).to.equal('sub2');

-    const withDataHtml = await readOutput(cli, 'with-data/index.html', {
-      type: 'start',
-    });
+    const withDataHtml = await readStartOutput(cli, 'with-data/index.html');
    const [withDataTitle, withDataSection] = withDataHtml.split('\n');
    expect(withDataTitle).to.equal('Set via data');
    expect(withDataSection).be.undefined;
  });

+  it('will note create a social media image in "start"', async () => {
+    cli = await executeStart('computed-config-fixtures/social-images-only-build/rocket.config.js');
+
+    const indexHtml = await readStartOutput(cli, 'index.html');
+    expect(indexHtml).to.equal('');
+  });
+
+  it('will create a social media image in "build"', async () => {
+    cli = await executeBuild('computed-config-fixtures/social-images-only-build/rocket.config.js');
+
+    const indexHtml = await readBuildOutput(cli, 'index.html', {
+      stripToBody: true,
+    });
+    expect(indexHtml).to.equal('/_merged_assets/11ty-img/5893749-1200.png');
+  });
+
  it('will create a social media image for every page', async () => {
    cli = await executeStart('computed-config-fixtures/social-images/rocket.config.js');

@@ -175,9 +187,7 @@ describe('RocketCli computedConfig', () => {
  it('can be configured via setupEleventyComputedConfig', async () => {
    cli = await executeStart('computed-config-fixtures/setup/addPlugin.rocket.config.js');

-    const indexHtml = await readOutput(cli, 'index.html', {
-      type: 'start',
-    });
+    const indexHtml = await readStartOutput(cli, 'index.html');
    expect(indexHtml).to.equal('test-value');
  });

--- a/packages/cli/test-node/RocketCli.e2e.test.js
+++ b/packages/cli/test-node/RocketCli.e2e.test.js
@@ -1,86 +1,25 @@
 import chai from 'chai';
 import fetch from 'node-fetch';
-import { RocketCli } from '../src/RocketCli.js';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import fs from 'fs-extra';
 import chalk from 'chalk';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+import {
+  executeBuild,
+  executeLint,
+  executeStart,
+  expectThrowsAsync,
+  readBuildOutput,
+  readStartOutput,
+  setFixtureDir,
+} from '@rocket/cli/test-helpers';

 const { expect } = chai;

-/**
- * @param {function} method
- * @param {string} errorMessage
- */
-async function expectThrowsAsync(method, { errorMatch, errorMessage } = {}) {
-  let error = null;
-  try {
-    await method();
-  } catch (err) {
-    error = err;
-  }
-  expect(error).to.be.an('Error', 'No error was thrown');
-  if (errorMatch) {
-    expect(error.message).to.match(errorMatch);
-  }
-  if (errorMessage) {
-    expect(error.message).to.equal(errorMessage);
-  }
-}
-
 describe('RocketCli e2e', () => {
  let cli;

-  async function readOutput(
-    fileName,
-    {
-      stripServiceWorker = false,
-      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));
-    text = text.toString();
-    if (stripToBody) {
-      const bodyOpenTagEnd = text.indexOf('>', text.indexOf('<body') + 1) + 1;
-      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();
-    }
-    return text;
-  }
-
-  async function execute() {
-    await cli.setup();
-    cli.config.outputDevDir = path.join(__dirname, 'e2e-fixtures', '__output-dev');
-    cli.config.devServer.open = false;
-    cli.config.devServer.port = 8080;
-    cli.config.watch = false;
-    cli.config.outputDir = path.join(__dirname, 'e2e-fixtures', '__output');
-    await cli.run();
-  }
-
-  async function executeLint(pathToConfig) {
-    cli = new RocketCli({
-      argv: ['lint', '--config-file', path.join(__dirname, pathToConfig.split('/').join(path.sep))],
-    });
-    await execute();
-  }
-
  before(() => {
    // ignore colors in tests as most CIs won't support it
    chalk.level = 0;
+    setFixtureDir(import.meta.url);
  });

  afterEach(async () => {
@@ -90,79 +29,39 @@ describe('RocketCli e2e', () => {
  });

  it('can add a unified plugin via the config', async () => {
-    cli = new RocketCli({
-      argv: [
-        'build',
-        '--config-file',
-        path.join(__dirname, 'e2e-fixtures', 'unified-plugin', 'rocket.config.js'),
-      ],
-    });
-    await execute();
-    const indexHtml = await readOutput('index.html', {
-      stripServiceWorker: true,
-      stripToBody: true,
-    });
-
+    cli = await executeStart('e2e-fixtures/unified-plugin/rocket.config.js');
+    const indexHtml = await readStartOutput(cli, 'index.html');
    expect(indexHtml).to.equal('<p>See a 🐶</p>');
  });

  describe('eleventy in config', () => {
-    // TODO: find out while this has a side effect and breaks other tests
-    it.skip('can modify eleventy via an elventy function in the config', async () => {
-      cli = new RocketCli({
-        argv: [
-          'start',
-          '--config-file',
-          path.join(__dirname, 'e2e-fixtures', 'content', 'eleventy.rocket.config.js'),
-        ],
-      });
-      await execute();
-      const indexHtml = await readOutput('index.html', {
-        type: 'start',
-      });
+    it('can modify eleventy via an elventy function in the config', async () => {
+      cli = await executeStart('e2e-fixtures/content/eleventy.rocket.config.js');
+      const indexHtml = await readStartOutput(cli, 'index.html');
      expect(indexHtml).to.equal(
        ['# BEFORE #', '<p>Content inside <code>docs/index.md</code></p>'].join('\n'),
      );
    });

    it('will throw if you try to set options by returning an object', async () => {
-      cli = new RocketCli({
-        argv: [
-          'start',
-          '--config-file',
-          path.join(__dirname, 'e2e-fixtures', 'content', 'eleventy-return.rocket.config.js'),
-        ],
-      });
-
-      await expectThrowsAsync(() => execute(), {
-        errorMatch: /Error in your Eleventy config file.*/,
-      });
+      await expectThrowsAsync(
+        () => executeStart('e2e-fixtures/content/eleventy-return.rocket.config.js'),
+        {
+          errorMatch: /Error in your Eleventy config file.*/,
+        },
+      );
    });
  });

  describe('setupDevAndBuildPlugins in config', () => {
    it('can add a rollup plugin via setupDevAndBuildPlugins for build command', async () => {
-      cli = new RocketCli({
-        argv: [
-          'build',
-          '--config-file',
-          path.join(__dirname, 'e2e-fixtures', 'rollup-plugin', 'devbuild.rocket.config.js'),
-        ],
-      });
-      await execute();
-      const inlineModule = await readOutput('e97af63d.js');
+      cli = await executeBuild('e2e-fixtures/rollup-plugin/devbuild.rocket.config.js');
+      const inlineModule = await readBuildOutput(cli, 'e97af63d.js');
      expect(inlineModule).to.equal('var a={test:"data"};console.log(a);');
    });

    it('can add a rollup plugin via setupDevAndBuildPlugins for start command', async () => {
-      cli = new RocketCli({
-        argv: [
-          'start',
-          '--config-file',
-          path.join(__dirname, 'e2e-fixtures', 'rollup-plugin', 'devbuild.rocket.config.js'),
-        ],
-      });
-      await execute();
+      cli = await executeStart('e2e-fixtures/rollup-plugin/devbuild.rocket.config.js');

      const response = await fetch('http://localhost:8080/test-data.json');
      expect(response.ok).to.be.true; // no server error
@@ -173,89 +72,42 @@ describe('RocketCli e2e', () => {
  });

  it('can add a rollup plugin for dev & build and modify a build only plugin via the config', async () => {
-    cli = new RocketCli({
-      argv: [
-        'build',
-        '--config-file',
-        path.join(__dirname, 'e2e-fixtures', 'rollup-plugin', 'devbuild-build.rocket.config.js'),
-      ],
-    });
-    await execute();
-    const inlineModule = await readOutput('e97af63d.js');
+    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 readOutput('my-service-worker.js');
-    expect(swCode).to.not.be.undefined;
  });

  it('can adjust the inputDir', async () => {
-    cli = new RocketCli({
-      argv: [
-        'start',
-        '--config-file',
-        path.join(__dirname, 'e2e-fixtures', 'change-input-dir', 'rocket.config.js'),
-      ],
-    });
-    await execute();
+    cli = await executeStart('e2e-fixtures/change-input-dir/rocket.config.js');

-    const indexHtml = await readOutput('index.html', {
-      type: 'start',
-    });
+    const indexHtml = await readStartOutput(cli, 'index.html');
    expect(indexHtml).to.equal('<p>Markdown in <code>docs/page/index.md</code></p>');
  });

  it('can access main rocket config values via {{rocketConfig.value}}', async () => {
-    cli = new RocketCli({
-      argv: [
-        'start',
-        '--config-file',
-        path.join(__dirname, 'e2e-fixtures', 'rocket-config-in-template', 'rocket.config.js'),
-      ],
-    });
-    await execute();
+    cli = await executeStart('e2e-fixtures/rocket-config-in-template/rocket.config.js');

-    const indexHtml = await readOutput('index.html', {
-      type: 'start',
-    });
+    const indexHtml = await readStartOutput(cli, 'index.html');
    expect(indexHtml).to.equal(
      '<p>You can show Rocket config data like rocketConfig.absoluteBaseUrl = <a href="http://test-domain.com/">http://test-domain.com/</a></p>',
    );
  });

  it('can add a pathPrefix that will not influence the start command', async () => {
-    cli = new RocketCli({
-      argv: [
-        'start',
-        '--config-file',
-        path.join(__dirname, 'e2e-fixtures', 'content', 'pathPrefix.rocket.config.js'),
-      ],
-    });
-    await execute();
+    cli = await executeStart('e2e-fixtures/content/pathPrefix.rocket.config.js');

-    const linkHtml = await readOutput('link/index.html', {
-      type: 'start',
-    });
+    const linkHtml = await readStartOutput(cli, 'link/index.html');
    expect(linkHtml).to.equal(
      ['<p><a href="../">home</a></p>', '<p><a href="/">absolute home</a></p>'].join('\n'),
    );
-    const assetHtml = await readOutput('use-assets/index.html', {
-      type: 'start',
-    });
+    const assetHtml = await readStartOutput(cli, 'use-assets/index.html');
    expect(assetHtml).to.equal('<link rel="stylesheet" href="/_merged_assets/some.css">');
  });

  it('can add a pathPrefix that will be used in the build command', async () => {
-    cli = new RocketCli({
-      argv: [
-        'build',
-        '--config-file',
-        path.join(__dirname, 'e2e-fixtures', 'content', 'pathPrefix.rocket.config.js'),
-      ],
-    });
-    await execute();
+    cli = await executeBuild('e2e-fixtures/content/pathPrefix.rocket.config.js');

-    const linkHtml = await readOutput('link/index.html', {
-      stripServiceWorker: true,
+    const linkHtml = await readBuildOutput(cli, 'link/index.html', {
      stripToBody: true,
    });
    expect(linkHtml).to.equal(
@@ -263,9 +115,7 @@ describe('RocketCli e2e', () => {
        '\n',
      ),
    );
-    const assetHtml = await readOutput('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>',
    );
--- 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'),
--- a/packages/cli/test-node/RocketCli.useCases.test.js
+++ b/packages/cli/test-node/RocketCli.useCases.test.js
@@ -0,0 +1,67 @@
+import chai from 'chai';
+import chalk from 'chalk';
+import {
+  executeStart,
+  readStartOutput,
+  setFixtureDir,
+  startOutputExist,
+} from '@rocket/cli/test-helpers';
+
+const { expect } = chai;
+
+describe('RocketCli use cases', () => {
+  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('supports dynamic imports', async () => {
+    cli = await executeStart('use-cases/dynamic-imports/rocket.config.js');
+
+    expect(startOutputExist(cli, 'sub/assets/myData.js'), 'static files did not get copied').to.be
+      .true;
+
+    const aboutHtml = await readStartOutput(cli, 'about/index.html', { formatHtml: true });
+    expect(aboutHtml).to.equal(
+      [
+        '<p><code>about.md</code></p>',
+        '<script type="module" src="/about/__mdjs-stories.js" mdjs-setup></script>',
+      ].join('\n'),
+    );
+
+    const subHtml = await readStartOutput(cli, 'sub/index.html', { formatHtml: true });
+    expect(subHtml).to.equal(
+      [
+        '<p><code>sub/index.md</code></p>',
+        '<script type="module" src="/sub/__mdjs-stories.js" mdjs-setup></script>',
+      ].join('\n'),
+    );
+
+    const subDetailsHtml = await readStartOutput(cli, 'sub/details/index.html', {
+      formatHtml: true,
+    });
+    expect(subDetailsHtml).to.equal(
+      [
+        '<p><code>sub/details.md</code></p>',
+        '<script type="module" src="/sub/details/__mdjs-stories.js" mdjs-setup></script>',
+      ].join('\n'),
+    );
+
+    const indexHtml = await readStartOutput(cli, 'index.html', { formatHtml: true });
+    expect(indexHtml).to.equal(
+      [
+        '<p><code>index.md</code></p>',
+        '<script type="module" src="/__mdjs-stories.js" mdjs-setup></script>',
+      ].join('\n'),
+    );
+  });
+});
--- a/packages/cli/test-node/computed-config-fixtures/social-images-only-build/docs/.eleventyignore
+++ b/packages/cli/test-node/computed-config-fixtures/social-images-only-build/docs/.eleventyignore
@@ -0,0 +1 @@
+**/*.njk
--- a/packages/cli/test-node/computed-config-fixtures/social-images-only-build/docs/_includes/layout-default.njk
+++ b/packages/cli/test-node/computed-config-fixtures/social-images-only-build/docs/_includes/layout-default.njk
--- a/packages/cli/test-node/computed-config-fixtures/social-images-only-build/docs/index.md
+++ b/packages/cli/test-node/computed-config-fixtures/social-images-only-build/docs/index.md
@@ -0,0 +1 @@
+# Rocket
--- a/packages/cli/test-node/computed-config-fixtures/social-images-only-build/rocket.config.js
+++ b/packages/cli/test-node/computed-config-fixtures/social-images-only-build/rocket.config.js
@@ -0,0 +1,4 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {};
+
+export default config;
--- a/packages/cli/test-node/computed-config-fixtures/social-images-override/docs/_includes/layout-default.njk
+++ b/packages/cli/test-node/computed-config-fixtures/social-images-override/docs/_includes/layout-default.njk
--- a/packages/cli/test-node/computed-config-fixtures/social-images-override/rocket.config.js
+++ b/packages/cli/test-node/computed-config-fixtures/social-images-override/rocket.config.js
@@ -2,6 +2,9 @@ import { adjustPluginOptions } from 'plugins-manager';

 /** @type {Partial<import("../../../types/main").RocketCliOptions>} */
 const config = {
+  start: {
+    createSocialMediaImages: true,
+  },
  setupEleventyComputedConfig: [
    adjustPluginOptions('socialMediaImage', {
      createSocialImageSvg: async () => {
--- a/packages/cli/test-node/computed-config-fixtures/social-images/docs/_data/layout.cjs
+++ b/packages/cli/test-node/computed-config-fixtures/social-images/docs/_data/layout.cjs
@@ -1 +0,0 @@
-module.exports = 'layout.njk';
--- a/packages/cli/test-node/computed-config-fixtures/social-images/docs/_includes/layout-default.njk
+++ b/packages/cli/test-node/computed-config-fixtures/social-images/docs/_includes/layout-default.njk
@@ -0,0 +1 @@
+{{ socialMediaImage }}
--- a/packages/cli/test-node/computed-config-fixtures/social-images/rocket.config.js
+++ b/packages/cli/test-node/computed-config-fixtures/social-images/rocket.config.js
@@ -1,4 +1,8 @@
 /** @type {Partial<import("../../../types/main").RocketCliOptions>} */
-const config = {};
+const config = {
+  start: {
+    createSocialMediaImages: true,
+  },
+};

 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/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
@@ -29,6 +29,7 @@ describe('normalizeConfig', () => {

    expect(cleanup(config)).to.deep.equal({
      command: 'help',
+      createSocialMediaImages: true,
      devServer: {},
      build: {},
      watch: true,
@@ -40,6 +41,7 @@ describe('normalizeConfig', () => {
      setupEleventyComputedConfig: [],
      setupCliPlugins: [],
      presets: [],
+      serviceWorkerName: 'service-worker.js',
      plugins: [
        { commands: ['start'] },
        { commands: ['build'] },
@@ -61,6 +63,7 @@ describe('normalizeConfig', () => {

    expect(cleanup(config)).to.deep.equal({
      command: 'help',
+      createSocialMediaImages: true,
      devServer: {
        more: 'settings',
      },
@@ -74,6 +77,7 @@ describe('normalizeConfig', () => {
      setupCliPlugins: [],
      setupEleventyComputedConfig: [],
      presets: [],
+      serviceWorkerName: 'service-worker.js',
      plugins: [
        { commands: ['start'] },
        { commands: ['build'] },
@@ -92,6 +96,7 @@ describe('normalizeConfig', () => {

    expect(cleanup(config)).to.deep.equal({
      command: 'help',
+      createSocialMediaImages: true,
      devServer: {
        more: 'from-file',
      },
@@ -105,6 +110,7 @@ describe('normalizeConfig', () => {
      setupCliPlugins: [],
      setupEleventyComputedConfig: [],
      presets: [],
+      serviceWorkerName: 'service-worker.js',
      plugins: [
        { commands: ['start'] },
        { commands: ['build'] },
@@ -128,6 +134,7 @@ describe('normalizeConfig', () => {

    expect(cleanup(config)).to.deep.equal({
      command: 'help',
+      createSocialMediaImages: true,
      devServer: {},
      build: {},
      watch: true,
@@ -139,6 +146,7 @@ describe('normalizeConfig', () => {
      setupCliPlugins: [],
      setupEleventyComputedConfig: [],
      presets: [],
+      serviceWorkerName: 'service-worker.js',
      plugins: [
        { commands: ['start'] },
        { commands: ['build'] },
--- a/packages/cli/test-node/use-cases/dynamic-imports/docs/.eleventyignore
+++ b/packages/cli/test-node/use-cases/dynamic-imports/docs/.eleventyignore
@@ -0,0 +1 @@
+**/*.njk
--- a/packages/cli/test-node/use-cases/dynamic-imports/docs/_includes/layout-default.njk
+++ b/packages/cli/test-node/use-cases/dynamic-imports/docs/_includes/layout-default.njk
@@ -0,0 +1 @@
+{{ content | safe }}
--- a/packages/cli/test-node/use-cases/dynamic-imports/docs/about.md
+++ b/packages/cli/test-node/use-cases/dynamic-imports/docs/about.md
@@ -0,0 +1,8 @@
+`about.md`
+
+```js script
+import { myData } from './sub/assets/myData.js';
+import('./sub/assets/myData.js');
+const name = 'myData';
+import(`./sub/assets/${name}.js`);
+```
--- a/packages/cli/test-node/use-cases/dynamic-imports/docs/index.md
+++ b/packages/cli/test-node/use-cases/dynamic-imports/docs/index.md
@@ -0,0 +1,8 @@
+`index.md`
+
+```js script
+import { myData } from './sub/assets/myData.js';
+import('./sub/assets/myData.js');
+const name = 'myData';
+import(`./sub/assets/${name}.js`);
+```
--- a/packages/cli/test-node/use-cases/dynamic-imports/docs/sub/assets/myData.js
+++ b/packages/cli/test-node/use-cases/dynamic-imports/docs/sub/assets/myData.js
@@ -0,0 +1 @@
+export const myData = 'The answer to everything is 42';
--- a/packages/cli/test-node/use-cases/dynamic-imports/docs/sub/details.md
+++ b/packages/cli/test-node/use-cases/dynamic-imports/docs/sub/details.md
@@ -0,0 +1,8 @@
+`sub/details.md`
+
+```js script
+import { myData } from './assets/myData.js';
+import('./assets/myData.js');
+const name = 'myData';
+import(`./assets/${name}.js`);
+```
--- a/packages/cli/test-node/use-cases/dynamic-imports/docs/sub/index.md
+++ b/packages/cli/test-node/use-cases/dynamic-imports/docs/sub/index.md
@@ -0,0 +1,8 @@
+`sub/index.md`
+
+```js script
+import { myData } from './assets/myData.js';
+import('./assets/myData.js');
+const name = 'myData';
+import(`./assets/${name}.js`);
+```
--- a/packages/cli/test-node/use-cases/dynamic-imports/rocket.config.js
+++ b/packages/cli/test-node/use-cases/dynamic-imports/rocket.config.js
@@ -0,0 +1,4 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {};
+
+export default config;
--- a/packages/cli/types/main.d.ts
+++ b/packages/cli/types/main.d.ts
@@ -13,14 +13,22 @@ export interface RocketPreset {
  setupEleventyComputedConfig: function[];
 }

+interface RocketStartConfig {
+  createSocialMediaImages?: boolean;
+}
+
 export interface RocketCliOptions {
  presets: Array<RocketPreset>;
  pathPrefix?: string;
+  serviceWorkerName?: string;
  inputDir: string;
  outputDir: string;
-  emptyOutputDir?: boolen;
+  emptyOutputDir?: boolean;
  absoluteBaseUrl?: string;
  watch: boolean;
+  createSocialMediaImages?: boolean;
+
+  start?: RocketStartConfig;

  // TODO: improve all setup functions
  setupUnifiedPlugins?: function[];
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @rocket/core

+## 0.1.2
+
+### Patch Changes
+
+- be0d0b3: fix: add missing main entry to the packages
+
 ## 0.1.1

 ### Patch Changes
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/core",
-  "version": "0.1.1",
+  "version": "0.1.2",
  "publishConfig": {
    "access": "public"
  },
@@ -13,6 +13,7 @@
  },
  "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
  "homepage": "https://rocket.modern-web.dev/",
+  "main": "./dist/title.cjs",
  "type": "module",
  "exports": {
    "./title": {
--- 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/packages/drawer/src/RocketDrawer.js
+++ b/packages/drawer/src/RocketDrawer.js
@@ -18,6 +18,7 @@ export class RocketDrawer extends OverlayMixin(LitElement) {
    return {
      useOverlay: { type: Boolean, reflect: true },
      useOverlayMediaQuery: { type: String },
+      mediaMatcher: { type: Object },
    };
  }

@@ -89,6 +90,20 @@ export class RocketDrawer extends OverlayMixin(LitElement) {
        }
      }
    }
+    if (changedProperties.has('useOverlayMediaQuery')) {
+      this.mediaMatcher.removeEventListener('change', this.onMatchMedia);
+
+      this.mediaMatcher = window.matchMedia(this.useOverlayMediaQuery);
+      this.mediaMatcher.addEventListener('change', this.onMatchMedia);
+      this.useOverlay = !!this.mediaMatcher.matches;
+    }
+  }
+
+  /**
+   * @param { MediaQueryListEvent } query
+   */
+  onMatchMedia(query) {
+    this.useOverlay = !!query.matches;
  }

  _setupOpenCloseListeners() {
@@ -118,11 +133,15 @@ export class RocketDrawer extends OverlayMixin(LitElement) {

    this.__toggle = this.__toggle.bind(this);

+    this.onMatchMedia = this.onMatchMedia.bind(this);
    this.onGestureStart = this.onGestureStart.bind(this);
    this.onGestureMove = this.onGestureMove.bind(this);
    this.onGestureEnd = this.onGestureEnd.bind(this);
    this.updateFromTouch = this.updateFromTouch.bind(this);

+    this.mediaMatcher = window.matchMedia(this.useOverlayMediaQuery);
+    this.mediaMatcher.addEventListener('change', this.onMatchMedia);
+
    this._startX = 0;
    this._currentX = 0;
    this._velocity = 0;
@@ -133,10 +152,7 @@ export class RocketDrawer extends OverlayMixin(LitElement) {

  connectedCallback() {
    super.connectedCallback();
-    this.useOverlay = !!window.matchMedia(this.useOverlayMediaQuery).matches;
-    window.matchMedia(this.useOverlayMediaQuery).addListener(query => {
-      this.useOverlay = !!query.matches;
-    });
+    this.useOverlay = !!this.mediaMatcher.matches;
  }

  render() {
--- a/packages/eleventy-plugin-mdjs-unified/CHANGELOG.md
+++ b/packages/eleventy-plugin-mdjs-unified/CHANGELOG.md
@@ -1,5 +1,32 @@
 # @rocket/eleventy-plugin-mdjs-unified

+## 0.4.1
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+- Updated dependencies [2b7f1ee]
+  - @mdjs/core@0.7.1
+
+## 0.4.0
+
+### Minor Changes
+
+- 2267e72: Write the mdjs JavaScript code to a file and load it from there instead of an inline script
+
+### Patch Changes
+
+- Updated dependencies [a8e66d8]
+- Updated dependencies [fe6a929]
+- Updated dependencies [a8e66d8]
+  - @mdjs/core@0.7.0
+
+## 0.3.1
+
+### Patch Changes
+
+- f44a0f4: Rewrite dynamic imports with "`"
+
 ## 0.3.0

 ### Minor Changes
--- a/packages/eleventy-plugin-mdjs-unified/package.json
+++ b/packages/eleventy-plugin-mdjs-unified/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/eleventy-plugin-mdjs-unified",
-  "version": "0.3.0",
+  "version": "0.4.1",
  "publishConfig": {
    "access": "public"
  },
@@ -31,7 +31,7 @@
    "mdjs"
  ],
  "dependencies": {
-    "@mdjs/core": "^0.6.2",
+    "@mdjs/core": "^0.7.1",
    "es-module-lexer": "^0.3.26",
    "unist-util-visit": "^2.0.3"
  },
--- a/packages/eleventy-plugin-mdjs-unified/src/eleventy-plugin-mdjs-unified.js
+++ b/packages/eleventy-plugin-mdjs-unified/src/eleventy-plugin-mdjs-unified.js
@@ -1,4 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+const path = require('path');
+const slash = require('slash');
+const fs = require('fs');
 const { mdjsProcess } = require('@mdjs/core');
 const visit = require('unist-util-visit');
 const { init, parse } = require('es-module-lexer');
@@ -7,7 +10,7 @@ const { init, parse } = require('es-module-lexer');
 const { parseTitle } = require('@rocket/core/title');

 /** @typedef {import('@mdjs/core').MdjsProcessPlugin} MdjsProcessPlugin */
-/** @typedef {import('../types/code').EleventPluginMdjsUnified} EleventPluginMdjsUnified */
+/** @typedef {import('../types/code').EleventyPluginMdjsUnified} EleventyPluginMdjsUnified */
 /** @typedef {import('../types/code').NodeChildren} NodeChildren */
 /** @typedef {import('../types/code').NodeElement} NodeElement */
 /** @typedef {import('unist').Node} Node */
@@ -72,10 +75,14 @@ async function processImports(source, inputPath) {
          newSource += '.' + importSrc;
        } else if (importSrc.startsWith("'./")) {
          newSource += "'." + importSrc.substring(1);
+        } else if (importSrc.startsWith('`./')) {
+          newSource += '`.' + importSrc.substring(1);
        } else if (importSrc.startsWith('../')) {
          newSource += '../' + importSrc;
        } else if (importSrc.startsWith("'../")) {
          newSource += "'../" + importSrc.substring(1);
+        } else if (importSrc.startsWith('`../')) {
+          newSource += '`../' + importSrc.substring(1);
        } else {
          newSource += importSrc;
        }
@@ -89,7 +96,7 @@ async function processImports(source, inputPath) {
 }

 /**
- * @param {EleventPluginMdjsUnified} pluginOptions
+ * @param {EleventyPluginMdjsUnified} pluginOptions
 */
 function eleventyUnified(pluginOptions) {
  /**
@@ -115,8 +122,12 @@ function eleventyUnified(pluginOptions) {
      return plugins.map(plugin => {
        if (plugin.options) {
          plugin.options.page = eleventySettings.page;
+          plugin.options.rocketConfig = eleventySettings.rocketConfig;
        } else {
-          plugin.options = { page: eleventySettings.page };
+          plugin.options = {
+            page: eleventySettings.page,
+            rocketConfig: eleventySettings.rocketConfig,
+          };
        }
        return plugin;
      });
@@ -135,10 +146,23 @@ function eleventyUnified(pluginOptions) {

    let code = result.html;
    if (result.jsCode) {
+      const newFolder = path.dirname(eleventySettings.page.outputPath);
+      const newName = path.join(newFolder, '__mdjs-stories.js');
+      await fs.promises.mkdir(newFolder, { recursive: true });
+      await fs.promises.writeFile(newName, result.jsCode, 'utf8');
+
+      let scriptUrl = eleventySettings.page.url;
+      if (
+        eleventySettings.rocketConfig &&
+        eleventySettings.rocketConfig.command === 'build' &&
+        eleventySettings.rocketConfig.pathPrefix
+      ) {
+        scriptUrl = slash(
+          path.join(eleventySettings.rocketConfig.pathPrefix, eleventySettings.page.url),
+        );
+      }
      code += `
-        <script type="module">
-          ${result.jsCode}
-        </script>
+        <script type="module" src="${scriptUrl}__mdjs-stories.js" mdjs-setup></script>
      `;
    }
    return code;
@@ -153,15 +177,15 @@ function eleventyUnified(pluginOptions) {

 /**
 * @param {*} eleventyConfig
- * @param {EleventPluginMdjsUnified} [pluginOptions]
+ * @param {EleventyPluginMdjsUnified} [pluginOptions]
 */
 function configFunction(eleventyConfig, pluginOptions = {}) {
  eleventyConfig.setLibrary('md', eleventyUnified(pluginOptions));
 }

-const eleventPluginMdjsUnified = {
+const EleventyPluginMdjsUnified = {
  initArguments: {},
  configFunction,
 };

-module.exports = eleventPluginMdjsUnified;
+module.exports = EleventyPluginMdjsUnified;
--- a/packages/eleventy-plugin-mdjs-unified/test-node/eleventy-plugin-mdjs-unified.test.js
+++ b/packages/eleventy-plugin-mdjs-unified/test-node/eleventy-plugin-mdjs-unified.test.js
@@ -53,13 +53,12 @@ describe('eleventy-plugin-mdjs-unified', () => {

  it('renders markdown with javascript', async () => {
    const files = await renderEleventy('./test-node/fixtures/mdjs');
-    expect(files).to.deep.equal([
-      {
-        html:
-          '<h1 id="first"><a aria-hidden="true" tabindex="-1" href="#first"><span class="icon icon-link"></span></a>First</h1>\n<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">\'bar\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token punctuation">{</span> html <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'lit-html\'</span><span class="token punctuation">;</span>\n</code></pre>\n<mdjs-story mdjs-story-name="inline"></mdjs-story>\n<mdjs-preview mdjs-story-name="withBorder"></mdjs-preview>\n        <script type="module">\n          \nexport const inline = () => html` <p>main</p> `;\nexport const withBorder = () => html` <p>main</p> `;\nconst rootNode = document;\nconst stories = [{ key: \'inline\', story: inline, code: `<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">inline</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> html<span class="token template-string"><span class="token template-punctuation string">\\`</span><span class="token html language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>main<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span> </span><span class="token template-punctuation string">\\`</span></span><span class="token punctuation">;</span>\n</code></pre>` }, { key: \'withBorder\', story: withBorder, code: `<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">withBorder</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> html<span class="token template-string"><span class="token template-punctuation string">\\`</span><span class="token html language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>main<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span> </span><span class="token template-punctuation string">\\`</span></span><span class="token punctuation">;</span>\n</code></pre>` }];\nfor (const story of stories) {\n  const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);\n  storyEl.codeHasHtml = true;\n  storyEl.story = story.story;\n  storyEl.code = story.code;\n};\nif (!customElements.get(\'mdjs-preview\')) { import(\'@mdjs/mdjs-preview/mdjs-preview.js\'); }\nif (!customElements.get(\'mdjs-story\')) { import(\'@mdjs/mdjs-story/mdjs-story.js\'); }\n        </script>\n      ',
-        name: 'first/index.html',
-      },
-    ]);
+
+    expect(files.length).to.equal(1);
+    expect(files[0].name).to.equal('first/index.html');
+
+    expect(files[0].html).to.include('<script type="module"');
+    expect(files[0].html).to.include('mdjs-setup>');
  });

  it('rewrites relative import pathes', async () => {
@@ -67,7 +66,7 @@ describe('eleventy-plugin-mdjs-unified', () => {
    expect(files).to.deep.equal([
      {
        html:
-          "<p>first</p>\n        <script type=\"module\">\n          import '../import-me.js';\nimport('../import-me-too.js');\n        </script>\n      ",
+          '<p>first</p>\n        <script type="module" src="/first/__mdjs-stories.js" mdjs-setup></script>\n      ',
        name: 'first/index.html',
      },
    ]);
@@ -78,7 +77,7 @@ describe('eleventy-plugin-mdjs-unified', () => {
    expect(files).to.deep.equal([
      {
        html:
-          "<p>first</p>\n        <script type=\"module\">\n          import '../../import-me.js';\nimport('../../import-me-too.js');\n        </script>\n      ",
+          '<p>first</p>\n        <script type="module" src="/subpage/first/__mdjs-stories.js" mdjs-setup></script>\n      ',
        name: 'subpage/first/index.html',
      },
    ]);
@@ -89,7 +88,7 @@ describe('eleventy-plugin-mdjs-unified', () => {
    expect(files).to.deep.equal([
      {
        html:
-          "<p>index</p>\n        <script type=\"module\">\n          import './import-me.js';\nimport('./import-me-too.js');\n        </script>\n      ",
+          '<p>index</p>\n        <script type="module" src="/__mdjs-stories.js" mdjs-setup></script>\n      ',
        name: 'index.html',
      },
    ]);
--- a/packages/eleventy-plugin-mdjs-unified/types/code.d.ts
+++ b/packages/eleventy-plugin-mdjs-unified/types/code.d.ts
@@ -3,7 +3,7 @@ import { Node } from 'unist';

 export const setupUnifiedPluginsFn: (plugins: MdjsProcessPlugin[]) => MdjsProcessPlugin[];

-export interface EleventPluginMdjsUnified {
+export interface EleventyPluginMdjsUnified {
  setupUnifiedPlugins?: setupUnifiedPluginsFn[];
 }

--- a/packages/eleventy-rocket-nav/.eleventy.js
+++ b/packages/eleventy-rocket-nav/.eleventy.js
@@ -1,4 +1,5 @@
 const RocketNav = require('./eleventy-rocket-nav');
+const { addPageAnchors } = require('./src/addPageAnchors.js');

 // export the configuration function for plugin
 module.exports = function (eleventyConfig) {
@@ -8,6 +9,10 @@ module.exports = function (eleventyConfig) {
  eleventyConfig.addNunjucksFilter('rocketNavToHtml', function (pages, options) {
    return RocketNav.toHtml.call(eleventyConfig, pages, options);
  });
+  eleventyConfig.addTransform('rocket-nav-add-page-anchors', async function (content) {
+    const newContent = await addPageAnchors(content);
+    return newContent;
+  });
 };

 module.exports.navigation = {
--- a/packages/eleventy-rocket-nav/CHANGELOG.md
+++ b/packages/eleventy-rocket-nav/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @rocket/eleventy-rocket-nav

+## 0.3.0
+
+### Minor Changes
+
+- ef8ebb0: To support dynamically created content to be part of the anchor navigation of the page we now analyze the final html output instead of `entry.templateContent`.
+
+  BREAKING CHANGE:
+
+  - only add anchors for the currently active pages (before it added anchor for every page)
+
 ## 0.2.1

 ### Patch Changes
--- a/packages/eleventy-rocket-nav/eleventy-rocket-nav.js
+++ b/packages/eleventy-rocket-nav/eleventy-rocket-nav.js
@@ -94,21 +94,8 @@ function findNavigationEntries(nodes = [], key = '') {
        entry.title = entry.key;
      }
      if (entry.key) {
-        if (!headingsCache.has(entry.templateContent)) {
-          headingsCache.set(entry.templateContent, getHeadingsOfHtml(entry.templateContent));
-        }
-        const headings = /** @type {Heading[]} */ (headingsCache.get(entry.templateContent));
-        const anchors = headings.map(heading => ({
-          key: heading.text + Math.random(),
-          parent: entry.key,
-          url: `${entry.url}#${heading.id}`,
-          pluginType: 'eleventy-navigation',
-          parentKey: entry.key,
-          title: heading.text,
-          anchor: true,
-        }));
        // @ts-ignore
-        entry.children = [...anchors, ...findNavigationEntries(nodes, entry.key)];
+        entry.children = findNavigationEntries(nodes, entry.key);
      }
      return entry;
    });
@@ -227,43 +214,36 @@ function navigationToHtml(pages, _options = {}) {
      }>${pages
        .map(entry => {
          const liClass = [];
-          const aClass = [];
          if (options.listItemClass) {
            liClass.push(options.listItemClass);
          }
-          if (options.anchorClass) {
-            aClass.push(options.anchorClass);
-          }
-          if (options.activeKey === entry.key) {
-            if (options.activeListItemClass) {
-              liClass.push(options.activeListItemClass);
-            }
-            if (options.activeAnchorClass) {
-              aClass.push(options.activeAnchorClass);
-            }
+          if (options.activeKey === entry.key && options.activeListItemClass) {
+            liClass.push(options.activeListItemClass);
          }
          if (options.activeTreeListClass && activePages && activePages.includes(entry.key)) {
            liClass.push(options.activeTreeListClass);
          }
-          if (options.activeAnchorListClass && activePages && activePages.includes(entry.key)) {
-            aClass.push(options.activeAnchorListClass);
-          }
          if (options.listItemHasChildrenClass && entry.children && entry.children.length) {
            liClass.push(options.listItemHasChildrenClass);
          }

-          if (entry.anchor) {
-            liClass.push('anchor');
-            aClass.push('anchor');
+          const output = [];
+          output.push(
+            `<${options.listItemElement}${liClass.length ? ` class="${liClass.join(' ')}"` : ''}>`,
+          );
+          output.push(`<a href="${urlFilter(entry.url)}">${entry.title}</a>`);
+          if (options.showExcerpt && entry.excerpt) {
+            output.push(`: ${entry.excerpt}`);
          }
+          if (options.activeKey === entry.key && options.activeListItemClass) {
+            output.push('<!-- ADD PAGE ANCHORS -->');
+          }
+          if (entry.children) {
+            output.push(navigationToHtml(entry.children, options));
+          }
+          output.push(`</${options.listItemElement}>`);

-          return `<${options.listItemElement}${
-            liClass.length ? ` class="${liClass.join(' ')}"` : ''
-          }><a href="${urlFilter(entry.url)}"${
-            aClass.length ? ` class="${aClass.join(' ')}"` : ''
-          }>${entry.title}</a>${options.showExcerpt && entry.excerpt ? `: ${entry.excerpt}` : ''}${
-            entry.children ? navigationToHtml(entry.children, options) : ''
-          }</${options.listItemElement}>`;
+          return output.join('\n');
        })
        .join('\n')}</${options.listElement}>`
    : '';
--- a/packages/eleventy-rocket-nav/package.json
+++ b/packages/eleventy-rocket-nav/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/eleventy-rocket-nav",
-  "version": "0.2.1",
+  "version": "0.3.0",
  "publishConfig": {
    "access": "public"
  },
@@ -13,7 +13,7 @@
  },
  "main": ".eleventy.js",
  "scripts": {
-    "test": "mocha test-node/**/*.test.js test-node/*.test.js",
+    "test": "mocha test-node/**/*.test.js test-node/*.test.js --timeout 5000",
    "test:watch": "mocha test-node/**/*.test.js test-node/*.test.js --watch"
  },
  "files": [
--- a/packages/eleventy-rocket-nav/src/addPageAnchors.js
+++ b/packages/eleventy-rocket-nav/src/addPageAnchors.js
@@ -0,0 +1,136 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const fs = require('fs');
+const { SaxEventType, SAXParser } = require('sax-wasm');
+
+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 | SaxEventType.Comment,
+  { highWaterMark: 256 * 1024 }, // 256k chunks
+);
+
+/**
+ * @param {object} options
+ * @param {string} options.content
+ * @param {Position} options.start
+ * @param {Position} options.end
+ * @param {string} options.insert
+ */
+function removeBetween({ content, start, end, insert = '' }) {
+  const lines = content.split('\n');
+  const i = start.line;
+  const line = lines[i];
+  const upToChange = line.slice(0, start.character - 1);
+  const afterChange = line.slice(end.character + 2);
+
+  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 getText(data) {
+  if (data.textNodes) {
+    return data.textNodes.map(textNode => textNode.value).join('');
+  }
+  return null;
+}
+
+/**
+ * @param {string} html
+ */
+function getHeadingsOfHtml(html) {
+  /** @type {Heading[]} */
+  const headings = [];
+  /** @type {Text} */
+  let insertPoint;
+  parser.eventHandler = (ev, _data) => {
+    if (ev === SaxEventType.Comment) {
+      const data = /** @type {Text} */ (/** @type {any} */ (_data));
+      // NOTE: we NEED to access data internal value so sax-wasm does not reuse it's value
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const tmp = data.start.line + data.end.line;
+      if (data.value.trim() === 'ADD PAGE ANCHORS' || data.value.trim() === '-->ADD PAGE ANCHORS') {
+        insertPoint = data;
+      }
+    }
+
+    if (ev === SaxEventType.CloseTag) {
+      const data = /** @type {Tag} */ (/** @type {any} */ (_data));
+      if (data.name === 'h2') {
+        const id = getAttribute(data, 'id');
+        const text = getText(data);
+        if (id && text) {
+          headings.push({ text, id });
+        }
+      }
+    }
+  };
+  parser.write(Buffer.from(html, 'utf8'));
+  parser.end();
+
+  // @ts-ignore
+  return { headings, insertPoint };
+}
+
+let isSetup = false;
+
+/**
+ * @param {string} content
+ */
+async function addPageAnchors(content) {
+  if (!isSetup) {
+    await parser.prepareWasm(saxWasmBuffer);
+    isSetup = true;
+  }
+
+  const { headings, insertPoint } = getHeadingsOfHtml(content);
+  const pageAnchorsHtml = [];
+  if (headings.length > 0) {
+    pageAnchorsHtml.push('<ul>');
+    for (const heading of headings) {
+      pageAnchorsHtml.push('  <li class="menu-item anchor">');
+      pageAnchorsHtml.push(`    <a href="#${heading.id}" class="anchor">${heading.text}</a>`);
+      pageAnchorsHtml.push('  </li>');
+    }
+    pageAnchorsHtml.push('</ul>');
+  }
+
+  if (insertPoint) {
+    return removeBetween({
+      content,
+      start: insertPoint.start,
+      end: insertPoint.end,
+      insert: pageAnchorsHtml.join('\n'),
+    });
+  }
+  return content;
+}
+
+module.exports = {
+  addPageAnchors,
+};
--- a/packages/eleventy-rocket-nav/test-node/addPageAnchors.test.js
+++ b/packages/eleventy-rocket-nav/test-node/addPageAnchors.test.js
@@ -0,0 +1,32 @@
+const { expect } = require('chai');
+const prettier = require('prettier');
+const { addPageAnchors } = require('../src/addPageAnchors.js');
+
+const format = code => prettier.format(code, { parser: 'html' }).trim();
+
+describe('addPageAnchors', () => {
+  it('finds and adds anchors for each h2 as an unordered list', async () => {
+    const input = [
+      '<body>',
+      '  <!-- ADD PAGE ANCHORS -->',
+      '  <div id="content">',
+      '    <h2 id="first">👉 First Headline</h2>',
+      '  </div>',
+      '</body>',
+    ].join('\n');
+    const expected = [
+      '<body>',
+      '  <ul>',
+      '    <li class="menu-item anchor">',
+      '      <a href="#first" class="anchor">👉 First Headline</a>',
+      '    </li>',
+      '  </ul>',
+      '  <div id="content">',
+      '    <h2 id="first">👉 First Headline</h2>',
+      '  </div>',
+      '</body>',
+    ].join('\n');
+    const result = await addPageAnchors(input);
+    expect(format(result)).to.deep.equal(expected);
+  });
+});
--- a/packages/eleventy-rocket-nav/test-node/fixtures/three-pages/.eleventy.js
+++ b/packages/eleventy-rocket-nav/test-node/fixtures/three-pages/.eleventy.js
@@ -0,0 +1,5 @@
+const eleventyNavigationPlugin = require('@rocket/eleventy-rocket-nav');
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPlugin(eleventyNavigationPlugin);
+};
--- a/packages/cli/test-node/computed-config-fixtures/social-images-override/docs/_data/layout.cjs
+++ b/packages/cli/test-node/computed-config-fixtures/social-images-override/docs/_data/layout.cjs
--- a/packages/eleventy-rocket-nav/test-node/fixtures/three-pages/_includes/layout.njk
+++ b/packages/eleventy-rocket-nav/test-node/fixtures/three-pages/_includes/layout.njk
@@ -0,0 +1,9 @@
+<body>
+  {{ collections.all | rocketNav | rocketNavToHtml({
+    listItemClass: "menu-item",
+    activeListItemClass: "current",
+    activeKey: eleventyNavigation.key
+  }) | safe }}
+
+  {{ content | safe }}
+</body>
--- a/packages/eleventy-rocket-nav/test-node/fixtures/three-pages/bats.md
+++ b/packages/eleventy-rocket-nav/test-node/fixtures/three-pages/bats.md
@@ -0,0 +1,9 @@
+---
+title: Bats
+eleventyNavigation:
+  key: Bats
+  parent: Mammals
+  order: 2
+---
+
+🦇 can fly.
--- a/packages/eleventy-rocket-nav/test-node/fixtures/three-pages/humans.md
+++ b/packages/eleventy-rocket-nav/test-node/fixtures/three-pages/humans.md
@@ -0,0 +1,12 @@
+---
+title: Humans
+eleventyNavigation:
+  key: Humans
+  parent: Mammals
+  order: 1
+---
+
+<h2 id="anatomy">Anatomy</h2>
+<p>Has arms.</p>
+<h2 id="age">📖 Age</h2>
+<p>Up to 130 years.</p>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
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
Thomas Allmer	818caad7cb	Create chilled-turkeys-help.md	2021-04-04 18:01:06 +02:00
Konstantinos Norgias	672b7e893e	chore: generalize label & add alt when no img	2021-04-04 18:01:06 +02:00
Thomas Allmer	a8e66d84f4	feat(mdjs-core): extract mdjsSetupCode function which support a highlightCode fn	2021-04-04 18:00:26 +02:00
github-actions[bot]	e9090d64b9	Version Packages	2021-04-01 20:01:47 +02:00
Benny Powers	728a205b7b	chore: add changeset	2021-04-01 19:44:43 +02:00
Benny Powers	67ba29d45a	feat(navigation): add no-redirects attribute By default, the sidebar nav redirects clicks on category headings to their first child. To disable those redirects, override `_includes/_joiningBlocks/_layoutSidebar/sidebar/20-navigation.njk` and add the `no-redirects` attribute to the `<rocket-navigation>` element.	2021-04-01 19:44:43 +02:00
github-actions[bot]	758caffdf9	Version Packages	2021-03-25 07:14:15 +01:00
qa46hx	302227e8a9	feat(search): add variable for border-radius of SearchCombobox	2021-03-24 23:20:56 +01:00
Thomas Allmer	04a31220fb	chore: align versions across the mono repo	2021-03-15 21:03:07 +01:00
Benny Powers	d44a23af0c	Merge pull request #83 from modernweb-dev/changeset-release/main Version Packages	2021-03-07 10:14:39 +02:00
github-actions[bot]	18a79589c2	Version Packages	2021-03-06 19:28:35 +00:00
Thomas Allmer	b7727b0e10	chore: add rocket nav upgrade to cli	2021-03-06 20:26:44 +01:00
Thomas Allmer	5edc40fed5	feat(cli): make sure each instance has its own eleventy config	2021-03-06 19:58:09 +01:00
Amin Yahyaabadi	be0d0b3ca1	fix: add missing main entry to the packages (#81 ) This allows the tools to work properly. For example, eslint-plugin-import, TypeScript LSP hyperclick, and many other tools rely on main.	2021-03-06 19:10:49 +01:00
Thomas Allmer	ef8ebb0098	feat(eleventy-rocket-nav): support dynamically created content	2021-03-06 19:05:00 +01:00
djlauk	2fa61e1377	chore: tiny fixes to the README (#74 )	2021-02-23 21:45:41 +01:00
Matsuuu	b23e37f38e	feat(search): Precache search results to service worker	2021-02-23 21:44:53 +01:00
Matsuuu	cf45e32702	feat(search): Add ellipsis as prefix when truncating	2021-02-23 21:44:53 +01:00
Matsuuu	b5965c6c37	feat(search): Set cursor to pointer on result hover	2021-02-23 21:44:53 +01:00
Matsuuu	e39cc45d23	fix(search): Center search icon	2021-02-23 21:44:53 +01:00
Matsuuu	f0434cb12c	feat(search): Add feedback when no results found	2021-02-23 21:44:53 +01:00
Matsuuu	c87caaed2d	feat: Allow overlay query modification in Drawer (#73 )	2021-02-23 21:31:12 +01:00
Thomas Allmer	04af7ecf53	chore: align dependency versions	2021-02-23 20:39:37 +01:00
github-actions[bot]	98d6aad12a	Version Packages	2021-02-05 13:30:10 +01:00
Thomas Allmer	ee6b404aaa	fix: mdjs element pass on shadowRoot to story function	2021-02-05 13:26:42 +01:00
Thomas Allmer	8ba8939c67	chore: use test-helper everywhere	2021-02-04 20:48:08 +01:00
Thomas Allmer	8e095b792e	fix(cli): watching user preset files to trigger updates automatically	2021-02-04 19:56:56 +01:00
github-actions[bot]	b58ac27658	Version Packages	2021-02-04 09:51:19 +01:00
Thomas Allmer	f44a0f4fd4	fix(cli): rewrite dynamic imports with "`"	2021-02-04 09:45:35 +01:00
Thomas Allmer	750418bb51	fix: use class node api of check-html-links in rocket	2021-02-03 23:17:29 +01:00
Guillaume Grossetie	bc2698c1ba	resolves #54 introduce a ignoreLinkPatterns option	2021-02-03 20:43:02 +01:00
Thomas Allmer	74f7ddf478	fix: create social media images only during build	2021-02-03 20:39:16 +01:00
				`@@ -0,0 +1 @@`
				`export const myData = 'The answer to everything is 42';`