Version Packages

also adds code tabs and updates documentation

.eslintignore

@@ -10,3 +10,5 @@ _site
 _site-dev
 __output
 __output-dev
+
+docs/_merged*

docs/_assets/_static/logos/npm.svg

@@ -0,0 +1 @@
+<svg id="n" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#c12127;}.cls-2{fill:#fff;}</style></defs><title>n</title><path class="cls-1" d="M0,16V0H16V16ZM3,3V13H8V5h3v8h2V3Z"/><path class="cls-2" d="M3,3H13V13H11V5H8v8H3Z"/></svg>

docs/_assets/_static/logos/pnpm.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="76.58987244897958 44 164.00775510204068 164" width="160.01" height="160"><defs><path d="M237.6 95L187.6 95L187.6 45L237.6 45L237.6 95Z" id="arNRoK435"></path><path d="M182.59 95L132.59 95L132.59 45L182.59 45L182.59 95Z" id="a3H2WU7Px"></path><path d="M127.59 95L77.59 95L77.59 45L127.59 45L127.59 95Z" id="b1DInM56vl"></path><path d="M237.6 150L187.6 150L187.6 100L237.6 100L237.6 150Z" id="a7LFlgQIwu"></path><path d="M182.59 150L132.59 150L132.59 100L182.59 100L182.59 150Z" id="amwLiZcuo"></path><path d="M182.59 205L132.59 205L132.59 155L182.59 155L182.59 205Z" id="f3Peu5RWan"></path><path d="M237.6 205L187.6 205L187.6 155L237.6 155L237.6 205Z" id="a6DXBfqPa"></path><path d="M127.59 205L77.59 205L77.59 155L127.59 155L127.59 205Z" id="c1GWSTH1z7"></path></defs><g><g><use xlink:href="#arNRoK435" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#a3H2WU7Px" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#b1DInM56vl" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#a7LFlgQIwu" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#amwLiZcuo" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g><g><use xlink:href="#f3Peu5RWan" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g><g><use xlink:href="#a6DXBfqPa" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g><g><use xlink:href="#c1GWSTH1z7" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g></g></svg>

docs/_assets/_static/logos/yarn.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 518 518"><style>.st0{fill:#2c8ebb}.st1{fill:#fff}</style><path class="st0" d="M259 0c143 0 259 116 259 259S402 518 259 518 0 402 0 259 116 0 259 0z"/><path class="st1" d="M435.2 337.5c-1.8-14.2-13.8-24-29.2-23.8-23 .3-42.3 12.2-55.1 20.1-5 3.1-9.3 5.4-13 7.1.8-11.6.1-26.8-5.9-43.5-7.3-20-17.1-32.3-24.1-39.4 8.1-11.8 19.2-29 24.4-55.6 4.5-22.7 3.1-58-7.2-77.8-2.1-4-5.6-6.9-10-8.1-1.8-.5-5.2-1.5-11.9.4C293.1 96 289.6 93.8 286.9 92c-5.6-3.6-12.2-4.4-18.4-2.1-8.3 3-15.4 11-22.1 25.2-1 2.1-1.9 4.1-2.7 6.1-12.7.9-32.7 5.5-49.6 23.8-2.1 2.3-6.2 4-10.5 5.6h.1c-8.8 3.1-12.8 10.3-17.7 23.3-6.8 18.2.2 36.1 7.1 47.7-9.4 8.4-21.9 21.8-28.5 37.5-8.2 19.4-9.1 38.4-8.8 48.7-7 7.4-17.8 21.3-19 36.9-1.6 21.8 6.3 36.6 9.8 42 1 1.6 2.1 2.9 3.3 4.2-.4 2.7-.5 5.6.1 8.6 1.3 7 5.7 12.7 12.4 16.3 13.2 7 31.6 10 45.8 2.9 5.1 5.4 14.4 10.6 31.3 10.6h1c4.3 0 58.9-2.9 74.8-6.8 7.1-1.7 12-4.7 15.2-7.4 10.2-3.2 38.4-12.8 65-30 18.8-12.2 25.3-14.8 39.3-18.2 13.6-3.3 22.1-15.7 20.4-29.4zm-23.8 14.7c-16 3.8-24.1 7.3-43.9 20.2-30.9 20-64.7 29.3-64.7 29.3s-2.8 4.2-10.9 6.1c-14 3.4-66.7 6.3-71.5 6.4-12.9.1-20.8-3.3-23-8.6-6.7-16 9.6-23 9.6-23s-3.6-2.2-5.7-4.2c-1.9-1.9-3.9-5.7-4.5-4.3-2.5 6.1-3.8 21-10.5 27.7-9.2 9.3-26.6 6.2-36.9.8-11.3-6 .8-20.1.8-20.1s-6.1 3.6-11-3.8c-4.4-6.8-8.5-18.4-7.4-32.7 1.2-16.3 19.4-32.1 19.4-32.1s-3.2-24.1 7.3-48.8c9.5-22.5 35.1-40.6 35.1-40.6s-21.5-23.8-13.5-45.2c5.2-14 7.3-13.9 9-14.5 6-2.3 11.8-4.8 16.1-9.5 21.5-23.2 48.9-18.8 48.9-18.8s13-39.5 25-31.8c3.7 2.4 17 32 17 32s14.2-8.3 15.8-5.2c8.6 16.7 9.6 48.6 5.8 68-6.4 32-22.4 49.2-28.8 60-1.5 2.5 17.2 10.4 29 43.1 10.9 29.9 1.2 55 2.9 57.8.3.5.4.7.4.7s12.5 1 37.6-14.5c13.4-8.3 29.3-17.6 47.4-17.8 17.5-.3 18.4 20.2 5.2 23.4z"/></svg>

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;
+}

docs/_assets/style.css

@@ -1,3 +1,7 @@
+:root {
+  --markdown-table-row-odd-background-color: #efefef;
+}
+
 body[layout^='layout-home'] .markdown-body .call-to-action:nth-of-type(2) {
   --primary-color: #222;
   --primary-color-lighter: #333;
@@ -19,3 +23,12 @@ rocket-navigation {
 header {
   font-family: 'Montserrat', sans-serif;
 }
+
+code-tabs[collection="package-managers"] {
+  --code-tabs-icon-height: 18px;
+  --code-tabs-justify-tabs: end;
+}
+
+:not(rocket-navigation):not(:defined) {
+  opacity: 0;
+}

docs/_data/site.cjs

@@ -9,6 +9,11 @@ module.exports = async function () {
         name: 'GitHub',
         url: 'https://github.com/modernweb-dev/rocket',
       },
+      {
+        name: 'Slack',
+        url:
+          'https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw',
+      },
     ],
     gitSiteUrl: 'https://github.com/modernweb-dev/rocket',
     gitBranch: 'main',

docs/_includes/_joiningBlocks/head/site.njk

@@ -1,9 +1,3 @@
-<link
-  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
-  rel="stylesheet"
-/>
-<link
-  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
-  rel="stylesheet"
-/>
 <meta name="twitter:creator" content="@modern_web_dev" />
+
+<link rel="stylesheet" href="{{ '/_assets/body.css' | asset | url }}" mdjs-use>

docs/docs/configuration/computed-config.md

@@ -8,25 +8,23 @@ Rocket exposes it via `setupEleventyComputedConfig`.
 
 Let's say you want to add a `Welcome to the contact page` everywhere. (A filter might be a better choice, but it's a good example of the concept.)
 
-👉 `rocket.config.mjs` (or your theme config file)
+👉 `rocket.config.js` (or your theme config file)
 
-```js
+<!-- prettier-ignore-start -->
+```js copy
 import { addPlugin } from 'plugins-manager';
 
-/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
-const config = {
+/** @type {import('@rocket/cli').RocketCliOptions} */
+export default ({
   setupEleventyComputedConfig: [
     addPlugin({ name: 'greeting', plugin: data => `Welcome to the ${data.title} page.` }),
   ],
-};
-
-export default config;
+});
 ```
+<!-- prettier-ignore-end -->
 
-{% raw %}
-Now you can use {{ greeting }} everywhere.
-{% endraw %}
-And it will be correctly replaced with a Welcome and the page title.
+Now you can use {% raw %}{{ greeting }}{% endraw %} everywhere,
+and it will be correctly replaced with a Welcome and the page title.
 
 ## Default Available Configs
 

docs/docs/configuration/images.md

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

docs/docs/configuration/overview.md

@@ -59,7 +59,7 @@ For these cases you can use `setupDevAndBuildPlugins`, which will automatically
 import json from '@rollup/plugin-json';
 import { addPlugin } from 'plugins-manager';
 
-/** @type {Partial<import("@rocket/cli").RocketCliOptions>} */
+/** @type {import('@rocket/cli').RocketCliOptions} */
 const config = {
   setupDevAndBuildPlugins: [
     addPlugin({ name: 'json', plugin: json, location: 'top', options: { my: 'settings' } }),
@@ -79,10 +79,22 @@ All plugins which are either default or are added via a preset can still be adju
 ```js
 import { adjustPluginOptions } from 'plugins-manager';
 
-/** @type {Partial<import("@rocket/cli").RocketCliOptions>} */
+/** @type {import('@rocket/cli').RocketCliOptions} */
 const config = {
   setupDevAndBuildPlugins: [adjustPluginOptions('json', { my: 'overwrite settings' })],
 };
 
 export default config;
 ```
+
+## Lifecycle
+
+You can hook into the rocket lifecycle by specifying a function for `before11ty`. This function runs before 11ty calls it's write method. If it is an async function, Rocket will await it's promise.
+
+```js
+export default {
+  async before11ty() {
+    await copyDataFiles();
+  },
+};
+```

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 -->

docs/docs/index.md

@@ -7,6 +7,25 @@ eleventyNavigation:
 
 Here you will find all the details for each of the packages/systems we offer.
 
-You should check out:
+## Contents
 
-- [@rocket/launch](./presets/launch.md) which is our default preset
+- [Configuration](./configuration/)
+  - [Overview](./configuration/overview/)
+  - [Computed Config](./configuration/computed-config/)
+  - [Service Worker](./configuration/service-worker/)
+  - [Images](./configuration/images/)
+- [Presets](./presets/)
+  - [Joining Blocks](./presets/joining-blocks/)
+  - [`@rocket/launch`](./presets/launch/)
+  - [`@rocket/search`](./presets/search/)
+  - [`@rocket/blog`](./presets/blog/)
+- [Markdown JavaScript](./markdown-javascript/)
+  - [Overview](./markdown-javascript/overview/)
+  - [Preview](./markdown-javascript/preview/)
+  - [Story](./markdown-javascript/story/)
+- [Eleventy Plugins](./eleventy-plugins/)
+  - [Markdown JavaScript (mdjs)](./eleventy-plugins/mdjs-unified/)
+- [Tools](./tools/)
+  - [Plugins Manager](./tools/plugins-manager/)
+  - [Rollup Config](./tools/rollup-config/)
+  - [Check HTML Links ](./tools/check-html-links/)

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);

docs/docs/markdown-javascript/overview.md

@@ -1,5 +1,11 @@
 # Markdown JavaScript >> Overview || 10
 
+```js script
+import '@mdjs/mdjs-story/define';
+import '@mdjs/mdjs-preview/define';
+import { html } from '@mdjs/mdjs-story';
+```
+
 Markdown JavaScript (mdjs) is a format that allows you to use JavaScript with Markdown, to create interactive demos. It does so by "annotating" JavaScript that should be executed in Markdown.
 
 To annotate we use a code block with `js script`.
@@ -56,20 +62,13 @@ mdjs comes with some additional helpers you can choose to import:
 
 ````md
 ```js script
