@slidev/client 0.32.4 → 0.33.0

package/internals/NavControls.vue

@@ -47,7 +47,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 <template>
   <nav ref="root" class="flex flex-col">
     <div
-      class="flex flex-wrap-reverse text-xl p-2 gap-1"
+      class="flex flex-wrap-reverse text-xl gap-0.5 p-1 lg:(gap-1 p-2)"
       :class="barStyle"
       @mouseleave="onMouseLeave"
     >

package/internals/NoteEditor.vue

@@ -3,6 +3,7 @@ import { ignorableWatch, onClickOutside } from '@vueuse/core'
 import { nextTick, ref, watch } from 'vue'
 import { currentSlideId } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
+import NoteViewer from './NoteViewer.vue'
 
 const props = defineProps({
   class: {
@@ -59,22 +60,13 @@ onClickOutside(input, () => {
 </script>
 
 <template>
-  <template v-if="!editing && note">
-    <div
-      v-if="info?.notesHTML"
-      class="prose overflow-auto outline-none"
-      :class="props.class"
-      @click="switchNoteEdit"
-      v-html="info?.notesHTML"
-    />
-    <div
-      v-else
-      class="prose overflow-auto outline-none"
-      :class="props.class"
-      @click="switchNoteEdit"
-      v-text="note"
-    />
-  </template>
+  <NoteViewer
+    v-if="!editing && note"
+    :class="props.class"
+    :note="note"
+    :note-html="info?.notesHTML"
+    @click="switchNoteEdit"
+  />
   <textarea
     v-else
     ref="input"

package/internals/NoteStatic.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { currentRoute } from '../logic/nav'
+import NoteViewer from './NoteViewer.vue'
+
+const props = defineProps<{
+  class?: string
+}>()
+
+const note = computed(() => currentRoute.value?.meta?.slide?.note)
+const noteHtml = computed(() => currentRoute.value?.meta?.slide?.notesHTML)
+</script>
+
+<template>
+  <NoteViewer
+    :class="props.class"
+    :note="note"
+    :note-html="noteHtml"
+  />
+</template>

package/internals/NoteViewer.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const props = defineProps<{
+  class?: string
+  noteHtml?: string
+  note?: string
+}>()
+
+defineEmits(['click'])
+</script>
+
+<template>
+  <div
+    v-if="noteHtml"
+    class="prose overflow-auto outline-none"
+    :class="props.class"
+    @click="$emit('click')"
+    v-html="noteHtml"
+  />
+  <div
+    v-else
+    class="prose overflow-auto outline-none"
+    :class="props.class"
+    @click="$emit('click')"
+    v-text="note"
+  />
+</template>

package/internals/Presenter.vue

@@ -14,6 +14,7 @@ import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
 import SlidesOverview from './SlidesOverview.vue'
 import NoteEditor from './NoteEditor.vue'
+import NoteStatic from './NoteStatic.vue'
 import Goto from './Goto.vue'
 import SlidesShow from './SlidesShow.vue'
 import SlideWrapper from './SlideWrapper'
@@ -83,7 +84,7 @@ onMounted(() => {
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container">
       <div class="grid-section top flex">
-        <img src="../assets/logo-title-horizontal.png" class="h-14 ml-2 py-2 my-auto">
+        <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:(h-14 py-2)">
         <div class="flex-auto" />
         <div
           class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
@@ -97,7 +98,7 @@ onMounted(() => {
           {{ timer }}
         </div>
       </div>
-      <div ref="main" class="grid-section main flex flex-col p-4" :style="themeVars">
+      <div ref="main" class="relative grid-section main flex flex-col p-2 lg:(p-4)" :style="themeVars">
         <SlideContainer
           key="main"
           class="h-full w-full"
@@ -106,8 +107,11 @@ onMounted(() => {
             <SlidesShow context="presenter" />
           </template>
         </SlideContainer>
+        <div class="context">
+          current
+        </div>
       </div>
-      <div class="grid-section next flex flex-col p-4">
+      <div class="relative grid-section next flex flex-col p-2 lg:(p-4)">
         <SlideContainer
           v-if="nextSlide"
           key="next"
@@ -123,9 +127,13 @@ onMounted(() => {
             context="previewNext"
           />
         </SlideContainer>
+        <div class="context">
+          next
+        </div>
       </div>
       <div class="grid-section note overflow-auto">
-        <NoteEditor class="w-full h-full p-4 overflow-auto" />
+        <NoteEditor v-if="__DEV__" class="w-full h-full overflow-auto p-2 lg:(p-4)" />
+        <NoteStatic v-else class="w-full h-full overflow-auto p-2 lg:(p-4)" />
       </div>
       <div class="grid-section bottom">
         <NavControls :persist="true" />
@@ -174,7 +182,20 @@ onMounted(() => {
     "bottom bottom";
 }
 
-@screen md {
+@media (max-aspect-ratio: 3/5) {
+  .grid-container {
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content 1fr 1fr 1fr min-content;
+    grid-template-areas:
+      "top"
+      "main"
+      "note"
+      "next"
+      "bottom";
+  }
+}
+
+@media (min-aspect-ratio: 1/1) {
   .grid-container {
     grid-template-columns: 1fr 1.1fr 0.9fr;
     grid-template-rows: min-content 1fr 2fr min-content;
@@ -209,4 +230,8 @@ onMounted(() => {
     grid-area: bottom;
   }
 }
+
+.context {
+  @apply absolute top-0 left-0 px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
+}
 </style>

package/internals/VerticalDivider.vue

@@ -1,3 +1,3 @@
 <template>
-  <div class="w-1px m-2 opacity-10 bg-current" />
+  <div class="w-1px opacity-10 bg-current m-1 lg:(m-2)" />
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.32.4",
+  "version": "0.33.0",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.5.2",
-    "@slidev/parser": "0.32.4",
-    "@slidev/types": "0.32.4",
+    "@slidev/parser": "0.33.0",
+    "@slidev/types": "0.33.0",
     "@vueuse/core": "^8.6.0",
     "@vueuse/head": "^0.7.6",
     "@vueuse/motion": "^2.0.0-beta.18",

package/routes.ts

@@ -59,6 +59,7 @@ declare module 'vue-router' {
       start: number
       end: number
       note?: string
+      notesHTML?: string
       id: number
       no: number
       filepath: string

package/styles/index.css

@@ -16,10 +16,16 @@ html {
 
 .icon-btn {
   @apply inline-block cursor-pointer select-none !outline-none;
-  @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-2;
+  @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
 }
 
+@screen md {
+  .icon-btn {
+    @apply p-2;
+  }
+}
+
 .icon-btn.shallow {
   @apply opacity-30
 }