feat: new theme

demo/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@slidev/cli": "workspace:*",
-    "@slidev/theme-default": "workspace:*"
+    "@slidev/theme-default": "workspace:*",
+    "@slidev/theme-seriph": "workspace:*"
   }
 }

demo/slides.md

@@ -1,5 +1,6 @@
 ---
 layout: cover
+theme: '@slidev/theme-default'
 ---
 
 # Composable Vue
@@ -12,15 +13,15 @@ Anthony Fu
 
 <div class="abs-bl mx-14 my-12 flex">
   <img src="https://2020.vueday.it/img/themes/vueday/vueday-logo.png" class="h-8">
-  <div class="ml-3 flex flex-col">
+  <div class="ml-3 flex flex-col text-left">
     <div><b>Vue</b>Day</div>
     <div class="text-sm opacity-50">Apr. 29th, 2021</div>
   </div>
 </div>
 
 
 ---
-layout: cover
+layout: intro
 ---
 
 # Anthony Fu

package.json

@@ -26,7 +26,7 @@
     "eslint-plugin-jest": "^24.3.5",
     "esno": "^0.5.0",
     "jest": "^26.6.3",
-    "pnpm": "^6.2.0",
+    "pnpm": "^6.2.1",
     "ts-jest": "^26.5.5",
     "typescript": "^4.2.4",
     "vite-plugin-pwa": "^0.7.2",

packages/client/builtin/Monaco.vue

@@ -10,7 +10,6 @@ import type * as monaco from 'monaco-editor'
 import { formatCode } from '../setup/prettier'
 import setupMonaco from '../setup/monaco'
 import { isDark } from '../logic/dark'
