@slidev/client 0.32.3 → 0.33.1

package/builtin/Mermaid.vue

@@ -59,5 +59,5 @@ watchEffect(() => {
 </script>
 
 <template>
-  <ShadowRoot class="mermaid" :inner-html="html" />
+  <ShadowRoot ref="el" class="mermaid" :inner-html="html" @shadow="el = $event" />
 </template>

package/builtin/Monaco.vue

@@ -74,11 +74,9 @@ onMounted(() => {
     'allow-top-navigation-by-user-activation',
   ].join(' '))
 
-  /* eslint-disable no-undef */
   frame.src = __DEV__
     ? `${location.origin}${__SLIDEV_CLIENT_ROOT__}/iframes/monaco/index.html`
     : `${import.meta.env.BASE_URL}iframes/monaco/index.html`
-  /* eslint-enable no-undef */
 
   frame.style.backgroundColor = 'transparent'
 

package/builtin/RenderWhen.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import type { RenderContext } from '@slidev/types'
+
+import { injectionSlideContext } from '../constants'
+
+type Context = 'main' | RenderContext
+
+const props = defineProps<{
+  context: Context | Context[]
+}>()
+const { context } = props
+
+const currentContext = inject(injectionSlideContext)
+
+const shouldRender = computed(() => Array.isArray(context) ? context.some(contextMatch) : contextMatch(context))
+
+function contextMatch(context: Context) {
+  if (context === currentContext)
+    return true
+  if (context === 'main' && (currentContext === 'slide' || currentContext === 'presenter'))
+    return true
+  return false
+}
+</script>
+
+<template>
+  <slot v-if="shouldRender" />
+</template>

package/constants.ts

@@ -1,5 +1,6 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
+import type { RenderContext } from '@slidev/types'
 import type { SlidevContext } from './modules/context'
 
 export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks')
@@ -9,6 +10,7 @@ export const injectionClicksDisabled: InjectionKey<Ref<boolean>> = Symbol('v-cli
 export const injectionSlideScale: InjectionKey<ComputedRef<number>> = Symbol('slidev-slide-scale')
 export const injectionSlidevContext: InjectionKey<SlidevContext> = Symbol('slidev-slidev-context')
 export const injectionRoute: InjectionKey<RouteRecordRaw> = Symbol('slidev-route')
+export const injectionSlideContext: InjectionKey<RenderContext> = Symbol('slidev-slide-context')
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

package/internals/NavControls.vue

@@ -47,7 +47,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 <template>
   <nav ref="root" class="flex flex-col">
     <div
-      class="flex flex-wrap-reverse text-xl p-2 gap-1"
+      class="flex flex-wrap-reverse text-xl gap-0.5 p-1 lg:(gap-1 p-2)"
       :class="barStyle"
       @mouseleave="onMouseLeave"
     >

package/internals/NoteEditor.vue

@@ -3,6 +3,7 @@ import { ignorableWatch, onClickOutside } from '@vueuse/core'
 import { nextTick, ref, watch } from 'vue'
 import { currentSlideId } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
+import NoteViewer from './NoteViewer.vue'
 
 const props = defineProps({
   class: {
@@ -59,22 +60,13 @@ onClickOutside(input, () => {
 </script>
 
 <template>
-  <template v-if="!editing && note">
-    <div
-      v-if="info?.notesHTML"
-      class="prose overflow-auto outline-none"
-      :class="props.class"
-      @click="switchNoteEdit"
-      v-html="info?.notesHTML"
-    />
-    <div
-      v-else
-      class="prose overflow-auto outline-none"
-      :class="props.class"
-      @click="switchNoteEdit"
-      v-text="note"
-    />
-  </template>
+  <NoteViewer
+    v-if="!editing && note"
+    :class="props.class"
+    :note="note"
+    :note-html="info?.notesHTML"
+    @click="switchNoteEdit"
+  />
   <textarea
     v-else
     ref="input"

package/internals/NoteStatic.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { currentRoute } from '../logic/nav'
+import NoteViewer from './NoteViewer.vue'
+
+const props = defineProps<{
+  class?: string
+}>()
+
+const note = computed(() => currentRoute.value?.meta?.slide?.note)
+const noteHtml = computed(() => currentRoute.value?.meta?.slide?.notesHTML)
+</script>
+
+<template>
+  <NoteViewer
+    :class="props.class"
+    :note="note"
+    :note-html="noteHtml"
+  />
+</template>

package/internals/NoteViewer.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const props = defineProps<{
+  class?: string
+  noteHtml?: string
+  note?: string
+}>()
+
+defineEmits(['click'])
+</script>
+
+<template>
+  <div
+    v-if="noteHtml"
+    class="prose overflow-auto outline-none"
+    :class="props.class"
+    @click="$emit('click')"
+    v-html="noteHtml"
+  />
+  <div
+    v-else
+    class="prose overflow-auto outline-none"
+    :class="props.class"
+    @click="$emit('click')"
+    v-text="note"
+  />
+</template>

package/internals/Play.vue

@@ -48,8 +48,8 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       :scale="slideScale"
       @pointerdown="onClick"
     >
-      <template #>
-        <SlidesShow />
+      <template #default>
+        <SlidesShow context="slide" />
       </template>
       <template #controls>
         <div

package/internals/Presenter.vue

@@ -14,6 +14,7 @@ import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
 import SlidesOverview from './SlidesOverview.vue'
 import NoteEditor from './NoteEditor.vue'
+import NoteStatic from './NoteStatic.vue'
 import Goto from './Goto.vue'
 import SlidesShow from './SlidesShow.vue'
 import SlideWrapper from './SlideWrapper'
@@ -52,7 +53,7 @@ const nextSlide = computed(() => {
   }
 })
 
-// sync presenter cusor
+// sync presenter cursor
 onMounted(() => {
   const slidesContainer = main.value!.querySelector('#slide-content')!
   const mouse = reactive(useMouse())
@@ -83,7 +84,7 @@ onMounted(() => {
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container">
       <div class="grid-section top flex">
-        <img src="../assets/logo-title-horizontal.png" class="h-14 ml-2 py-2 my-auto">
+        <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:(h-14 py-2)">
         <div class="flex-auto" />
         <div
           class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
@@ -97,17 +98,20 @@ onMounted(() => {
           {{ timer }}
         </div>
       </div>
-      <div ref="main" class="grid-section main flex flex-col p-4" :style="themeVars">
+      <div ref="main" class="relative grid-section main flex flex-col p-2 lg:(p-4)" :style="themeVars">
         <SlideContainer
           key="main"
           class="h-full w-full"
         >
-          <template #>
-            <SlidesShow />
+          <template #default>
+            <SlidesShow context="presenter" />
           </template>
         </SlideContainer>
+        <div class="context">
+          current
+        </div>
       </div>
-      <div class="grid-section next flex flex-col p-4">
+      <div class="relative grid-section next flex flex-col p-2 lg:(p-4)">
         <SlideContainer
           v-if="nextSlide"
           key="next"
@@ -120,11 +124,16 @@ onMounted(() => {
             :clicks-disabled="false"
             :class="getSlideClass(nextSlide.route)"
             :route="nextSlide.route"
+            context="previewNext"
           />
         </SlideContainer>
+        <div class="context">
+          next
+        </div>
       </div>
       <div class="grid-section note overflow-auto">
-        <NoteEditor class="w-full h-full p-4 overflow-auto" />
+        <NoteEditor v-if="__DEV__" class="w-full h-full overflow-auto p-2 lg:(p-4)" />
+        <NoteStatic v-else class="w-full h-full overflow-auto p-2 lg:(p-4)" />
       </div>
       <div class="grid-section bottom">
         <NavControls :persist="true" />
@@ -173,7 +182,20 @@ onMounted(() => {
     "bottom bottom";
 }
 
-@screen md {
+@media (max-aspect-ratio: 3/5) {
+  .grid-container {
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content 1fr 1fr 1fr min-content;
+    grid-template-areas:
+      "top"
+      "main"
+      "note"
+      "next"
+      "bottom";
+  }
+}
+
+@media (min-aspect-ratio: 1/1) {
   .grid-container {
     grid-template-columns: 1fr 1.1fr 0.9fr;
     grid-template-rows: min-content 1fr 2fr min-content;
@@ -208,4 +230,8 @@ onMounted(() => {
     grid-area: bottom;
   }
 }
+
+.context {
+  @apply absolute top-0 left-0 px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
+}
 </style>

package/internals/ShadowRoot.vue

@@ -5,11 +5,17 @@ const props = defineProps<{
   innerHtml: string
 }>()
 
+const emit = defineEmits<{
+  (event: 'shadow', div: ShadowRoot): void
+}>()
+
 const el = ref<HTMLDivElement>()
 const shadow = computed(() => el.value ? (el.value.shadowRoot || el.value.attachShadow({ mode: 'open' })) : null)
 watchEffect(() => {
-  if (shadow.value)
+  if (shadow.value) {
+    emit('shadow', shadow.value)
     shadow.value.innerHTML = props.innerHtml
+  }
 })
 </script>
 

package/internals/SlideWrapper.ts

@@ -1,6 +1,6 @@
 import { useVModel } from '@vueuse/core'
 import { defineComponent, h, provide } from 'vue'
-import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap, injectionRoute } from '../constants'
+import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap, injectionRoute, injectionSlideContext } from '../constants'
 
 export default defineComponent({
   props: {
@@ -20,6 +20,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    context: {
+      type: String,
+      default: 'main',
+    },
     is: {
       type: Object,
       default: undefined,
@@ -38,6 +42,7 @@ export default defineComponent({
     clicksElements.value.length = 0
 
     provide(injectionRoute, props.route)
+    provide(injectionSlideContext, props.context)
     provide(injectionClicks, clicks)
     provide(injectionClicksDisabled, clicksDisabled)
     provide(injectionClicksElements, clicksElements)

package/internals/SlidesOverview.vue

@@ -85,6 +85,7 @@ watchEffect(() => {
               :clicks-disabled="true"
               :class="getSlideClass(route)"
               :route="route"
+              context="overview"
             />
             <DrawingPreview :page="+route.path" />
           </SlideContainer>

package/internals/SlidesShow.vue

@@ -9,6 +9,8 @@ import GlobalTop from '/@slidev/global-components/top'
 import GlobalBottom from '/@slidev/global-components/bottom'
 import PresenterMouse from './PresenterMouse.vue'
 
+defineProps<{ context: 'slide' | 'presenter' }>()
+
 // preload next route
 watch(currentRoute, () => {
   if (currentRoute.value?.meta && currentRoute.value.meta.preload !== false)
@@ -37,6 +39,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
       :clicks-disabled="false"
       :class="getSlideClass(route)"
       :route="route"
+      :context="context"
     />
   </template>
 

package/internals/VerticalDivider.vue

@@ -1,3 +1,3 @@
 <template>
-  <div class="w-1px m-2 opacity-10 bg-current" />
+  <div class="w-1px opacity-10 bg-current m-1 lg:(m-2)" />
 </template>

package/package.json

@@ -1,43 +1,43 @@
 {
   "name": "@slidev/client",
-  "version": "0.32.3",
+  "version": "0.33.1",
   "description": "Presentation slides for developers",
-  "homepage": "https://sli.dev",
-  "bugs": "https://github.com/slidevjs/slidev/issues",
-  "license": "MIT",
   "author": "antfu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/antfu",
+  "homepage": "https://sli.dev",
   "repository": {
     "type": "git",
     "url": "https://github.com/slidevjs/slidev"
   },
-  "funding": "https://github.com/sponsors/antfu",
+  "bugs": "https://github.com/slidevjs/slidev/issues",
+  "engines": {
+    "node": ">=14.0.0"
+  },
   "dependencies": {
     "@antfu/utils": "^0.5.2",
-    "@slidev/parser": "0.32.3",
-    "@slidev/types": "0.32.3",
-    "@vueuse/core": "^8.5.0",
+    "@slidev/parser": "0.33.1",
+    "@slidev/types": "0.33.1",
+    "@vueuse/core": "^8.7.4",
     "@vueuse/head": "^0.7.6",
     "@vueuse/motion": "^2.0.0-beta.18",
-    "codemirror": "^5.65.4",
+    "codemirror": "^5.65.5",
     "defu": "^6.0.0",
     "drauu": "^0.3.0",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
     "js-yaml": "^4.1.0",
-    "katex": "^0.15.6",
-    "mermaid": "^9.1.1",
+    "katex": "^0.16.0",
+    "mermaid": "^9.1.2",
     "monaco-editor": "^0.33.0",
-    "nanoid": "^3.3.4",
-    "prettier": "^2.6.2",
+    "nanoid": "^4.0.0",
+    "prettier": "^2.7.1",
     "recordrtc": "^5.6.2",
-    "resolve": "^1.22.0",
+    "resolve": "^1.22.1",
     "vite-plugin-windicss": "^1.8.4",
-    "vue": "^3.2.35",
-    "vue-router": "^4.0.15",
-    "vue-starport": "^0.2.10",
+    "vue": "^3.2.36",
+    "vue-router": "^4.0.16",
+    "vue-starport": "^0.3.0",
     "windicss": "^3.5.4"
-  },
-  "engines": {
-    "node": ">=14.0.0"
   }
 }

package/routes.ts

@@ -59,6 +59,7 @@ declare module 'vue-router' {
       start: number
       end: number
       note?: string
+      notesHTML?: string
       id: number
       no: number
       filepath: string

package/setup/shortcuts.ts

@@ -1,7 +1,7 @@
 /* __imports__ */
 
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
-import { downloadPDF, next, nextSlide, prev, prevSlide } from '../logic/nav'
+import { downloadPDF, go, next, nextSlide, prev, prevSlide } from '../logic/nav'
 import { toggleDark } from '../logic/dark'
 import { showGotoDialog, showOverview, toggleOverview } from '../state'
 import { drawingEnabled } from '../logic/drawings'
@@ -14,6 +14,7 @@ export default function setupShortcuts() {
     prev,
     nextSlide,
     prevSlide,
+    go,
     downloadPDF,
     toggleDark,
     toggleOverview,

package/shim.d.ts

@@ -1,10 +1,8 @@
-/* eslint-disable import/no-duplicates */
-
 declare interface Window {
   // extend the window
 }
 
-// with vite-plugin-md, markdowns can be treat as Vue components
+// with vite-plugin-vue-markdown, markdowns can be treat as Vue components
 declare module '*.md' {
   import type { ComponentOptions } from 'vue'
   const component: ComponentOptions

package/styles/index.css

@@ -16,10 +16,16 @@ html {
 
 .icon-btn {
   @apply inline-block cursor-pointer select-none !outline-none;
-  @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-2;
+  @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
 }
 
+@screen md {
+  .icon-btn {
+    @apply p-2;
+  }
+}
+
 .icon-btn.shallow {
   @apply opacity-30
 }