@slidev/client 0.48.0-beta.1 → 0.48.0-beta.11

package/modules/context.ts

@@ -1,12 +1,12 @@
 import type { App } from 'vue'
-import { computed, reactive } 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, injectionSlidevContext } from '../constants'
+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'
@@ -21,10 +21,11 @@ export interface SlidevContext {
   themeConfigs: ComputedRef<typeof configs['themeConfig']>
 }
 
-export default function createSlidevContext() {
+export function createSlidevContext() {
   return {
     install(app: App) {
       const context = reactive(useContext(route))
+      app.provide(injectionRenderContext, ref('none'))
       app.provide(injectionSlidevContext, context)
       app.provide(injectionCurrentPage, computed(() => context.nav.currentPage))
 

package/modules/{directives.ts → v-click.ts}

@@ -11,19 +11,21 @@ import {
   injectionClicksContext,
 } from '../constants'
 
-function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
+export type VClickValue = string | [string | number, string | number] | boolean
+
+export function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
   return (dir.instance?.$ as any).provides[key as any] ?? defaultValue
 }
 
-export default function createDirectives() {
+export function createVClickDirectives() {
   return {
     install(app: App) {
-      app.directive('click', {
+      app.directive<HTMLElement, VClickValue>('click', {
         // @ts-expect-error extra prop
         name: 'v-click',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value)
           if (resolved == null)
             return
 
@@ -55,12 +57,12 @@ export default function createDirectives() {
         unmounted,
       })
 
-      app.directive('after', {
+      app.directive<HTMLElement, VClickValue>('after', {
         // @ts-expect-error extra prop
         name: 'v-after',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir, true)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value, true)
           if (resolved == null)
             return
 
@@ -86,12 +88,12 @@ export default function createDirectives() {
         unmounted,
       })
 
-      app.directive('click-hide', {
+      app.directive<HTMLElement, VClickValue>('click-hide', {
         // @ts-expect-error extra prop
         name: 'v-click-hide',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir, false, true)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value, false, true)
           if (resolved == null)
             return
 
@@ -127,14 +129,12 @@ function isCurrent(thisClick: number | [number, number], clicks: number) {
     : thisClick === clicks
 }
 
-function resolveClick(el: Element, dir: DirectiveBinding<any>, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
+export function resolveClick(el: Element, dir: DirectiveBinding<any>, value: VClickValue, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
   const ctx = dirInject(dir, injectionClicksContext)?.value
 
   if (!el || !ctx || ctx.disabled)
     return null
 
-  let value = dir.value
-
   if (value === false || value === 'false')
     return null
 
@@ -153,7 +153,7 @@ function resolveClick(el: Element, dir: DirectiveBinding<any>, clickAfter = fals
     // range (absolute)
     delta = 0
     thisClick = value as [number, number]
-    maxClick = value[1]
+    maxClick = +value[1]
   }
   else {
     ({ start: thisClick, end: maxClick, delta } = ctx.resolve(value))

package/modules/v-mark.ts

@@ -0,0 +1,159 @@
+import type { RoughAnnotationConfig } from '@slidev/rough-notation'
+import { annotate } from '@slidev/rough-notation'
+import type { App } from 'vue'
+import { computed, watchEffect } from 'vue'
+import type { VClickValue } from './v-click'
+import { resolveClick } from './v-click'
+
+export interface RoughDirectiveOptions extends Partial<RoughAnnotationConfig> {
+  at: VClickValue
+}
+
+export type RoughDirectiveValue = VClickValue | RoughDirectiveOptions
+
+function addClass(options: RoughDirectiveOptions, cls: string) {
+  options.class = [options.class, cls].filter(Boolean).join(' ')
+  return options
+}
+
+// Definitions of supported modifiers
+const vMarkModifiers: Record<string, (options: RoughDirectiveOptions, value?: any) => RoughDirectiveOptions> = {
+  // Types
+  'box': options => Object.assign(options, { type: 'box' }),
+  'circle': options => Object.assign(options, { type: 'circle' }),
+  'underline': options => Object.assign(options, { type: 'underline' }),
+  'highlight': options => Object.assign(options, { type: 'highlight' }),
+  'strike-through': options => Object.assign(options, { type: 'strike-through' }),
+  'crossed-off': options => Object.assign(options, { type: 'crossed-off' }),
+  'bracket': options => Object.assign(options, { type: 'bracket' }),
+
+  // Type Aliases
+  'strike': options => Object.assign(options, { type: 'strike-through' }),
+  'cross': options => Object.assign(options, { type: 'crossed-off' }),
+  'crossed': options => Object.assign(options, { type: 'crossed-off' }),
+  'linethrough': options => Object.assign(options, { type: 'strike-through' }),
+  'line-through': options => Object.assign(options, { type: 'strike-through' }),
+
+  // Colors
+  // @unocss-include
+  'black': options => addClass(options, 'text-black'),
+  'blue': options => addClass(options, 'text-blue'),
+  'cyan': options => addClass(options, 'text-cyan'),
+  'gray': options => addClass(options, 'text-gray'),
+  'green': options => addClass(options, 'text-green'),
+  'indigo': options => addClass(options, 'text-indigo'),
+  'lime': options => addClass(options, 'text-lime'),
+  'orange': options => addClass(options, 'text-orange'),
+  'pink': options => addClass(options, 'text-pink'),
+  'purple': options => addClass(options, 'text-purple'),
+  'red': options => addClass(options, 'text-red'),
+  'teal': options => addClass(options, 'text-teal'),
+  'white': options => addClass(options, 'text-white'),
+  'yellow': options => addClass(options, 'text-yellow'),
+}
+
+const vMarkModifiersDynamic: [RegExp, (match: RegExpMatchArray, options: RoughDirectiveOptions, value?: any) => RoughDirectiveOptions][] = [
+  // Support setting delay like `v-mark.delay300="1"`
+  [/^delay-?(\d+)?$/, (match, options, value) => {
+    const ms = (match[1] ? Number.parseInt(match[1]) : value) || 300
+    options.delay = ms
+    return options
+  }],
+  // Support setting opacity like `v-mark.op50="1"`
+  [/^(?:op|opacity)-?(\d+)?$/, (match, options, value) => {
+    const opacity = (match[1] ? Number.parseInt(match[1]) : value) || 100
+    options.opacity = opacity / 100
+    return options
+  }],
+]
+
+/**
+ * This supports v-mark directive to add notations to elements, powered by `rough-notation`.
+ */
+export function createVMarkDirective() {
+  return {
+    install(app: App) {
+      app.directive<HTMLElement, RoughDirectiveValue>('mark', {
+        // @ts-expect-error extra prop
+        name: 'v-mark',
+
+        mounted: (el, binding) => {
+          const options = computed(() => {
+            const bindingOptions = (typeof binding.value === 'object' && !Array.isArray(binding.value))
+              ? { ...binding.value }
+              : { at: binding.value }
+
+            let modifierOptions: RoughDirectiveOptions = { at: bindingOptions.at }
+            const unknownModifiers = Object.entries(binding.modifiers)
+              .filter(([k, v]) => {
+                if (vMarkModifiers[k]) {
+                  modifierOptions = vMarkModifiers[k](modifierOptions, v)
+                  return false
+                }
+                for (const [re, fn] of vMarkModifiersDynamic) {
+                  const match = k.match(re)
+                  if (match) {
+                    modifierOptions = fn(match, modifierOptions, v)
+                    return false
+                  }
+                }
+                return true
+              })
+
+            if (unknownModifiers.length)
+              console.warn('[Slidev] Invalid modifiers for v-mark:', unknownModifiers)
+
+            const options = {
+              ...modifierOptions,
+              ...bindingOptions,
+            }
+            options.type ||= 'underline'
+
+            return options
+          })
+
+          const annotation = annotate(el, options.value as RoughAnnotationConfig)
+
+          const resolvedClick = resolveClick(el, binding, options.value.at)
+          if (!resolvedClick) {
+            console.error('[Slidev] Invalid value for v-mark:', options.value.at)
+            return
+          }
+
+          watchEffect(() => {
+            let shouldShow: boolean | undefined
+
+            if (options.value.class)
+              annotation.class = options.value.class
+            if (options.value.color)
+              annotation.color = options.value.color
+
+            const at = options.value.at
+
+            if (at === true) {
+              shouldShow = true
+            }
+            else if (at === false) {
+              shouldShow = false
+            }
+            else if (resolvedClick) {
+              shouldShow = resolvedClick.isActive.value
+            }
+            else {
+              console.error('[Slidev] Invalid value for v-mark:', at)
+              return
+            }
+
+            if (shouldShow == null)
+              return
+
+            if (shouldShow)
+              annotation.show()
+            else
+              annotation.hide()
+          })
+        },
+      })
+    },
+  }
+}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@slidev/client",
-  "version": "0.48.0-beta.1",
+  "type": "module",
+  "version": "0.48.0-beta.11",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -13,6 +14,12 @@
   "bugs": "https://github.com/slidevjs/slidev/issues",
   "exports": {
     "./package.json": "./package.json",
+    "./constants": "./constants.ts",
+    "./context": "./context.ts",
+    "./env": "./env.ts",
+    "./layoutHelper": "./layoutHelper.ts",
+    "./routes": "./routes.ts",
+    "./utils": "./utils.ts",
     "./*": "./*"
   },
   "engines": {
@@ -22,34 +29,35 @@
     "@antfu/utils": "^0.7.7",
     "@iconify-json/carbon": "^1.1.30",
     "@iconify-json/ph": "^1.1.11",
-    "@shikijs/vitepress-twoslash": "^1.1.2",
+    "@shikijs/vitepress-twoslash": "^1.1.7",
+    "@slidev/rough-notation": "^0.1.0",
     "@unhead/vue": "^1.8.10",
     "@unocss/reset": "^0.58.5",
-    "@vueuse/core": "^10.7.2",
-    "@vueuse/math": "^10.7.2",
-    "@vueuse/motion": "^2.0.0",
-    "codemirror": "^5.65.5",
+    "@vueuse/core": "^10.8.0",
+    "@vueuse/math": "^10.8.0",
+    "@vueuse/motion": "^2.1.0",
+    "codemirror": "^5.65.16",
     "defu": "^6.1.4",
-    "drauu": "^0.3.7",
+    "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
-    "js-base64": "^3.7.6",
+    "js-base64": "^3.7.7",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.9",
     "mermaid": "^10.8.0",
     "monaco-editor": "^0.37.1",
-    "nanoid": "^5.0.5",
+    "nanoid": "^5.0.6",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
     "unocss": "^0.58.5",
     "vue": "^3.4.19",
-    "vue-router": "^4.2.5",
-    "@slidev/types": "0.48.0-beta.1",
-    "@slidev/parser": "0.48.0-beta.1"
+    "vue-router": "^4.3.0",
+    "@slidev/parser": "0.48.0-beta.11",
+    "@slidev/types": "0.48.0-beta.11"
   },
   "devDependencies": {
-    "vite": "^5.1.1"
+    "vite": "^5.1.4"
   }
 }

package/{internals/EntrySelect.vue → pages/entry.vue}

@@ -21,5 +21,12 @@
       <carbon:catalog class="text-3em op50" />
       Notes
     </RouterLink>
+    <RouterLink
+      to="/overview"
+      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
+    >
+      <carbon:list-boxes class="text-3em op50" />
+      Overview
+    </RouterLink>
   </div>
 </template>

package/{internals/NotesView.vue → pages/notes.vue}

@@ -7,8 +7,8 @@ import { sharedState } from '../state/shared'
 import { fullscreen } from '../state'
 import { total } from '../logic/nav'
 import { rawRoutes } from '../routes'
-import NoteDisplay from './NoteDisplay.vue'
-import IconButton from './IconButton.vue'
+import NoteDisplay from '../internals/NoteDisplay.vue'
+import IconButton from '../internals/IconButton.vue'
 
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
@@ -53,7 +53,7 @@ function decreaseFontSize() {
         :placeholder="`No notes for Slide ${pageNo}.`"
       />
     </div>
-    <div class="flex-none border-t border-gray-400 border-opacity-20">
+    <div class="flex-none border-t border-main">
       <div class="flex gap-1 items-center px-6 py-3">
         <IconButton :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
           <carbon:minimize v-if="isFullscreen" />

package/pages/overview.vue

@@ -0,0 +1,201 @@
+<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 { themeVars } from '../env'
+import { rawRoutes } from '../logic/nav'
+import { useClicksContextBase } from '../composables/useClicks'
+import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
+import { getSlideClass } from '../utils'
+import SlideContainer from '../internals/SlideContainer.vue'
+import SlideWrapper from '../internals/SlideWrapper'
+import DrawingPreview from '../internals/DrawingPreview.vue'
+import IconButton from '../internals/IconButton.vue'
+import NoteEditor from '../internals/NoteEditor.vue'
+
+const cardWidth = 450
+
+useHead({
+  title: 'List Overview',
+})
+
+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 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 clicksContextMap = new WeakMap<RouteRecordRaw, ClicksContext>()
+function getClickContext(route: RouteRecordRaw) {
+  // We create a local clicks context to calculate the total clicks of the slide
+  if (!clicksContextMap.has(route))
+    clicksContextMap.set(route, useClicksContextBase(() => 999999, route?.meta?.clicks))
+  return clicksContextMap.get(route)!
+}
+
+function getSlideClicks(route: RouteRecordRaw) {
+  return route.meta?.clicks || getClickContext(route)?.total
+}
+
+function wordCount(str: string) {
+  return str.match(/[\w\d\’\'-]+/gi)?.length || 0
+}
+
+function isElementInViewport(el: HTMLElement) {
+  const rect = el.getBoundingClientRect()
+  const delta = 20
+  return (
+    rect.top >= 0 - delta
+    && rect.left >= 0 - delta
+    && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + delta
+    && rect.right <= (window.innerWidth || document.documentElement.clientWidth) + delta
+  )
+}
+
+function checkActiveBlocks() {
+  const active: number[] = []
+  Array.from(blocks.entries())
+    .forEach(([idx, el]) => {
+      if (isElementInViewport(el))
+        active.push(idx)
+    })
+  activeBlocks.value = active
+}
+
+function openSlideInNewTab(path: string) {
+  const a = document.createElement('a')
+  a.target = '_blank'
+  a.href = path
+  a.click()
+}
+
+function scrollToSlide(idx: number) {
+  const el = blocks.get(idx)
+  if (el)
+    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+onMounted(() => {
+  nextTick(() => {
+    checkActiveBlocks()
+  })
+})
+</script>
+
+<template>
+  <div class="h-screen w-screen of-hidden flex">
+    <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"
+          class="relative"
+        >
+          <button
+            class="relative transition duration-300 w-8 h-8 rounded hover:bg-active hover:op100"
+            :class="activeBlocks.includes(idx) ? 'op100 text-primary bg-gray:5' : 'op20'"
+            @click="scrollToSlide(idx)"
+          >
+            <div>{{ idx + 1 }}</div>
+          </button>
+          <div
+            v-if="route.meta?.slide?.title"
+            class="pointer-events-none select-none absolute left-110% bg-main top-50% translate-y--50% ws-nowrap z-10 px2 shadow-xl rounded border border-main transition duration-400 op0 group-hover:op100"
+            :class="activeBlocks.includes(idx) ? 'text-primary' : 'text-main important-text-op-50'"
+          >
+            {{ route.meta?.slide?.title }}
+          </div>
+        </div>
+      </div>
+      <IconButton
+        v-if="!isColorSchemaConfigured"
+        :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
+        @click="toggleDark()"
+      >
+        <carbon-moon v-if="isDark" />
+        <carbon-sun v-else />
+      </IconButton>
+    </nav>
+    <main
+      class="flex-1 h-full of-auto"
+      :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
+      @scroll="checkActiveBlocks"
+    >
+      <div
+        v-for="(route, idx) of rawRoutes"
+        :key="route.path"
+        :ref="el => blocks.set(idx, el as any)"
+        class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
+      >
+        <div class="select-none w-13 text-right my4">
+          <div class="text-3xl op20 mb2">
+            {{ idx + 1 }}
+          </div>
+          <div
+            v-if="getSlideClicks(route)"
+            class="flex gap-0.5 op50 items-center justify-end"
+            :title="`Clicks in this slide: ${getSlideClicks(route)}`"
+          >
+            <carbon:cursor-1 text-sm />
+            {{ getSlideClicks(route) }}
+          </div>
+        </div>
+        <div
+          class="border rounded border-main overflow-hidden bg-main my5 select-none h-max"
+          :style="themeVars"
+          @dblclick="openSlideInNewTab(route.path)"
+        >
+          <SlideContainer
+            :key="route.path"
+            :width="cardWidth"
+            :clicks-disabled="true"
+            class="pointer-events-none important:[&_*]:select-none"
+          >
+            <SlideWrapper
+              :is="route.component"
+              v-if="route?.component"
+              :clicks-context="getClickContext(route)"
+              :class="getSlideClass(route)"
+              :route="route"
+              render-context="overview"
+            />
+            <DrawingPreview :page="+route.path" />
+          </SlideContainer>
+        </div>
+        <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
+          <IconButton
+            title="Edit Note"
+            class="rounded-full w-9 h-9 text-sm"
+            :class="edittingNote === idx ? 'important:op0' : ''"
+            @click="edittingNote = idx"
+          >
+            <carbon:pen />
+          </IconButton>
+        </div>
+        <NoteEditor
+          :no="idx"
+          class="max-w-250 w-250 text-lg rounded p3"
+          :auto-height="true"
+          :editing="edittingNote === idx"
+          @dblclick="edittingNote !== idx ? edittingNote = idx : null"
+          @update:editing="edittingNote = null"
+        />
+        <div
+          v-if="wordCounts[idx] > 0"
+          class="select-none absolute bottom-0 right-0 bg-main rounded-tl p2 op35 text-xs"
+        >
+          {{ wordCounts[idx] }} words
+        </div>
+      </div>
+    </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 ·
+        {{ totalWords }} words
+      </div>
+    </div>
+  </div>
+</template>

package/{internals/Play.vue → pages/play.vue}

@@ -5,11 +5,11 @@ import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/
 import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
 import { configs, themeVars } from '../env'
-import Controls from './Controls.vue'
-import SlideContainer from './SlideContainer.vue'
-import NavControls from './NavControls.vue'
-import SlidesShow from './SlidesShow.vue'
-import PrintStyle from './PrintStyle.vue'
+import Controls from '../internals/Controls.vue'
+import SlideContainer from '../internals/SlideContainer.vue'
+import NavControls from '../internals/NavControls.vue'
+import SlidesShow from '../internals/SlidesShow.vue'
+import PrintStyle from '../internals/PrintStyle.vue'
 
 registerShortcuts()
 
@@ -33,11 +33,11 @@ const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const Editor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
-  import('./Editor.vue').then(v => Editor.value = v.default)
+  import('../internals/Editor.vue').then(v => Editor.value = v.default)
 
 const DrawingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__)
-  import('./DrawingControls.vue').then(v => DrawingControls.value = v.default)
+  import('../internals/DrawingControls.vue').then(v => DrawingControls.value = v.default)
 </script>
 
 <template>

package/{internals/PresenterPrint.vue → pages/presenter/print.vue}

@@ -2,9 +2,9 @@
 import { computed } from 'vue'
 import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
-import { configs, themeVars } from '../env'
-import { rawRoutes, total } from '../logic/nav'
-import NoteDisplay from './NoteDisplay.vue'
+import { configs, themeVars } from '../../env'
+import { rawRoutes, total } from '../../logic/nav'
+import NoteDisplay from '../../internals/NoteDisplay.vue'
 
 useStyleTag(`
 @page {
@@ -24,7 +24,9 @@ html #page-root {
 }
 `)
 
-useHead({ title: `Notes - ${configs.title}` })
+useHead({
+  title: `Notes - ${configs.title}`,
+})
 
 const slidesWithNote = computed(() => rawRoutes
   .map(route => route.meta?.slide)
@@ -56,7 +58,7 @@ const slidesWithNote = computed(() => rawRoutes
           </h2>
           <NoteDisplay :note-html="slide!.noteHTML" class="max-w-full" />
         </div>
-        <hr v-if="index < slidesWithNote.length - 1" class="border-gray-400/50 mb-8">
+        <hr v-if="index < slidesWithNote.length - 1" class="border-main mb-8">
       </div>
     </div>
   </div>