Version Packages

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

@@ -5,7 +5,7 @@ For that reason Rocket creates those automatically with the title, parent title,
 
 It will look like this but with your logo:
 
-<img src="{{ socialMediaImage }}" width="1200" height="630" alt="Social Media Image of this page" style="border: 1px solid #000" />
+<img src="{{ socialMediaImage | url }}" width="1200" height="630" alt="Social Media Image of this page" style="border: 1px solid #000" />
 
 There are multiple ways you can modify it.
 

packages/check-html-links/CHANGELOG.md

@@ -1,5 +1,11 @@
 # check-html-links
 
+## 0.2.2
+
+### Patch Changes
+
+- 66c2d78: fix: windows path issue
+
 ## 0.2.1
 
 ### Patch Changes

packages/check-html-links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "check-html-links",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "publishConfig": {
     "access": "public"
   },

packages/check-html-links/src/validateFolder.js

@@ -6,6 +6,7 @@ import { createRequire } from 'module';
 
 import { listFiles } from './listFiles.js';
 import path from 'path';
+import slash from 'slash';
 
 /** @typedef {import('../types/main').Link} Link */
 /** @typedef {import('../types/main').LocalFile} LocalFile */
@@ -45,7 +46,7 @@ function extractReferences(htmlFilePath) {
     if (ev === SaxEventType.Attribute) {
       const data = /** @type {Attribute} */ (/** @type {any} */ (_data));
       const attributeName = data.name.toString();
-      const value = data.value.toString();
+      const value = slash(data.value.toString());
       const entry = {
         attribute: attributeName,
         value,

packages/cli/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @rocket/cli
 
+## 0.6.3
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+- Updated dependencies [2b7f1ee]
+  - @rocket/eleventy-plugin-mdjs-unified@0.4.1
+
+## 0.6.2
+
+### Patch Changes
+
+- ed86ff2: Do not set `data-localize-lang` in the simulator iframe html tag
+- f4a0ab5: Pass document shadowRoot to iframe
+- c675820: fix: windows path issue avoid filtering of index section of collections
+
 ## 0.6.1
 
 ### Patch Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/cli",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "publishConfig": {
     "access": "public"
   },
@@ -59,7 +59,7 @@
     "@11ty/eleventy-img": "^0.7.4",
     "@rocket/building-rollup": "^0.2.0",
     "@rocket/core": "^0.1.2",
-    "@rocket/eleventy-plugin-mdjs-unified": "^0.4.0",
+    "@rocket/eleventy-plugin-mdjs-unified": "^0.4.1",
     "@rocket/eleventy-rocket-nav": "^0.3.0",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
@@ -67,12 +67,13 @@
     "@web/dev-server": "^0.1.4",
     "@web/dev-server-rollup": "^0.3.2",
     "@web/rollup-plugin-copy": "^0.2.0",
-    "check-html-links": "^0.2.1",
+    "check-html-links": "^0.2.2",
     "command-line-args": "^5.1.1",
     "command-line-usage": "^6.1.1",
     "fs-extra": "^9.0.1",
     "micromatch": "^4.0.2",
     "plugins-manager": "^0.2.1",
+    "slash": "^3.0.0",
     "utf8": "^3.0.0"
   },
   "types": "dist-types/index.d.ts"

packages/cli/preset/_includes/_joiningBlocks/head/20-social-media.njk

@@ -1,7 +1,7 @@
 <meta property="og:site_name" content="{{ site.name }}"/>
 <meta property="og:type" content="website"/>
 
-<meta property="og:image" content="{{ socialMediaImage }}"/>
+<meta property="og:image" content="{{ socialMediaImage | url }}"/>
-<meta property="og:url" content="{{ page.url }}"/>
+<meta property="og:url" content="{{ page.url | url }}"/>
 
 <meta name="twitter:card" content="summary_large_image"/>

packages/cli/preset/_includes/layout-simulator.njk

@@ -35,7 +35,6 @@
         if (urlParts.get('language')) {
           document.documentElement.setAttribute('lang', urlParts.get('language'));
           document.documentElement.setAttribute('data-lang', urlParts.get('language'));
-          document.documentElement.setAttribute('data-localize-lang', urlParts.get('language'));
         }
         if (urlParts.get('story-key')) {
           document.documentElement.setAttribute('story-key', urlParts.get('story-key'));
@@ -47,7 +46,7 @@
         }
 
         const mod = await import(urlParts.get('story-file'));
-        render(mod[urlParts.get('story-key')](), document.body);
+        render(mod[urlParts.get('story-key')]({ shadowRoot: document }), document.body);
       }
 
       window.addEventListener('hashchange', onHashChange, false);

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

