chore: converted

.eleventyignore

@@ -0,0 +1,4 @@
+node_modules/**
+/docs/_assets
+/docs/_includes
+/docs/_data

.eslintignore

@@ -12,18 +12,3 @@ __output
 __output-dev
 
 docs/_merged*
-*-mdjs-generated.js
-*-converted-md-source.js
-*-converted-md.js
-
-__example_site-for-check-website
-
-# sanity example has a separate backend that is unrelated to Rocket
-# therefore it does not need to follow it code rules
-/examples/04-sanity-minimal-starter/backend/
-
-/packages/engine/test-node/fixtures/06-error-handling/01-page-error/docs/index.rocket.js
-/packages/engine/test-node/fixtures/03b-format-markdown/c01-md-in-js-to-md-html/md-in-js.js
-/packages/engine/test-node/fixtures/03b-format-markdown/04-keep-converted-files/index-converted-md.js
-/packages/engine/test-node/fixtures/03c-format-html/02-client-js/docs/index-converted-html.js
-/packages/engine/test-node/fixtures/03b-format-markdown/04-keep-converted-files/index-converted-md-source.js

.github/workflows/release.yml

@@ -12,29 +12,45 @@ jobs:
     name: Release
     runs-on: ubuntu-latest
     steps:
-      - uses: google/wireit@setup-github-actions-caching/v1
-
       - name: Checkout Repo
         uses: actions/checkout@master
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 14.x
         uses: actions/setup-node@master
         with:
-          node-version: 18.x
+          node-version: 14.x
           registry-url: 'https://registry.npmjs.org'
 
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
       - name: Install Dependencies
-        run: npm ci
+        run: yarn --frozen-lockfile
+
+      - name: Build Packages
+        run: yarn build:packages
+
+      - name: Build Types
+        run: yarn types
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
         uses: changesets/action@master
         with:
           # This expects you to have a script called release which does a build for your packages and calls changeset publish
-          publish: npm run release
+          publish: yarn release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/verify.yml

@@ -8,9 +8,8 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [14.x]
     steps:
-      - uses: google/wireit@setup-github-actions-caching/v1
       - uses: actions/checkout@v2
 
       - name: Setup Node ${{ matrix.node-version }}
@@ -18,17 +17,57 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
       - name: Install dependencies
-        run: npm ci
+        run: yarn --frozen-lockfile
 
-      - name: Install Playwright dependencies
-        run: npx playwright install-deps
+      - uses: microsoft/playwright-github-action@v1
 
-      - name: Install Playwright
-        run: npx playwright install
+      - name: Build Packages
+        run: yarn build:packages
 
       - name: Lint
-        run: npm run lint
+        run: yarn lint
 
       - name: Test
-        run: npm run test
+        run: yarn test
+
+  # verify-windows:
+  #   name: Verify windows
+  #   runs-on: windows-latest
+  #   steps:
+  #     - uses: actions/checkout@v2
+
+  #     - name: Setup Node 12.x
+  #       uses: actions/setup-node@v1
+  #       with:
+  #         node-version: 12.x
+
+  #     - name: Get yarn cache directory path
+  #       id: yarn-cache-dir-path
+  #       run: echo "::set-output name=dir::$(yarn cache dir)"
+
+  #     - uses: actions/cache@v2
+  #       id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+  #       with:
+  #         path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+  #         key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+  #         restore-keys: |
+  #           ${{ runner.os }}-yarn-
+
+  #     - name: Install dependencies
+  #       run: yarn --frozen-lockfile
+
+  #     - name: Test
+  #       run: yarn test

.gitignore

@@ -1,7 +1,5 @@
 ## editors
 /.idea
-/.vscode
-/.history
 
 ## system files
 .DS_Store
@@ -12,25 +10,24 @@ coverage/
 ## npm
 node_modules
 npm-debug.log
+yarn-error.log
 
 ## temp folders
 /.tmp/
 
+## we prefer yarn.lock
+package-lock.json
+## lock files in packages we do not need to save
+packages/*/yarn.lock
+
 ## build output
 dist
 dist-types
 stats.html
 *.tsbuildinfo
-.wireit
 
-# Rocket Search
-rocket-search-index.json
-
-## Rocket ignore files
+## Rocket ignore files (need to be the full relative path to the folders)
 *-mdjs-generated.js
-*-converted-md-source.js
-*-converted-md.js
-*-converted-html.js
 _site
 _site-dev
 
@@ -41,7 +38,3 @@ _merged_includes
 __output
 __output-dev
 docs_backup
-
-## Local playground
-examples/testing
-__example_site-for-check-website

.nvmrc

@@ -1 +1 @@
-v16
+v14

.vscode/settings.json

@@ -2,11 +2,9 @@
   "gitdoc.enabled": false,
   "typescript.tsdk": "node_modules/typescript/lib",
   "files.exclude": {
-    "**/*-mdjs-generated.js": false,
+    "**/*-mdjs-generated.js": true,
   },
   "search.exclude": {
     "**/*-mdjs-generated.js": true,
-    "**/dist-types": true,
-  },
-  "editor.stickyScroll.enabled": true
+  }
 }

CONTRIBUTING.md

