feat: add export to pdf tip dialog

packages/client/internals/ExportPdfTip.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { skipExportPdfTip } from '../state'
+import Modal from './Modal.vue'
+
+const props = defineProps({
+  modelValue: {
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+const value = useVModel(props, 'modelValue', emit)
+
+function print() {
+  value.value = false
+  setTimeout(window.print, 100)
+}
+</script>
+
+<template>
+  <Modal v-model="value" class="px-6 py-4 flex flex-col gap-2">
+    <div class="flex gap-2 text-xl">
+      <div class="i-carbon:information my-auto" />Tips
+    </div>
+    <div>
+      Slidev will open your browser's built-in print dialog to export the slides as PDF. <br>
+      To export the slides correctly, please:
+      <ul class="list-disc my-4 pl-4">
+        <li> Choose "Save to PDF" as the Destination. </li>
+        <li> Choose "Default" as the Margin. </li>
+        <li> Toggle on "Print backgrounds". </li>
+      </ul>
+      <div class="mb-2 op-70 text-sm">
+        If you're encountering problems, please try the CLI or open an issue on GitHub.
+      </div>
+      <div class="form-check op-70">
+        <input
+          v-model="skipExportPdfTip"
+          name="record-camera"
+          type="checkbox"
+        >
+        <label for="record-camera" @click="skipExportPdfTip = !skipExportPdfTip">Don't show this dialog next time.</label>
+      </div>
+    </div>
+    <div class="flex my-1">
+      <button class="cancel" @click="value = false">
+        Cancel
+      </button>
+      <div class="flex-auto" />
+      <button @click="print">
+        Start
+      </button>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+button {
+  @apply bg-blue-400 text-white px-4 py-1 rounded border-b-2 border-blue-600;
+  @apply hover:(bg-blue-500 border-blue-700);
+}
+
+button.cancel {
+  @apply bg-gray-400 bg-opacity-50 text-white px-4 py-1 rounded border-b-2 border-main;
+  @apply hover:(bg-opacity-75 border-opacity-75);
+}
+
+.form-check {
+  @apply leading-5;
+
+  * {
+    @apply my-auto align-middle;
+  }
+
+  label {
+    @apply ml-1 text-sm select-none;
+  }
+}
+</style>

packages/client/pages/export.vue

@@ -11,8 +11,10 @@ import { useDarkMode } from '../composables/useDarkMode'
 import { useNav } from '../composables/useNav'
 import { injectionSlideScale } from '../constants'
 import { configs, slideHeight, slidesTitle, slideWidth } from '../env'
+import ExportPdfTip from '../internals/ExportPdfTip.vue'
 import PrintSlide from '../internals/PrintSlide.vue'
 import { startScreenshotSession } from '../logic/screenshot'
+import { skipExportPdfTip } from '../state'
 import Play from './play.vue'
 
 const { slides, isPrintWithClicks, hasNext, go, next, currentSlideNo, clicks, printRange } = useNav()
@@ -36,8 +38,14 @@ useHead({
 
 provideLocal(injectionSlideScale, scale)
 
+const showExportPdfTip = ref(false)
 function pdf() {
-  window.print()
+  if (skipExportPdfTip.value) {
+    window.print()
+  }
+  else {
+    showExportPdfTip.value = true
+  }
 }
 
 async function capturePngs() {
@@ -280,6 +288,7 @@ if (import.meta.hot) {
       </div>
     </div>
     <div id="twoslash-container" />
+    <ExportPdfTip v-model="showExportPdfTip" />
   </div>
 </template>
 

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

packages/slidev/node/cli.ts

@@ -10,7 +10,7 @@ import { verifyConfig } from '@slidev/parser'
 import equal from 'fast-deep-equal'
 import fs from 'fs-extra'
 import { getPort } from 'get-port-please'
-import { blue, bold, cyan, dim, gray, green, underline, yellow } from 'kolorist'
+import { blue, bold, cyan, dim, gray, green, lightCyan, underline, yellow } from 'kolorist'
 import openBrowser from 'open'
 import yargs from 'yargs'
 import { version } from '../package.json'
@@ -443,17 +443,16 @@ cli.command(
     const { exportSlides, getExportOptions } = await import('./commands/export')
     const port = await getPort(12445)
 
-    console.log('！！！')
     let warned = false
     for (const entryFile of entry as unknown as string) {
       const options = await resolveOptions({ entry: entryFile, theme }, 'export')
 
       if (options.data.config.exportingUI !== false && !warned) {
         warned = true
-        console.warn(yellow('[Slidev] Exporting via CLI is no longer recommended.'))
-        console.warn(
-          yellow('You can use the exporting UI instead by starting the dev server as normal and visit'),
-          `${blue('localhost:')}${dim('<port>')}${blue('/export')}`,
+        console.log(lightCyan('[Slidev] Try the new exporting UI!'))
+        console.log(
+          lightCyan('You can use the exporting UI instead by starting the dev server as normal and visit'),
+          `${blue('localhost:')}${dim('<port>')}${blue('/export')}\n`,
         )
       }