feat: better handle for windi config

slidevjs · Apr 16, 2021 · 2818e62 · 2818e62
1 parent 1fef3c1
commit 2818e62
Show file tree

Hide file tree

Showing 18 changed files with 183 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -6,11 +6,11 @@ Opinionated markdown slides maker, powered by Vite and Windi CSS.
 
 - Single markdown entry for composing your slides. Embedded Vue components support.
 - Powered by [Vite](https://github.com/vitejs/vite) - instant content updating
-- Built-in syntax highlighting supported (via[Prism](https://github.com/PrismJS/prism))
+- Built-in syntax highlighting supported via [Prism](https://github.com/PrismJS/prism)
 - Built-in [Monaco editor](https://github.com/Microsoft/monaco-editor) support for live coding in your presentations (with TypeScript!)
 - Fully themeable
 - Styling powered by [Windi CSS](https://github.com/windicss/windicss)
-- Reuses [Vite's huge ecosystems](https://github.com/vitejs/awesome-vite)
+- Reuses [Vite's huge ecosystem](https://github.com/vitejs/awesome-vite)
 
 ## Motivation
 

diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+    (function() {
+      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      const setting = localStorage.getItem('color-schema') || 'auto'
+      if (setting === 'dark' || (prefersDark && setting !== 'light'))
+        document.documentElement.classList.toggle('dark', true)
+    })()
+  </script>
+  <script type="module" src="/@fs/Users/antfu/i/vite-slides/packages/vite-slides/client/main.ts"></script>
+  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+</body>
+</html>
diff --git a/demo/package.json b/demo/package.json
@@ -6,6 +6,7 @@
     "build": "vite-slides build"
   },
   "dependencies": {
+    "@vite-slides/theme-default": "^0.0.0-beta.4",
     "vite-slides": "workspace:*"
   }
 }
diff --git a/packages/create-app/template/package.json b/packages/create-app/template/package.json
@@ -5,6 +5,7 @@
     "build": "vite-slides build"
   },
   "dependencies": {
+    "@vite-slides/theme-default": "^0.0.0-beta.4",
     "vite-slides": "^0.0.0-beta.4"
   }
 }
diff --git a/packages/theme-default/package.json b/packages/theme-default/package.json
@@ -10,5 +10,11 @@
     "url": "https://github.com/antfu/vite-slides"
   },
   "homepage": "https://github.com/antfu/vite-slides",
-  "bugs": "https://github.com/antfu/vite-slides/issues"
+  "bugs": "https://github.com/antfu/vite-slides/issues",
+  "peerDependencies": {
+    "vite-slides": "*"
+  },
+  "devDependencies": {
+    "vite-slides": "workspace:*"
+  }
 }
diff --git a/packages/theme-default/styles/layout.css b/packages/theme-default/styles/layout.css
@@ -89,7 +89,3 @@
     @apply opacity-40 mb-10 text-2xl;
   }
 }
-
-.layout-master.center {
-  @apply h-full grid place-content-center;
-}
diff --git a/packages/theme-default/windi.config.ts b/packages/theme-default/windi.config.ts
@@ -0,0 +1,40 @@
+import { resolve } from 'path'
+import { mergeWindicssConfig } from 'vite-slides'
+import { defineConfig } from 'windicss/helpers'
+import BaseConfig from 'vite-slides/client/windi.config'
+
+export default mergeWindicssConfig(
+  BaseConfig,
+  defineConfig({
+    extract: {
+      include: [
+        resolve(__dirname, '**/*.{vue,ts}'),
+      ],
+      exclude: [
+        resolve(__dirname, 'node_modules/**/*'),
+      ],
+    },
+    shortcuts: {
+      'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
+      'disabled': 'opacity-25 pointer-events-none',
+      'abs-t': 'absolute bottom-0 left-0 right-0',
+      'abs-tl': 'absolute top-0 left-0',
+      'abs-tr': 'absolute top-0 right-0',
+      'abs-b': 'absolute bottom-0 left-0 right-0',
+      'abs-bl': 'absolute bottom-0 left-0',
+      'abs-br': 'absolute bottom-0 right-0',
+    },
+    theme: {
+      extend: {
+        fontFamily: {
+          sans: '"Avenir Next"',
+        },
+        colors: {
+          primary: {
+            DEFAULT: '#42b883',
+          },
+        },
+      },
+    },
+  }),
+)
diff --git a/packages/vite-slides/client/builtin/Tweet.vue b/packages/vite-slides/client/builtin/Tweet.vue
@@ -1,30 +1,28 @@
 <script setup lang="ts">