@@ -1,5 +1,6 @@
 const path = require('path');
 const fs = require('fs');
+const slash = require('slash');
 const { readdirSync } = require('fs');
 
 function getDirectories(source) {
@@ -23,7 +24,7 @@ const rocketCollections = {
           let docs = [
             ...collection.getFilteredByGlob(`${_inputDirCwdRelative}/${section}/**/*.md`),
           ];
-          docs = docs.filter(page => page.inputPath !== `./${indexSection}`);
+          docs = docs.filter(page => page.inputPath !== `./${slash(indexSection)}`);
 
           return docs;
         });

packages/eleventy-plugin-mdjs-unified/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @rocket/eleventy-plugin-mdjs-unified
 
+## 0.4.1
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+- Updated dependencies [2b7f1ee]
+  - @mdjs/core@0.7.1
+
 ## 0.4.0
 
 ### Minor Changes

packages/eleventy-plugin-mdjs-unified/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/eleventy-plugin-mdjs-unified",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,7 @@
     "mdjs"
   ],
   "dependencies": {
-    "@mdjs/core": "^0.7.0",
+    "@mdjs/core": "^0.7.1",
     "es-module-lexer": "^0.3.26",
     "unist-util-visit": "^2.0.3"
   },

packages/eleventy-plugin-mdjs-unified/src/eleventy-plugin-mdjs-unified.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 const path = require('path');
+const slash = require('slash');
 const fs = require('fs');
 const { mdjsProcess } = require('@mdjs/core');
 const visit = require('unist-util-visit');
@@ -121,8 +122,12 @@ function eleventyUnified(pluginOptions) {
       return plugins.map(plugin => {
         if (plugin.options) {
           plugin.options.page = eleventySettings.page;
+          plugin.options.rocketConfig = eleventySettings.rocketConfig;
         } else {
-          plugin.options = { page: eleventySettings.page };
+          plugin.options = {
+            page: eleventySettings.page,
+            rocketConfig: eleventySettings.rocketConfig,
+          };
         }
         return plugin;
       });
@@ -145,8 +150,19 @@ function eleventyUnified(pluginOptions) {
       const newName = path.join(newFolder, '__mdjs-stories.js');
       await fs.promises.mkdir(newFolder, { recursive: true });
       await fs.promises.writeFile(newName, result.jsCode, 'utf8');
+
+      let scriptUrl = eleventySettings.page.url;
+      if (
+        eleventySettings.rocketConfig &&
+        eleventySettings.rocketConfig.command === 'build' &&
+        eleventySettings.rocketConfig.pathPrefix
+      ) {
+        scriptUrl = slash(
+          path.join(eleventySettings.rocketConfig.pathPrefix, eleventySettings.page.url),
+        );
+      }
       code += `
-        <script type="module" src="${eleventySettings.page.url}__mdjs-stories.js" mdjs-setup></script>
+        <script type="module" src="${scriptUrl}__mdjs-stories.js" mdjs-setup></script>
       `;
     }
     return code;

packages/launch/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @rocket/launch
 
+## 0.4.2
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+
+## 0.4.1
+
+### Patch Changes
+
+- 81edf45: Reduce the amount of js files in the build by avoiding inline script tags
+
 ## 0.4.0
 
 ### Minor Changes

packages/launch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/launch",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,7 +35,7 @@
     "preset"
   ],
   "dependencies": {
-    "@rocket/drawer": "^0.1.2",
+    "@rocket/drawer": "^0.1.3",
     "@rocket/navigation": "^0.2.1"
   }
 }

packages/launch/preset/_includes/_joiningBlocks/bottom/10-init-navigation.njk

