@slidev/client 0.36.6 → 0.36.8

package/env.ts

@@ -7,7 +7,9 @@ import _configs from '/@slidev/configs'
 export const configs = _configs as SlidevConfig
 export const slideAspect = configs.aspectRatio ?? (16 / 9)
 export const slideWidth = configs.canvasWidth ?? 980
-export const slideHeight = Math.round(slideWidth / slideAspect)
+// To honor the aspect ratio more as possible, we need to approximate the height to the next integer.
+// Doing this, we will prevent on print, to create an additional empty white page after each page.
+export const slideHeight = Math.ceil(slideWidth / slideAspect)
 
 export const themeVars = computed(() => {
   return objectMap(configs.themeConfig || {}, (k, v) => [`--slidev-theme-${k}`, v])

package/internals/PresenterPrint.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useHead } from '@vueuse/head'
+import { computed } from '@vue/reactivity'
+import { rawRoutes, total } from '../logic/nav'
+import { configs, themeVars } from '../env'
+import NoteViewer from './NoteViewer.vue'
+
+useHead({ title: `Notes - ${configs.title}` })
+
+const slidesWithNote = computed(() => rawRoutes
+  .slice(0, -1)
+  .map(route => route.meta?.slide)
+  .filter(slide => slide !== undefined && slide.notesHTML !== ''))
+</script>
+
+<template>
+  <div id="page-root" :style="themeVars">
+    <div class="m-4">
+      <div class="mb-10">
+        <h1 class="text-4xl font-bold mt-2">
+          {{ configs.title }}
+        </h1>
+        <div class="opacity-50">
+          {{ new Date().toLocaleString() }}
+        </div>
+      </div>
+
+      <div v-for="(slide, index) of slidesWithNote" :key="index" class="flex flex-col gap-4">
+        <div>
+          <h2 class="text-lg">
+            <div class="font-bold flex gap-2">
+              <div class="opacity-50">
+                {{ slide?.no }}/{{ total }}
+              </div>
+              {{ slide?.title }}
+              <div class="flex-auto" />
+            </div>
+          </h2>
+          <NoteViewer :note-html="slide!.notesHTML" class="max-w-full" />
+        </div>
+        <hr v-if="index < slidesWithNote.length - 1" class="border-gray-400/50 mb-8">
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+@page {
+  size: A4;
+}
+</style>

package/internals/Print.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import type { Slots } from 'vue'
 import { h, watchEffect } from 'vue'
-import _configs from '/@slidev/configs'
 import { windowSize } from '../state'
 import { isPrintMode } from '../logic/nav'
-import { themeVars } from '../env'
+import { slideHeight, slideWidth, themeVars } from '../env'
 import PrintContainer from './PrintContainer.vue'
 
-const width = _configs.canvasWidth
-const height = Math.round(width / _configs.aspectRatio) + 1
-
 function vStyle<Props>(props: Props, { slots }: { slots: Slots }) {
   if (slots.default)
     return h('style', slots.default())
@@ -25,7 +21,7 @@ watchEffect(() => {
 
 <template>
   <vStyle>
-    @page { size: {{ width }}px {{ height }}px; margin: 0px; }
+    @page { size: {{ slideWidth }}px {{ slideHeight }}px; margin: 0px; }
   </vStyle>
   <div id="page-root" class="grid grid-cols-[1fr_max-content]" :style="themeVars">
     <PrintContainer

package/internals/PrintContainer.vue

@@ -46,9 +46,6 @@ provide(injectionSlideScale, scale)
 }
 
 .slide-container {
-  @apply relative;
-  position: relative;
-  overflow: hidden;
-  page-break-before: always;
+  @apply relative overflow-hidden break-after-page;
 }
 </style>

package/layouts/image-left.vue

@@ -15,7 +15,7 @@ const style = computed(() => handleBackground(props.image))
 </script>
 
 <template>
-  <div class="grid grid-cols-2 w-full h-full">
+  <div class="grid grid-cols-2 w-full h-full auto-rows-fr">
     <div class="w-full w-full" :style="style" />
     <div class="slidev-layout default" :class="props.class">
       <slot />

package/layouts/image-right.vue

@@ -15,7 +15,7 @@ const style = computed(() => handleBackground(props.image))
 </script>
 
 <template>
-  <div class="grid grid-cols-2 w-full h-full">
+  <div class="grid grid-cols-2 w-full h-full auto-rows-fr">
     <div class="slidev-layout default" :class="props.class">
       <slot />
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.36.6",
+  "version": "0.36.8",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,11 +16,11 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.5.2",
-    "@slidev/parser": "0.36.6",
-    "@slidev/types": "0.36.6",
+    "@slidev/parser": "0.36.8",
+    "@slidev/types": "0.36.8",
     "@unocss/reset": "^0.45.29",
     "@vueuse/core": "^9.3.0",
-    "@vueuse/head": "^0.9.7",
+    "@vueuse/head": "^0.9.8",
     "@vueuse/math": "^9.3.0",
     "@vueuse/motion": "^2.0.0-beta.23",
     "codemirror": "^5.65.5",
@@ -38,12 +38,12 @@
     "resolve": "^1.22.1",
     "unocss": "^0.45.29",
     "vite-plugin-windicss": "^1.8.8",
-    "vue": "^3.2.40",
+    "vue": "^3.2.41",
     "vue-router": "^4.1.5",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6"
   },
   "devDependencies": {
-    "vite": "^3.1.6"
+    "vite": "^3.1.8"
   }
 }

package/routes.ts

@@ -1,6 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import Play from './internals/Play.vue'
+import PresenterPrint from './internals/PresenterPrint.vue'
 import Print from './internals/Print.vue'
 // @ts-expect-error missing types
 import _rawRoutes from '/@slidev/routes'
@@ -20,6 +21,7 @@ export const routes: RouteRecordRaw[] = [
   { name: 'print', path: '/print', component: Print },
   { path: '', redirect: { path: '/1' } },
   { path: '/:pathMatch(.*)', redirect: { path: '/1' } },
+  { path: '/presenter/print', component: PresenterPrint },
   {
     name: 'presenter',
     path: '/presenter/:no',