@slidev/client 0.50.0-beta.8 → 0.50.0

package/pages/export.vue

@@ -0,0 +1,369 @@
+<script setup lang="ts">
+import type { ScreenshotSession } from '../logic/screenshot'
+import { sleep } from '@antfu/utils'
+import { parseRangeString } from '@slidev/parser/utils'
+import { useHead } from '@unhead/vue'
+import { provideLocal, useElementSize, useLocalStorage, useStyleTag, watchDebounced } from '@vueuse/core'
+
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useDarkMode } from '../composables/useDarkMode'
+import { useNav } from '../composables/useNav'
+import { patchMonacoColors } from '../composables/usePrintStyles'
+import { injectionSlideScale } from '../constants'
+import { configs, slideHeight, slidesTitle, slideWidth } from '../env'
+import ExportPdfTip from '../internals/ExportPdfTip.vue'
+import FormCheckbox from '../internals/FormCheckbox.vue'
+import FormItem from '../internals/FormItem.vue'
+import PrintSlide from '../internals/PrintSlide.vue'
+import { isScreenshotSupported, startScreenshotSession } from '../logic/screenshot'
+import { skipExportPdfTip } from '../state'
+import Play from './play.vue'
+
+const { slides, isPrintWithClicks, hasNext, go, next, currentSlideNo, clicks, printRange } = useNav()
+const router = useRouter()
+const { isColorSchemaConfigured, isDark } = useDarkMode()
+const { width: containerWidth } = useElementSize(useTemplateRef('export-container'))
+const { height: contentHeight } = useElementSize(useTemplateRef('export-content'))
+const scale = computed(() => containerWidth.value / slideWidth.value)
+const contentMarginBottom = computed(() => `${contentHeight.value * (scale.value - 1)}px`)
+const rangesRaw = ref('')
+const initialWait = ref(1000)
+const delay = useLocalStorage('slidev-export-capture-delay', 400, { listenToStorageChanges: false })
+type ScreenshotResult = { slideIndex: number, clickIndex: number, dataUrl: string }[]
+const screenshotSession = ref<ScreenshotSession | null>(null)
+const capturedImages = ref<ScreenshotResult | null>(null)
+const title = ref(configs.exportFilename || slidesTitle)
+
+useHead({
+  title,
+})
+
+provideLocal(injectionSlideScale, scale)
+
+const showExportPdfTip = ref(false)
+function pdf() {
+  if (skipExportPdfTip.value) {
+    doPrint()
+  }
+  else {
+    showExportPdfTip.value = true
+  }
+}
+
+function doPrint() {
+  patchMonacoColors()
+  setTimeout(window.print, 100)
+}
+
+async function capturePngs() {
+  if (screenshotSession.value) {
+    screenshotSession.value.dispose()
+    screenshotSession.value = null
+  }
+  if (capturedImages.value)
+    return capturedImages.value
+  try {
+    const scale = 2
+    screenshotSession.value = await startScreenshotSession(slideWidth.value * scale, slideHeight.value * scale)
+    const result: ScreenshotResult = []
+
+    go(1, 0, true)
+
+    await sleep(initialWait.value + delay.value)
+    while (true) {
+      if (!screenshotSession.value) {
+        break
+      }
+      result.push({
+        slideIndex: currentSlideNo.value - 1,
+        clickIndex: clicks.value,
+        dataUrl: screenshotSession.value.screenshot(document.getElementById('slide-content')!),
+      })
+      if (hasNext.value) {
+        await sleep(delay.value)
+        next()
+        await sleep(delay.value)
+      }
+      else {
+        break
+      }
+    }
+
+    if (screenshotSession.value) {
+      screenshotSession.value.dispose()
+      capturedImages.value = result
+      screenshotSession.value = null
+    }
+  }
+  catch (e) {
+    console.error(e)
+    capturedImages.value = null
+  }
+  finally {
+    router.push('/export')
+  }
+  return capturedImages.value
+}
+
+async function pptx() {
+  const pngs = await capturePngs()
+  if (!pngs)
+    return
+  const pptx = await import('pptxgenjs')
+    .then(r => r.default)
+    .then(PptxGen => new PptxGen())
+
+  const layoutName = `${slideWidth.value}x${slideHeight.value}`
+  pptx.defineLayout({
+    name: layoutName,
+    width: slideWidth.value / 96,
+    height: slideHeight.value / 96,
+  })
+  pptx.layout = layoutName
+  if (configs.author)
+    pptx.author = configs.author
+  pptx.company = 'Created using Slidev'
+  pptx.title = title.value
+  if (typeof configs.info === 'string')
+    pptx.subject = configs.info
+
+  pngs.forEach(({ slideIndex, dataUrl }) => {
+    const slide = pptx.addSlide()
+    slide.background = {
+      data: dataUrl,
+    }
+
+    const note = slides.value[slideIndex].meta.slide.note
+    if (note)
+      slide.addNotes(note)
+  })
+
+  const blob = await pptx.write({
+    outputType: 'blob',
+    compression: true,
+  }) as Blob
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `${title.value}.pptx`
+  a.click()
+}
+
+async function pngsGz() {
+  const pngs = await capturePngs()
+  if (!pngs)
+    return
+  const { createTarGzip } = await import('nanotar')
+  const data = await createTarGzip(
+    pngs.map(({ slideIndex, dataUrl }) => ({
+      name: `${slideIndex}.png`,
+      data: new Uint8Array(atob(dataUrl.split(',')[1]).split('').map(char => char.charCodeAt(0))),
+    })),
+  )
+  const a = document.createElement('a')
+  const blob = new Blob([data], { type: 'application/gzip' })
+  a.href = URL.createObjectURL(blob)
+  a.download = `${title.value}.tar.gz`
+  a.click()
+}
+
+useStyleTag(computed(() => screenshotSession.value?.isActive
+  ? `
+html {
+  cursor: none;
+  margin-bottom: 20px;
+}
+body {
+  pointer-events: none;
+}`
+  : `
+:root {
+  --slidev-slide-scale: ${scale.value};
+}
+`))
+
+// clear captured images when settings changed
+watch(
+  [
+    isDark,
+    printRange,
+    isPrintWithClicks,
+  ],
+  () => capturedImages.value = null,
+)
+
+watchDebounced(
+  [slides, rangesRaw],
+  () => printRange.value = parseRangeString(slides.value.length, rangesRaw.value),
+  { debounce: 300 },
+)
+
+// clear captured images when HMR
+if (import.meta.hot) {
+  import.meta.hot.on('vite:beforeUpdate', () => {
+    capturedImages.value = null
+  })
+}
+</script>
+
+<template>
+  <Play v-if="screenshotSession?.isActive" />
+  <div
+    v-else
+    class="fixed inset-0 flex flex-col md:flex-row md:gap-8 print:position-unset print:inset-0 print:block print:min-h-max justify-center of-hidden bg-main"
+  >
+    <div class="print:hidden min-w-fit flex flex-wrap md:flex-nowrap md:of-y-auto md:flex-col gap-2 p-6 max-w-100">
+      <h1 class="text-3xl md:my-4 flex items-center gap-2 w-full">
+        <RouterLink to="/" class="i-carbon:previous-outline op-70 hover:op-100" />
+        Browser Exporter
+        <sup op50 italic text-sm>Experimental</sup>
+      </h1>
+      <div flex="~ col gap-2">
+        <h2>Options</h2>
+        <FormItem title="Title">
+          <input v-model="title" type="text">
+        </FormItem>
+        <FormItem title="Range">
+          <input v-model="rangesRaw" type="text" :placeholder="`1-${slides.length}`">
+        </FormItem>
+        <FormItem title="Dark mode">
+          <FormCheckbox v-model="isDark" :disabled="isColorSchemaConfigured" />
+        </FormItem>
+        <FormItem title="With clicks">
+          <FormCheckbox v-model="isPrintWithClicks" />
+        </FormItem>
+      </div>
+      <div class="flex-grow" />
+      <div class="min-w-fit" flex="~ col gap-3">
+        <div border="~ main rounded-lg" p3 flex="~ col gap-2">
+          <h2>Export as Vector File</h2>
+          <div class="flex flex-col gap-2 items-start min-w-max">
+            <button @click="pdf">
+              PDF
+            </button>
+          </div>
+        </div>
+
+        <div border="~ main rounded-lg" p3 flex="~ col gap-2" :class="isScreenshotSupported ? '' : 'border-orange'">
+          <h2>Export as Images</h2>
+          <div v-if="!isScreenshotSupported" class="min-w-full w-0 text-orange/100 p-1 mb--4 bg-orange/10 rounded">
+            <span class="i-carbon:warning-alt inline-block mb--.5" />
+            Your browser may not support image capturing.
+            If you encounter issues, please use a modern Chromium-based browser,
+            or export via the CLI.
+          </div>
+          <div class="flex flex-col gap-2 items-start min-w-max">
+            <button @click="pptx">
+              PPTX
+            </button>
+            <button @click="pngsGz">
+              PNGs.gz
+            </button>
+          </div>
+          <div w-full h-1px border="t main" my2 />
+          <div class="relative flex flex-col gap-2 flex-nowrap">
+            <div class="flex flex-col gap-2 items-start min-w-max">
+              <button v-if="capturedImages" class="flex justify-center items-center gap-2" @click="capturedImages = null">
+                <span class="i-carbon:trash-can inline-block text-xl" />
+                Clear Captured Images
+              </button>
+              <button v-else class="flex justify-center items-center gap-2" @click="capturePngs">
+                <div class="i-carbon:camera-action inline-block text-xl" />
+                Pre-capture Slides as Images
+              </button>
+              <FormItem title="Delay" description="Delay between capturing each slide in milliseconds.<br>Increase this value if slides are captured incompletely. <br>(Not related to PDF export)">
+                <input v-model="delay" type="number" step="50" min="50">
+              </FormItem>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="export-container" ref="export-container" relative>
+      <div print:hidden fixed right-5 bottom-5 px2 py0 z-label slidev-glass-effect>
+        <span op75>Rendering as {{ capturedImages ? 'Captured Images' : 'DOM' }} </span>
+      </div>
+      <div v-show="!capturedImages" id="export-content" ref="export-content">
+        <PrintSlide v-for="route, index in slides" :key="index" :hidden="!printRange.includes(index + 1)" :route />
+      </div>
+      <div v-if="capturedImages" id="export-content-images" class="print:hidden grid">
+        <div v-for="png, i of capturedImages" :key="i" class="print-slide-container">
+          <img :src="png.dataUrl">
+        </div>
+      </div>
+    </div>
+    <div id="twoslash-container" />
+    <ExportPdfTip v-model="showExportPdfTip" @print="doPrint" />
+  </div>
+</template>
+
+<style scoped>
+@media not print {
+  #export-container {
+    scrollbar-width: thin;
+    scroll-behavior: smooth;
+    --uno: w-full overflow-x-hidden overflow-y-auto max-h-full max-w-300 p-6;
+  }
+
+  #export-content {
+    transform: v-bind('`scale(${scale})`');
+    margin-bottom: v-bind('contentMarginBottom');
+    --uno: origin-tl;
+  }
+
+  #export-content,
+  #export-content-images {
+    --uno: flex flex-col gap-2;
+  }
+}
+
+@media print {
+  #export-content {
+    transform: scale(1);
+    display: block !important;
+  }
+}
+
+button {
+  --uno: 'w-full rounded bg-gray:10 px-4 py-2 hover:bg-gray/20';
+}
+
+label {
+  --uno: text-xl flex gap-2 items-center select-none;
+
+  span {
+    --uno: flex-grow;
+  }
+
+  input[type='text'],
+  input[type='number'] {
+    --uno: border border-main rounded px-2 py-1;
+  }
+}
+
+h2 {
+  --uno: font-500 op-70;
+}
+
+#export-content {
+  --uno: pointer-events-none;
+}
+</style>
+
+<style>
+@media print {
+  html,
+  body,
+  #app {
+    overflow: unset !important;
+  }
+}
+
+@media not print {
+  #export-content-images .print-slide-container,
+  #export-content .print-slide-container {
+    --uno: border border-main rounded-md shadow of-hidden;
+  }
+}
+</style>

