docs: use mdjs-layout

divriots · Jan 31, 2022 · 1e0acf2 · 1e0acf2
1 parent 8000422
commit 1e0acf2
Show file tree

Hide file tree

Showing 18 changed files with 45 additions and 59 deletions.
diff --git a/border-radius/doc/doc.md b/border-radius/doc/doc.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # Border Radius

diff --git a/button/doc/button.md b/button/doc/button.md
@@ -1,7 +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 '~/md-layout';
 ```
 
 # Button

diff --git a/colors/doc/colors.md b/colors/doc/colors.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # Colors

diff --git a/md-layout/src/logo.svg → doc-layout/src/logo.svg b/md-layout/src/logo.svg → doc-layout/src/logo.svg
diff --git a/doc-layout/src/template.js b/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>
+`;
diff --git a/elevation/doc/doc.md b/elevation/doc/doc.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # Elevation

diff --git a/introduction/doc/index.md b/introduction/doc/index.md
@@ -1,9 +1,3 @@
-```js script
-import '~/md-layout';
-```
-
-<doc-logo></doc-logo>
-
 # Vue.js v3.x Tech Sample
 
 This is a simple Vue.js-based Design System sample.

diff --git a/md-layout/index.js b/md-layout/index.js
diff --git a/md-layout/src/index.js b/md-layout/src/index.js
diff --git a/md-layout/src/logo.svg.js b/md-layout/src/logo.svg.js
diff --git a/md-layout/src/md-layout.css b/md-layout/src/md-layout.css
diff --git a/mdjs.config.js b/mdjs.config.js
@@ -0,0 +1,5 @@
+import { docLayoutTemplate } from './doc-layout/src/template';
+
+export default {
+  layout: docLayoutTemplate,
+};
diff --git a/spacing/doc/doc.md b/spacing/doc/doc.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # Spacing

diff --git a/studio.config.json b/studio.config.json
@@ -17,7 +17,7 @@
         ]
       ],
       ["components", ["button"]],
-      ["dockit", ["md-layout"]]
+      ["infrastructure", ["doc-layout"]]
     ]
   }
 }
diff --git a/theme/doc/index.md b/theme/doc/index.md
@@ -1,10 +1,7 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
-<doc-logo></doc-logo>
-
 # Vue Theme
 
 This _theme_ for [Vue.js](https://vuejs.org/) is using tokens defined at the top level (i.e. `:where(html)`) to build its own internal tokens. It also defines specific variants (`light` and `dark`) at `html` level based on the top-level tokens.

diff --git a/transition/doc/doc.md b/transition/doc/doc.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # Transition

diff --git a/typography/doc/typography.md b/typography/doc/typography.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # Typography

diff --git a/z-index/doc/doc.md b/z-index/doc/doc.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # zIndices