-import { paused } from '../logic/nav'
 
 const props = defineProps({
   code: {
@@ -127,16 +126,19 @@ setupMonaco()
 
 onUnmounted(() => editor?.dispose())
 </script>
+
 <style lang="postcss">
 .vue-monaco {
   background: var(--prism-background);
   padding: var(--prism-block-padding-y) var(--prism-block-padding-x);
   margin: var(--prism-block-margin-y) var(--prism-block-margin-x);
-  @apply rounded p-2;
+  border-radius: var(--prism-block-radius);
+  @apply p-2;
 }
 
 .monaco-editor .monaco-hover {
-  @apply rounded overflow-hidden shadow border-none outline-none;
+  border-radius: var(--prism-block-radius);
+  @apply overflow-hidden shadow border-none outline-none;
 }
 
 .monaco-editor .lines-content,

packages/client/windi.config.ts

@@ -16,6 +16,14 @@ export default defineConfig({
   safelist: [
     '!opacity-0',
   ],
+  shortcuts: {
+    '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',
+  },
   darkMode: 'class',
   preflight: {
     includeAll: true,

packages/slidev/node/build.ts

@@ -5,15 +5,16 @@ import { getIndexHtml } from './common'
 import { resolveOptions } from './plugins/options'
 
 export async function build(entry: string, config: InlineConfig = {}) {
-  await fs.writeFile('index.html', await getIndexHtml(resolveOptions(entry)), 'utf-8')
+  const options = await resolveOptions(entry)
+  await fs.writeFile('index.html', await getIndexHtml(options), 'utf-8')
   try {
     await viteBuild(
       mergeConfig(
         config,
         {
           plugins: [
-            ViteSlidevPlugin({
-              entry,
+            await ViteSlidevPlugin({
+              resolved: options,
             }),
           ],
         },

packages/slidev/node/plugins/loaders.ts

@@ -1,6 +1,6 @@
 import { basename } from 'path'
 import { ModuleNode, Update, ViteDevServer, Plugin } from 'vite'
-import { notNullish, objectMap } from '@antfu/utils'
+import { isTruthy, notNullish, objectMap } from '@antfu/utils'
 import type { Connect } from 'vite'
 import fg from 'fast-glob'
 import * as parser from '../parser'
@@ -41,18 +41,13 @@ export function sendHmrReload(server: ViteDevServer, modules: ModuleNode[]) {
   })
 }
 
-export function createSlidesLoader({ entry, clientRoot, themeRoot, userRoot }: ResolvedSlidevOptions): Plugin[] {
-  let data: parser.SlidesMarkdown
+export function createSlidesLoader({ data, entry, clientRoot, themeRoot, userRoot }: ResolvedSlidevOptions): Plugin[] {
   let skipNext = false
 
   return [
     {
       name: 'slidev:loader',
 
-      async configResolved() {
-        data = await parser.load(entry)
-      },
-
       configureServer(server) {
         server.watcher.add(entry)
 
@@ -97,17 +92,24 @@ export function createSlidesLoader({ entry, clientRoot, themeRoot, userRoot }: R
             skipNext = false
             return
           }
-          data = await parser.load(entry)
+          const newData = await parser.load(entry)
+
+          if (data.config.theme !== newData.config.theme)
+            console.log('Theme changed')
+            // TODO: restart the server
 
           const moduleEntries = [
-            '/@slidev/routes',
-            '/@slidev/configs',
+            data.slides.length !== newData.slides.length && '/@slidev/routes',
+            JSON.stringify(data.config) !== JSON.stringify(newData.config) && '/@slidev/configs',
             ...data.slides.map((i, idx) => `${entry}?id=${idx}.md`),
             ...data.slides.map((i, idx) => `${entry}?id=${idx}.json`),
           ]
-            .map(id => ctx.server.moduleGraph.getModuleById(id))
+            .filter(isTruthy)
+            .map(id => ctx.server.moduleGraph.getModuleById(id as string))
             .filter(notNullish)
 
+          data = newData
+
           moduleEntries.map(m => ctx.server.moduleGraph.invalidateModule(m))
           return moduleEntries
         }

packages/slidev/node/plugins/options.ts

@@ -6,6 +6,7 @@ import Markdown from 'vite-plugin-md'
 import WindiCSS from 'vite-plugin-windicss'
 import RemoteAssets from 'vite-plugin-remote-assets'
 import { ArgumentsType } from '@antfu/utils'
+import * as parser from '../parser'
 
 export interface SlidevOptions {
   /**
@@ -22,16 +23,8 @@ export interface SlidevOptions {
   theme?: string
 }
 
-export interface SlidevPluginOptions extends SlidevOptions {
-  vue?: ArgumentsType<typeof Vue>[0]
-  markdown?: ArgumentsType<typeof Markdown>[0]
-  components?: ArgumentsType<typeof ViteComponents>[0]
-  windicss?: ArgumentsType<typeof WindiCSS>[0]
-  icons?: ArgumentsType<typeof ViteIcons>[0]
-  remoteAssets?: ArgumentsType<typeof RemoteAssets>[0]
-}
-
 export interface ResolvedSlidevOptions {
+  data: parser.SlidesMarkdown
   entry: string
   userRoot: string
   cliRoot: string
@@ -40,6 +33,16 @@ export interface ResolvedSlidevOptions {
   themeRoot: string
 }
 
+export interface SlidevPluginOptions extends SlidevOptions {
+  vue?: ArgumentsType<typeof Vue>[0]
+  markdown?: ArgumentsType<typeof Markdown>[0]
+  components?: ArgumentsType<typeof ViteComponents>[0]
+  windicss?: ArgumentsType<typeof WindiCSS>[0]
+  icons?: ArgumentsType<typeof ViteIcons>[0]
+  remoteAssets?: ArgumentsType<typeof RemoteAssets>[0]
+  resolved?: ResolvedSlidevOptions
+}
+
 export function getClientRoot() {
   return dirname(require.resolve('@slidev/client/package.json'))
 }
@@ -52,9 +55,12 @@ export function getThemeRoot(name: string) {
   return dirname(require.resolve(`${name}/package.json`))
 }
 
-export function resolveOptions(entry = 'slides.md', userRoot = process.cwd()): ResolvedSlidevOptions {
-  const theme = '@slidev/theme-default'
+export async function resolveOptions(entry = 'slides.md', userRoot = process.cwd()): Promise<ResolvedSlidevOptions> {
+  const data = await parser.load(entry)
+  const theme = data.config.theme
+
   return {
+    data,
     entry: resolve(userRoot, entry),
     theme,
     userRoot,

packages/slidev/node/plugins/preset.ts

@@ -7,7 +7,7 @@ import ViteComponents from 'vite-plugin-components'
 import Markdown from 'vite-plugin-md'
 import WindiCSS, { defaultConfigureFiles } from 'vite-plugin-windicss'
 import Prism from 'markdown-it-prism'
-import RemoteAssets from 'vite-plugin-remote-assets'
+import RemoteAssets, { DefaultRules } from 'vite-plugin-remote-assets'
 import { createConfigPlugin } from './config'
 import { createSlidesLoader } from './loaders'
 import { createMonacoLoader, transformMarkdownMonaco } from './monaco'
@@ -17,18 +17,21 @@ import { createSetupPlugin } from './setups'
 import VitePluginVueFactory, { VueFactoryResolver } from './factory'
 import VitePluginServerRef from './server-ref'
 
-export function ViteSlidevPlugin(options: SlidevPluginOptions = {}): Plugin[] {
+export async function ViteSlidevPlugin(pluginOptions: SlidevPluginOptions = {}): Promise<Plugin[]> {
   const {
     vue: vueOptions = {},
     markdown: mdOptions = {},
     components: componentsOptions = {},
     icons: iconsOptions = {},
     remoteAssets: remoteAssetsOptions = {},
     windicss: windiOptions = {},
-  } = options
+  } = pluginOptions
 
-  const slidesOptions = resolveOptions()
-  const { themeRoot, clientRoot } = slidesOptions
+  const options = pluginOptions.resolved || await resolveOptions(pluginOptions.entry)
+  const {
+    themeRoot,
+    clientRoot,
+  } = options
 
   return [
     Vue({
@@ -107,6 +110,14 @@ export function ViteSlidevPlugin(options: SlidevPluginOptions = {}): Plugin[] {
     ),
 
     RemoteAssets({
+      rules: [
+        ...DefaultRules,
+        {
+          match: /\b(https?:\/\/\w+\.unsplash\.com.*?)(?=[`'")\]])/ig,
+          ext: '.png',
+        },
+      ],
+      resolveMode: '@fs',
       ...remoteAssetsOptions,
     }),
 
@@ -120,10 +131,10 @@ export function ViteSlidevPlugin(options: SlidevPluginOptions = {}): Plugin[] {
         },
       },
     }),
-    createConfigPlugin(slidesOptions),
-    createEntryPlugin(slidesOptions),
-    createSlidesLoader(slidesOptions),
-    createSetupPlugin(slidesOptions),
+    createConfigPlugin(options),
+    createEntryPlugin(options),
+    createSlidesLoader(options),
+    createSetupPlugin(options),
     createMonacoLoader(),
   ].flat()
 }

packages/slidev/node/server.ts

@@ -1,17 +1,23 @@
 import { createServer as createViteServer, InlineConfig, mergeConfig } from 'vite'
+import { resolveOptions } from './plugins/options'
 import { ViteSlidevPlugin } from './plugins/preset'
 
 export async function createServer(entry?: string, config: InlineConfig = {}) {
-  return await createViteServer(
+  const options = await resolveOptions(entry)
+  const server = await createViteServer(
     mergeConfig(
       config,
       {
         plugins: [
-          ViteSlidevPlugin({
-            entry,
+          await ViteSlidevPlugin({
+            resolved: options,
           }),
         ],
       },
     ),
   )
+
+  console.log('theme: ', options.theme)
+
+  return server
 }

packages/slidev/package.json

@@ -62,7 +62,7 @@
     "vite-plugin-components": "^0.8.4",
     "vite-plugin-icons": "^0.5.0",
     "vite-plugin-md": "^0.6.3",
-    "vite-plugin-remote-assets": "^0.1.2",
+    "vite-plugin-remote-assets": "^0.1.3",
     "vite-plugin-windicss": "^0.15.7",
     "vue": "^3.0.11",
     "windicss": "^2.5.14"
@@ -83,7 +83,7 @@
     "eslint": "^7.25.0",
     "esno": "^0.5.0",
     "playwright": "^1.10.0",
-    "pnpm": "^6.2.0",
+    "pnpm": "^6.2.1",
     "rimraf": "^3.0.2",
     "tsup": "^4.9.1",
     "typescript": "^4.2.4"

packages/theme-default/layouts/intro.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="layout-master intro">
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>

packages/theme-default/package.json

@@ -2,11 +2,18 @@
   "name": "@slidev/theme-default",
   "version": "0.0.0-alpha.13",
   "description": "Default theme for Slidev",
+  "keywords": [
+    "slidev-theme",
+    "slidev"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/slidevjs/slidev"
   },
+  "slidev": {
+    "color": "duo"
+  },
   "funding": "https://github.com/sponsors/antfu",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "homepage": "https://github.com/slidevjs/slidev",

packages/theme-default/styles/layout.css

@@ -78,7 +78,8 @@
   }
 }
 
-.layout-master.cover {
+.layout-master.cover,
+.layout-master.intro {
   @apply h-full flex;
 
   h1 {

packages/theme-default/windi.config.ts

@@ -15,12 +15,6 @@ export default mergeWindicssConfig(
     },
     shortcuts: {
       'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
-      '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: {

packages/theme-seriph/index.html

@@ -0,0 +1,4 @@
+<head>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=PT+Mono&family=PT+Serif:wght@400;700&display=swap" rel="stylesheet">
+</head>