Use mdjs-layout

border-radius/doc/doc.md

@@ -1,17 +1,16 @@
 ```js script
-import '@divriots/dockit-core/sass-showcases';
-import { html } from '~/md-layout';
+import '@divriots/dockit-core/css-showcases';
 ```
 
 # Border Radius
 
 ## border-radius
 
-```html:html
-<dockit-sass-showcases
+```html story
+<dockit-css-showcases
   css-props-prefix="--border-radius"
   component-class="box"
   style-key="border-radius"
   checkered-background="false"
-></dockit-sass-showcases>
+></dockit-css-showcases>
 ```

button/doc/button.md

@@ -1,8 +1,5 @@
 ```js script
-import 'https://gitcdn.link/repo/PrismJS/prism-themes/master/themes/prism-vsc-dark-plus.css';
 import Button from '../src/Button.vue';
-import * as stories from '../stories/button.stories.js';
-import '~/md-layout';
 ```
 
 # Button
@@ -13,38 +10,29 @@ This is a very simple example of a button
 
 ### Specifying a name
 
-```jsx
-<Button name="Dave"></Button>
-```
-
-Results in
-
-```js story
-export const named = stories.named;
+```js preview-story
+export const named = () => ({
+  components: { Button },
+  template: `<Button name='Dave' />`,
+});
 ```
 
 ### Without a name
 
-```jsx
-<Button></Button>
-```
-
-Results in
-
-```js story
-export const anonymous = stories.anonymous;
+```js preview-story
+export const anonymous = () => ({
+  components: { Button },
+  template: `<Button />`,
+});
 ```
 
 ## Variants
 
 ### Outlined
 
-```jsx
-<Button outlined></Button>
-```
-
-Results in
-
-```js story
-export const outlined = stories.outlined;
+```js preview-story
+export const outlined = () => ({
+  components: { Button },
+  template: `<Button outlined />`,
+});
 ```

colors/doc/colors.md

@@ -1,26 +1,25 @@
 ```js script
-import '@divriots/dockit-core/sass-showcases';
-import { html } from '~/md-layout';
+import '@divriots/dockit-core/css-showcases';
 ```
 
 # Colors
 
 ## background-color
 
-```html:html
-<dockit-sass-showcases
+```html story
+<dockit-css-showcases
   css-props-prefix="--color"
   component-class="box"
   style-key="background-color"
-></dockit-sass-showcases>
+></dockit-css-showcases>
 ```
 
 ## color
 
-```html:html
-<dockit-sass-showcases
+```html story
+<dockit-css-showcases
   css-props-prefix="--color"
   component-type="text"
   style-key="color"
-></dockit-sass-showcases>
+></dockit-css-showcases>
 ```

doc-layout/src/template.js

@@ -0,0 +1,39 @@
+import '@divriots/dockit-core/style.css';
+import '@divriots/dockit-core/mdjs-layout/define.js';
+import { styles } from '@divriots/dockit-core/mdjs-layout';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import logoSvg from './logo.svg?raw';
+import '~/theme/src/theme.scss';
+
+export const docLayoutTemplate = (content, context) => html`
+  <style>
+    ${unsafeHTML(styles)} .preview-story .story_padded {
+      background-color: var(--doc-color-background);
+    }
+    .box {
+      width: 4rem;
+      height: 4rem;
+      background-color: var(--color-white);
+      box-shadow: var(--shadow-large);
+      border-radius: var(--border-radius-medium);
+    }
+  </style>
+  <mdjs-layout
+    .context="${context}"
+    @color-scheme-change="${(event) => {
+      if (event.detail.colorScheme === 'dark') {
+        document.documentElement.classList.add('dark');
+        document.documentElement.setAttribute('color-scheme', 'dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+        document.documentElement.setAttribute('color-scheme', 'light');
+      }
+    }}"
+  >
+    <div class="logo" slot="logo" aria-label="starter-vue3">
+      ${unsafeHTML(logoSvg)}
+    </div>
+    <div class="prose dark:prose-invert">${unsafeHTML(content)}</div>
+  </mdjs-layout>
+`;

elevation/doc/doc.md

@@ -1,17 +1,16 @@
 ```js script
-import '@divriots/dockit-core/sass-showcases';
-import { html } from '~/md-layout';
+import '@divriots/dockit-core/css-showcases';
 ```
 
 # Elevation
 
 ## box-shadow
 
-```html:html
-<dockit-sass-showcases
+```html story
+<dockit-css-showcases
   css-props-prefix="--shadow"
   component-class="box"
   style-key="box-shadow"
   checkered-background="false"
-></dockit-sass-showcases>
+></dockit-css-showcases>
 ```

introduction/doc/index.md

@@ -1,10 +1,3 @@
-```js script
-import { html } from '~/md-layout';
-```
-
-<vue-logo></vue-logo>
-<nuxt-logo></nuxt-logo>
-
 # Vue.js v3.x Tech Sample
 
 This is a simple Vue.js-based Design System sample.
@@ -46,32 +39,32 @@ Get the command to link your Design System in your local project. To so, click t
    Your browser will open the URL given by the command. You'll see the default NuxtJS starting page.
 3. Open your project in your IDE, and go to the file `~/app.vue`
 4. Add a `<script>` tag, add the following lines to import the Design System `Button` component
-   ```vue
+   ```html
    <script setup lang="ts">
-   import Button from '@backlight-dev/john.design-system/button/src/Button.vue';
+     import MyButton from '@backlight-dev/john.design-system/button/src/Button.vue';
    </script>
    ```
 5. Add a `<style>` tag to import the Design System Sass primitives at `app` level
-   ```vue
+   ```html
    <style lang="scss">
-   @use '@backlight-dev/john.design-system/theme/src/theme.scss';
+     @use '@backlight-dev/john.design-system/theme/src/theme.scss';
    </style>
    ```
 6. Finally, replace the `app.vue`'s `<template>` tag content with a `Button` component instance. Your final `app.vue` file will look like:
 
-   ```vue
+   ```html
    <template>
      <div>
-       <Button outlined name="Rioters 🤘" />
+       <MyButton outlined name="Rioters 🤘" />
      </div>
    </template>
 
    <script setup lang="ts">
-   import Button from '@backlight-dev/john.design-system/button/src/Button.vue';
+     import MyButton from '@backlight-dev/john.design-system/button/src/Button.vue';
    </script>
 
    <style lang="scss">
-   @use '@backlight-dev/john.design-system/theme/src/theme.scss';
+     @use '@backlight-dev/john.design-system/theme/src/theme.scss';
    </style>
    ```
 

mdjs.config.js

@@ -0,0 +1,5 @@
+import { docLayoutTemplate } from './doc-layout/src/template';
+
+export default {
+  layout: docLayoutTemplate,
+};

package.json

@@ -13,8 +13,8 @@
     "vue": "^3.1.4"
   },
   "devDependencies": {
-    "@divriots/dockit-core": "^0.1.9",
+    "@divriots/dockit-core": "^0.6.4",
     "lit": "^2.0.2",
     "prettier": "^2.3.2"
   }
-}
+}

spacing/doc/doc.md

@@ -1,12 +1,11 @@
 ```js script
-import '@divriots/dockit-core/sass-showcases';
-import { html } from '~/md-layout';
+import '@divriots/dockit-core/css-showcases';
 ```
 
 # Spacing
 
 ## spaces
 
-```html:html
-<dockit-sass-showcases css-props-prefix="--spacing"></dockit-sass-showcases>
+```html story
+<dockit-css-showcases css-props-prefix="--spacing"></dockit-css-showcases>
 ```