feat: slides overview

README.md

@@ -39,7 +39,7 @@ npx vite-slides export talk.pdf
 - [ ] Shiki + TwoSlash
 - [ ] Export PDF
 - [x] Monaco as markdown
-- [ ] Slides Overview
+- [x] Slides Overview
 - [ ] Foot notes
 - [x] `v-click` directive
 - [ ] Standalone package

package.json

@@ -20,7 +20,7 @@
     "@antfu/utils": "^0.0.8",
     "@iconify/json": "^1.1.329",
     "@types/fs-extra": "^9.0.11",
-    "@types/node": "^14.14.40",
+    "@types/node": "^14.14.41",
     "@types/prettier": "^2.2.3",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@vitejs/plugin-vue": "^1.2.1",
@@ -31,7 +31,7 @@
     "js-base64": "^3.6.0",
     "markdown-it-prism": "^2.1.6",
     "monaco-editor": "^0.23.0",
-    "pnpm": "^6.0.2",
+    "pnpm": "^6.1.0",
     "prettier": "^2.2.1",
     "theme-vitesse": "^0.1.9",
     "typescript": "^4.2.4",

slides.md

@@ -490,7 +490,7 @@ mouse.x === x.value // true
 
 The `watch` and `computed` will stop themselves on components unmounted. <br>We'd recommend following the same pattern for your custom composable functions.
 
-<div>
+<div v-click>
 
 ```ts{monaco}
 import { onUnmounted } from 'vue'
@@ -508,7 +508,7 @@ export function useEventListener(target: EventTarget, name: string, fn: any) {
 
 </div>
 
-<div class="abs-b mx-14 my-12">
+<div v-click class="abs-b mx-14 my-12">
 <VueUse name="useEventListener"/>
 </div>
 
@@ -539,12 +539,6 @@ const scope = effectScope(() => {
 stop(scope)
 ```
 
----
-layout: center
----
-
-# Tips
-
 ------
 
 # Template Ref <MarkerTips />
