Version Packages

Bumps [node-fetch](https://github.com/node-fetch/node-fetch) from 2.6.1 to 2.6.7.
- [Release notes](https://github.com/node-fetch/node-fetch/releases)
- [Commits](https://github.com/node-fetch/node-fetch/compare/v2.6.1...v2.6.7)

---
updated-dependencies:
- dependency-name: node-fetch
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

.gitignore

@@ -1,5 +1,6 @@
 ## editors
 /.idea
+/.vscode
 
 ## system files
 .DS_Store
@@ -27,7 +28,9 @@ stats.html
 *.tsbuildinfo
 
 ## Rocket ignore files (need to be the full relative path to the folders)
-*-mdjs-generated.js
+docs/_merged_data/
+docs/_merged_assets/
+docs/_merged_includes/
 _site
 _site-dev
 
@@ -37,4 +40,3 @@ _merged_assets
 _merged_includes
 __output
 __output-dev
-docs_backup

.vscode/extensions.json

@@ -1,7 +0,0 @@
-{
-	// See http://go.microsoft.com/fwlink/?LinkId=827846
-	// for the documentation about the extensions.json format
-	"recommendations": [
-		"dbaeumer.vscode-eslint"
-	]
-}

.vscode/launch.json

@@ -1,34 +0,0 @@
-// A launch configuration that compiles the extension and then opens it inside a new window
-// Use IntelliSense to learn about possible attributes.
-// Hover to view descriptions of existing attributes.
-// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-{
-	"version": "0.2.0",
-	"configurations": [
-		{
-			"name": "Run Web Dev Server Extension",
-			"type": "extensionHost",
-			"request": "launch",
-			"args": [
-				"--extensionDevelopmentPath=${workspaceFolder}/packages/vscode-rocket"
-			],
-			"outFiles": [
-				"${workspaceFolder}/packages/vscode-rocket/out/**/*.js"
-			],
-			"preLaunchTask": "Compile vscode-rocket"
-		},
-		{
-			"name": "Extension Tests",
-			"type": "extensionHost",
-			"request": "launch",
-			"args": [
-				"--extensionDevelopmentPath=${workspaceFolder}",
-				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
-			],
-			"outFiles": [
-				"${workspaceFolder}/out/test/**/*.js"
-			],
-			"preLaunchTask": "${defaultBuildTask}"
-		}
-	]
-}

.vscode/settings.json

@@ -1,10 +0,0 @@
-{
-  "gitdoc.enabled": false,
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "files.exclude": {
-    "**/*-mdjs-generated.js": true,
-  },
-  "search.exclude": {
-    "**/*-mdjs-generated.js": true,
-  }
-}

.vscode/tasks.json

@@ -1,29 +0,0 @@
-// See https://go.microsoft.com/fwlink/?LinkId=733558
-// for the documentation about the tasks.json format
-{
-	"version": "2.0.0",
-	"tasks": [
-    {
-      "type": "npm",
-      "script": "watch",
-      "problemMatcher": "$tsc-watch",
-      "isBackground": true,
-      "presentation": {
-        "reveal": "never"
-      },
-      "group": {
-        "kind": "build",
-        "isDefault": true
-      }
-    },
-    {
-      "label": "Compile vscode-rocket",
-      "type": "npm",
-      "script": "compile",
-      "path": "packages/vscode-rocket/",
-      "group": "build",
-      "problemMatcher": [],
-      "detail": "tsc -p ./"
-    }
-  ]
-}

CONTRIBUTING.md

@@ -8,25 +8,25 @@ First, create a fork of the [modernweb-dev/rocket](https://github.com/modernweb-
 
 Next, clone our repository onto your computer.
 
-```sh
+```shell
 git clone git@github.com:modernweb-dev/rocket.git
 ```
 
 Once cloning is complete, change directory to the repository.
 
-```sh
+```shell
 cd rocket
 ```
 
 Now add your fork as a remote (replacing YOUR_USERNAME with your GitHub username).
 
-```sh
+```shell
 git remote add fork git@github.com:<YOUR_USERNAME>/rocket.git
 ```
 
 Create a new local branch.
 
-```sh
+```shell
 git checkout -b my-awesome-fix
 ```
 
@@ -34,7 +34,7 @@ git checkout -b my-awesome-fix
 
 Now that you have cloned the repository, ensure you have [yarn](https://classic.yarnpkg.com/lang/en/) installed, then run the following commands to set up the development environment.
 
-```sh
+```shell
 yarn install
 ```
 
@@ -69,7 +69,7 @@ This documents your intent to release, and allows you to specify a message that
 
 Run
 
-```sh
+```shell
 yarn changeset
 ```
 
@@ -92,7 +92,7 @@ Exceptions:
 Commit messages must follow the [conventional commit format](https://www.conventionalcommits.org/en/v1.0.0/)
 Modern-web uses package name as scope. So for example if you fix a _terrible bug_ in the package `@web/test-runner`, the commit message should look like this:
 
-```sh
+```shell
 fix(test-runner): fix terrible bug
 ```
 
@@ -100,7 +100,7 @@ fix(test-runner): fix terrible bug
 
 Now it's time to push your branch that contains your committed changes to your fork.
 
-```sh
+```shell
 git push -u fork my-awesome-fix
 ```
 

README.md

@@ -38,7 +38,7 @@
 
 **The modern web setup for static sites with a sprinkle of JavaScript!**
 
-- **Meta Framework:** Build on top of giants like <a href="https://lit.dev/">Lit</a>, <a href="https://rollupjs.org/">Rollup</a> and <a href="https://www.modern-web.dev/">Modern Web</a>.
+- **Meta Framework:** Build on top of giants like <a href="https://www.11ty.dev/">Eleventy</a>, <a href="https://rollupjs.org/">Rollup</a>, and <a href="https://www.modern-web.dev/">Modern Web</a>.
 - **Powerful Default Template:** Provide content and you are ready to go.
 - **Small:** No overblown tools or frontend frameworks, add JavaScript and/or Web Components only on pages where needed..
 
@@ -55,16 +55,6 @@ You can still tweak every detail of every underlying tool that gets used.
 
 Rocket is part of the [Modern Web Family](https://twitter.com/modern_web_dev).
 
-## Quick Start
-
-```
-mkdir test-rocket
-cd test-rocket
-npm init -y
-npm i @rocket/cli@alpha @rocket/launch@alpha @11ty/eleventy-cache-assets typescript
-npx rocket init
-```
-
 ## 🤝 Contributing
 
 We are always looking for contributors of all skill levels! If you're looking to ease your way into the project, try out a [good first issue](https://github.com/modernweb-dev/rocket/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22).

TODO.md

@@ -1,41 +0,0 @@
-## Features
-
-- Rename "options.docsDir" to "options.inputDir"
-- recursive rendering of lit / html / and markdown
-- convert `<meta name="menu:link.text" content="Docs" />` to `export const menuLinkText = 'Docs';`
-- "import" markdown with frontmatter
-- export const mdCleanup = false; => to not clean up auto generated md files for this page
-- add helper for layouts
-- Add "menuExclude" => to actually exclude the menu item
-
-## Bugs
-
-- write to `_site-dev` instead of `_site` while using `rocket start`
-- nested `recursive.data.js` do not overwrite the parent data
-- rocketGeneratedMdInJs => converted-md-source
-- rocketGeneratedFromMd => converted-md
-- support <!-- asdf --> in markdown
-- ssr render can just be a string concat
-
-## Error Handling
-
-- make error nice for "needs function export default () => html` instead of just export default html`"
-- make error nice for parent page not found in index => auto generate page? 🤔
-
-## Examples
-
-- docs site, blog (simple), blog (complex), minimal
-- add stackblitz/codesandbox examples
-
-- Example: export variable and use it in rendering
-- Example: fetch data from an api and display it
-- Example: usage of image
-
-## later
-
-- support `@change` in markdown
-- support "hey ${foo.map(f => `${f} + 1`)}"
-
-## consider
-
-- Replace magic "resolve:pkg/foo.css" with a directive `${resolve()}`?

docs/.eleventyignore

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

docs/10--guides/10--first-pages/index.rocket.js

@@ -1,9 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--guides/10--first-pages/index.rocket.js';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-
-import { html } from 'lit-html';
-export default () => html`<h1>First Pages</h1>
-  <meta name="menu:exclude" content="true" />`;

docs/10--guides/20--presets/index.rocket.js

@@ -1,11 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--guides/20--presets/index.rocket.js';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-
-import { html } from 'lit-html';
-export default () => html`
-  <h1>Presets</h1>
-  <meta name="menu:exclude" content="true" />
-`;

docs/10--guides/30--configuration/index.rocket.js

@@ -1,9 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--guides/30--configuration/index.rocket.js';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-
-import { html } from 'lit-html';
-export default () => html`<h1>Configuration</h1>
-  <meta name="menu:exclude" content="true" />`;

docs/10--guides/40--go-live/index.rocket.js

@@ -1,9 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--guides/40--go-live/index.rocket.js';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-
-import { html } from 'lit-html';
-export default () => html`<h1>Go Live</h1>
-  <meta name="menu:exclude" content="true" />`;

docs/20--docs/10--configuration/index.rocket.js

@@ -1,10 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/10--configuration/index.rocket.js';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-
-import { html } from 'lit-html';
-export default () =>
-  html`<h1>Configuration</h1>
-    <meta name="menu:exclude" content="true" />`;

docs/20--docs/20--presets/20--launch/index.rocket.js

@@ -1,10 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/20--presets/20--launch/index.rocket.js';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-
-import { html } from 'lit-html';
-export default () =>
-  html`<h1>Launch</h1>
-    <meta name="menu:exclude" content="true" />`;

docs/20--docs/20--presets/30--search/index.rocket.js

@@ -1,10 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/20--presets/30--search/index.rocket.js';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-
-import { html } from 'lit-html';
-export default () =>
-  html`<h1>Search</h1>
-    <meta name="menu:exclude" content="true" />`;

docs/20--docs/20--presets/index.rocket.js

@@ -1,10 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/20--presets/index.rocket.js';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-
-import { html } from 'lit-html';
-export default () =>
-  html`<h1>Presets</h1>
-    <meta name="menu:exclude" content="true" />`;

docs/20--docs/30--markdown-javascript/30--story.rocket.md

@@ -1,31 +0,0 @@
-```js server
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/30--markdown-javascript/30--story.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Story
-
-You can showcase live running code by annotating a code block with `js story`.
-
-```js script
-import { html } from '@mdjs/mdjs-story';
-```
-
-````md
-```js script
-import { html } from '@mdjs/mdjs-story';
-```
-
-```js story
-export const foo = () => html` <p>my html</p> `;
-```
-````
-
-will result in
-
-```js story
-export const foo = () => html` <p>my html</p> `;
-```

docs/20--docs/30--markdown-javascript/index.rocket.js

@@ -1,10 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/30--markdown-javascript/index.rocket.js';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-
-import { html } from 'lit-html';
-export default () =>
-  html`<h1>Markdown Javascript</h1>
-    <meta name="menu:exclude" content="true" />`;

docs/20--docs/50--tools/index.rocket.js

@@ -1,10 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/50--tools/index.rocket.js';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-
-import { html } from 'lit-html';
-export default () =>
-  html`<h1>Tools</h1>
-    <meta name="menu:exclude" content="true" />`;

docs/30--blog/index.rocket.js

@@ -1,15 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '30--blog/index.rocket.js';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-
-import { html } from 'lit-html';
-
-export default () => html`
-  <h1>Rocket Blog</h1>
-  <meta name="menu:link.text" content="Blog" />
-  <p>
-    Discover articles from the core team and contributors about Rocket, tips and tricks included!
-  </p>
-`;

docs/404.html.rocket.js

@@ -1,11 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '404.html.rocket.js';
-import { pageTree, setupUnifiedPlugins, footerMenu } from './recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu };
-/* END - Rocket auto generated - do not touch */
-
-import { Layout404 } from '@rocket/launch';
-
-export const layout = new Layout404();
-
-export default () => '';

docs/404.md

@@ -0,0 +1,4 @@
+---
+layout: layout-404
+permalink: 404.html
+---

docs/_assets/_static/logos/npm.svg

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

docs/_assets/_static/logos/pnpm.svg

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

docs/_assets/_static/logos/yarn.svg

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

docs/_assets/body.css

@@ -0,0 +1,10 @@
+html {
+  --demo-background-color: #eee;
+  --demo-color: #222;
+}
+
+html[theme="dark"] body {
+  background: #333;
+  --demo-background-color: #888;
+  --demo-color: #eee;
+}

docs/_assets/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>

docs/_assets/style.css

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

docs/_assets/theme.css

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

docs/_assets/webmanifest.json

@@ -0,0 +1,29 @@
+{
+  "name": "Rocket",
+  "short_name": "rocket",
+  "theme_color": "#e63946",
+  "background_color": "#1d3557",
+  "display": "standalone",
+  "orientation": "portrait",
+  "Scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "../_merged_assets/_static/icons/android-chrome-192x192.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "../_merged_assets/_static/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "../_merged_assets/_static/icons/maskable-icon.jpg",
+      "sizes": "1024x1024",
+      "type": "image/jpg",
+      "purpose": "any maskable"
+    }
+  ],
+  "splash_pages": null
+}

docs/_data/footer.json

@@ -0,0 +1,45 @@
+[
+  {
+    "name": "Discover",
+    "children": [
+      {
+        "text": "Blog",
+        "href": "/blog/"
+      },
+      {
+        "text": "Help and Feedback",
+        "href": "https://github.com/modernweb-dev/rocket/issues"
+      }
+    ]
+  },
+  {
+    "name": "Follow",
+    "children": [
+      {
+        "text": "GitHub",
+        "href": "https://github.com/modernweb-dev/rocket"
+      },
+      {
+        "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/main/CONTRIBUTING.md"
+      }
+    ]
+  }
+]

docs/_data/rocketLaunch.json

@@ -0,0 +1,4 @@
+{
+  "homeLayout": "background",
+  "newsletter": false
+}

docs/_data/site.cjs

@@ -0,0 +1,28 @@
+module.exports = async function () {
+  return {
+    dir: 'ltr',
+    lang: 'en',
+    name: 'Rocket',
+    description: 'Rocket is the way to build fast static websites with a sprinkle of JavaScript',
+    socialLinks: [
+      {
+        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',
+    helpUrl: 'https://github.com/modernweb-dev/rocket/issues',
+    logoAlt: 'Rocket Logo',
+    iconColorMaskIcon: '#3f93ce',
+    iconColorMsapplicationTileColor: '#1d3557',
+    iconColorThemeColor: '#1d3557',
+    socialMediaImage: '/_assets/social-media-image.jpg',
+    // analytics: 'UA-131782693-2', // modern web key
+  };
+};

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

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

docs/_includes/_joiningBlocks/head/site.njk

@@ -0,0 +1,3 @@
+<meta name="twitter:creator" content="@modern_web_dev" />
+
+<link rel="stylesheet" href="{{ '/_assets/body.css' | asset | url }}" mdjs-use>

docs/about/index.rocket.md

@@ -1,11 +0,0 @@
-```js server
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = 'about/index.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-<meta name="menu:exclude" content="true" />
-
-# About

docs/about/slack.md

@@ -0,0 +1,5 @@
+# Slack
+
+You can also find us on the Polymer Slack in the [#open-wc](https://polymer.slack.com/archives/CE6D9DN05) channel.
+
+You can join the Polymer Slack by visiting [https://www.polymer-project.org/slack-invite](https://www.polymer-project.org/slack-invite).

docs/about/slack.rocket.md

@@ -1,13 +0,0 @@
-```js server
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = 'about/slack.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Slack
-
-You can also find us on the Polymer Slack in the [#open-wc](https://polymer.slack.com/archives/CE6D9DN05) channel.
-
-You can join the Polymer Slack by visiting [https://www.polymer-project.org/slack-invite](https://www.polymer-project.org/slack-invite).

docs/about/sponsor.md

@@ -0,0 +1,9 @@
+---
+title: Sponsor
+eleventyNavigation:
+  key: Sponsor
+---
+
+We currently can only accept sponsoring in the form of services or contributions.
+
+If you are interested in monetary sponsoring please [let us know](mailto:hello@modern-web.dev).

docs/about/sponsor.rocket.md

@@ -1,13 +0,0 @@
-```js server
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = 'about/sponsor.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Sponsor
-
-We currently can only accept sponsoring in the form of services or contributions.
-
-If you are interested in monetary sponsoring please [let us know](mailto:hello@modern-web.dev).

docs/blog/index.md

@@ -0,0 +1,15 @@
+---
+layout: layout-blog-overview
+eleventyNavigation:
+  key: Blog
+  order: 30
+pagination:
+  data: collections.blog
+  size: 10
+  reverse: true
+  alias: posts
+---
+
+# Rocket Blog
+
+Discover articles from the core team and contributors about Rocket, tips and tricks included!

docs/blog/introducing-check-html-links.11tydata.cjs

@@ -0,0 +1,12 @@
+const { createSocialImage } = require('@rocket/cli');
+
+module.exports = async function () {
+  const socialMediaImage = await createSocialImage({
+    title: 'Introducing',
+    subTitle: 'check-html-links',
+    footer: 'Rocket Blog',
+  });
+  return {
+    socialMediaImage,
+  };
+};

docs/blog/introducing-check-html-links.md

@@ -1,16 +1,10 @@
-```js server
+---
-/* START - Rocket auto generated - do not touch */
+title: Introducing Check HTMl Links - no more bad links
-export const sourceRelativeFilePath = '30--blog/introducing-check-html-links.rocket.md';
+published: true
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../recursive.data.js';
+description: A fast link checker for static HTML
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
+tags: [html, javascript, webdev, node]
-/* END - Rocket auto generated - do not touch */
+cover_image: https://dev-to-uploads.s3.amazonaws.com/i/an9z6f4hdll2jlne43u3.jpg
-
+---
-export const tags = ['html', 'javascript', 'webdev', 'node'];
-export const subTitle = 'A fast link checker for static HTML';
-// cover_image: https://dev-to-uploads.s3.amazonaws.com/i/an9z6f4hdll2jlne43u3.jpg
-```
-
-# Introducing Check HTML Links - no more bad links
 
 **TL;DR : I created a standalone tool that can help you fix all the broken links in your websites/documentation. You can check it out [on npm as check-html-links](https://www.npmjs.com/package/check-html-links)**
 
@@ -146,7 +140,7 @@ The features so far are:
 
 It checks your final HTML output so you need to execute it after your Static Site Generator.
 
-```
+```shell
 npx check-html-links _site
 ```
 

docs/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#1d3557</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

docs/docs/configuration/computed-config.md

@@ -0,0 +1,40 @@
+# 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/).
+
+Rocket exposes it via `setupEleventyComputedConfig`.
+
+## Set Your Own Data
+
+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.js` (or your theme config file)
+
+<!-- prettier-ignore-start -->
+```js copy
+import { addPlugin } from 'plugins-manager';
+
+/** @type {import('@rocket/cli').RocketCliOptions} */
+export default ({
+  setupEleventyComputedConfig: [
+    addPlugin({ name: 'greeting', plugin: data => `Welcome to the ${data.title} page.` }),
+  ],
+});
+```
+<!-- prettier-ignore-end -->
+
+Now you can use {% raw %}{{ greeting }}{% endraw %} everywhere,
+and it will be correctly replaced with a Welcome and the page title.
+
+## Default Available Configs
+
+```js
+[
+  { name: 'titleMeta', plugin: titleMetaPlugin },
+  { name: 'title', plugin: titlePlugin },
+  { name: 'eleventyNavigation', plugin: eleventyNavigationPlugin },
+  { name: 'section', plugin: sectionPlugin },
+  { name: 'socialMediaImage', plugin: socialMediaImagePlugin },
+  { name: 'templateBlocks', plugin: templateBlocksPlugin, options: rocketConfig },
+];
+```

docs/docs/configuration/images.md

@@ -1,12 +1,4 @@
-```js server
+# Configuration >> Images ||40
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/10--configuration/30--images.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Images
 
 Rocket does handle content images automatically by
 

docs/docs/configuration/index.md

@@ -0,0 +1 @@
+# Configuration ||10

docs/docs/configuration/overview.md

@@ -1,48 +1,53 @@
-```js server
+# Configuration >> Overview || 10
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/10--configuration/10--overview.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Overview
 
 The configuration file is `rocket.config.js` or `rocket.config.mjs`.
 
 The config files consist of the following parts:
 
+<!-- prettier-ignore-start -->
 ```js
 import { rocketLaunch } from '@rocket/launch';
 
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
   presets: [rocketLaunch()],
   emptyOutputDir: true,
   pathPrefix: 'subfolder-only-for-build',
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 Rocket is primarily build around plugins for each of its systems.
 
 New plugins can be added and all default plugins can be adjusted or even removed by using the following functions.
 
+<!-- prettier-ignore-start -->
 ```js
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
+  // add remark/unified plugin to the Markdown processing (e.g. enable special code blocks)
+  setupUnifiedPlugins: [],
+
   // add a rollup plugins to the web dev server (will be wrapped with @web/dev-server-rollup) AND the rollup build (e.g. enable json importing)
-  setupDevServerAndBuildPlugins: [],
+  setupDevAndBuildPlugins: [],
 
   // add a plugin to the web dev server (will not be wrapped) (e.g. esbuild for TypeScript)
-  setupDevServerPlugins: [],
+  setupDevPlugins: [],
 
   // add a plugin to the rollup build (e.g. optimization steps)
   setupBuildPlugins: [],
 
+  // add a plugin to Eleventy (e.g. a filter packs)
+  setupEleventyPlugins: [],
+
+  // add a computedConfig to Eleventy (e.g. site wide default variables like socialMediaImage)
+  setupEleventyComputedConfig: [],
+
   // add a plugin to the cli (e.g. a new command like "rocket my-command")
   setupCliPlugins: [],
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 ## Adding Rollup Plugins
 
@@ -54,19 +59,21 @@ import data from './data.json';
 
 You can accomplish this with Rollup and dev server plugins. Make sure to add both the dev-server plugin as well as the Rollup plugin, so that the behaviors is the same during development as it is in the production build.
 
-For these cases you can use `setupDevServerAndBuildPlugins`, which will automatically add the plugin for you to both Rollup and dev-server:
+For these cases you can use `setupDevAndBuildPlugins`, which will automatically add the plugin for you to both Rollup and dev-server:
 
+<!-- prettier-ignore-start -->
 ```js
 import json from '@rollup/plugin-json';
 import { addPlugin } from 'plugins-manager';
 
 /** @type {import('@rocket/cli').RocketCliOptions} */
-export default {
+export default ({
-  setupDevServerAndBuildPlugins: [
+  setupDevAndBuildPlugins: [
     addPlugin({ name: 'json', plugin: json, location: 'top', options: { my: 'settings' } }),
   ],
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 This will add the Rollup plugin `json` with the id `json` at the top of the plugin list of Rollup and the dev server. It needs to be at the top so further plugins down the line can work with JSON imports.
 For the Dev Server the plugins are automatically wrapped by `@web/dev-server-rollup`. Note that [not all Rollup plugins](https://modern-web.dev/docs/dev-server/plugins/rollup/#compatibility-with-rollup-plugins) will work with the dev-server.
@@ -75,14 +82,31 @@ For the Dev Server the plugins are automatically wrapped by `@web/dev-server-rol
 
 All plugins which are either default or are added via a preset can still be adjusted by using `adjustPluginOptions`.
 
+<!-- prettier-ignore-start -->
 ```js
 import { adjustPluginOptions } from 'plugins-manager';
 
 /** @type {import('@rocket/cli').RocketCliOptions} */
-export default {
+export default ({
-  setupDevServerAndBuildPlugins: [adjustPluginOptions('json', { my: 'overwrite settings' })],
+  setupDevAndBuildPlugins: [adjustPluginOptions('json', { my: 'overwrite settings' })],
-};
+});
 ```
+<!-- prettier-ignore-end -->
+
+## Lifecycle
+
+You can hook into the rocket lifecycle by specifying a function for `before11ty`. This function runs before 11ty calls it's write method. If it is an async function, Rocket will await it's promise.
+
+<!-- prettier-ignore-start -->
+```js
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
+  async before11ty() {
+    await copyDataFiles();
+  },
+});
+```
+<!-- prettier-ignore-end -->
 
 ## Advanced
 
@@ -92,14 +116,51 @@ Sometimes you need even more control over specific settings.
 
 For example if you wanna add an `acron` plugin to rollup
 
+<!-- prettier-ignore-start -->
 ```js
 import { importAssertions } from 'acorn-import-assertions';
 
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
   rollup: config => ({
     ...config,
     acornInjectPlugins: [importAssertions],
   }),
-};
+});
 ```
+<!-- prettier-ignore-end -->
+
+### Eleventy
+
+For example to add custom filter you can access the eleventy config directly
+
+<!-- prettier-ignore-start -->
+```js
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
+  eleventy: eleventyConfig => {
+    eleventyConfig.addFilter('value', value => `prefix${value}`);
+  },
+});
+```
+<!-- prettier-ignore-end -->
+
+You even have access to the full rocketConfig if you for example want to create filters that behave differently during start/build.
+
+<!-- prettier-ignore-start -->
+```js
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
+  eleventy: (config, rocketConfig) => {
+    config.addFilter('conditional-resolve', value => {
+      if (rocketConfig.command === 'build') {
+        return `build:${value}`;
+      }
+      if (rocketConfig.command === 'start') {
+        return `start:${value}`;
+      }
+    });
+  },
+});
+```
+<!-- prettier-ignore-end -->

docs/docs/configuration/service-worker.md

@@ -1,12 +1,4 @@
-```js server
+# Configuration >> Service Worker ||30
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/10--configuration/20--service-worker.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Service Worker
 
 Rocket does come with a default service worker that will
 
@@ -20,12 +12,14 @@ Changing the service worker file name can be quite a hassle so you can adjust ge
 
 👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
   serviceWorkerName: 'my-service-worker-name.js',
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 ## Meet the Service Worker
 

docs/docs/eleventy-plugins/index.md

@@ -0,0 +1 @@
+# Eleventy Plugins ||40

docs/docs/eleventy-plugins/mdjs-unified.md

@@ -0,0 +1,94 @@
+# Eleventy Plugins >> Markdown JavaScript (mdjs)
+
+Use mdjs in your Eleventy site.
+
+## Setup
+
+```shell
+npm install @rocket/eleventy-plugin-mdjs
+```
+
+Create an Eleventy config file `.eleventy.js`
+
+```js
+const pluginMdjs = require('@rocket/eleventy-plugin-mdjs');
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPlugin(pluginMdjs);
+};
+```
+
+## Configure a unified or remark Plugin with mdjs
+
+By providing a `setupUnifiedPlugins` function as an option to `eleventy-plugin-mdjs` you can set options for all unified/remark plugins.
+
+We do use [plugins-manager](../tools/plugins-manager.md).
+
+This example adds a CSS class to the `htmlHeading` plugin so heading links can be selected in CSS.
+
+```js
+const pluginMdjs = require('@rocket/eleventy-plugin-mdjs');
+const { adjustPluginOptions } = require('plugins-manager');
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPlugin(pluginMdjs, {
+    setupUnifiedPlugins: [
+      adjustPluginOptions('htmlHeading', {
+        properties: {
+          className: ['anchor'],
+        },
+      }),
+    ],
+  });
+};
+```
+
+## Add a unified or remark Plugin
+
+The order of plugins is important in unified as each plugin processes the content and passes on its result.
+Some plugins do work with the Markdown AST and some with the rehype (e.g. HTML) AST. In order to get access to the correct AST the plugin needs to be in a specific location in the processing order.
+
+Examples on how to insert a plugin right after creating the Markdown AST.
+
+```js
+const pluginMdjs = require('@rocket/eleventy-plugin-mdjs');
+const { addPlugin } = require('plugins-manager');
+const { myRemarkPlugin } = require('./my-remark-plugin.js');
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPlugin(pluginMdjs, {
+    setupUnifiedPlugins: [
+      addPlugin({ name: 'my-remark-plugin', plugin: myRemarkPlugin, location: 'markdown' }),
+    ],
+  });
+};
+```
+
+Examples on how to insert a plugin right after creating the rehype AST.
+
+```js
+const pluginMdjs = require('@rocket/eleventy-plugin-mdjs');
+const { addPlugin } = require('plugins-manager');
+const { myRehypePlugin } = require('./my-rehype-plugin.js');
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPlugin(pluginMdjs, {
+    setupUnifiedPlugins: [
+      addPlugin({ name: 'my-rehype-plugin', plugin: myRehypePlugin, location: 'remark2rehype' }),
+    ],
+  });
+};
+```
+
+You can also add both
+
+```js
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPlugin(pluginMdjs, {
+    setupUnifiedPlugins: [
+      addPlugin({ name: 'my-remark-plugin', plugin: myRemarkPlugin, location: 'markdown' }),
+      addPlugin({ name: 'my-rehype-plugin', plugin: myRehypePlugin, location: 'remark2rehype' }),
+    ],
+  });
+};
+```

docs/docs/index.md

@@ -1,14 +1,9 @@
-```js server
+---
-/* START - Rocket auto generated - do not touch */
+title: Documentation
-export const sourceRelativeFilePath = '20--docs/index.rocket.md';
+eleventyNavigation:
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../recursive.data.js';
+  key: Docs
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
+  order: 20
-/* END - Rocket auto generated - do not touch */
+---
-```
-
-<meta name="menu:link.text" content="Docs" />
-
-# Documentation
 
 Here you will find all the details for each of the packages/systems we offer.
 

docs/docs/markdown-javascript/index.md

@@ -0,0 +1 @@
+# Markdown JavaScript ||30

docs/docs/markdown-javascript/overview.md

@@ -1,12 +1,4 @@
-```js server
+# Markdown JavaScript >> Overview || 10
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/30--markdown-javascript/10--overview.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Overview
 
 ```js script
 import '@mdjs/mdjs-story/define';

docs/docs/markdown-javascript/preview.md

@@ -1,12 +1,4 @@
-```js server
+# Markdown JavaScript >> Preview ||20
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/30--markdown-javascript/20--preview.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Preview
 
 You can showcase live running code by annotating a code block with `js preview-story`.
 

docs/docs/markdown-javascript/story.md

@@ -0,0 +1,23 @@
+# Markdown JavaScript >> Story ||30
+
+You can showcase live running code by annotating a code block with `js story`.
+
+```js script
+import { html } from '@mdjs/mdjs-story';
+```
+
+````md
+```js script
+import { html } from '@mdjs/mdjs-story';
+```
+
+```js story
+export const foo = () => html` <p>my html</p> `;
+```
+````
+
+will result in
+
+```js story
+export const foo = () => html` <p>my html</p> `;
+```

docs/docs/presets/blog.md

@@ -1,12 +1,4 @@
-```js server
+# Presets >> Blog || 40
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/20--presets/40--blog.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Blog
 
 Enable writing blog posts within your Rocket site.
 
@@ -32,11 +24,13 @@ pnpm add @rocket/blog
 
 👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
 import { rocketBlog } from '@rocket/blog';
 
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
   presets: [rocketBlog()],
-};
+});
 ```
+<!-- prettier-ignore-end -->

docs/docs/presets/index.md

@@ -0,0 +1,5 @@
+---
+excludeFromSearch: true
+---
+
+# Presets ||20

docs/docs/presets/joining-blocks.md

@@ -1,12 +1,4 @@
-```js server
+# Presets >> Joining Blocks || 10
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/20--presets/10--joining-blocks.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Joining Blocks
 
 The template system allows for a very granular control of how individual parts will be merged, overwritten or reorderd.
 

docs/docs/presets/launch/custom-elements.txt

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

docs/docs/presets/launch/index.md

@@ -0,0 +1,3 @@
+# Presets >> Launch || 20
+
+- [Preset](./preset/)

docs/docs/presets/launch/preset.md

@@ -1,16 +1,14 @@
-```js server
+---
-/* START - Rocket auto generated - do not touch */
+alerts:
-export const sourceRelativeFilePath = '20--docs/20--presets/20--launch/overview.rocket.md';
+  - type: tip
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../../recursive.data.js';
+    content: Take a tip from me
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
+  - type: warning
-/* END - Rocket auto generated - do not touch */
+    content: Be *sure* about this...
-```
+  - type: danger
+    content: You **really** shouldn't!
+---
 
-```js server
+# Presets >> Launch >> Preset || 10
-import { html } from 'lit-html';
-```
-
-# Overview
 
 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.
 
@@ -38,18 +36,24 @@ pnpm add @rocket/launch
 
 👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
 import { rocketLaunch } from '@rocket/launch';
 
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
   presets: [rocketLaunch()],
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 ## Data
 
-You can define your own data for the available Layouts.
+The launch preset configures [11ty data](https://www.11ty.dev/docs/data/) using a few overridable files:
+
+- `site.cjs`: Responsible for most of the site-wide config
+- `rocketLaunch.json`: configures the homepage layout
+- `footer.json`: Configures the content of the footer
 
 ## Inline Notification
 
@@ -61,11 +65,13 @@ Launch ships with `<inline-notification>`, a custom element that applies some st
 
 To add an inline notification you need to remember to import the element definition:
 
-````md
+<!-- prettier-ignore-start -->
+~~~markdown
 ```js script
 import '@rocket/launch/inline-notification/inline-notification.js';
 ```
-````
+~~~
+<!-- prettier-ignore-end -->
 
 Then you can add your notification to the page. If you want to write the notification's content using markdown, just pad the opening and closing tags with empty lines.
 
@@ -88,51 +94,35 @@ There are three varieties of `<inline-notification>`, "tip", "warning", and "dan
 }
 </style>
 
-<inline-notification type="tip">
+<code-tabs id="inline-notifications" default-tab="tip">
 
-Take a tip from me
+{%for alert in alerts%}
 
-</inline-notification>
+<code-tab data-label="{{ alert.type }}" data-id="{{ alert.type }}" no-copy>
 
-```md
+```md copy
-<inline-notification type="tip">
+<inline-notification type="{{ alert.type }}">
 
-Take a tip from me
+{{ alert.content | safe }}
 
 </inline-notification>
 ```
 
-<inline-notification type="warning">
+<inline-notification type="{{ alert.type }}">
 
-Be _sure_ about this...
+{{ alert.content | safe }}
 
 </inline-notification>
 
-```md
+</code-tab>
-<inline-notification type="warning">
 
-Be _sure_ about this...
+{%endfor%}
 
-</inline-notification>
+</code-tabs>
-```
-
-<inline-notification type="danger">
-
-You **really** shouldn't!
-
-</inline-notification>
-
-```md
-<inline-notification type="danger">
-
-You **really** shouldn't!
-
-</inline-notification>
-```
 
 ### Modify the Title
 
-The notification title defaults to it's type. You can write a custom title with the `title` attribute.
+The notification title defautls to it's type. You can write a custom title with the `title` attribute.
 
 <inline-notification type="tip" title="success">
 

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

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

docs/docs/presets/search/index.md

@@ -0,0 +1,3 @@
+# Presets >> Search || 10
+
+- [Preset](./preset/)

docs/docs/presets/search/preset.md

@@ -1,12 +1,4 @@
-```js server
+# Presets >> Search >> Preset || 10
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/20--presets/30--search/overview.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Overview
 
 Add a search for all your static content.
 
@@ -32,11 +24,13 @@ pnpm add @rocket/search
 
 👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
 import { rocketSearch } from '@rocket/search';
 
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
   presets: [rocketSearch()],
-};
+});
 ```
+<!-- prettier-ignore-end -->

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

@@ -1,12 +1,4 @@
-```js server
+# Tools >> Check HTML Links ||30
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/50--tools/30--check-html-links.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Check HTML Links
 
 ```js script
 import '@rocket/launch/inline-notification/inline-notification.js';
@@ -16,7 +8,7 @@ A fast checker for broken links/references in HTML.
 
 <inline-notification type="tip">
 
-Read the [Introducing Check HTML Links - no more bad links](../../blog/introducing-check-html-links.md) Blog post to find out how it came to be and how it works.
+Read the [Introducing Check HTMl Links - no more bad links](../../blog/introducing-check-html-links.md) Blog post to find out how it came to be and how it works.
 
 </inline-notification>
 
@@ -30,7 +22,7 @@ Read the [Introducing Check HTML Links - no more bad links](../../blog/introduci
 
 ## Installation
 
-```
+```shell
 npm i -D check-html-links
 ```
 

docs/docs/tools/index.md

@@ -0,0 +1 @@
+# Tools ||50

docs/docs/tools/plugins-manager.md

@@ -1,12 +1,4 @@
-```js server
+# Tools >> Plugins Manager ||10
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/50--tools/10--plugins-manager.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Plugins Manager
 
 The Plugins Manager replaces the specific registration/execution (with options) in a given plugin system by an intend to use a plugin (with these options).
 This allows your users to adjust the options before actually applying the plugins.
@@ -120,16 +112,13 @@ addPlugin(MyClass, { otherProp: 'new name' }); // ts error
 
 Many plugin systems require you to either execute a plugin function like in `rollup`.
 
-<!-- prettier-ignore-start -->
 ```js
 import json from '@rollup/plugin-json';
 
-/** @type {import('rocket/cli').RocketCliConfig} */
+export default /** @type {import('rocket/cli').RocketCliConfig} */ ({
-export default ({
   plugins: [json({ preferConst: true })],
 });
 ```
-<!-- prettier-ignore-end -->
 
 or add it in a special way like in `eleventy`
 
@@ -262,6 +251,18 @@ addPlugin(myPlugin, { myFlag: true }); // ts ok
 addPlugin(myPlugin, { notExisting: true }); // ts error
 ```
 
+Note: There is a "hidden" feature in addPlugin that if you attach a `wrapPlugin` property to the returning function it will call `wrapPlugin` on the plugin before adding it.
+
+```js
+// example auto wrap rollup plugins for @web/dev-server
+import { fromRollup } from '@web/dev-server-rollup';
+
+const userSetupFunctions = [addPlugin(json)].map(mod => {
+  mod.wrapPlugin = fromRollup;
+  return mod;
+});
+```
+
 ## Adjusting Plugin Options
 
 Adjusting options means to either

docs/docs/tools/rollup-config.md

@@ -1,12 +1,4 @@
-```js server
+# Tools >> Rollup Config ||20
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '20--docs/50--tools/20--rollup-config.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Rollup Config
 
 Rollup configuration to help you get started building modern web applications.
 You write modern JavaScript using the latest browser features. Rollup will optimize your code for production and ensure it runs on all supported browsers.

docs/guides/configuration/getting-started.md

@@ -1,12 +1,4 @@
-```js server
+# Configuration >> Getting Started ||10
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--guides/30--configuration/10--getting-started.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Getting Started
 
 The main config file is `rocket.config.js` or `rocket.config.mjs`.
 

docs/guides/configuration/index.md

@@ -0,0 +1 @@
+# Configuration ||30

docs/guides/first-pages/adding-pages.md

@@ -1,12 +1,4 @@
-```js server
+# First Pages >> Adding Pages ||12
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--guides/10--first-pages/20--adding-pages.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Adding Pages
 
 <inline-notification type="warning">
 
@@ -20,13 +12,13 @@ It can help to examine each new page and menu carefully, to come to terms with t
 
 In most cases you will have multiple sections in your website and each of those sections will come with its own sidebar navigation.
 
-To create a section you need to create a folder with an `index.rocket.md`.
+To create a section you need to create a folder with an `index.md`.
 
 ```bash
 mkdir docs/guides
 ```
 
-👉 `docs/guides/index.rocket.md`
+👉 `docs/guides/index.md`
 
 ```md
 # Guides
@@ -50,13 +42,13 @@ It might be more practical to stay below 5 sections.
 
 Often each section will have multiple categories.
 
-To create a category you need to create a folder with an `index.rocket.md`.
+To create a category you need to create a folder with an `index.md`.
 
 ```bash
 mkdir docs/guides/first-pages/
 ```
 
-👉 `docs/guides/first-pages/index.rocket.md`
+👉 `docs/guides/first-pages/index.md`
 
 ```md
 # First Pages
@@ -64,10 +56,10 @@ mkdir docs/guides/first-pages/
 
 ## Adding a Page to a Category
 
-👉 `docs/guides/first-pages/getting-started.rocket.md`
+👉 `docs/guides/first-pages/getting-started.md`
 
 ```md
-# Getting Started
+# First Pages >> Getting Started
 
 This is how you get started.
 ```

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

@@ -1,12 +1,4 @@
-```js server
+# First Pages >> Getting Started ||10
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--guides/10--first-pages/10--getting-started.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Getting Started
 
 Rocket has the following prerequisites:
 
@@ -83,10 +75,10 @@ pnpx rocket bootstrap
 
 The `bootstrap` command creates four files in your repo:
 
-- `rocket.config.js` containing a minimal rocket config
-- `docs/index.md` your first page
 - `.gitignore` containing rocket's build artifacts
-- `.vscode/settings.json` hide build artifacts in your vscode
+- `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.
 
@@ -100,14 +92,16 @@ If you don't want to use the `module` package type, make sure to rename the gene
 
 <code-tabs default-tab="rocket.config.js">
 
+<!-- prettier-ignore-start -->
 ```js tab rocket.config.js
 import { rocketLaunch } from '@rocket/launch';
 
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
   presets: [rocketLaunch()],
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 ```md tab docs/index.md
 # Welcome to Your Rocket Site
@@ -115,11 +109,23 @@ export default {
 Add your markdown content here.
 ```
 
-```html tab .gitignore
+<!-- prettier-ignore-start -->
-## Rocket ignore files (need to be the full relative path to the folders) docs/_merged_data/
+
-docs/_merged_assets/ docs/_merged_includes/
+```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>
@@ -172,6 +178,11 @@ It can be helpful to take an inventory, before we start, to separate basic setup
 
 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/index.md

@@ -0,0 +1 @@
+# First Pages ||10

docs/guides/first-pages/layouts.md

@@ -0,0 +1,29 @@
+# First Pages >> Layouts ||60
+
+The following templates are always available:
+
+- `layout-raw` No html or any wrapping (use it for xml, json, ... outputs)
+- `layout-default` For content
+- `layout-index` Extends content and adds an "Open Navigation" button for mobile
+
+Layout Default has the following Joining Blocks:
+
+- `head` For the html `<head>`
+- `header` Within the top `<header>`
+- `content` Html within the main content section
+- `footer` Within to bottom `<footer>`
+- `bottom` Add the end of the body
+
+## Launch Preset
+
+On top of the above it adds the following templates
+
+- `layout-404` A space not found page
+- `layout-home` Frontpage with center logo below text
+- `layout-home-background` Frontpage with left text and background image on the right
+- `layout-sidebar` Left sidebar, right content
+- `layout-index` Extends layout-sidebar
+
+And the following changes
+
+- Sets `layout-sidebar` as the default layout

docs/guides/first-pages/link-to-other-pages.md

@@ -0,0 +1,7 @@
+# First Pages >> Linking ||20
+
+Standard Markdown applies. You can link like this:
+
+```md
+[visible label](./path/to/other-file.md)
+```

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

@@ -0,0 +1,57 @@
+# First Pages >> Managing sidebar || 30
+
+The sidebar will show all the content of the current section.
+
+## Nesting Pages
+
+You nest by adding `>>` between parent and child.
+
+## Sorting Pages
+
+You can sort by adding `||xx` at the end.
+
+e.g.
+
+```
+# Second || 20
+# First || 10
+```
+
+Will be ordered as `First`, `Second`,
+
+## How it works
+
+Internally `# Foo >> Bar >> Baz ||20` gets converted to.
+
+```yml
+---
+title: Bar: Baz
+eleventyNavigation:
+  key: Foo >> Bar >> Baz
+  parent: Foo >> Bar
+  order: 20
+---
+```
+
+<!--
+You can also look at this live playground:
+
+```js story
+import { html } from '@mdjs/mdjs-preview';
+
+export const headlineConverter = () => html`
+  <p>
+    <strong style="color: red;">TODO: </strong>I will become a web component that has an input and
+    out that live udpates
+  </p>
+`;
+```
+-->
+
+How it then works is very similar to https://www.11ty.dev/docs/plugins/navigation/
+
+## Sidebar redirects
+
+By default, the sidebar nav redirects clicks on category headings to the first child page in that category.
+
+To disable those redirects, override `_includes/_joiningBlocks/_layoutSidebar/sidebar/20-navigation.njk` and add the `no-redirects` attribute to the `<rocket-navigation>` element.

docs/guides/first-pages/urls.md

@@ -0,0 +1,5 @@
+# First Pages >> URLs ||50
+
+URLs will be represented by the folder structure.
+
+You can use front matter with a [permalink](https://www.11ty.dev/docs/permalinks/) to override.

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

@@ -1,27 +1,22 @@
-```js server
+# First Pages >> Use JavaScript || 40
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--guides/10--first-pages/30--use-javascript.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Use JavaScript
 
 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.
 
-````markdown
+<!-- prettier-ignore-start -->
+~~~markdown
 ```js script
 const message = 'Hello, World!';
 console.log(message);
 ```
-````
+~~~
+<!-- prettier-ignore-end -->
 
 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:
 
-````markdown
+<!-- prettier-ignore-start -->
+~~~markdown
 ```js script
 import 'magic-reveal/magic-reveal.js';
 ```
@@ -34,16 +29,21 @@ 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 -->
 
 ## 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`.
 
-````markdown
+<!-- prettier-ignore-start -->
+~~~markdown
 ```js story
 import { html } from '@mdjs/mdjs-preview';
 
-export const StoryPreview = () => html` <p>Use stories in Rocket!</p> `;
+export const StoryPreview = () => html`
+  <p>Use stories in Rocket!</p>
+`;
 ```
-````
+~~~
+<!-- prettier-ignore-end -->

docs/guides/go-live/index.md

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

docs/guides/go-live/overview.md

@@ -1,12 +1,4 @@
-```js server
+# Go Live >> Overview || 10
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--guides/40--go-live/10--overview.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Overview
 
 A few things are usually needed before going live "for real".
 

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

@@ -1,18 +1,12 @@
-```js server
+# Go Live >> Social Media || 20
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--guides/40--go-live/20--social-media.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Social Media
 
 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.
 
 It will look like this but with your logo:
 
+<img src="{{ socialMediaImage | url }}" width="1200" height="630" alt="Social Media Image of this page" style="border: 1px solid #000" />
+
 There are multiple ways you can modify it.
 
 Note: If your logo has an `<?xml>` tag it will throw an error as it will be inlined into this SVG and nested XML tags are not allowed.

docs/guides/index.11tydata.cjs

@@ -0,0 +1,13 @@
+const { createSocialImage } = require('@rocket/cli');
+
+module.exports = async function () {
+  const socialMediaImage = await createSocialImage({
+    title: 'Learning Rocket',
+    subTitle: 'Have a website',
+    subTitle2: 'in 5 Minutes',
+    footer: 'Rocket Guides',
+  });
+  return {
+    socialMediaImage,
+  };
+};

docs/guides/index.md

@@ -1,14 +1,9 @@
-```js server
+---
-/* START - Rocket auto generated - do not touch */
+title: Learning Rocket
-export const sourceRelativeFilePath = '10--guides/index.rocket.md';
+eleventyNavigation:
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../recursive.data.js';
+  key: Guides
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
+  order: 10
-/* END - Rocket auto generated - do not touch */
+---
-```
-
-# Learning Rocket
-
-<meta name="menu:link.text" content="Guides">
 
 Rocket helps you generate static pages from Markdown files while giving you the flexibility to sprinkle in some JavaScript where needed.
 

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,12 +1,4 @@
-```js server
+# Presets >> Getting Started || 10
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--guides/20--presets/10--getting-started.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Getting Started
 
 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`
 

docs/guides/presets/index.md

@@ -0,0 +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

@@ -1,12 +1,4 @@
-```js server
+# Presets >> Overriding ||20
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--guides/20--presets/20--overriding.rocket.md';
-import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../recursive.data.js';
-export { pageTree, setupUnifiedPlugins, footerMenu, layout };
-/* END - Rocket auto generated - do not touch */
-```
-
-# Overriding
 
 All loaded presets will be combined but you can override each file.
 

docs/guides/presets/using-templates.md

@@ -0,0 +1,71 @@
+# Presets >> Using templates ||30
+
+The template system allows for very granular control of how individual parts will be merged, overwritten, or reordered.
+
+On top of the [Overriding](./overriding.md) you can do with the presets alone templates have another superpower and that is automatically joining of parts.
+
+It is generally preferred to use `Joining Blocks` before overriding.
+
+## Adding html to the html head
+
+Often you will want to load some more fonts or an additional CSS file. You can do so by adding a file to the head Joining Block.
+
+👉 `docs/_includes/_joiningBlocks/head/additional-styles.njk`
+
+```html
+<link rel="stylesheet" href="{{ '/_assets/additional-styles.css' | asset | url }}" />
+```
+
+This will add the html at the bottom of the head.
+
+## Adding JavaScript to the bottom of the body
+
+For executing a script you can use the `bottom` Joining Block.
+
+👉 `docs/_includes/_joiningBlocks/bottom/my-script.njk`
+
+```html
+<script>
+  console.log('hello world');
+</script>
+```
+
+If you look into `docs/_merged_includes/_joiningBlocks/bottom/` you will see a few scripts
+
+- `10-init-navigation.njk`
+- `180-service-worker-update.njk`
+- `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.
+
+If you look into the dom then you see that its order matches with the file system order.
+
+Now if you want to move your script in-between `init-nagivation` and `service-worker-update` then you can rename your file to
+
+👉 `docs/_includes/_joiningBlocks/bottom/20-my-script.njk`
+
+which brings the order to
+
+- `10-init-navigation.njk`
+- `20-my-script.njk`
+- `180-service-worker-update.njk`
+- `190-google-analytics.njk`
+
+## 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';
+```