@@ -8,34 +8,34 @@ First, create a fork of the [modernweb-dev/rocket](https://github.com/modernweb-
 
 Next, clone our repository onto your computer.
 
-```shell
+```sh
 git clone git@github.com:modernweb-dev/rocket.git
 ```
 
 Once cloning is complete, change directory to the repository.
 
-```shell
+```sh
 cd rocket
 ```
 
 Now add your fork as a remote (replacing YOUR_USERNAME with your GitHub username).
 
-```shell
+```sh
 git remote add fork git@github.com:<YOUR_USERNAME>/rocket.git
 ```
 
 Create a new local branch.
 
-```shell
+```sh
 git checkout -b my-awesome-fix
 ```
 
 ## Preparing Your Local Environment for Development
 
-Now that you have cloned the repository, ensure you have [node](https://nodejs.org/) installed, then run the following commands to set up the development environment.
+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.
 
-```shell
-npm install
+```sh
+yarn install
 ```
 
 This will download and install all packages needed.
@@ -50,7 +50,7 @@ If you're making cross-package changes, you need to compile the TypeScript code.
 
 ### Running Tests
 
-To run the tests of a package, it's recommended to `cd` into the package directory and then using `npm run test` to run them. This way you're only running tests of that specific package.
+To run the tests of a package, it's recommended to `cd` into the package directory and then using `yarn test` to run them. This way you're only running tests of that specific package.
 
 ### Integration Testing
 
@@ -58,7 +58,7 @@ To see how your changes integrate with everything together you can use the `test
 
 ## Adding New Packages
 
-For all projects the tsconfig/jsconfig configuration files are auto generated. You need to add an entry to the [./workspace-packages.ts](./workspace-packages.ts) to let it generate a config for you. After adding an entry, run `npm run update-package-configs` to generate the files for you.
+For all projects the tsconfig/jsconfig configuration files are auto generated. You need to add an entry to the [./workspace-packages.ts](./workspace-packages.ts) to let it generate a config for you. After adding an entry, run `yarn update-package-configs` to generate the files for you.
 
 ## Creating a Changeset
 
@@ -69,8 +69,8 @@ This documents your intent to release, and allows you to specify a message that
 
 Run
 
-```shell
-npm run changeset
+```sh
+yarn changeset
 ```
 
 And use the menu to select for which packages you need a release, and then select what kind of release. For the release type, we follow [Semantic Versioning](https://semver.org/), so please take a look if you're unfamiliar.
@@ -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:
 
-```shell
+```sh
 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.
 
-```shell
+```sh
 git push -u fork my-awesome-fix
 ```
 

README.md

@@ -1,10 +1,11 @@
 > This project is in its BETA phase
 
 <p align="center">
-  <picture width="60%">
-    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/modernweb-dev/rocket/main/site/src/assets/rocket-logo-dark-with-text.svg">
-    <img alt="Rocket Logo" src="https://raw.githubusercontent.com/modernweb-dev/rocket/main/site/src/assets/rocket-logo-light-with-text.svg">
-  </picture>
+  <img
+    width="60%"
+    src="./assets/logo.png"
+    alt="Rocket"
+  />
 </p>
 
 <p align="center">
@@ -20,7 +21,7 @@
   /></a>
   <a href="https://open.vscode.dev/modernweb-dev/rocket"
     ><img
-      src="https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc"
+      src="https://open.vscode.dev/badges/open-in-vscode.svg"
       alt="Open in VS Code"
   /></a>
 </p>
@@ -28,9 +29,9 @@
 <p align="center">
   <a href="https://rocket.modern-web.dev">Website</a>
   ·
-  <a href="https://rocket.modern-web.dev/docs/">Documentation</a>
+  <a href="https://rocket.modern-web.dev/guides/">Guides</a>
   ·
-  <a href="https://rocket.modern-web.dev/chat">Discord Community</a>
+  <a href="https://rocket.modern-web.dev/docs/">Documentation</a>
 </p>
 
 <h1></h1>
@@ -42,7 +43,7 @@
 - **Small:** No overblown tools or frontend frameworks, add JavaScript and/or Web Components only on pages where needed..
 
 <p align="center">
-  <a href="https://rocket.modern-web.dev/docs/setup/getting-started/"><strong>Getting Started With Rocket&nbsp;&nbsp;▶</strong></a>
+  <a href="https://rocket.modern-web.dev/guides/"><strong>Explore the Rocket Guides&nbsp;&nbsp;▶</strong></a>
 </p>
 
 ## The Goal for Rocket
@@ -54,21 +55,21 @@ 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).
 
-<p align="center">
-  <a href="https://rocket.modern-web.dev/chat"><strong>Join our Discord Community&nbsp;&nbsp;▶</strong></a>
-</p>
-
 ## Quick Start
 
 ```
-npx @rocket/create@latest
+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).
 
-If you are interested in helping contribute to Modern Web, please take a look at our [Contributing Guide](https://github.com/modernweb-dev/rocket/blob/main/CONTRIBUTING.md). Also, feel free to drop into [discord](https://rocket.modern-web.dev/chat) and say hi. 👋
+If you are interested in helping contribute to Modern Web, please take a look at our [Contributing Guide](https://github.com/modernweb-dev/rocket/blob/main/CONTRIBUTING.md). Also, feel free to drop into [slack](https://rocket.modern-web.dev/about/slack/) and say hi. 👋
 
 ### Financial Contributors
 

TODO.md

@@ -1,32 +1,31 @@
-## TODO
-
-- 404 page background images are not being loaded
-- sitemap.xml not deployed on netlify
-
 ## Features
 
+- Rename "options.docsDir" to "options.inputDir"
 - recursive rendering of lit / html / and markdown
-  - "import" markdown with frontmatter
-- mdjs update to unified v10 AND go esm only (only cjs pkg we have now)
-
-## Nice to have
-
+- 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 => does not work because of `@parcel/watcher` https://github.com/parcel-bundler/watcher/issues/99
+- add stackblitz/codesandbox examples
 
 - Example: export variable and use it in rendering
 - Example: fetch data from an api and display it
@@ -36,7 +35,6 @@
 
 - support `@change` in markdown
 - support "hey ${foo.map(f => `${f} + 1`)}"
-- ENGINE: Rename "options.docsDir" to "options.inputDir"
 
 ## consider
 

config/rocket.config.js

@@ -1,47 +0,0 @@
-import { rocketLaunch } from '@rocket/launch';
-import { rocketSpark } from '@rocket/spark';
-import { presetRocketSearch } from '@rocket/search';
-
-/**
- * Extracts the current applicable absoluteBaseUrl from Netlify system variables
- *
- * @param {string} fallback
- */
-export function absoluteBaseUrlNetlify(fallback) {
-  let absoluteBaseUrl = fallback;
-
-  switch (process.env.CONTEXT) {
-    case 'production':
-      absoluteBaseUrl = process.env.URL ?? '';
-      break;
-    case 'deploy-preview':
-      absoluteBaseUrl = process.env.DEPLOY_URL ?? '';
-      break;
-    case 'branch-deploy':
-      absoluteBaseUrl = process.env.DEPLOY_PRIME_URL ?? '';
-      break;
-    /* no default */
-  }
-  return absoluteBaseUrl;
-}
-
-export default /** @type {import('@rocket/cli/types/main').RocketCliOptions} */ ({
-  absoluteBaseUrl: absoluteBaseUrlNetlify('http://localhost:8080'),
-  longFileHeaderWidth: 100,
-  longFileHeaderComment: '// prettier-ignore',
-  // adjustDevServerOptions: (options) => ({
-  //   ...options,
-  //   nodeResolve: {
-  //     ...options.nodeResolve,
-  //     exportConditions: ['development'],
-  //   },
-  // }),
-
-  // buildOpenGraphImages: false,
-
-  presets: [rocketLaunch(), rocketSpark(), presetRocketSearch()],
-  // serviceWorkerName: 'sw.js',
-  // pathPrefix: '/_site/',
-
-  // clearOutputDir: false,
-});

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

@@ -0,0 +1,177 @@
+```js server
+/* 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:
+
+- [Node 14+](https://nodejs.org/en/)
+
+Make sure they are installed before proceeding.
+
+## Setup
+
+The fastest way to get started is by using an existing preset like the launch preset.
+
+### Step 1. Initialize the Project Package
+
+Start by creating an empty folder for your project
+
+```bash copy
+mkdir my-project
+cd my-project
+```
+
+Then initialize a package.json file
+
+<code-tabs collection="package-managers" default-tab="npm" align="end">
+
+```bash tab npm
+npm init -y
+```
+
+```bash tab yarn
+yarn init -y
+```
+
+```bash tab pnpm
+pnpm init -y
+```
+
+</code-tabs>
+
+### Step 2. Install dependencies
+
+<code-tabs collection="package-managers" default-tab="npm" align="end">
+
+```bash tab npm
+npm install --save-dev @rocket/cli @rocket/launch
+```
+
+```bash tab yarn
+yarn add -D @rocket/cli @rocket/launch
+```
+
+```bash tab pnpm
+pnpm add -D @rocket/cli @rocket/launch
+```
+
+</code-tabs>
+
+### Step 3. Bootstrap the project
+
+<code-tabs collection="package-managers" default-tab="npm" align="end">
+
+```bash tab npm
+npx rocket bootstrap
+```
+
+```bash tab yarn
+yarn rocket bootstrap
+```
+
+```bash tab pnpm
+pnpx rocket bootstrap
+```
+
+</code-tabs>
+
+The `bootstrap` command creates four files in your repo:
+
+- `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
+
+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>
+
+<details><summary>Default Files Contents</summary>
+
+<code-tabs default-tab="rocket.config.js">
+
+```js tab rocket.config.js
+import { rocketLaunch } from '@rocket/launch';
+
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default {
+  presets: [rocketLaunch()],
+};
+```
+
+```md tab docs/index.md
+# Welcome to Your Rocket Site
+
+Add your markdown content here.
+```
+
+```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/
+```
+
+</code-tabs>
+
+</details>
+
+## Add your First Page
+
+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
+
+Add your markdown content here.
+```
+
+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
+
+Now you can launch your site locally with
+
+<code-tabs collection="package-managers" default-tab="npm" align="end">
+
+```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.
+
+It can be helpful to take an inventory, before we start, to separate basic setup from the creation of content and navigation.
+
+- We built the project with basic npm commands
+- Added a couple required files manually
+- Adjusted package.json
+- **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.
+
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
+```

docs/10--guides/10--first-pages/20--adding-pages.rocket.md

@@ -0,0 +1,93 @@
+```js server
+/* 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">
+
+You can do this whole part of the tutorial in a couple minutes. It's almost _**too**_ fast.
+
+It can help to examine each new page and menu carefully, to come to terms with the implicit navigation created by your addition of new content, at least the first couple of times.
+
+</inline-notification>
+
+## Add a Section
+
+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`.
+
+```bash
+mkdir docs/guides
+```
+
+👉 `docs/guides/index.rocket.md`
+
+```md
+# Guides
+
+You can read all about...
+```
+
+Observe that this creates a section named "Guides" at the top menu bar, and a page with the same title.
+
+<inline-notification type="tip">
+
+Don't worry if this isn't how you would have styled or placed your menu bar or sidebar navigation, we'll get to customization of the default preset later in the tutorials.
+
+</inline-notification>
+
+> How many sections should I add?
+
+It might be more practical to stay below 5 sections.
+
+## Adding a Category
+
+Often each section will have multiple categories.
+
+To create a category you need to create a folder with an `index.rocket.md`.
+
+```bash
+mkdir docs/guides/first-pages/
+```
+
+👉 `docs/guides/first-pages/index.rocket.md`
+
+```md
+# First Pages
+```
+
+## Adding a Page to a Category
+
+👉 `docs/guides/first-pages/getting-started.rocket.md`
+
+```md
+# Getting Started
+
+This is how you get started.
+```
+
+## Headings as Anchor and Menu Items
+
+_**Within**_ any page, you can still add links to your navigation!
+
+Note that Markdown text prefixed with one or two # signs also becomes an anchor in the page and a link in the sidebar navigation when the page is open.
+
+```md
+## Headings as Anchor and Menu Items
+
+_**Within**_ any page, you can still add links to your navigation!
+```
+
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
+```
+
+## Example as a Reference
+
+If implicit navigation, derived from content, is a bit too much to grasp in one sitting, feel free to examine the **docs** folder in [the rocket codebase behind the pages you are reading](https://github.com/modernweb-dev/rocket) for more examples.

docs/10--guides/10--first-pages/30--use-javascript.rocket.md

@@ -0,0 +1,49 @@
+```js server
+/* 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
+```js script
+const message = 'Hello, World!';
+console.log(message);
+```
+````
+
+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
+```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.
+
+</magic-reveal>
+````
+
+## 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
+```js story
+import { html } from '@mdjs/mdjs-preview';
+
+export const StoryPreview = () => html` <p>Use stories in Rocket!</p> `;
+```
+````

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

@@ -0,0 +1,9 @@
+/* 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/10--getting-started.rocket.md

@@ -0,0 +1,44 @@
+```js server
+/* 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`
+
+You can use a preset via the config by adding it to the `presets` array
+
+<!-- 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/10--guides/20--presets/20--overriding.rocket.md

@@ -0,0 +1,34 @@
+```js server
+/* 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.
+
+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/10--guides/20--presets/index.rocket.js

@@ -0,0 +1,11 @@
+/* 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/10--getting-started.rocket.md

@@ -0,0 +1,46 @@
+```js server
+/* 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`.
+
+It typically looks something like this
+
+```js
+import { rocketLaunch } from '@rocket/launch';
+import { rocketBlog } from '@rocket/blog';
+import { rocketSearch } from '@rocket/search';
+import { absoluteBaseUrlNetlify } from '@rocket/core/helpers';
+
+export default /** @type {Partial<import('@rocket/cli').RocketCliOptions>} */ ({
+  presets: [rocketLaunch(), rocketBlog(), rocketSearch()],
+  absoluteBaseUrl: absoluteBaseUrlNetlify('http://localhost:8080'),
+});
+```
+
+The Plugins Manager helps you register and execute your plugins across the various Rocket components - Rollup, Web Dev Server, Eleventy, and Markdown. It replaces the specific registration/execution call in a given plugin system by an intent to use that plugin.
+
+## Adding Remark/Unified Plugins
+
+If you want to add a plugin to the Markdown processing you can use `setupUnifiedPlugins`.
+
+<!-- prettier-ignore-start -->
+```js
+import emoji from 'remark-emoji';
+import { addPlugin } from 'plugins-manager';
+
+/** @type {Partial<import('@rocket/cli').RocketCliOptions>} */
+export default ({
+  setupUnifiedPlugins: [addPlugin({ location: 'markdown', name: 'emoji', plugin: emoji })],
+});
+```
+<!-- prettier-ignore-end -->
+
+For plugins that should handle the Markdown <abbr title="Abstract Syntax Tree">AST</abbr> you should use `addPlugin({ location: 'markdown', name: 'my-plugin', plugin: MyPlugin})`. <br>
+While for the rehype AST you should use `addPlugin({ location: 'remark2rehype', name: 'my-plugin', plugin: MyPlugin})`.

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

@@ -0,0 +1,9 @@
+/* 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/10--overview.rocket.md

@@ -0,0 +1,62 @@
+```js server
+/* 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".
+
+## Add a Not Found Page
+
+When a user enters a URL that does not exist, a "famous" 404 Page Not Found error occurs.
+Many servers are configured to handle this automatically and to serve a 404.html page instead.
+
+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.
+
+👉 `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.
+
+You can create one by adding this file:
+
+👉 `docs/sitemap.njk`
+
+```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">
+  {% raw %}{% for page in collections.all %}
+    {%- if page.url !== '/404.html' -%}
+    <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>
+    {%- endif -%}
+  {% endfor %}{% endraw %}
+</urlset>
+```

docs/10--guides/40--go-live/20--social-media.rocket.md

@@ -0,0 +1,170 @@
+```js server
+/* 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:
+
+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.
+
+## Setting it via Front Matter
+
+You can create your own image and link it with something like this
+
+```markdown copy
+---
+socialMediaImage: path/to/my/image.png
+---
+```
+
+## Providing Your Own Text
+
+Sometimes extracting the title + title of parent is not enough but you still want to use the "default image".
+
+You can create an `11tydata.cjs` file next to your page. If your page is `docs/guides/overview.md` then you create a `docs/guides/overview.11tydata.cjs`.
+
+In there you can use the default `createSocialImage` but provide your own values.
+
+```js copy
+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',
+    // you can also override the svg only for this page by providing
+    // createSocialImageSvg: async () => '{%raw%}<svg>...</svg>{%endraw%}'
+  });
+  return {
+    socialMediaImage,
+  };
+};
+```
+
+## Override the Default Image
+
+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.js`
+
+<!-- prettier-ignore-start -->
+```js copy
+import { adjustPluginOptions } from 'plugins-manager';
+
+/** @type {import('@rocket/cli').RocketCliOptions} */
+export default ({
+  setupEleventyComputedConfig: [
+    adjustPluginOptions('socialMediaImage', {
+      createSocialImageSvg: async ({
+        title = '',
+        subTitle = '',
+        subTitle2 = '',
+        footer = '',
+        logo = '',
+      }) => {
+        let svgStr = `
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" style="fill: #ecedef;">
+            <defs/>
+            <rect width="100%" height="100%" fill="#38393e"/>
+            <g transform="matrix(0.45, 0, 0, 0.45, 300, 60)">${logo}</g>
+            <g style="
+              font-size: 70px;
+              text-anchor: middle;
+              font-family: 'Bitstream Vera Sans','Helvetica',sans-serif;
+              font-weight: 700;
+            ">
+              <text x="50%" y="470">
+                ${title}
+              </text>
+              <text x="50%" y="520" style="font-size: 30px;">
+                ${subTitle}
+              </text>
+            </g>
+            <text x="10" y="620" style="font-size: 30px; fill: gray;">
+              ${footer}
+            </text>
+          </svg>
+        `;
+        return svgStr;
+      },
+    }),
+  ],
+});
+```
+<!-- 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.
+
+<!-- prettier-ignore-start -->
+<code-tabs default-tab="rocket.config.js">
+
+```js tab rocket.config.js
+import { adjustPluginOptions } from 'plugins-manager';
+
+/** @type {import('@rocket/cli').RocketCliOptions} */
+export default ({
+  setupEleventyComputedConfig: [
+    adjustPluginOptions('socialMediaImage', {
+      createSocialImageSvg: async (args = {}) => {
+        const svgBuffer = await fs.promises.readFile('/path/to/your/template.svg');
+        const svg = logoBuffer.toString();
+        return nunjucks.renderString(svg, args);
+      },
+    }),
+  ],
+});
+```
+
+```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
+
+<!-- prettier-ignore-start -->
+```js copy
+export default ({
+  start: {
+    createSocialMediaImages: true,
+  },
+});
+```
+<!-- prettier-ignore-end -->
+
+Similarly, if you never want to create social media images even during build then you can globally disable it via
+
+<!-- prettier-ignore-start -->
+```js copy
+export default ({
+  createSocialMediaImages: true,
+});
+```
+<!-- prettier-ignore-end -->

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

@@ -0,0 +1,9 @@
+/* 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/10--guides/index.rocket.md

@@ -0,0 +1,28 @@
+```js server
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = '10--guides/index.rocket.md';
+import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../recursive.data.js';
+export { pageTree, setupUnifiedPlugins, footerMenu, layout };
+/* 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.
+
+- [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/20--docs/10--configuration/10--overview.rocket.md

@@ -0,0 +1,105 @@
+```js server
+/* 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:
+
+```js
+import { rocketLaunch } from '@rocket/launch';
+
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default {
+  presets: [rocketLaunch()],
+  emptyOutputDir: true,
+  pathPrefix: 'subfolder-only-for-build',
+};
+```
+
+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.
+
+```js
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default {
+  // 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: [],
+
+  // add a plugin to the web dev server (will not be wrapped) (e.g. esbuild for TypeScript)
+  setupDevServerPlugins: [],
+
+  // add a plugin to the rollup build (e.g. optimization steps)
+  setupBuildPlugins: [],
+
+  // add a plugin to the cli (e.g. a new command like "rocket my-command")
+  setupCliPlugins: [],
+};
+```
+
+## Adding Rollup Plugins
+
+For some projects you might want to enable non-standard behaviors like importing JSON files as JavaScript.
+
+```js
+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:
+
+```js
+import json from '@rollup/plugin-json';
+import { addPlugin } from 'plugins-manager';
+
+/** @type {import('@rocket/cli').RocketCliOptions} */
+export default {
+  setupDevServerAndBuildPlugins: [
+    addPlugin({ name: 'json', plugin: json, location: 'top', options: { my: 'settings' } }),
+  ],
+};
+```
+
+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.
+
+## Modifying Options of Plugins
+
+All plugins which are either default or are added via a preset can still be adjusted by using `adjustPluginOptions`.
+
+```js
+import { adjustPluginOptions } from 'plugins-manager';
+
+/** @type {import('@rocket/cli').RocketCliOptions} */
+export default {
+  setupDevServerAndBuildPlugins: [adjustPluginOptions('json', { my: 'overwrite settings' })],
+};
+```
+
+## Advanced
+
+Sometimes you need even more control over specific settings.
+
+### Rollup
+
+For example if you wanna add an `acron` plugin to rollup
+
+```js
+import { importAssertions } from 'acorn-import-assertions';
+
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default {
+  rollup: config => ({
+    ...config,
+    acornInjectPlugins: [importAssertions],
+  }),
+};
+```

docs/20--docs/10--configuration/20--service-worker.rocket.md

@@ -0,0 +1,54 @@
+```js server
+/* 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
+
+- cache already visited pages
+- cache assets of visited pages (up to 100 files then it replaces older entries)
+- reload the page if a newer html page version is available on service worker activation
+
+## Adjusting the file name
+
+Changing the service worker file name can be quite a hassle so you can adjust generate file name via a config.
+
+👉 `rocket.config.js`
+
+```js
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default {
+  serviceWorkerName: 'my-service-worker-name.js',
+};
+```
+
+## Meet the Service Worker
+
+The default service worker will work for many scenarios however your needs my vary.
+To enable different service worker strategies you can replace the default service worker code by providing a file at `_assets/service-worker.js`.
+This file will be auto transformed and generated in the root of the website using the defined `serviceWorkerName`.
+
+For inspiration, you can take a look at the default config.
+
+[https://github.com/modernweb-dev/rocket/blob/main/packages/cli/preset/\_assets/service-worker.js](https://github.com/modernweb-dev/rocket/blob/main/packages/cli/preset/_assets/service-worker.js)
+
+Be sure to check out [workbox](https://developers.google.com/web/tools/workbox) for more service worker magic.
+
+And if you wanna have a 30 minutes crash course we highly recommend the talk [Service Workers For The Rest Of Us](https://vimeo.com/362260166) by [Philip Walton](https://twitter.com/philwalton).
+
+## Registration
+
+The registration happens via another file that you can also overwrite at `_assets/scripts/registerServiceWorker.js`.
+
+Below you find the default implementation.
+
+<!-- prettier-ignore-start -->
+```js
+{{ '/_assets/scripts/registerServiceWorker.js' | asset | toAbsPath | inlineFilePath; }}
+```
+<!-- prettier-ignore-end -->

docs/20--docs/10--configuration/30--images.rocket.md

@@ -1,45 +1,19 @@
 ```js server
 /* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '10--docs/30--guides/30--images.rocket.md';
-// prettier-ignore
-import { html, layout, setupUnifiedPlugins, components, openGraphLayout } from '../../recursive.data.js';
-export { html, layout, setupUnifiedPlugins, components, openGraphLayout };
-export async function registerCustomElements() {
-  // server-only components
-  // prettier-ignore
-  customElements.define('rocket-social-link', await import('@rocket/components/social-link.js').then(m => m.RocketSocialLink));
-  // prettier-ignore
-  customElements.define('rocket-header', await import('@rocket/components/header.js').then(m => m.RocketHeader));
-  // prettier-ignore
-  customElements.define('inline-notification', await import('@rocket/components/inline-notification.js').then(m => m.InlineNotification));
-  // prettier-ignore
-  customElements.define('rocket-main-docs', await import('@rocket/components/main-docs.js').then(m => m.RocketMainDocs));
-  // prettier-ignore
-  customElements.define('rocket-content-area', await import('@rocket/components/content-area.js').then(m => m.RocketContentArea));
-  // hydrate-able components
-  // prettier-ignore
-  customElements.define('rocket-search', await import('@rocket/search/search.js').then(m => m.RocketSearch));
-  // prettier-ignore
-  customElements.define('rocket-drawer', await import('@rocket/components/drawer.js').then(m => m.RocketDrawer));
-}
-export const needsLoader = true;
+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
 
-<inline-notification type="danger">
-
-THIS IS NOT YET IMPLEMENTED
-
-</inline-notification>
-
 Rocket does handle content images automatically by
 
 - producing multiple sizes so users download images that are meant for their resolution
 - outputting multiple formats so the device can choose the best image format it supports
 
-And the best thing is you don't need to do anything.
+And the best thing about is you don't need to do anything.
 
 ## Usage
 
@@ -110,21 +84,22 @@ will result in
 
 ## Adjusting options
 
-Under the hood it is using [11ty/image](https://www.11ty.dev/docs/plugins/image/) and all its options are available.
+Under the hood it is using [11ty/image](https://www.11ty.dev/docs/plugins/image/) and all it's options are available.
 
 <inline-notification type="tip">
 
-If you are using a layout preset like `@rocket/launch` then you probably don't want to touch/change these options as the preset will set it for you according to its layout needs.
+If you are using a layout preset like `@rocket/launch` then you probably don't want to touch/change these options as the preset will set it for you accordion to its layout needs.
 
 The default preset for regular markdown content is available as `responsive`.
 
 </inline-notification>
 
-👉 `config/rocket.config.js`
+👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
   imagePresets: {
     responsive: {
       widths: [300, 820],
@@ -132,8 +107,9 @@ export default {
       sizes: '(min-width: 1024px) 820px, calc(100vw - 20px)',
     },
   },
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 ## Ignoring Images
 
@@ -181,11 +157,12 @@ and you can adjust it by setting it via the `imagePreset`.
 
 For this example we want to also ignore `.jpeg` files.
 
-👉 `config/rocket.config.js`
+👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
   imagePresets: {
     responsive: {
       // ...
@@ -193,8 +170,9 @@ export default {
         src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
     },
   },
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 With that setting we get the following behavior
 
@@ -216,9 +194,10 @@ becomes
 
 You can add your own image preset like so
 
+<!-- prettier-ignore-start -->
 ```js
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
   imagePresets: {
     'my-image-preset': {
       widths: [30, 60],
@@ -226,8 +205,9 @@ export default {
       sizes: '(min-width: 1024px) 30px, 60px',
     },
   },
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 Once that `imagePreset` is defined you can use it by adding it to any `img` tag.
 
@@ -267,22 +247,24 @@ To learn more about `avif` take a look at [AVIF has landed](https://jakearchibal
 
 If you want to add `webp` (or replace `avif` with it) you can do so by setting the formats
 
-👉 `config/rocket.config.js`
+👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
   imagePresets: {
     responsive: {
       formats: ['avif', 'webp', 'jpeg'],
     },
   },
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 ## Default widths
 
-In order to understand the need for having a single image in multiple resolutions we need to understand that our website is served to many different environments and each may come with its own specific device pixel ratio (DPR). The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the Galaxy S20 report a device pixel ratio of 3, because the physical linear resolution is triple the logical linear resolution.
+In order to understand the need for having a single image in multiple resolutions we need to understand the our website is served to many different environments and each may come with its own specific device pixel ratio (DPR). The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the Galaxy S20 report a device pixel ratio of 3, because the physical linear resolution is triple the logical linear resolution.
 
 Physical resolution: 1440 x 3200
 Logical resolution: 480 x 1067
@@ -298,19 +280,21 @@ By default, we generate the following widths `600`, `900` and `1640` because
 
 If you want to add more widths you can add them to `widths`.
 
-👉 `config/rocket.config.js`
+👉 `rocket.config.js`
 
+<!-- prettier-ignore-start -->
 ```js
 /** @type {import('rocket/cli').RocketCliConfig} */
-export default {
+export default ({
   imagePresets: {
     responsive: {
       widths: [300, 600, 900, 1200, 1640],
       sizes: '(min-width: 1024px) 820px, calc(100vw - 20px)',
     },
   },
-};
+});
 ```
+<!-- prettier-ignore-end -->
 
 <inline-notification type="tip">
 
@@ -332,3 +316,7 @@ export function myPreset() {
 ```
 
 </inline-notification>
+
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
+```

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

@@ -0,0 +1,10 @@
+/* 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/10--joining-blocks.rocket.md

@@ -0,0 +1,110 @@
+```js server
+/* 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.
+
+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 %}
+  {% endfor %}
+</footer>
+```
+
+{% endraw %}
+
+This will now render all templates within `_includes/_joiningBlocks/footer/*`.
+
+## Adding content without overriding
+
+Let's assume we have a preset with the following files
+
+👉 `_includes/_joiningBlocks/footer/10-first.njk`
+
+```html
+<p>first</p>
+```
+
+👉 `_includes/_joiningBlocks/footer/20-second.njk`
+
+```html
+<p>second</p>
+```
+
+And it produces this in your website
+
+```html
+<footer>
+  <p>first</p>
+  <p>second</p>
+</footer>
+```
+
+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
+<p>in-between</p>
+```
+
+the final output will be
+
+```html
+<footer>
+  <p>first</p>
+  <p>in-between</p>
+  <p>second</p>
+</footer>
+```
+
+## Overriding Content
+
+Now if you want to overwrite you can use the same filename.
+
+👉 `docs/_includes/_joiningBlocks/footer/10-first.njk`
+
+```html
+<p>updated first</p>
+```
+
+the final output will be
+
+```html
+<footer>
+  <p>updated first</p>
+  <p>second</p>
+</footer>
+```
+
+## Reordering and Overriding
+
+Sometimes you wanna reorder when you overwrite as well
+
+👉 `docs/_includes/_joiningBlocks/footer/30-first.njk`
+
+```html
+<p>first</p>
+```
+
+the final output will be
+
+```html
+<footer>
+  <p>second</p>
+  <p>first</p>
+</footer>
+```
+
+Note: Reordering always requires you to overwrite as well.

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

@@ -0,0 +1,10 @@
+/* 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/20--launch/overview.rocket.md

@@ -0,0 +1,155 @@
+```js server
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = '20--docs/20--presets/20--launch/overview.rocket.md';
+import { pageTree, setupUnifiedPlugins, footerMenu, layout } from '../../../recursive.data.js';
+export { pageTree, setupUnifiedPlugins, footerMenu, layout };
+/* END - Rocket auto generated - do not touch */
+```
+
+```js server
+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.
+
+## Installation
+
+Install `@rocket/launch` from the NPM repository using your favourite package manager.
+
+<code-tabs collection="package-managers" default-tab="npm" align="end">
+
+```bash tab npm
+npm i @rocket/launch
+```
+
+```bash tab yarn
+yarn add @rocket/launch
+```
+
+```bash tab pnpm
+pnpm add @rocket/launch
+```
+
+</code-tabs>
+
+## Usage
+
+👉 `rocket.config.js`
+
+```js
+import { rocketLaunch } from '@rocket/launch';
+
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default {
+  presets: [rocketLaunch()],
+};
+```
+
+## Data
+
+You can define your own data for the available Layouts.
+
+## Inline Notification
+
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
+```
+
+Launch ships with `<inline-notification>`, a custom element that applies some styles similar to "info boxes". The element works for `<noscript>` users as well, as long as you don't [override](/guides/presets/overriding/) the default `noscript.css` file.
+
+To add an inline notification you need to remember to import the element definition:
+
+````md
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
+```
+````
+
+Then you can add your notification to the page. If you want to write the notification's content using markdown, just pad the opening and closing tags with empty lines.
+
+There are three varieties of `<inline-notification>`, "tip", "warning", and "danger"
+
+<style>
+#inline-notifications::part(tab) {
+  text-transform: capitalize;
+}
+#inline-notifications code-tab::part(content) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+#inline-notifications code-copy::part(copy-button) {
+  position: absolute;
+  top: 10px;
+  border-radius: 6px;
+  border: 1px solid var(--primary-lines-color);
+}
+</style>
+
+<inline-notification type="tip">
+
+Take a tip from me
+
+</inline-notification>
+
+```md
+<inline-notification type="tip">
+
+Take a tip from me
+
+</inline-notification>
+```
+
+<inline-notification type="warning">
+
+Be _sure_ about this...
+
+</inline-notification>
+
+```md
+<inline-notification type="warning">
+
+Be _sure_ about this...
+
+</inline-notification>
+```
+
+<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.
+
+<inline-notification type="tip" title="success">
+
+I am a success message
+
+</inline-notification>
+
+```md
+<inline-notification type="tip" title="success">
+
+I am a success message
+
+</inline-notification>
+```
+
+<inline-notification type="warning">
+
+The `title` attribute does not change the title for `<noscript>` users, so don't include any critical information in it.
+
+</inline-notification>

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

