@slidev/client 0.48.0-beta.20 → 0.48.0-beta.21

package/logic/nav.ts

@@ -1,44 +1,20 @@
-import type { Ref, TransitionGroupProps } from 'vue'
-import type { RouteRecordRaw } from 'vue-router'
-import { computed, nextTick, ref, watch } from 'vue'
-import type { TocItem } from '@slidev/types'
-import { timestamp, usePointerSwipe } from '@vueuse/core'
-import { rawRoutes, router } from '../routes'
-import { configs } from '../env'
-import { skipTransition } from '../composables/hmr'
+import { computed, watch } from 'vue'
+import { router } from '../routes'
 import { usePrimaryClicks } from '../composables/useClicks'
 import { CLICKS_MAX } from '../constants'
+import { useNavBase } from '../composables/useNav'
 import { useRouteQuery } from './route'
-import { isDrawing } from './drawings'
+import { currentRoute, currentSlideRoute, hasPrimarySlide } from './nav-state'
+import { getSlide } from './slides'
 
-export { rawRoutes, router }
+export * from './slides'
+export * from './nav-state'
 
-// force update collected elements when the route is fully resolved
-export const routeForceRefresh = ref(0)
-nextTick(() => {
-  router.afterEach(async () => {
-    await nextTick()
-    routeForceRefresh.value += 1
-  })
-})
-
-export const navDirection = ref(0)
-export const clicksDirection = ref(0)
-
-export const route = computed(() => router.currentRoute.value)
-
-export const isPrintMode = computed(() => route.value.query.print !== undefined)
-export const isPrintWithClicks = computed(() => route.value.query.print === 'clicks')
-export const isEmbedded = computed(() => route.value.query.embedded !== undefined)
-export const isPresenter = computed(() => route.value.path.startsWith('/presenter'))
-export const isNotesViewer = computed(() => route.value.path.startsWith('/notes'))
-export const presenterPassword = computed(() => route.value.query.password)
-export const showPresenter = computed(() => !isPresenter.value && (!configs.remote || presenterPassword.value === configs.remote))
+export const clicksContext = computed(() => usePrimaryClicks(currentSlideRoute.value))
 
 const queryClicksRaw = useRouteQuery('clicks', '0')
 export const queryClicks = computed({
   get() {
-    // eslint-disable-next-line ts/no-use-before-define
     if (clicksContext.value.disabled)
       return CLICKS_MAX
     let v = +(queryClicksRaw.value || 0)
@@ -51,231 +27,45 @@ export const queryClicks = computed({
   },
 })
 
-export const total = computed(() => rawRoutes.length)
-export const path = computed(() => route.value.path)
-
-export const currentPage = computed(() => Number.parseInt(path.value.split(/\//g).slice(-1)[0]) || 1)
-export const currentPath = computed(() => getPath(currentPage.value))
-export const currentRoute = computed(() => rawRoutes.find(i => i.path === `${currentPage.value}`))
-export const currentSlideId = computed(() => currentRoute.value?.meta?.slide?.id)
-export const currentLayout = computed(() => currentRoute.value?.meta?.layout || (currentPage.value === 1 ? 'cover' : 'default'))
-
-export const nextRoute = computed(() => rawRoutes.find(i => i.path === `${Math.min(rawRoutes.length, currentPage.value + 1)}`))
-export const prevRoute = computed(() => rawRoutes.find(i => i.path === `${Math.max(1, currentPage.value - 1)}`))
-
-export const clicksContext = computed(() => usePrimaryClicks(currentRoute.value))
-export const clicks = computed(() => clicksContext.value.current)
-export const clicksTotal = computed(() => clicksContext.value.total)
-
-export const hasNext = computed(() => currentPage.value < rawRoutes.length || clicks.value < clicksTotal.value)
-export const hasPrev = computed(() => currentPage.value > 1 || clicks.value > 0)
-
-export const rawTree = computed(() => rawRoutes
-  .filter((route: RouteRecordRaw) => route.meta?.slide?.title)
-  .reduce((acc: TocItem[], route: RouteRecordRaw) => {
-    addToTree(acc, route)
-    return acc
-  }, []))
-export const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value, currentRoute.value))
-export const tree = computed(() => filterTree(treeWithActiveStatuses.value))
-
-export const transition = computed(() => getCurrentTransition(navDirection.value, currentRoute.value, prevRoute.value))
-
-watch(currentRoute, (next, prev) => {
-  navDirection.value = Number(next?.path) - Number(prev?.path)
-})
-
-export async function next() {
-  clicksDirection.value = 1
-  if (clicksTotal.value <= queryClicks.value)
-    await nextSlide()
-  else
-    queryClicks.value += 1
-}
-
-export async function prev() {
-  clicksDirection.value = -1
-  if (queryClicks.value <= 0)
-    await prevSlide()
-  else
-    queryClicks.value -= 1
-}
-
-export function getPath(no: number | string) {
-  return isPresenter.value ? `/presenter/${no}` : `/${no}`
-}
-
-export async function nextSlide() {
-  clicksDirection.value = 1
-  if (currentPage.value < rawRoutes.length)
-    await go(currentPage.value + 1)
-}
-
-export async function prevSlide(lastClicks = true) {
-  clicksDirection.value = -1
-  const next = Math.max(1, currentPage.value - 1)
-  await go(next)
-  if (lastClicks && clicksTotal.value)
-    router.replace({ query: { ...route.value.query, clicks: clicksTotal.value } })
-}
-
-export function goFirst() {
-  return go(1)
-}
-
-export function goLast() {
-  return go(total.value)
-}
-
-export function go(page: number | string, clicks?: number) {
-  skipTransition.value = false
-  return router.push({ path: getPath(page), query: { ...route.value.query, clicks } })
-}
-
-export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
-  const swipeBegin = ref(0)
-  const { direction, distanceX, distanceY } = usePointerSwipe(root, {
-    pointerTypes: ['touch'],
-    onSwipeStart() {
-      if (isDrawing.value)
-        return
-      swipeBegin.value = timestamp()
-    },
-    onSwipeEnd() {
-      if (!swipeBegin.value)
-        return
-      if (isDrawing.value)
-        return
-
-      const x = Math.abs(distanceX.value)
-      const y = Math.abs(distanceY.value)
-      if (x / window.innerWidth > 0.3 || x > 75) {
-        if (direction.value === 'left')
-          next()
-        else
-          prev()
-      }
-      else if (y / window.innerHeight > 0.4 || y > 200) {
-        if (direction.value === 'down')
-          prevSlide()
-        else
-          nextSlide()
-      }
-    },
-  })
-}
-
-export async function downloadPDF() {
-  const { saveAs } = await import('file-saver')
-  saveAs(
-    typeof configs.download === 'string'
-      ? configs.download
-      : configs.exportFilename
-        ? `${configs.exportFilename}.pdf`
-        : `${import.meta.env.BASE_URL}slidev-exported.pdf`,
-    `${configs.title}.pdf`,
-  )
-}
-
-export async function openInEditor(url?: string) {
-  if (url == null) {
-    const slide = currentRoute.value?.meta?.slide
-    if (!slide)
-      return false
-    url = `${slide.filepath}:${slide.start}`
-  }
-  await fetch(`/__open-in-editor?file=${encodeURIComponent(url)}`)
-  return true
-}
-
-export function addToTree(tree: TocItem[], route: RouteRecordRaw, level = 1) {
-  const titleLevel = route.meta?.slide?.level
-  if (titleLevel && titleLevel > level && tree.length > 0) {
-    addToTree(tree[tree.length - 1].children, route, level + 1)
-  }
-  else {
-    tree.push({
-      children: [],
-      level,
-      path: route.path,
-      hideInToc: Boolean(route.meta?.slide?.frontmatter?.hideInToc),
-      title: route.meta?.slide?.title,
-    })
-  }
-}
-
-export function getTreeWithActiveStatuses(
-  tree: TocItem[],
-  currentRoute?: RouteRecordRaw,
-  hasActiveParent = false,
-  parent?: TocItem,
-): TocItem[] {
-  return tree.map((item: TocItem) => {
-    const clone = {
-      ...item,
-      active: item.path === currentRoute?.path,
-      hasActiveParent,
+export const {
+  slides,
+  total,
+  currentPath,
+  currentSlideNo,
+  currentPage,
+  currentLayout,
+  currentTransition,
+  clicksDirection,
+  nextRoute,
+  prevRoute,
+  clicks,
+  clicksTotal,
+  hasNext,
+  hasPrev,
+  tocTree,
+  navDirection,
+  openInEditor,
+  next,
+  prev,
+  go,
+  goLast,
+  goFirst,
+  nextSlide,
+  prevSlide,
+} = useNavBase(
+  currentSlideRoute,
+  clicksContext,
+  queryClicks,
+  router,
+)
+
+watch(
+  [total, currentRoute],
+  async () => {
+    if (hasPrimarySlide.value && !getSlide(currentRoute.value.params.no as string)) {
+      // The current slide may has been removed. Redirect to the last slide.
+      await goLast()
     }
-    if (clone.children.length > 0)
-      clone.children = getTreeWithActiveStatuses(clone.children, currentRoute, clone.active || clone.hasActiveParent, clone)
-    if (parent && (clone.active || clone.activeParent))
-      parent.activeParent = true
-    return clone
-  })
-}
-
-export function filterTree(tree: TocItem[], level = 1): TocItem[] {
-  return tree
-    .filter((item: TocItem) => !item.hideInToc)
-    .map((item: TocItem) => ({
-      ...item,
-      children: filterTree(item.children, level + 1),
-    }))
-}
-
-const transitionResolveMap: Record<string, string | undefined> = {
-  'slide-left': 'slide-left | slide-right',
-  'slide-right': 'slide-right | slide-left',
-  'slide-up': 'slide-up | slide-down',
-  'slide-down': 'slide-down | slide-up',
-}
-
-export function resolveTransition(transition?: string | TransitionGroupProps, isBackward = false): TransitionGroupProps | undefined {
-  if (!transition)
-    return undefined
-  if (typeof transition === 'string') {
-    transition = {
-      name: transition,
-    }
-  }
-
-  if (!transition.name)
-    return undefined
-
-  let name = transition.name.includes('|')
-    ? transition.name
-    : (transitionResolveMap[transition.name] || transition.name)
-
-  if (name.includes('|')) {
-    const [forward, backward] = name.split('|').map(i => i.trim())
-    name = isBackward ? backward : forward
-  }
-
-  if (!name)
-    return undefined
-
-  return {
-    ...transition,
-    name,
-  }
-}
-
-export function getCurrentTransition(direction: number, currentRoute?: RouteRecordRaw, prevRoute?: RouteRecordRaw) {
-  let transition = direction > 0
-    ? prevRoute?.meta?.transition
-    : currentRoute?.meta?.transition
-  if (!transition)
-    transition = configs.transition
-
-  return resolveTransition(transition, direction < 0)
-}
+  },
+  { flush: 'post', immediate: true },
+)

package/logic/note.ts

@@ -36,11 +36,11 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
   }
 
   if (__DEV__) {
-    import.meta.hot?.on('slidev-update', (payload) => {
+    import.meta.hot?.on('slidev:update-slide', (payload) => {
       if (payload.id === id)
         info.value = payload.data
     })
-    import.meta.hot?.on('slidev-update-note', (payload) => {
+    import.meta.hot?.on('slidev:update-note', (payload) => {
       if (payload.id === id && info.value.note?.trim() !== payload.note?.trim())
         info.value = { ...info.value, ...payload }
     })

package/logic/overview.ts

@@ -1,9 +1,9 @@
 import { computed, ref } from 'vue'
-import { rawRoutes } from '../routes'
+import { slides } from './nav'
 
 // To have same format(.value) as max, wrap it with ref.
 const min = ref(1)
-const max = computed(() => rawRoutes.length)
+const max = computed(() => slides.value.length)
 
 export const currentOverviewPage = ref(0)
 export const overviewRowCount = ref(0)

package/logic/route.ts

@@ -1,4 +1,4 @@
-import { computed, nextTick, unref } from 'vue'
+import { computed, nextTick, ref, unref } from 'vue'
 import { router } from '../routes'
 
 export function useRouteQuery<T extends string | string[]>(
@@ -24,3 +24,12 @@ export function useRouteQuery<T extends string | string[]>(
     },
   })
 }
+
+// force update collected elements when the route is fully resolved
+export const routeForceRefresh = ref(0)
+nextTick(() => {
+  router.afterEach(async () => {
+    await nextTick()
+    routeForceRefresh.value += 1
+  })
+})

package/logic/slides.ts

@@ -0,0 +1,19 @@
+import type { SlideRoute } from '@slidev/types'
+import { router } from '../routes'
+import { isPresenter } from './nav-state'
+import { slides } from '#slidev/slides'
+
+export { slides, router }
+
+export function getSlide(no: number | string) {
+  return slides.value.find(
+    s => (s.no === +no || s.meta.slide?.frontmatter.routeAlias === no),
+  )
+}
+
+export function getSlidePath(route: SlideRoute | number | string, presenter = isPresenter.value) {
+  if (typeof route === 'number' || typeof route === 'string')
+    route = getSlide(route)!
+  const no = route.meta.slide?.frontmatter.routeAlias ?? route.no
+  return presenter ? `/presenter/${no}` : `/${no}`
+}

package/logic/transition.ts

@@ -0,0 +1,50 @@
+import type { SlideRoute } from '@slidev/types'
+import type { TransitionGroupProps } from 'vue'
+import { configs } from '../env'
+
+const transitionResolveMap: Record<string, string | undefined> = {
+  'slide-left': 'slide-left | slide-right',
+  'slide-right': 'slide-right | slide-left',
+  'slide-up': 'slide-up | slide-down',
+  'slide-down': 'slide-down | slide-up',
+}
+
+export function resolveTransition(transition?: string | TransitionGroupProps, isBackward = false): TransitionGroupProps | undefined {
+  if (!transition)
+    return undefined
+  if (typeof transition === 'string') {
+    transition = {
+      name: transition,
+    }
+  }
+
+  if (!transition.name)
+    return undefined
+
+  let name = transition.name.includes('|')
+    ? transition.name
+    : (transitionResolveMap[transition.name] || transition.name)
+
+  if (name.includes('|')) {
+    const [forward, backward] = name.split('|').map(i => i.trim())
+    name = isBackward ? backward : forward
+  }
+
+  if (!name)
+    return undefined
+
+  return {
+    ...transition,
+    name,
+  }
+}
+
+export function getCurrentTransition(direction: number, currentRoute?: SlideRoute, prevRoute?: SlideRoute) {
+  let transition = direction > 0
+    ? prevRoute?.meta?.transition
+    : currentRoute?.meta?.transition
+  if (!transition)
+    transition = configs.transition
+
+  return resolveTransition(transition, direction < 0)
+}

package/modules/context.ts

@@ -1,19 +1,12 @@
 import type { App } from 'vue'
 import { computed, reactive, ref } from 'vue'
-import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
 import type { ComputedRef } from '@vue/reactivity'
 import type { configs } from '../env'
 import * as nav from '../logic/nav'
-import { route } from '../logic/nav'
 import { isDark } from '../logic/dark'
 import { injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
 import { useContext } from '../composables/useContext'
-
-export type SlidevContextNavKey = 'path' | 'total' | 'clicksContext' | 'clicks' | 'clicksTotal' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide' | 'rawRoutes' | 'go'
-
-export interface SlidevContextNav extends Pick<typeof nav, SlidevContextNavKey> {
-  route: ComputedRef<RouteRecordRaw | RouteLocationNormalizedLoaded>
-}
+import type { SlidevContextNav } from '../composables/useNav'
 
 export interface SlidevContext {
   nav: SlidevContextNav
@@ -24,10 +17,10 @@ export interface SlidevContext {
 export function createSlidevContext() {
   return {
     install(app: App) {
-      const context = reactive(useContext(route))
+      const context = reactive(useContext())
       app.provide(injectionRenderContext, ref('none'))
       app.provide(injectionSlidevContext, context)
-      app.provide(injectionCurrentPage, computed(() => context.nav.currentPage))
+      app.provide(injectionCurrentPage, computed(() => context.nav.currentSlideNo))
 
       // allows controls from postMessages
       if (__DEV__) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.20",
+  "version": "0.48.0-beta.21",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -29,6 +29,7 @@
     "@antfu/utils": "^0.7.7",
     "@iconify-json/carbon": "^1.1.30",
     "@iconify-json/ph": "^1.1.11",
+    "@iconify-json/svg-spinners": "^1.1.2",
     "@shikijs/monaco": "^1.1.7",
     "@shikijs/vitepress-twoslash": "^1.1.7",
     "@slidev/rough-notation": "^0.1.0",
@@ -54,10 +55,10 @@
     "shiki-magic-move": "^0.1.0",
     "typescript": "^5.3.3",
     "unocss": "^0.58.5",
-    "vue": "^3.4.20",
+    "vue": "^3.4.21",
     "vue-router": "^4.3.0",
-    "@slidev/types": "0.48.0-beta.20",
-    "@slidev/parser": "0.48.0-beta.20"
+    "@slidev/types": "0.48.0-beta.21",
+    "@slidev/parser": "0.48.0-beta.21"
   },
   "devDependencies": {
     "vite": "^5.1.4"

package/pages/notes.vue

@@ -5,8 +5,7 @@ import { useLocalStorage } from '@vueuse/core'
 import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { fullscreen } from '../state'
-import { total } from '../logic/nav'
-import { rawRoutes } from '../routes'
+import { slides, total } from '../logic/nav'
 import NoteDisplay from '../internals/NoteDisplay.vue'
 import IconButton from '../internals/IconButton.vue'
 
@@ -20,7 +19,7 @@ const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 const scroller = ref<HTMLDivElement>()
 const fontSize = useLocalStorage('slidev-notes-font-size', 18)
 const pageNo = computed(() => sharedState.lastUpdate?.type === 'viewer' ? sharedState.viewerPage : sharedState.page)
-const currentRoute = computed(() => rawRoutes.find(i => i.path === `${pageNo.value}`))
+const currentRoute = computed(() => slides.value.find(i => i.no === pageNo.value))
 
 watch(pageNo, () => {
   scroller.value?.scrollTo({ left: 0, top: 0, behavior: 'smooth' })

package/pages/overview.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useHead } from '@unhead/vue'
-import type { RouteRecordRaw } from 'vue-router'
-import type { ClicksContext } from 'packages/types'
+import type { ClicksContext, SlideRoute } from '@slidev/types'
 import { configs } from '../env'
-import { openInEditor, rawRoutes } from '../logic/nav'
+import { getSlidePath, openInEditor, slides } from '../logic/nav'
 import { useFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { getSlideClass } from '../utils'
@@ -26,19 +25,19 @@ useHead({
 const blocks: Map<number, HTMLElement> = reactive(new Map())
 const activeBlocks = ref<number[]>([])
 const edittingNote = ref<number | null>(null)
-const wordCounts = computed(() => rawRoutes.map(route => wordCount(route.meta?.slide?.note || '')))
+const wordCounts = computed(() => slides.value.map(route => wordCount(route.meta?.slide?.note || '')))
 const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
-const totalClicks = computed(() => rawRoutes.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
+const totalClicks = computed(() => slides.value.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
 
-const clicksContextMap = new WeakMap<RouteRecordRaw, ClicksContext>()
-function getClicksContext(route: RouteRecordRaw) {
+const clicksContextMap = new WeakMap<SlideRoute, ClicksContext>()
+function getClicksContext(route: SlideRoute) {
   // We create a local clicks context to calculate the total clicks of the slide
   if (!clicksContextMap.has(route))
     clicksContextMap.set(route, useFixedClicks(route, CLICKS_MAX))
   return clicksContextMap.get(route)!
 }
 
-function getSlideClicks(route: RouteRecordRaw) {
+function getSlideClicks(route: SlideRoute) {
   return route.meta?.clicks || getClicksContext(route)?.total
 }
 
@@ -80,7 +79,7 @@ function scrollToSlide(idx: number) {
     el.scrollIntoView({ behavior: 'smooth', block: 'start' })
 }
 
-function onMarkerClick(e: MouseEvent, clicks: number, route: RouteRecordRaw) {
+function onMarkerClick(e: MouseEvent, clicks: number, route: SlideRoute) {
   const ctx = getClicksContext(route)
   if (ctx.current === clicks)
     ctx.current = CLICKS_MAX
@@ -101,8 +100,8 @@ onMounted(() => {
     <nav class="h-full flex flex-col border-r border-main p2 select-none">
       <div class="flex flex-col flex-auto items-center justify-center group gap-1">
         <div
-          v-for="(route, idx) of rawRoutes"
-          :key="route.path"
+          v-for="(route, idx) of slides"
+          :key="route.no"
           class="relative"
         >
           <button
@@ -136,8 +135,8 @@ onMounted(() => {
       @scroll="checkActiveBlocks"
     >
       <div
-        v-for="(route, idx) of rawRoutes"
-        :key="route.path"
+        v-for="(route, idx) of slides"
+        :key="route.no"
         :ref="el => blocks.set(idx, el as any)"
         class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
       >
@@ -148,7 +147,7 @@ onMounted(() => {
           <IconButton
             class="mr--3 op0 group-hover:op80"
             title="Play in new tab"
-            @click="openSlideInNewTab(route.path)"
+            @click="openSlideInNewTab(getSlidePath(route, false))"
           >
             <carbon:presentation-file />
           </IconButton>
@@ -164,23 +163,22 @@ onMounted(() => {
         <div class="flex flex-col gap-2 my5">
           <div
             class="border rounded border-main overflow-hidden bg-main select-none h-max"
-            @dblclick="openSlideInNewTab(route.path)"
+            @dblclick="openSlideInNewTab(getSlidePath(route, false))"
           >
             <SlideContainer
-              :key="route.path"
+              :key="route.no"
               :width="cardWidth"
               :clicks-disabled="true"
               class="pointer-events-none important:[&_*]:select-none"
             >
               <SlideWrapper
-                :is="route.component"
-                v-if="route?.component"
+                :is="route.component!"
                 :clicks-context="getClicksContext(route)"
                 :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
               />
-              <DrawingPreview :page="+route.path" />
+              <DrawingPreview :page="route.no" />
             </SlideContainer>
           </div>
           <ClicksSlider
@@ -220,8 +218,8 @@ onMounted(() => {
     </main>
     <div class="absolute top-0 right-0 px3 py1.5 border-b border-l rounded-lb bg-main border-main select-none">
       <div class="text-xs op50">
-        {{ rawRoutes.length }} slides ·
-        {{ totalClicks + rawRoutes.length - 1 }} clicks ·
+        {{ slides.length }} slides ·
+        {{ totalClicks + slides.length - 1 }} clicks ·
         {{ totalWords }} words
       </div>
     </div>

package/pages/play.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
 import { isEditorVertical, isScreenVertical, showEditor, slideScale, windowSize } from '../state'
-import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
+import { isEmbedded, isPrintMode, next, prev } from '../logic/nav'
+import { useSwipeControls } from '../composables/useSwipeControls'
 import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
 import { configs } from '../env'

package/pages/presenter/print.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
 import { configs } from '../../env'
-import { rawRoutes, total } from '../../logic/nav'
+import { slides, total } from '../../logic/nav'
 import NoteDisplay from '../../internals/NoteDisplay.vue'
 
 useStyleTag(`
@@ -28,7 +28,7 @@ useHead({
   title: `Notes - ${configs.title}`,
 })
 
-const slidesWithNote = computed(() => rawRoutes
+const slidesWithNote = computed(() => slides.value
   .map(route => route.meta?.slide)
   .filter(slide => slide !== undefined && slide.noteHTML !== ''))
 </script>