@@ -1,17 +1 @@
-{# 
+<script type="module" src="{{ '/_assets/scripts/init-navigation.js' | asset | url }}"></script>
-  src leads to the file not being included/executed? bug in rollup-plugin-html? 
-  <script type="module" src="{{ '/_assets/scripts/init-navigation.js' | asset }}"></script>
-#}
-<script type="module">
-  import '@rocket/navigation/rocket-navigation.js';
-  import '@rocket/drawer/rocket-drawer.js';
-  const drawer = document.querySelector('#sidebar');
-
-  // Toggle button
-  const triggers = document.querySelectorAll('[data-action="trigger-mobile-menu"]');
-  for (const trigger of [...triggers]) {
-    trigger.addEventListener('click', function () {
-      drawer.opened = true;
-    });
-  }
-</script>

packages/launch/preset/_includes/_joiningBlocks/head/30-social-media.njk

@@ -1,7 +1,7 @@
 <meta property="og:site_name" content="{{ site.name }}"/>
 <meta property="og:type" content="website"/>
 
-<meta property="og:image" content="{{ socialMediaImage }}"/>
+<meta property="og:image" content="{{ socialMediaImage  | url }}"/>
-<meta property="og:url" content="{{ page.url }}"/>
+<meta property="og:url" content="{{ page.url | url }}"/>
 
 <meta name="twitter:card" content="summary_large_image"/>

packages/launch/test-node/RocketLaunch.preset.test.js

@@ -208,19 +208,7 @@ describe('RocketLaunch preset', () => {
         '      </div>',
         '    </footer>',
         '',
-        '    <script type="module">',
+        '    <script type="module" src="/_merged_assets/scripts/init-navigation.js"></script>',
-        '      import "@rocket/navigation/rocket-navigation.js";',
-        '      import "@rocket/drawer/rocket-drawer.js";',
-        '      const drawer = document.querySelector("#sidebar");',
-        '',
-        '      // Toggle button',
-        `      const triggers = document.querySelectorAll('[data-action="trigger-mobile-menu"]');`,
-        '      for (const trigger of [...triggers]) {',
-        '        trigger.addEventListener("click", function () {',
-        '          drawer.opened = true;',
-        '        });',
-        '      }',
-        '    </script>',
         '  </body>',
         '</html>',
       ].join('\n'),
@@ -443,19 +431,7 @@ describe('RocketLaunch preset', () => {
         '      </div>',
         '    </footer>',
         '',
-        '    <script type="module">',
+        '    <script type="module" src="/_merged_assets/scripts/init-navigation.js"></script>',
-        '      import "@rocket/navigation/rocket-navigation.js";',
-        '      import "@rocket/drawer/rocket-drawer.js";',
-        '      const drawer = document.querySelector("#sidebar");',
-        '',
-        '      // Toggle button',
-        `      const triggers = document.querySelectorAll('[data-action="trigger-mobile-menu"]');`,
-        '      for (const trigger of [...triggers]) {',
-        '        trigger.addEventListener("click", function () {',
-        '          drawer.opened = true;',
-        '        });',
-        '      }',
-        '    </script>',
         '  </body>',
         '</html>',
       ].join('\n'),

packages/mdjs-core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.7.1
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+
 ## 0.7.0
 
 ### Minor Changes

packages/mdjs-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/core",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "publishConfig": {
     "access": "public"
   },
@@ -43,7 +43,7 @@
     "remark"
   ],
   "dependencies": {
-    "@mdjs/mdjs-preview": "^0.4.0",
+    "@mdjs/mdjs-preview": "^0.4.2",
     "@mdjs/mdjs-story": "^0.2.0",
     "@types/unist": "^2.0.3",
     "es-module-lexer": "^0.3.26",

packages/mdjs-core/src/mdjsSetupCode.js

@@ -1,8 +1,43 @@
+const path = require('path');
+const slash = require('slash');
+
 /** @typedef {import('vfile').VFileOptions} VFileOptions */
 /** @typedef {import('unist').Node} Node */
 /** @typedef {import('@mdjs/core/types/code').Story} Story */
 
-function mdjsSetupCode({ rootNodeQueryCode = 'document', simulationSettings = {} } = {}) {
+/**
+ * @typedef {Object} simulationSettings
+ * @property {string} [simulatorUrl]
+ */
+
+/**
+ * @typedef {Object} rocketConfig
+ * @property {string} [pathPrefix]
+ */
+
+/**
+ * @param {object} options
+ * @param {string} [options.rootNodeQueryCode]
+ * @param {simulationSettings} [options.simulationSettings]
+ * @param {rocketConfig} [options.rocketConfig]
+ * @returns
+ */
+function mdjsSetupCode({
+  rootNodeQueryCode = 'document',
+  simulationSettings = {},
+  rocketConfig = {},
+} = {}) {
+  if (rocketConfig && rocketConfig.pathPrefix) {
+    if (simulationSettings && simulationSettings.simulatorUrl) {
+      const { simulatorUrl } = simulationSettings;
+      if (simulatorUrl[0] === '/' && !simulatorUrl.startsWith(rocketConfig.pathPrefix)) {
+        simulationSettings.simulatorUrl = slash(
+          path.join(rocketConfig.pathPrefix, simulationSettings.simulatorUrl),
+        );
+      }
+    }
+  }
+
   /**
    * @param {Node} tree
    * @param {VFileOptions} file

packages/mdjs-preview/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @mdjs/mdjs-preview
 
+## 0.4.2
+
+### Patch Changes
+
+- 72f631a: Improve customizations by hiding empty themes, platforms and adding parts to be styled.
+- 74dd8d1: Autoheight will not grow bigger than the current size height
+- 72f631a: Add a copy code button
+
+## 0.4.1
+
+### Patch Changes
+
+- 0f6709a: Make sure initial settings are taken from the element if nothing is yet stored
+
 ## 0.4.0
 
 ### Minor Changes

packages/mdjs-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/mdjs-preview",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "publishConfig": {
     "access": "public"
   },

packages/mdjs-preview/src/MdJsPreview.js

@@ -51,6 +51,7 @@ export class MdJsPreview extends LitElement {
       edgeDistance: { type: Boolean },
       autoHeight: { type: Boolean },
       rememberSettings: { type: Boolean },
+      __copyButtonText: { type: String },
     };
   }
 
@@ -61,18 +62,21 @@ export class MdJsPreview extends LitElement {
     this.key = '';
     this.contentHeight = 0;
     this.simulatorUrl = '';
+    this.__supportsClipboard = 'clipboard' in navigator;
+    this.__copyButtonText = 'Copy Code';
 
     this.theme = 'light';
+    /** @type {{ key: string, name: string }[]} */
     this.themes = [
-      { key: 'light', name: 'Light' },
+      // { key: 'light', name: 'Light' },
-      { key: 'dark', name: 'Dark' },
+      // { key: 'dark', name: 'Dark' },
     ];
 
     this.language = 'en-US';
     this.languages = [
       { key: 'en', name: 'English' },
       { key: 'en-US', name: 'English (United States)' },
-      { key: 'en-US', name: 'English (United Kingdom)' },
+      { key: 'en-GB', name: 'English (United Kingdom)' },
       { key: 'de', name: 'German' },
       { key: 'es', name: 'Spanish' },
       { key: 'fi', name: 'Finnish' },
@@ -83,16 +87,17 @@ export class MdJsPreview extends LitElement {
       { key: 'pt', name: 'Portuguese' },
       { key: 'ro', name: 'Romanian' },
       { key: 'sv', name: 'Swedish' },
-      { key: 'sv', name: 'Swedish' },
     ];
 
     this.platform = 'web';
+
+    /** @type {{ key: string, name: string }[]} */
     this.platforms = [
-      { key: 'web', name: 'Web' },
+      // { key: 'web', name: 'Web' },
       // { key: 'web-windows', name: 'Windows' },
       // { key: 'web-mac', name: 'Mac' },
-      { key: 'android', name: 'Android' },
+      // { key: 'android', name: 'Android' },
-      { key: 'ios', name: 'iOS' },
+      // { key: 'ios', name: 'iOS' },
     ];
 
     this.size = 'webSmall';
@@ -178,10 +183,11 @@ export class MdJsPreview extends LitElement {
   }
 
   get deviceHeight() {
+    const maxHeight = this.sizeData?.height || 50;
     if (this.autoHeight) {
-      return this.contentHeight + 10;
+      return Math.min(this.contentHeight, maxHeight);
     }
-    return this.sizeData?.height || 50;
+    return maxHeight;
   }
 
   /**
@@ -269,10 +275,19 @@ export class MdJsPreview extends LitElement {
     this.size = sizes[0].key;
   }
 
+  async onCopy() {
+    if (this.textContent) {
+      await navigator.clipboard.writeText(this.textContent.trim());
+      this.__copyButtonText = 'Copied ✅';
+      setTimeout(() => {
+        this.__copyButtonText = 'Copy code';
+      }, 2000);
+    }
+  }
+
   renderPlatforms() {
-    return html`
+    if (this.platforms.length) {
-      <div>
+      return html`
-        <h3>Platform</h3>
         <h4>Platform</h4>
         <div
           class="segmented-control"
@@ -298,14 +313,24 @@ export class MdJsPreview extends LitElement {
             `,
           )}
         </div>
-      </div>
+      `;
-    `;
+    }
+  }
+
+  renderPlatform() {
+    if (this.platforms.length) {
+      return html`
+        <div>
+          <h3>Platform</h3>
+          ${this.renderPlatforms()}
+        </div>
+      `;
+    }
   }
 
   renderSizes() {
-    return html`
+    if (this.sizes.length) {
-      <div>
+      return html`
-        <h3>Viewport</h3>
         <h4>Size</h4>
         <div
           class="segmented-control"
@@ -331,16 +356,22 @@ export class MdJsPreview extends LitElement {
             `,
           )}
         </div>
-        ${this.renderAutoHeight()}
+      `;
+    }
+  }
+
+  renderViewport() {
+    return html`
+      <div>
+        <h3>Viewport</h3>
+        ${this.renderSizes()} ${this.renderAutoHeight()}
       </div>
     `;
   }
 
   renderThemes() {
-    return html`
+    if (this.themes.length) {
-      <div>
+      return html`
-        <h3>Visual</h3>
-        <h4>Theme</h4>
         <div
           class="segmented-control"
           @change=${
@@ -365,15 +396,22 @@ export class MdJsPreview extends LitElement {
             `,
           )}
         </div>
-        ${this.renderEdgeDistance()}
+      `;
+    }
+  }
+
+  renderVisual() {
+    return html`
+      <div>
+        <h3>Visual</h3>
+        ${this.renderThemes()} ${this.renderEdgeDistance()}
       </div>
     `;
   }
 
   renderLanguages() {
-    return html`
+    if (this.languages.length) {
-      <div>
+      return html`
-        <h3>Localization</h3>
         <label>
           Language
           <select
@@ -394,6 +432,15 @@ export class MdJsPreview extends LitElement {
             )}
           </select>
         </label>
+      `;
+    }
+  }
+
+  renderLocalization() {
+    return html`
+      <div>
+        <h3>Localization</h3>
+        ${this.renderLanguages()}
       </div>
     `;
   }
@@ -403,7 +450,7 @@ export class MdJsPreview extends LitElement {
       <div>
         <label class="${this.edgeDistance ? 'switch selected' : 'switch'}">
           Apply distance to edge
-          <span class="switch-button"></span>
+          <span part="switch-button"></span>
 
           <input
             type="checkbox"
@@ -426,7 +473,7 @@ export class MdJsPreview extends LitElement {
       <div>
         <label class="${this.autoHeight ? 'switch selected' : 'switch'}">
           Fit height to content
-          <span class="switch-button"></span>
+          <span part="switch-button"></span>
           <input
             type="checkbox"
             ?checked=${this.autoHeight}
@@ -448,7 +495,7 @@ export class MdJsPreview extends LitElement {
       <div>
         <label class="${this.sameSettings ? 'switch selected' : 'switch'}">
           Same settings for all simulations
-          <span class="switch-button"></span>
+          <span part="switch-button"></span>
           <input
             type="checkbox"
             ?checked=${this.sameSettings}
@@ -473,7 +520,7 @@ export class MdJsPreview extends LitElement {
       <div>
         <label class="${this.rememberSettings ? 'switch selected' : 'switch'}">
           Remember settings
-          <span class="switch-button"></span>
+          <span part="switch-button"></span>
           <input
             type="checkbox"
             ?checked=${this.rememberSettings}
@@ -506,11 +553,12 @@ export class MdJsPreview extends LitElement {
           ? html`<div>${this.story({ shadowRoot: this.shadowRoot })}</div>`
           : html`
               <iframe
+                part="iframe"
                 csp=${`script-src ${document.location.origin} 'unsafe-inline'; connect-src ws://${document.location.host}/`}
                 .src=${this.iframeUrl}
                 style=${`width: ${this.sizeData.width}px; height: ${this.deviceHeight}px;`}
               ></iframe>
-              <p class="frame-description" style=${`width: ${this.sizeData.width + 4}px;`}>
+              <p part="frame-description" style=${`width: ${this.sizeData.width + 4}px;`}>
                 ${this.sizeData.name} - ${this.deviceHeight}x${this.sizeData.width}
               </p>
             `}
@@ -523,8 +571,8 @@ export class MdJsPreview extends LitElement {
               </h3>
               <div slot="content">
                 <div class="settings-wrapper">
-                  ${this.renderPlatforms()} ${this.renderSizes()} ${this.renderThemes()}
+                  ${this.renderPlatform()} ${this.renderViewport()} ${this.renderVisual()}
-                  ${this.renderLanguages()} ${this.renderSyncSettings()}
+                  ${this.renderLocalization()} ${this.renderSyncSettings()}
                 </div>
               </div>
             `
@@ -533,7 +581,10 @@ export class MdJsPreview extends LitElement {
           <button>Code</button>
         </h3>
         <div slot="content">
-          <slot></slot>
+          <slot id="code-slot"></slot>
+          <button part="copy-button" @click="${this.onCopy}" ?hidden="${!this.__supportsClipboard}">
+            ${this.__copyButtonText}
+          </button>
         </div>
       </lion-accordion>
       ${this.simulatorUrl
@@ -564,26 +615,45 @@ export class MdJsPreview extends LitElement {
         background: #fff;
       }
 
+      [part='copy-button'] {
+        border: 1px solid var(--primary-color, #3f51b5);
+        border-radius: 9px;
+        padding: 7px;
+        background: none;
+        font-weight: bold;
+        color: var(--primary-color, #3f51b5);
+        text-align: center;
+        font-size: 12px;
+        line-height: 12px;
+        float: right;
+        margin-top: -10px;
+      }
+
+      [part='copy-button']:hover {
+        background-color: var(--primary-color, #3f51b5);
+        color: #fff;
+      }
+
       .switch {
         display: flex;
         justify-content: space-between;
         margin-bottom: 10px;
       }
 
-      .switch:focus-within .switch-button {
+      .switch:focus-within [part='switch-button'] {
         box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 40%), 0 0 0 4px rgb(31 117 203 / 48%);
       }
 
-      .switch-button {
+      [part='switch-button'] {
         display: inline-block;
         width: 44px;
-        background: grey;
+        background: #808080;
         height: 25px;
         border-radius: 15px;
         position: relative;
       }
 
-      .switch-button::after {
+      [part='switch-button']::after {
         content: ' ';
         width: 18px;
         height: 18px;
@@ -595,16 +665,16 @@ export class MdJsPreview extends LitElement {
         left: 4px;
       }
 
-      .switch.selected .switch-button {
+      .switch.selected [part='switch-button'] {
-        background: green;
+        background: var(--primary-color, #008000);
       }
 
-      .switch.selected .switch-button::after {
+      .switch.selected [part='switch-button']::after {
         left: auto;
         right: 4px;
       }
 
-      .frame-description {
+      [part='frame-description'] {
         margin: -5px 0 10px 0;
         text-align: right;
         font-size: 12px;
@@ -640,23 +710,23 @@ export class MdJsPreview extends LitElement {
       }
 
       .controls a {
-        color: #3f51b5;
+        color: var(--primary-color, #3f51b5);
         font-size: 14px;
         line-height: 37px;
       }
 
       .simulation-toggle {
-        border: 1px solid #3f51b5;
+        border: 1px solid var(--primary-color, #3f51b5);
         border-radius: 9px;
         padding: 10px;
         background: none;
         font-weight: bold;
-        color: #3f51b5;
+        color: var(--primary-color, #3f51b5);
         text-align: center;
       }
 
       .simulation-toggle:hover {
-        background-color: #3f51b5;
+        background-color: var(--primary-color, #3f51b5);
         color: #fff;
       }
 
@@ -705,7 +775,7 @@ export class MdJsPreview extends LitElement {
       }
 
       .segmented-control {
-        border: 1px solid #3f51b5;
+        border: 1px solid var(--primary-color, #3f51b5);
         border-radius: 18px;
         display: inline-block;
         font-size: 14px;
@@ -728,7 +798,7 @@ export class MdJsPreview extends LitElement {
       }
 
       .segmented-control label.selected span {
-        background: #3f51b5;
+        background: var(--primary-color, #3f51b5);
         color: #fff;
       }
 

packages/mdjs-preview/src/mdjsViewerSharedStates.js

@@ -40,6 +40,8 @@ function storeSettings() {
   }
 }
 
+let hasGlobalStateBeenSetBefore = false;
+
 function restoreSettings() {
   for (const _sharedStateKey of Object.keys(_sharedStates)) {
     const sharedStateKey = /** @type {keyof _sharedStates} */ (_sharedStateKey);
@@ -55,6 +57,7 @@ function restoreSettings() {
         default:
           _sharedStates[sharedStateKey] = restoredValue;
       }
+      hasGlobalStateBeenSetBefore = true;
     }
   }
 }
@@ -66,27 +69,30 @@ restoreSettings();
  * @param {import('./MdJsPreview.js').MdJsPreview} target
  */
 export function applySharedStates(target) {
-  for (const _sharedStateKey of Object.keys(_sharedStates)) {
+  if (hasGlobalStateBeenSetBefore) {
-    const sharedStateKey = /** @type {keyof _sharedStates} */ (_sharedStateKey);
+    for (const _sharedStateKey of Object.keys(_sharedStates)) {
-    switch (sharedStateKey) {
+      const sharedStateKey = /** @type {keyof _sharedStates} */ (_sharedStateKey);
-      case 'autoHeight':
+      switch (sharedStateKey) {
-      case 'deviceMode':
+        case 'autoHeight':
-      case 'rememberSettings':
+        case 'deviceMode':
-      case 'edgeDistance':
+        case 'rememberSettings':
-        target[sharedStateKey] = _sharedStates[sharedStateKey];
+        case 'edgeDistance':
-        break;
+          target[sharedStateKey] = _sharedStates[sharedStateKey];
-      default:
+          break;
-        target[sharedStateKey] = _sharedStates[sharedStateKey];
+        default:
+          target[sharedStateKey] = _sharedStates[sharedStateKey];
+      }
     }
+  } else {
+    _saveToSharedStates(target);
   }
 }
 
 /**
  *
  * @param {import('./MdJsPreview.js').MdJsPreview} target
- * @param {Function} subscribedFn
  */
-export function saveToSharedStates(target, subscribedFn) {
+function _saveToSharedStates(target) {
   let updated = false;
   for (const _sharedStateKey of Object.keys(_sharedStates)) {
     const sharedStateKey = /** @type {keyof _sharedStates} */ (_sharedStateKey);
@@ -102,8 +108,19 @@ export function saveToSharedStates(target, subscribedFn) {
           _sharedStates[sharedStateKey] = target[sharedStateKey];
       }
       updated = true;
+      hasGlobalStateBeenSetBefore = true;
     }
   }
+  return updated;
+}
+
+/**
+ *
+ * @param {import('./MdJsPreview.js').MdJsPreview} target
+ * @param {Function} subscribedFn
+ */
+export function saveToSharedStates(target, subscribedFn) {
+  const updated = _saveToSharedStates(target);
   if (updated) {
     storeSettings();
     for (const subscribeFn of subscribeFns) {

packages/search/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @rocket/search
 
+## 0.3.5
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+
+## 0.3.4
+
+### Patch Changes
+
+- 81edf45: Reduce the amount of js files in the build by avoiding inline script tags
+
 ## 0.3.3
 
 ### Patch Changes

packages/search/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/search",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "publishConfig": {
     "access": "public"
   },

packages/search/preset/_assets/scripts/define-rocket-search.js

@@ -0,0 +1 @@
+import '@rocket/search/rocket-search.js';

packages/search/preset/_includes/_joiningBlocks/header/25-search-input.njk

@@ -4,6 +4,4 @@
   </svg>
 </rocket-search>
 
-<script type="module">
+<script type="module" src="{{ '/_assets/scripts/define-rocket-search.js' | asset | url }}"></script>
-  import '@rocket/search/rocket-search.js';
-</script>

rocket.config.js

@@ -9,7 +9,18 @@ export default {
   absoluteBaseUrl: absoluteBaseUrlNetlify('http://localhost:8080'),
   setupUnifiedPlugins: [
     adjustPluginOptions('mdjsSetupCode', {
-      simulationSettings: { simulatorUrl: '/simulator/' },
+      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' },
+        ],
+      },
     }),
   ],