Version Packages

also adds code tabs and updates documentation

.eslintignore

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

README.md

@@ -19,6 +19,11 @@
       src="https://img.shields.io/badge/twitter-@modern_web_dev-1DA1F3?style=flat-square"
       alt="Follow @modern_web_dev on Twitter"
   /></a>
+  <a href="https://open.vscode.dev/modernweb-dev/rocket"
+    ><img
+      src="https://open.vscode.dev/badges/open-in-vscode.svg"
+      alt="Open in VS Code"
+  /></a>
 </p>
 
 <p align="center">

docs/.eleventyignore

@@ -0,0 +1 @@
+*.docs.md

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/style.css

@@ -1,3 +1,41 @@
+:not(rocket-navigation):not(:defined) {
+  opacity: 0;
+}
+
+rocket-navigation,
+header {
+  font-family: 'Montserrat', sans-serif;
+}
+
+code-tabs[collection="package-managers"] {
+  --code-tabs-icon-height: 18px;
+}
+
+.call-to-action {
+  background: var(--button-one) !important;
+  text-shadow: none !important;
+  border-radius: 5px !important;
+  padding-top: 15px !important;
+  padding-bottom: 15px !important;
+  border: none !important;
+}
+
+.call-to-action:hover,
+.call-to-action:focus,
+.call-to-action:active {
+  background: var(--button-one-hover) !important;
+}
+
+.call-to-action:nth-child(2) {
+  background: var(--button-two) !important;
+}
+
+.call-to-action:nth-child(2):hover,
+.call-to-action:nth-child(2):focus,
+.call-to-action:nth-child(2):active {
+  background: var(--button-two-hover) !important;
+}
+
 body[layout^='layout-home'] .markdown-body .call-to-action:nth-of-type(2) {
   --primary-color: #222;
   --primary-color-lighter: #333;
@@ -11,11 +49,3 @@ body[layout^='layout-home'] .markdown-body .call-to-action:nth-of-type(2) {
     transform: rotate(45deg);
   }
 }
-
-rocket-navigation {
-  font-family: 'Montserrat', sans-serif;
-}
-
-header {
-  font-family: 'Montserrat', sans-serif;
-}

docs/_assets/theme.css

@@ -0,0 +1,135 @@
+html {
+  --button-one-hover: #436eff;
+  --button-one: #2758ff;
+  --button-two-hover: #444;
+  --button-two: black;
+  --contrast-color-dark: #1d3557;
+  --contrast-color-light: #fff;
+  --footer-background: rgba(0, 0, 0, 0.02);
+  --header-color: white;
+  --markdown-link-color: #2758ff;
+  --markdown-syntax-background-color: #f9f9f9;
+  --markdown-table-row-odd-background-color: #efefef;
+  --owc-active-color: #2758ff;
+  --owc-hover-color: #436eff;
+  --page-background: white;
+  --primary-color-accent: #cee5f6;
+  --primary-color-darker: #1a5285;
+  --primary-color-lighter: #449ad7;
+  --primary-color: rgb(44, 62, 80);
+  --primary-lines-color: #ccc;
+  --primary-text-color: #2c3e50;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --header-color: #2f3136;
+    --footer-background: rgba(255, 255, 255, 0.1);
+    --page-background: #36393e;
+    --text-color: #eee;
+    --primary-text-color: #eee;
+    --primary-color: white;
+    --primary-color-lighter: #449ad7;
+    --primary-color-darker: #1a5285;
+    --primary-color-accent: #cee5f6;
+    --contrast-color-light: #fff;
+    --contrast-color-dark: #1d3557;
+    --primary-lines-color: #333;
+    --owc-active-color: #41ffb0;
+    --owc-hover-color: #6dffc2;
+    --button-one: #9b03fe;
+    --button-one-hover: #a724ff;
+    --button-two: black;
+    --button-two-hover: rgb(36, 36, 36);
+    --rocket-search-background-color: #4a4d52;
+    --rocket-search-highlight-color: #41ffb0;
+    --rocket-search-hover-background-color: #6b717a;
+    --rocket-search-fill-color: #fff;
+
+    /* Markdown */
+    --markdown-octicon-link: var(--primary-text-color);
+    --markdown-link-color: #41ffb0;
+    --markdown-divider-color: #e1e4e8;
+    --markdown-blockquote-border-color: #dfe2e5;
+    --markdown-blockquote-color: #90aac7;
+    --markdown-kbd-background-color: #fafbfc;
+    --markdown-kbd-border-color: #c6cbd1;
+    --markdown-kbd-border-bottom-color: #959da5;
+    --markdown-kbd-color: #444d56;
+    --markdown-heading-color-6: #6a737d;
+    --markdown-table-background-color: var(--markdown-syntax-background-color);
+    --markdown-table-row-odd-background-color: var(--markdown-kbd-color);
+    --markdown-table-border-color: transparent;
+    --markdown-code-background-color: rgba(27, 31, 35, 0.05);
+    --markdown-pre-background-color: rgb(49, 49, 49);
+
+    /* syntax */
+    --markdown-syntax-color: #f8f8f2;
+    --markdown-syntax-background-color: #2e3440;
+    --markdown-syntax-atrule-color: #88c0d0;
+    --markdown-syntax-attr-name-color: #a3be8c;
+    --markdown-syntax-attr-value-color: #88c0d0;
+    --markdown-syntax-builtin-color: #a3be8c;
+    --markdown-syntax-boolean-color: #81a1c1;
+    --markdown-syntax-class-name-color: #88c0d0;
+    --markdown-syntax-constant-color: #81a1c1;
+    --markdown-syntax-char-color: #a3be8c;
+    --markdown-syntax-deleted-color: #81a1c1;
+    --markdown-syntax-entity-color: #81a1c1;
+    --markdown-syntax-function-color: #88c0d0;
+    --markdown-syntax-inserted-color: #a3be8c;
+    --markdown-syntax-keyword-color: #81a1c1;
+    --markdown-syntax-number-color: #b48ead;
+    --markdown-syntax-operator-color: #81a1c1;
+    --markdown-syntax-property-color: #81a1c1;
+    --markdown-syntax-punctuation-color: #81a1c1;
+    --markdown-syntax-regex-color: #81a1c1;
+    --markdown-syntax-important-color: #81a1c1;
+    --markdown-syntax-selector-color: #a3be8c;
+    --markdown-syntax-symbol-color: #81a1c1;
+    --markdown-syntax-string-color: #a3be8c;
+    --markdown-syntax-tag-color: #81a1c1;
+    --markdown-syntax-url-color: #81a1c1;
+    --markdown-syntax-variable-color: #81a1c1;
+    --markdown-syntax-hotkey-selector-color: #d73a49;
+    --markdown-syntax-keyword-color: #22863a;
+    --markdown-syntax-background-color: rgb(27, 29, 35);
+    --markdown-syntax-atrule-color: rgb(198, 120, 221);
+    --markdown-syntax-attr-name-color: rgb(198, 120, 221);
+    --markdown-syntax-boolean-color: rgb(209, 154, 102);
+    --markdown-syntax-class-name-color: rgb(97, 175, 239);
+    --markdown-syntax-constant-color: rgb(220, 220, 170);
+    --markdown-syntax-entity-color: rgb(220, 220, 170);
+    --markdown-syntax-function-color: rgb(97, 175, 239);
+    --markdown-syntax-inserted-color: rgb(220, 220, 170);
+    --markdown-syntax-keyword-color: rgb(198, 120, 221);
+    --markdown-syntax-number-color: rgb(220, 220, 170);
+    --markdown-syntax-operator-color: rgb(220, 220, 170);
+    --markdown-syntax-property-color: rgb(220, 220, 170);
+    --markdown-syntax-punctuation-color: white;
+    --markdown-syntax-regex-color: rgb(209, 154, 102);
+    --markdown-syntax-selector-color: rgb(86, 156, 214);
+    --markdown-syntax-symbol-color: rgb(220, 220, 170);
+    --markdown-syntax-tag-color: rgb(86, 156, 214);
+    --markdown-syntax-url-color: rgb(220, 220, 170);
+    --markdown-syntax-variable-color: rgb(220, 220, 170);
+  }
+
+  .string {
+    color: rgb(152, 195, 121);
+  }
+
+  .comment {
+    color: #7d7d7d;
+  }
+
+  .language-css {
+    --markdown-syntax-string-color: #81a1c1;
+  }
+}
+
+body[layout='home'] .markdown-body .call-to-action:nth-of-type(2) {
+  --primary-color: #222;
+  --primary-color-lighter: #333;
+  --primary-color-darker: #000;
+}

docs/_includes/_joiningBlocks/head/45-stylesheets-custom.njk

@@ -0,0 +1 @@
+<link rel="stylesheet" href="{{ '/_assets/theme.css' | asset | url }}">

docs/docs/configuration/computed-config.md

