Version Packages

also adds code tabs and updates documentation

.eslintignore

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

docs/_assets/_static/logos/npm.svg

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

docs/_assets/_static/logos/pnpm.svg

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

docs/_assets/_static/logos/yarn.svg

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

docs/_assets/style.css

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

docs/_data/site.cjs

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

docs/_includes/_joiningBlocks/head/site.njk

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

docs/docs/configuration/computed-config.md

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

@@ -100,6 +100,82 @@ export default {
 };
 ```
 
+## Ignoring Images
+
+Files ending in `.svg` or that include `rocket-ignore.` will remain untouched.
+
+For example
+
+```md
+![Logo stays svg](logo.svg)
+![Ignore by file name](my-image.rocket-unresponsive.jpg)
+![My Image Alternative Text](my-image.jpeg)
+```
+
+becomes
+
+```html
+<img src="logo.svg" alt="Logo stays svg" rocket-image="responsive" />
+<img src="my-image.rocket-unresponsive.jpg" alt="Ignore by file name" rocket-image="responsive" />
+<picture>[...] </picture>
+```
+
+### Adjusting ignore function
+
+The default ignore function looks like this
+
+```js
+/**
+ * The default responsive ignore function will ignore files
+ * - ending in `.svg`
+ * - containing `rocket-unresponsive.`
+ *
+ * @param {object} opts
+ * @param {string} opts.src
+ * @param {string} opts.title
+ * @param {string} opts.alt
+ * @param {{name: string, value: string}[]} opts.attributes
+ * @returns {boolean}
+ */
+function ignore({ src }) {
+  return src.endsWith('svg') || src.includes('rocket-unresponsive.');
+}
+```
+
+and you can adjust it by setting it via the `imagePreset`.
+
+For this example we want to also ignore `.jpeg` files.
+
+👉 `rocket.config.js`
+
+```js
+export default {
+  imagePresets: {
+    responsive: {
+      // ...
+      ignore: ({ src }) =>
+        src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
+    },
+  },
+};
+```
+
+With that setting we get the following behavior
+
+```md
+![Logo stays svg](logo.svg)
+![Ignore by file name](my-image.rocket-unresponsive.jpg)
+![My Image Alternative Text](my-image.jpeg)
+```
+
+becomes
+
+```html
+<img src="logo.svg" alt="Logo stays svg" rocket-image="responsive" />
+<img src="my-image.rocket-unresponsive.jpg" alt="Ignore by file name" rocket-image="responsive" />
+<img src="my-image.jpeg" alt="My Image Alternative Text" rocket-image="responsive" />
+```
+
 ## Defining your own presets
 
 You can add your own image preset like so

docs/docs/configuration/overview.md

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

docs/docs/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/presets/blog.md

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

docs/docs/presets/joining-blocks.md

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

docs/docs/presets/search.md

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

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

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

docs/guides/configuration/getting-started.md

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

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

@@ -10,94 +10,157 @@ 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">
 
-   ```
+```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">
+
+```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">
+
+```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 {
+```js tab rocket.config.js
-     presets: [rocketLaunch()],
+import { rocketLaunch } from '@rocket/launch';
-   };
-   ```
 
-5. (optionally) Create a file `.eleventyignore` (this file will be needed once you start customizing presets)
+export default {
+  presets: [rocketLaunch()],
+};
+```
 
-   ```
+```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">
-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 +170,16 @@ It can be helpful to take an inventory, before we start, to separate basic setup
 - We built the project with basic npm commands
 - Added a couple required files manually
 - Adjusted package.json
-- **doc/index.md** to seed the content
+- **docs/index.md** to seed the content
 - Launches with `npm start`
 
 That's all it takes to get a new super-fast and powerful site, complete with a service worker, default styling, navigation, and ready to deploy as a plain old static files.
 
+## Next Steps
+
+- [Adding Pages](../adding-pages/)
+- [Using Presets](../../presets/getting-started/)
+
 ```js script
 import '@rocket/launch/inline-notification/inline-notification.js';
 ```

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

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

docs/guides/go-live/social-media.md

@@ -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/overriding.md

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

docs/guides/presets/using-templates.md

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

package.json

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

packages/cli/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @rocket/cli
 
+## 0.9.7
+
+### Patch Changes
+
+- d91e46b: Add `bootstrap` command
+- 9978ea7: Improves typings for `addPlugin`
+- Updated dependencies [9978ea7]
+  - @rocket/eleventy-plugin-mdjs-unified@0.5.1
+  - plugins-manager@0.2.3
+
+## 0.9.6
+
+### Patch Changes
+
+- bf99541: Adjust copy logic to
+
+  1. for `_assets/_static` copy over everything
+  2. for all other paths copy over everything except `*.html` and `*.md`
+
+- 579e8e7: Unordered joiningBlocks are now considered with the order number `10 000` and will generally be at the bottom.
+  You can use numbers `> 10 000` to place files even after unordered joiningBlocks.
+
+## 0.9.5
+
+### Patch Changes
+
+- 1b9559f: Adds `before11ty` hook to config and presets
+
+## 0.9.4
+
+### Patch Changes
+
+- 2b5c61d: Allow configuring the imagePreset ignore rules via the option `ignore`
+
+  ```js
+  export default {
+    imagePresets: {
+      responsive: {
+        // ...
+        ignore: ({ src }) =>
+          src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
+      },
+    },
+  };
+  ```
+
+- 2b5c61d: Do not generate responsive images for files ending in `.svg` or that include `rocket-ignore.`
+- ce0b00e: don't transform external images
+- 3b1a0cf: Allow to configure check-html-links
+
+  ```js
+  export default {
+    checkLinks: {
+      /* ... */
+    },
+  };
+  ```
+
+## 0.9.3
+
+### Patch Changes
+
+- 795a361: The server worker url should respect a set pathPrefix.
+
+## 0.9.2
+
+### Patch Changes
+
+- 5330740: When replacing images with responsive picture tags do this from the bottom up so the initial dom parsing locations still hold true.
+
 ## 0.9.1
 
 ### Patch Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/cli",