@@ -0,0 +1,10 @@
+/* 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/30--search/overview.rocket.md

@@ -0,0 +1,42 @@
+```js server
+/* 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.
+
+## Installation
+
+<code-tabs collection="package-managers" default-tab="npm" align="end">
+
+```bash tab npm
+npm i @rocket/search
+```
+
+```bash tab yarn
+yarn add @rocket/search
+```
+
+```bash tab pnpm
+pnpm add @rocket/search
+```
+
+</code-tabs>
+
+## Usage
+
+👉 `rocket.config.js`
+
+```js
+import { rocketSearch } from '@rocket/search';
+
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default {
+  presets: [rocketSearch()],
+};
+```

docs/20--docs/20--presets/40--blog.rocket.md

@@ -0,0 +1,42 @@
+```js server
+/* 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.
+
+## Installation
+
+<code-tabs collection="package-managers" default-tab="npm" align="end">
+
+```bash tab npm
+npm i @rocket/blog
+```
+
+```bash tab yarn
+yarn add @rocket/blog
+```
+
+```bash tab pnpm
+pnpm add @rocket/blog
+```
+
+</code-tabs>
+
+## Usage
+
+👉 `rocket.config.js`
+
+```js
+import { rocketBlog } from '@rocket/blog';
+
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default {
+  presets: [rocketBlog()],
+};
+```

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

@@ -0,0 +1,10 @@
+/* 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/10--overview.rocket.md

@@ -1,35 +1,14 @@
 ```js server
 /* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '30--tools/20--markdown-javascript/10--overview.rocket.md';
-// prettier-ignore
-import { html, layout, setupUnifiedPlugins, components, openGraphLayout } from '../../recursive.data.js';
-export { html, layout, setupUnifiedPlugins, components, openGraphLayout };
-export async function registerCustomElements() {
-  // server-only components
-  // prettier-ignore
-  customElements.define('rocket-social-link', await import('@rocket/components/social-link.js').then(m => m.RocketSocialLink));
-  // prettier-ignore
-  customElements.define('rocket-header', await import('@rocket/components/header.js').then(m => m.RocketHeader));
-  // prettier-ignore
-  customElements.define('rocket-main-docs', await import('@rocket/components/main-docs.js').then(m => m.RocketMainDocs));
-  // prettier-ignore
-  customElements.define('rocket-content-area', await import('@rocket/components/content-area.js').then(m => m.RocketContentArea));
-  // hydrate-able components
-  // prettier-ignore
-  customElements.define('rocket-search', await import('@rocket/search/search.js').then(m => m.RocketSearch));
-  // prettier-ignore
-  customElements.define('rocket-drawer', await import('@rocket/components/drawer.js').then(m => m.RocketDrawer));
-}
-export const needsLoader = true;
+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 */
-
-export const title = 'Markdown JavaScript';
-export const subTitle = 'Executable JavaScript in markdown by annotating code blocks';
 ```
 
 # Overview
 
-```js client
+```js script
 import '@mdjs/mdjs-story/define';
 import '@mdjs/mdjs-preview/define';
 import { html } from '@mdjs/mdjs-story';
@@ -37,10 +16,10 @@ import { html } from '@mdjs/mdjs-story';
 
 Markdown JavaScript (mdjs) is a format that allows you to use JavaScript with Markdown, to create interactive demos. It does so by "annotating" JavaScript that should be executed in Markdown.
 
-To annotate we use a code block with `js client`.
+To annotate we use a code block with `js script`.
 
 ````md
-```js client
+```js script
 // execute me
 ```
 ````