package/pages/overview.vue

@@ -135,7 +135,7 @@ onMounted(() => {
             </button>
             <div
               v-if="route.meta?.slide?.title"
-              class="pointer-events-none select-none absolute left-110% backdrop-blur-8 top-50% translate-y--50% ws-nowrap z-10 px2 shadow-xl rounded border border-main transition duration-400 op0 group-hover:op100"
+              class="pointer-events-none select-none absolute left-110% top-50% translate-y--50% ws-nowrap z-label px2 slidev-glass-effect transition duration-400 op0 group-hover:op100"
               :class="activeBlocks.includes(idx) ? 'text-primary' : 'text-main important-text-op-50'"
             >
               {{ route.meta?.slide?.title }}

package/pages/play.vue

@@ -8,12 +8,11 @@ import { useWakeLock } from '../composables/useWakeLock'
 import Controls from '../internals/Controls.vue'
 import NavControls from '../internals/NavControls.vue'
 import PresenterMouse from '../internals/PresenterMouse.vue'
-import PrintStyle from '../internals/PrintStyle.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { registerShortcuts } from '../logic/shortcuts'
-import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
+import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor } from '../state'
 
 const { next, prev, isPrintMode } = useNav()
 const { isDrawing } = useDrawings()
@@ -63,14 +62,12 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
 </script>
 
 <template>
-  <PrintStyle v-if="isPrintMode" />
   <div
     id="page-root" ref="root" class="grid"
     :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'"
   >
     <SlideContainer
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
-      :width="isPrintMode ? windowSize.width.value : undefined"
       is-main
       @pointerdown="onClick"
       @contextmenu="onContextMenu"

package/pages/presenter.vue

@@ -247,6 +247,15 @@ onMounted(() => {
     'bottom bottom';
 }
 
+.grid-container.layout3 {
+  grid-template-columns: 2fr 3fr;
+  grid-template-rows: 1fr 1fr min-content;
+  grid-template-areas:
+    'note next'
+    'main next'
+    'bottom bottom';
+}
+
 @media (max-aspect-ratio: 3/5) {
   .grid-container.layout1 {
     grid-template-columns: 1fr;

package/pages/print.vue

@@ -3,7 +3,6 @@ import { recomputeAllPoppers } from 'floating-vue'
 import { onMounted, watchEffect } from 'vue'
 import { useNav } from '../composables/useNav'
 import PrintContainer from '../internals/PrintContainer.vue'
-import PrintStyle from '../internals/PrintStyle.vue'
 import { windowSize } from '../state'
 
 const { isPrintMode } = useNav()
@@ -21,7 +20,6 @@ onMounted(() => {
 </script>
 
 <template>
-  <PrintStyle v-if="isPrintMode" />
   <div id="page-root" class="grid grid-cols-[1fr_max-content]">
     <PrintContainer
       class="w-full h-full"

package/setup/monaco.ts

@@ -64,22 +64,22 @@ const setup = createSingletonPromise(async () => {
 
   const ata = configs.monacoTypesSource === 'cdn'
     ? setupTypeAcquisition({
-      projectName: 'TypeScript Playground',
-      typescript: ts as any, // Version mismatch. No problem found so far.
-      logger: console,
-      delegate: {
-        receivedFile: (code: string, path: string) => {
-          defaults.addExtraLib(code, `file://${path}`)
-          const uri = monaco.Uri.file(path)
-          if (monaco.editor.getModel(uri) === null)
-            monaco.editor.createModel(code, 'javascript', uri)
-        },
-        progress: (downloaded: number, total: number) => {
+        projectName: 'TypeScript Playground',
+        typescript: ts as any, // Version mismatch. No problem found so far.
+        logger: console,
+        delegate: {
+          receivedFile: (code: string, path: string) => {
+            defaults.addExtraLib(code, `file://${path}`)
+            const uri = monaco.Uri.file(path)
+            if (monaco.editor.getModel(uri) === null)
+              monaco.editor.createModel(code, 'javascript', uri)
+          },
+          progress: (downloaded: number, total: number) => {
           // eslint-disable-next-line no-console
-          console.debug(`[Typescript ATA] ${downloaded} / ${total}`)
+            console.debug(`[Typescript ATA] ${downloaded} / ${total}`)
+          },
         },
-      },
-    })
+      })
     : () => { }
 
   monaco.languages.register({ id: 'vue' })

package/setup/root.ts

@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router'
 import { createFixedClicks } from '../composables/useClicks'
 import { useEmbeddedControl } from '../composables/useEmbeddedCtrl'
 import { useNav } from '../composables/useNav'
+import { usePrintStyles } from '../composables/usePrintStyles'
 import { injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext, TRUST_ORIGINS } from '../constants'
 import { configs, slidesTitle } from '../env'
 import { skipTransition } from '../logic/hmr'
@@ -43,6 +44,7 @@ export default function setupRoot() {
     hasPrimarySlide,
     isNotesViewer,
     isPresenter,
+    isPrintMode,
   } = useNav()
 
   useHead({
@@ -50,6 +52,8 @@ export default function setupRoot() {
     htmlAttrs: configs.htmlAttrs,
   })
 
+  usePrintStyles()
+
   initSharedState(`${slidesTitle} - shared`)
   initDrawingState(`${slidesTitle} - drawings`)
 
@@ -57,7 +61,7 @@ export default function setupRoot() {
 
   // update shared state
   function updateSharedState() {
-    if (isNotesViewer.value)
+    if (isNotesViewer.value || isPrintMode.value)
       return
 
     // we allow Presenter mode, or Viewer mode from trusted origins to update the shared state
@@ -86,7 +90,7 @@ export default function setupRoot() {
   watch(clicksContext, updateSharedState)
 
   onPatch((state) => {
-    if (!hasPrimarySlide.value)
+    if (!hasPrimarySlide.value || isPrintMode.value)
       return
     if (state.lastUpdate?.type === 'presenter' && (+state.page !== +currentSlideNo.value || +clicksContext.value.current !== +state.clicks)) {
       skipTransition.value = false

package/setup/routes.ts

@@ -5,21 +5,21 @@ import setups from '#slidev/setups/routes'
 export default function setupRoutes() {
   const routes: RouteRecordRaw[] = []
 
-  if (__SLIDEV_FEATURE_PRESENTER__) {
-    function passwordGuard(to: RouteLocationNormalized) {
-      if (!configs.remote || configs.remote === to.query.password)
+  function passwordGuard(to: RouteLocationNormalized) {
+    if (!configs.remote || configs.remote === to.query.password)
+      return true
+    if (configs.remote && to.query.password === undefined) {
+      // eslint-disable-next-line no-alert
+      const password = prompt('Enter password')
+      if (configs.remote === password)
         return true
-      if (configs.remote && to.query.password === undefined) {
-        // eslint-disable-next-line no-alert
-        const password = prompt('Enter password')
-        if (configs.remote === password)
-          return true
-      }
-      if (to.params.no)
-        return { path: `/${to.params.no}` }
-      return { path: '' }
     }
+    if (to.params.no)
+      return { path: `/${to.params.no}` }
+    return { path: '' }
+  }
 
+  if (__SLIDEV_FEATURE_PRESENTER__) {
     routes.push(
       {
         name: 'entry',
@@ -64,6 +64,17 @@ export default function setupRoutes() {
     )
   }
 
+  if (__SLIDEV_FEATURE_BROWSER_EXPORTER__) {
+    routes.push(
+      {
+        name: 'export',
+        path: '/export/:no?',
+        component: () => import('../pages/export.vue'),
+        beforeEnter: passwordGuard,
+      },
+    )
+  }
+
   routes.push(
     {
       name: 'play',

package/state/index.ts

@@ -26,6 +26,7 @@ export const currentCamera = useLocalStorage<string>('slidev-camera', 'default',
 export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { listenToStorageChanges: false })
 export const slideScale = useLocalStorage<number>('slidev-scale', 0)
 export const wakeLockEnabled = useLocalStorage('slidev-wake-lock', true)
+export const skipExportPdfTip = useLocalStorage('slidev-skip-export-pdf-tip', false)
 
 export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
 export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
@@ -40,7 +41,7 @@ export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1, { l
 
 export function togglePresenterLayout() {
   presenterLayout.value = presenterLayout.value + 1
-  if (presenterLayout.value > 2)
+  if (presenterLayout.value > 3)
     presenterLayout.value = 1
 }
 

package/styles/index.css

@@ -8,7 +8,9 @@ body,
   height: 100vh;
   height: calc(var(--vh, 1vh) * 100);
   overflow: hidden;
-  @apply font-sans;
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+  --uno: font-sans bg-main;
 }
 
 html {
@@ -17,11 +19,10 @@ html {
 
 .slidev-icon-btn {
   aspect-ratio: 1;
-  display: inline-block;
   user-select: none;
   outline: none;
   cursor: pointer;
-  @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
+  @apply inline-flex items-center justify-center opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
   @apply focus-visible:(opacity-100 outline outline-2 outline-offset-2 outline-black dark:outline-white);
   @apply md:p-2;
@@ -40,6 +41,10 @@ html {
   pointer-events: none;
 }
 
+.slidev-layout a.slidev-icon-btn {
+  @apply border-none hover:border-none hover:text-white;
+}
+
 .slidev-vclick-target {
   @apply transition-opacity duration-100;
 }
@@ -125,7 +130,7 @@ html {
   position: fixed;
 }
 
-#twoslash-container .v-popper__wrapper {
+#twoslash-container .v-popper__wrapper:not(.no-slide-scale > *) {
   transform: scale(calc(1 * var(--slidev-slide-scale)));
   transform-origin: 30px top;
 }

package/uno.config.ts

@@ -13,6 +13,9 @@ export default defineConfig({
   safelist: [
     '!opacity-0',
     'prose',
+    // See https://github.com/slidevjs/slidev/issues/1705
+    'grid-rows-[1fr_max-content]',
+    'grid-cols-[1fr_max-content]',
   ],
   shortcuts: {
     'bg-main': 'bg-white dark:bg-[#121212]',
@@ -27,6 +30,17 @@ export default defineConfig({
     'abs-b': 'absolute bottom-0 left-0 right-0',
     'abs-bl': 'absolute bottom-0 left-0',
     'abs-br': 'absolute bottom-0 right-0',
+
+    'z-drawing': 'z-10',
+    'z-camera': 'z-15',
+    'z-dragging': 'z-18',
+    'z-menu': 'z-20',
+    'z-label': 'z-40',
+    'z-nav': 'z-50',
+    'z-context-menu': 'z-60',
+    'z-modal': 'z-70',
+
+    'slidev-glass-effect': 'shadow-xl backdrop-blur-8 border border-main bg-main bg-opacity-75!',
   },
   // Slidev Specific Variants, probably extrat to a preset later
   variants: [

package/internals/PrintStyle.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { Slots } from 'vue'
-import { h } from 'vue'
-import { slideHeight, slideWidth } from '../env'
-
-function vStyle<Props>(props: Props, { slots }: { slots: Slots }) {
-  if (slots.default)
-    return h('style', slots.default())
-}
-</script>
-
-<template>
-  <vStyle>
-    @page { size: {{ slideWidth }}px {{ slideHeight }}px; margin: 0px; }
-  </vStyle>
-</template>