docs: improve docs for presets

Author: bennypowers

docs/docs/index.md

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

docs/docs/presets/blog.md

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

docs/docs/presets/joining-blocks.md

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

docs/docs/presets/launch.md

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

docs/docs/presets/search.md

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

package.json

@@ -78,7 +78,7 @@
     "puppeteer": "^9.0.0",
     "remark-emoji": "^2.1.0",
     "rimraf": "^3.0.2",
-    "rocket-preset-code-tabs": "^0.1.3",
+    "rocket-preset-code-tabs": "^0.2.1",
     "rollup": "^2.36.1",
     "rollup-plugin-terser": "^7.0.2",
     "sinon": "^9.2.3",

yarn.lock

@@ -7643,10 +7643,10 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rocket-preset-code-tabs@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/rocket-preset-code-tabs/-/rocket-preset-code-tabs-0.1.3.tgz#2d8e1b89410d1c6d402a5c0e3bc147330105ae54"
-  integrity sha512-CbFZcmEY213oXjW7mHxv3D5g4S2uP5TC3zvq2Ae7sGB6QqmDbfVxhTPmM3bI5vPMbQydXo6HFt4nhHpEqS67lQ==
+rocket-preset-code-tabs@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/rocket-preset-code-tabs/-/rocket-preset-code-tabs-0.2.1.tgz#19fbdbf05736c5783187d73fc4a95b1df4e88ca5"
+  integrity sha512-m1E8u70iyCrcUDE7tghGZlTjzal0mhvQ1ESIbz/i1iRr3Y/t103FtDfnndZWSUaNcaXECsf8e1zn6DKk53YrMg==
   dependencies:
     "@pwrs/mixins" "^0.2.0"
     eleventy-plugin-add-web-component-definitions "^2.0.3"