-import { defineProps, onMounted } from 'vue'
+import { defineProps, onMounted, ref } from 'vue'
 import { isDark } from '../logic'
 
-defineProps<{
-  url?: string
+const props = defineProps<{
+  id: string | number
   scale?: string | number
 }>()
 
+const tweet = ref<HTMLElement | null>()
+
 onMounted(() => {
   // @ts-ignore
-  window?.twttr.widgets.load()
+  window?.twttr.widgets.createTweet(
+    props.id.toString(),
+    tweet.value,
+    {
+      theme: isDark.value ? 'dark' : 'light',
+    },
+  )
 })
 </script>
 
 <template>
-  <Transform :scale="scale || 0.7" class="tweet">
-    <blockquote class="twitter-tweet" :data-theme="isDark ? 'dark': 'light'">
-      <slot>
-        <a :href="url" />
-      </slot>
-    </blockquote>
+  <Transform :scale="scale || 0.7">
+    <div ref="tweet"></div>
   </Transform>
 </template>
-
-<style>
-.tweet blockquote {
-  opacity: 0;
-}
-</style>
diff --git a/packages/vite-slides/client/builtin/Youtube.vue b/packages/vite-slides/client/builtin/Youtube.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+defineProps<{
+  id: string
+  width?: number
+  height?: number
+}>()
+</script>
+
+<template>
+  <iframe
+    :width="width"
+    :height="height"
+    :src="`https://www.youtube.com/embed/${id}`"
+    title="YouTube"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen
+  ></iframe>
+</template>
diff --git a/packages/theme-default/layouts/center.vue → ...ges/vite-slides/client/layouts/center.vue b/packages/theme-default/layouts/center.vue → ...ges/vite-slides/client/layouts/center.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-master center">
+  <div class="layout-master center h-full grid place-content-center">
     <div class="my-auto">
       <slot />
     </div>

diff --git a/packages/vite-slides/client/layouts/end.vue b/packages/vite-slides/client/layouts/end.vue
@@ -4,7 +4,7 @@
   </main>
 </template>
 
-<style lang="postcss">
+<style scopde lang="postcss">
 .layout-master.end {
   @apply text-white text-opacity-85 text-xl tracking-widest bg-black h-full text-center grid place-content-center select-none;
 }

diff --git a/packages/vite-slides/client/layouts/full.vue b/packages/vite-slides/client/layouts/full.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="layout-master full w-full h-full">
+    <slot class="w-full h-full"/>
+  </div>
+</template>
diff --git a/packages/vite-slides/client/windi.config.ts b/packages/vite-slides/client/windi.config.ts
@@ -0,0 +1,23 @@
+import { resolve } from 'path'
+import { defineConfig } from 'windicss/helpers'
+
+export default defineConfig({
+  extract: {
+    include: [
+      resolve(__dirname, '**/*.{vue,ts}'),
+      'src/**/*.{vue,ts}',
+      'components/**/*.{vue,ts}',
+      'slides.md',
+    ],
+    exclude: [
+      '.git/**',
+    ],
+  },
+  safelist: [
+    '!opacity-0',
+  ],
+  darkMode: 'class',
+  preflight: {
+    includeAll: true,
+  },
+})
diff --git a/packages/vite-slides/node/index.ts b/packages/vite-slides/node/index.ts
@@ -2,3 +2,4 @@ export * from './server'
 export * from './parser'
 export * from './plugins/preset'
 export * from './plugins/options'
+export * from './plugins/windicss'
diff --git a/packages/vite-slides/node/plugins/preset.ts b/packages/vite-slides/node/plugins/preset.ts
@@ -1,12 +1,13 @@
 
+import { resolve } from 'path'
+import { existsSync } from 'fs'
 import { Plugin } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 import ViteComponents from 'vite-plugin-components'
 import Markdown from 'vite-plugin-md'
-import WindiCSS from 'vite-plugin-windicss'
+import WindiCSS, { loadConfiguration } from 'vite-plugin-windicss'
 import Prism from 'markdown-it-prism'
-import { getDefultWindiConfig } from './windicss'
 import { createConfigPlugin } from './config'
 import { createSlidesLoader } from './slides'
 import { createMonacoLoader, transformMarkdownMonaco } from './monaco'
@@ -85,8 +86,23 @@ export function ViteSlides(options: ViteSlidesPluginOptions = {}): Plugin[] {
     }),
 
     ...WindiCSS({
-      // TODO: merge with theme/user config
-      config: getDefultWindiConfig(slidesOptions),
+      async onConfigResolved(config, filepath) {
+        if (filepath)
+          return
+
+        // if the user does not provide windi.config
+        const themeConfig = resolve(themeRoot, 'windi.config.ts')
+        if (existsSync(themeConfig)) {
+          return (
+            await loadConfiguration({ config: themeConfig })
+          ).resolved
+        }
+        else {
+          return (
+            await loadConfiguration({ config: resolve(packageRoot, 'client/windi.config.ts') })
+          ).resolved
+        }
+      },
       ...windicssOptions,
     }),
 