@@ -1,4 +1,4 @@
-# Configuration >> Computed Config ||20
+# Configuration >> Computed Config || 20
 
 If you want to add data that depends on other data then you can do it via [Eleventy's computed data](https://www.11ty.dev/docs/data-computed/).
 
@@ -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>} */
+/** @type {import('@rocket/cli').RocketCliOptions} */
-const config = {
+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 {% raw %}{{ greeting }}{% endraw %} everywhere,
-Now you can use {{ greeting }} everywhere.
+and it will be correctly replaced with a Welcome and the page title.
-{% endraw %}
-And it will be correctly replaced with a Welcome and the page title.
 
 ## Default Available Configs
 

docs/docs/configuration/images.md

@@ -88,8 +88,10 @@ The default preset for regular markdown content is available as `responsive`.
 
 👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
-export default {
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   imagePresets: {
     responsive: {
       widths: [300, 820],
@@ -97,8 +99,9 @@ export default {
       sizes: '(min-width: 1024px) 820px, calc(100vw - 20px)',
     },
   },
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 ## Ignoring Images
 
@@ -148,8 +151,10 @@ For this example we want to also ignore `.jpeg` files.
 
 👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
-export default {
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   imagePresets: {
     responsive: {
       // ...
@@ -157,8 +162,9 @@ export default {
         src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
     },
   },
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 With that setting we get the following behavior
 
@@ -180,8 +186,10 @@ becomes
 
 You can add your own image preset like so
 
+<!-- prettier-ignore-start -->
 ```js
-export default {
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   imagePresets: {
     'my-image-preset': {
       widths: [30, 60],
@@ -189,8 +197,9 @@ export default {
       sizes: '(min-width: 1024px) 30px, 60px',
     },
   },
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 Once that `imagePreset` is defined you can use it by adding it to any `img` tag.
 
@@ -232,15 +241,18 @@ If you want to add `webp` (or replace `avif` with it) you can do so by setting t
 
 👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
-export default {
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   imagePresets: {
     responsive: {
       formats: ['avif', 'webp', 'jpeg'],
     },
   },
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 ## Default widths
 
@@ -262,16 +274,19 @@ If you want to add more widths you can add them to `widths`.
 
 👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
-export default {
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   imagePresets: {
     responsive: {
       widths: [300, 600, 900, 1200, 1640],
       sizes: '(min-width: 1024px) 820px, calc(100vw - 20px)',
     },
   },
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 <inline-notification type="tip">
 

docs/docs/configuration/overview.md

@@ -4,22 +4,27 @@ The configuration file is `rocket.config.js` or `rocket.config.mjs`.
 
 The config files consist of the following parts:
 
+<!-- prettier-ignore-start -->
 ```js
 import { rocketLaunch } from '@rocket/launch';
 
-export default {
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   presets: [rocketLaunch()],
   emptyOutputDir: true,
   pathPrefix: 'subfolder-only-for-build',
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 Rocket is primarily build around plugins for each of its systems.
 
 New plugins can be added and all default plugins can be adjusted or even removed by using the following functions.
 
+<!-- prettier-ignore-start -->
 ```js
-export default {
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   // add remark/unified plugin to the Markdown processing (e.g. enable special code blocks)
   setupUnifiedPlugins: [],
 
@@ -40,8 +45,9 @@ export default {
 
   // add a plugin to the cli (e.g. a new command like "rocket my-command")
   setupCliPlugins: [],
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 ## Adding Rollup Plugins
 
@@ -55,19 +61,19 @@ You can accomplish this with Rollup and dev server plugins. Make sure to add bot
 
 For these cases you can use `setupDevAndBuildPlugins`, which will automatically add the plugin for you to both Rollup and dev-server:
 
+<!-- prettier-ignore-start -->
 ```js
 import json from '@rollup/plugin-json';
 import { addPlugin } from 'plugins-manager';
 
-/** @type {Partial<import("@rocket/cli").RocketCliOptions>} */
+/** @type {import('@rocket/cli').RocketCliOptions} */
-const config = {
+export default ({
   setupDevAndBuildPlugins: [
     addPlugin({ name: 'json', plugin: json, location: 'top', options: { my: 'settings' } }),
   ],
-};
+});
-
-export default config;
 ```
+<!-- prettier-ignore-end -->
 
 This will add the Rollup plugin `json` with the id `json` at the top of the plugin list of Rollup and the dev server. It needs to be at the top so further plugins down the line can work with JSON imports.
 For the Dev Server the plugins are automatically wrapped by `@web/dev-server-rollup`. Note that [not all Rollup plugins](https://modern-web.dev/docs/dev-server/plugins/rollup/#compatibility-with-rollup-plugins) will work with the dev-server.
@@ -76,25 +82,28 @@ For the Dev Server the plugins are automatically wrapped by `@web/dev-server-rol
 
 All plugins which are either default or are added via a preset can still be adjusted by using `adjustPluginOptions`.
 
+<!-- prettier-ignore-start -->
 ```js
 import { adjustPluginOptions } from 'plugins-manager';
 
-/** @type {Partial<import("@rocket/cli").RocketCliOptions>} */
+/** @type {import('@rocket/cli').RocketCliOptions} */
-const config = {
+export default ({
   setupDevAndBuildPlugins: [adjustPluginOptions('json', { my: 'overwrite settings' })],
-};
+});
-
-export default config;
 ```
+<!-- prettier-ignore-end -->
 
 ## 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.
 
+<!-- prettier-ignore-start -->
 ```js
-export default {
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   async before11ty() {
     await copyDataFiles();
   },
-};
+});
 ```
+<!-- prettier-ignore-end -->

docs/docs/configuration/service-worker.md

@@ -12,11 +12,14 @@ Changing the service worker file name can be quite a hassle so you can adjust ge
 
 👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
-export default {
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   serviceWorkerName: 'my-service-worker-name.js',
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 ## Meet the Service Worker
 

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/preview.md

@@ -72,15 +72,18 @@ excludeFromSearch: true
 
 Once you have that you need to configure it for the story renderer by setting it in your `rocket.config.js`.
 
+<!-- prettier-ignore-start -->
 ```js
-export default {
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   setupUnifiedPlugins: [
     adjustPluginOptions('mdjsSetupCode', {
       simulationSettings: { simulatorUrl: '/simulator/' },
     }),
   ],
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 <inline-notification type="tip">
 

docs/docs/presets/blog.md

@@ -1,21 +1,36 @@
-# Presets >> Blog ||40
+# Presets >> Blog || 40
 
 Enable writing blog posts within your Rocket site.
 
 ## Installation
 
-```bash
+<code-tabs collection="package-managers" default-tab="npm" align="end">
+
+```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`
 
+<!-- prettier-ignore-start -->
 ```js
 import { rocketBlog } from '@rocket/blog';
 
-export default {
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   presets: [rocketBlog()],
-};
+});
 ```
+<!-- prettier-ignore-end -->

docs/docs/presets/joining-blocks.md

@@ -1,4 +1,4 @@
-# Presets >> Joining Blocks ||10
+# Presets >> Joining Blocks || 10
 
 The template system allows for a very granular control of how individual parts will be merged, overwritten or reorderd.
 
@@ -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
+👉 `_includes/_joiningBlocks/footer/10-first.njk`
-<!-- usedPreset/_includes/_joiningBlocks/footer/10-first.njk -->
-<p>first</p>
 
-<!-- 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,119 +0,0 @@
-# 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
-npm i @rocket/launch
-```
-
-👉 `rocket.config.mjs`
-
-```js
-import { rocketLaunch } from '@rocket/launch';
-
-export default {
-  presets: [rocketLaunch()],
-};
-```
-
-## Data
-
-Most data comes from `site.cjs`.
-
-There is also a specific `rocketLaunch.json`.
-
-The footer data comes from `footer.json`
-
-## 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
-
-````
-```js script
-import '@rocket/launch/inline-notification/inline-notification.js';
-```
-````
-
-### Tip
-
-<inline-notification type="tip">
-
-I am a tip
-
-</inline-notification>
-
-**Usage**
-
-```md
-<inline-notification type="tip">
-
-I am a tip
-
-</inline-notification>
-```
-
-### Modify the Title
-
-To override the title you can provide a property success.
-
-<inline-notification type="tip" title="success">
-
-I am a success message
-
-</inline-notification>
-
-**Usage**
-
-```md
-<inline-notification type="tip" title="success">
-
-I am a success message
-
-</inline-notification>
-```
-
-### Warning
-
-<inline-notification type="warning">
-
-I am a warning
-
-</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/launch/custom-elements.md

@@ -0,0 +1,7 @@
+---
+layout: layout-api
+package: '@rocket/launch'
+module: inline-notification/index.js
+---
+
+# Presets >> Launch >> Custom Elements || 20

docs/docs/presets/launch/index.md

@@ -0,0 +1,4 @@
+# Presets >> Launch || 20
+
+- [Preset](./preset/)
+- [Custom Elements](./custom-elements/)

docs/docs/presets/launch/preset.md

@@ -0,0 +1,145 @@
+---
+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 >> Preset || 10
+
+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
+
+Install `@rocket/launch` from the NPM repository using your favourite package manager.
+
+<code-tabs collection="package-managers" default-tab="npm" align="end">
+
+```bash tab npm
+npm i @rocket/launch
+```
+
+```bash tab yarn
+yarn add @rocket/launch
+```
+
+```bash tab pnpm
+pnpm add @rocket/launch
+```
+
+</code-tabs>
+
+## Usage
+
+👉 `rocket.config.js`
+
+<!-- prettier-ignore-start -->
+```js
+import { rocketLaunch } from '@rocket/launch';
+
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
+  presets: [rocketLaunch()],
+});
+```
+<!-- prettier-ignore-end -->
+
+## Data
+
+The launch preset configures [11ty data](https://www.11ty.dev/docs/data/) using a few overridable files:
+
+- `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
+
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
+```
+
+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 -->
+
+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.
+
+There are three varieties of `<inline-notification>`, "tip", "warning", and "danger"
+
+<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>
+
+<code-tabs id="inline-notifications" default-tab="tip">
+
+{%for alert in alerts%}
+
+<code-tab data-label="{{ alert.type }}" data-id="{{ alert.type }}" no-copy>
+
+```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
+
+The notification title defautls to it's type. You can write a custom title with the `title` attribute.
+
+<inline-notification type="tip" title="success">
+
+I am a success message
+
+</inline-notification>
+
+```md
+<inline-notification type="tip" title="success">
+
+I am a success message
+
+</inline-notification>
+```
+
+<inline-notification type="warning">
+
+The `title` attribute does not change the title for `<noscript>` users, so don't include any critical information in it.
+
+</inline-notification>

docs/docs/presets/search.md

@@ -1,19 +0,0 @@
-# Presets >> Search ||30
-
-Add a search for all your static content.
-
-## Installation
-
-```bash
-npm i @rocket/search
-```
-
-👉 `rocket.config.mjs`
-
-```js
-import { rocketSearch } from '@rocket/search';
-
-export default {
-  presets: [rocketSearch()],
-};
-```

docs/docs/presets/search/custom-elements.md

@@ -0,0 +1,9 @@
+---
+layout: layout-api
+package: '@rocket/search'
+modules:
+  - src/RocketSearch.js
+  - src/RocketSearchCombobox.js
+---
+
+# Presets >> Search >> Custom Elements || 20

docs/docs/presets/search/index.md

@@ -0,0 +1,4 @@
+# Presets >> Search || 10
+
+- [Preset](./preset/)
+- [Custom Elements](./custom-elements/)

docs/docs/presets/search/preset.md

@@ -0,0 +1,36 @@
+# Presets >> Search >> Preset || 10
+
+Add a search for all your static content.
+
+## Installation
+
+<code-tabs collection="package-managers" default-tab="npm" align="end">
+
+```bash tab npm
+npm i @rocket/search
+```
+
+```bash tab yarn
+yarn add @rocket/search
+```
+
+```bash tab pnpm
+pnpm add @rocket/search
+```
+
+</code-tabs>
+
+## Usage
+
+👉 `rocket.config.js`
+
+<!-- prettier-ignore-start -->
+```js
+import { rocketSearch } from '@rocket/search';
+
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
+  presets: [rocketSearch()],
+});
+```
+<!-- prettier-ignore-end -->

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/plugins-manager.md

@@ -7,12 +7,16 @@ This allows your users to adjust the options before actually applying the plugin
 
 Many plugin systems require you to either execute a plugin function like in `rollup`.
 
+<!-- prettier-ignore-start -->
 ```js
 import json from '@rollup/plugin-json';
-export default {
+
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   plugins: [json({ preferConst: true })],
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 or add it in a special way like in `eleventy`
 

docs/guides/configuration/getting-started.md

@@ -22,17 +22,17 @@ The Plugins Manager helps you register and execute your plugins across the vario
 
 If you want to add a plugin to the Markdown processing you can use `setupUnifiedPlugins`.
 
+<!-- prettier-ignore-start -->
 ```js
 import emoji from 'remark-emoji';
 import { addPlugin } from 'plugins-manager';
 
 /** @type {Partial<import('@rocket/cli').RocketCliOptions>} */
-const config = {
+export default ({
   setupUnifiedPlugins: [addPlugin({ location: 'markdown', name: 'emoji', plugin: emoji })],
-};
+});
-
-export default config;
 ```
+<!-- prettier-ignore-end -->
 
 For plugins that should handle the Markdown <abbr title="Abstract Syntax Tree">AST</abbr> you should use `addPlugin({ location: 'markdown', name: 'my-plugin', plugin: MyPlugin})`. <br>
 While for the rehype AST you should use `addPlugin({ location: 'remark2rehype', name: 'my-plugin', plugin: MyPlugin})`.

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

@@ -10,94 +10,160 @@ 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
-   mkdir my-project
-   cd my-project
-   npm init -y
-   ```
 
-2. Install dependencies
+```bash copy
+mkdir my-project
+cd my-project
+```
 
-   ```
+Then initialize a package.json file
-   npm install --save-dev @rocket/cli @rocket/launch
-   ```
 
-3. Add to your .gitignore
+<code-tabs collection="package-managers" default-tab="npm" align="end">
 
-   ```
+```bash tab npm
-   ## Rocket ignore files (need to be the full relative path to the folders)
+npm init -y
-   docs/_merged_data/
+```
-   docs/_merged_assets/
-   docs/_merged_includes/
-   ```
 
-<inline-notification type="danger">
+```bash tab yarn
+yarn init -y
+```
 
-You may be tempted to skip the step above, because you're not ready to commit to git yet!
+```bash tab pnpm
+pnpm init -y
+```
 
-Rocket uses the .gitignore file to manage its requirements. If you skip this step, Rocket will fail to deploy!
+</code-tabs>
+
+### Step 2. Install dependencies
+
+<code-tabs collection="package-managers" default-tab="npm" align="end">
+
+```bash tab npm
+npm install --save-dev @rocket/cli @rocket/launch
+```
+
+```bash tab yarn
+yarn add -D @rocket/cli @rocket/launch
+```
+
+```bash tab pnpm
+pnpm add -D @rocket/cli @rocket/launch
+```
+
+</code-tabs>
+
+### Step 3. Bootstrap the project
+
+<code-tabs collection="package-managers" default-tab="npm" align="end">
+
+```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">
-   import { rocketLaunch } from '@rocket/launch';
 
-   export default {
+<!-- prettier-ignore-start -->
-     presets: [rocketLaunch()],
+```js tab rocket.config.js
-   };
+import { rocketLaunch } from '@rocket/launch';
-   ```
 
-5. (optionally) Create a file `.eleventyignore` (this file will be needed once you start customizing presets)
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
+  presets: [rocketLaunch()],
+});
+```
+<!-- prettier-ignore-end -->
 
-   ```
+```md tab docs/index.md
-   node_modules/**
+# Welcome to Your Rocket Site
-   /docs/_assets
-   /docs/_includes
-   /docs/_data
-   ```
 
-<inline-notification type="warning" title="note">
+Add your markdown content here.
+```
 
-All further paths are relative to your project root (my-project in this case).
+<!-- prettier-ignore-start -->
 
-</inline-notification>
+```html tab docs/.eleventyignore
+_assets
+_includes
+_data
+```
+
+```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:
+## Startup
-
-👉 `package.json`
-
-Add `"start": "rocket start"` to your package.json
-
-```json
-"scripts": {
-  "start": "rocket start"
-}
-```
 
 Now you can launch your site locally with
 
-```bash
+<code-tabs collection="package-managers" default-tab="npm" align="end">
-npm run start
+
+```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 +173,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

@@ -1,4 +1,4 @@
-# First Pages >> Managing sidebar ||30
+# First Pages >> Managing sidebar || 30
 
 The sidebar will show all the content of the current section.
 
@@ -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,6 +46,7 @@ export const headlineConverter = () => html`
   </p>
 `;
 ```
+-->
 
 How it then works is very similar to https://www.11ty.dev/docs/plugins/navigation/
 

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

@@ -1,25 +1,49 @@
-# First Pages >> Use JavaScript ||40
+# 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/index.md

@@ -1 +1 @@
-# Go Live ||40
+# Go Live || 40

docs/guides/go-live/overview.md

@@ -1,4 +1,4 @@
-# Go Live >> Overview ||10
+# Go Live >> Overview || 10
 
 A few things are usually needed before going live "for real".
 
@@ -13,7 +13,7 @@ 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
@@ -32,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

@@ -1,4 +1,4 @@
-# Go Live >> Social Media ||20
+# Go Live >> Social Media || 20
 
 Having a nice preview image for social media can be very helpful.
 For that reason Rocket creates those automatically with the title, parent title, section and your logo.
@@ -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>} */
+/** @type {import('@rocket/cli').RocketCliOptions} */
-const config = {
+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`
+```js tab rocket.config.js
-
-{% raw %}
-
-```js
 import { adjustPluginOptions } from 'plugins-manager';
 
-/** @type {Partial<import("@rocket/cli").RocketCliOptions>} */
+/** @type {import('@rocket/cli').RocketCliOptions} */
-const config = {
+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/template.svg');
-        const svgBuffer = await fs.promises.readFile('/path/to/your/svg/file');
         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
+<!-- prettier-ignore-start -->
-const config = {
+```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
+<!-- prettier-ignore-start -->
-const config = {
+```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 >> 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/options.md

@@ -1,11 +0,0 @@
-# Presets >> Create your own > Options || 10
-
-Your preset can hook into the rocket lifecycle by specifying a function for `before11ty`. This function runs before 11ty calls it's write method. If it is an async function, Rocket will await it's promise.
-
-```js
-export default {
-  async before11ty() {
-    await copyDataFiles();
-  },
-};
-```

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

package.json

@@ -8,16 +8,18 @@
   },
   "type": "module",
   "scripts": {
+    "analyze": "run-s analyze:* format:*",
+    "analyze: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",
+    "build:site": "run-s analyze:* rocket:build",
     "changeset": "changeset",
     "debug": "web-test-runner --watch --config web-test-runner-chrome.config.mjs",
     "debug:firefox": "web-test-runner --watch --config web-test-runner-firefox.config.mjs",
     "debug:webkit": "web-test-runner --watch --config web-test-runner-webkit.config.mjs",
-    "format": "npm run format:eslint && npm run format:prettier",
+    "format": "run-s format:*",
     "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",
@@ -31,6 +33,7 @@
     "setup": "npm run setup:ts-configs && npm run build:packages",
     "setup:patches": "npx patch-package",
     "setup:ts-configs": "node scripts/generate-ts-configs.mjs",
+    "prestart": "yarn analyze",
     "start": "node packages/cli/src/cli.js start",
     "test": "yarn test:node && yarn test:web",
     "test:node": "mocha \"packages/*/test-node/**/*.test.{ts,js,mjs,cjs}\" --timeout 5000 --reporter dot --exit",
@@ -45,6 +48,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.12.0",
+    "@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",
@@ -59,11 +63,12 @@
     "@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.3",
     "chai": "^4.2.0",
     "concurrently": "^5.3.0",
     "copyfiles": "^2.4.1",
     "deepmerge": "^4.2.2",
-    "esbuild": "^0.8.31",
+    "esbuild": "^0.12.15",
     "eslint": "^7.17.0",
     "eslint-config-prettier": "^7.1.0",
     "hanbi": "^0.4.1",
@@ -78,6 +83,8 @@
     "puppeteer": "^9.0.0",
     "remark-emoji": "^2.1.0",
     "rimraf": "^3.0.2",
+    "rocket-preset-code-tabs": "^0.2.6",
+    "rocket-preset-custom-elements-manifest": "^0.1.7",
     "rollup": "^2.36.1",
     "rollup-plugin-terser": "^7.0.2",
     "sinon": "^9.2.3",

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.2"
+    "plugins-manager": "^0.2.4"
   }
 }

packages/cli/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @rocket/cli
 
+## 0.9.9
+
+### Patch Changes
+
+- adf0f1d: use img openEnd to insert responsive image
+
+## 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

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/cli",
-  "version": "0.9.6",
+  "version": "0.9.9",
   "publishConfig": {
     "access": "public"
   },
@@ -59,7 +59,7 @@
     "@11ty/eleventy-img": "^0.9.0",
     "@rocket/building-rollup": "^0.3.1",
     "@rocket/core": "^0.1.2",
-    "@rocket/eleventy-plugin-mdjs-unified": "^0.5.0",
+    "@rocket/eleventy-plugin-mdjs-unified": "^0.5.2",
     "@rocket/eleventy-rocket-nav": "^0.3.0",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
@@ -72,7 +72,7 @@
     "command-line-usage": "^6.1.1",
     "fs-extra": "^9.0.1",
     "micromatch": "^4.0.2",
-    "plugins-manager": "^0.2.2",
+    "plugins-manager": "^0.2.4",
     "slash": "^3.0.0",
     "utf8": "^3.0.0",
     "workbox-window": "^6.1.5"

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,6 +30,8 @@ export class RocketEleventy extends Eleventy {
    */
   constructor(input, output, cli) {
     super(input, output);
+    /** @type {*} */
+    this.eleventyFiles;
     this.__rocketCli = cli;
   }
 
@@ -46,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;
@@ -70,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' },
@@ -107,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;
@@ -139,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;
     }
@@ -148,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);
@@ -188,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/eleventy-plugins/insertResponsiveImages.cjs

@@ -33,7 +33,7 @@ function replaceBetween({ html, start, end, insert = '' }) {
   const i = start.line;
   const line = lines[i];
   const upToChange = line.slice(0, start.character);
-  const afterChange = line.slice(end.character - 4);
+  const afterChange = line.slice(end.character);
 
   lines[i] = `${upToChange}${insert}${afterChange}`;
   return lines.join('\n');
@@ -103,7 +103,8 @@ function getImages(html, { imagePresets }) {
     if (ev === SaxEventType.CloseTag) {
       const data = /** @type {Tag} */ (/** @type {any} */ (_data));
       if (data.name === 'img') {
-        const { openStart, closeEnd } = data;
+        // Img tag only has open tag.
+        const { openStart, openEnd } = data;
 
         const attributes = getAttributes(data);
         const presetName = getAttribute(data, 'rocket-image');
@@ -127,7 +128,7 @@ function getImages(html, { imagePresets }) {
               title,
               alt,
               openStart,
-              closeEnd,
+              openEnd,
             });
           }
         }
@@ -219,7 +220,7 @@ function updateHtml(html, changes) {
     newHtml = replaceBetween({
       html: newHtml,
       start: change.openStart,
-      end: change.closeEnd,
+      end: change.openEnd,
       insert: change.newHtml,
     });
   }

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/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';
@@ -59,7 +60,13 @@ export async function readOutput(
     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) {
@@ -114,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');
@@ -125,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.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', () => {

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

@@ -101,6 +101,52 @@ describe('RocketCli images', () => {
           '</p>',
         ].join('\n'),
       );
+
+      const tableHtml = await readStartOutput(cli, 'table/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+      expect(tableHtml).to.equal(
+        [
+          '<table>',
+          '  <thead>',
+          '    <tr>',
+          '      <th>Image</th>',
+          '    </tr>',
+          '  </thead>',
+          '  <tbody>',
+          '    <tr>',
+          '      <td>',
+          '        <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>',
+          '      </td>',
+          '    </tr>',
+          '  </tbody>',
+          '</table>',
+        ].join('\n'),
+      );
     });
 
     it('can configure more patterns to ignore', async () => {

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/images/docs/table.md

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

packages/cli/types/main.d.ts

@@ -1,36 +1,25 @@
 import { DevServerConfig } from '@web/dev-server';
 import { CheckHtmlLinksCliOptions } from 'check-html-links/dist-types/types/main';
-
+import { WatchOptions } from 'chokidar';
-export interface RocketPreset {
+import { ImagePreset, RocketPreset } from './preset';
-  path: string;
+export { ImagePreset, RocketPreset };
-
+import { Eleventy } from '@11ty/eleventy';
-  adjustImagePresets?: (preset: { [key: string]: ImagePreset }) => { [key: string]: ImagePreset };
-
-  before11ty?: () => void | Promise<void>;
-
-  // TODO: improve all setup functions
-  setupUnifiedPlugins?: function[];
-  setupDevAndBuildPlugins?: function[];
-  setupBuildPlugins?: function[];
-  setupDevPlugins?: function[];
-  setupCliPlugins?: function[];
-  setupEleventyPlugins?: function[];
-  setupEleventyComputedConfig?: function[];
-}
 
 interface RocketStartConfig {
   createSocialMediaImages?: boolean;
 }
 
-type ImageFormat = 'avif' | 'webp' | 'jpg' | 'jpeg' | 'png' | 'svg';
+type PresetKeys =
+  | 'before11ty'
+  | 'setupUnifiedPlugins'
+  | 'setupDevAndBuildPlugins'
+  | 'setupBuildPlugins'
+  | 'setupDevPlugins'
+  | 'setupCliPlugins'
+  | 'setupEleventyPlugins'
+  | 'setupEleventyComputedConfig';
 
-interface ImagePreset {
+export interface RocketCliOptions extends Pick<RocketPreset, PresetKeys> {
-  widths: number[];
-  formats: ImageFormat[];
-  sizes: string;
-}
-
-export interface RocketCliOptions {
   presets?: Array<RocketPreset>;
   pathPrefix?: string;
   serviceWorkerName?: string;
@@ -44,21 +33,12 @@ export interface RocketCliOptions {
     [key: string]: ImagePreset;
   };
 
-  before11ty?: () => void | Promise<void>;
+  chokidarConfig?: WatchOptions;
 
   checkLinks?: Partial<CheckHtmlLinksCliOptions>;
 
   start?: RocketStartConfig;
 
-  // TODO: improve all setup functions
-  setupUnifiedPlugins?: function[];
-  setupDevAndBuildPlugins?: function[];
-  setupBuildPlugins?: function[];
-  setupDevPlugins?: function[];
-  setupCliPlugins?: function[];
-  setupEleventyPlugins?: function[];
-  setupEleventyComputedConfig?: function[];
-
   // advanced
   devServer?: DevServerConfig;
   eleventy?: (eleventyConfig: any) => void; // TODO: improve
@@ -69,11 +49,30 @@ export interface RocketCliOptions {
   configFile?: string;
   outputDevDir?: string;
 
-  private _inputDirCwdRelative?: string;
+  _inputDirCwdRelative?: string;
-  private _presetPaths?: string[];
+  _presetPaths?: string[];
-  private __before11tyFunctions?: (() => void | Promise<void>)[];
+  __before11tyFunctions?: (() => void | Promise<void>)[];
 }
 
-export interface RocketPlugin {
+export type RocketPlugin = {
+  // what can we do, typescript itself types the constructor as `Function`
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  constructor: Function & { pluginName: string };
   commands: string[];
-}
+  setupCommand?(config?: RocketCliOptions): Required<RocketCliOptions>;
+  setup?(opts: { config: RocketCliOptions; argv: string[]; eleventy: Eleventy }): Promise<void>;
+  inspectRenderedHtml?(opts: {
+    html: string;
+    inputPath: string;
+    outputPath: string;
+    layout: string;
+    title: string;
+    url: string;
+    data: any;
+    eleventy: Eleventy;
+  }): Promise<void>;
+} & {
+  // later ts versions can do this
+  // [index: `${string}Command`]: () => void|Promise<void>;
+  [index: string]: () => void | Promise<void>;
+};

packages/cli/types/preset.d.ts

@@ -0,0 +1,29 @@
+import { AddPluginFn } from 'plugins-manager';
+
+type ImageFormat = 'avif' | 'webp' | 'jpg' | 'jpeg' | 'png' | 'svg';
+
+export interface ImagePreset {
+  widths: number[];
+  formats: ImageFormat[];
+  sizes: string;
+}
+
+type ImagePresetHook = (preset: { [key: string]: ImagePreset }) => { [key: string]: ImagePreset };
+
+export interface RocketPreset {
+  path: string;
+
+  adjustImagePresets?: ImagePresetHook;
+
+  /** Hook that runs before rocket starts 11ty. Can be sync or async */
+  before11ty?: () => void | Promise<void>;
+
+  // TODO: improve all setup functions
+  setupUnifiedPlugins?: AddPluginFn[];
+  setupDevAndBuildPlugins?: AddPluginFn[];
+  setupBuildPlugins?: AddPluginFn[];
+  setupDevPlugins?: AddPluginFn[];
+  setupCliPlugins?: AddPluginFn[];
+  setupEleventyPlugins?: AddPluginFn[];
+  setupEleventyComputedConfig?: AddPluginFn[];
+}

packages/eleventy-plugin-mdjs-unified/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @rocket/eleventy-plugin-mdjs-unified
 
+## 0.5.2
+
+### Patch Changes
+
+- 39f4fa7: Updates dependencies
+
+## 0.5.1
+
+### Patch Changes
+
+- 9978ea7: Improves typings for `addPlugin`
+- Updated dependencies [d91e46b]
+- Updated dependencies [9978ea7]
+  - @mdjs/core@0.8.1
+
 ## 0.5.0
 
 ### Minor Changes

packages/eleventy-plugin-mdjs-unified/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/eleventy-plugin-mdjs-unified",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,7 @@
     "mdjs"
   ],
   "dependencies": {
-    "@mdjs/core": "^0.8.0",
+    "@mdjs/core": "^0.8.2",
     "es-module-lexer": "^0.3.26",
     "unist-util-visit": "^2.0.3"
   },

packages/eleventy-plugin-mdjs-unified/types/code.d.ts

@@ -1,10 +1,10 @@
 import { MdjsProcessPlugin } from '@mdjs/core';
 import { Node } from 'unist';
 
-export const setupUnifiedPluginsFn: (plugins: MdjsProcessPlugin[]) => MdjsProcessPlugin[];
+export type SetupUnifiedPluginsFn = (plugins: MdjsProcessPlugin[]) => MdjsProcessPlugin[];
 
 export interface EleventyPluginMdjsUnified {
-  setupUnifiedPlugins?: setupUnifiedPluginsFn[];
+  setupUnifiedPlugins?: SetupUnifiedPluginsFn[];
 }
 
 export interface NodeChildren extends Node {

packages/launch/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @rocket/launch
 
+## 0.5.5
+
+### Patch Changes
+
+- 3d22fbb: Prevent styles from applying to lion components that are rendered in light dom
+
+## 0.5.4
+
+### Patch Changes
+
+- d91e46b: Add noscript styles which explicity show unregistered custom elements
+
+## 0.5.3
+
+### Patch Changes
+
+- b7d5cba: remove footer extra comma
+
 ## 0.5.2
 
 ### Patch Changes

packages/launch/README.head.md

@@ -0,0 +1,3 @@
+# Launch Preset for Rocket
+
+For docs please see our homepage [https://rocket.modern-web.dev/docs/presets/launch/](https://rocket.modern-web.dev/docs/presets/launch/).

packages/launch/README.md

@@ -1,3 +1,62 @@
 # Launch Preset for Rocket
 
 For docs please see our homepage [https://rocket.modern-web.dev/docs/presets/launch/](https://rocket.modern-web.dev/docs/presets/launch/).
+
+## `inline-notification/index.js`:
+
+### class: `InlineNotification`, `inline-notification`
+
+#### Superclass
+
+| Name       | Module | Package     |
+| ---------- | ------ | ----------- |
+| LitElement |        | lit-element |
+
+#### Fields
+
+| Name  | Privacy | Type                         | Default | Description | Inherited From |
+| ----- | ------- | ---------------------------- | ------- | ----------- | -------------- |
+| title | public  | `string`                     | `''`    |             |                |
+| type  | public  | `'tip'\|'warning'\|'danger'` | `'tip'` |             |                |
+
+#### Attributes
+
+| Name  | Field | Inherited From |
+| ----- | ----- | -------------- |
+| type  | type  |                |
+| title | title |                |
+
+#### CSS Properties
+
+| Name                                           | Default                    | Description |
+| ---------------------------------------------- | -------------------------- | ----------- |
+| --inline-notification-tip-background-color     | `rgba(221, 221, 221, 0.3)` |             |
+| --inline-notification-tip-border-color         | `#42b983`                  |             |
+| --inline-notification-warning-background-color | `rgba(255, 229, 100, 0.2)` |             |
+| --inline-notification-warning-border-color     | `#e7c000`                  |             |
+| --inline-notification-danger-background-color  | `rgba(192, 0, 0, 0.1)`     |             |
+| --inline-notification-danger-border-color      | `#c00`                     |             |
+| --inline-notification-warning-heading-color    | `#b29400`                  |             |
+| --inline-notification-danger-heading-color     | `#900`                     |             |
+
+#### CSS Parts
+
+| Name  | Description       |
+| ----- | ----------------- |
+| title | the title heading |
+
+<hr/>
+
+### Exports
+
+| Kind | Name               | Declaration        | Module                       | Package |
+| ---- | ------------------ | ------------------ | ---------------------------- | ------- |
+| js   | InlineNotification | InlineNotification | inline-notification/index.js |         |
+
+## `inline-notification/inline-notification.js`:
+
+### Exports
+
+| Kind                      | Name                | Declaration        | Module                        | Package |
+| ------------------------- | ------------------- | ------------------ | ----------------------------- | ------- |
+| custom-element-definition | inline-notification | InlineNotification | /inline-notification/index.js |         |

packages/launch/custom-elements-manifest.config.js

@@ -0,0 +1,13 @@
+import { readmePlugin } from 'cem-plugin-readme';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+export default {
+  globs: ['inline-notification/*.js'],
+  plugins: [
+    readmePlugin({
+      from: dirname(fileURLToPath(import.meta.url)),
+      header: 'README.head.md',
+    }),
+  ],
+};

packages/launch/custom-elements.json

@@ -0,0 +1,121 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "inline-notification/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "InlineNotification",
+          "cssProperties": [
+            {
+              "name": "--inline-notification-tip-background-color",
+              "default": "rgba(221, 221, 221, 0.3)"
+            },
+            {
+              "name": "--inline-notification-tip-border-color",
+              "default": "#42b983"
+            },
+            {
+              "name": "--inline-notification-warning-background-color",
+              "default": "rgba(255, 229, 100, 0.2)"
+            },
+            {
+              "name": "--inline-notification-warning-border-color",
+              "default": "#e7c000"
+            },
+            {
+              "name": "--inline-notification-danger-background-color",
+              "default": "rgba(192, 0, 0, 0.1)"
+            },
+            {
+              "name": "--inline-notification-danger-border-color",
+              "default": "#c00"
+            },
+            {
+              "name": "--inline-notification-warning-heading-color",
+              "default": "#b29400"
+            },
+            {
+              "name": "--inline-notification-danger-heading-color",
+              "default": "#900"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "the title heading",
+              "name": "title"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "privacy": "public",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "'tip'|'warning'|'danger'"
+              },
+              "default": "'tip'",
+              "privacy": "public",
+              "attribute": "type",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "fieldName": "type"
+            },
+            {
+              "name": "title",
+              "fieldName": "title"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit-element"
+          },
+          "tagName": "inline-notification",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "InlineNotification",
+          "declaration": {
+            "name": "InlineNotification",
+            "module": "inline-notification/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "inline-notification/inline-notification.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "inline-notification",
+          "declaration": {
+            "name": "InlineNotification",
+            "module": "/inline-notification/index.js"
+          }
+        }
+      ]
+    }
+  ]
+}

packages/launch/inline-notification/index.js

@@ -1,5 +1,17 @@
 import { LitElement, css, html } from 'lit-element';
 
+/**
+ * @element inline-notification
+ * @cssprop  [--inline-notification-tip-background-color=rgba(221, 221, 221, 0.3)]
+ * @cssprop  [--inline-notification-tip-border-color=#42b983]
+ * @cssprop  [--inline-notification-warning-background-color=rgba(255, 229, 100, 0.2)]
+ * @cssprop  [--inline-notification-warning-border-color=#e7c000]
+ * @cssprop  [--inline-notification-danger-background-color=rgba(192, 0, 0, 0.1)]
+ * @cssprop  [--inline-notification-danger-border-color=#c00]
+ * @cssprop  [--inline-notification-warning-heading-color=#b29400]
+ * @cssprop  [--inline-notification-danger-heading-color=#900]
+ * @csspart title - the title heading
+ */
 export class InlineNotification extends LitElement {
   static get properties() {
     return {
@@ -11,6 +23,7 @@ export class InlineNotification extends LitElement {
   constructor() {
     super();
     this.title = '';
+    /** @type {'tip'|'warning'|'danger'} */
     this.type = 'tip';
   }
 
@@ -64,7 +77,7 @@ export class InlineNotification extends LitElement {
 
   render() {
     return html`
-      <h3>${this.title ? this.title : this.type}</h3>
+      <h3 part="title">${this.title || this.type}</h3>
       <slot></slot>
     `;
   }

packages/launch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/launch",
-  "version": "0.5.2",
+  "version": "0.5.5",
   "publishConfig": {
     "access": "public"
   },
@@ -22,6 +22,7 @@
     "./inline-notification/inline-notification.js": "./inline-notification/inline-notification.js"
   },
   "scripts": {
+    "analyze": "cem analyze --litelement",
     "test": "mocha --timeout 5000 test-node/**/*.test.{js,cjs} test-node/*.test.{js,cjs}",
     "test:watch": "onchange 'src/**/*.{js,cjs}' 'test-node/**/*.{js,cjs}' -- npm test"
   },
@@ -37,5 +38,6 @@
   "dependencies": {
     "@rocket/drawer": "^0.1.3",
     "@rocket/navigation": "^0.2.1"
-  }
+  },
+  "customElements": "custom-elements.json"
 }

packages/launch/preset/_assets/_static/noscript.css

@@ -1 +1,56 @@
 /* override to add noscript styles */
+
+/* Make sure unregistered custom elements don't hide their contents */
+:not(:defined) {
+  opacity: 1 !important;
+}
+
+inline-notification {
+  padding: 0.1rem 1.5rem;
+  border-left-width: 0.5rem;
+  border-left-style: solid;
+  margin: 1rem 0;
+  display: block;
+  opacity: 1 !important;
+}
+
+inline-notification::before {
+  content: attr(type);
+  font-weight: 600;
+  font-size: 1.17em;
+  margin-top: 24px;
+  margin-bottom: 7px;
+  display: block;
+  text-transform: uppercase;
+}
+
+inline-notification[type='tip'] {
+  background-color: var(--inline-notification-tip-background-color, rgba(221, 221, 221, 0.3));
+  border-color: var(--inline-notification-tip-border-color, #42b983);
+}
+
+inline-notification[type='warning'] {
+  background-color:
+    var(
+      --inline-notification-warning-background-color,
+      rgba(255, 229, 100, 0.2)
+    );
+  border-color: var(--inline-notification-warning-border-color, #e7c000);
+}
+
+inline-notification[type='danger'] {
+  background-color: var(--inline-notification-danger-background-color, rgba(192, 0, 0, 0.1));
+  border-color: var(--inline-notification-danger-border-color, #c00);
+}
+
+inline-notification[type='warning']::before {
+  color: var(--inline-notification-warning-heading-color, #b29400);
+}
+
+inline-notification[type='danger']::before {
+  color: var(--inline-notification-danger-heading-color, #900);
+}
+
+inline-notification > p {
+  line-height: 1.7;
+}

packages/launch/preset/_assets/markdown.css

@@ -1,7 +1,6 @@
 @font-face {
   font-family: octicons-link;
-  src:
+  src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==)
-    url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==)
     format('woff');
 }
 
@@ -121,7 +120,7 @@
   overflow: visible;
 }
 
-.markdown-body [type='checkbox'] {
+.markdown-body input[type='checkbox'] {
   box-sizing: border-box;
   padding: 0;
 }

packages/launch/preset/_data/footer.json

@@ -18,7 +18,7 @@
       {
         "text": "Twitter",
         "href": "https://twitter.com/modern_web_dev"
-      },
+      }
     ]
   },
   {

packages/launch/test-node/fixtures/layout-home/rocket.config.js

@@ -1,6 +1,6 @@
 import { rocketLaunch } from '@rocket/launch';
 
-/** @type {Partial<import("@rocket/cli").RocketCliOptions>} */
+/** @type {import('@rocket/cli').RocketCliOptions} */
 const config = {
   presets: [rocketLaunch()],
 };

packages/launch/test-node/fixtures/layout-sidebar/rocket.config.js

@@ -1,6 +1,6 @@
 import { rocketLaunch } from '@rocket/launch';
 
-/** @type {Partial<import("@rocket/cli").RocketCliOptions>} */
+/** @type {import('@rocket/cli').RocketCliOptions} */
 const config = {
   presets: [rocketLaunch()],
 };

packages/mdjs-core/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 0.8.2
+
+### Patch Changes
+
+- a5661b8: Updates dependencies
+
+## 0.8.1
+
+### Patch Changes
+
+- d91e46b: update dependencies
+- 9978ea7: Improves typings for `addPlugin`
+- Updated dependencies [9978ea7]
+  - plugins-manager@0.2.3
+
 ## 0.8.0
 
 ### Minor Changes

packages/mdjs-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/core",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "publishConfig": {
     "access": "public"
   },
@@ -44,12 +44,12 @@
     "remark"
   ],
   "dependencies": {
-    "@mdjs/mdjs-preview": "^0.5.0",
+    "@mdjs/mdjs-preview": "^0.5.1",
     "@mdjs/mdjs-story": "^0.3.0",
     "@types/unist": "^2.0.3",
     "es-module-lexer": "^0.3.26",
     "github-markdown-css": "^4.0.0",
-    "plugins-manager": "^0.2.2",
+    "plugins-manager": "^0.2.4",
     "rehype-autolink-headings": "^5.0.1",
     "rehype-prism-template": "^0.4.1",
     "rehype-raw": "^5.0.0",

packages/mdjs-core/types/code.d.ts

@@ -1,5 +1,7 @@
 import unified from 'unified';
 
+import { MetaPlugin } from 'plugins-manager';
+
 export type StoryTypes = 'js' | 'html';
 
 export interface MarkdownResult {
@@ -29,8 +31,4 @@ export interface ParseResult {
   };
 }
 
-export interface MdjsProcessPlugin {
+export type MdjsProcessPlugin = MetaPlugin<unified.Plugin, unified.Settings>;
-  name: string;
-  plugin: unified.Plugin;
-  options?: unified.Settings;
-}

packages/mdjs-preview/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mdjs/mdjs-preview
 
+## 0.5.1
+
+### Patch Changes
+
+- fbcedde: Get a scoped registry for the internal accordion element to no longer pollute the global registry with a `lion-accordion` element.
+
 ## 0.5.0
 
 ### Minor Changes

packages/mdjs-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/mdjs-preview",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,8 @@
     "src"
   ],
   "dependencies": {
-    "@lion/accordion": "^0.4.2",
+    "@lion/accordion": "^0.6.1",
+    "@open-wc/scoped-elements": "^2.0.0-next.3",
     "lit": "^2.0.0-rc.2"
   },
   "types": "dist-types/index.d.ts"

packages/mdjs-preview/src/MdJsPreview.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css, nothing, render } from 'lit';
-import '@lion/accordion/define';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { LionAccordion } from '@lion/accordion';
 
 import {
   subscribe,
@@ -22,7 +23,13 @@ import { addResizeHandler } from './resizeHandler.js';
  * @element mdjs-preview
  * @prop {StoryFn} [story=(() => TemplateResult)] Function that returns the story
  */
-export class MdJsPreview extends LitElement {
+export class MdJsPreview extends ScopedElementsMixin(LitElement) {
+  static get scopedElements() {
+    return {
+      'lion-accordion': LionAccordion,
+    };
+  }
+
   static get properties() {
     return {
       story: {

packages/plugins-manager/CHANGELOG.md

@@ -1,5 +1,17 @@
 # plugins-manager
 
+## 0.2.4
+
+### Patch Changes
+
+- 61bb700: Fix types
+
+## 0.2.3
+
+### Patch Changes
+
+- 9978ea7: Improves typings for `addPlugin`
+
 ## 0.2.2
 
 ### Patch Changes

packages/plugins-manager/index.js

@@ -1,4 +1,6 @@
 /** @typedef {import('./types/main').MetaPlugin} MetaPlugin */
+/** @typedef {import('./types/main').AddPluginFn} AddPluginFn */
+/** @typedef {import('./types/main').AddPluginType} AddPluginType */
 
 export { addPlugin } from './src/addPlugin.js';
 export { adjustPluginOptions } from './src/adjustPluginOptions.js';

packages/plugins-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugins-manager",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "publishConfig": {
     "access": "public"
   },

packages/plugins-manager/src/addPlugin.js

@@ -1,20 +1,17 @@
 /** @typedef {import('../types/main').MetaPlugin} MetaPlugin */
 
 /**
- * @param {object} options
+ * @template {Function} T
- * @param {string} options.name
+ * @param {import('../types/main').AddPluginOptions<T>} metaPluginAndOptions
- * @param {any} options.plugin
- * @param {any} [options.options]
- * @param {string} [options.how]
- * @param {string} [options.location]
  */
-export function addPlugin({
+export function addPlugin(metaPluginAndOptions) {
-  name,
+  const {
-  plugin,
+    name,
-  options = undefined,
+    plugin,
-  how = 'after',
+    options = undefined,
-  location = 'bottom',
+    how = 'after',
-}) {
+    location = 'bottom',
+  } = metaPluginAndOptions;
   /**
    * @param {MetaPlugin[]} plugins
    */

packages/plugins-manager/types/main.d.ts

@@ -1,9 +1,24 @@
-export interface MetaPlugin {
+type AnyFn = (...args: any[]) => any;
+
+export interface MetaPlugin<F = AnyFn> {
   name: string;
-  plugin: any;
+  plugin: F extends (options?: infer O) => unknown ? F : any;
-  options?: any;
+  options?: /* prettier-ignore */ (
+      F extends (eleventyConfig: any, options?: infer O) => void ? O
+    : F extends (options: infer O) => unknown ? O
+    : any
+  );
 }
 
 export interface MetaPluginWrapable extends MetaPlugin {
   __noWrap?: boolean;
 }
+
+export type AddPluginOptions<T> = MetaPlugin<T> & {
+  how?: 'after' | 'before' | 'fixed';
+  location?: 'top' | 'bottom' | string;
+};
+
+export type AddPluginFn = (plugins: MetaPlugin[]) => MetaPlugin[];
+
+export type AddPluginType = <F>(metaPluginAndOptions: AddPluginOptions<F>) => AddPluginFn;

packages/search/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rocket/search
 
+## 0.4.1
+
+### Patch Changes
+
+- a5661b8: Updates dependencies
+
 ## 0.4.0
 
 ### Minor Changes

packages/search/README.head.md

@@ -0,0 +1,5 @@
+# Rocket Search
+
+Add a search for all your static content.
+
+For docs please see our homepage [https://rocket.modern-web.dev/docs/presets/search/](https://rocket.modern-web.dev/docs/presets/search/).

packages/search/README.md

@@ -3,3 +3,179 @@
 Add a search for all your static content.
 
 For docs please see our homepage [https://rocket.modern-web.dev/docs/presets/search/](https://rocket.modern-web.dev/docs/presets/search/).
+
+## `src/RocketSearch.js`:
+
+### class: `RocketSearch`, `rocket-search`
+
+#### Superclass
+
+| Name       | Module | Package    |
+| ---------- | ------ | ---------- |
+| LitElement |        | @lion/core |
+
+#### Mixins
+
+| Name                | Module | Package                  |
+| ------------------- | ------ | ------------------------ |
+| ScopedElementsMixin |        | @open-wc/scoped-elements |
+
+#### Fields
+
+| Name           | Privacy | Type                         | Default              | Description | Inherited From |
+| -------------- | ------- | ---------------------------- | -------------------- | ----------- | -------------- |
+| scopedElements |         |                              |                      |             |                |
+| combobox       |         | `RocketSearchCombobox\|null` |                      |             |                |
+| jsonUrl        | public  | `string`                     | `''`                 |             |                |
+| search         | public  | `string`                     | `''`                 |             |                |
+| maxResults     | public  | `number`                     | `10`                 |             |                |
+| noResultsText  | public  | `string`                     | `'No results found'` |             |                |
+| results        | public  | `RocketSearchResult[]`       | `[]`                 |             |                |
+| miniSearch     |         | `MiniSearch\|null`           | `null`               |             |                |
+
+#### Methods
+
+| Name        | Privacy | Description                                                               | Parameters | Return          | Inherited From |
+| ----------- | ------- | ------------------------------------------------------------------------- | ---------- | --------------- | -------------- |
+| setupSearch |         | Fetches the search index at `this.jsonUrl` and sets up the search engine. |            | `Promise<void>` |                |
+
+#### Attributes
+
+| Name          | Field         | Inherited From |
+| ------------- | ------------- | -------------- |
+| json-url      | jsonUrl       |                |
+| search        | search        |                |
+| results       | results       |                |
+| max-results   | maxResults    |                |
+| noResultsText | noResultsText |                |
+
+#### CSS Properties
+
+| Name                                | Default   | Description                           |
+| ----------------------------------- | --------- | ------------------------------------- |
+| --rocket-search-background-color    | `#fff`    | Search results background colour      |
+| --rocket-search-caret-color         | `initial` | Search input caret colour             |
+| --rocket-search-input-border-color  | `#dfe1e5` | Search input border colour            |
+| --rocket-search-input-border-radius | `24px`    | Search input border radius            |
+| --rocket-search-fill-color          | `#000`    | Search Icon Color                     |
+| --rocket-search-highlight-color     | `#6c63ff` | Highlighted search result text colour |
+
+#### CSS Parts
+
+| Name          | Description          |
+| ------------- | -------------------- |
+| search-option | search result        |
+| empty         | empty search results |
+
+<hr/>
+
+### Exports
+
+| Kind | Name         | Declaration  | Module              | Package |
+| ---- | ------------ | ------------ | ------------------- | ------- |
+| js   | RocketSearch | RocketSearch | src/RocketSearch.js |         |
+
+## `src/RocketSearchCombobox.js`:
+
+### class: `RocketSearchCombobox`, `rocket-search-combobox`
+
+#### Superclass
+
+| Name         | Module | Package        |
+| ------------ | ------ | -------------- |
+| LionCombobox |        | @lion/combobox |
+
+#### Fields
+
+| Name                     | Privacy | Type                    | Default  | Description | Inherited From |
+| ------------------------ | ------- | ----------------------- | -------- | ----------- | -------------- |
+| slots                    |         | `LionCombobox['slots']` |          |             |                |
+| autocomplete             |         | `'none'`                | `'none'` |             |                |
+| selectionFollowsFocus    |         | `boolean`               | `false`  |             |                |
+| rotateKeyboardNavigation |         | `boolean`               | `false`  |             |                |
+| showInput                |         | `boolean`               | `false`  |             |                |
+
+#### Methods
+
+| Name  | Privacy | Description | Parameters | Return | Inherited From |
+| ----- | ------- | ----------- | ---------- | ------ | -------------- |
+| focus |         |             |            |        |                |
+
+#### CSS Properties
+
+| Name                                       | Default   | Description |
+| ------------------------------------------ | --------- | ----------- |
+| --rocket-search-fill-color                 | `#000`    |             |
+| --rocket-search-background-color           | `#fff`    |             |
+| --rocket-search-input-overlay-border-color | `#ccc`    |             |
+| --rocket-search-input-border-color         | `#dfe1e5` |             |
+| --rocket-search-input-border-radius        | `24px`    |             |
+
+#### Slots
+
+| Name    | Description |
+| ------- | ----------- |
+| prefix  |             |
+| label   |             |
+| listbox |             |
+| input   |             |
+
+<details><summary>Private API</summary>
+
+#### Methods
+
+| Name                  | Privacy | Description | Parameters | Return | Inherited From |
+| --------------------- | ------- | ----------- | ---------- | ------ | -------------- |
+| \_connectSlotMixin    | private |             |            |        |                |
+| \_defineOverlayConfig | private |             |            |        |                |
+
+</details>
+
+<hr/>
+
+### Exports
+
+| Kind                      | Name                   | Declaration          | Module                      | Package |
+| ------------------------- | ---------------------- | -------------------- | --------------------------- | ------- |
+| js                        | RocketSearchCombobox   | RocketSearchCombobox | src/RocketSearchCombobox.js |         |
+| custom-element-definition | rocket-search-combobox | RocketSearchCombobox | src/RocketSearchCombobox.js |         |
+
+## `src/RocketSearchOption.js`:
+
+### class: `RocketSearchOption`
+
+#### Superclass
+
+| Name       | Module | Package       |
+| ---------- | ------ | ------------- |
+| LionOption |        | @lion/listbox |
+
+#### Mixins
+
+| Name      | Module            | Package |
+| --------- | ----------------- | ------- |
+| LinkMixin | /src/LinkMixin.js |         |
+
+#### Fields
+
+| Name    | Privacy | Type     | Default | Description | Inherited From |
+| ------- | ------- | -------- | ------- | ----------- | -------------- |
+| title   | public  | `string` | `''`    |             |                |
+| text    | public  | `string` | `''`    |             |                |
+| section | public  | `string` | `''`    |             |                |
+
+#### Attributes
+
+| Name    | Field   | Inherited From |
+| ------- | ------- | -------------- |
+| title   | title   |                |
+| text    | text    |                |
+| section | section |                |
+
+<hr/>
+
+### Exports
+
+| Kind | Name               | Declaration        | Module                    | Package |
+| ---- | ------------------ | ------------------ | ------------------------- | ------- |
+| js   | RocketSearchOption | RocketSearchOption | src/RocketSearchOption.js |         |

packages/search/custom-elements-manifest.config.js

@@ -0,0 +1,13 @@
+import { readmePlugin } from 'cem-plugin-readme';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+export default {
+  globs: ['src/(RocketSearch|RocketSearchCombobox|RocketSearchOption).js'],
+  plugins: [
+    readmePlugin({
+      from: dirname(fileURLToPath(import.meta.url)),
+      header: 'README.head.md',
+    }),
+  ],
+};

packages/search/custom-elements.json

@@ -0,0 +1,388 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/RocketSearch.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "RocketSearch",
+          "cssProperties": [
+            {
+              "description": "Search results background colour",
+              "name": "--rocket-search-background-color",
+              "default": "#fff"
+            },
+            {
+              "description": "Search input caret colour",
+              "name": "--rocket-search-caret-color",
+              "default": "initial"
+            },
+            {
+              "description": "Search input border colour",
+              "name": "--rocket-search-input-border-color",
+              "default": "#dfe1e5"
+            },
+            {
+              "description": "Search input border radius",
+              "name": "--rocket-search-input-border-radius",
+              "default": "24px"
+            },
+            {
+              "description": "Search Icon Color",
+              "name": "--rocket-search-fill-color",
+              "default": "#000"
+            },
+            {
+              "description": "Highlighted search result text colour",
+              "name": "--rocket-search-highlight-color",
+              "default": "#6c63ff"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "search result",
+              "name": "search-option"
+            },
+            {
+              "description": "empty search results",
+              "name": "empty"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "scopedElements",
+              "static": true
+            },
+            {
+              "kind": "method",
+              "name": "setupSearch",
+              "description": "Fetches the search index at `this.jsonUrl` and sets up the search engine.",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "combobox",
+              "type": {
+                "text": "RocketSearchCombobox|null"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "jsonUrl",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "privacy": "public",
+              "attribute": "json-url"
+            },
+            {
+              "kind": "field",
+              "name": "search",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "privacy": "public",
+              "attribute": "search"
+            },
+            {
+              "kind": "field",
+              "name": "maxResults",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "privacy": "public",
+              "attribute": "max-results"
+            },
+            {
+              "kind": "field",
+              "name": "noResultsText",
+              "type": {
+                "text": "string"
+              },
+              "default": "'No results found'",
+              "privacy": "public",
+              "attribute": "noResultsText"
+            },
+            {
+              "kind": "field",
+              "name": "results",
+              "type": {
+                "text": "RocketSearchResult[]"
+              },
+              "default": "[]",
+              "privacy": "public",
+              "attribute": "results"
+            },
+            {
+              "kind": "field",
+              "name": "miniSearch",
+              "type": {
+                "text": "MiniSearch|null"
+              },
+              "default": "null"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "json-url",
+              "fieldName": "jsonUrl"
+            },
+            {
+              "name": "search",
+              "fieldName": "search"
+            },
+            {
+              "name": "results",
+              "fieldName": "results"
+            },
+            {
+              "name": "max-results",
+              "fieldName": "maxResults"
+            },
+            {
+              "name": "noResultsText",
+              "fieldName": "noResultsText"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ScopedElementsMixin",
+              "package": "@open-wc/scoped-elements"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "@lion/core"
+          },
+          "tagName": "rocket-search",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RocketSearch",
+          "declaration": {
+            "name": "RocketSearch",
+            "module": "src/RocketSearch.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/RocketSearchCombobox.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "RocketSearchCombobox",
+          "cssProperties": [
+            {
+              "name": "--rocket-search-fill-color",
+              "default": "#000"
+            },
+            {
+              "name": "--rocket-search-background-color",
+              "default": "#fff"
+            },
+            {
+              "name": "--rocket-search-input-overlay-border-color",
+              "default": "#ccc"
+            },
+            {
+              "name": "--rocket-search-input-border-color",
+              "default": "#dfe1e5"
+            },
+            {
+              "name": "--rocket-search-input-border-radius",
+              "default": "24px"
+            }
+          ],
+          "slots": [
+            {
+              "name": "prefix"
+            },
+            {
+              "name": "label"
+            },
+            {
+              "name": "listbox"
+            },
+            {
+              "name": "input"
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "_connectSlotMixin",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_defineOverlayConfig",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "slots",
+              "type": {
+                "text": "LionCombobox['slots']"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus"
+            },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "'none'"
+              },
+              "default": "'none'"
+            },
+            {
+              "kind": "field",
+              "name": "selectionFollowsFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "rotateKeyboardNavigation",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "showInput",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "superclass": {
+            "name": "LionCombobox",
+            "package": "@lion/combobox"
+          },
+          "tagName": "rocket-search-combobox",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RocketSearchCombobox",
+          "declaration": {
+            "name": "RocketSearchCombobox",
+            "module": "src/RocketSearchCombobox.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "rocket-search-combobox",
+          "declaration": {
+            "name": "RocketSearchCombobox",
+            "module": "src/RocketSearchCombobox.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/RocketSearchOption.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "RocketSearchOption",
+          "members": [
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "privacy": "public",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "privacy": "public",
+              "attribute": "text"
+            },
+            {
+              "kind": "field",
+              "name": "section",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "privacy": "public",
+              "attribute": "section"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
+              "fieldName": "title"
+            },
+            {
+              "name": "text",
+              "fieldName": "text"
+            },
+            {
+              "name": "section",
+              "fieldName": "section"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "LinkMixin",
+              "module": "/src/LinkMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LionOption",
+            "package": "@lion/listbox"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RocketSearchOption",
+          "declaration": {
+            "name": "RocketSearchOption",
+            "module": "src/RocketSearchOption.js"
+          }
+        }
+      ]
+    }
+  ]
+}

packages/search/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/search",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "publishConfig": {
     "access": "public"
   },
@@ -22,6 +22,7 @@
     "./rocket-search.js": "./rocket-search.js"
   },
   "scripts": {
+    "analyze": "cem analyze --litelement",
     "debug": "cd ../../ && npm run debug -- --group search",
     "test": "npm run test:node && npm run test:web",
     "test:node": "mocha test-node/**/*.test.js test-node/*.test.js",
@@ -47,7 +48,8 @@
     "@open-wc/scoped-elements": "^2.0.0-next.3",
     "chalk": "^4.0.0",
     "minisearch": "^3.0.2",
-    "plugins-manager": "^0.2.2",
+    "plugins-manager": "^0.2.4",
     "sax-wasm": "^2.0.0"
-  }
+  },
+  "customElements": "custom-elements.json"
 }

packages/search/preset/_assets/_static/search/noscript.css

@@ -0,0 +1,3 @@
+rocket-search {
+  display: none;
+}

packages/search/preset/_includes/_joiningBlocks/head/43-search-noscript.njk

@@ -0,0 +1 @@
+<noscript><link rel="stylesheet" href="{{ '/_assets/_static/search/noscript.css' | asset | url }}"></noscript>