@slidev/client 0.49.8 → 0.49.10

package/internals/ClicksSlider.vue

@@ -4,9 +4,13 @@ import { clamp, range } from '@antfu/utils'
 import { computed } from 'vue'
 import { CLICKS_MAX } from '../constants'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   clicksContext: ClicksContext
-}>()
+  readonly?: boolean
+  active?: boolean
+}>(), {
+  active: true,
+})
 
 const total = computed(() => props.clicksContext.total)
 const start = computed(() => clamp(0, props.clicksContext.clicksStart, total.value))
@@ -24,6 +28,8 @@ const current = computed({
 const clicksRange = computed(() => range(start.value, total.value + 1))
 
 function onMousedown() {
+  if (props.readonly)
+    return
   if (current.value < 0 || current.value > total.value)
     current.value = 0
 }
@@ -38,7 +44,7 @@ function onMousedown() {
     <div class="flex gap-0.5 items-center min-w-16 font-mono mr1">
       <carbon:cursor-1 text-sm op50 />
       <div flex-auto />
-      <template v-if="current >= 0 && current !== CLICKS_MAX">
+      <template v-if="current >= 0 && current !== CLICKS_MAX && active">
         <span text-primary>{{ current }}</span>
         <span op25>/</span>
       </template>
@@ -46,7 +52,6 @@ function onMousedown() {
     </div>
     <div
       relative flex-auto h5 font-mono flex="~"
-      @dblclick="current = clicksContext.total"
     >
       <div
         v-for="i of clicksRange" :key="i"
@@ -71,8 +76,10 @@ function onMousedown() {
       </div>
       <input
         v-model="current"
-        class="range" absolute inset-0
-        type="range" :min="start" :max="total" :step="1" z-10 op0
+        class="range"
+        type="range" :min="start" :max="total" :step="1"
+        absolute inset-0 z-10 op0
+        :class="readonly ? 'pointer-events-none' : ''"
         :style="{ '--thumb-width': `${1 / (length + 1) * 100}%` }"
         @mousedown="onMousedown"
         @focus="event => (event.currentTarget as HTMLElement)?.blur()"

package/internals/NoteDisplay.vue

@@ -3,14 +3,20 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import type { ClicksContext } from '@slidev/types'
 import { CLICKS_MAX } from '../constants'
 
-const props = defineProps<{
-  class?: string | string[]
-  noteHtml?: string
-  note?: string
-  placeholder?: string
-  clicksContext?: ClicksContext
-  autoScroll?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    class?: string | string[]
+    noteHtml?: string
+    note?: string
+    highlight?: boolean
+    placeholder?: string
+    clicksContext?: ClicksContext
+    autoScroll?: boolean
+  }>(),
+  {
+    highlight: true,
+  },
+)
 
 const emit = defineEmits<{
   (type: 'markerDblclick', e: MouseEvent, clicks: number): void
@@ -30,7 +36,7 @@ function highlightNote() {
   const markers = Array.from(noteDisplay.value.querySelectorAll(`.${CLASS_MARKER}`)) as HTMLElement[]
 
   const current = +(props.clicksContext?.current ?? CLICKS_MAX)
-  const disabled = current < 0 || current >= CLICKS_MAX
+  const disabled = current < 0 || current >= CLICKS_MAX || !props.highlight
 
   const nodeToIgnores = new Set<Element>()
   function ignoreParent(node: Element) {
@@ -114,7 +120,7 @@ function highlightNote() {
 }
 
 watch(
-  () => [props.noteHtml, props.clicksContext?.current],
+  () => [props.noteHtml, props.clicksContext?.current, props.highlight],
   () => {
     nextTick(() => {
       highlightNote()

package/internals/NoteEditable.vue

@@ -26,6 +26,9 @@ const props = defineProps({
   clicksContext: {
     type: Object as PropType<ClicksContext>,
   },
+  highlight: {
+    default: true,
+  },
   autoHeight: {
     default: false,
   },
@@ -112,6 +115,7 @@ watch(
     :note-html="info?.noteHTML"
     :clicks-context="clicksContext"
     :auto-scroll="!autoHeight"
+    :highlight="props.highlight"
     @marker-click="(e, clicks) => emit('markerClick', e, clicks)"
     @marker-dblclick="(e, clicks) => emit('markerDblclick', e, clicks)"
   />

package/logic/slides.ts

@@ -1,5 +1,4 @@
 import type { SlideRoute } from '@slidev/types'
-import { pathPrefix } from '../env'
 import { slides } from '#slidev/slides'
 
 export { slides }
@@ -17,5 +16,5 @@ export function getSlidePath(
   if (typeof route === 'number' || typeof route === 'string')
     route = getSlide(route)!
   const no = route.meta.slide?.frontmatter.routeAlias ?? route.no
-  return presenter ? `${pathPrefix}presenter/${no}` : `${pathPrefix}${no}`
+  return presenter ? `/presenter/${no}` : `/${no}`
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.8",
+  "version": "0.49.10",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -35,12 +35,12 @@
     "@shikijs/monaco": "^1.6.1",
     "@shikijs/vitepress-twoslash": "^1.6.1",
     "@slidev/rough-notation": "^0.1.0",
-    "@typescript/ata": "^0.9.4",
+    "@typescript/ata": "^0.9.5",
     "@unhead/vue": "^1.9.11",
-    "@unocss/reset": "^0.60.3",
+    "@unocss/reset": "^0.60.4",
     "@vueuse/core": "^10.10.0",
     "@vueuse/math": "^10.10.0",
-    "@vueuse/motion": "^2.1.0",
+    "@vueuse/motion": "^2.2.3",
     "codemirror": "^5.65.16",
     "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
@@ -50,17 +50,17 @@
     "lz-string": "^1.5.0",
     "mermaid": "^10.9.1",
     "monaco-editor": "^0.49.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.0",
     "recordrtc": "^5.6.2",
     "shiki": "^1.6.1",
     "shiki-magic-move": "^0.4.2",
     "typescript": "^5.4.5",
-    "unocss": "^0.60.3",
+    "unocss": "^0.60.4",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2",
     "yaml": "^2.4.2",
-    "@slidev/parser": "0.49.8",
-    "@slidev/types": "0.49.8"
+    "@slidev/parser": "0.49.10",
+    "@slidev/types": "0.49.10"
   },
   "devDependencies": {
     "vite": "^5.2.12"

package/pages/404.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useNav } from '../composables/useNav'
+
+const { currentRoute } = useRouter()
+const { total } = useNav()
+
+const guessedSlide = computed(() => {
+  const path = currentRoute.value.path
+  const match = path.match(/\d+/)
+  if (match) {
+    const slideNo = +match[0]
+    if (slideNo > 0 && slideNo <= total.value)
+      return slideNo
+  }
+  return null
+})
+</script>
+
+<template>
+  <div class="grid justify-center pt-15%">
+    <div>
+      <h1 class="text-9xl font-bold">
+        404
+      </h1>
+      <p class="text-2xl">
+        Page not found<code class="op-70">:{{ currentRoute.path }}</code>
+      </p>
+      <div class="mt-3 flex flex-col gap-2">
+        <RouterLink v-if="guessedSlide !== 1" to="/" class="page-link">
+          Go Home
+        </RouterLink>
+        <RouterLink v-if="guessedSlide" :to="`/${guessedSlide}`" class="page-link">
+          Go to Slide {{ guessedSlide }}
+        </RouterLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.page-link {
+  @apply py-2 px-4 bg-gray/10 hover:bg-gray/20 rounded;
+}
+</style>

package/pages/notes.vue

@@ -8,7 +8,9 @@ import { fullscreen } from '../state'
 
 import NoteDisplay from '../internals/NoteDisplay.vue'
 import IconButton from '../internals/IconButton.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
 import { useNav } from '../composables/useNav'
+import { createClicksContextBase } from '../composables/useClicks'
 
 useHead({ title: `Notes - ${slidesTitle}` })
 
@@ -32,6 +34,12 @@ function increaseFontSize() {
 function decreaseFontSize() {
   fontSize.value = fontSize.value - 1
 }
+
+const clicksContext = computed(() => {
+  const clicks = sharedState.lastUpdate?.type === 'viewer' ? sharedState.viewerClicks : sharedState.clicks
+  const total = sharedState.lastUpdate?.type === 'viewer' ? sharedState.viewerClicksTotal : sharedState.clicksTotal
+  return createClicksContextBase(ref(clicks), undefined, total)
+})
 </script>
 
 <template>
@@ -49,10 +57,13 @@ function decreaseFontSize() {
         :note="currentRoute?.meta.slide.note"
         :note-html="currentRoute?.meta.slide.noteHTML"
         :placeholder="`No notes for Slide ${pageNo}.`"
-        :clicks-context="currentRoute?.meta.__clicksContext"
+        :clicks-context="clicksContext"
         :auto-scroll="true"
       />
     </div>
+    <div class="flex-none border-t border-main" px3 py2>
+      <ClicksSlider :clicks-context="clicksContext" readonly />
+    </div>
     <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">

package/pages/overview.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, shallowRef } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
-import { slidesTitle } from '../env'
+import { pathPrefix, slidesTitle } from '../env'
 import { getSlidePath } from '../logic/slides'
 import { createFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
@@ -28,6 +28,7 @@ const wordCounts = computed(() => slides.value.map(route => wordCount(route.meta
 const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
 const totalClicks = computed(() => slides.value.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
 
+const activeSlide = shallowRef<SlideRoute>()
 const clicksContextMap = new WeakMap<SlideRoute, ClicksContext>()
 function getClicksContext(route: SlideRoute) {
   // We create a local clicks context to calculate the total clicks of the slide
@@ -40,8 +41,15 @@ function getSlideClicks(route: SlideRoute) {
   return route.meta?.clicks || getClicksContext(route)?.total
 }
 
+function toggleRoute(route: SlideRoute) {
+  if (activeSlide.value === route)
+    activeSlide.value = undefined
+  else
+    activeSlide.value = route
+}
+
 function wordCount(str: string) {
-  return str.match(/[\w’'-]+/g)?.length || 0
+  return str.match(/[\w`'\-]+/g)?.length || 0
 }
 
 function isElementInViewport(el: HTMLElement) {
@@ -68,7 +76,7 @@ function checkActiveBlocks() {
 function openSlideInNewTab(path: string) {
   const a = document.createElement('a')
   a.target = '_blank'
-  a.href = path
+  a.href = pathPrefix + path.slice(1)
   a.click()
 }
 
@@ -185,9 +193,11 @@ onMounted(() => {
           </div>
           <ClicksSlider
             v-if="getSlideClicks(route)"
+            :active="activeSlide === route"
             :clicks-context="getClicksContext(route)"
             class="w-full mt-2"
-            @dblclick="getClicksContext(route).current = CLICKS_MAX"
+            @dblclick="toggleRoute(route)"
+            @click="activeSlide = route"
           />
         </div>
         <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
@@ -204,6 +214,7 @@ onMounted(() => {
           :no="route.no"
           class="max-w-250 w-250 text-lg rounded p3"
           :auto-height="true"
+          :highlight="activeSlide === route"
           :editing="edittingNote === route.no"
           :clicks-context="getClicksContext(route)"
           @dblclick="edittingNote !== route.no ? edittingNote = route.no : null"

package/setup/root.ts

@@ -67,10 +67,12 @@ export default function setupRoot() {
     if (isPresenter.value) {
       patch('page', +currentSlideNo.value)
       patch('clicks', clicksContext.value.current)
+      patch('clicksTotal', clicksContext.value.total)
     }
     else {
       patch('viewerPage', +currentSlideNo.value)
       patch('viewerClicks', clicksContext.value.current)
+      patch('viewerClicksTotal', clicksContext.value.total)
     }
 
     patch('lastUpdate', {

package/setup/routes.ts

@@ -74,6 +74,11 @@ export default function setupRoutes() {
       path: '',
       redirect: { path: '/1' },
     },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: () => import('../pages/404.vue'),
+    },
   )
 
   return setups.reduce((routes, setup) => setup(routes), routes)

package/state/shared.ts

@@ -4,6 +4,8 @@ import { createSyncState } from './syncState'
 export interface SharedState {
   page: number
   clicks: number
+  clicksTotal: number
+
   cursor?: {
     x: number
     y: number
@@ -11,6 +13,7 @@ export interface SharedState {
 
   viewerPage: number
   viewerClicks: number
+  viewerClicksTotal: number
 
   lastUpdate?: {
     id: string
@@ -22,8 +25,10 @@ export interface SharedState {
 const { init, onPatch, patch, state } = createSyncState<SharedState>(serverState, {
   page: 1,
   clicks: 0,
+  clicksTotal: 0,
   viewerPage: 1,
   viewerClicks: 0,
+  viewerClicksTotal: 0,
 })
 
 export {