-import '@mdjs/mdjs-story/mdjs-story.js';
-import '@mdjs/mdjs-preview/mdjs-preview.js';
+import '@mdjs/mdjs-story/define';
+import '@mdjs/mdjs-preview/define';
 ```
 ````
 
 Once loaded you can use them like so:
 
-````md
-```js script
-import '@mdjs/mdjs-story/mdjs-story.js';
-import '@mdjs/mdjs-preview/mdjs-preview.js';
-```
-````
-
 ### Story
 
 The code snippet will actually get executed at that place and you will have a live demo
@@ -117,12 +116,6 @@ export const JsPreviewStory = () => html` <demo-wc-card>JS Preview Story</demo-w
 
 Here is a live example from [demo-wc-card](https://www.npmjs.com/package/demo-wc-card).
 
-```js script
-import '@mdjs/mdjs-story/mdjs-story.js';
-import '@mdjs/mdjs-preview/mdjs-preview.js';
-import { html } from 'lit-html';
-```
-
 ```js preview-story
 import 'demo-wc-card/demo-wc-card.js';
 export const header = () => {
@@ -132,31 +125,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.

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 '@mdjs/mdjs-preview';
+import './assets/demo-element.js';
+```
+
+## JavaScript Story
+
+````md
+```js script
+import { html } from '@mdjs/mdjs-preview';
+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';
 ```

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
-import { html } from 'lit-html';
+```js script
+import { html } from '@mdjs/mdjs-story';
+```
 
+````md
+```js script
+import { html } from '@mdjs/mdjs-story';
+```
+
+```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> `;
 ```

docs/docs/presets/blog.md

@@ -4,13 +4,25 @@ Enable writing blog posts within your Rocket site.
 
 ## Installation
 
-```bash
+<code-tabs collection="package-managers" default-tab="npm">
+
+```bash tab npm
 npm i @rocket/blog
 ```
 
+```bash tab yarn
+yarn add @rocket/blog
+```
+
+```bash tab pnpm
+pnpm add @rocket/blog
+```
+
+</code-tabs>
+
 ## Usage
 
-👉 `rocket.config.mjs`
+👉 `rocket.config.js`
 
 ```js
 import { rocketBlog } from '@rocket/blog';

docs/docs/presets/joining-blocks.md

@@ -6,7 +6,7 @@ As a preset you may want to add this to your layout.
 
 {% raw %}
 
-```
+```jinja2
 <footer id="main-footer">
   {% for blockName, blockPath in _joiningBlocks.footer %}
     {% include blockPath %}
@@ -22,11 +22,15 @@ This will now render all templates within `_includes/_joiningBlocks/footer/*`.
 
 Let's assume we have a preset with the following files
 
-```html
-<!-- usedPreset/_includes/_joiningBlocks/footer/10-first.njk -->
-<p>first</p>
+👉 `_includes/_joiningBlocks/footer/10-first.njk`
 
-<!-- usedPreset/_includes/_joiningBlocks/footer/20-second.njk -->
+```html
+<p>first</p>
+```
+
+👉 `_includes/_joiningBlocks/footer/20-second.njk`
+
+```html
 <p>second</p>
 ```
 
@@ -41,8 +45,9 @@ And it produces this in your website
 
 Now we can add a file which will insert content without needing to overwrite any of the preset file.
 
+👉 `docs/_includes/_joiningBlocks/footer/15-in-between.njk`
+
 ```html
-<!-- docs/_includes/_joiningBlocks/footer/15-in-between.njk -->
 <p>in-between</p>
 ```
 
@@ -60,8 +65,9 @@ the final output will be
 
 Now if you want to overwrite you can use the same filename.
 
+👉 `docs/_includes/_joiningBlocks/footer/10-first.njk`
+
 ```html
-<!-- docs/_includes/_joiningBlocks/footer/10-first.njk -->
 <p>updated first</p>
 ```
 
@@ -78,8 +84,9 @@ the final output will be
 
 Sometimes you wanna reorder when you overwrite as well
 
+👉 `docs/_includes/_joiningBlocks/footer/30-first.njk`
+
 ```html
-<!-- docs/_includes/_joiningBlocks/footer/30-first.njk -->
 <p>first</p>
 ```
 

docs/docs/presets/launch.md

@@ -1,14 +1,40 @@
+---
+alerts:
+  - type: tip
+    content: Take a tip from me
+  - type: warning
+    content: Be *sure* about this...
+  - type: danger
+    content: You **really** shouldn't!
+---
+
 # Presets >> Launch || 20
 
 Rocket comes with a preset you will love. Simple, responsive and behaving like native, it sure is going to be a hit among your users.
 
 ## Installation
 
-```bash
+Install `@rocket/launch` from the NPM repository using your favourite package manager.
+
+<code-tabs collection="package-managers" default-tab="npm">
+
+```bash tab npm
 npm i @rocket/launch
 ```
 
-👉 `rocket.config.mjs`
+```bash tab yarn
+yarn add @rocket/launch
+```
+
+```bash tab pnpm
+pnpm add @rocket/launch
+```
+
+</code-tabs>
+
+## Usage
+
+👉 `rocket.config.js`
 
 ```js
 import { rocketLaunch } from '@rocket/launch';
@@ -20,51 +46,80 @@ export default {
 
 ## Data
 
-Most data comes from `site.cjs`.
+The launch preset configures [11ty data](https://www.11ty.dev/docs/data/) using a few overridable files:
 
-There is also a specific `rocketLaunch.json`.
-
-The footer data comes from `footer.json`
+- `site.cjs`: Responsible for most of the site-wide config
+- `rocketLaunch.json`: configures the homepage layout
+- `footer.json`: Configures the content of the footer
 
 ## Inline Notification
 
-Notification are web components that bring in some styles.
-
-To use them in Markdown you need to write the HTML tag and have it separated by an empty line.
-
 ```js script
 import '@rocket/launch/inline-notification/inline-notification.js';
 ```
 
-First you need to import the script
+Launch ships with `<inline-notification>`, a custom element that applies some styles similar to "info boxes". The element works for `<noscript>` users as well, as long as you don't [override](/guides/presets/overriding/) the default `noscript.css` file.
 
-````
+To add an inline notification you need to remember to import the element definition:
+
+<!-- prettier-ignore-start -->
+~~~markdown
 ```js script
 import '@rocket/launch/inline-notification/inline-notification.js';
 ```
-````
+~~~
+<!-- prettier-ignore-end -->
 
-### Tip
+Then you can add your notification to the page. If you want to write the notification's content using markdown, just pad the opening and closing tags with empty lines.
 
-<inline-notification type="tip">
+There are three varieties of `<inline-notification>`, "tip", "warning", and "danger"
 
-I am a tip
+<style>
+#inline-notifications::part(tab) {
+  text-transform: capitalize;
+}
+#inline-notifications code-tab::part(content) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+#inline-notifications code-copy::part(copy-button) {
+  position: absolute;
+  top: 10px;
+  border-radius: 6px;
+  border: 1px solid var(--primary-lines-color);
+}
+</style>
 
-</inline-notification>
+<code-tabs id="inline-notifications" default-tab="tip">
 
-**Usage**
+{%for alert in alerts%}
 
-```md
-<inline-notification type="tip">
+<code-tab data-label="{{ alert.type }}" data-id="{{ alert.type }}" no-copy>
 
-I am a tip
+```md copy
+<inline-notification type="{{ alert.type }}">
+
+{{ alert.content | safe }}
 
 </inline-notification>
 ```
 
+<inline-notification type="{{ alert.type }}">
+
+{{ alert.content | safe }}
+
+</inline-notification>
+
+</code-tab>
+
+{%endfor%}
+
+</code-tabs>
+
 ### Modify the Title
 
-To override the title you can provide a property success.
+The notification title defautls to it's type. You can write a custom title with the `title` attribute.
 
 <inline-notification type="tip" title="success">
 
@@ -72,8 +127,6 @@ I am a success message
 
 </inline-notification>
 
-**Usage**
-
 ```md
 <inline-notification type="tip" title="success">
 
@@ -82,38 +135,8 @@ I am a success message
 </inline-notification>
 ```
 
-### Warning
-
 <inline-notification type="warning">
 
-I am a warning
+The `title` attribute does not change the title for `<noscript>` users, so don't include any critical information in it.
 
 </inline-notification>
-
-**Usage**
-
-```md
-<inline-notification type="warning">
-
-I am a warning
-
-</inline-notification>
-```
-
-### Danger
-
-<inline-notification type="danger">
-
-I am a dangerous message
-
-</inline-notification>
-
-**Usage**
-
-```md
-<inline-notification type="danger">
-
-I am a dangerous message
-
-</inline-notification>
-```

docs/docs/presets/search.md

@@ -4,11 +4,25 @@ Add a search for all your static content.
 
 ## Installation
 
-```bash
+<code-tabs collection="package-managers" default-tab="npm">
+
+```bash tab npm
 npm i @rocket/search
 ```
 
-👉 `rocket.config.mjs`
+```bash tab yarn
+yarn add @rocket/search
+```
+
+```bash tab pnpm
+pnpm add @rocket/search
+```
+
+</code-tabs>
+
+## Usage
+
+👉 `rocket.config.js`
 
 ```js
 import { rocketSearch } from '@rocket/search';
@@ -17,3 +31,13 @@ export default {
   presets: [rocketSearch()],
 };
 ```
+
+## Styling
+
+| Property                              | Default   | Description                          |
+| ------------------------------------- | --------- | ------------------------------------ |
+| `--rocket-search-background-color`    | `#fff`    | Search results background color      |
+| `--rocket-search-input-border-color`  | `#dfe1e5` |                                      |
+| `--rocket-search-input-border-radius` | `24px`    |                                      |
+| `--rocket-search-fill-color`          | `#000`    | Search Icon Color                    |
+| `--rocket-search-highlight-color`     | `#6c63ff` | Highlighted search result text color |

docs/docs/tools/check-html-links.md

@@ -1,6 +1,6 @@
 # Tools >> Check HTML Links ||30
 
-```js
+```js script
 import '@rocket/launch/inline-notification/inline-notification.js';
 ```
 

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
 

docs/guides/configuration/getting-started.md

@@ -20,7 +20,7 @@ The Plugins Manager helps you register and execute your plugins across the vario
 
 ## Adding Remark/Unified Plugins
 
-If you want to a plugin to the Markdown processing you can use `setupUnifiedPlugins`.
+If you want to add a plugin to the Markdown processing you can use `setupUnifiedPlugins`.
 
 ```js
 import emoji from 'remark-emoji';

docs/guides/first-pages/getting-started.md

@@ -10,40 +10,89 @@ Make sure they are installed before proceeding.
 
 The fastest way to get started is by using an existing preset like the launch preset.
 
-1. Start with an empty new folder
+### Step 1. Initialize the Project Package
 
-   ```
+Start by creating an empty folder for your project
+
+```bash copy
 mkdir my-project
 cd my-project
+```
+
+Then initialize a package.json file
+
+<code-tabs collection="package-managers" default-tab="npm">
+
+```bash tab npm
 npm init -y
 ```
 
-2. Install dependencies
-
+```bash tab yarn
+yarn init -y
 ```
+
+```bash tab pnpm
+pnpm init -y
+```
+
+</code-tabs>
+
+### Step 2. Install dependencies
+
+<code-tabs collection="package-managers" default-tab="npm">
+
+```bash tab npm
 npm install --save-dev @rocket/cli @rocket/launch
 ```
 
-3. Add to your .gitignore
-
-   ```
-   ## Rocket ignore files (need to be the full relative path to the folders)
-   docs/_merged_data/
-   docs/_merged_assets/
-   docs/_merged_includes/
+```bash tab yarn
+yarn add -D @rocket/cli @rocket/launch
 ```
 
-<inline-notification type="danger">
+```bash tab pnpm
+pnpm add -D @rocket/cli @rocket/launch
+```
 
-You may be tempted to skip the step above, because you're not ready to commit to git yet!
+</code-tabs>
 
-Rocket uses the .gitignore file to manage its requirements. If you skip this step, Rocket will fail to deploy!
+### Step 3. Bootstrap the project
+
+<code-tabs collection="package-managers" default-tab="npm">
+
+```bash tab npm
+npx rocket bootstrap
+```
+
+```bash tab yarn
+yarn rocket bootstrap
+```
+
+```bash tab pnpm
+pnpx rocket bootstrap
+```
+
+</code-tabs>
+
+The `bootstrap` command creates four files in your repo:
+
+- `.gitignore` containing rocket's build artifacts
+- `rocket.config.js` containing a minimal rocket config
+- `docs/.eleventyignore` required to allow you to [override templates](/guides/presets/overriding/)
+- `docs/index.md` your first page
+
+It also set the package `type` to `"module"` and adds a `start` and `docs` package scripts.
+
+<inline-notification type="warning">
+
+If you don't want to use the `module` package type, make sure to rename the generated config file to `rocket.config.mjs`.
 
 </inline-notification>
 
-4. Create a `rocket.config.mjs` (or `.js` if you have type: "module" in you package.json)
+<details><summary>Default Files Contents</summary>
 
-   ```js
+<code-tabs default-tab="rocket.config.js">
+
+```js tab rocket.config.js
 import { rocketLaunch } from '@rocket/launch';
 
 export default {
@@ -51,53 +100,67 @@ Rocket uses the .gitignore file to manage its requirements. If you skip this ste
 };
 ```
 
-5. (optionally) Create a file `.eleventyignore` (this file will be needed once you start customizing presets)
+```md tab docs/index.md
+# Welcome to Your Rocket Site
 
-   ```
-   node_modules/**
-   /docs/_assets
-   /docs/_includes
-   /docs/_data
+Add your markdown content here.
 ```
 
-<inline-notification type="warning" title="note">
+<!-- prettier-ignore-start -->
 
-All further paths are relative to your project root (my-project in this case).
+```html tab docs/.eleventyignore
+_assets
+_includes
+_data
+```
 
-</inline-notification>
+```html tab .gitignore
+## Rocket ignore files (need to be the full relative path to the folders)
+docs/_merged_data/
+docs/_merged_assets/
+docs/_merged_includes/
+```
+
+<!-- prettier-ignore-end -->
+
+</code-tabs>
+
+</details>
 
 ## Add your First Page
 
-👉 `docs/index.md`
+Bootstrap created the file `docs/index.md`. Open it in your editor and change it to suit your needs.
+
+<small>NOTE: This tutorial assumes you are familiar with Markdown, for page authoring.</small>
 
 ```md
 # Welcome to Your Rocket Site
 
-Text here, like any Markdown file.
+Add your markdown content here.
 ```
 
-This tutorial assumes you are familiar with Markdown, for page authoring.
-
 Please note that the heading - text prefixed with `#` or `##` - is not optional for each page in this tutorial. Everything below that first line is optional Markdown text.
 
-## Startup:
-
-👉 `package.json`
-
-Add `"start": "rocket start"` to your package.json
-
-```json
-"scripts": {
-  "start": "rocket start"
-}
-```
+## Startup
 
 Now you can launch your site locally with
 
-```bash
-npm run start
+<code-tabs collection="package-managers" default-tab="npm">
+
+```bash tab npm
+npm start
 ```
 
+```bash tab yarn
+yarn start
+```
+
+```bash tab pnpm
+pnpx start
+```
+
+</code-tabs>
+
 ## Taking Inventory Before Adding Pages:
 
 We're about to add both content and navigation at the same time.
@@ -107,11 +170,16 @@ It can be helpful to take an inventory, before we start, to separate basic setup
 - We built the project with basic npm commands
 - Added a couple required files manually
 - Adjusted package.json
-- **doc/index.md** to seed the content
+- **docs/index.md** to seed the content
 - Launches with `npm start`
 
 That's all it takes to get a new super-fast and powerful site, complete with a service worker, default styling, navigation, and ready to deploy as a plain old static files.
 
+## Next Steps
+
+- [Adding Pages](../adding-pages/)
+- [Using Presets](../../presets/getting-started/)
+
 ```js script
 import '@rocket/launch/inline-notification/inline-notification.js';
 ```

docs/guides/first-pages/manage-sidebar.md

@@ -33,10 +33,11 @@ eleventyNavigation:
 ---
 ```
 
+<!--
 You can also look at this live playground:
 
 ```js story
-import { html } from 'lit-html';
+import { html } from '@mdjs/mdjs-preview';
 
 export const headlineConverter = () => html`
   <p>
@@ -45,5 +46,12 @@ export const headlineConverter = () => html`
   </p>
 `;
 ```
+-->
 
 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.

docs/guides/first-pages/use-javascript.md

@@ -1,25 +1,49 @@
 # First Pages >> Use JavaScript || 40
 
-You can use `js script` to execute JavaScript (`type="module"`).
+If you would like to add JavaScript to a page, you can do it inline using the `script` markdown directive. The script you write runs on the page as a module.
 
-````
+<!-- prettier-ignore-start -->
+~~~markdown
 ```js script
-console.log('foo');
+const message = 'Hello, World!';
+console.log(message);
 ```
-````
+~~~
+<!-- prettier-ignore-end -->
 
-This can be useful for importing web components and using them in Markdown.
+Adding the above will log `Hello, World!` to the console without adding a global `message` variable.
 
-````
+This can be useful for importing web components and using them in Markdown. Imagine you had some `magic-reveal` element that you wanted to use on a page:
+
+<!-- prettier-ignore-start -->
+~~~markdown
 ```js script
 import 'magic-reveal/magic-reveal.js';
+```
 
 <magic-reveal>
 
-This text will get magically revealed. I can **still** use Markdown as long as there is an empty line between the opening/closing tags and my text.
+This text will get magically revealed.
+
+I can **still** use Markdown as long as there is an empty line
+between the opening/closing tags and my text.
 
 </magic-reveal>
-```
-````
+~~~
+<!-- prettier-ignore-end -->
 
-or you can use `js story`, `js preview-story`, ...
+## Component Story Format
+
+You can also add storybook-style CSF (v2 only) stories to a page using `js story` or `js preview-story`, just make sure to import `html` from `@mdjs/mdjs-preview` instead of from `lit` or `lit-html`.
+
+<!-- prettier-ignore-start -->
+~~~markdown
+```js story
+import { html } from '@mdjs/mdjs-preview';
+
+export const StoryPreview = () => html`
+  <p>Use stories in Rocket!</p>
+`;
+```
+~~~
+<!-- prettier-ignore-end -->

docs/guides/go-live/overview.md

@@ -9,17 +9,21 @@ Many servers are configured to handle this automatically and to serve a 404.html
 
 The [Rocket Launch preset](../../docs/presets/launch.md) ships a default 404 template you can use.
 
-To enable it, you need to create a 404.md and use the 404 layout.
+To enable it, you need to create a `404.md` and use the 404 layout.
 
 👉 `docs/404.md`
 
-```
+```markdown copy
 ---
 layout: layout-404
 permalink: 404.html
 ---
 ```
 
+This results in a `404.html` page, which will do nothing by itself. But many hosting services like netlify or firebase, for example will redirect 404s to this `404.html` by default.
+
+If the hosting provider doesn't already do this, then you may be able to accomplish it via some settings for example by using a `.htaccess` file in case of an apache server.
+
 ## Add a Sitemap
 
 A sitemap can be used to inform search engines or services about the pages your site has.
@@ -28,24 +32,21 @@ You can create one by adding this file:
 
 👉 `docs/sitemap.njk`
 
-{% raw %}
-
-```
+```markdown copy
 ---
 layout: layout-raw
 permalink: /sitemap.xml
 eleventyExcludeFromCollections: true
 ---
+
 <?xml version="1.0" encoding="utf-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  {% for page in collections.all %}
+  {% raw %}{% for page in collections.all %}
     <url>
       <loc>{{ rocketConfig.absoluteBaseUrl }}{{ page.url | url }}</loc>
       <lastmod>{{ page.date.toISOString() }}</lastmod>
       <changefreq>{{ page.data.changeFreq if page.data.changeFreq else "monthly" }}</changefreq>
     </url>
-  {% endfor %}
+  {% endfor %}{% endraw %}
 </urlset>
 ```
-
-{% endraw %}

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.
 
@@ -15,7 +15,7 @@ Note: If your logo has an `<?xml>` tag it will throw an error as it will be inli
 
 You can create your own image and link it with something like this
 
-```
+```markdown copy
 ---
 socialMediaImage: path/to/my/image.png
 ---
@@ -29,7 +29,7 @@ You can create an `11tydata.cjs` file next to your page. If your page is `docs/g
 
 In there you can use the default `createSocialImage` but provide your own values.
 
-```js
+```js copy
 const { createSocialImage } = require('@rocket/cli');
 
 module.exports = async function () {
@@ -39,7 +39,7 @@ module.exports = async function () {
     subTitle2: 'in 5 Minutes',
     footer: 'Rocket Guides',
     // you can also override the svg only for this page by providing
-    // createSocialImageSvg: async () => '<svg>...</svg>'
+    // createSocialImageSvg: async () => '{%raw%}<svg>...</svg>{%endraw%}'
   });
   return {
     socialMediaImage,
@@ -52,13 +52,14 @@ module.exports = async function () {
 Often you want to have a unique style for your social media images.
 For that you can provide your own function which returns a string of an SVG to render the image.
 
-👉 `rocket.config.mjs`
+👉 `rocket.config.js`
 
-```js
+<!-- prettier-ignore-start -->
+```js copy
 import { adjustPluginOptions } from 'plugins-manager';
 
-/** @type {Partial<import("@rocket/cli").RocketCliOptions>} */
-const config = {
+/** @type {import('@rocket/cli').RocketCliOptions} */
+export default ({
   setupEleventyComputedConfig: [
     adjustPluginOptions('socialMediaImage', {
       createSocialImageSvg: async ({
@@ -95,59 +96,69 @@ const config = {
       },
     }),
   ],
-};
-
-export default config;
+});
 ```
+<!-- prettier-ignore-end -->
 
 ## Using an SVG File as a src with Nunjucks
 
 If you have multiple variations it may be easier to save them as SVG files and use a template system.
 
-WARNING: Untested example
+<!-- prettier-ignore-start -->
+<code-tabs default-tab="rocket.config.js">
 
-👉 `rocket.config.mjs`
-
-{% raw %}
-
-```js
+```js tab rocket.config.js
 import { adjustPluginOptions } from 'plugins-manager';
 
-/** @type {Partial<import("@rocket/cli").RocketCliOptions>} */
-const config = {
+/** @type {import('@rocket/cli').RocketCliOptions} */
+export default ({
   setupEleventyComputedConfig: [
     adjustPluginOptions('socialMediaImage', {
       createSocialImageSvg: async (args = {}) => {
-        // inside of the svg you can use {{ title }}
-        const svgBuffer = await fs.promises.readFile('/path/to/your/svg/file');
+        const svgBuffer = await fs.promises.readFile('/path/to/your/template.svg');
         const svg = logoBuffer.toString();
         return nunjucks.renderString(svg, args);
       },
     }),
   ],
-};
-
-{% endraw %}
+});
 ```
 
+```svg tab /path/to/your/template.svg
+{%raw%}<svg xmlns="http://www.w3.org/2000/svg" fill="#e63946" viewBox="0 0 511.998 511.998">
+  <text font-family="'Open Sans', sans-serif" font-size="39" transform="translate(422.99 408.53)">
+    <tspan x="-89.26" y="12.25">{{ title }}</tspan>
+  </text>
+  <path d="M98.649 430.256c-46.365 28.67-71.17 30.939-78.916 23.51-7.75-7.433-6.519-32.307 20.182-79.832 24.953-44.412 65.374-96.693 113.818-147.211l-11.279-10.817c-49.33 51.442-90.583 104.845-116.163 150.373-19.228 34.22-37.848 79.134-17.375 98.766 5.84 5.6 13.599 7.935 22.484 7.935 22.269 0 51.606-14.677 75.469-29.432 44.416-27.464 96.044-70.919 145.373-122.362l-11.279-10.817c-48.446 50.519-98.987 93.095-142.314 119.887zM254.734 294.95l-18.47-17.71 10.816-11.281 18.47 17.71zM285.516 324.473l-18.47-17.71 10.816-11.28 18.47 17.71zM315.543 317.807l-73.886-70.847 10.816-11.28 73.886 70.846zM500.916 41.287c-7.769 1.59-76.412 16.062-93.897 34.294l-50.728 52.899-114.703-3.629-39.198 40.876 79.28 40.569-21.755 22.687 72.848 69.858 21.755-22.687 43.857 77.51 39.197-40.876-8.433-114.451 50.727-52.899c17.485-18.234 29.067-87.422 30.331-95.251l1.801-11.169-11.082 2.269zM228.209 161.383l19.842-20.692 93.688 2.964-48.775 50.864-64.755-33.136zm173.423 166.303l-35.822-63.308 48.776-50.865 6.886 93.482-19.84 20.691zm-69.334-50.943l-50.287-48.223L412.89 92.037l50.288 48.223-130.88 136.483zm140.711-148.707l-48.316-46.334c14.54-8.427 44.787-17.217 68.076-22.632-4.433 23.497-11.949 54.085-19.76 68.966z"/>
+  <path d="M326.335 257.25l-24.628-23.614 10.816-11.28 24.628 23.615zM431.385 134.414l-11.808 12.315-11.28-10.816 11.808-12.315zM401.838 165.183l-11.28-10.816 11.807-12.314 11.28 10.816zM384.121 183.66l-11.28-10.816 11.807-12.314 11.28 10.816zM175.19 184.515l11.051 11.05-23.582 23.582-11.05-11.05zM190.903 168.796l11.05 11.052-7.863 7.86-11.05-11.052z"/>
+</svg>{%endraw%}
+```
+
+</code-tabs>
+<!-- prettier-ignore-end -->
+
 ## 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 = {
+<!-- prettier-ignore-start -->
+```js copy
+export default ({
   start: {
     createSocialMediaImages: true,
   },
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 Similarly, if you never want to create social media images even during build then you can globally disable it via
 
-```js
-const config = {
+<!-- prettier-ignore-start -->
+```js copy
+export default ({
   createSocialMediaImages: true,
-};
+});
 ```
+<!-- prettier-ignore-end -->

docs/guides/index.md

@@ -5,4 +5,19 @@ eleventyNavigation:
   order: 10
 ---
 
-Rocket is a fundamentally straight forward way to generate static pages while still allowing to sprinkle in some JavaScript where needed.
+Rocket helps you generate static pages from Markdown files while giving you the flexibility to sprinkle in some JavaScript where needed.
+
+- [First Pages](./first-pages/getting-started/) Learn how to bootstrap and run a Rocket site
+  - [Adding Pages](./first-pages/adding-pages/) Create your own content pages
+  - [Linking](./first-pages/link-to-other-pages/) Link between yuor markdown pages
+  - [Managing Sidebar](./first-pages/manage-sidebar/) Customize your site's navigation
+  - [Use JavaScript](./first-pages/use-javascript/) Write inline scripts in markdown
+  - [URLs](./first-pages/urls/) Customize your pages' permalinks
+  - [Layouts](./first-pages/layouts/) Give your page a custom layout
+- [Presets](./presets/getting-started/) Customize Rocket with config presets
+  - [Overriding](./presets/overriding/) Override preset templates
+  - [Using Templates](./presets/using-templates/) Make use of preset templates
+  - [Create Your Own](./presets/create-your-own/getting-started/) Write and publish your own presets
+- [Configuration](./configuration/getting-started/) Make Rocket your own
+- [Go Live](./go-live/overview/) Publish your site
+  - [Social Media](./go-live/social-media/) Generate social images

docs/guides/presets/create-your-own.md

@@ -1,106 +0,0 @@
-# Presets >> Create your own || 90
-
-A preset is a setup function and a folder including `_assets`, `_data` and `_includes` (all optional).
-
-To play around with a preset you can create a folder `fire-theme`.
-
-You then create the setup function for it with only one property called `path` which will allow Rocket to properly resolve it.
-
-## Create a Preset Config File
-
-👉 `fire-theme/fireTheme.js`
-
-```js
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-export function fireTheme() {
-  return {
-    path: path.resolve(__dirname),
-  };
-}
-```
-
-Once you have that you can start filling in content you need.
-
-For example a we could override the full `layout.css` by adding a it like so
-
-👉 `fire-theme/layout.css`
-
-```css
-body {
-  background: hotpink;
-}
-```
-
-Once you have that you can add it to your Rocket config.
-
-NOTE: The order of presets is important, as for example in this case we take everything from `rocketLaunch` but later override via `fireTheme`.
-
-👉 `rocket-config.js`
-
-```js
-import { rocketLaunch } from '@rocket/launch';
-import { fireTheme } from 'path/to/fire-theme/fireTheme.js';
-
-export default {
-  presets: [rocketLaunch(), fireTheme()],
-};
-```
-
-## Publish a Preset
-
-If you would like to publish a preset to use it on multiple websites or share it with your friends you can do like so.
-
-1. Pick a name for the package => for this example we take `fire-theme`.
-2. Create a new folder `fire-theme`
-3. Create a folder `fire-theme/preset` copy `fireTheme.js` from [above](#create-a-preset-config-file) into `preset/fireTheme.js`
-4. Add a 👉 `package.json`
-
-   ```json
-   {
-     "name": "fire-theme",
-     "version": "0.3.0",
-     "description": "Fire Theme for Rocket",
-     "license": "MIT",
-     "type": "module",
-     "exports": {
-       ".": "./index.js",
-       "./preset/": "./preset/"
-     },
-     "files": ["*.js", "preset"],
-     "keywords": ["rocket", "preset"]
-   }
-   ```
-
-5. Add a 👉 `index.js`
-
-   ```js
-   export { fireTheme } from './preset/fireTheme.js';
-   ```
-
-6. Add a 👉 `README.md`
-
-   ````
-   # FireTheme
-
-   This is a theme/preset for [Rocket](https://rocket.modern-web.dev/).
-
-   ## Installation
-
-   ```
-   npm i -D fire-theme
-   ```
-
-   Add it to your 👉 `rocket.config.js`
-
-   ```js
-   import { fireTheme } from 'fire-theme';
-
-   export default {
-     presets: [fireTheme()],
-   };
-   ```
-   ````

docs/guides/presets/create-your-own/getting-started.md

@@ -0,0 +1,54 @@
+# Presets >> Create your Own >> Getting Started || 10
+
+A preset is a setup function and a folder including `_assets`, `_data` and `_includes` (all optional).
+
+To play around with a preset you can create a folder `fire-theme`.
+
+You then create the setup function for it with only one property called `path` which will allow Rocket to properly resolve it.
+
+## Create a Preset Config File
+
+👉 `fire-theme/fireTheme.js`
+
+```js copy
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export function fireTheme() {
+  return {
+    path: path.resolve(__dirname),
+  };
+}
+```
+
+Once you have that you can start filling in content you need.
+
+For example we could override the full `layout.css` by adding it like so
+
+👉 `fire-theme/layout.css`
+
+```css copy
+body {
+  background: hotpink;
+}
+```
+
+Once you have that you can add it to your Rocket config.
+
+NOTE: The order of presets is important, as for example in this case we take everything from `rocketLaunch` but later override via `fireTheme`.
+
+👉 `rocket.config.js`
+
+<!-- prettier-ignore-start -->
+```js copy
+import { rocketLaunch } from '@rocket/launch';
+import { fireTheme } from 'path/to/fire-theme/fireTheme.js';
+
+/** @type {import('@rocket/cli').RocketCliOptions} */
+export default ({
+  presets: [rocketLaunch(), fireTheme()],
+});
+```
+<!-- prettier-ignore-end -->

docs/guides/presets/create-your-own/hooks.md

@@ -0,0 +1,22 @@
+# Presets >> Create your Own >> Hooks || 20
+
+Your preset can hook into the rocket lifecycle by specifying a function for `before11ty`. This function runs before 11ty calls it's write method. If it is an async function, Rocket will await it's promise.
+
+<!-- prettier-ignore-start -->
+```js
+/** @type {import('@rocket/cli').RocketPreset} */
+export default ({
+  async before11ty() {
+    await copyDataFiles();
+  },
+});
+```
+<!-- prettier-ignore-end -->
+
+## Preset Interface
+
+The full preset interface is copied below for your reference.
+
+```ts
+{% include ../../../../packages/cli/types/preset.d.ts %}
+```

docs/guides/presets/create-your-own/index.md

@@ -0,0 +1,7 @@
+# Presets >> Create your Own || 40
+
+## Contents
+
+- [Getting Started](./getting-started/)
+- [Hooks](./hooks/)
+- [Publishing your Preset](./publishing/)

docs/guides/presets/create-your-own/publishing.md

@@ -0,0 +1,60 @@
+# Presets >> Create your Own >> Publishing || 100
+
+If you would like to publish a preset to use it on multiple websites or share it with your friends you can do like so.
+
+1. Pick a name for the package
+   - use the convention `rocket-preset-${name}`
+   - for this example we use `rocket-preset-fire-theme`.
+2. Create a new folder `fire-theme`
+3. Create a folder `fire-theme/preset` copy `fireTheme.js` from [above](../getting-started/) into `preset/fireTheme.js`
+4. Add a 👉 `package.json`
+
+   ```json copy
+   {
+     "name": "rocket-preset-fire-theme",
+     "version": "0.3.0",
+     "description": "Fire Theme for Rocket",
+     "license": "MIT",
+     "type": "module",
+     "exports": {
+       ".": "./index.js",
+       "./preset/": "./preset/"
+     },
+     "files": ["*.js", "preset"],
+     "keywords": ["rocket", "preset"]
+   }
+   ```
+
+5. Add a 👉 `index.js`
+
+   ```js copy
+   export { fireTheme } from './preset/fireTheme.js';
+   ```
+
+<!-- prettier-ignore-start -->
+6. Add a 👉 `README.md`
+
+   ~~~markdown copy
+   # FireTheme
+
+   This is a theme/preset for [Rocket](https://rocket.modern-web.dev/).
+
+   ## Installation
+
+   ```
+   npm i -D fire-theme
+   ```
+
+   Add it to your 👉 `rocket.config.js`
+
+   ```js
+   import { fireTheme } from 'fire-theme';
+
+   /** @type {import('@rocket/cli').RocketCliOptions} */
+   export default ({
+     presets: [rocketLaunch(), fireTheme()],
+   });
+   ```
+   ~~~
+
+<!-- prettier-ignore-end -->

docs/guides/presets/getting-started.md

@@ -1,7 +1,36 @@
 # Presets >> Getting Started || 10
 
-Presets are ...
+Presets are partial rocket configs that combine any number of plugins to add specific features. Rocket is built on these presets, like `rocketLaunch`, `rocketBlog`, and `rocketSearch`
 
-You can use a preset via the config...
+You can use a preset via the config by adding it to the `presets` array
 
-You can load multiple presets.
+<!-- prettier-ignore-start -->
+```js copy
+import { rocketLaunch } from '@rocket/launch';
+import { rocketBlog } from '@rocket/blog';
+import { rocketSearch } from '@rocket/search';
+
+/** @type {import('@rocket/cli').RocketCliOptions} */
+export default ({
+  presets: [rocketLaunch(), rocketBlog(), rocketSearch()],
+});
+```
+<!-- prettier-ignore-end -->
+
+## Community Presets
+
+There are a number of community-made presets available:
+
+<!--
+  -- Thank you for your interest in rocket. To add your preset,
+  -- follow the format below. Please add your preset in alphabetical order.
+  -->
+
+- [rocket-preset-code-tabs](https://www.npmjs.com/package/rocket-preset-code-tabs) - Add tab elements for code blocks
+- [rocket-preset-custom-elements-manifest](https://www.npmjs.com/package/rocket-preset-custom-elements-manifest) - Documents code generation for JavaScript libraries, particularly custom elements.
+- [rocket-preset-markdown-directive](https://www.npmjs.com/package/rocket-preset-markdown-directive) - Add your own custom md code block directives
+- [rocket-preset-playground-elements](https://www.npmjs.com/package/rocket-preset-playground-elements) - Live code editors that run in-browser
+- [rocket-preset-slide-decks](https://www.npmjs.com/package/rocket-preset-slide-decks) - Slide decks in Markdown and HTML
+- [rocket-preset-webcomponents-dev](https://www.npmjs.com/package/rocket-preset-webcomponents-dev) - Live code editors that run on webcomponents.dev
+
+> Want your plugin listed here? Please [create a PR](https://github.com/modernweb-dev/rocket/edit/main/docs/guides/presets/getting-started.md)!

docs/guides/presets/index.md

@@ -1 +1,6 @@
 # Presets || 20
+
+- [Getting Started](./getting-started/)
+- [Overriding](./overriding/)
+- [Using Templates](./using-templates/)
+- [Create Your Own](./create-your-own/getting-started/)

docs/guides/presets/overriding.md

@@ -4,4 +4,23 @@ All loaded presets will be combined but you can override each file.
 
 Take a look at `docs/_merged_includes` and override what you want to override by placing the same filename into `_includes`.
 
+For example, to override the css files loaded in the `<head>`,
+
+```bash
+cp docs/_merged_includes/_joiningBlocks/head/40-stylesheets.njk \
+   docs/_includes/_joiningBlocks/head/40-stylesheets.njk
+```
+
+then edit the file to suit your needs.
+
 Also works for `_assets`, `_data` ...
+
+<inline-notification type="warning">
+
+If you don't [add `.eleventyignore`](/guides/first-pages/getting-started/#setup), you may receive error messages when running `rocket build`.
+
+</inline-notification>
+
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
+```

docs/guides/presets/using-templates.md

@@ -37,6 +37,14 @@ If you look into `docs/_merged_includes/_joiningBlocks/bottom/` you will see a f
 - `190-google-analytics.njk`
 - `my-script.njk`
 
+<inline-notification type="tip">
+
+File names without an order/number in front are considered with the order number `10 000` so the generally end up at the bottom. If you need something even below unordered items you can use numbers that are greater then `10 000`.
+
+_Note: For unordered files there is no guarantee of any order._
+
+</inline-notification>
+
 ## Controlling the order
 
 In the html `<head>` order is usually not that important but when adding script it does.
@@ -57,3 +65,7 @@ which brings the order to
 ## More information
 
 For more details please see the [Joining Blocks Docs](../../docs/presets/joining-blocks.md)
+
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
+```

docs/simulator.md

@@ -0,0 +1,5 @@
+---
+layout: layout-simulator
+eleventyExcludeFromCollections: true
+excludeFromSearch: true
+---

package.json

@@ -8,6 +8,7 @@
   },
   "type": "module",
   "scripts": {
+    "analyze": "node scripts/workspaces-scripts-bin.mjs analyze",
     "build": "npm run build:packages && npm run build:site",
     "build:packages": "node scripts/workspaces-scripts-bin.mjs build:package",
     "build:site": "npm run rocket:build",
@@ -17,7 +18,7 @@
     "debug:webkit": "web-test-runner --watch --config web-test-runner-webkit.config.mjs",
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint --ext .ts,.js,.mjs,.cjs . --fix",
-    "format:prettier": "node node_modules/prettier/bin-prettier.js \"**/*.{ts,js,mjs,cjs,md}\" \"**/package.json\" --write --ignore-path .eslintignore",
+    "format:prettier": "node node_modules/prettier/bin-prettier.js \"**/*.{ts,js,mjs,cjs,md}\" \"**/!(expected)/package.json\" --write --ignore-path .eslintignore",
     "lint": "run-p lint:*",
     "lint:eslint": "eslint --ext .ts,.js,.mjs,.cjs .",
     "lint:prettier": "node node_modules/prettier/bin-prettier.js \"**/*.{ts,js,mjs,cjs,md}\" --check --ignore-path .eslintignore",
@@ -45,7 +46,8 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.12.0",
-    "@open-wc/testing": "^2.5.32",
+    "@custom-elements-manifest/analyzer": "^0.4.12",
+    "@open-wc/testing": "^3.0.0-next.1",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-typescript": "^8.1.0",
@@ -59,6 +61,7 @@
     "@web/test-runner": "^0.12.2",
     "@web/test-runner-commands": "^0.4.0",
     "@web/test-runner-playwright": "^0.8.0",
+    "cem-plugin-readme": "^0.1.2",
     "chai": "^4.2.0",
     "concurrently": "^5.3.0",
     "copyfiles": "^2.4.1",
@@ -75,14 +78,15 @@
     "onchange": "^7.1.0",
     "prettier": "^2.2.1",
     "prettier-plugin-package": "^1.3.0",
-    "puppeteer": "^5.5.0",
+    "puppeteer": "^9.0.0",
     "remark-emoji": "^2.1.0",
     "rimraf": "^3.0.2",
+    "rocket-preset-code-tabs": "^0.2.1",
     "rollup": "^2.36.1",
     "rollup-plugin-terser": "^7.0.2",
     "sinon": "^9.2.3",
     "ts-node": "^9.1.1",
-    "typescript": "^4.1.3"
+    "typescript": "^4.3.2"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",

packages/blog/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rocket/blog
 
+## 0.3.1
+
+### Patch Changes
+
+- a5661b8: Updates dependencies
+
 ## 0.3.0
 
 ### Minor Changes

packages/blog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/blog",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,6 +38,6 @@
     "testing"
   ],
   "dependencies": {
-    "plugins-manager": "^0.2.0"
+    "plugins-manager": "^0.2.4"
   }
 }

packages/building-rollup/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @rocket/building-rollup
 
+## 0.3.1
+
+### Patch Changes
+
+- 60e85a1: Support `picture` tags by handling `source` tags with `srcset` attributes in the rollup asset gathering build phase.
+
+## 0.3.0
+
+### Minor Changes
+
+- 2724f07: Stop auto generating a service worker from a template. Setup your own and then bundle via `createServiceWorkerConfig`.
+
+## 0.2.0
+
+### Minor Changes
+
+- bad4686: Preserve attributes on script tags. Preserve export names.
+
 ## 0.1.3
 
 ### Patch Changes

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';

packages/building-rollup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/building-rollup",
-  "version": "0.1.3",
+  "version": "0.3.1",
   "publishConfig": {
     "access": "public"
   },
@@ -13,8 +13,8 @@
   },
   "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
   "homepage": "https://rocket.modern-web.dev/docs/tools/building-rollup/",
-  "type": "module",
   "main": "./index.js",
+  "type": "module",
   "exports": {
     ".": "./index.js"
   },
@@ -55,11 +55,16 @@
     "@babel/preset-env": "^7.12.11",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
-    "@web/rollup-plugin-html": "^1.4.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@web/rollup-plugin-html": "^1.8.0",
     "@web/rollup-plugin-import-meta-assets": "^1.0.4",
-    "@web/rollup-plugin-polyfills-loader": "^1.0.3",
+    "@web/rollup-plugin-polyfills-loader": "^1.1.0",
     "browserslist": "^4.16.1",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-workbox": "^6.1.0"
+    "workbox-broadcast-update": "^6.1.5",
+    "workbox-cacheable-response": "^6.1.5",
+    "workbox-expiration": "^6.1.5",
+    "workbox-routing": "^6.1.5",
+    "workbox-strategies": "^6.1.5"
   }
 }

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,

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,
   ];
 

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 };
+}

packages/building-rollup/src/createSpaConfig.js

@@ -1,6 +1,4 @@
-import path from 'path';
 import { rollupPluginHTML } from '@web/rollup-plugin-html';
-import { generateSW } from 'rollup-plugin-workbox';
 import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
 import { polyfillsLoader } from '@web/rollup-plugin-polyfills-loader';
 import { metaConfigToRollupConfig } from 'plugins-manager';
@@ -37,31 +35,6 @@ export function createSpaMetaConfig(userConfig = { output: {} }) {
       options: {
         rootDir,
         absoluteBaseUrl,
-        injectServiceWorker: true,
-        serviceWorkerPath: path.join(config.output.dir, 'service-worker.js'),
-      },
-    },
-    {
-      name: 'workbox',
-      plugin: generateSW,
-      options: {
-        // Keep 'legacy-*.js' just for retro compatibility
-        globIgnores: ['polyfills/*.js', 'legacy-*.js', 'nomodule-*.js'],
-        navigateFallback: '/index.html',
-        // where to output the generated sw
-        swDest: path.join(config.output.dir, 'service-worker.js'),
-        // directory to match patterns against to be precached
-        globDirectory: path.join(config.output.dir),
-        // cache any html js and css by default
-        globPatterns: ['**/*.{html,js,css,webmanifest}', '**/*-search-index.json'],
-        skipWaiting: true,
-        clientsClaim: true,
-        runtimeCaching: [
-          {
-            urlPattern: 'polyfills/*.js',
-            handler: 'CacheFirst',
-          },
-        ],
       },
     },
     {

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);
   });
 });

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>',
+    );
   });
 });

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>