@@ -594,6 +588,7 @@ watch(element, (el) => {
 ------
 
 # Typed Provide / Inject <MarkerCore/>
+
 Use the `InjectionKey<T>` helper from Vue to share types across context.
 
 <div>
@@ -615,6 +610,7 @@ export const injectKeyUser: InjectionKey<UserInfo> = Symbol()
 ------
 
 # Typed Provide / Inject <MarkerCore/>
+
 Import the key from the same module for `provide` and `inject`.
 
 <div class="grid grid-cols-2 gap-4">
@@ -667,39 +663,100 @@ export const injectKeyUser: InjectionKey<UserInfo> = Symbol()
 
 ------
 
-# App Level Singleton
+# Shared State <MarkerPattern />
+
+By the nature of Composition API, states can be created and used independently.
 
 <div class="grid grid-cols-2 gap-4">
 
+<v-click>
+
+```ts
+// shared.ts
+import { reactive } from 'vue'
+
+export const state = reactive({
+  foo: 1,
+  bar: 'Hello'
+})
+```
+
+</v-click>
+
+<div>
+<v-clicks>
+
+```ts
+// A.vue
+import { state } from './shared.ts'
+
+state.foo += 1
+```
+
 ```ts
-export const keyMyTool: InjectionKey<MyTool> = Symbol()
+// B.vue
+import { state } from './shared.ts'
+
+console.log(state.foo) // 2
+```
+
+</v-clicks>
+</div>
+</div>
+
+<h3 v-click class="opacity-100">⚠️ But it's not SSR compatible!</h3>
+
+------
+
+# Shared State (SSR friendly) <MarkerPattern />
+
+<div class="grid grid-cols-[max-content,1fr] gap-4">
+
+<v-click>
 
-export function createMyTool() {
+```ts
+export const myStateKey: InjectionKey<MyState> = Symbol()
+
+export function createMyState() {
   const state = {
     /* ... */
   }
 
   return {
     install(app: App) {
-      app.provide(keyMyTool, state)
+      app.provide(myStateKey, state)
     }
   }
 }
 
-export function useMyTool(): MyTool {
-  return inject(keyMyTool)!
+export function useMyState(): MyState {
+  return inject(myStateKey)!
 }
 ```
 
+</v-click>
+
+<div>
+<v-clicks>
+
 ```ts
+// main.ts
 const App = createApp(App)
 
-app.use(createMyTool())
+app.use(createMyState())
 ```
 
+```ts
+// A.vue
+
+// use everywhere in your app
+const state = useMyState()
+```
+
+</v-clicks>
 </div>
 
-> TODO:
+</div>
 
 ------
 

src/builtin/MonacoEnv.ts

@@ -32,7 +32,7 @@ self.MonacoEnvironment = {
   },
 }
 
-console.log(monaco.languages.typescript.typescriptDefaults.getCompilerOptions())
+// console.log(monaco.languages.typescript.typescriptDefaults.getCompilerOptions())
 
 monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
   ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),

src/builtin/SlideControls.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
 import { useFullscreen } from '@vueuse/core'
+import { ref } from 'vue'
 import { isDark, toggleDark, useNavigateControls } from '~/logic'
 
 const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(document.body)
 const { hasNext, hasPrev, prev, next } = useNavigateControls()
+
+const showOverview = ref(false)
 </script>
 
 <template>
+  <SlidesOverview v-model="showOverview" />
   <nav class="opacity-0 pb-4 pt-5 pl-6 pr-4 transition right-0 bottom-0 rounded-tl text-xl flex gap-4 text-gray-400 bg-transparent duration-300 fixed hover:(shadow bg-main opacity-100)">
+    <button class="icon-btn" @click="showOverview = !showOverview">
+      <carbon:apps />
+    </button>
+
     <button class="icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
       <carbon:arrow-left />
     </button>

src/builtin/SlidesOverview.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { computed, defineEmit, defineProps } from 'vue'
+import { useNavigateControls } from '~/logic/controls'
+import { targetWidth, targetHeight } from '~/logic/scale'
+
+const emit = defineEmit()
+const props = defineProps<{ modelValue: boolean }>()
+
+const value = useVModel(props, 'modelValue', emit)
+
+const { routes } = useNavigateControls()
+
+const scale = 0.25
+const innerStyle = computed(() => ({
+  height: `${targetHeight}px`,
+  width: `${targetWidth}px`,
+  transformOrigin: 'top left',
+  transform: `scale(${scale})`,
+}))
+const style = computed(() => ({
+  height: `${targetHeight * scale}px`,
+  width: `${targetWidth * scale}px`,
+}))
+</script>
+
+<template>
+  <div
+    v-if="value"
+    class="bg-main !bg-opacity-75 p-20 fixed left-0 right-0 top-0 bottom-0 overflow-y-auto"
+    style="backdrop-filter: blur(5px);"
+  >
+    <div
+      class="grid gap-y-4 gap-x-8 w-full"
+      style="grid-template-columns: repeat(auto-fit,minmax(220px,1fr));"
+    >
+      <div
+        v-for="(route, idx) of routes.slice(0, -1)"
+        :key="route.path"
+        :style="style"
+        class="relative"
+      >
+        <RouterLink
+          :to="route.path"
+          :style="style"
+          class="block border border-gray-400 rounded border-opacity-50 overflow-hidden bg-main hover:(border-primary)"
+          @click="value = false"
+        >
+          <div :style="innerStyle" class="pointer-events-none">
+            <KeepAlive>
+              <component :is="route.component" v-click-disabled />
+            </KeepAlive>
+          </div>
+        </RouterLink>
+        <div class="absolute top-0 left-225px opacity-50">
+          {{ idx }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/layouts/default.vue

@@ -25,7 +25,11 @@
   }
 
   h3 {
-    @apply text-sm pt-2 opacity-40 uppercase tracking-widest font-500 -ml-[0.05em];
+    @apply text-sm pt-2 uppercase tracking-widest font-500 -ml-[0.05em];
+  }
+
+  h3:not(.opacity-100) {
+    @apply opacity-40;
   }
 
   p {

src/logic/controls.ts

@@ -1,13 +1,14 @@
 import { computed, App, InjectionKey, inject, ref, ComputedRef, Ref } from 'vue'
 import { Fn, useMagicKeys, whenever } from '@vueuse/core'
-import { Router } from 'vue-router'
+import { Router, RouteRecordRaw } from 'vue-router'
 import { clickCurrent, clickElements } from '~/modules/directives'
 
 export interface NavigateControls {
   next: Fn
   prev: Fn
   nextSlide: Fn
   prevSlide: Fn
+  routes: RouteRecordRaw[]
   paused: Ref<boolean>
   hasNext: ComputedRef<boolean>
   hasPrev: ComputedRef<boolean>
@@ -73,6 +74,7 @@ export function createNavigateControls(router: Router) {
     paused,
     hasNext,
     hasPrev,
+    routes,
     install(app: App) {
       app.provide(NavigateControlsInjection, navigateControls)
     },