-  "version": "0.9.1",
+  "version": "0.9.7",
   "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.1",
     "@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.3",
     "slash": "^3.0.0",
     "utf8": "^3.0.0",
     "workbox-window": "^6.1.5"

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

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

packages/cli/src/RocketBuild.js

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

packages/cli/src/RocketCli.js

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

packages/cli/src/RocketLint.js

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

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

@@ -83,10 +83,20 @@ function getAttributes(data) {
 //   return classString ? classString.split(' ') : [];
 // }
 
+/**
+ *
+ * @param src {string} image src attribute value.
+ * @returns {boolean} true if src starts with https://, http:// or //
+ */
+
+function isExternalSrc(src) {
+  return /^(?:https?:)?\/\//.test(src);
+}
+
 /**
  * @param {string} html
  */
-function getImages(html) {
+function getImages(html, { imagePresets }) {
   /** @type {Heading[]} */
   const images = [];
   parser.eventHandler = (ev, _data) => {
@@ -100,16 +110,26 @@ function getImages(html) {
         const src = getAttribute(data, 'src');
         const title = getAttribute(data, 'title');
         const alt = getAttribute(data, 'alt');
+
         if (presetName) {
-          images.push({
+          const presetSettings = imagePresets[presetName];
-            presetName,
+          if (!presetSettings) {
-            attributes,
+            throw new Error(`Could not find imagePresets: { ${presetName}: {} }`);
-            src,
+          }
-            title,
+          const { ignore } = presetSettings;
-            alt,
+          const ignoreFn = typeof ignore === 'function' ? ignore : () => false;
-            openStart,
+
-            closeEnd,
+          if (!isExternalSrc(src) && !ignoreFn({ src, title, alt, attributes })) {
-          });
+            images.push({
+              presetName,
+              attributes,
+              src,
+              title,
+              alt,
+              openStart,
+              closeEnd,
+            });
+          }
         }
       }
     }
@@ -195,7 +215,7 @@ async function responsiveImages(images, { inputPath, outputDir, imagePresets = {
 
 function updateHtml(html, changes) {
   let newHtml = html;
-  for (const change of changes) {
+  for (const change of changes.reverse()) {
     newHtml = replaceBetween({
       html: newHtml,
       start: change.openStart,
@@ -232,7 +252,7 @@ async function insertResponsiveImages(html) {
     imagePresets: config.imagePresets,
   };
 
-  let images = getImages(html);
+  let images = getImages(html, options);
   images = resolveFilePath(images, options);
   images = await responsiveImages(images, options);
   const newHtml = updateHtml(html, images);

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

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

packages/cli/src/normalizeConfig.js

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

packages/cli/src/public/bootstrap/_gitignore

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

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

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

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

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

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

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

packages/cli/src/public/generateEleventyComputed.cjs

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

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

@@ -30,10 +30,7 @@ module.exports = function (eleventyConfig) {
     {
       name: 'rocket-copy',
       plugin: rocketCopy,
-      options: {
+      options: { _inputDirCwdRelative },
-        _inputDirCwdRelative,
-        filesExtensionsToCopy: 'png,gif,jpg,jpeg,svg,css,xml,json,js',
-      },
     },
     {
       name: 'eleventy-plugin-mdjs-unified',

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';
@@ -19,6 +20,7 @@ export function setFixtureDir(importMetaUrl) {
  * @property {boolean} stripStartEndWhitespace
  * @property {boolean} stripScripts
  * @property {boolean} formatHtml
+ * @property {boolean} replaceImageHashes
  * @property {start|build} type
  */
 
@@ -51,13 +53,20 @@ export async function readOutput(
     stripScripts = false,
     formatHtml = false,
     type = 'build',
+    replaceImageHashes = false,
   } = {},
 ) {
   if (!cli || !cli.config) {
     throw new Error(`No valid cli provided to readOutput - you passed a ${typeof cli}: ${cli}`);
   }
 
-  const outputDir = type === 'build' ? cli.config.outputDir : cli.config.outputDevDir;
+  const outputDir =
+    type === 'bootstrap'
+      ? path.join(cli.config.outputDir, '..')
+      : type === 'build'
+      ? cli.config.outputDir
+      : cli.config.outputDevDir;
+
   let text = await fs.promises.readFile(path.join(outputDir, fileName));
   text = text.toString();
   if (stripToBody) {
@@ -70,6 +79,9 @@ export async function readOutput(
     const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;
     text = text.substring(0, scriptOpenTagEnd) + text.substring(scriptCloseTagStart);
   }
+  if (replaceImageHashes) {
+    text = text.replace(/\/images\/([a-z0-9]+)-/g, '/images/__HASH__-');
+  }
   if (formatHtml) {
     text = prettier.format(text, { parser: 'html', printWidth: 100 });
   }
@@ -109,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');
@@ -120,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', () => {
@@ -102,17 +120,17 @@ describe('RocketCli e2e', () => {
     );
     const assetHtml = await readStartOutput(cli, 'use-assets/index.html');
     expect(assetHtml).to.equal('<link rel="stylesheet" href="/_merged_assets/some.css">');
-    const imageHtml = await readStartOutput(cli, 'image/index.html');
+    const imageHtml = await readStartOutput(cli, 'image/index.html', { replaceImageHashes: true });
     expect(imageHtml).to.equal(
       [
         '<p>',
         '      <figure>',
         '        <picture>',
-        '<source type="image/avif" srcset="/images/dd502010-600.avif 600w, /images/dd502010-900.avif 900w" sizes="100vw">',
+        '<source type="image/avif" srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w" sizes="100vw">',
-        '<source type="image/jpeg" srcset="/images/dd502010-600.jpeg 600w, /images/dd502010-900.jpeg 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/dd502010-600.jpeg"',
+        '            src="/images/__HASH__-600.jpeg"',
         '            ',
         '            ',
         '            width="600"',
@@ -143,16 +161,17 @@ describe('RocketCli e2e', () => {
     expect(assetHtml).to.equal(
       '<html><head><link rel="stylesheet" href="../41297ffa.css">\n\n</head><body>\n\n</body></html>',
     );
-    const imageHtml = await readBuildOutput(cli, 'image/index.html');
+    let imageHtml = await readBuildOutput(cli, 'image/index.html');
+    imageHtml = imageHtml.replace(/\.\.\/([a-z0-9]+)\./g, '../__HASH__.');
     expect(imageHtml).to.equal(
       [
         '<html><head>',
         '</head><body><p>',
         '      </p><figure>',
         '        <picture>',
-        '<source type="image/avif" srcset="../e64e2277.avif 600w, ../37453c88.avif 900w" sizes="100vw">',
+        '<source type="image/avif" srcset="../__HASH__.avif 600w, ../__HASH__.avif 900w" sizes="100vw">',
-        '<source type="image/jpeg" srcset="../d0f18b5a.jpeg 600w, ../81998598.jpeg 900w" sizes="100vw">',
+        '<source type="image/jpeg" srcset="../__HASH__.jpeg 600w, ../__HASH__.jpeg 900w" sizes="100vw">',
-        '          <img alt="My Image Alternative Text" rocket-image="responsive" src="../d0f18b5a.jpeg" width="600" height="316" loading="lazy" decoding="async">',
+        '          <img alt="My Image Alternative Text" rocket-image="responsive" src="../__HASH__.jpeg" width="600" height="316" loading="lazy" decoding="async">',
         '        </picture>',
         '      <figcaption>My Image Description</figcaption>',
         '</figure>',

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

@@ -22,7 +22,10 @@ describe('RocketCli images', () => {
   describe('Images', () => {
     it('does render content images responsive', async () => {
       cli = await executeStart('e2e-fixtures/images/rocket.config.js');
-      const indexHtml = await readStartOutput(cli, 'index.html', { formatHtml: true });
+      const indexHtml = await readStartOutput(cli, 'index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
       expect(indexHtml).to.equal(
         [
           '<p>',
@@ -30,18 +33,18 @@ describe('RocketCli images', () => {
           '    <picture>',
           '      <source',
           '        type="image/avif"',
-          '        srcset="/images/d67643ad-600.avif 600w, /images/d67643ad-900.avif 900w"',
+          '        srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
           '        sizes="100vw"',
           '      />',
           '      <source',
           '        type="image/jpeg"',
-          '        srcset="/images/d67643ad-600.jpeg 600w, /images/d67643ad-900.jpeg 900w"',
+          '        srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
           '        sizes="100vw"',
           '      />',
           '      <img',
           '        alt="My Image Alternative Text"',
           '        rocket-image="responsive"',
-          '        src="/images/d67643ad-600.jpeg"',
+          '        src="/images/__HASH__-600.jpeg"',
           '        width="600"',
           '        height="316"',
           '        loading="lazy"',
@@ -53,51 +56,134 @@ describe('RocketCli images', () => {
           '</p>',
         ].join('\n'),
       );
-    });
 
-    it('renders multiple images in the correct order', async () => {
+      const keepSvgHtml = await readStartOutput(cli, 'ignores/index.html', {
-      cli = await executeStart('e2e-fixtures/images/rocket.config.js');
+        formatHtml: true,
-      const indexHtml = await readStartOutput(cli, 'two-images/index.html', { formatHtml: true });
+        replaceImageHashes: true,
-      expect(indexHtml).to.equal(
+      });
+
+      // ignores src="[...].svg" and src="[...]rocket-unresponsive.[...]"
+      expect(keepSvgHtml).to.equal(
         [
+          '<p>Ignore SVG</p>',
+          '<p><img src="../_assets/logo.svg" alt="Logo stays svg" rocket-image="responsive" /></p>',
+          '<p>Ignore if contains <code>rocket-unresponsive.</code></p>',
+          '<p>',
+          '  <img',
+          '    src="../_assets/my-image.rocket-unresponsive.jpg"',
+          '    alt="Logo stays svg"',
+          '    rocket-image="responsive"',
+          '  />',
+          '</p>',
+          '<p>Responsive</p>',
           '<p>',
           '  <picture>',
           '    <source',
           '      type="image/avif"',
-          '      srcset="/images/d67643ad-600.avif 600w, /images/d67643ad-900.avif 900w"',
+          '      srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
           '      sizes="100vw"',
           '    />',
           '    <source',
           '      type="image/jpeg"',
-          '      srcset="/images/d67643ad-600.jpeg 600w, /images/d67643ad-900.jpeg 900w"',
+          '      srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
           '      sizes="100vw"',
           '    />',
           '    <img',
-          '      alt="one"',
+          '      alt="My Image Alternative Text"',
           '      rocket-image="responsive"',
-          '      src="/images/d67643ad-600.jpeg"',
+          '      src="/images/__HASH__-600.jpeg"',
           '      width="600"',
           '      height="316"',
           '      loading="lazy"',
           '      decoding="async"',
           '    />',
           '  </picture>',
-          '',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('can configure more patterns to ignore', async () => {
+      cli = await executeStart('e2e-fixtures/images/ignore-more.rocket.config.js');
+      const keepSvgHtml = await readStartOutput(cli, 'ignores/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+
+      // ignores src="[...].svg" and src="[...]rocket-unresponsive.[...]"
+      expect(keepSvgHtml).to.equal(
+        [
+          '<p>Ignore SVG</p>',
+          '<p><img src="../_assets/logo.svg" alt="Logo stays svg" rocket-image="responsive" /></p>',
+          '<p>Ignore if contains <code>rocket-unresponsive.</code></p>',
+          '<p>',
+          '  <img',
+          '    src="../_assets/my-image.rocket-unresponsive.jpg"',
+          '    alt="Logo stays svg"',
+          '    rocket-image="responsive"',
+          '  />',
+          '</p>',
+          '<p>Responsive</p>',
+          '<p>',
+          '  <img src="../_assets/my-image.jpeg" alt="My Image Alternative Text" rocket-image="responsive" />',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('renders multiple images in the correct order', async () => {
+      cli = await executeStart('e2e-fixtures/images/rocket.config.js');
+      const indexHtml = await readStartOutput(cli, 'two-images/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+      expect(indexHtml).to.equal(
+        [
+          '<h2 id="one">',
+          '  <a aria-hidden="true" tabindex="-1" href="#one"><span class="icon icon-link"></span></a>one',
+          '</h2>',
+          '<p>',
           '  <picture>',
           '    <source',
           '      type="image/avif"',
-          '      srcset="/images/d67643ad-600.avif 600w, /images/d67643ad-900.avif 900w"',
+          '      srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
           '      sizes="100vw"',
           '    />',
           '    <source',
           '      type="image/jpeg"',
-          '      srcset="/images/d67643ad-600.jpeg 600w, /images/d67643ad-900.jpeg 900w"',
+          '      srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
+          '      sizes="100vw"',
+          '    />',
+          '    <img',
+          '      alt="one"',
+          '      rocket-image="responsive"',
+          '      src="/images/__HASH__-600.jpeg"',
+          '      width="600"',
+          '      height="316"',
+          '      loading="lazy"',
+          '      decoding="async"',
+          '    />',
+          '  </picture>',
+          '</p>',
+          '<h2 id="two">',
+          '  <a aria-hidden="true" tabindex="-1" href="#two"><span class="icon icon-link"></span></a>two',
+          '</h2>',
+          '<p>',
+          '  <picture>',
+          '    <source',
+          '      type="image/avif"',
+          '      srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
+          '      sizes="100vw"',
+          '    />',
+          '    <source',
+          '      type="image/jpeg"',
+          '      srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
           '      sizes="100vw"',
           '    />',
           '    <img',
           '      alt="two"',
           '      rocket-image="responsive"',
-          '      src="/images/d67643ad-600.jpeg"',
+          '      src="/images/__HASH__-600.jpeg"',
           '      width="600"',
           '      height="316"',
           '      loading="lazy"',
@@ -111,7 +197,10 @@ describe('RocketCli images', () => {
 
     it('can configure those responsive images', async () => {
       cli = await executeStart('e2e-fixtures/images/small.rocket.config.js');
-      const indexHtml = await readStartOutput(cli, 'index.html', { formatHtml: true });
+      const indexHtml = await readStartOutput(cli, 'index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
       expect(indexHtml).to.equal(
         [
           '<p>',
@@ -119,18 +208,18 @@ describe('RocketCli images', () => {
           '    <picture>',
           '      <source',
           '        type="image/avif"',
-          '        srcset="/images/d67643ad-30.avif 30w, /images/d67643ad-60.avif 60w"',
+          '        srcset="/images/__HASH__-30.avif 30w, /images/__HASH__-60.avif 60w"',
           '        sizes="(min-width: 1024px) 30px, 60px"',
           '      />',
           '      <source',
           '        type="image/jpeg"',
-          '        srcset="/images/d67643ad-30.jpeg 30w, /images/d67643ad-60.jpeg 60w"',
+          '        srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
           '        sizes="(min-width: 1024px) 30px, 60px"',
           '      />',
           '      <img',
           '        alt="My Image Alternative Text"',
           '        rocket-image="responsive"',
-          '        src="/images/d67643ad-30.jpeg"',
+          '        src="/images/__HASH__-30.jpeg"',
           '        width="30"',
           '        height="15"',
           '        loading="lazy"',
@@ -146,25 +235,28 @@ describe('RocketCli images', () => {
 
     it('will only render a figure & figcaption if there is a caption/title', async () => {
       cli = await executeStart('e2e-fixtures/images/small.rocket.config.js');
-      const indexHtml = await readStartOutput(cli, 'no-title/index.html', { formatHtml: true });
+      const indexHtml = await readStartOutput(cli, 'no-title/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
       expect(indexHtml).to.equal(
         [
           '<p>',
           '  <picture>',
           '    <source',
           '      type="image/avif"',
-          '      srcset="/images/d67643ad-30.avif 30w, /images/d67643ad-60.avif 60w"',
+          '      srcset="/images/__HASH__-30.avif 30w, /images/__HASH__-60.avif 60w"',
           '      sizes="(min-width: 1024px) 30px, 60px"',
           '    />',
           '    <source',
           '      type="image/jpeg"',
-          '      srcset="/images/d67643ad-30.jpeg 30w, /images/d67643ad-60.jpeg 60w"',
+          '      srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
           '      sizes="(min-width: 1024px) 30px, 60px"',
           '    />',
           '    <img',
           '      alt="My Image Alternative Text"',
           '      rocket-image="responsive"',
-          '      src="/images/d67643ad-30.jpeg"',
+          '      src="/images/__HASH__-30.jpeg"',
           '      width="30"',
           '      height="15"',
           '      loading="lazy"',
@@ -178,15 +270,18 @@ describe('RocketCli images', () => {
 
     it('will render an img with srcset and sizes if there is only one image format', async () => {
       cli = await executeStart('e2e-fixtures/images/single-format.rocket.config.js');
-      const indexHtml = await readStartOutput(cli, 'no-title/index.html', { formatHtml: true });
+      const indexHtml = await readStartOutput(cli, 'no-title/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
       expect(indexHtml).to.equal(
         [
           '<p>',
           '  <img',
           '    alt="My Image Alternative Text"',
           '    rocket-image="responsive"',
-          '    src="/images/d67643ad-30.jpeg"',
+          '    src="/images/__HASH__-30.jpeg"',
-          '    srcset="/images/d67643ad-30.jpeg 30w, /images/d67643ad-60.jpeg 60w"',
+          '    srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
           '    sizes="(min-width: 1024px) 30px, 60px"',
           '    width="30"',
           '    height="15"',

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

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

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

@@ -108,15 +108,18 @@ describe('RocketCli preset', () => {
   it('a preset can provide an adjustImagePresets() function', async () => {
     cli = await executeStart('preset-fixtures/use-preset/rocket.config.js');
 
-    const indexHtml = await readStartOutput(cli, 'index.html', { formatHtml: true });
+    const indexHtml = await readStartOutput(cli, 'index.html', {
+      formatHtml: true,
+      replaceImageHashes: true,
+    });
     expect(indexHtml).to.equal(
       [
         '<p>',
         '  <img',
         '    alt="My Image Alternative Text"',
         '    rocket-image="responsive"',
-        '    src="/images/1f847765-30.jpeg"',
+        '    src="/images/__HASH__-30.jpeg"',
-        '    srcset="/images/1f847765-30.jpeg 30w, /images/1f847765-60.jpeg 60w"',
+        '    srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
         '    sizes="30px"',
         '    width="30"',
         '    height="15"',

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

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

packages/cli/test-node/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/_assets/logo.svg

@@ -0,0 +1,33 @@
+<svg fill="#e63946" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.998 511.998" xml:space="preserve">
+   <g>
+  <path d="M98.649,430.256c-46.365,28.67-71.17,30.939-78.916,23.51c-7.75-7.433-6.519-32.307,20.182-79.832
+    c24.953-44.412,65.374-96.693,113.818-147.211l-11.279-10.817C93.124,267.348,51.871,320.751,26.291,366.279
+    c-19.228,34.22-37.848,79.134-17.375,98.766c5.84,5.6,13.599,7.935,22.484,7.935c22.269,0,51.606-14.677,75.469-29.432
+    c44.416-27.464,96.044-70.919,145.373-122.362l-11.279-10.817C192.517,360.888,141.976,403.464,98.649,430.256z"/>
+
+    <rect x="238.112" y="272.64" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 237.9094 656.5383)" width="25.589" height="15.628"/>
+
+    <rect x="268.895" y="302.163" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 270.4774 728.6761)" width="25.589" height="15.628"/>
+
+    <rect x="232.827" y="268.929" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 297.4719 673.0591)" width="102.364" height="15.628"/>
+  <path d="M500.916,41.287c-7.769,1.59-76.412,16.062-93.897,34.294l-50.728,52.899l-114.703-3.629l-39.198,40.876l79.28,40.569
+    l-21.755,22.687l72.848,69.858l21.755-22.687l43.857,77.51l39.197-40.876l-8.433-114.451l50.727-52.899
+    c17.485-18.234,29.067-87.422,30.331-95.251l1.801-11.169L500.916,41.287z M228.209,161.383l19.842-20.692l93.688,2.964
+    l-48.775,50.864L228.209,161.383z M401.632,327.686l-35.822-63.308l48.776-50.865l6.886,93.482L401.632,327.686z
+      M332.298,276.743l-50.287-48.223L412.89,92.037l50.288,48.223L332.298,276.743z M473.009,128.036l-48.316-46.334
+    c14.54-8.427,44.787-17.217,68.076-22.632C488.336,82.567,480.82,113.155,473.009,128.036z"/>
+
+    <rect x="302.369" y="231.988" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 384.0262 633.9694)" width="34.12" height="15.628"/>
+
+    <rect x="411.311" y="127.35" transform="matrix(-0.6921 0.7218 -0.7218 -0.6921 807.9747 -74.331)" width="17.061" height="15.628"/>
+
+    <rect x="394.288" y="145.087" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 586.0206 542.7934)" width="15.628" height="17.06"/>
+
+    <rect x="376.571" y="163.565" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 542.7271 562.3462)" width="15.628" height="17.06"/>
+
+    <rect x="161.111" y="185.158" transform="matrix(0.7071 0.7071 -0.7071 0.7071 192.1943 -60.3323)" width="15.628" height="33.35"/>
+
+    <rect x="184.683" y="172.695" transform="matrix(0.707 0.7072 -0.7072 0.707 182.4625 -83.9076)" width="15.628" height="11.118"/>
+    </g>
+</svg>

packages/cli/test-node/e2e-fixtures/images/docs/ignores.md

@@ -0,0 +1,15 @@
+---
+layout: layout-raw
+---
+
+Ignore SVG
+
+![Logo stays svg](./_assets/logo.svg)
+
+Ignore if contains `rocket-unresponsive.`
+
+![Logo stays svg](./_assets/my-image.rocket-unresponsive.jpg)
+
+Responsive
+
+![My Image Alternative Text](./_assets/my-image.jpeg)

packages/cli/test-node/e2e-fixtures/images/docs/two-images.md

@@ -2,4 +2,10 @@
 layout: layout-raw
 ---
 
-![one](./_assets/my-image.jpg)![two](./_assets/my-image.jpg)
+## one
+
+![one](./_assets/my-image.jpg)
+
+## two
+
+![two](./_assets/my-image.jpg)

packages/cli/test-node/e2e-fixtures/images/ignore-more.rocket.config.js

@@ -0,0 +1,10 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {
+  imagePresets: {
+    responsive: {
+      ignore: ({ src }) =>
+        src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
+    },
+  },
+};
+export default config;

packages/cli/test-node/e2e-fixtures/service-worker/docs/.eleventyignore

@@ -0,0 +1 @@
+**/*.njk

packages/cli/test-node/e2e-fixtures/service-worker/docs/_data/socialMediaImage.cjs

@@ -0,0 +1 @@
+module.exports = 'https://example.com';

packages/cli/test-node/e2e-fixtures/service-worker/docs/index.md

@@ -0,0 +1,5 @@
+---
+layout: layout-default
+---
+
+Content inside `docs/index.md`

packages/cli/test-node/e2e-fixtures/service-worker/docs/sub.md

@@ -0,0 +1,5 @@
+---
+layout: layout-default
+---
+
+Content inside `docs/sub.md`

packages/cli/test-node/e2e-fixtures/service-worker/pathPrefix.rocket.config.js

@@ -0,0 +1,6 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {
+  pathPrefix: '/my-prefix-folder/',
+};
+
+export default config;

packages/cli/test-node/e2e-fixtures/service-worker/rocket.config.js

@@ -0,0 +1,3 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {};
+export default config;

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/100-last.njk

@@ -1 +0,0 @@
-<p>100-last</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/100-second.njk

@@ -0,0 +1 @@
+<p>100-second</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/10100-last.njk

@@ -0,0 +1 @@
+<p>10100-last</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/30-first.njk

@@ -0,0 +1 @@
+<p>30-first</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/30-third.njk

@@ -1 +0,0 @@
-<p>30-third</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/bar-third.njk

@@ -0,0 +1 @@
+<p>bar-third</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/first.njk

@@ -1 +0,0 @@
-<p>first</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/foo-fourth.njk

@@ -0,0 +1 @@
+<p>foo-fourth</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/second.njk

@@ -1 +0,0 @@
-<p>second</p>

packages/cli/test-node/normalizeConfig.test.js

@@ -10,9 +10,10 @@ function cleanup(config) {
   const configNoPaths = { ...config };
   delete configNoPaths._inputDirCwdRelative;
   delete configNoPaths.configFile;
-  delete configNoPaths._presetPathes;
+  delete configNoPaths._presetPaths;
   delete configNoPaths.eleventy;
   delete configNoPaths.outputDevDir;
+  delete configNoPaths.imagePresets.responsive.ignore;
   return configNoPaths;
 }
 
@@ -23,11 +24,12 @@ describe('normalizeConfig', () => {
 
     // testing pathes is always a little more complicted 😅
     expect(config._inputDirCwdRelative).to.match(/empty\/docs$/);
-    expect(config._presetPathes[0]).to.match(/cli\/preset$/);
+    expect(config._presetPaths[0]).to.match(/cli\/preset$/);
-    expect(config._presetPathes[1]).to.match(/empty\/docs$/);
+    expect(config._presetPaths[1]).to.match(/empty\/docs$/);
     expect(config.outputDevDir).to.match(/_site-dev$/);
 
     expect(cleanup(config)).to.deep.equal({
+      __before11tyFunctions: [],
       command: 'help',
       createSocialMediaImages: true,
       devServer: {},
@@ -69,6 +71,7 @@ describe('normalizeConfig', () => {
     });
 
     expect(cleanup(config)).to.deep.equal({
+      __before11tyFunctions: [],
       command: 'help',
       createSocialMediaImages: true,
       devServer: {
@@ -109,6 +112,7 @@ describe('normalizeConfig', () => {
     });
 
     expect(cleanup(config)).to.deep.equal({
+      __before11tyFunctions: [],
       command: 'help',
       createSocialMediaImages: true,
       devServer: {
@@ -154,6 +158,7 @@ describe('normalizeConfig', () => {
     });
 
     expect(cleanup(config)).to.deep.equal({
+      __before11tyFunctions: [],
       command: 'help',
       createSocialMediaImages: true,
       devServer: {},

packages/cli/types/main.d.ts

@@ -1,69 +1,78 @@
 import { DevServerConfig } from '@web/dev-server';
-
+import { CheckHtmlLinksCliOptions } from 'check-html-links/dist-types/types/main';
-export interface RocketPreset {
+import { WatchOptions } from 'chokidar';
-  path: string;
+import { ImagePreset, RocketPreset } from './preset';
-
+export { ImagePreset, RocketPreset };
-  // TODO: improve all setup functions
+import { Eleventy } from '@11ty/eleventy';
-  setupUnifiedPlugins?: function[];
-  setupDevAndBuildPlugins: function[];
-  setupBuildPlugins: function[];
-  setupDevPlugins: function[];
-  setupCliPlugins: function[];
-  setupEleventyPlugins: function[];
-  setupEleventyComputedConfig: function[];
-}
 
 interface RocketStartConfig {
   createSocialMediaImages?: boolean;
 }
 
-type ImageFormat = 'avif' | 'webp' | 'jpg' | 'png' | 'svg';
+type PresetKeys =
+  | 'before11ty'
+  | 'setupUnifiedPlugins'
+  | 'setupDevAndBuildPlugins'
+  | 'setupBuildPlugins'
+  | 'setupDevPlugins'
+  | 'setupCliPlugins'
+  | 'setupEleventyPlugins'
+  | 'setupEleventyComputedConfig';
 
-interface ImagePreset {
+export interface RocketCliOptions extends Pick<RocketPreset, PresetKeys> {
-  widths: number[];
+  presets?: Array<RocketPreset>;
-  formats: ImageFormat[];
-  sizes: string;
-}
-
-export interface RocketCliOptions {
-  presets: Array<RocketPreset>;
   pathPrefix?: string;
   serviceWorkerName?: string;
-  inputDir: string;
+  inputDir?: string;
-  outputDir: string;
+  outputDir?: string;
   emptyOutputDir?: boolean;
   absoluteBaseUrl?: string;
-  watch: boolean;
+  watch?: boolean;
   createSocialMediaImages?: boolean;
-  imagePresets: {
+  imagePresets?: {
     [key: string]: ImagePreset;
   };
 
+  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;
+  devServer?: DevServerConfig;
-  eleventy: function; // TODO: improve
+  eleventy?: (eleventyConfig: any) => void; // TODO: improve
-  plugins: RocketPlugin[];
+  plugins?: RocketPlugin[];
 
   // rarely used
-  command: string;
+  command?: string;
   configFile?: string;
-  outputDevDir: string;
+  outputDevDir?: string;
 
-  private _inputDirCwdRelative: string;
+  _inputDirCwdRelative?: string;
-  private _presetPathes?: Array<string>;
+  _presetPaths?: string[];
+  __before11tyFunctions?: (() => void | Promise<void>)[];
 }
 
-export interface RocketPlugin {
+export type RocketPlugin = {
-  commands: Array<string>;
+  // 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,14 @@
 # @rocket/eleventy-plugin-mdjs-unified
 
+## 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.1",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,7 @@
     "mdjs"
   ],
   "dependencies": {
-    "@mdjs/core": "^0.8.0",
+    "@mdjs/core": "^0.8.1",
     "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,37 @@
 # @rocket/launch
 
+## 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
+
+- 9e3c2f5: Only show the help & feedback link if a site.helpUrl is defined
+- 9625b94: Remove footer urls to pages that users would need to create
+- 1f79d7a: Add font-family CSS variables
+
+  - `--primary-font-family` for body text
+  - `--secondary-font-family` for emphasis (e.g. call-to-action)
+  - `--heading-font-family` for headings (defaults to `--primary-font-family`)
+  - `--monospace-font-family` for code blocks
+
+## 0.5.1
+
+### Patch Changes
+
+- cf44221: Adds a Slack invite to social links
+- f5d349e: add used fonts from google fonts
+
 ## 0.5.0
 
 ### Minor 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,56 @@
 # 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                                           | Description |
+| ---------------------------------------------- | ----------- |
+| --inline-notification-tip-background-color     |             |
+| --inline-notification-tip-border-color         |             |
+| --inline-notification-warning-background-color |             |
+| --inline-notification-warning-border-color     |             |
+| --inline-notification-danger-background-color  |             |
+| --inline-notification-danger-border-color      |             |
+| --inline-notification-warning-heading-color    |             |
+| --inline-notification-danger-heading-color     |             |
+
+<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.0",
+  "version": "0.5.4",
   "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/brand-logos/slack.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123 123" fill="currentColor">
+  <title>Slack</title>
+  <path stroke="none" stroke-width="1" stroke-dasharray="none" stroke-linecap="butt" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"
+    d="M26.4 78.2c0 7.1-5.8 12.9-12.9 12.9S.6 85.3.6 78.2c0-7.1 5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V78.2zm12.9-51.8c-7.1 0-12.9-5.8-12.9-12.9S38.7.6 45.8.6s12.9 5.8 12.9 12.9v12.9H45.8zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H13.5C6.4 58.7.6 52.9.6 45.8s5.8-12.9 12.9-12.9h32.3zM97.6 45.8c0-7.1 5.8-12.9 12.9-12.9 7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H97.6V45.8zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9-7.1 0-12.9-5.8-12.9-12.9V13.5C65.3 6.4 71.1.6 78.2.6c7.1 0 12.9 5.8 12.9 12.9v32.3zM78.2 97.6c7.1 0 12.9 5.8 12.9 12.9 0 7.1-5.8 12.9-12.9 12.9-7.1 0-12.9-5.8-12.9-12.9V97.6h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9 0-7.1 5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9 0 7.1-5.8 12.9-12.9 12.9H78.2z"/>
+</svg>

packages/launch/preset/_assets/layout.css

@@ -7,7 +7,7 @@
 
 body {
   margin: 0;
-  font-family: 'Open Sans', sans-serif;
+  font-family: var(--primary-font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
@@ -213,6 +213,14 @@ body[layout^='layout-home'] #main-header a:hover {
     margin-right: 50px;
   }
 
+  #main-header .content-area > .social-link {
+    margin-right: 15px;
+  }
+
+  #main-header .content-area > *:last-child {
+    margin-right: 0;
+  }
+
   #main-header .search {
     order: 1;
   }
@@ -426,11 +434,13 @@ li.current > ul > li.anchor {
 
 /* for blog detail page */
 rocket-navigation h3 {
+  font-family: var(--heading-font-family, var(--primary-font-family));
   font-size: 16px;
   margin: 0 0 7px 0;
 }
 
 .sidebar-tags h3 {
+  font-family: var(--heading-font-family, var(--primary-font-family));
   margin-top: 30px;
 }
 
@@ -533,7 +543,7 @@ main > * {
   display: inline-block;
   text-align: center;
   text-transform: uppercase;
-  font-family: 'Montserrat', sans-serif;
+  font-family: var(--secondary-font-family);
   font-size: 16px;
   font-weight: bold;
   vertical-align: middle;

packages/launch/preset/_assets/markdown.css

@@ -1,6 +1,7 @@
 @font-face {
   font-family: octicons-link;
-  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==)
+  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==)
     format('woff');
 }
 
@@ -61,7 +62,7 @@
   -webkit-text-size-adjust: 100%;
   color: var(--markdown-body, --page-background);
   line-height: 1.5;
-  font-family: 'Open Sans', sans-serif;
+  font-family: var(--primary-font-family);
   font-size: 16px;
   line-height: 1.5;
   word-wrap: break-word;
@@ -188,6 +189,7 @@
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
+  font-family: var(--heading-font-family, var(--primary-font-family));
   margin-bottom: 0;
   margin-top: 0;
 }
@@ -265,7 +267,7 @@
 
 .markdown-body code,
 .markdown-body pre {
-  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+  font-family: var(--monospace-font-family);
   font-size: 12px;
 }
 
@@ -555,57 +557,75 @@ pre[class*='language-'] {
 .token.atrule {
   color: var(--markdown-syntax-atrule-color, #d73a49);
 }
+
 .token.attr-name {
   color: var(--markdown-syntax-attr-name-color, #d73a49);
 }
+
 .token.boolean {
   color: var(--markdown-syntax-boolean-color, #005cc5);
 }
+
 .token.class-name {
   color: var(--markdown-syntax-class-name-color, #6f42c1);
 }
+
 .token.constant {
   color: var(--markdown-syntax-constant-color, #005cc5);
 }
+
 .token.entity {
   color: var(--markdown-syntax-entity-color, #005cc5);
 }
+
 .token.function {
   color: var(--markdown-syntax-function-color, #6f42c1);
 }
+
 .token.inserted {
   color: var(--markdown-syntax-inserted-color, #005cc5);
 }
+
 .token.keyword {
   color: var(--markdown-syntax-keyword-color, #d73a49);
 }
+
 .token.number {
   color: var(--markdown-syntax-number-color, #005cc5);
 }
+
 .token.operator {
   color: var(--markdown-syntax-operator-color, #005cc5);
 }
+
 .token.property {
   color: var(--markdown-syntax-property-color, #005cc5);
 }
+
 .token.punctuation {
   color: var(--markdown-syntax-punctuation-color, #005cc5);
 }
+
 .token.regex {
   color: var(--markdown-syntax-regex-color, #032f62);
 }
+
 .token.selector {
   color: var(--markdown-syntax-selector-color, #22863a);
 }
+
 .token.symbol {
   color: var(--markdown-syntax-symbol-color, #005cc5);
 }
+
 .token.tag {
   color: var(--markdown-syntax-tag-color, #22863a);
 }
+
 .token.url {
   color: var(--markdown-syntax-url-color, #005cc5);
 }
+
 .token.variable {
   color: var(--markdown-syntax-variable-color, #005cc5);
 }
@@ -613,6 +633,7 @@ pre[class*='language-'] {
 .language-autohotkey .token.selector {
   color: var(--markdown-syntax-hotkey-selector-color, #d73a49);
 }
+
 .language-autohotkey .token.keyword {
   color: var(--markdown-syntax-keyword-color, #22863a);
 }

packages/launch/preset/_assets/variables.css

@@ -14,7 +14,11 @@ html {
   --page-background: white;
   --footer-background: rgba(0, 0, 0, 0.1);
 
+  /* typography */
   --text-color: black;
+  --primary-font-family: 'Open Sans', sans-serif;
+  --secondary-font-family: 'Montserrat', sans-serif;
+  --monospace-font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace;
 }
 
 html.dark {
@@ -32,8 +36,10 @@ html.dark {
   --page-background: #333;
   --footer-background: #4f4f4f;
 
+  /* typography */
   --text-color: white;
 
+  /* markdown */
   --markdown-octicon-link: white;
   --markdown-syntax-background-color: #a0a0a0;
   --markdown-link-color: #fb7881;

packages/launch/preset/_data/footer.json

@@ -2,10 +2,6 @@
   {
     "name": "Discover",
     "children": [
-      {
-        "text": "Blog",
-        "href": "/blog/"
-      },
       {
         "text": "Help and Feedback",
         "href": "https://github.com/modernweb-dev/rocket/issues"
@@ -22,20 +18,12 @@
       {
         "text": "Twitter",
         "href": "https://twitter.com/modern_web_dev"
-      },
-      {
-        "text": "Slack",
-        "href": "/about/slack/"
       }
     ]
   },
   {
     "name": "Support",
     "children": [
-      {
-        "text": "Sponsor",
-        "href": "/about/sponsor/"
-      },
       {
         "text": "Contribute",
         "href": "https://github.com/modernweb-dev/rocket/blob/master/CONTRIBUTING.md"