feat: improves

package.json

@@ -15,11 +15,12 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.6.2",
-    "@antfu/utils": "^0.0.3",
+    "@antfu/utils": "^0.0.5",
     "@iconify/json": "^1.1.328",
-    "@types/fs-extra": "^9.0.10",
+    "@types/fs-extra": "^9.0.11",
     "@types/node": "^14.14.37",
     "@types/nprogress": "^0.2.0",
+    "@types/prettier": "^2.2.3",
     "@typescript-eslint/eslint-plugin": "^4.21.0",
     "@vitejs/plugin-vue": "^1.2.1",
     "@vue/compiler-sfc": "^3.0.11",
@@ -29,6 +30,7 @@
     "markdown-it-prism": "^2.1.6",
     "monaco-editor": "^0.23.0",
     "pnpm": "^6.0.1",
+    "prettier": "^2.2.1",
     "theme-vitesse": "^0.1.8",
     "typescript": "^4.2.4",
     "vite": "^2.1.5",

plugins/slides.ts

@@ -1,7 +1,7 @@
 import { resolve } from 'path'
 import { Plugin } from 'vite'
 import fs from 'fs-extra'
-import { isNotNull } from '@antfu/utils'
+import { notNullish } from '@antfu/utils'
 import matter from 'gray-matter'
 
 const filepath = resolve(__dirname, '../slides.md')
@@ -54,15 +54,15 @@ export function createSlidesLoader(): Plugin {
         raw = await read()
         items = parse(raw)
 
-        const modules = [
+        const moduleEntries = [
           '/@vite-slides/routes',
-          ...items.map((i, idx) => `/@vite-slides/slides/${idx}.md`),
+          ...items.map((i, idx) => `/@vite-slides/slide/${idx}.md`),
         ]
           .map(id => ctx.server.moduleGraph.getModuleById(id))
-          .filter(isNotNull)
+          .filter(notNullish)
 
-        modules.map(m => ctx.server.moduleGraph.invalidateModule(m))
-        return modules
+        moduleEntries.map(m => ctx.server.moduleGraph.invalidateModule(m))
+        return moduleEntries
       }
     },
 

slides.md

@@ -13,12 +13,36 @@ Anthony Fu
 ---
 ---
 
+# Markdown
+
+## List
+
+- All slides in one file
+- HMR supported
+- Light / Dark mode toggle
+- Code snippets
+  - Prism syntax highlighting
+  - Built-in Moncoa Editor
+
+---
+---
+
+
+# Table
+
+| Tables        | Are           | Cool  |
+| ------------- |:-------------:| -----:|
+| col 3 is      | right-aligned | $1600 |
+| col 2 is      | centered      |   $12 |
+| zebra stripes | are neat      |    $1 |
+
+---
+---
+
 # Code Snippet Example
 
 It, just works
 
-<Transform scale='0.8'>
-
 ```html
 <script setup lang="ts">
 import { useFullscreen } from '@vueuse/core'
@@ -34,21 +58,21 @@ import { useFullscreen } from '@vueuse/core'
 </template>
 ```
 
-</Transform>
-
 ---
 ---
 
-# Twitter Example
+# Monaco Example
 
-<Tweet url="https://twitter.com/antfu7/status/1362676666221268995" />
+Live coding in your presentation! 😎
+
+<Monaco />
 
 ---
 ---
 
-# Monaco Example
+# Twitter Example
 
-<Monaco />
+<Tweet url="https://twitter.com/antfu7/status/1362676666221268995" />
 
 ---
 layout: end