fix: display notes for static builds (no edition) (#620)

packages/client/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"

packages/client/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>

packages/client/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>

packages/client/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'
@@ -125,7 +126,8 @@ onMounted(() => {
         </SlideContainer>
       </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 p-4 overflow-auto" />
+        <NoteStatic v-else class="w-full h-full p-4 overflow-auto" />
       </div>
       <div class="grid-section bottom">
         <NavControls :persist="true" />

packages/client/routes.ts

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

packages/slidev/node/plugins/loaders.ts

@@ -517,14 +517,10 @@ defineProps<{ no: number | string }>()`)
           imports.push(`import n${no} from '${slidePrefix}${idx + 1}.md'`)
           const additions: Partial<RouteMeta> = {
             slide: {
-              start: i.start,
-              end: i.end,
-              note: i.note,
+              ...prepareSlideInfo(i),
               filepath: i.source?.filepath || entry,
               id: idx,
               no,
-              title: i.title,
-              level: i.level,
             },
             __clicksElements: [],
             __preloaded: false,