@@ -72,7 +51,7 @@ You can even execute some JavaScript:
 
 <my-el></my-el>
 
-```js client
+```js script
 import { LitElement, html } from 'https://unpkg.com/lit-element?module';
 
 class MyEl extends LitElement {
@@ -90,7 +69,7 @@ customElements.define('my-el', MyEl);
 mdjs comes with some additional helpers you can choose to import:
 
 ````md
-```js client
+```js script
 import '@mdjs/mdjs-story/define';
 import '@mdjs/mdjs-preview/define';
 ```
@@ -121,7 +100,7 @@ export const JsStory = () => html` <demo-wc-card>JS Story</demo-wc-card> `;
 export const JsStory = () => {
   const calculateSomething = 12;
   return html`
-    <demo-wc-card .header="\\${`Something: \\${calculateSomething}`}">JS Story</demo-wc-card>
+    <demo-wc-card .header=${`Something: ${calculateSomething}`}>JS Story</demo-wc-card>
   `;
 };
 ```

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

@@ -1,28 +1,8 @@
 ```js server
 /* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '30--tools/20--markdown-javascript/20--preview.rocket.md';
-// prettier-ignore
-import { html, layout, setupUnifiedPlugins, components, openGraphLayout } from '../../recursive.data.js';
-export { html, layout, setupUnifiedPlugins, components, openGraphLayout };
-export async function registerCustomElements() {
-  // server-only components
-  // prettier-ignore
-  customElements.define('rocket-social-link', await import('@rocket/components/social-link.js').then(m => m.RocketSocialLink));
-  // prettier-ignore
-  customElements.define('rocket-header', await import('@rocket/components/header.js').then(m => m.RocketHeader));
-  // prettier-ignore
-  customElements.define('inline-notification', await import('@rocket/components/inline-notification.js').then(m => m.InlineNotification));
-  // prettier-ignore
-  customElements.define('rocket-main-docs', await import('@rocket/components/main-docs.js').then(m => m.RocketMainDocs));
-  // prettier-ignore
-  customElements.define('rocket-content-area', await import('@rocket/components/content-area.js').then(m => m.RocketContentArea));
-  // hydrate-able components
-  // prettier-ignore
-  customElements.define('rocket-search', await import('@rocket/search/search.js').then(m => m.RocketSearch));
-  // prettier-ignore
-  customElements.define('rocket-drawer', await import('@rocket/components/drawer.js').then(m => m.RocketDrawer));
-}
-export const needsLoader = true;
+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 */
 ```
 
@@ -44,7 +24,7 @@ You can showcase live running code by annotating a code block with `js preview-s
 - Settings are ”global” for all Simulators (e.g. changing one will change all)
 - Settings can be remembered for other pages / return visits
 
-```js client
+```js script
 import { html } from '@mdjs/mdjs-preview';
 import './assets/demo-element.js';
 ```
@@ -52,7 +32,7 @@ import './assets/demo-element.js';
 ## JavaScript Story
 
 ````md
-```js client
+```js script
 import { html } from '@mdjs/mdjs-preview';
 import './assets/demo-element.js';
 ```
@@ -160,7 +140,7 @@ excludeFromSearch: true
 ---
 ```
 
-Once you have that you need to configure it for the story renderer by setting it in your `config/rocket.config.js`.
+Once you have that you need to configure it for the story renderer by setting it in your `rocket.config.js`.
 
 <!-- prettier-ignore-start -->
 ```js
@@ -254,27 +234,6 @@ class DemoElement extends HTMLElement {
 customElements.define('demo-element', DemoElement);
 ```
 
-## Extending mdjs-preview
-
-It is possible to define a custom version of mdjs-preview in order to add functionality, change
-its appearance of make it run in 'hybrid mode' (accepting both lit1 and -2 TemplateResults).
-The example below shows how the latter can be achieved by providing a custom render function.
-Note that we define `mdjs-preview` as the custom element name. We need to make sure that this
-file is executed before the original mdjs-preview definition file is executed.
-
-```js
-import { MdJsPreview } from '@mdjs/mdjs-preview';
-import { render as render2 } from 'lit';
-import { isTemplateResult as isTemplateResult2 } from 'lit/directive-helpers.js';
-import { render as render1  } from 'lit-html';
-
-export class HybridLitMdjsPreview extends MdJsPreview {
-  renderStory(html, container, options) {
-    if (isTemplateResult2(html)) {
-      render2(html, container, options);
-    } else {
-      render1(html, container, options);
-    }
-  }
-customElements.define('mdjs-preview', HybridLitMdjsPreview);
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
 ```

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

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

@@ -0,0 +1,10 @@
+/* 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/10--plugins-manager.rocket.md

@@ -1,32 +1,12 @@
 ```js server
 /* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '30--tools/10--plugins-manager/10--overview.rocket.md';
-// prettier-ignore
-import { html, layout, setupUnifiedPlugins, components, openGraphLayout } from '../../recursive.data.js';
-export { html, layout, setupUnifiedPlugins, components, openGraphLayout };
-export async function registerCustomElements() {
-  // server-only components
-  // prettier-ignore
-  customElements.define('rocket-social-link', await import('@rocket/components/social-link.js').then(m => m.RocketSocialLink));
-  // prettier-ignore
-  customElements.define('rocket-header', await import('@rocket/components/header.js').then(m => m.RocketHeader));
-  // prettier-ignore
-  customElements.define('rocket-main-docs', await import('@rocket/components/main-docs.js').then(m => m.RocketMainDocs));
-  // prettier-ignore
-  customElements.define('rocket-content-area', await import('@rocket/components/content-area.js').then(m => m.RocketContentArea));
-  // hydrate-able components
-  // prettier-ignore
-  customElements.define('rocket-search', await import('@rocket/search/search.js').then(m => m.RocketSearch));
-  // prettier-ignore
-  customElements.define('rocket-drawer', await import('@rocket/components/drawer.js').then(m => m.RocketDrawer));
-}
-export const needsLoader = true;
+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 */
-export const title = 'Plugins Manager';
-export const subTitle = 'Enable fully customizable options for your plugin system';
 ```
 
-# Overview
+# 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.
@@ -140,13 +120,16 @@ 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';
 
-export default /** @type {import('rocket/cli').RocketCliConfig} */ ({
+/** @type {import('rocket/cli').RocketCliConfig} */
+export default ({
   plugins: [json({ preferConst: true })],
 });
 ```
+<!-- prettier-ignore-end -->
 
 or add it in a special way like in `eleventy`
 
@@ -279,18 +262,6 @@ 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/20--docs/50--tools/20--rollup-config.rocket.md

@@ -1,34 +1,12 @@
 ```js server
 /* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '30--tools/30--rollup-config/10--overview.rocket.md';
-// prettier-ignore
-import { html, layout, setupUnifiedPlugins, components, openGraphLayout } from '../../recursive.data.js';
-export { html, layout, setupUnifiedPlugins, components, openGraphLayout };
-export async function registerCustomElements() {
-  // server-only components
-  // prettier-ignore
-  customElements.define('rocket-social-link', await import('@rocket/components/social-link.js').then(m => m.RocketSocialLink));
-  // prettier-ignore
-  customElements.define('rocket-header', await import('@rocket/components/header.js').then(m => m.RocketHeader));
-  // prettier-ignore
-  customElements.define('rocket-main-docs', await import('@rocket/components/main-docs.js').then(m => m.RocketMainDocs));
-  // prettier-ignore
-  customElements.define('rocket-content-area', await import('@rocket/components/content-area.js').then(m => m.RocketContentArea));
-  // hydrate-able components
-  // prettier-ignore
-  customElements.define('rocket-search', await import('@rocket/search/search.js').then(m => m.RocketSearch));
-  // prettier-ignore
-  customElements.define('rocket-drawer', await import('@rocket/components/drawer.js').then(m => m.RocketDrawer));
-}
-export const needsLoader = true;
+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 */
-
-export const title = 'Rocket Rollup Config';
-export const subTitle =
-  'A ready to use and customizable rollup config for web sites, MPAs and SPAs';
 ```
 
-# Overview
+# 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.
@@ -81,7 +59,7 @@ You write modern JavaScript using the latest browser features. Rollup will optim
 
 Our config sets you up with good defaults for most projects. Additionally you can add more plugins and adjust predefined plugins or even remove them if needed.
 
-We use the [plugins-manager](../10--plugins-manager/10--overview.rocket.md) for it.
+We use the [plugins-manager](./plugins-manager.md) for it.
 
 ### Customizing the Babel Config
 
@@ -112,7 +90,7 @@ SPA and MPA plugins:
 - [polyfills-loader](https://modern-web.dev/docs/building/rollup-plugin-polyfills-loader/)
 - [workbox](https://www.npmjs.com/package/rollup-plugin-workbox)
 
-You can customize options for these plugins by using [adjustPluginOptions](../10--plugins-manager/10--overview.rocket.md#adjusting-plugin-options).
+You can customize options for these plugins by using [adjustPluginOptions](./plugins-manager.md#adjusting-plugin-options).
 
 ```js
 import { createSpaConfig } from '@rocket/building-rollup';

docs/20--docs/50--tools/30--check-html-links.rocket.md

@@ -1,41 +1,22 @@
 ```js server
 /* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '30--tools/40--check-html-links/10--overview.rocket.md';
-// prettier-ignore
-import { html, layout, setupUnifiedPlugins, components, openGraphLayout } from '../../recursive.data.js';
-export { html, layout, setupUnifiedPlugins, components, openGraphLayout };
-export async function registerCustomElements() {
-  // server-only components
-  // prettier-ignore
-  customElements.define('rocket-social-link', await import('@rocket/components/social-link.js').then(m => m.RocketSocialLink));
-  // prettier-ignore
-  customElements.define('rocket-header', await import('@rocket/components/header.js').then(m => m.RocketHeader));
-  // prettier-ignore
-  customElements.define('inline-notification', await import('@rocket/components/inline-notification.js').then(m => m.InlineNotification));
-  // prettier-ignore
-  customElements.define('rocket-main-docs', await import('@rocket/components/main-docs.js').then(m => m.RocketMainDocs));
-  // prettier-ignore
-  customElements.define('rocket-content-area', await import('@rocket/components/content-area.js').then(m => m.RocketContentArea));
-  // hydrate-able components
-  // prettier-ignore
-  customElements.define('rocket-search', await import('@rocket/search/search.js').then(m => m.RocketSearch));
-  // prettier-ignore
-  customElements.define('rocket-drawer', await import('@rocket/components/drawer.js').then(m => m.RocketDrawer));
-}
-export const needsLoader = true;
+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 */
-
-export const title = 'Check HTML links';
-export const subTitle = 'A fast checker for broken links/references in HTML files';
 ```
 
-# Overview
+# Check HTML Links
 
-A fast checker for broken links/references in HTML files.
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
+```
+
+A fast checker for broken links/references in HTML.
 
 <inline-notification type="tip">
 
-Read the [Introducing Check HTML Links - no more bad links](../../40--blog/001--introducing-check-html-links.rocket.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>
 
@@ -49,7 +30,7 @@ Read the [Introducing Check HTML Links - no more bad links](../../40--blog/001--
 
 ## Installation
 
-```shell
+```
 npm i -D check-html-links
 ```
 
@@ -60,8 +41,6 @@ npm i -D check-html-links
 | root-dir            | string  | the root directory to serve files from. Defaults to the current working directory                   |
 | ignore-link-pattern | string  | do not check links matching the pattern                                                             |
 | continue-on-error   | boolean | if present it will not exit with an error code - useful while writing or for temporary passing a ci |
-| validate-externals  | boolean | if present it will validate external links making a request to the linked url                       |
-| absolute-base-url   | string  | the urls of your website - if provided it will handle absolute links that start with it as internal |
 
 ## Usage Examples
 
@@ -74,12 +53,6 @@ npx check-html-links _site --ignore-link-pattern "/users/*" "/users/**/*"
 
 # ignore all links like <a href="/users/123"> & <a href="/users/123/details">
 npx check-html-links _site --ignore-link-pattern "/users/*" "/users/**/*"
-
-# check external urls
-npx check-html-links _site --validate-externals
-
-# check external urls but treat links like https://rocket.modern-web.dev/about/ as internal
-npx check-html-links _site --validate-externals --absolute-base-url https://rocket.modern-web.dev
 ```
 
 ## Example Output

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

@@ -0,0 +1,10 @@
+/* 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/20--docs/index.rocket.md

@@ -0,0 +1,36 @@
+```js server
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = '20--docs/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:link.text" content="Docs" />
+
+# Documentation
+
+Here you will find all the details for each of the packages/systems we offer.
+
+## Contents
+
+- [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/30--blog/index.rocket.js

@@ -0,0 +1,15 @@
+/* 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/30--blog/introducing-check-html-links.rocket.md

@@ -1,42 +1,16 @@
 ```js server
 /* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = '40--blog/001--introducing-check-html-links/index.rocket.md';
-import { html, setupUnifiedPlugins, components, openGraphLayout } from '../../recursive.data.js';
-import { layout } from '../recursive.data.js';
-export { html, layout, setupUnifiedPlugins, components, openGraphLayout };
-export async function registerCustomElements() {
-  // server-only components
-  // prettier-ignore
-  customElements.define('rocket-social-link', await import('@rocket/components/social-link.js').then(m => m.RocketSocialLink));
-  // prettier-ignore
-  customElements.define('rocket-header', await import('@rocket/components/header.js').then(m => m.RocketHeader));
-  // prettier-ignore
-  customElements.define('launch-blog-details', await import('@rocket/launch/blog-details.js').then(m => m.LaunchBlogDetails));
-  // prettier-ignore
-  customElements.define('rocket-main', await import('@rocket/components/main.js').then(m => m.RocketMain));
-  // prettier-ignore
-  customElements.define('rocket-content-area', await import('@rocket/components/content-area.js').then(m => m.RocketContentArea));
-  // hydrate-able components
-  // prettier-ignore
-  customElements.define('rocket-search', await import('@rocket/search/search.js').then(m => m.RocketSearch));
-  // prettier-ignore
-  customElements.define('rocket-drawer', await import('@rocket/components/drawer.js').then(m => m.RocketDrawer));
-}
-export const needsLoader = true;
+export const sourceRelativeFilePath = '30--blog/introducing-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 */
-import { thomas } from '../../../src/data/authors.js';
-
-export const description =
-  'A tool that checks the validity of all your HTML links of your whole website.';
-export const publishDate = new Date('2021-05-09');
 
 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
-
-export const authors = [thomas];
 ```
 
-# Introducing Check HTML Links
+# 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)**
 
@@ -172,7 +146,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/404.html.rocket.js

@@ -1,7 +1,7 @@
 /* START - Rocket auto generated - do not touch */
 export const sourceRelativeFilePath = '404.html.rocket.js';
-import { html, setupUnifiedPlugins, components, openGraphLayout } from './recursive.data.js';
-export { html, setupUnifiedPlugins, components, openGraphLayout };
+import { pageTree, setupUnifiedPlugins, footerMenu } from './recursive.data.js';
+export { pageTree, setupUnifiedPlugins, footerMenu };
 /* END - Rocket auto generated - do not touch */
 
 import { Layout404 } from '@rocket/launch';

docs/about/index.rocket.md

@@ -0,0 +1,11 @@
+```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.rocket.md

@@ -0,0 +1,13 @@
+```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.rocket.md

@@ -0,0 +1,13 @@
+```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/index.rocket.js

@@ -0,0 +1,50 @@
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = 'index.rocket.js';
+import { pageTree, setupUnifiedPlugins, footerMenu } from './recursive.data.js';
+export { pageTree, setupUnifiedPlugins, footerMenu };
+/* END - Rocket auto generated - do not touch */
+
+import { html } from 'lit-html';
+
+import { LayoutHome } from '@rocket/launch';
+
+export const layout = new LayoutHome({
+  pageTree,
+  footerMenu,
+  slogan: 'The modern web setup for static sites with a sprinkle of JavaScript.',
+  callToActionItems: [
+    { text: 'Follow Guides', href: '/guides/' },
+    { text: 'Browse Docs', href: '/docs/' },
+  ],
+  background: '/home-background.svg',
+  reasonHeader: 'Why Rocket?',
+  reasons: [
+    {
+      header: 'Small',
+      text:
+        'No overblown tools or frontend frameworks, add JavaScript and/or Web Components only on pages where needed.',
+    },
+    {
+      header: 'Pre-Rendered',
+      text: 'Statically generated content means less JavaScript to ship and process.',
+    },
+    {
+      header: 'Zero Configuration',
+      text: 'Automatic code splitting, filesystem based routing, and JavaScript in Markdown.',
+    },
+    {
+      header: 'Meta Framework',
+      text: html`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>.`,
+    },
+    { header: 'Powerful Default Template', text: 'Provide content and you are ready to go.' },
+    {
+      header: 'Ready for Production',
+      text:
+        'Optimized for a smaller build size, faster dev compilation and dozens of other improvements.',
+    },
+  ],
+});
+
+export default () => '';

docs/recursive.data.js

@@ -0,0 +1,77 @@
+import { PageTree } from '@rocket/engine';
+import { LayoutSidebar } from '@rocket/launch';
+import { adjustPluginOptions } from 'plugins-manager';
+import { mdjsSetupCode } from '@mdjs/core';
+
+export const pageTree = new PageTree({
+  inputDir: new URL('./', import.meta.url),
+  outputDir: new URL('../_site', import.meta.url),
+});
+await pageTree.restore();
+
+export const setupUnifiedPlugins = [
+  adjustPluginOptions(mdjsSetupCode, {
+    simulationSettings: {
+      simulatorUrl: '/simulator/',
+      themes: [
+        { key: 'light', name: 'Light' },
+        { key: 'dark', name: 'Dark' },
+      ],
+      platforms: [
+        { key: 'web', name: 'Web' },
+        { key: 'android', name: 'Android' },
+        { key: 'ios', name: 'iOS' },
+      ],
+    },
+  }),
+];
+
+export const footerMenu = [
+  {
+    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',
+      },
+    ],
+  },
+];
+
+export const layout = new LayoutSidebar({ pageTree, footerMenu });
+
+// export const openGraphLayout = new OpenGraphLayoutLogo();

docs/simulator.rocket.js

@@ -1,11 +1,9 @@
 /* START - Rocket auto generated - do not touch */
 export const sourceRelativeFilePath = 'simulator.rocket.js';
-import { html, setupUnifiedPlugins, components, openGraphLayout } from './recursive.data.js';
-export { html, setupUnifiedPlugins, components, openGraphLayout };
+import { pageTree, setupUnifiedPlugins, footerMenu } from './recursive.data.js';
+export { pageTree, setupUnifiedPlugins, footerMenu };
 /* END - Rocket auto generated - do not touch */
 
-export const menuExclude = true;
-
 import { LayoutSimulator } from '@mdjs/mdjs-preview/server';
 
 export const layout = new LayoutSimulator();

docs/sitemap.xml.rocket.js

@@ -0,0 +1,25 @@
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = 'sitemap.xml.rocket.js';
+import { pageTree, setupUnifiedPlugins, footerMenu } from './recursive.data.js';
+export { pageTree, setupUnifiedPlugins, footerMenu };
+/* END - Rocket auto generated - do not touch */
+
+export const layout = false;
+
+import rocketConfig from '../rocket.config.js';
+
+export default () => `<?xml version="1.0" encoding="utf-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+
+${pageTree.all().map(
+  page => `
+  <url>
+    <loc>${rocketConfig.absoluteBaseUrl}${page.model.url}</loc>
+    <lastmod>${new Date().toISOString()}</lastmod>
+    <changefreq>monthly</changefreq>
+  </url>
+`,
+)}
+
+</urlset>
+`;

examples/01-hydration-starter/README.md

@@ -1,44 +0,0 @@
-# Rocket Starter Kit: Minimal
-
-```
-npx @rocket/create@latest --template 01-hydration-starter
-```
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-## 🚀 Project Structure
-
-Inside of your Rocket project, you'll see the following folders and files:
-
-```
-.
-├── config
-│   └── rocket.config.js
-├── site
-│   ├── pages
-│   │   └── index.rocket.html
-│   └── public
-│       └── favicon.ico
-└── package.json
-```
-
-Rocket looks for `.rocket.md` or `.rocket.js` or `.rocket.html` files in the `site/pages` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `site/src/components/`, but that's where we like to put our web components.
-
-Any static assets, that is not referenced via HTML but you still want to be on the web server we can place in the `site/public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command           | Action                                       |
-| :---------------- | :------------------------------------------- |
-| `npm install`     | Installs dependencies                        |
-| `npm run start`   | Starts local dev server at `localhost:8000`  |
-| `npm run build`   | Build your production site to `./_site/`     |
-| `npm run preview` | Preview your build locally, before deploying |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://rocket.modern-web.dev) or jump into our [Discord server](https://rocket.modern-web.dev/chat).

examples/01-hydration-starter/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "rocket-hydration-starter",
-  "version": "0.0.1",
-  "private": true,
-  "description": "Example on how to hydrate web components",
-  "type": "module",
-  "scripts": {
-    "build": "rocket build",
-    "dev": "npm start",
-    "preview": "rocket preview --open",
-    "start": "NODE_DEBUG=engine:rendering rocket start --open"
-  },
-  "devDependencies": {
-    "@rocket/cli": "^0.21.0",
-    "@rocket/engine": "^0.2.0",
-    "@webcomponents/template-shadowroot": "^0.1.0",
-    "lit": "^2.3.0"
-  },
-  "@rocket/template-name": "Hydration Starter",
-  "imports": {
-    "#components/*": "./site/src/components/*"
-  }
-}

examples/01-hydration-starter/site/pages/index.rocket.js

@@ -1,34 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = 'index.rocket.js';
-import { html, components, layout } from './recursive.data.js';
-export { html, components, layout };
-export async function registerCustomElements() {
-  // server-only components
-  customElements.define(
-    'hello-wave',
-    await import('#components/HelloWave.js').then(m => m.HelloWave),
-  );
-  // hydrate-able components
-  customElements.define(
-    'hello-typer',
-    await import('#components/HelloTyper.js').then(m => m.HelloTyper),
-  );
-  customElements.define(
-    'my-counter',
-    await import('#components/MyCounter.js').then(m => m.MyCounter),
-  );
-}
-export const needsLoader = true;
-/* END - Rocket auto generated - do not touch */
-
-export default () => html`
-  <h1>Hello World</h1>
-  <hello-wave></hello-wave>
-  <hello-typer loading="hydrate:onVisible"></hello-typer>
-  <details open>
-    <!-- put an open attribute on the details element to check hydration as you scroll down -->
-    <summary>👇</summary>
-    <p style="height: 120vh;">Emptiness of space</p>
-  </details>
-  <my-counter loading="hydrate:onVisible"></my-counter>
-`;

examples/01-hydration-starter/site/pages/pageTreeData.rocketGenerated.json

@@ -1,15 +0,0 @@
-{
-  "h1": "Hello World",
-  "name": "Hello World",
-  "menuLinkText": "Hello World",
-  "url": "/",
-  "outputRelativeFilePath": "index.html",
-  "sourceRelativeFilePath": "index.rocket.js",
-  "level": 0,
-  "components": {
-    "hello-wave": "#components/HelloWave.js::HelloWave",
-    "hello-typer": "#components/HelloTyper.js::HelloTyper",
-    "my-counter": "#components/MyCounter.js::MyCounter"
-  },
-  "needsLoader": true
-}

examples/01-hydration-starter/site/pages/recursive.data.js

@@ -1,24 +0,0 @@
-import { html } from 'lit';
-
-export { html };
-
-export const components = {
-  'hello-wave': '#components/HelloWave.js::HelloWave',
-  'hello-typer': '#components/HelloTyper.js::HelloTyper',
-  'my-counter': '#components/MyCounter.js::MyCounter',
-  //             👆 we are using a private import defined in the package json that maps
-  //             "#components/*": "./site/src/components/*"
-  //             (see https://nodejs.org/api/packages.html#packages_imports)
-};
-
-export const layout = data => html`
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="utf-8" />
-    </head>
-    <body>
-      ${data.content()}
-    </body>
-  </html>
-`;

examples/01-hydration-starter/site/public/icon.svg

@@ -1,12 +0,0 @@
-<svg width="105" height="101" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="m19.91 91.438 12.445-4.705-8.09-7.465-4.355 12.17Z" fill="#FCB736"/>
-  <path d="M53.778 41.196c-1.6-5.176 1.444-10.652 6.844-12.192 5.378-1.54 11.067 1.39 12.667 6.588a9.426 9.426 0 0 1 .277 4.512 9.595 9.595 0 0 1-1.86 4.151 10.076 10.076 0 0 1-3.6 2.902 10.485 10.485 0 0 1-4.573 1.033c-4.4 0-8.444-2.738-9.755-6.994ZM68.666 16.62c-9.066 2.952-19.088 8.085-27.022 16.042-6.4 6.416-11.311 12.47-15 17.71a28.068 28.068 0 0 0-3.889.32A23.592 23.592 0 0 0 18.6 51.72C9.533 54.928-.49 63.42.133 65.11c.6 1.69 6.467-1.433 11.467-1.818 2.91-.236 5.178.042 6.91.492-.577 1.154-1.066 2.138-1.421 2.93-.378.791-.645 1.369-.823 1.732l18.09 16.705c.733-.385 2.377-1.112 4.733-2.353.266.813.51 1.776.644 2.866.156 1.091.222 2.332.156 3.743-.2 4.813-3.2 10.588-1.423 11.101 1.778.514 10.178-9.475 13.134-18.33.91-2.695 1.133-5.433 1.066-7.786 5.29-3.785 11.356-8.726 17.756-15.164 7.933-7.957 12.844-17.796 15.533-26.65 2.356-7.765 2.978-14.738 2.4-19.037a22.605 22.605 0 0 0-2.155-.085c-4.511-.022-10.756.962-17.534 3.165Z" fill="url(#a)"/>
-  <path d="m12.4 89.535 15.911-6.545-9.777-9.026-6.134 15.57Z" fill="#D08A06"/>
-  <path d="m10.488 82.733 12.467-4.684-8.089-7.465-4.378 12.149ZM90.644 16.406c.044 2.823-.267 6.096-.912 9.54 7.712 10.544 10.889 24.083 7.578 37.623-5.778 23.591-29.178 38.756-53.622 35.612-.133.15-.267.278-.4.428 27.045 4.834 53.556-11.614 59.911-37.666 4.111-16.897-1.155-33.752-12.555-45.537ZM2.82 42.158C8.955 17.048 35.088 1.477 61.177 7.401c5 1.134 9.644 2.973 13.822 5.39 3.6-.791 7.067-1.262 10.067-1.347-5.822-4.492-12.756-7.828-20.511-9.582C36.665-4.47 8.733 12.172 2.177 39.014a47.973 47.973 0 0 0-.511 20.619c.111-.107.222-.193.333-.3-.8-5.56-.6-11.378.822-17.175Z" fill="#FCB736"/>
-  <defs>
-    <linearGradient id="a" x1="26.5" y1="57" x2="89" y2="13" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#D21B1D"/>
-      <stop offset="1" stop-color="#C9181A"/>
-    </linearGradient>
-  </defs>
-</svg>

examples/01-hydration-starter/site/public/site.webmanifest

@@ -1,19 +0,0 @@
-{
-  "name": "Rocket",
-  "short_name": "Rocket",
-  "icons": [
-    {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}

examples/01-hydration-starter/site/src/components/HelloTyper.js

@@ -1,54 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-let i = 0;
-const fullText = [...'to this wonderful world of progressive hydration 🤯'];
-
-export class HelloTyper extends LitElement {
-  static properties = {
-    msg: { type: String },
-    counter: { type: Number },
-  };
-
-  constructor() {
-    super();
-    this.msg = ' ';
-    this.counter = 0;
-  }
-
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (i < fullText.length) {
-      setTimeout(() => {
-        this.msg += fullText[i];
-        i += 1;
-      }, Math.floor(Math.random() * 50) + 40);
-    }
-  }
-
-  render() {
-    return html`
-      <p>🤔 Hello <span>${this.msg}</span>${'🤯'.repeat(this.counter)}</p>
-      <button @click=${this._inc}>+</button>
-    `;
-  }
-
-  _inc() {
-    if (i >= fullText.length) {
-      this.counter += 1;
-    }
-  }
-
-  static styles = [
-    css`
-      button {
-        font-size: 200%;
-        width: 64px;
-        height: 64px;
-        border: none;
-        border-radius: 10px;
-        background-color: seagreen;
-        color: white;
-      }
-    `,
-  ];
-}

examples/01-hydration-starter/site/src/components/HelloWave.js

@@ -1,13 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-export class HelloWave extends LitElement {
-  render() {
-    return html`<h2>Hello 👋</h2>`;
-  }
-
-  static styles = css`
-    h2 {
-      color: #e03131;
-    }
-  `;
-}

examples/01-hydration-starter/site/src/components/MyCounter.js

@@ -1,41 +0,0 @@
-import { LitElement, css, html } from 'lit';
-
-export class MyCounter extends LitElement {
-  constructor() {
-    super();
-    this.counter = 0;
-  }
-
-  render() {
-    return html`
-      <button @click=${() => (this.counter -= 1)}>-</button>
-      <span>${this.counter}</span>
-      <button @click=${() => (this.counter += 1)}>+</button>
-    `;
-  }
-
-  static styles = css`
-    * {
-      font-size: 200%;
-    }
-
-    span {
-      width: 4rem;
-      display: inline-block;
-      text-align: center;
-    }
-
-    button {
-      width: 64px;
-      height: 64px;
-      border: none;
-      border-radius: 10px;
-      background-color: seagreen;
-      color: white;
-    }
-  `;
-
-  static properties = {
-    counter: { type: Number },
-  };
-}

examples/01-hydration-starter/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "allowJs": true,
-    "checkJs": false,
-  }
-}

examples/02-blog-starter/.gitignore

@@ -1,20 +0,0 @@
-# dependencies
-node_modules/
-
-# logs
-npm-debug.log*
-
-# environment variables
-.env
-.env.production
-
-# macOS-specific files
-.DS_Store
-
-# Rocket ignore files
-*-mdjs-generated.js
-*-converted-html.js
-*-converted-md.js
-*-converted-md-source.js
-_site
-_site-dev

examples/02-blog-starter/README.md

@@ -1,44 +0,0 @@
-# Rocket Starter Kit: Blog
-
-```
-npx @rocket/create@latest --template 02-blog-starter
-```
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-## 🚀 Project Structure
-
-Inside of your Rocket project, you'll see the following folders and files:
-
-```
-.
-├── config
-│   └── rocket.config.js
-├── site
-│   ├── pages
-│   │   └── index.rocket.html
-│   └── public
-│       └── favicon.ico
-└── package.json
-```
-
-Rocket looks for `.rocket.md` or `.rocket.js` or `.rocket.html` files in the `site/pages` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `site/src/components/`, but that's where we like to put our web components.
-
-Any static assets, that is not referenced via HTML but you still want to be on the web server we can place in the `site/public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command           | Action                                       |
-| :---------------- | :------------------------------------------- |
-| `npm install`     | Installs dependencies                        |
-| `npm run start`   | Starts local dev server at `localhost:8000`  |
-| `npm run build`   | Build your production site to `./_site/`     |
-| `npm run preview` | Preview your build locally, before deploying |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://rocket.modern-web.dev) or jump into our [Discord server](https://rocket.modern-web.dev/chat).

examples/02-blog-starter/config/rocket.config.js

@@ -1,5 +0,0 @@
-export default /** @type {import('@rocket/cli').RocketCliOptions} */ ({
-  absoluteBaseUrl: 'http://localhost:8080',
-  longFileHeaderWidth: 100,
-  longFileHeaderComment: '// prettier-ignore',
-});

examples/02-blog-starter/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "rocket-blog-starter",
-  "version": "0.0.1",
-  "private": true,
-  "description": "Get started with a new blog",
-  "type": "module",
-  "exports": {
-    ".": "./src/index.js",
-    "./styles/*": "./site/src/styles/*",
-    "./components/*": "./site/src/components/*.js"
-  },
-  "scripts": {
-    "build": "rocket build",
-    "dev": "npm start",
-    "preview": "rocket preview --open",
-    "start": "NODE_DEBUG=engine:rendering rocket start --open"
-  },
-  "devDependencies": {
-    "@rocket/cli": "^0.21.0",
-    "@rocket/engine": "^0.2.0",
-    "lit": "^2.3.0"
-  },
-  "@rocket/template-name": "Blog Starter"
-}

examples/02-blog-starter/site/pages/about.rocket.md

@@ -1,18 +0,0 @@
-```js server
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = 'about.rocket.md';
-import { html, layout, components } from './recursive.data.js';
-export { html, layout, components };
-export async function registerCustomElements() {
-  // server-only components
-  // prettier-ignore
-  customElements.define('blog-header', await import('rocket-blog-starter/components/BlogHeader').then(m => m.BlogHeader));
-  // prettier-ignore
-  customElements.define('site-footer', await import('rocket-blog-starter/components/SiteFooter').then(m => m.SiteFooter));
-}
-/* END - Rocket auto generated - do not touch */
-```
-
-# About
-
-I love writing about things.

examples/02-blog-starter/site/pages/blog/hello-world.rocket.md

@@ -1,42 +0,0 @@
-```js server
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = 'blog/hello-world.rocket.md';
-import { html, components } from '../recursive.data.js';
-import { layout } from './local.data.js';
-export { html, layout, components };
-export async function registerCustomElements() {
-  // server-only components
-  // prettier-ignore
-  customElements.define('blog-header', await import('rocket-blog-starter/components/BlogHeader').then(m => m.BlogHeader));
-  // prettier-ignore
-  customElements.define('blog-author', await import('rocket-blog-starter/components/BlogAuthor').then(m => m.BlogAuthor));
-  // prettier-ignore
-  customElements.define('blog-post', await import('rocket-blog-starter/components/BlogPost').then(m => m.BlogPost));
-  // prettier-ignore
-  customElements.define('site-footer', await import('rocket-blog-starter/components/SiteFooter').then(m => m.SiteFooter));
-}
-/* END - Rocket auto generated - do not touch */
-
-export const title = 'Hello world!';
-export const publishDate = '12 Sep 2021';
-export const author = 'Thomas Allmer (@daKmoR)';
-export const authorHref = 'https://twitter.com/daKmoR';
-export const value = 128;
-export const description = 'Just a Hello World Post!';
-```
-
-hey
-
-This is so cool!
-
-Do variables work ${value \* 2}?
-
-<br>
-
----
-
-<br>
-
-There are multiple Co-Authors:
-
-- <blog-author name="Another Author" href="https://twitter.com/daKmoR"></blog-author>

examples/02-blog-starter/site/pages/blog/index.rocket.js

@@ -1,9 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = 'blog/index.rocket.js';
-import { html, components } from '../recursive.data.js';
-export { html, components };
-/* END - Rocket auto generated - do not touch */
-
-export const layout = false;
-
-export default () => 'posts';

examples/02-blog-starter/site/pages/blog/with-image.rocket.md

@@ -1,36 +0,0 @@
-```js server
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = 'blog/with-image.rocket.md';
-import { html, components } from '../recursive.data.js';
-import { layout } from './local.data.js';
-export { html, layout, components };
-export async function registerCustomElements() {
-  // server-only components
-  // prettier-ignore
-  customElements.define('blog-header', await import('rocket-blog-starter/components/BlogHeader').then(m => m.BlogHeader));
-  // prettier-ignore
-  customElements.define('blog-author', await import('rocket-blog-starter/components/BlogAuthor').then(m => m.BlogAuthor));
-  // prettier-ignore
-  customElements.define('blog-post', await import('rocket-blog-starter/components/BlogPost').then(m => m.BlogPost));
-  // prettier-ignore
-  customElements.define('site-footer', await import('rocket-blog-starter/components/SiteFooter').then(m => m.SiteFooter));
-}
-/* END - Rocket auto generated - do not touch */
-
-export const title = 'With Image!';
-export const publishDate = '13 Sep 2021';
-export const author = 'Thomas Allmer (@daKmoR)';
-export const authorHref = 'https://twitter.com/daKmoR';
-export const value = 128;
-export const description = 'Now with an image!';
-export const heroImage = './assets/liftoff-flames.jpg';
-export const alt = 'Liftoff Flames';
-```
-
-hey
-
-<blog-author name="Another Author" href="https://twitter.com/daKmoR"></blog-author>
-
-This is so cool!
-
-Do variables work ${value \* 2}?

examples/02-blog-starter/site/pages/pageTreeData.rocketGenerated.json

@@ -1,110 +0,0 @@
-{
-  "title": "Example Blog",
-  "h1": "My Blog",
-  "name": "Example Blog",
-  "menuLinkText": "My Blog",
-  "url": "/",
-  "outputRelativeFilePath": "index.html",
-  "sourceRelativeFilePath": "index.rocket.js",
-  "level": 0,
-  "components": {
-    "blog-author": "rocket-blog-starter/components/BlogAuthor::BlogAuthor",
-    "blog-header": "rocket-blog-starter/components/BlogHeader::BlogHeader",
-    "blog-post": "rocket-blog-starter/components/BlogPost::BlogPost",
-    "blog-post-preview": "rocket-blog-starter/components/BlogPostPreview::BlogPostPreview",
-    "site-footer": "rocket-blog-starter/components/SiteFooter::SiteFooter"
-  },
-  "description": "The perfect starter for your perfect blog.",
-  "layout": false,
-  "permalink": "https://example.com/",
-  "children": [
-    {
-      "title": "",
-      "h1": "My Blog",
-      "headlinesWithId": [
-        {
-          "text": "About",
-          "id": "about",
-          "level": 1
-        }
-      ],
-      "name": "My Blog",
-      "menuLinkText": "My Blog",
-      "url": "/about/",
-      "outputRelativeFilePath": "about/index.html",
-      "sourceRelativeFilePath": "about.rocket.md",
-      "level": 1,
-      "components": {
-        "blog-author": "rocket-blog-starter/components/BlogAuthor::BlogAuthor",
-        "blog-header": "rocket-blog-starter/components/BlogHeader::BlogHeader",
-        "blog-post": "rocket-blog-starter/components/BlogPost::BlogPost",
-        "blog-post-preview": "rocket-blog-starter/components/BlogPostPreview::BlogPostPreview",
-        "site-footer": "rocket-blog-starter/components/SiteFooter::SiteFooter"
-      }
-    },
-    {
-      "name": "blog/index.rocket.js",
-      "menuLinkText": "blog/index.rocket.js",
-      "url": "/blog/",
-      "outputRelativeFilePath": "blog/index.html",
-      "sourceRelativeFilePath": "blog/index.rocket.js",
-      "level": 1,
-      "components": {
-        "blog-author": "rocket-blog-starter/components/BlogAuthor::BlogAuthor",
-        "blog-header": "rocket-blog-starter/components/BlogHeader::BlogHeader",
-        "blog-post": "rocket-blog-starter/components/BlogPost::BlogPost",
-        "blog-post-preview": "rocket-blog-starter/components/BlogPostPreview::BlogPostPreview",
-        "site-footer": "rocket-blog-starter/components/SiteFooter::SiteFooter"
-      },
-      "layout": false,
-      "children": [
-        {
-          "title": "Hello world!",
-          "h1": "My Blog",
-          "name": "Hello world!",
-          "menuLinkText": "My Blog",
-          "url": "/blog/hello-world/",
-          "outputRelativeFilePath": "blog/hello-world/index.html",
-          "sourceRelativeFilePath": "blog/hello-world.rocket.md",
-          "level": 2,
-          "author": "Thomas Allmer (@daKmoR)",
-          "authorHref": "https://twitter.com/daKmoR",
-          "components": {
-            "blog-author": "rocket-blog-starter/components/BlogAuthor::BlogAuthor",
-            "blog-header": "rocket-blog-starter/components/BlogHeader::BlogHeader",
-            "blog-post": "rocket-blog-starter/components/BlogPost::BlogPost",
-            "blog-post-preview": "rocket-blog-starter/components/BlogPostPreview::BlogPostPreview",
-            "site-footer": "rocket-blog-starter/components/SiteFooter::SiteFooter"
-          },
-          "description": "Just a Hello World Post!",
-          "publishDate": "12 Sep 2021",
-          "value": 128
-        },
-        {
-          "title": "With Image!",
-          "h1": "My Blog",
-          "name": "With Image!",
-          "menuLinkText": "My Blog",
-          "url": "/blog/with-image/",
-          "outputRelativeFilePath": "blog/with-image/index.html",
-          "sourceRelativeFilePath": "blog/with-image.rocket.md",
-          "level": 2,
-          "alt": "Liftoff Flames",
-          "author": "Thomas Allmer (@daKmoR)",
-          "authorHref": "https://twitter.com/daKmoR",
-          "components": {
-            "blog-author": "rocket-blog-starter/components/BlogAuthor::BlogAuthor",
-            "blog-header": "rocket-blog-starter/components/BlogHeader::BlogHeader",
-            "blog-post": "rocket-blog-starter/components/BlogPost::BlogPost",
-            "blog-post-preview": "rocket-blog-starter/components/BlogPostPreview::BlogPostPreview",
-            "site-footer": "rocket-blog-starter/components/SiteFooter::SiteFooter"
-          },
-          "description": "Now with an image!",
-          "heroImage": "./assets/liftoff-flames.jpg",
-          "publishDate": "13 Sep 2021",
-          "value": 128
-        }
-      ]
-    }
-  ]
-}

examples/02-blog-starter/site/pages/recursive.data.js

@@ -1,15 +0,0 @@
-// everything you export here will be automatically injected into all pages
-
-import { LayoutPage } from '../src/layouts/LayoutPage.js';
-
-export { html } from 'lit';
-
-export const layout = new LayoutPage();
-
-export const components = {
-  'blog-author': 'rocket-blog-starter/components/BlogAuthor::BlogAuthor',
-  'blog-header': 'rocket-blog-starter/components/BlogHeader::BlogHeader',
-  'blog-post': 'rocket-blog-starter/components/BlogPost::BlogPost',
-  'blog-post-preview': 'rocket-blog-starter/components/BlogPostPreview::BlogPostPreview',
-  'site-footer': 'rocket-blog-starter/components/SiteFooter::SiteFooter',
-};

examples/02-blog-starter/site/public/icon.svg

@@ -1,12 +0,0 @@
-<svg width="105" height="101" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="m19.91 91.438 12.445-4.705-8.09-7.465-4.355 12.17Z" fill="#FCB736"/>
-  <path d="M53.778 41.196c-1.6-5.176 1.444-10.652 6.844-12.192 5.378-1.54 11.067 1.39 12.667 6.588a9.426 9.426 0 0 1 .277 4.512 9.595 9.595 0 0 1-1.86 4.151 10.076 10.076 0 0 1-3.6 2.902 10.485 10.485 0 0 1-4.573 1.033c-4.4 0-8.444-2.738-9.755-6.994ZM68.666 16.62c-9.066 2.952-19.088 8.085-27.022 16.042-6.4 6.416-11.311 12.47-15 17.71a28.068 28.068 0 0 0-3.889.32A23.592 23.592 0 0 0 18.6 51.72C9.533 54.928-.49 63.42.133 65.11c.6 1.69 6.467-1.433 11.467-1.818 2.91-.236 5.178.042 6.91.492-.577 1.154-1.066 2.138-1.421 2.93-.378.791-.645 1.369-.823 1.732l18.09 16.705c.733-.385 2.377-1.112 4.733-2.353.266.813.51 1.776.644 2.866.156 1.091.222 2.332.156 3.743-.2 4.813-3.2 10.588-1.423 11.101 1.778.514 10.178-9.475 13.134-18.33.91-2.695 1.133-5.433 1.066-7.786 5.29-3.785 11.356-8.726 17.756-15.164 7.933-7.957 12.844-17.796 15.533-26.65 2.356-7.765 2.978-14.738 2.4-19.037a22.605 22.605 0 0 0-2.155-.085c-4.511-.022-10.756.962-17.534 3.165Z" fill="url(#a)"/>
-  <path d="m12.4 89.535 15.911-6.545-9.777-9.026-6.134 15.57Z" fill="#D08A06"/>
-  <path d="m10.488 82.733 12.467-4.684-8.089-7.465-4.378 12.149ZM90.644 16.406c.044 2.823-.267 6.096-.912 9.54 7.712 10.544 10.889 24.083 7.578 37.623-5.778 23.591-29.178 38.756-53.622 35.612-.133.15-.267.278-.4.428 27.045 4.834 53.556-11.614 59.911-37.666 4.111-16.897-1.155-33.752-12.555-45.537ZM2.82 42.158C8.955 17.048 35.088 1.477 61.177 7.401c5 1.134 9.644 2.973 13.822 5.39 3.6-.791 7.067-1.262 10.067-1.347-5.822-4.492-12.756-7.828-20.511-9.582C36.665-4.47 8.733 12.172 2.177 39.014a47.973 47.973 0 0 0-.511 20.619c.111-.107.222-.193.333-.3-.8-5.56-.6-11.378.822-17.175Z" fill="#FCB736"/>
-  <defs>
-    <linearGradient id="a" x1="26.5" y1="57" x2="89" y2="13" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#D21B1D"/>
-      <stop offset="1" stop-color="#C9181A"/>
-    </linearGradient>
-  </defs>
-</svg>

examples/02-blog-starter/site/public/site.webmanifest

@@ -1,19 +0,0 @@
-{
-  "name": "Rocket",
-  "short_name": "Rocket",
-  "icons": [
-    {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}

examples/02-blog-starter/site/src/components/BlogHeader.js

@@ -1,87 +0,0 @@
-import { html, css, LitElement } from 'lit';
-import { shared } from '../styles/shared.js';
-
-export class BlogHeader extends LitElement {
-  static properties = {
-    name: { type: String },
-    href: { type: String },
-  };
-
-  render() {
-    return html`
-      <header class="wrapper">
-        <article>
-          <h1>
-            <a href="/">
-              <img src="resolve:@rocket/engine/assets/logo.svg" class="logo" />
-              <span>My Blog</span>
-            </a>
-          </h1>
-        </article>
-      </header>
-    `;
-  }
-
-  static styles = [
-    shared,
-    css`
-      header {
-        padding-top: 1rem;
-        padding-bottom: 1rem;
-        height: 5rem;
-      }
-      article {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-      .header-subitem {
-        display: flex;
-        flex-grow: 0;
-        gap: 0.5em;
-        align-items: center;
-        justify-content: center;
-        color: var(--theme-text-lighter);
-        font-size: initial;
-        padding: 0.5rem;
-      }
-      .header-subitem:hover {
-        color: var(--theme-accent);
-      }
-      .header-subitem svg {
-        width: 1.5rem;
-        height: 1.5rem;
-      }
-
-      @media (max-width: 32em) {
-        .header-subitem {
-          display: none;
-        }
-      }
-
-      h1 {
-        margin: 0;
-        font-size: 1.5rem;
-        max-width: 100%;
-        display: flex;
-        flex-grow: 1;
-      }
-
-      img {
-        width: 2.5rem;
-        height: 2.5rem;
-      }
-
-      span {
-        margin-left: 0.5rem;
-      }
-
-      h1 a {
-        text-decoration: none;
-        display: inline-flex;
-      }
-    `,
-  ];
-}
-
-customElements.define('blog-header', BlogHeader);

examples/02-blog-starter/site/src/components/SiteFooter.js

@@ -1,25 +0,0 @@
-import { html, css, LitElement } from 'lit';
-import { shared } from '../styles/shared.js';
-
-export class SiteFooter extends LitElement {
-  render() {
-    return html`
-      <footer>
-        <div class="wrapper">
-          <a href="./about.rocket.md">About</a>
-        </div>
-      </footer>
-    `;
-  }
-
-  static styles = [
-    shared,
-    css`
-      :host {
-        display: block;
-        background: #dcdcdc;
-        padding: 20px;
-      }
-    `,
-  ];
-}

examples/02-blog-starter/site/src/layouts/LayoutPage.js

@@ -1,63 +0,0 @@
-import { html } from 'lit';
-import { baseHead } from '../parts/baseHead.js';
-
-export class LayoutPage {
-  render(data) {
-    const { title, description, permalink } = data;
-    return html`
-      <html lang="en">
-        <head>
-          ${baseHead({ title, description, permalink })}
-          <style>
-            header {
-              width: 100%;
-              height: 100%;
-              background-color: var(--theme-bg-offset);
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            }
-
-            .content {
-              margin-top: 4rem;
-              margin-bottom: 8rem;
-            }
-
-            .content :global(main > * + *) {
-              margin-top: 1rem;
-            }
-
-            .intro {
-              padding-bottom: 4rem;
-              margin-bottom: 2rem;
-              border-bottom: 4px solid var(--theme-divider);
-            }
-
-            .intro > * {
-              margin: 0;
-            }
-
-            .latest {
-              font-size: 2.5rem;
-              font-weight: 700;
-            }
-          </style>
-        </head>
-
-        <body>
-          <blog-header></blog-header>
-          <div class="wrapper">
-            <main class="content">
-              <section class="intro">
-                <h1 class="latest">${title}</h1>
-                <p>${description}</p>
-              </section>
-              <section aria-label="Blog post list">${data.content()}</section>
-            </main>
-          </div>
-          <site-footer></site-footer>
-        </body>
-      </html>
-    `;
-  }
-}

examples/02-blog-starter/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "allowJs": true,
-    "checkJs": false,
-    "module": "esnext"
-  }
-}

examples/03-minimal-starter/.gitignore

@@ -1,20 +0,0 @@
-# dependencies
-node_modules/
-
-# logs
-npm-debug.log*
-
-# environment variables
-.env
-.env.production
-
-# macOS-specific files
-.DS_Store
-
-# Rocket ignore files
-*-mdjs-generated.js
-*-converted-html.js
-*-converted-md.js
-*-converted-md-source.js
-_site
-_site-dev

examples/03-minimal-starter/.vscode/settings.json

@@ -1,8 +0,0 @@
-{
-  "files.exclude": {
-    "**/*-mdjs-generated.js": true,
-  },
-  "search.exclude": {
-    "**/*-mdjs-generated.js": true,
-  }
-}

examples/03-minimal-starter/README.md

@@ -1,44 +0,0 @@
-# Rocket Starter Kit: Minimal
-
-```
-npx @rocket/create@latest --template 03-minimal-starter
-```
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-## 🚀 Project Structure
-
-Inside of your Rocket project, you'll see the following folders and files:
-
-```
-.
-├── config
-│   └── rocket.config.js
-├── site
-│   ├── pages
-│   │   └── index.rocket.html
-│   └── public
-│       └── favicon.ico
-└── package.json
-```
-
-Rocket looks for `.rocket.md` or `.rocket.js` or `.rocket.html` files in the `site/pages` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `site/src/components/`, but that's where we like to put our web components.
-
-Any static assets, that is not referenced via HTML but you still want to be on the web server we can place in the `site/public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command           | Action                                       |
-| :---------------- | :------------------------------------------- |
-| `npm install`     | Installs dependencies                        |
-| `npm run start`   | Starts local dev server at `localhost:8000`  |
-| `npm run build`   | Build your production site to `./_site/`     |
-| `npm run preview` | Preview your build locally, before deploying |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://rocket.modern-web.dev) or jump into our [Discord server](https://rocket.modern-web.dev/chat).

examples/03-minimal-starter/config/rocket.config.js

@@ -1,3 +0,0 @@
-export default /** @type {import('@rocket/cli').RocketCliOptions} */ ({
-  absoluteBaseUrl: 'http://localhost:8080',
-});

examples/03-minimal-starter/package.json

@@ -1,19 +0,0 @@
-{
-  "name": "rocket-minimal-starter",
-  "version": "0.0.1",
-  "private": true,
-  "description": "Only includes the minimal basics",
-  "type": "module",
-  "scripts": {
-    "build": "rocket build",
-    "dev": "npm start",
-    "preview": "rocket preview --open",
-    "start": "NODE_DEBUG=engine:rendering rocket start --open"
-  },
-  "devDependencies": {
-    "@rocket/cli": "^0.21.0",
-    "@rocket/engine": "^0.2.0",
-    "lit": "^2.3.0"
-  },
-  "@rocket/template-name": "Minimal Starter"
-}

examples/03-minimal-starter/site/pages/about.rocket.js

@@ -1,11 +0,0 @@
-/* START - Rocket auto generated - do not touch */
-export const sourceRelativeFilePath = 'about.rocket.js';
-import { html, layout } from './recursive.data.js';
-export { html, layout };
-/* END - Rocket auto generated - do not touch */
-
-export default () => html`
-  <h1>About</h1>
-
-  <a href="./index.rocket.html">to Home</a>
-`;