Version Packages

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,13 @@
 # @rocket/cli
 
+## 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.2",
   "publishConfig": {
     "access": "public"
   },
@@ -73,6 +73,7 @@
     "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/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/launch/package.json

@@ -35,7 +35,7 @@
     "preset"
   ],
   "dependencies": {
-    "@rocket/drawer": "^0.1.2",
+    "@rocket/drawer": "^0.1.3",
     "@rocket/navigation": "^0.2.1"
   }
 }

packages/mdjs-core/package.json

@@ -43,7 +43,7 @@
     "remark"
   ],
   "dependencies": {
-    "@mdjs/mdjs-preview": "^0.4.0",
+    "@mdjs/mdjs-preview": "^0.4.1",
     "@mdjs/mdjs-story": "^0.2.0",
     "@types/unist": "^2.0.3",
     "es-module-lexer": "^0.3.26",

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) {

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' },
+        ],
+      },
     }),
   ],