packages/check-html-links/CHANGELOG.md

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

packages/check-html-links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "check-html-links",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "publishConfig": {
     "access": "public"
   },
@@ -13,11 +13,11 @@
   },
   "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
   "homepage": "https://rocket.modern-web.dev/docs/tools/check-html-links/",
+  "main": "./index.js",
   "bin": {
     "check-html-links": "src/cli.js"
   },
   "type": "module",
-  "main": "./index.js",
   "exports": {
     ".": "./index.js"
   },
@@ -37,7 +37,8 @@
     "command-line-args": "^5.1.1",
     "glob": "^7.0.0",
     "minimatch": "^3.0.4",
-    "sax-wasm": "^2.0.0"
+    "sax-wasm": "^2.0.0",
+    "slash": "^3.0.0"
   },
   "devDependencies": {
     "@types/glob": "^7.0.0"

packages/check-html-links/src/validateFolder.js

@@ -6,6 +6,7 @@ import { createRequire } from 'module';
 
 import { listFiles } from './listFiles.js';
 import path from 'path';
+import slash from 'slash';
 
 /** @typedef {import('../types/main').Link} Link */
 /** @typedef {import('../types/main').LocalFile} LocalFile */
@@ -45,7 +46,7 @@ function extractReferences(htmlFilePath) {
     if (ev === SaxEventType.Attribute) {
       const data = /** @type {Attribute} */ (/** @type {any} */ (_data));
       const attributeName = data.name.toString();
-      const value = data.value.toString();
+      const value = slash(data.value.toString());
       const entry = {
         attribute: attributeName,
         value,
@@ -181,6 +182,18 @@ function getValueAndAnchor(inValue) {
   };
 }
 
+/**
+ * @param {string} url
+ * @returns {boolean}
+ */
+function isNonHttpSchema(url) {
+  const found = url.match(/([a-z]+):/);
+  if (found) {
+    return found.length > 0;
+  }
+  return false;
+}
+
 /**
  *
  * @param {Link[]} links
@@ -206,8 +219,13 @@ async function resolveLinks(links, { htmlFilePath, rootDir, ignoreUsage }) {
 
     if (ignoreUsage(value)) {
       // ignore
-    } else if (value.includes('mailto:')) {
+    } else if (
+      value.startsWith('mailto:') ||
+      value.startsWith('mailto:') // = "mailto:" but html encoded
+    ) {
       // ignore for now - could add a check to validate if the email address is valid
+    } else if (value.startsWith('tel:')) {
+      // ignore for now - could add a check to validate if the phone number is valid
     } else if (valueFile === '' && anchor !== '') {
       addLocalFile(htmlFilePath, anchor, usageObj);
     } else if (value.startsWith('//') || value.startsWith('http')) {
@@ -218,6 +236,8 @@ async function resolveLinks(links, { htmlFilePath, rootDir, ignoreUsage }) {
       addLocalFile(filePath, anchor, usageObj);
     } else if (value === '' && anchor === '') {
       // no need to check it
+    } else if (isNonHttpSchema(value)) {
+      // not a schema we handle
     } else {
       const filePath = path.join(path.dirname(htmlFilePath), valueFile);
       addLocalFile(filePath, anchor, usageObj);

packages/check-html-links/test-node/fixtures/mailto/index.html

@@ -1 +1,3 @@
 <a href="mailto:foo@bar.com"></a>
+<!-- encoded mailto links -->
+<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#97;&#100;&#100;&#114;&#101;&#115;&#115;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;"></a>

packages/check-html-links/test-node/fixtures/not-http-schema/index.html

@@ -0,0 +1,2 @@
+<a href="sketch://add-library?url=https%3A%2F%2Fmyexample.com%2Fdesign%2Fui-kit.xml"></a>
+<a href="vscode://file/c:/myProject/package.json:5:10"></a>

packages/check-html-links/test-node/fixtures/tel/index.html

@@ -0,0 +1 @@
+<a href="tel:99999"></a>

packages/check-html-links/test-node/validateFolder.test.js

@@ -183,6 +183,16 @@ describe('validateFolder', () => {
     expect(cleanup(errors)).to.deep.equal([]);
   });
 
+  it('ignores tel links', async () => {
+    const { errors, cleanup } = await execute('fixtures/tel');
+    expect(cleanup(errors)).to.deep.equal([]);
+  });
+
+  it('ignore not http schema urls', async () => {
+    const { errors, cleanup } = await execute('fixtures/not-http-schema');
+    expect(cleanup(errors)).to.deep.equal([]);
+  });
+
   it('ignoring a folder', async () => {
     const { errors, cleanup } = await execute('fixtures/internal-link-ignore', {
       ignoreLinkPatterns: ['./relative/*', './relative/**/*'],

packages/cli/CHANGELOG.md

@@ -1,5 +1,172 @@
 # @rocket/cli
 
+## 0.9.8
+
+### Patch Changes
+
+- a5661b8: Updates dependencies
+
+## 0.9.7
+
+### Patch Changes
+
+- d91e46b: Add `bootstrap` command
+- 9978ea7: Improves typings for `addPlugin`
+- Updated dependencies [9978ea7]
+  - @rocket/eleventy-plugin-mdjs-unified@0.5.1
+  - plugins-manager@0.2.3
+
+## 0.9.6
+
+### Patch Changes
+
+- bf99541: Adjust copy logic to
+
+  1. for `_assets/_static` copy over everything
+  2. for all other paths copy over everything except `*.html` and `*.md`
+
+- 579e8e7: Unordered joiningBlocks are now considered with the order number `10 000` and will generally be at the bottom.
+  You can use numbers `> 10 000` to place files even after unordered joiningBlocks.
+
+## 0.9.5
+
+### Patch Changes
+
+- 1b9559f: Adds `before11ty` hook to config and presets
+
+## 0.9.4
+
+### Patch Changes
+
+- 2b5c61d: Allow configuring the imagePreset ignore rules via the option `ignore`
+
+  ```js
+  export default {
+    imagePresets: {
+      responsive: {
+        // ...
+        ignore: ({ src }) =>
+          src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
+      },
+    },
+  };
+  ```
+
+- 2b5c61d: Do not generate responsive images for files ending in `.svg` or that include `rocket-ignore.`
+- ce0b00e: don't transform external images
+- 3b1a0cf: Allow to configure check-html-links
+
+  ```js
+  export default {
+    checkLinks: {
+      /* ... */
+    },
+  };
+  ```
+
+## 0.9.3
+
+### Patch Changes
+
+- 795a361: The server worker url should respect a set pathPrefix.
+
+## 0.9.2
+
+### Patch Changes
+
+- 5330740: When replacing images with responsive picture tags do this from the bottom up so the initial dom parsing locations still hold true.
+
+## 0.9.1
+
+### Patch Changes
+
+- 43a7ca1: Responsive images need to respect a set pathPrefix
+
+## 0.9.0
+
+### Minor Changes
+
+- eae2007: Update to mdjs version that uses lit 2 and renders stories to light dom
+
+### Patch Changes
+
+- Updated dependencies [eae2007]
+  - @rocket/eleventy-plugin-mdjs-unified@0.5.0
+
+## 0.8.2
+
+### Patch Changes
+
+- 60e85a1: Support `picture` tags by handling `source` tags with `srcset` attributes in the rollup asset gathering build phase.
+- Updated dependencies [60e85a1]
+  - @rocket/building-rollup@0.3.1
+
+## 0.8.1
+
+### Patch Changes
+
+- c338696: Updated dependency of eleventy-img for M1 compatibility
+
+## 0.8.0
+
+### Minor Changes
+
+- 8bba4a8: Every content image in markdown will outputted in multiple widths and formats to ensure small image file sizes while retaining quality.
+  You can adjust the defaults by setting `imagePresets.responsive`.
+
+  ```js
+  export default {
+    imagePresets: {
+      responsive: {
+        widths: [600, 900, 1640],
+        formats: ['avif', 'jpeg'],
+        sizes: '(min-width: 1024px) 820px, calc(100vw - 40px)',
+      },
+    },
+  };
+  ```
+
+## 0.7.0
+
+### Minor Changes
+
+- 2724f07: The service worker no longer precaches all urls and assets. It now
+
+  - caches already visited pages
+  - caches assets of visited pages (up to 100 files then it replaces older entries)
+  - on service worker activation it will reload the page if a newer version is available
+
+### Patch Changes
+
+- Updated dependencies [2724f07]
+  - @rocket/building-rollup@0.3.0
+
+## 0.6.3
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+- Updated dependencies [2b7f1ee]
+  - @rocket/eleventy-plugin-mdjs-unified@0.4.1
+
+## 0.6.2
+
+### Patch Changes
+
+- ed86ff2: Do not set `data-localize-lang` in the simulator iframe html tag
+- f4a0ab5: Pass document shadowRoot to iframe
+- c675820: fix: windows path issue avoid filtering of index section of collections
+
+## 0.6.1
+
+### Patch Changes
+
+- abc8a02: You can now use an absolute path for the rootDir
+- Updated dependencies [bad4686]
+- Updated dependencies [2267e72]
+  - @rocket/building-rollup@0.2.0
+  - @rocket/eleventy-plugin-mdjs-unified@0.4.0
+
 ## 0.6.0
 
 ### Minor Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/cli",
-  "version": "0.6.0",
+  "version": "0.9.8",
   "publishConfig": {
     "access": "public"
   },
@@ -13,11 +13,11 @@
   },
   "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
   "homepage": "https://rocket.modern-web.dev/",
+  "main": "./index.cjs",
   "bin": {
     "rocket": "src/cli.js"
   },
   "type": "module",
-  "main": "./index.cjs",
   "exports": {
     ".": {
       "require": "./index.cjs",
@@ -56,10 +56,10 @@
   ],
   "dependencies": {
     "@11ty/eleventy": "^0.11.1",
-    "@11ty/eleventy-img": "^0.7.4",
-    "@rocket/building-rollup": "^0.1.3",
+    "@11ty/eleventy-img": "^0.9.0",
+    "@rocket/building-rollup": "^0.3.1",
     "@rocket/core": "^0.1.2",
-    "@rocket/eleventy-plugin-mdjs-unified": "^0.3.1",
+    "@rocket/eleventy-plugin-mdjs-unified": "^0.5.1",
     "@rocket/eleventy-rocket-nav": "^0.3.0",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
@@ -67,13 +67,15 @@
     "@web/dev-server": "^0.1.4",
     "@web/dev-server-rollup": "^0.3.2",
     "@web/rollup-plugin-copy": "^0.2.0",
-    "check-html-links": "^0.2.1",
+    "check-html-links": "^0.2.3",
     "command-line-args": "^5.1.1",
     "command-line-usage": "^6.1.1",
     "fs-extra": "^9.0.1",
     "micromatch": "^4.0.2",
-    "plugins-manager": "^0.2.1",
-    "utf8": "^3.0.0"
+    "plugins-manager": "^0.2.4",
+    "slash": "^3.0.0",
+    "utf8": "^3.0.0",
+    "workbox-window": "^6.1.5"
   },
   "types": "dist-types/index.d.ts"
 }

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);
+      });
+  }
+})();

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);

