fix(build): switch to vitepress for demo and developement setup

README.md

@@ -54,7 +54,7 @@ import { MucBanner } from "@muenchen/muc-patternlab-vue";
 git clone https://github.com/it-at-m/muc-patternlab-vue.git
 cd muc-patternlab-vue
 npm install
-npm run dev
+npm run docs:dev
 ```
 
 ## Documentation

docs/.vitepress/components/DemoContainer.vue

@@ -0,0 +1,16 @@
+<script setup>
+import sprites from "../../../public/assets/temporary/muc-icons.svg?raw"
+</script>
+
+<template>
+  <div>
+    <svg
+        style="display: none;"
+        v-html="sprites">
+    </svg>
+
+    <div class="demo-container">
+      <slot></slot>
+    </div>
+  </div>
+</template>

docs/.vitepress/config.ts

@@ -0,0 +1,33 @@
+const path = require('path')
+
+module.exports = {
+  title: 'My Lib',
+  description: 'Just playing around.',
+  themeConfig: {
+    repo: 'https://github.com/wuruoyun/vue-component-lib-starter',
+    sidebar: [
+      {
+        text: 'Introduction',
+        children: [
+          { text: 'What is My Lib?', link: '/' },
+          { text: 'Getting Started', link: '/guide/' },
+        ],
+      }, {
+        text: 'Components',
+        children: [
+          { text: 'MucBanner', link: '/components/muc-banner' },
+          { text: 'MucButton', link: '/components/muc-button' },
+          { text: 'MucIntro', link: '/components/muc-intro' },
+        ],
+      }
+    ],
+  },
+  vite: {
+    resolve: {
+      alias: {
+        'muc-patternlab-vue': path.resolve(__dirname, '../../src'),
+      },
+      dedupe: ['vue'], // avoid error when using dependencies that also use Vue
+    }
+  }
+}

docs/.vitepress/theme/custom.css

@@ -0,0 +1,5 @@
+.demo-container {
+  border: 1px solid lightgrey;
+  border-radius: 5px;
+  padding: 10px 20px;
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,13 @@
+import DefaultTheme from 'vitepress/theme'
+import DemoContainer from '../components/DemoContainer.vue'
+import MucPatternlabVue from 'muc-patternlab-vue'
+
+import './custom.css'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+    app.use(MucPatternlabVue)
+    app.component('DemoContainer', DemoContainer)
+  }
+}

docs/components/demo/MucBanner/Basic.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <muc-banner type="warning">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+    </muc-banner>
+
+    <muc-banner type="emergency">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+    </muc-banner>
+
+    <muc-banner type="info">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+    </muc-banner>
+  </div>
+</template>
+<style scoped>
+div * {
+  margin-bottom: 16px;
+}
+</style>

docs/components/demo/MucButton/Basic.vue

@@ -0,0 +1,3 @@
+<template>
+  <muc-button>Click me</muc-button>
+</template>

docs/components/demo/MucIntro/Basic.vue

@@ -0,0 +1,6 @@
+<template>
+  <muc-intro title="Intro-Titel">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  </muc-intro>
+</template>

docs/components/index.md

@@ -0,0 +1,3 @@
+# Components
+
+You may add a summary of the components here.

docs/components/muc-banner.md

@@ -0,0 +1,35 @@
+<script setup>
+import Basic from './demo/MucBanner/Basic.vue'
+</script>
+
+# muc-banner
+
+//todo describe banner
+
+## Example Usage
+
+<DemoContainer>
+  <Basic/>
+</DemoContainer>
+
+<<< @/components/demo/MucBanner/Basic.vue
+
+## Reference
+
+### Properties
+
+| Name | Type   | Default | Description    |
+| ---- | ------ | ------- | -------------- |
+| msg  | string | null    | Messge to show |
+
+### Events
+
+| Name | Parameters | Description |
+| ---- | ---------- | ----------- |
+|      |            |             |
+
+### Slots
+
+| Name | Parameters | Description |
+| ---- | ---------- | ----------- |
+|      |            |             |

docs/components/muc-button.md

@@ -0,0 +1,35 @@
+<script setup>
+import Basic from './demo/MucButton/Basic.vue'
+</script>
+
+# muc-button
+
+//todo describe button
+
+## Example Usage
+
+<DemoContainer>
+  <Basic/>
+</DemoContainer>
+
+<<< @/components/demo/MucButton/Basic.vue
+
+## Reference
+
+### Properties
+
+| Name | Type   | Default | Description    |
+| ---- | ------ | ------- | -------------- |
+| msg  | string | null    | Messge to show |
+
+### Events
+
+| Name | Parameters | Description |
+| ---- | ---------- | ----------- |
+|      |            |             |
+
+### Slots
+
+| Name | Parameters | Description |
+| ---- | ---------- | ----------- |
+|      |            |             |

docs/components/muc-intro.md

@@ -0,0 +1,35 @@
+<script setup>
+import Basic from './demo/MucIntro/Basic.vue'
+</script>
+
+# muc-intro
+
+//todo describe intro
+
+## Example Usage
+
+<DemoContainer>
+  <Basic/>
+</DemoContainer>
+
+<<< @/components/demo/MucIntro/Basic.vue
+
+## Reference
+
+### Properties
+
+| Name | Type   | Default | Description    |
+| ---- | ------ | ------- | -------------- |
+| msg  | string | null    | Messge to show |
+
+### Events
+
+| Name | Parameters | Description |
+| ---- | ---------- | ----------- |
+|      |            |             |
+
+### Slots
+
+| Name | Parameters | Description |
+| ---- | ---------- | ----------- |
+|      |            |             |

docs/guide/index.md

@@ -0,0 +1,61 @@
+# Getting Started
+
+You may add the usage of the library here.
+
+## Setup
+
+This setup assumes your client app is created with Vite and vue-ts template, and you use 'npm link' to link to `my-lib` locally.
+
+In your `package.json`, you shall have the dependencies compatible with the following:
+
+```json
+"dependencies": {
+  "vue": "^3.2.25"
+}
+```
+
+In your `vite.config.ts`, you shall configure to dedupe `vue`:
+
+```ts
+export default defineConfig({
+  resolve: {
+    dedupe: ['vue'],
+  },
+});
+```
+
+In your `main.ts`, you shall import the libraries and CSS:
+
+```ts
+import 'my-lib/dist/style.css';
+```
+
+In your Webcomponents Entry you should import the css and svg sprite for MDE5-Icons:
+
+```html
+<script lang="ts" setup>
+    import sprites from "@muenchen/muc-patternlab-vue/dist/assets/temporary/muc-icons.svg?raw";
+</script>
+
+<template>
+    <div>
+        <svg
+                style="display: none;"
+                v-html="sprites">
+        </svg>
+        <...>
+    </div>
+</template>
+
+<style>
+@import "@/assets/muenchende-style.css";
+</style>
+```
+
+Import components from this library in your own component:
+
+```html
+<script setup lang="ts">
+    import { MucBanner } from "@muenchen/muc-patternlab-vue";
+</script>
+```

docs/index.md

@@ -0,0 +1,3 @@
+# What is muc-patternlab-vue?
+
+//todo describe lib

package.json

@@ -5,7 +5,6 @@
   "license": "MIT",
   "version": "0.1.0",
   "private": false,
-  "type": "module",
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",
   "repository": {
@@ -20,16 +19,20 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/muc-patternlab-vue.es.js"
-    }
+    },
+    "./dist/assets/temporary/muc-icons.svg": "./dist/assets/temporary/muc-icons.svg",
+    "./dist/assets/temporary/muenchende-fontface.css": "./dist/assets/temporary/muenchende-fontface.css",
+    "./dist/assets/temporary/muenchende-style.css": "./dist/assets/temporary/muenchende-style.css"
   },
   "files": [
     "src",
     "dist"
   ],
   "scripts": {
-    "dev": "vite",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs",
     "build": "rimraf dist && npm run type-check && npm run build-only",
-    "preview": "vite preview",
     "test:unit": "vitest",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
@@ -61,6 +64,7 @@
     "semantic-release": "^23.0.0",
     "typescript": "~5.3.0",
     "vite": "^5.0.11",
+    "vitepress": "^0.22.4",
     "vite-plugin-dts": "^3.0.0",
     "vitest": "^1.2.2",
     "vue-tsc": "^1.8.27"