docs: demo inside iframe

Author: abichinger

.github/workflows/release-docs.yml

@@ -21,6 +21,10 @@ jobs:
 
       - run: yarn install
       - run: yarn build
+      - run: |
+          cd demo
+          yarn install
+          yarn build-all
       - run: |
           cd docs
           yarn install

demo/vite.config.ts

@@ -7,14 +7,14 @@ const flavor = process.env.VITE_FLAVOR
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: flavor,
+  base: `demo/${flavor}`,
   plugins: [vue()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
   build: {
-    outDir: `../docs/src/.vuepress/public/${flavor}`,
+    outDir: `../docs/src/.vuepress/public/demo/${flavor}`,
   },
 })

docs/.gitignore

@@ -12,3 +12,5 @@ config.local.js
 basement_dist
 .cache
 .temp
+
+src/.vuepress/public/demo

docs/src/.vuepress/client.js

@@ -18,18 +18,33 @@ import 'element-plus/dist/index.css'
 
 import Ant from 'ant-design-vue'
 // import 'ant-design-vue/dist/antd.css'
-import '../styles/antd.css'
+// import '../styles/antd.css'
 
 import { defineClientConfig } from '@vuepress/client'
 
 import { variables } from './vars'
 
+function prefersDark() {
+  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
 export default defineClientConfig({
   enhance ({ app, router, siteData }) {
+    const myTheme = {
+      dark: prefersDark(),
+      colors: {
+        secondary: '#3AA675',
+      },
+    }
+    
     const vuetify = createVuetify({
       components,
       directives,
-      ssr: true
+      ssr: true,
+      theme: {
+        defaultTheme: 'myTheme',
+        themes: {myTheme}
+      }
     })
 
     app.use(vuetify)

docs/src/.vuepress/components/cron-demo.vue

@@ -7,7 +7,7 @@
         color="secondary"
         group
         density="compact"
-        class="mb-2 elevation-5">
+        class="mb-5 elevation-5">
 
         <v-btn v-for="item in flavors" :value="item.name" :key="item.name" @click="flavor = item">
           {{item.name}}
@@ -22,67 +22,97 @@
         color="secondary"
         group
         density="compact"
-        class="mb-10 elevation-5">
+        class="mb-5 elevation-5">
 
         <v-btn v-for="item in locales" :value="item" :key="item">
           {{item}}
         </v-btn>
+    </v-btn-toggle>
+
+    <p>Format</p>
+    <v-btn-toggle
+        v-model="format"
+        tile
+        color="secondary"
+        group
+        density="compact"
+        class="mb-10 elevation-5">
+
+        <v-btn v-for="item in formats" :value="item" :key="item">
+          {{item}}
+        </v-btn>
 
     </v-btn-toggle>
 
-    <p class="mb-2">
-      <template v-for="l in locales" :key=l>
-        <component v-if="l == locale" :is="flavor.component" v-model="value" :locale="locale"></component>
-      </template>
-    </p>
-    <p class="text-lightest mb-5">
-      cron expression: {{value}}
-    </p>
+    <iframe :src="src"></iframe>
 
   </div>
 </template>
 
 <script>
-import { ref } from 'vue'
+import { withBase, } from '@vuepress/client'
+import { computed, ref } from 'vue'
 
 export default {
-  setup () {
+  props: {
+    index: {
+      type: Number,
+      default: 0,
+    }
+  },
+  setup (props) {
     const flavors = [
       {
         name: 'Light',
-        component: 'cron-light'
       },
       {
         name: 'Vuetify',
-        component: 'cron-vuetify'
       },
       {
         name: 'Element Plus',
-        component: 'cron-element-plus'
       },
       {
         name: 'Ant',
-        component: 'cron-ant'
+      },
+      {
+        name: 'Quasar',
       }
     ]
-
     const locales = ['en', 'de', 'pt', 'es', 'da', 'zh-cn']
-
-    const flavor = flavors[0]
+    const formats = ['crontab', 'quartz']
+    
+    const flavor = ref(flavors[props.index])
+    const locale = ref('en')
+    const format = ref(formats[0])
 
     const selectFlavor = (name) => {
       let i = flavors.map(f => f.name).indexOf(name)
       i = i >= 0 ? i : 0
       return flavors[i]
     }
 
+    const src = computed(() => {
+      const params = {
+        locale: locale.value,
+        format: format.value,
+        'initial-value': format.value == 'quartz' ? '* * * * * *' : '* * * * *'
+      }
+      const query = new URLSearchParams(params)
+      const path = 'demo/' + flavor.value.name.replace(' ', '-').toLowerCase() + '/index.html?' + query.toString()
+      
+      return withBase(path)
+    })
+
     return {
-      flavor: ref(flavor),
+      src,
+      flavor: flavor,
       flavors,
       selectFlavor,
       text: ref(flavor.name),
       locales,
-      locale: ref('en'),
+      locale: locale,
+      formats,
+      format,
       value: ref('* * * * *')
     }
   }

docs/src/.vuepress/styles/index.scss

@@ -16,4 +16,12 @@
 
 .text-lightest {
   color: var(--c-text-lightest)
+}
+
+iframe {
+  width: 100%;
+  height: 500px;
+  border: none;
+  overflow: hidden;
+  border-radius: 15px;
 }

package.json

@@ -34,7 +34,8 @@
     "dry-run": "multi-semantic-release --dry-run --ignore-private-packages",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
     "lint-fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
-    "build-readme": "npx cron-cli readme ."
+    "build-readme": "npx cron-cli readme .",
+    "build-demo": "cd demo && yarn build-all"
   },
   "devDependencies": {
     "@babel/core": "^7.12.13",