wip: POC

Create chilled-turkeys-help.md
chore: generalize label & add alt when no img
2026-03-21 08:51:18 +00:00 · 2021-04-04 18:02:12 +02:00 · 2021-04-04 18:01:06 +02:00 · 2021-04-04 18:01:06 +02:00 · 2021-04-04 18:00:26 +02:00 · 2021-04-01 20:01:47 +02:00
38 changed files with 735 additions and 134 deletions
--- a/.changeset/chilled-turkeys-help.md
+++ b/.changeset/chilled-turkeys-help.md
@@ -0,0 +1,5 @@
+---
+'@rocket/search': patch
+---
+
+chore: generalize label & add alt when no img
--- a/.changeset/many-points-eat.md
+++ b/.changeset/many-points-eat.md
@@ -0,0 +1,5 @@
+---
+'@mdjs/core': minor
+---
+
+Extract building of the JavaScript setup code into a unified plugin called mdjsSetupCode
--- a/.changeset/yellow-moose-play.md
+++ b/.changeset/yellow-moose-play.md
@@ -0,0 +1,5 @@
+---
+'@mdjs/core': patch
+---
+
+You can provide a highlightCode function to the mdjsSetupCode unified plugin
--- a/docs/_includes/layout-playground.njk
+++ b/docs/_includes/layout-playground.njk
@@ -0,0 +1,14 @@
+<html lang="en">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Playground</title>
+  <body>
+    <rocket-playground></rocket-playground>
+
+    <script src="https://unpkg.com/wasm-flate@0.1.12-alpha/dist/bootstrap.js"></script>
+
+    <script type="module">
+      import '@rocket/playground/rocket-playground';
+    </script>
+  </body>
+</html>
--- a/docs/docs/markdown-javascript/overview.md
+++ b/docs/docs/markdown-javascript/overview.md
@@ -132,31 +132,6 @@ export const header = () => {

 ## Supported Systems

-### es-dev-server
-
-Preview your mdjs readme with live demos and auto reload.
-
- Add to your `package.json`:
-
-  ```json
-  "scripts": {
-    "start": "es-dev-server",
-  }
-  ```
-
- Create a `es-dev-server.config.js` in the root of your repository.
-
-  ```js
-  const { mdjsTransformer } = require('@mdjs/core');
-
-  module.exports = {
-    nodeResolve: true,
-    open: 'README.md',
-    watch: true,
-    responseTransformers: [mdjsTransformer],
-  };
-  ```
-
 ### Storybook

 Please check out [@open-wc/demoing-storybook](https://open-wc.org/demoing/) for a fully integrated setup.
--- a/docs/docs/markdown-javascript/preview.md
+++ b/docs/docs/markdown-javascript/preview.md
@@ -2,10 +2,16 @@

 You can showcase live running code by annotating a code block with `js preview-story`.

-````md
-```js preview-story
+```js script
 import { html } from 'lit-html';
+```

+````md
+```js script
+import { html } from 'lit-html';
+```
+
+```js preview-story
 export const foo = () => html` <p>my html</p> `;
 ```
 ````
@@ -13,7 +19,5 @@ export const foo = () => html` <p>my html</p> `;
 will result in

 ```js preview-story
-import { html } from 'lit-html';
-
 export const foo = () => html` <p>my html</p> `;
 ```
--- a/docs/docs/markdown-javascript/story.md
+++ b/docs/docs/markdown-javascript/story.md
@@ -2,10 +2,16 @@

 You can showcase live running code by annotating a code block with `js story`.

-````md
-```js story
+```js script
 import { html } from 'lit-html';
+```

+````md
+```js script
+import { html } from 'lit-html';
+```
+
+```js story
 export const foo = () => html` <p>my html</p> `;
 ```
 ````
@@ -13,7 +19,5 @@ export const foo = () => html` <p>my html</p> `;
 will result in

 ```js story
-import { html } from 'lit-html';
-
 export const foo = () => html` <p>my html</p> `;
 ```
--- a/docs/guides/first-pages/manage-sidebar.md
+++ b/docs/guides/first-pages/manage-sidebar.md
@@ -47,3 +47,9 @@ export const headlineConverter = () => html`
 ```

 How it then works is very similar to https://www.11ty.dev/docs/plugins/navigation/
+
+## Sidebar redirects
+
+By default, the sidebar nav redirects clicks on category headings to the first child page in that category.
+
+To disable those redirects, override `_includes/_joiningBlocks/_layoutSidebar/sidebar/20-navigation.njk` and add the `no-redirects` attribute to the `<rocket-navigation>` element.
--- a/docs/playground.md
+++ b/docs/playground.md
@@ -0,0 +1,3 @@
+---
+layout: layout-playground
+---
--- a/packages/cli/src/RocketStart.js
+++ b/packages/cli/src/RocketStart.js
@@ -58,6 +58,12 @@ export class RocketStart {

        setupRollupPlugins: this.config.setupDevAndBuildPlugins,
        setupPlugins: this.config.setupDevPlugins,
+        middleware: [
+          function rewriteIndex(context, next) {
+            context.set('Access-Control-Allow-Origin', '*');
+            return next();
+          },
+        ],
      },
      [],
      { rollupWrapperFunction: fromRollup },
--- a/packages/eleventy-plugin-mdjs-unified/test-node/eleventy-plugin-mdjs-unified.test.js
+++ b/packages/eleventy-plugin-mdjs-unified/test-node/eleventy-plugin-mdjs-unified.test.js
@@ -53,13 +53,12 @@ describe('eleventy-plugin-mdjs-unified', () => {

  it('renders markdown with javascript', async () => {
    const files = await renderEleventy('./test-node/fixtures/mdjs');
-    expect(files).to.deep.equal([
-      {
-        html:
-          '<h1 id="first"><a aria-hidden="true" tabindex="-1" href="#first"><span class="icon icon-link"></span></a>First</h1>\n<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">\'bar\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token punctuation">{</span> html <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'lit-html\'</span><span class="token punctuation">;</span>\n</code></pre>\n<mdjs-story mdjs-story-name="inline"></mdjs-story>\n<mdjs-preview mdjs-story-name="withBorder"></mdjs-preview>\n        <script type="module">\n          \nexport const inline = () => html` <p>main</p> `;\nexport const withBorder = () => html` <p>main</p> `;\nconst rootNode = document;\nconst stories = [{ key: \'inline\', story: inline, code: `<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">inline</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> html<span class="token template-string"><span class="token template-punctuation string">\\`</span><span class="token html language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>main<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span> </span><span class="token template-punctuation string">\\`</span></span><span class="token punctuation">;</span>\n</code></pre>` }, { key: \'withBorder\', story: withBorder, code: `<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">withBorder</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> html<span class="token template-string"><span class="token template-punctuation string">\\`</span><span class="token html language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>main<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span> </span><span class="token template-punctuation string">\\`</span></span><span class="token punctuation">;</span>\n</code></pre>` }];\nfor (const story of stories) {\n  const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);\n  storyEl.codeHasHtml = true;\n  storyEl.story = story.story;\n  storyEl.code = story.code;\n};\nif (!customElements.get(\'mdjs-preview\')) { import(\'@mdjs/mdjs-preview/mdjs-preview.js\'); }\nif (!customElements.get(\'mdjs-story\')) { import(\'@mdjs/mdjs-story/mdjs-story.js\'); }\n        </script>\n      ',
-        name: 'first/index.html',
-      },
-    ]);
+
+    expect(files.length).to.equal(1);
+    expect(files[0].name).to.equal('first/index.html');
+
+    expect(files[0].html).to.include('<script type="module">');
+    expect(files[0].html).to.include('for (const story of stories)');
  });

  it('rewrites relative import pathes', async () => {
--- a/packages/launch/package.json
+++ b/packages/launch/package.json
@@ -19,6 +19,7 @@
    ".": "./index.js",
    "./preset/": "./preset/",
    "./inline-notification": "./inline-notification/index.js",
+    "./inline-notification-element": "./inline-notification/inline-notification.js",
    "./inline-notification/inline-notification.js": "./inline-notification/inline-notification.js"
  },
  "scripts": {
@@ -36,6 +37,6 @@
  ],
  "dependencies": {
    "@rocket/drawer": "^0.1.2",
-    "@rocket/navigation": "^0.2.0"
+    "@rocket/navigation": "^0.2.1"
  }
 }
--- a/packages/mdjs-core/src/mdjsProcess.js
+++ b/packages/mdjs-core/src/mdjsProcess.js
@@ -18,6 +18,7 @@ const { executeSetupFunctions } = require('plugins-manager');

 const { mdjsParse } = require('./mdjsParse.js');
 const { mdjsStoryParse } = require('./mdjsStoryParse.js');
+const { mdjsSetupCode } = require('./mdjsSetupCode.js');

 /** @type {MdjsProcessPlugin[]} */
 const defaultMetaPlugins = [
@@ -25,6 +26,7 @@ const defaultMetaPlugins = [
  { name: 'gfm', plugin: gfm },
  { name: 'mdjsParse', plugin: mdjsParse },
  { name: 'mdjsStoryParse', plugin: mdjsStoryParse },
+  { name: 'mdjsSetupCode', plugin: mdjsSetupCode },
  // @ts-ignore
  { name: 'remark2rehype', plugin: remark2rehype, options: { allowDangerousHtml: true } },
  // @ts-ignore
@@ -50,29 +52,15 @@ const defaultMetaPlugins = [
 * @param {function[]} [options.setupUnifiedPlugins]
 * @param {MdjsProcessPlugin[]} [options.plugins] deprecated option use setupUnifiedPlugins instead
 */
-async function mdjsProcess(
-  mdjs,
-  { rootNodeQueryCode = 'document', setupUnifiedPlugins = [] } = {},
-) {
+async function mdjsProcess(mdjs, { setupUnifiedPlugins = [] } = {}) {
  const parser = unified();

  const metaPlugins = executeSetupFunctions(setupUnifiedPlugins, defaultMetaPlugins);

-  // @ts-ignore
-  for (const pluginObj of metaPlugins) {
-    parser.use(pluginObj.plugin, pluginObj.options);
-  }
-
-  /** @type {unknown} */
-  const parseResult = await parser.process(mdjs);
-  const result = /** @type {ParseResult} */ (parseResult);
-
-  const { stories, jsCode } = result.data;
-  let fullJsCode = jsCode;
-
-  if (stories && stories.length > 0) {
-    const storiesCode = stories.map(story => story.code).join('\n');
-
+  /**
+   * @param {string} code
+   */
+  async function highlightCode(code) {
    // @ts-ignore
    const codePlugins = metaPlugins.filter(pluginObj =>
      ['markdown', 'remark2rehype', 'rehypePrism', 'htmlStringify'].includes(pluginObj.name),
@@ -82,46 +70,30 @@ async function mdjsProcess(
    for (const pluginObj of codePlugins) {
      codeParser.use(pluginObj.plugin, pluginObj.options);
    }
-
-    const invokeStoriesCode = [];
-    for (const story of stories) {
-      let code = '';
-      switch (story.type) {
-        case 'html':
-          code = `\`\`\`html\n${story.code.split('`')[1]}\n\`\`\``;
-          break;
-        case 'js':
-          code = `\`\`\`js\n${story.code}\n\`\`\``;
-          break;
-        default:
-          break;
-      }
-      const codeResult = await codeParser.process(code);
-      const highlightedCode = /** @type {string} */ (codeResult.contents)
-        .replace(/`/g, '\\`')
-        .replace(/\$/g, '\\$');
-      invokeStoriesCode.push(
-        `{ key: '${story.key}', story: ${story.key}, code: \`${highlightedCode}\` }`,
-      );
-    }
-
-    fullJsCode = [
-      jsCode,
-      storiesCode,
-      `const rootNode = ${rootNodeQueryCode};`,
-      `const stories = [${invokeStoriesCode.join(', ')}];`,
-      `for (const story of stories) {`,
-      // eslint-disable-next-line no-template-curly-in-string
-      '  const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);',
-      `  storyEl.codeHasHtml = true;`,
-      `  storyEl.story = story.story;`,
-      `  storyEl.code = story.code;`,
-      `};`,
-      `if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/mdjs-preview.js'); }`,
-      `if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/mdjs-story.js'); }`,
-    ].join('\n');
+    const codeResult = await codeParser.process(code);
+    return codeResult.contents;
  }
-  return { stories, jsCode: fullJsCode, html: result.contents };
+
+  // @ts-ignore
+  for (const pluginObj of metaPlugins) {
+    if (pluginObj.name === 'mdjsSetupCode') {
+      if (pluginObj.options && !pluginObj.options.highlightCode) {
+        pluginObj.options.highlightCode = highlightCode;
+      }
+      if (!pluginObj.options) {
+        pluginObj.options = { highlightCode };
+      }
+    }
+    parser.use(pluginObj.plugin, pluginObj.options);
+  }
+
+  /** @type {unknown} */
+  const parseResult = await parser.process(mdjs);
+  const result = /** @type {ParseResult} */ (parseResult);
+
+  const { stories, setupJsCode } = result.data;
+
+  return { stories, jsCode: setupJsCode, html: result.contents };
 }

 module.exports = {
--- a/packages/mdjs-core/src/mdjsSetupCode.js
+++ b/packages/mdjs-core/src/mdjsSetupCode.js
@@ -0,0 +1,68 @@
+/** @typedef {import('vfile').VFileOptions} VFileOptions */
+/** @typedef {import('unist').Node} Node */
+/** @typedef {import('@mdjs/core/types/code').Story} Story */
+
+function mdjsSetupCode({
+  rootNodeQueryCode = 'document',
+  highlightCode = /** @param {string} code */ code => code,
+} = {}) {
+  /**
+   * @param {Node} tree
+   * @param {VFileOptions} file
+   */
+  async function transformer(tree, file) {
+    const { stories, jsCode } = file.data;
+
+    file.data.setupJsCode = jsCode;
+
+    if (stories && stories.length > 0) {
+      const storiesCode = stories.map(/** @param {Story} story */ story => story.code).join('\n');
+
+      const invokeStoriesCode = [];
+      for (const story of stories) {
+        let code = '';
+        switch (story.type) {
+          case 'html':
+            code = `\`\`\`html\n${story.code.split('`')[1]}\n\`\`\``;
+            break;
+          case 'js':
+            code = `\`\`\`js\n${story.code}\n\`\`\``;
+            break;
+          default:
+            break;
+        }
+
+        let highlightedCode = await highlightCode(code);
+        highlightedCode = highlightedCode.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+        invokeStoriesCode.push(
+          `{ key: '${story.key}', story: ${story.key}, code: \`${highlightedCode}\` }`,
+        );
+      }
+
+      file.data.setupJsCode = [
+        jsCode,
+        storiesCode,
+        `const rootNode = ${rootNodeQueryCode};`,
+        `const stories = [${invokeStoriesCode.join(', ')}];`,
+        `for (const story of stories) {`,
+        // eslint-disable-next-line no-template-curly-in-string
+        '  const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);',
+        `  storyEl.codeHasHtml = true;`,
+        `  storyEl.story = story.story;`,
+        `  storyEl.code = story.code;`,
+        `  storyEl.jsCode = \`${jsCode.replace(/`/g, '\\`')}\`;`,
+        `};`,
+        `if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/mdjs-preview.js'); }`,
+        `if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/mdjs-story.js'); }`,
+      ].join('\n');
+    }
+
+    return tree;
+  }
+
+  return transformer;
+}
+
+module.exports = {
+  mdjsSetupCode,
+};
--- a/packages/mdjs-core/test-node/mdJsProcess.test.js
+++ b/packages/mdjs-core/test-node/mdJsProcess.test.js
@@ -43,12 +43,14 @@ describe('mdjsProcess', () => {
      '  storyEl.codeHasHtml = true;',
      '  storyEl.story = story.story;',
      '  storyEl.code = story.code;',
+      '  storyEl.jsCode = `const bar = 2;`;',
      '};',
      `if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/mdjs-preview.js'); }`,
      `if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/mdjs-story.js'); }`,
    ].join('\n');

    const result = await mdjsProcess(input);
+
    expect(result.html).to.equal(expected);
    expect(result.jsCode).to.equal(expectedJsCode);
  });
--- a/packages/mdjs-core/test-node/mdjsParse.test.js
+++ b/packages/mdjs-core/test-node/mdjsParse.test.js
@@ -28,7 +28,7 @@ describe('mdjsParse', () => {
    expect(/** @type {MDJSVFileData} */ (result.data).jsCode).to.equal('const bar = 22;');
  });

-  // TODO: fix this bug
+  // TODO: fix this bug - maybe something in unified itself 🤔
  it.skip('handling only "js script" code blocks', async () => {
    const input = [
      //
--- a/packages/mdjs-core/types/code.d.ts
+++ b/packages/mdjs-core/types/code.d.ts
@@ -25,6 +25,7 @@ export interface ParseResult {
  data: {
    stories: Story[];
    jsCode: string;
+    setupJsCode: string;
  };
 }

--- a/packages/navigation/CHANGELOG.md
+++ b/packages/navigation/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @rocket/navigation

+## 0.2.1
+
+### Patch Changes
+
+- 728a205: feat(navigation): add no-redirects attribute
+
+  By default, the sidebar nav redirects clicks on category headings to
+  their first child.
+
+  To disable those redirects, override
+  \_includes/\_joiningBlocks/\_layoutSidebar/sidebar/20-navigation.njk
+  and add the no-redirects attribute to the <rocket-navigation>
+  element.
+
 ## 0.2.0

 ### Minor Changes
--- a/packages/navigation/package.json
+++ b/packages/navigation/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/navigation",
-  "version": "0.2.0",
+  "version": "0.2.1",
  "publishConfig": {
    "access": "public"
  },
--- a/packages/navigation/src/RocketNavigation.js
+++ b/packages/navigation/src/RocketNavigation.js
@@ -1,3 +1,27 @@
+/**
+ * Debounce a function
+ * @template {(this: any, ...args: any[]) => void} T
+ * @param  {T}       func      function
+ * @param  {number}  wait      time in milliseconds to debounce
+ * @param  {boolean} immediate when true, run immediately and on the leading edge
+ * @return {T}                 debounced function
+ */
+function debounce(func, wait, immediate) {
+  /** @type {number|undefined} */
+  let timeout;
+  return /** @type {typeof func}*/ (function () {
+    let args = /** @type {Parameters<typeof func>} */ (/** @type {unknown}*/ (arguments));
+    const later = () => {
+      timeout = undefined;
+      if (!immediate) func.apply(this, args);
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(this, args);
+  });
+}
+
 /**
 * @typedef {object} NavigationListItem
 * @property {HTMLElement} headline
@@ -5,12 +29,17 @@
 * @property {number} top
 */

+/**
+ * @element rocket-navigation
+ * @attr {Boolean} no-redirects - if set, will not redirect to first child of nav category when clicking on category header.
+ */
 export class RocketNavigation extends HTMLElement {
  constructor() {
    super();
    /** @type NavigationListItem[] */
    this.list = [];
-    this.__scrollHandler = this.__scrollHandler.bind(this);
+    this.__clickHandler = this.__clickHandler.bind(this);
+    this.__scrollHandler = debounce(this.__scrollHandler.bind(this), 25, true);
    this.__isSetup = false;
  }

@@ -20,27 +49,7 @@ export class RocketNavigation extends HTMLElement {
    }
    this.__isSetup = true;

-    this.addEventListener('click', ev => {
-      const el = /** @type {HTMLElement} */ (ev.target);
-      if (el.classList.contains('anchor')) {
-        const anchor = /** @type {HTMLAnchorElement} */ (el);
-        ev.preventDefault();
-        this.dispatchEvent(new Event('close-overlay', { bubbles: true }));
-        // wait for closing animation to finish before start scrolling
-        setTimeout(() => {
-          const parsedUrl = new URL(anchor.href);
-          document.location.hash = parsedUrl.hash;
-        }, 250);
-      }
-      const links = el.parentElement?.querySelectorAll('ul a');
-      if (links && links.length > 1) {
-        const subLink = /** @type {HTMLAnchorElement} */ (links[1]);
-        if (!subLink.classList.contains('anchor')) {
-          ev.preventDefault();
-          subLink.click();
-        }
-      }
-    });
+    this.addEventListener('click', this.__clickHandler);

    const anchors = /** @type {NodeListOf<HTMLAnchorElement>} */ (this.querySelectorAll(
      'li.current a.anchor',
@@ -57,12 +66,41 @@ export class RocketNavigation extends HTMLElement {
      }
    }

-    // TODO: debounce
-    window.addEventListener('scroll', this.__scrollHandler);
+    window.addEventListener('scroll', this.__scrollHandler, { passive: true });

    this.__scrollHandler();
  }

+  /**
+   * @param  {Event} ev
+   */
+  __clickHandler(ev) {
+    const el = /** @type {HTMLElement} */ (ev.target);
+    if (el.classList.contains('anchor')) {
+      const anchor =
+        el instanceof HTMLAnchorElement
+          ? el
+          : /** @type{HTMLAnchorElement} */ (el.querySelector('a.anchor'));
+      ev.preventDefault();
+      this.dispatchEvent(new Event('close-overlay', { bubbles: true }));
+      // wait for closing animation to finish before start scrolling
+      setTimeout(() => {
+        const parsedUrl = new URL(anchor.href);
+        document.location.hash = parsedUrl.hash;
+      }, 250);
+    }
+    if (!this.hasAttribute('no-redirects')) {
+      const links = el.parentElement?.querySelectorAll('ul a');
+      if (links && links.length > 1) {
+        const subLink = /** @type {HTMLAnchorElement} */ (links[1]);
+        if (!subLink.classList.contains('anchor')) {
+          ev.preventDefault();
+          subLink.click();
+        }
+      }
+    }
+  }
+
  __scrollHandler() {
    for (const listObj of this.list) {
      listObj.top = listObj.headline.getBoundingClientRect().top;
--- a/packages/navigation/test-web/rocket-navigation.test.js
+++ b/packages/navigation/test-web/rocket-navigation.test.js
@@ -58,7 +58,8 @@ describe('rocket-navigation', () => {
    expect(anchorSpy).to.not.be.called;
  });

-  it('will mark the currently "active" headline in the menu', async () => {
+  it('will mark the currently "active" headline in the menu', async function () {
+    this.timeout(5000);
    function addBlock(headline, length = 5) {
      return html`
        <h2 id="${headline}">${headline}</h2>
@@ -96,20 +97,20 @@ describe('rocket-navigation', () => {
        }
      </style>
    `);
-    await aTimeout(0);
+    await aTimeout(50);
    const anchorLis = wrapper.querySelectorAll('.menu-item.anchor');
    expect(anchorLis[0]).to.have.class('current');
    expect(anchorLis[1]).to.not.have.class('current');
    expect(anchorLis[2]).to.not.have.class('current');

    document.querySelector('#middle').scrollIntoView();
-    await aTimeout(20);
+    await aTimeout(100);
    expect(anchorLis[0]).to.not.have.class('current');
    expect(anchorLis[1]).to.have.class('current');
    expect(anchorLis[2]).to.not.have.class('current');

    document.querySelector('#bottom').scrollIntoView();
-    await aTimeout(20);
+    await aTimeout(100);
    expect(anchorLis[0]).to.not.have.class('current');
    expect(anchorLis[1]).to.not.have.class('current');
    expect(anchorLis[2]).to.have.class('current');
--- a/packages/playground/README.md
+++ b/packages/playground/README.md
@@ -0,0 +1,3 @@
+# Story element for mdjs
+
+For docs please see our homepage [https://rocket.modern-web.dev/docs/markdown-javascript/story/](https://rocket.modern-web.dev/docs/markdown-javascript/story/).
--- a/packages/playground/index.js
+++ b/packages/playground/index.js
@@ -0,0 +1 @@
+export { RocketPlayground } from './src/RocketPlayground.js';
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@rocket/playground",
+  "version": "0.1.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Rendering storybook story functions inside a story window with show code capabilities",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/modernweb-dev/rocket.git",
+    "directory": "packages/mdjs-story"
+  },
+  "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
+  "homepage": "https://rocket.modern-web.dev/docs/markdown-javascript/story/",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./rocket-playground": "./rocket-playground.js"
+  },
+  "scripts": {
+    "debug": "cd ../../ && npm run debug -- --group mdjs-story",
+    "test": "npm run test:web",
+    "test:watch": "onchange 'src/**/*.{js,cjs}' 'test-node/**/*.js' -- npm run test:node",
+    "test:node": "mocha --timeout 5000 test-node/**/*.test.{js,cjs} test-node/*.test.{js,cjs}",
+    "test:web": "cd ../../ && npm run test:web -- --group mdjs-story"
+  },
+  "files": [
+    "*.js",
+    "assets",
+    "dist-types",
+    "src"
+  ],
+  "dependencies": {
+    "@vanillawc/wc-monaco-editor": "^1.10.12",
+    "lit-element": "^2.4.0",
+    "wasm-flate": "^1.0.2-browser"
+  },
+  "types": "dist-types/index.d.ts"
+}
--- a/packages/playground/rocket-playground.js
+++ b/packages/playground/rocket-playground.js
@@ -0,0 +1,3 @@
+import { RocketPlayground } from './src/RocketPlayground.js';
+
+customElements.define('rocket-playground', RocketPlayground);
--- a/packages/playground/src/DevicePreview.js
+++ b/packages/playground/src/DevicePreview.js
@@ -0,0 +1,133 @@
+import { LitElement, html, css } from 'lit-element';
+import frame from './frame.svg.js';
+
+const DEVICES = {
+  contentFlow: {
+    name: 'Content Flow',
+    system: 'web',
+    width: 'auto',
+    height: 'auto',
+    dpr: 1,
+  },
+  webSmall: {
+    name: 'Web Small',
+    system: 'web',
+    width: 360,
+    height: 640,
+    dpr: 1,
+  },
+  pixel2: {
+    name: 'Pixel 2',
+    system: 'android',
+    width: 411,
+    height: 731,
+    dpr: 2.6,
+  },
+  galaxyS5: {
+    name: 'Galaxy 5',
+    system: 'android',
+    width: 360,
+    height: 640,
+    dpr: 3,
+  },
+  iphoneX: {
+    name: 'iPhone X',
+    system: 'ios',
+    width: 375,
+    height: 812,
+    dpr: 3,
+  },
+};
+
+export class DevicePreview extends LitElement {
+  static get properties() {
+    return {
+      jsCode: { type: String },
+      device: { type: String, reflect: true },
+    };
+  }
+
+  constructor() {
+    super();
+    this.jsCode = '';
+    this.device = 'pixel2';
+    this.iframe = null;
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          position: relative;
+        }
+        iframe {
+          border: none;
+          background: #fff;
+          background: green;
+        }
+        :host([device='pixel2']) iframe {
+          width: 411px;
+          height: 640px;
+        }
+        div,
+        iframe {
+          position: absolute;
+        }
+        iframe {
+          top: 100px;
+          left: 100px;
+        }
+        svg {
+          width: 587px;
+        }
+      `,
+    ];
+  }
+
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    if (this.iframe) {
+      const iframeContent = `
+        <html>
+          <head>
+            <script type="importmap">
+            {
+              "imports": {
+                "lit-html": "http://localhost:8000/__wds-outside-root__/1/node_modules/lit-html/lit-html.js",
+                "@rocket/launch/inline-notification-element": "http://localhost:8000/__wds-outside-root__/1/packages/launch/inline-notification/inline-notification.js"
+              }
+            }
+            </script>
+          </head>
+          <meta name="viewport" content="width=device-width, initial-scale=1">
+          <style>
+            body {
+              margin: 0;
+            }
+          </style>
+          <script type="module">
+            ${this.jsCode}
+          </script>
+          <body></body>
+        </html>
+      `;
+      this.iframe.src = `data:text/html;charset=utf-8,${encodeURIComponent(iframeContent)}`;
+    }
+  }
+
+  firstUpdated() {
+    this.iframe = this.shadowRoot.querySelector('iframe');
+  }
+
+  render() {
+    return html`
+      <iframe
+        sandbox="allow-scripts"
+        csp="script-src localhost:8000 'unsafe-inline'; connect-src 'none'"
+      ></iframe>
+      <div>${frame(html)}</div>
+    `;
+  }
+}
--- a/packages/playground/src/RocketPlayground.js
+++ b/packages/playground/src/RocketPlayground.js
@@ -0,0 +1,170 @@
+import { LitElement, html, css } from 'lit-element';
+import '@vanillawc/wc-monaco-editor';
+import './device-preview.js';
+
+/**
+ * @typedef {object} StoryOptions
+ * @property {ShadowRoot | null} StoryOptions.shadowRoot
+ */
+
+/** @typedef {(options?: StoryOptions) => ReturnType<LitElement['render']>} LitHtmlStoryFn */
+
+/** @typedef {import('./devices.js').devices} devices */
+
+export function createViewer(jsCode) {
+  const iframeViewer = document.createElement('iframe');
+  const iframeContent = `
+    <html>
+      <head>
+        <script type="importmap">
+        {
+          "imports": {
+            "lit-html": "http://localhost:8000/__wds-outside-root__/1/node_modules/lit-html/lit-html.js"
+          }
+        }
+        </script>
+      </head>
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <style>
+        body {
+          margin: 0;
+        }
+      </style>
+      <script type="module">
+        ${jsCode}
+      </script>
+      <body></body>
+    </html>
+  `;
+
+  iframeViewer.setAttribute('style', `border: none; background: #fff;`);
+  iframeViewer.setAttribute('sandbox', 'allow-scripts');
+  iframeViewer.setAttribute('csp', "script-src localhost:8000 'unsafe-inline'; connect-src 'none'");
+
+  // Uses a data url as when using srcdoc the iframe csp rules get ignored?
+  // iframeViewer.setAttribute('srcdoc', iframeContent);
+  iframeViewer.src = `data:text/html;charset=utf-8,${escape(iframeContent)}`;
+
+  return iframeViewer;
+}
+
+/**
+ * Renders a story
+ *
+ * @element mdjs-story
+ * @prop {StoryFn} [story=(() => TemplateResult)] Function that returns the story
+ */
+export class RocketPlayground extends LitElement {
+  static get properties() {
+    return {
+      story: {
+        attribute: false,
+      },
+      jsCode: {
+        type: String,
+      },
+      showDevices: {
+        type: Array,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    /** @type {LitHtmlStoryFn} */
+    this.story = () => html` <p>Loading...</p> `;
+
+    this.jsCode = '';
+
+    // this.story({ shadowRoot: this.shadowRoot });
+
+    this.urlState = new URLSearchParams(document.location.search);
+    // this.urlState.append('jsCode', '');
+
+    /**
+     * @type {Array<keyof devices>}
+     */
+    this.showDevices = ['pixel2'];
+  }
+
+  setJsCode(jsCode) {
+    const encoded = flate.gzip_encode(jsCode);
+    this.urlState.set('jsCode', encoded);
+    this.updateUrl();
+    this.jsCode = jsCode;
+  }
+
+  updateUrl() {
+    history.pushState('', '', '?' + this.urlState.toString());
+  }
+
+  // createRenderRoot() {
+  //   return this;
+  // }
+
+  setup() {
+    this.editorWc = this.querySelector('wc-monaco-editor');
+    if (this.editorWc) {
+      this.editorWc.tabSize = 2;
+
+      if (this.urlState.get('jsCode')) {
+        this.jsCode = flate.gzip_decode(this.urlState.get('jsCode'));
+      }
+
+      const value = [
+        "import { html, render } from 'lit-html';",
+        'export const foo = () => html`',
+        '  <p>hey there</p>',
+        '`;',
+        "render(foo(), document.querySelector('body'))",
+      ].join('\n');
+      this.editorWc.value = this.jsCode || value;
+
+      this.editorWc.editor.getModel().onDidChangeRawContentFast(() => {
+        this.setJsCode(this.editorWc.value);
+      });
+    }
+  }
+
+  firstUpdated() {
+    setTimeout(() => {
+      this.setup();
+    }, 100);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.editorWc = document.createElement('wc-monaco-editor');
+    this.editorWc.slot = 'editor';
+    this.editorWc.setAttribute('language', 'javascript');
+    this.appendChild(this.editorWc);
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          height: 100%;
+        }
+        #editor-wrapper,
+        #devices-wrapper {
+          width: 50%;
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <div id="editor-wrapper">
+        <slot name="editor"></slot>
+      </div>
+      <div id="devices-wrapper">
+        ${this.showDevices.map(
+          device => html` <device-preview .jsCode=${this.jsCode} .device=${device}></device-preview> `,
+        )}
+      </div>
+    `;
+  }
+}
--- a/packages/playground/src/createImportMapForLocalPackages.js
+++ b/packages/playground/src/createImportMapForLocalPackages.js
@@ -0,0 +1,7 @@
+
+export async function createImportMapForLocalPackages(packages) {
+  for (const pkg of packages) {
+    const pkgJson = await import(pkg);
+    console.log({pkg, pkgJson});
+  }
+}
--- a/packages/playground/src/device-preview.js
+++ b/packages/playground/src/device-preview.js
@@ -0,0 +1,3 @@
+import { DevicePreview } from './DevicePreview.js';
+
+customElements.define('device-preview', DevicePreview);
--- a/packages/playground/src/devices.js
+++ b/packages/playground/src/devices.js
@@ -0,0 +1,37 @@
+export const devices = {
+  contentFlow: {
+    name: 'Content Flow',
+    system: 'web',
+    width: 'auto',
+    height: 'auto',
+    dpr: 1,
+  },
+  webSmall: {
+    name: 'Web Small',
+    system: 'web',
+    width: 360,
+    height: 640,
+    dpr: 1,
+  },
+  pixel2: {
+    name: 'Pixel 2',
+    system: 'android',
+    width: 411,
+    height: 731,
+    dpr: 2.6,
+  },
+  galaxyS5: {
+    name: 'Galaxy 5',
+    system: 'android',
+    width: 360,
+    height: 640,
+    dpr: 3,
+  },
+  iphoneX: {
+    name: 'iPhone X',
+    system: 'ios',
+    width: 375,
+    height: 812,
+    dpr: 3,
+  },
+};
--- a/packages/playground/src/frame.svg.js
+++ b/packages/playground/src/frame.svg.js
@@ -0,0 +1,27 @@
+export default tag => tag`
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583.782 992.748">
+    <defs>
+      <path id="reuse-0" d="M-328.071 77.934h87.321c3.158 3.241 3.966 6.64 0 10.357h-87.321c-2.388-2.89-5.443-5.624 0-10.357z" filter="url(#c)"/>
+    </defs>
+    <defs>
+      <filter id="c" width="1.02" height="1.18" x="-.01" y="-.09" color-interpolation-filters="sRGB">
+        <feGaussianBlur stdDeviation=".388"/>
+      </filter>
+      <filter id="b" width="1.146" height="1.072" x="-.073" y="-.036" color-interpolation-filters="sRGB">
+        <feGaussianBlur stdDeviation="14.425"/>
+      </filter>
+      <linearGradient id="a">
+        <stop offset="0" stop-color="#ececec"/>
+        <stop offset="1" stop-color="#ececec" stop-opacity="0"/>
+      </linearGradient>
+    </defs>
+    <g transform="translate(-83.389 -12.472)">
+      <path fill-rule="evenodd" d="M121.945 32.979c-25.884 7.036-44.412 19.814-46.138 45.707l-.543 819.843c.093 25.7 10.39 46.875 47.222 56.291l413.614-.48c29.367-6.096 48.726-21.391 48.851-54.367l.543-818.4c-3.437-20.23-8.931-39.683-45.05-47.632zm431.2 46.298a3.26 3.26 0 013.267 3.258l.572 825.24a3.26 3.26 0 01-3.263 3.262l-459.512-.562a3.26 3.26 0 01-3.256-3.264l.567-823.549a3.26 3.26 0 013.251-3.258z" filter="url(#b)" opacity=".45" transform="translate(83.389 12.471) scale(.9375)"/>
+      <path fill="none" d="M325.826 41.2v964.02h-197.99c-23.97-6.931-42.562-21.032-44.447-57.409l.505-854.589c1.73-26.554 13.299-45.975 41.921-53.033zm-.052 0v964.02h197.99c23.97-6.931 42.562-21.032 44.447-57.409l-.505-854.589c-1.73-26.554-13.299-45.975-41.922-53.033z"/>
+      <path fill="#151515" fill-rule="evenodd" d="M193.16 44.552c-24.085 6.596-41.324 18.577-42.93 42.852l-.506 768.63c.088 24.094 9.67 43.949 43.942 52.777l384.868-.45c27.326-5.715 45.34-20.057 45.456-50.973l.505-767.278c-3.198-18.965-8.31-37.204-41.92-44.656zm395.232 66.864a2.863 2.863 0 012.871 2.862l.504 724.803a2.863 2.863 0 01-2.868 2.866l-403.586-.495a2.863 2.863 0 01-2.86-2.865l.498-723.318a2.863 2.863 0 012.856-2.862z"/>
+      <use filter="url(#c)" transform="matrix(1.00398 0 0 1.14592 671.843 -16.339)" xlink:href="#reuse-0"/>
+      <ellipse cx="532.319" cy="77.836" rx="8.207" ry="7.955"/>
+      <use filter="url(#c)" transform="matrix(1.00398 0 0 1.14592 671.843 778.763)" xlink:href="#reuse-0"/>
+    </g>
+  </svg>
+`;
--- a/packages/playground/src/sample.js
+++ b/packages/playground/src/sample.js
--- a/packages/playground/test-node/createImportMapForLocalPackages.test.js
+++ b/packages/playground/test-node/createImportMapForLocalPackages.test.js
@@ -0,0 +1,19 @@
+import chai from 'chai';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { createImportMapForLocalPackages } from '../src/createImportMapForLocalPackages.js';
+
+const { expect } = chai;
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+describe('normalizeConfig', () => {
+  it.only('makes sure essential settings are there', async () => {
+    const importMap = await createImportMapForLocalPackages(['@rocket/launch']);
+
+    expect(importMap).to.deep.equal({
+      imports: {
+        "@rocket/launch/inline-notification-element": "http://localhost:8000/__wds-outside-root__/1/packages/launch/inline-notification/inline-notification.js"
+      }
+    });
+  });
+});
--- a/packages/playground/tsconfig.json
+++ b/packages/playground/tsconfig.json
@@ -0,0 +1,24 @@
+// Don't edit this file directly. It is generated by /scripts/update-package-configs.ts
+
+{
+  "extends": "../../tsconfig.browser-base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "outDir": "./dist-types",
+    "rootDir": ".",
+    "composite": true,
+    "allowJs": true,
+    "checkJs": true,
+    "emitDeclarationOnly": true
+  },
+  "references": [],
+  "include": [
+    "src",
+    "*.js",
+    "types"
+  ],
+  "exclude": [
+    "dist",
+    "dist-types"
+  ]
+}
--- a/packages/search/src/RocketSearch.js
+++ b/packages/search/src/RocketSearch.js
@@ -112,7 +112,7 @@ export class RocketSearch extends ScopedElementsMixin(LitElement) {
    return html`
      <rocket-search-combobox
        name="combo"
-        label="Rocket Search"
+        label="Search"
        @input=${ev => {
          this.search = ev.target.value;
        }}
--- a/packages/search/src/RocketSearchOption.js
+++ b/packages/search/src/RocketSearchOption.js
@@ -103,7 +103,7 @@ export class RocketSearchOption extends LinkMixin(LionOption) {

  render() {
    return html`
-      <img class="icon" src=${getIcon(this.section)} />
+      <img class="icon" src=${getIcon(this.section)} alt=${this.section} />
      <div class="choice-field__label">
        <div class="title">${unsafeHTML(this.title)}</div>
        <div class="text">${unsafeHTML(this.text)}</div>
--- a/rocket.config.js
+++ b/rocket.config.js
@@ -3,9 +3,10 @@ import { rocketBlog } from '@rocket/blog';
 import { rocketSearch } from '@rocket/search';
 import { absoluteBaseUrlNetlify } from '@rocket/core/helpers';

-export default {
+/** @type {Partial<import("./packages/cli/types/main").RocketCliOptions>} */
+const config = {
  presets: [rocketLaunch(), rocketBlog(), rocketSearch()],
  absoluteBaseUrl: absoluteBaseUrlNetlify('http://localhost:8080'),
-
  // emptyOutputDir: false,
-};
+}
+export default config;
--- a/yarn.lock
+++ b/yarn.lock
@@ -1778,6 +1778,11 @@
  resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
  integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==

+"@vanillawc/wc-monaco-editor@^1.10.12":
+  version "1.10.12"
+  resolved "https://registry.yarnpkg.com/@vanillawc/wc-monaco-editor/-/wc-monaco-editor-1.10.12.tgz#73ae976b27fecfbef034df0cd2ea3608f4457180"
+  integrity sha512-UOFs6eCf30qWQE8J4+e6axlcoZAKfa/rOgcqMB70s7UvAzQYnE0zpbWmTyRPCG6ARmuHXDkaxjkG8DXywZfJDA==
+
 "@web/browser-logs@^0.2.0":
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/@web/browser-logs/-/browser-logs-0.2.0.tgz#3f39d59154bf668f0bce467026354ff2b9f3e06b"
@@ -8744,6 +8749,11 @@ void-elements@^2.0.1:
  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=

+wasm-flate@^1.0.2-browser:
+  version "1.0.2-browser"
+  resolved "https://registry.yarnpkg.com/wasm-flate/-/wasm-flate-1.0.2-browser.tgz#e10e758b37c3d38829b54809fa2fef853b48131c"
+  integrity sha512-qpqOzvbKtgG/2Mb0DYXVPQ2nOrkKYoAQtpr4QZzgO8SMfKieeODUy2vomMnimQjH/K2RGWnw+kZmO8yf+Yh9qA==
+
 wcwidth@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
Author	SHA1	Message	Date
Thomas Allmer	00ebeea10f	wip: POC	2021-04-04 18:02:12 +02:00
Thomas Allmer	818caad7cb	Create chilled-turkeys-help.md	2021-04-04 18:01:06 +02:00
Konstantinos Norgias	672b7e893e	chore: generalize label & add alt when no img	2021-04-04 18:01:06 +02:00
Thomas Allmer	a8e66d84f4	feat(mdjs-core): extract mdjsSetupCode function which support a highlightCode fn	2021-04-04 18:00:26 +02:00
github-actions[bot]	e9090d64b9	Version Packages	2021-04-01 20:01:47 +02:00
Benny Powers	728a205b7b	chore: add changeset	2021-04-01 19:44:43 +02:00
Benny Powers	67ba29d45a	feat(navigation): add no-redirects attribute By default, the sidebar nav redirects clicks on category headings to their first child. To disable those redirects, override `_includes/_joiningBlocks/_layoutSidebar/sidebar/20-navigation.njk` and add the `no-redirects` attribute to the `<rocket-navigation>` element.	2021-04-01 19:44:43 +02:00
				`@@ -0,0 +1 @@`
				`export { RocketPlayground } from './src/RocketPlayground.js';`