diff --git a/packages/vite-slides/node/plugins/windicss.ts b/packages/vite-slides/node/plugins/windicss.ts
@@ -1,50 +1,19 @@
-import { resolve } from 'path'
-import { defineConfig } from 'windicss/helpers'
-import { ResolvedViteSlidesOptions } from './options'
+import { isObject } from '@antfu/utils'
+import { Config as WindiCssConfig } from 'windicss/types/interfaces'
 
-export function getDefultWindiConfig({ packageRoot, themeRoot }: ResolvedViteSlidesOptions) {
-  return defineConfig({
-    extract: {
-      include: [
-        resolve(packageRoot, 'client/**/*.{vue,ts}'),
-        resolve(themeRoot, '**/*.{vue,ts}'),
-        'src/**/*.{vue,ts}',
-        'components/**/*.{vue,ts}',
-        'slides.md',
-      ],
-      exclude: [
-        '.git/**',
-        resolve(themeRoot, 'node_modules/*'),
-      ],
-    },
-    safelist: [
-      '!opacity-0',
-    ],
-    darkMode: 'class',
-    preflight: {
-      includeAll: true,
-    },
-    shortcuts: {
-      'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
-      'disabled': 'opacity-25 pointer-events-none',
-      'abs-t': 'absolute bottom-0 left-0 right-0',
-      'abs-tl': 'absolute top-0 left-0',
-      'abs-tr': 'absolute top-0 right-0',
-      'abs-b': 'absolute bottom-0 left-0 right-0',
-      'abs-bl': 'absolute bottom-0 left-0',
-      'abs-br': 'absolute bottom-0 right-0',
-    },
-    theme: {
-      extend: {
-        fontFamily: {
-          sans: '"Avenir Next"',
-        },
-        colors: {
-          primary: {
-            DEFAULT: '#42b883',
-          },
-        },
-      },
-    },
+function deepMerge(a: any, b: any, rootPath: string) {
+  a = { ...a }
+  Object.keys(b).forEach((key) => {
+    if (isObject(a[key]))
+      a[key] = deepMerge(a[key], b[key], rootPath ? `${rootPath}.${key}` : key)
+    else if (Array.isArray(a[key]))
+      a[key] = [...a[key], ...b[key]]
+    else
+      a[key] = b[key]
   })
+  return a
+}
+
+export function mergeWindicssConfig(a: WindiCssConfig, b: WindiCssConfig) {
+  return deepMerge(a, b, '')
 }
diff --git a/packages/vite-slides/package.json b/packages/vite-slides/package.json
@@ -2,13 +2,16 @@
   "name": "vite-slides",
   "description": "Opinionated markdown slides maker, powered by Vite and Windi CSS",
   "version": "0.0.0-beta.7",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rimraf dist && tsup node/index.ts node/cli.ts --dts --format cjs,esm",
     "dev": "nr build --watch",
     "start": "esno node/cli.ts",
     "prepublishOnly": "npm run build"
   },
-  "license": "MIT",
   "funding": "https://github.com/sponsors/antfu",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "repository": {
@@ -28,7 +31,6 @@
   "dependencies": {
     "@antfu/utils": "^0.0.9",
     "@iconify/json": "^1.1.330",
-    "@vite-slides/theme-default": "workspace:*",
     "@vitejs/plugin-vue": "^1.2.1",
     "@vue/compiler-sfc": "^3.0.11",
     "@vueuse/core": "^4.8.1",