packages/cli/preset/_includes/_joiningBlocks/bottom/180-register-service-worker.njk

@@ -0,0 +1,7 @@
+{% set rocketServiceWorkerUrl = '/' + rocketConfig.serviceWorkerName %}
+
+<script>
+  window.__rocketServiceWorkerUrl = '{{ rocketServiceWorkerUrl | url }}';
+</script>
+
+<script type="module" inject-service-worker="" src="{{ '/_assets/scripts/registerServiceWorker.js' | asset | url }}"></script>

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>

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"/>

packages/cli/preset/_includes/layout-simulator.njk

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

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';
 
 /**
@@ -28,7 +29,7 @@ async function productionBuild(config) {
       name: 'copy',
       plugin: copy,
       options: {
-        patterns: ['!(*.md|*.html)*', '_merged_assets/_static/**/*.{png,gif,jpg,json,css,svg,ico}'],
+        patterns: ['!(*.md|*.html)*', '_merged_assets/_static/**/*'],
         rootDir: config.outputDevDir,
       },
     }),
@@ -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 {

packages/cli/src/RocketCli.js

@@ -19,6 +19,10 @@ const { setComputedConfig } = computedConfigPkg;
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export class RocketEleventy extends Eleventy {
+  /** @type{Required<import('../types/main').RocketCliOptions>} */
+  // @ts-expect-error: awkward to type this in jsdoc
+  config;
+
   /**
    * @param {string} input
    * @param {string} output
@@ -26,11 +30,14 @@ export class RocketEleventy extends Eleventy {
    */
   constructor(input, output, cli) {
     super(input, output);
+    /** @type {*} */
+    this.eleventyFiles;
     this.__rocketCli = cli;
   }
 
   async write() {
     await this.__rocketCli.mergePresets();
+    for (const fn of this.__rocketCli.config.__before11tyFunctions) await fn();
     await super.write();
     await this.__rocketCli.update();
   }
@@ -45,7 +52,10 @@ export class RocketEleventy extends Eleventy {
       path.join(this.__rocketCli.config._inputDirCwdRelative, '_includes', '**'),
     ];
 
-    ignores = ignores.filter(ignore => !keepWatching.includes(ignore));
+    ignores = ignores.filter(
+      /** @param {string} ignore */
+      ignore => !keepWatching.includes(ignore),
+    );
     // debug("Ignoring watcher changes to: %o", ignores);
 
     let configOptions = this.config.chokidarConfig;
@@ -69,6 +79,10 @@ export class RocketCli {
   /** @type {string[]} */
   errors = [];
 
+  /** @type{Required<import('../types/main').RocketCliOptions>} */
+  // @ts-expect-error: awkward to type this in jsdoc
+  config;
+
   constructor({ argv } = { argv: undefined }) {
     const mainDefinitions = [
       { name: 'command', defaultOption: true, defaultValue: 'help' },
@@ -106,7 +120,8 @@ export class RocketCli {
 
       const config = new TemplateConfig(null, relCwdPathToConfig);
       elev.config = config.getConfig();
-      elev.resetConfig();
+      /** @type {*} */
+      (elev).resetConfig();
       elev.setConfigPathOverride(relCwdPathToConfig);
 
       elev.isVerbose = false;
@@ -120,7 +135,7 @@ export class RocketCli {
     for (const folder of ['_assets', '_data', '_includes']) {
       const to = path.join(this.config._inputDirCwdRelative, `_merged${folder}`);
       await fs.emptyDir(to);
-      for (const sourceDir of this.config._presetPathes) {
+      for (const sourceDir of this.config._presetPaths) {
         const from = path.join(sourceDir, folder);
         if (fs.existsSync(from)) {
           if (folder === '_includes') {
@@ -138,7 +153,9 @@ export class RocketCli {
    */
   async setup() {
     if (this.__isSetup === false) {
-      this.config = await normalizeConfig(this.argvConfig);
+      this.config =
+        /** @type{Required<import('../types/main').RocketCliOptions>} */
+        (await normalizeConfig(this.argvConfig));
       setComputedConfig(this.config);
       this.__isSetup = true;
     }
@@ -147,6 +164,10 @@ export class RocketCli {
   async run() {
     await this.setup();
 
+    if (this.config.command === 'bootstrap') {
+      return this.bootstrap();
+    }
+
     for (const plugin of this.config.plugins) {
       if (this.considerPlugin(plugin) && typeof plugin.setupCommand === 'function') {
         this.config = plugin.setupCommand(this.config);
@@ -187,6 +208,45 @@ export class RocketCli {
     }
   }
 
+  async bootstrap() {
+    const outputDir = path.join(this.config.outputDir, '..');
+    const moduleDir = path.dirname(fileURLToPath(import.meta.url));
+    const bootstrapFilesDir = path.join(moduleDir, 'public', 'bootstrap');
+    const packageJsonPath = path.join(outputDir, 'package.json');
+    const gitignorePath = path.join(outputDir, '.gitignore');
+
+    if (!(await fs.pathExists(packageJsonPath))) {
+      await fs.writeJson(packageJsonPath, {});
+    }
+
+    await fs.copy(bootstrapFilesDir, outputDir, {
+      errorOnExist: true,
+      filter: file => !file.endsWith('_gitignore'),
+    });
+
+    const packageJson = await fs.readJson(packageJsonPath);
+
+    await fs.writeJson(
+      packageJsonPath,
+      {
+        ...packageJson,
+        type: 'module',
+        scripts: {
+          ...packageJson.scripts,
+          start: 'rocket start',
+          docs: 'rocket build',
+        },
+      },
+      { spaces: 2 },
+    );
+
+    await fs.ensureFile(gitignorePath);
+    await fs.appendFile(
+      gitignorePath,
+      await fs.readFile(path.join(bootstrapFilesDir, '_gitignore'), 'utf8'),
+    );
+  }
+
   /**
    * @param {RocketPlugin} plugin
    */

packages/cli/src/RocketLint.js

@@ -50,6 +50,7 @@ export class RocketLint {
 
     const checkLinks = new CheckHtmlLinksCli();
     checkLinks.setOptions({
+      ...this.config.checkLinks,
       rootDir: this.config.lintInputDir,
       printOnError: false,
       continueOnError: true,

packages/cli/src/eleventy-plugins/insertResponsiveImages.cjs

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

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;
         });

packages/cli/src/eleventy-plugins/rocketCopy.cjs

@@ -1,6 +1,10 @@
 const rocketCopy = {
-  configFunction: (eleventyConfig, { _inputDirCwdRelative, filesExtensionsToCopy }) => {
-    eleventyConfig.addPassthroughCopy(`${_inputDirCwdRelative}/**/*.{${filesExtensionsToCopy}}`);
+  configFunction: (eleventyConfig, { _inputDirCwdRelative }) => {
+    eleventyConfig.addPassthroughCopy(`${_inputDirCwdRelative}/!(*.md|*.html)*`);
+    eleventyConfig.addPassthroughCopy(
+      `${_inputDirCwdRelative}/!(_includes|_data|_assets|_merged_data|_merged_includes)*/**/!(*.md|*.html)*`,
+    );
+    eleventyConfig.addPassthroughCopy(`${_inputDirCwdRelative}/_merged_assets/_static/**/*`);
   },
 };
 

packages/cli/src/eleventy-plugins/rocketFilters.cjs

@@ -1,6 +1,7 @@
 const path = require('path');
 const fs = require('fs');
 const { processLocalReferences } = require('./processLocalReferences.cjs');
+const { insertResponsiveImages } = require('./insertResponsiveImages.cjs');
 
 function inlineFilePath(filePath) {
   let data = fs.readFileSync(filePath, function (err, contents) {
@@ -24,6 +25,7 @@ const rocketFilters = {
 
     eleventyConfig.addFilter('inlineFilePath', inlineFilePath);
 
+    eleventyConfig.addTransform('insertResponsiveImages', insertResponsiveImages);
     eleventyConfig.addTransform('processLocalReferences', processLocalReferences);
   },
 };

packages/cli/src/normalizeConfig.js

@@ -5,6 +5,7 @@
 /** @typedef {import('@web/dev-server').DevServerConfig} DevServerConfig */
 
 /** @typedef {import('../types/main').RocketCliOptions} RocketCliOptions */
+/** @typedef {import('../types/main').ImagePreset} ImagePreset */
 /** @typedef {import('../types/main').RocketPlugin} RocketPlugin */
 
 import path from 'path';
@@ -19,9 +20,25 @@ import { fileURLToPath } from 'url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+/**
+ * The default responsive ignore function will ignore files
+ * - ending in `.svg`
+ * - containing `rocket-unresponsive.`
+ *
+ * @param {object} opts
+ * @param {string} opts.src
+ * @param {string} opts.title
+ * @param {string} opts.alt
+ * @param {{name: string, value: string}[]} opts.attributes
+ * @returns {boolean}
+ */
+function ignore({ src }) {
+  return src.endsWith('svg') || src.includes('rocket-unresponsive.');
+}
+
 /**
  * @param {Partial<RocketCliOptions>} inConfig
- * @returns {Promise<RocketCliOptions>}
+ * @returns {Promise<RocketCliOptions & { __before11tyFunctions: RocketCliOptions['before11ty'][] }>}
  */
 export async function normalizeConfig(inConfig) {
   let config = {
@@ -40,15 +57,35 @@ export async function normalizeConfig(inConfig) {
     inputDir: 'docs',
     outputDir: '_site',
     outputDevDir: '_site-dev',
+    serviceWorkerName: 'service-worker.js',
     build: {},
     devServer: {},
 
     ...inConfig,
+
+    /** @type{RocketCliOptions['before11ty'][]} */
+    __before11tyFunctions: [],
+
+    /** @type{{[key: string]: ImagePreset}} */
+    imagePresets: {
+      responsive: {
+        widths: [600, 900, 1640],
+        formats: ['avif', 'jpeg'],
+        sizes: '100vw',
+        ignore,
+      },
+    },
   };
 
   if (inConfig && inConfig.devServer) {
     config.devServer = { ...config.devServer, ...inConfig.devServer };
   }
+  if (inConfig.imagePresets && inConfig.imagePresets.responsive) {
+    config.imagePresets.responsive = {
+      ...config.imagePresets.responsive,
+      ...inConfig.imagePresets.responsive,
+    };
+  }
 
   let userConfigFile;
   let __configDir = process.cwd();
@@ -72,7 +109,14 @@ export async function normalizeConfig(inConfig) {
           ...config.devServer,
           ...fileConfig.devServer,
         },
+        imagePresets: config.imagePresets,
       };
+      if (fileConfig.imagePresets && fileConfig.imagePresets.responsive) {
+        config.imagePresets.responsive = {
+          ...config.imagePresets.responsive,
+          ...fileConfig.imagePresets.responsive,
+        };
+      }
     }
   } catch (error) {
     console.error('Could not read rocket config file', error);
@@ -83,9 +127,13 @@ export async function normalizeConfig(inConfig) {
   const _inputDirCwdRelative = path.join(_configDirCwdRelative, config.inputDir);
 
   // cli core preset is always first
-  config._presetPathes = [path.join(__dirname, '..', 'preset')];
+  config._presetPaths = [path.join(__dirname, '..', 'preset')];
   for (const preset of config.presets) {
-    config._presetPathes.push(preset.path);
+    config._presetPaths.push(preset.path);
+
+    if (preset.adjustImagePresets) {
+      config.imagePresets = preset.adjustImagePresets(config.imagePresets);
+    }
 
     if (preset.setupUnifiedPlugins) {
       config.setupUnifiedPlugins = [...config.setupUnifiedPlugins, ...preset.setupUnifiedPlugins];
@@ -117,9 +165,13 @@ export async function normalizeConfig(inConfig) {
     if (preset.setupCliPlugins) {
       config.setupCliPlugins = [...config.setupCliPlugins, ...preset.setupCliPlugins];
     }
+
+    if (typeof preset.before11ty === 'function') {
+      config.__before11tyFunctions.push(preset.before11ty);
+    }
   }
   // add "local" preset
-  config._presetPathes.push(path.resolve(_inputDirCwdRelative));
+  config._presetPaths.push(path.resolve(_inputDirCwdRelative));
 
   /** @type {MetaPlugin[]} */
   let pluginsMeta = [
@@ -144,6 +196,10 @@ export async function normalizeConfig(inConfig) {
     plugins.push(pluginInst);
   }
 
+  if (typeof config.before11ty === 'function') {
+    config.__before11tyFunctions.push(config.before11ty);
+  }
+
   // TODO: check pathPrefix to NOT have a '/' at the end as it will mean it may get ignored by 11ty 🤷‍♂️
 
   return {

packages/cli/src/public/bootstrap/_gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+## Rocket ignore files (need to be the full relative path to the folders)
+docs/_merged_data/
+docs/_merged_assets/
+docs/_merged_includes/

packages/cli/src/public/bootstrap/docs/.eleventyignore

@@ -0,0 +1,3 @@
+_assets
+_includes
+_data

packages/cli/src/public/bootstrap/docs/index.md

@@ -0,0 +1,3 @@
+# Welcome to Your Rocket Site
+
+Add your markdown content here.

packages/cli/src/public/bootstrap/rocket.config.js

@@ -0,0 +1,5 @@
+import { rocketLaunch } from '@rocket/launch';
+
+export default {
+  presets: [rocketLaunch()],
+};

packages/cli/src/public/generateEleventyComputed.cjs

@@ -106,7 +106,7 @@ function socialMediaImagePlugin(args = {}) {
   };
 }
 
-function sortyByOrder(a, b) {
+function sortByOrder(a, b) {
   if (a.order > b.order) {
     return 1;
   }
@@ -127,20 +127,20 @@ async function dirToTree(sourcePath, extra = '') {
     if (entry.isDirectory()) {
       const value = await dirToTree(sourcePath, relativePath);
       unsortedEntries.push({
-        order: matches && matches.length > 0 ? parseInt(matches[1]) : 0,
+        order: matches && matches.length > 0 ? parseInt(matches[1]) : 10000,
         name: entry.name,
         value,
       });
     } else {
       unsortedEntries.push({
-        order: matches && matches.length > 0 ? parseInt(matches[1]) : 0,
+        order: matches && matches.length > 0 ? parseInt(matches[1]) : 10000,
         name: entry.name,
         value: relativePath,
       });
     }
   }
   const sortedTree = {};
-  for (const unsortedEntry of unsortedEntries.sort(sortyByOrder)) {
+  for (const unsortedEntry of unsortedEntries.sort(sortByOrder)) {
     sortedTree[unsortedEntry.name] = unsortedEntry.value;
   }
   return sortedTree;

packages/cli/src/shared/.eleventy.cjs

@@ -5,6 +5,16 @@ const { getComputedConfig } = require('../public/computedConfig.cjs');
 const rocketFilters = require('../eleventy-plugins/rocketFilters.cjs');
 const rocketCopy = require('../eleventy-plugins/rocketCopy.cjs');
 const rocketCollections = require('../eleventy-plugins/rocketCollections.cjs');
+const { adjustPluginOptions } = require('plugins-manager');
+const image = require('./mdjsImageHandler.cjs');
+
+const defaultSetupUnifiedPlugins = [
+  adjustPluginOptions('remark2rehype', {
+    handlers: {
+      image,
+    },
+  }),
+];
 
 module.exports = function (eleventyConfig) {
   const config = getComputedConfig();
@@ -20,15 +30,14 @@ module.exports = function (eleventyConfig) {
     {
       name: 'rocket-copy',
       plugin: rocketCopy,
-      options: {
-        _inputDirCwdRelative,
-        filesExtensionsToCopy: 'png,gif,jpg,jpeg,svg,css,xml,json,js',
-      },
+      options: { _inputDirCwdRelative },
     },
     {
       name: 'eleventy-plugin-mdjs-unified',
       plugin: eleventyPluginMdjsUnified,
-      options: { setupUnifiedPlugins: config.setupUnifiedPlugins },
+      options: {
+        setupUnifiedPlugins: [...defaultSetupUnifiedPlugins, ...config.setupUnifiedPlugins],
+      },
     },
     {
       name: 'eleventy-rocket-nav',

packages/cli/src/shared/mdjsImageHandler.cjs

@@ -0,0 +1,17 @@
+const normalize = require('mdurl/encode');
+
+function image(h, node) {
+  const props = {
+    src: normalize(node.url),
+    alt: node.alt,
+    'rocket-image': 'responsive',
+  };
+
+  if (node.title !== null && node.title !== undefined) {
+    props.title = node.title;
+  }
+
+  return h(node, 'img', props);
+}
+
+module.exports = image;

packages/cli/test-helpers/index.js

@@ -1,6 +1,7 @@
 import chai from 'chai';
 import { RocketCli } from '../src/RocketCli.js';
 import path from 'path';
+import globby from 'globby';
 import fs from 'fs-extra';
 import prettier from 'prettier';
 import { fileURLToPath } from 'url';
@@ -15,11 +16,11 @@ export function setFixtureDir(importMetaUrl) {
 
 /**
  * @typedef {object} readOutputOptions
- * @property {boolean} stripServiceWorker
  * @property {boolean} stripToBody
  * @property {boolean} stripStartEndWhitespace
  * @property {boolean} stripScripts
  * @property {boolean} formatHtml
+ * @property {boolean} replaceImageHashes
  * @property {start|build} type
  */
 
@@ -47,19 +48,25 @@ export async function readOutput(
   cli,
   fileName,
   {
-    stripServiceWorker = false,
     stripToBody = false,
     stripStartEndWhitespace = true,
     stripScripts = false,
     formatHtml = false,
     type = 'build',
+    replaceImageHashes = false,
   } = {},
 ) {
   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;
+  const outputDir =
+    type === 'bootstrap'
+      ? path.join(cli.config.outputDir, '..')
+      : type === 'build'
+      ? cli.config.outputDir
+      : cli.config.outputDevDir;
+
   let text = await fs.promises.readFile(path.join(outputDir, fileName));
   text = text.toString();
   if (stripToBody) {
@@ -67,16 +74,14 @@ export async function readOutput(
     const bodyCloseTagStart = text.indexOf('</body>');
     text = text.substring(bodyOpenTagEnd, bodyCloseTagStart);
   }
-  if (stripServiceWorker) {
-    const scriptOpenTagEnd = text.indexOf('<script inject-service-worker');
-    const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;
-    text = text.substring(0, scriptOpenTagEnd) + text.substring(scriptCloseTagStart);
-  }
   if (stripScripts) {
     const scriptOpenTagEnd = text.indexOf('<script>');
     const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;
     text = text.substring(0, scriptOpenTagEnd) + text.substring(scriptCloseTagStart);
   }
+  if (replaceImageHashes) {
+    text = text.replace(/\/images\/([a-z0-9]+)-/g, '/images/__HASH__-');
+  }
   if (formatHtml) {
     text = prettier.format(text, { parser: 'html', printWidth: 100 });
   }
@@ -116,6 +121,12 @@ export async function readBuildOutput(cli, fileName, options = {}) {
   return readOutput(cli, fileName, options);
 }
 
+export async function getfixtureExpectedFiles(pathToDir) {
+  const cwd = path.join(fixtureDir, pathToDir);
+  const paths = await globby('**/*', { cwd, absolute: true, dot: true });
+  return paths;
+}
+
 export async function execute(cli, configFileDir) {
   await cli.setup();
   cli.config.outputDevDir = path.join(configFileDir, '__output-dev');
@@ -127,6 +138,14 @@ export async function execute(cli, configFileDir) {
   return cli;
 }
 
+export async function executeBootstrap(pathToDir) {
+  const configFileDir = path.join(fixtureDir, pathToDir.split('/').join(path.sep));
+  const cli = new RocketCli({ argv: ['bootstrap'] });
+  await fs.emptyDir(configFileDir);
+  await execute(cli, configFileDir);
+  return cli;
+}
+
 export async function executeStart(pathToConfig) {
   const configFile = path.join(fixtureDir, pathToConfig.split('/').join(path.sep));
   const cli = new RocketCli({

packages/cli/test-node/RocketCli.computedConfig.test.js

@@ -66,7 +66,6 @@ describe('RocketCli computedConfig', () => {
 
     const indexHtml = await readBuildOutput(cli, 'index.html', {
       stripToBody: true,
-      stripServiceWorker: true,
     });
     expect(indexHtml).to.equal('/_merged_assets/11ty-img/5893749-1200.png');
   });
@@ -107,31 +106,33 @@ describe('RocketCli computedConfig', () => {
     cli = await executeStart('computed-config-fixtures/image-link/rocket.config.js');
 
     const namedMdContent = [
-      '<p><a href="../">Root</a>',
+      '<p>',
+      '  <a href="../">Root</a>',
       '  <a href="../one-level/raw/">Raw</a>',
-      '<img src="../images/my-img.svg" alt="my-img">',
-      '<img src="/images/my-img.svg" alt="absolute-img"></p>',
+      '  <img src="../images/my-img.svg" alt="my-img" />',
+      '  <img src="/images/my-img.svg" alt="absolute-img" />',
+      '</p>',
     ];
 
     const namedHtmlContent = [
       '<div id="with-anchor">',
       '  <a href="../">Root</a>',
       '  <a href="../one-level/raw/">Raw</a>',
-      '  <img src="../images/my-img.svg" alt="my-img">',
-      '  <img src="/images/my-img.svg" alt="absolute-img">',
+      '  <img src="../images/my-img.svg" alt="my-img" />',
+      '  <img src="/images/my-img.svg" alt="absolute-img" />',
       '  <picture>',
-      '    <source media="(min-width:465px)" srcset="../images/picture-min-465.jpg">',
-      '    <img src="../images/picture-fallback.jpg" alt="Fallback" style="width:auto;">',
+      '    <source media="(min-width:465px)" srcset="../images/picture-min-465.jpg" />',
+      '    <img src="../images/picture-fallback.jpg" alt="Fallback" style="width: auto" />',
       '  </picture>',
       '</div>',
     ];
 
-    const templateHtml = await readStartOutput(cli, 'template/index.html');
+    const templateHtml = await readStartOutput(cli, 'template/index.html', { formatHtml: true });
     expect(templateHtml, 'template/index.html does not match').to.equal(
       namedHtmlContent.join('\n'),
     );
 
-    const guidesHtml = await readStartOutput(cli, 'guides/index.html');
+    const guidesHtml = await readStartOutput(cli, 'guides/index.html', { formatHtml: true });
     expect(guidesHtml, 'guides/index.html does not match').to.equal(
       [...namedMdContent, ...namedHtmlContent].join('\n'),
     );
@@ -158,27 +159,28 @@ describe('RocketCli computedConfig', () => {
     );
 
     // for index files no '../' will be added
-    const indexHtml = await readStartOutput(cli, 'index.html');
+    const indexHtml = await readStartOutput(cli, 'index.html', { formatHtml: true });
     expect(indexHtml, 'index.html does not match').to.equal(
       [
-        '<p><a href="./">Root</a>',
+        '<p>',
+        '  <a href="./">Root</a>',
         '  <a href="guides/#with-anchor">Guides</a>',
         '  <a href="./one-level/raw/">Raw</a>',
         '  <a href="template/">Template</a>',
         '  <a href="./rules/tabindex/">EndingIndex</a>',
-        '<img src="./images/my-img.svg" alt="my-img">',
-        '<img src="/images/my-img.svg" alt="absolute-img"></p>',
+        '  <img src="./images/my-img.svg" alt="my-img" />',
+        '  <img src="/images/my-img.svg" alt="absolute-img" />',
+        '</p>',
         '<div>',
         '  <a href="./">Root</a>',
-        '  👇<a href="guides/#with-anchor">Guides</a>',
-        '  👉 <a href="./one-level/raw/">Raw</a>',
+        '  👇<a href="guides/#with-anchor">Guides</a> 👉 <a href="./one-level/raw/">Raw</a>',
         '  <a href="template/">Template</a>',
         '  <a href="./rules/tabindex/">EndingIndex</a>',
-        '  <img src="./images/my-img.svg" alt="my-img">',
-        '  <img src="/images/my-img.svg" alt="absolute-img">',
+        '  <img src="./images/my-img.svg" alt="my-img" />',
+        '  <img src="/images/my-img.svg" alt="absolute-img" />',
         '  <picture>',
-        '    <source media="(min-width:465px)" srcset="./images/picture-min-465.jpg">',
-        '    <img src="./images/picture-fallback.jpg" alt="Fallback" style="width:auto;">',
+        '    <source media="(min-width:465px)" srcset="./images/picture-min-465.jpg" />',
+        '    <img src="./images/picture-fallback.jpg" alt="Fallback" style="width: auto" />',
         '  </picture>',
         '</div>',
       ].join('\n'),

packages/cli/test-node/RocketCli.e2e.test.js

@@ -2,14 +2,17 @@ import chai from 'chai';
 import fetch from 'node-fetch';
 import chalk from 'chalk';
 import {
+  executeBootstrap,
   executeBuild,
   executeLint,
   executeStart,
   expectThrowsAsync,
   readBuildOutput,
   readStartOutput,
+  getfixtureExpectedFiles,
   setFixtureDir,
 } from '@rocket/cli/test-helpers';
+import fs from 'fs-extra';
 
 const { expect } = chai;
 
@@ -31,7 +34,22 @@ describe('RocketCli e2e', () => {
   it('can add a unified plugin via the config', async () => {
     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>');
+    expect(indexHtml).to.equal(`<p>See a 🐶</p>`);
+  });
+
+  describe('bootstrap command', () => {
+    it('can bootstrap a project', async () => {
+      cli = await executeBootstrap('e2e-fixtures/bootstrap/__output');
+
+      for (const p of await getfixtureExpectedFiles('e2e-fixtures/bootstrap/expected')) {
+        const actual = await fs.readFile(
+          p.replace('expected', '__output').replace('_gitignore', '.gitignore'),
+          'utf8',
+        );
+        const expected = await fs.readFile(p, 'utf8');
+        expect(actual, p).to.equal(expected);
+      }
+    });
   });
 
   describe('eleventy in config', () => {
@@ -75,9 +93,6 @@ describe('RocketCli e2e', () => {
     cli = await executeBuild('e2e-fixtures/rollup-plugin/devbuild-build.rocket.config.js');
     const inlineModule = await readBuildOutput(cli, 'e97af63d.js');
     expect(inlineModule).to.equal('var a={test:"data"};console.log(a);');
-
-    const swCode = await readBuildOutput(cli, 'my-service-worker.js');
-    expect(swCode).to.not.be.undefined;
   });
 
   it('can adjust the inputDir', async () => {
@@ -105,13 +120,36 @@ describe('RocketCli e2e', () => {
     );
     const assetHtml = await readStartOutput(cli, 'use-assets/index.html');
     expect(assetHtml).to.equal('<link rel="stylesheet" href="/_merged_assets/some.css">');
+    const imageHtml = await readStartOutput(cli, 'image/index.html', { replaceImageHashes: true });
+    expect(imageHtml).to.equal(
+      [
+        '<p>',
+        '      <figure>',
+        '        <picture>',
+        '<source type="image/avif" srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w" sizes="100vw">',
+        '<source type="image/jpeg" srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w" sizes="100vw">',
+        '          <img',
+        '            alt="My Image Alternative Text" rocket-image="responsive"',
+        '            src="/images/__HASH__-600.jpeg"',
+        '            ',
+        '            ',
+        '            width="600"',
+        '            height="316"',
+        '            loading="lazy"',
+        '            decoding="async"',
+        '          />',
+        '        </picture>',
+        '      <figcaption>My Image Description</figcaption>',
+        '</figure>',
+        '    </p>',
+      ].join('\n'),
+    );
   });
 
   it('can add a pathPrefix that will be used in the build command', async () => {
     cli = await executeBuild('e2e-fixtures/content/pathPrefix.rocket.config.js');
 
     const linkHtml = await readBuildOutput(cli, 'link/index.html', {
-      stripServiceWorker: true,
       stripToBody: true,
     });
     expect(linkHtml).to.equal(
@@ -119,12 +157,30 @@ describe('RocketCli e2e', () => {
         '\n',
       ),
     );
-    const assetHtml = await readBuildOutput(cli, 'use-assets/index.html', {
-      stripServiceWorker: true,
-    });
+    const assetHtml = await readBuildOutput(cli, 'use-assets/index.html');
     expect(assetHtml).to.equal(
       '<html><head><link rel="stylesheet" href="../41297ffa.css">\n\n</head><body>\n\n</body></html>',
     );
+    let imageHtml = await readBuildOutput(cli, 'image/index.html');
+    imageHtml = imageHtml.replace(/\.\.\/([a-z0-9]+)\./g, '../__HASH__.');
+    expect(imageHtml).to.equal(
+      [
+        '<html><head>',
+        '</head><body><p>',
+        '      </p><figure>',
+        '        <picture>',
+        '<source type="image/avif" srcset="../__HASH__.avif 600w, ../__HASH__.avif 900w" sizes="100vw">',
+        '<source type="image/jpeg" srcset="../__HASH__.jpeg 600w, ../__HASH__.jpeg 900w" sizes="100vw">',
+        '          <img alt="My Image Alternative Text" rocket-image="responsive" src="../__HASH__.jpeg" width="600" height="316" loading="lazy" decoding="async">',
+        '        </picture>',
+        '      <figcaption>My Image Description</figcaption>',
+        '</figure>',
+        '    <p></p>',
+        '',
+        '',
+        '</body></html>',
+      ].join('\n'),
+    );
   });
 
   it('smoke test for link checking', async () => {

packages/cli/test-node/RocketCli.images.test.js

@@ -0,0 +1,296 @@
+import chai from 'chai';
+import chalk from 'chalk';
+import { executeStart, readStartOutput, setFixtureDir } from '@rocket/cli/test-helpers';
+
+const { expect } = chai;
+
+describe('RocketCli images', () => {
+  let cli;
+
+  before(() => {
+    // ignore colors in tests as most CIs won't support it
+    chalk.level = 0;
+    setFixtureDir(import.meta.url);
+  });
+
+  afterEach(async () => {
+    if (cli?.cleanup) {
+      await cli.cleanup();
+    }
+  });
+
+  describe('Images', () => {
+    it('does render content images responsive', async () => {
+      cli = await executeStart('e2e-fixtures/images/rocket.config.js');
+      const indexHtml = await readStartOutput(cli, 'index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+      expect(indexHtml).to.equal(
+        [
+          '<p>',
+          '  <figure>',
+          '    <picture>',
+          '      <source',
+          '        type="image/avif"',
+          '        srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
+          '        sizes="100vw"',
+          '      />',
+          '      <source',
+          '        type="image/jpeg"',
+          '        srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
+          '        sizes="100vw"',
+          '      />',
+          '      <img',
+          '        alt="My Image Alternative Text"',
+          '        rocket-image="responsive"',
+          '        src="/images/__HASH__-600.jpeg"',
+          '        width="600"',
+          '        height="316"',
+          '        loading="lazy"',
+          '        decoding="async"',
+          '      />',
+          '    </picture>',
+          '    <figcaption>My Image Description</figcaption>',
+          '  </figure>',
+          '</p>',
+        ].join('\n'),
+      );
+
+      const keepSvgHtml = await readStartOutput(cli, 'ignores/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+
+      // ignores src="[...].svg" and src="[...]rocket-unresponsive.[...]"
+      expect(keepSvgHtml).to.equal(
+        [
+          '<p>Ignore SVG</p>',
+          '<p><img src="../_assets/logo.svg" alt="Logo stays svg" rocket-image="responsive" /></p>',
+          '<p>Ignore if contains <code>rocket-unresponsive.</code></p>',
+          '<p>',
+          '  <img',
+          '    src="../_assets/my-image.rocket-unresponsive.jpg"',
+          '    alt="Logo stays svg"',
+          '    rocket-image="responsive"',
+          '  />',
+          '</p>',
+          '<p>Responsive</p>',
+          '<p>',
+          '  <picture>',
+          '    <source',
+          '      type="image/avif"',
+          '      srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
+          '      sizes="100vw"',
+          '    />',
+          '    <source',
+          '      type="image/jpeg"',
+          '      srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
+          '      sizes="100vw"',
+          '    />',
+          '    <img',
+          '      alt="My Image Alternative Text"',
+          '      rocket-image="responsive"',
+          '      src="/images/__HASH__-600.jpeg"',
+          '      width="600"',
+          '      height="316"',
+          '      loading="lazy"',
+          '      decoding="async"',
+          '    />',
+          '  </picture>',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('can configure more patterns to ignore', async () => {
+      cli = await executeStart('e2e-fixtures/images/ignore-more.rocket.config.js');
+      const keepSvgHtml = await readStartOutput(cli, 'ignores/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+
+      // ignores src="[...].svg" and src="[...]rocket-unresponsive.[...]"
+      expect(keepSvgHtml).to.equal(
+        [
+          '<p>Ignore SVG</p>',
+          '<p><img src="../_assets/logo.svg" alt="Logo stays svg" rocket-image="responsive" /></p>',
+          '<p>Ignore if contains <code>rocket-unresponsive.</code></p>',
+          '<p>',
+          '  <img',
+          '    src="../_assets/my-image.rocket-unresponsive.jpg"',
+          '    alt="Logo stays svg"',
+          '    rocket-image="responsive"',
+          '  />',
+          '</p>',
+          '<p>Responsive</p>',
+          '<p>',
+          '  <img src="../_assets/my-image.jpeg" alt="My Image Alternative Text" rocket-image="responsive" />',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('renders multiple images in the correct order', async () => {
+      cli = await executeStart('e2e-fixtures/images/rocket.config.js');
+      const indexHtml = await readStartOutput(cli, 'two-images/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+      expect(indexHtml).to.equal(
+        [
+          '<h2 id="one">',
+          '  <a aria-hidden="true" tabindex="-1" href="#one"><span class="icon icon-link"></span></a>one',
+          '</h2>',
+          '<p>',
+          '  <picture>',
+          '    <source',
+          '      type="image/avif"',
+          '      srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
+          '      sizes="100vw"',
+          '    />',
+          '    <source',
+          '      type="image/jpeg"',
+          '      srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
+          '      sizes="100vw"',
+          '    />',
+          '    <img',
+          '      alt="one"',
+          '      rocket-image="responsive"',
+          '      src="/images/__HASH__-600.jpeg"',
+          '      width="600"',
+          '      height="316"',
+          '      loading="lazy"',
+          '      decoding="async"',
+          '    />',
+          '  </picture>',
+          '</p>',
+          '<h2 id="two">',
+          '  <a aria-hidden="true" tabindex="-1" href="#two"><span class="icon icon-link"></span></a>two',
+          '</h2>',
+          '<p>',
+          '  <picture>',
+          '    <source',
+          '      type="image/avif"',
+          '      srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
+          '      sizes="100vw"',
+          '    />',
+          '    <source',
+          '      type="image/jpeg"',
+          '      srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
+          '      sizes="100vw"',
+          '    />',
+          '    <img',
+          '      alt="two"',
+          '      rocket-image="responsive"',
+          '      src="/images/__HASH__-600.jpeg"',
+          '      width="600"',
+          '      height="316"',
+          '      loading="lazy"',
+          '      decoding="async"',
+          '    />',
+          '  </picture>',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('can configure those responsive images', async () => {
+      cli = await executeStart('e2e-fixtures/images/small.rocket.config.js');
+      const indexHtml = await readStartOutput(cli, 'index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+      expect(indexHtml).to.equal(
+        [
+          '<p>',
+          '  <figure>',
+          '    <picture>',
+          '      <source',
+          '        type="image/avif"',
+          '        srcset="/images/__HASH__-30.avif 30w, /images/__HASH__-60.avif 60w"',
+          '        sizes="(min-width: 1024px) 30px, 60px"',
+          '      />',
+          '      <source',
+          '        type="image/jpeg"',
+          '        srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
+          '        sizes="(min-width: 1024px) 30px, 60px"',
+          '      />',
+          '      <img',
+          '        alt="My Image Alternative Text"',
+          '        rocket-image="responsive"',
+          '        src="/images/__HASH__-30.jpeg"',
+          '        width="30"',
+          '        height="15"',
+          '        loading="lazy"',
+          '        decoding="async"',
+          '      />',
+          '    </picture>',
+          '    <figcaption>My Image Description</figcaption>',
+          '  </figure>',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('will only render a figure & figcaption if there is a caption/title', async () => {
+      cli = await executeStart('e2e-fixtures/images/small.rocket.config.js');
+      const indexHtml = await readStartOutput(cli, 'no-title/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+      expect(indexHtml).to.equal(
+        [
+          '<p>',
+          '  <picture>',
+          '    <source',
+          '      type="image/avif"',
+          '      srcset="/images/__HASH__-30.avif 30w, /images/__HASH__-60.avif 60w"',
+          '      sizes="(min-width: 1024px) 30px, 60px"',
+          '    />',
+          '    <source',
+          '      type="image/jpeg"',
+          '      srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
+          '      sizes="(min-width: 1024px) 30px, 60px"',
+          '    />',
+          '    <img',
+          '      alt="My Image Alternative Text"',
+          '      rocket-image="responsive"',
+          '      src="/images/__HASH__-30.jpeg"',
+          '      width="30"',
+          '      height="15"',
+          '      loading="lazy"',
+          '      decoding="async"',
+          '    />',
+          '  </picture>',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('will render an img with srcset and sizes if there is only one image format', async () => {
+      cli = await executeStart('e2e-fixtures/images/single-format.rocket.config.js');
+      const indexHtml = await readStartOutput(cli, 'no-title/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+      expect(indexHtml).to.equal(
+        [
+          '<p>',
+          '  <img',
+          '    alt="My Image Alternative Text"',
+          '    rocket-image="responsive"',
+          '    src="/images/__HASH__-30.jpeg"',
+          '    srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
+          '    sizes="(min-width: 1024px) 30px, 60px"',
+          '    width="30"',
+          '    height="15"',
+          '    loading="lazy"',
+          '    decoding="async"',
+          '  />',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+  });
+});

packages/cli/test-node/RocketCli.mergeTemplates.test.js

@@ -29,7 +29,13 @@ describe('RocketCli mergeTemplates', () => {
 
     const indexHtml = await readStartOutput(cli, 'index.html');
     expect(trimWhiteSpace(indexHtml)).to.equal(
-      ['<p>first</p>', '<p>second</p>', '<p>30-third</p>', '<p>100-last</p>'].join('\n'),
+      [
+        '<p>30-first</p>',
+        '<p>100-second</p>',
+        '<p>bar-third</p>',
+        '<p>foo-fourth</p>',
+        '<p>10100-last</p>',
+      ].join('\n'),
     );
   });
 

packages/cli/test-node/RocketCli.preset.test.js

@@ -86,6 +86,12 @@ describe('RocketCli preset', () => {
         '    </div>',
         '',
         '    <footer id="main-footer"></footer>',
+        '',
+        '    <script',
+        '      type="module"',
+        '      inject-service-worker=""',
+        '      src="/_merged_assets/scripts/registerServiceWorker.js"',
+        '    ></script>',
         '  </body>',
         '</html>',
       ].join('\n'),
@@ -98,4 +104,30 @@ describe('RocketCli preset', () => {
     const indexHtml = await readStartOutput(cli, 'index.html');
     expect(indexHtml).to.include('<meta name="added" content="at the top" />');
   });
+
+  it('a preset can provide an adjustImagePresets() function', async () => {
+    cli = await executeStart('preset-fixtures/use-preset/rocket.config.js');
+
+    const indexHtml = await readStartOutput(cli, 'index.html', {
+      formatHtml: true,
+      replaceImageHashes: true,
+    });
+    expect(indexHtml).to.equal(
+      [
+        '<p>',
+        '  <img',
+        '    alt="My Image Alternative Text"',
+        '    rocket-image="responsive"',
+        '    src="/images/__HASH__-30.jpeg"',
+        '    srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
+        '    sizes="30px"',
+        '    width="30"',
+        '    height="15"',
+        '    loading="lazy"',
+        '    decoding="async"',
+        '  />',
+        '</p>',
+      ].join('\n'),
+    );
+  });
 });

packages/cli/test-node/RocketCli.service-worker.test.js

@@ -0,0 +1,66 @@
+import chai from 'chai';
+import chalk from 'chalk';
+import { executeBuild, readStartOutput, setFixtureDir } from '@rocket/cli/test-helpers';
+
+const { expect } = chai;
+
+function getInjectServiceWorker(text) {
+  const scriptOpenTagStart = text.indexOf('<script type="module" inject-service-worker=""');
+  const scriptCloseTagEnd = text.indexOf('</script>', scriptOpenTagStart) + 9;
+  text = text.substring(scriptOpenTagStart, scriptCloseTagEnd);
+  return text;
+}
+
+function getServiceWorkerUrl(text) {
+  const matches = text.match(/window\.__rocketServiceWorkerUrl = '(.*?)';/);
+  return matches[1];
+}
+
+describe('RocketCli e2e', () => {
+  let cli;
+
+  before(() => {
+    // ignore colors in tests as most CIs won't support it
+    chalk.level = 0;
+    setFixtureDir(import.meta.url);
+  });
+
+  afterEach(async () => {
+    if (cli?.cleanup) {
+      await cli.cleanup();
+    }
+  });
+
+  it('will add a script to inject the service worker', async () => {
+    cli = await executeBuild('e2e-fixtures/service-worker/rocket.config.js');
+    const indexHtml = await readStartOutput(cli, 'index.html');
+    const indexInject = getInjectServiceWorker(indexHtml);
+    expect(indexInject).to.equal(
+      '<script type="module" inject-service-worker="" src="/_merged_assets/scripts/registerServiceWorker.js"></script>',
+    );
+    expect(getServiceWorkerUrl(indexHtml)).to.equal('/service-worker.js');
+    const subHtml = await readStartOutput(cli, 'sub/index.html');
+    const subInject = getInjectServiceWorker(subHtml);
+    expect(subInject).to.equal(
+      '<script type="module" inject-service-worker="" src="/_merged_assets/scripts/registerServiceWorker.js"></script>',
+    );
+    expect(getServiceWorkerUrl(subHtml)).to.equal('/service-worker.js');
+  });
+
+  // TODO: find a way to run these test either by forcing pathPrefix in start or skipping asset gathering for build or ...
+  it.skip('will add a script to inject the service worker', async () => {
+    cli = await executeBuild('e2e-fixtures/service-worker/pathPrefix.rocket.config.js');
+    const indexHtml = await readStartOutput(cli, 'index.html');
+    const indexInject = getInjectServiceWorker(indexHtml);
+    expect(indexInject).to.equal(
+      '<script type="module" inject-service-worker="" src="/my-prefix-folder/_merged_assets/scripts/registerServiceWorker.js"></script>',
+    );
+    expect(getServiceWorkerUrl(indexHtml)).to.equal('/my-prefix-folder/service-worker.js');
+    const subHtml = await readStartOutput(cli, 'sub/index.html');
+    const subInject = getInjectServiceWorker(subHtml);
+    expect(subInject).to.equal(
+      '<script type="module" inject-service-worker="" src="/my-prefix-folder/_merged_assets/scripts/registerServiceWorker.js"></script>',
+    );
+    expect(getServiceWorkerUrl(subHtml)).to.equal('/my-prefix-folder/service-worker.js');
+  });
+});

packages/cli/test-node/RocketCli.useCases.test.js

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

packages/cli/test-node/computed-config-fixtures/image-link/rocket.config.js

@@ -1,3 +1,20 @@
+import { adjustPluginOptions } from 'plugins-manager';
+
+function image(h, node) {
+  return h(node, 'img', {
+    src: node.url,
+    alt: node.alt,
+  });
+}
+
 /** @type {Partial<import("../../../types/main").RocketCliOptions>} */
-const config = {};
+const config = {
+  setupUnifiedPlugins: [
+    adjustPluginOptions('remark2rehype', {
+      handlers: {
+        image,
+      },
+    }),
+  ],
+};
 export default config;

packages/cli/test-node/e2e-fixtures/bootstrap/expected/_gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+## Rocket ignore files (need to be the full relative path to the folders)
+docs/_merged_data/
+docs/_merged_assets/
+docs/_merged_includes/

packages/cli/test-node/e2e-fixtures/bootstrap/expected/docs/.eleventyignore

@@ -0,0 +1,3 @@
+_assets
+_includes
+_data

packages/cli/test-node/e2e-fixtures/bootstrap/expected/docs/index.md

@@ -0,0 +1,3 @@
+# Welcome to Your Rocket Site
+
+Add your markdown content here.

packages/cli/test-node/e2e-fixtures/bootstrap/expected/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "scripts": {
+    "start": "rocket start",
+    "docs": "rocket build"
+  }
+}

packages/cli/test-node/e2e-fixtures/bootstrap/expected/rocket.config.js

@@ -0,0 +1,5 @@
+import { rocketLaunch } from '@rocket/launch';
+
+export default {
+  presets: [rocketLaunch()],
+};

packages/cli/test-node/e2e-fixtures/content/docs/image.md

@@ -0,0 +1,5 @@
+---
+layout: layout-raw
+---
+
+![My Image Alternative Text](./_assets/my-image.jpg 'My Image Description')