@slidev/client 0.32.4 → 0.34.0

package/builtin/Mermaid.vue

@@ -59,5 +59,5 @@ watchEffect(() => {
 </script>
 
 <template>
-  <ShadowRoot class="mermaid" :inner-html="html" />
+  <ShadowRoot ref="el" class="mermaid" :inner-html="html" @shadow="el = $event" />
 </template>

package/internals/DrawingControls.vue

@@ -25,7 +25,8 @@ function setBrushColor(color: typeof brush.color) {
 
 <template>
   <Draggable
-    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 dark:(border border-gray-400 border-opacity-10)"
+    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200"
+    dark="border border-gray-400 border-opacity-10"
     :class="drawingEnabled ? '' : drawingPinned ? 'opacity-40 hover:opacity-90' : 'opacity-0 pointer-events-none'"
     storage-key="slidev-drawing-pos"
     :initial-x="10"

package/internals/Editor.vue

@@ -132,7 +132,7 @@ throttledWatch(
     @pointerdown="onHandlerDown"
   />
   <div
-    class="shadow bg-main p-4 grid grid-rows-[max-content,1fr] h-full overflow-hidden border-l border-gray-400 border-opacity-20"
+    class="shadow bg-main p-4 grid grid-rows-[max-content_1fr] h-full overflow-hidden border-l border-gray-400 border-opacity-20"
     :style="{ width: `${editorWidth}px` }"
   >
     <div class="flex pb-2 text-xl -mt-1">

package/internals/Goto.vue

@@ -56,7 +56,7 @@ watch(text, (t) => {
     :class="showGotoDialog ? 'top-5' : '-top-20'"
     shadow="~"
     p="x-4 y-2"
-    border="~ transparent rounded dark:(gray-400 opacity-25)"
+    border="~ transparent rounded dark:gray-400 dark:opacity-25"
   >
     <input
       ref="input"

package/internals/NavControls.vue

@@ -32,7 +32,7 @@ const onMouseLeave = () => {
 
 const barStyle = computed(() => props.persist
   ? 'text-$slidev-controls-foreground bg-transparent'
-  : 'rounded-md bg-main shadow dark:(border border-gray-400 border-opacity-10)',
+  : 'rounded-md bg-main shadow dark:border dark:border-gray-400 dark:border-opacity-10',
 )
 
 const RecordingControls = shallowRef<any>()
@@ -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 lg: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/Play.vue

@@ -40,7 +40,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 </script>
 
 <template>
-  <div id="page-root" ref="root" class="grid grid-cols-[1fr,max-content]" :style="themeVars">
+  <div id="page-root" ref="root" class="grid grid-cols-[1fr_max-content]" :style="themeVars">
     <SlideContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"

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 lg: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/Print.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ComponentCustomProps, Slots } from 'vue'
+import type { Slots } from 'vue'
 import { h, watchEffect } from 'vue'
 import _configs from '/@slidev/configs'
-import { slideScale, windowSize } from '../state'
+import { windowSize } from '../state'
 import { isPrintMode } from '../logic/nav'
 import { themeVars } from '../env'
 import PrintContainer from './PrintContainer.vue'
@@ -17,9 +17,9 @@ function vStyle<Props>(props: Props, { slots }: { slots: Slots }) {
 
 watchEffect(() => {
   if (isPrintMode)
-    document.body.parentNode.classList.add('print')
+    (document.body.parentNode as HTMLElement).classList.add('print')
   else
-    document.body.parentNode.classList.remove('print')
+    (document.body.parentNode as HTMLElement).classList.remove('print')
 })
 </script>
 
@@ -27,7 +27,7 @@ watchEffect(() => {
   <vStyle>
     @page { size: {{ width }}px {{ height }}px; margin: 0px; }
   </vStyle>
-  <div id="page-root" class="grid grid-cols-[1fr,max-content]" :style="themeVars">
+  <div id="page-root" class="grid grid-cols-[1fr_max-content]" :style="themeVars">
     <PrintContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"

package/internals/RecordingDialog.vue

@@ -88,7 +88,6 @@ async function start() {
 
 <style lang="postcss">
 .recording-dialog {
-
   .form-text {
     @apply flex flex-col;
 

package/internals/SelectList.vue

@@ -47,7 +47,7 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 }
 
 .item {
-  @apply flex rounded whitespace-nowrap py-1 px-4 cursor-default hover:(bg-gray-400 bg-opacity-10);
+  @apply flex rounded whitespace-nowrap py-1 px-4 cursor-default hover:bg-gray-400 hover:bg-opacity-10;
 
   svg {
     @apply mr-1 -ml-2 my-auto;

package/internals/ShadowRoot.vue

@@ -5,11 +5,17 @@ const props = defineProps<{
   innerHtml: string
 }>()
 
+const emit = defineEmits<{
+  (event: 'shadow', div: ShadowRoot): void
+}>()
+
 const el = ref<HTMLDivElement>()
 const shadow = computed(() => el.value ? (el.value.shadowRoot || el.value.attachShadow({ mode: 'open' })) : null)
 watchEffect(() => {
-  if (shadow.value)
+  if (shadow.value) {
+    emit('shadow', shadow.value)
     shadow.value.innerHTML = props.innerHtml
+  }
 })
 </script>
 

package/internals/SlidesOverview.vue

@@ -70,7 +70,7 @@ watchEffect(() => {
         class="relative"
       >
         <div
-          class="inline-block border border-gray-400 rounded border-opacity-50 overflow-hidden bg-main hover:(border-$slidev-theme-primary)"
+          class="inline-block border border-gray-400 rounded border-opacity-50 overflow-hidden bg-main hover:border-$slidev-theme-primary"
           :class="{ 'border-$slidev-theme-primary': focus(idx + 1) }"
           @click="go(+route.path)"
         >

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/internals/WebCamera.vue

@@ -77,7 +77,7 @@ onMounted(fixPosition)
 
     <div
       ref="handler"
-      class="absolute bottom-0 right-0 rounded-full bg-main shadow opacity-0 shadow z-30 hover:opacity-100 dark:(border border-true-gray-700)"
+      class="absolute bottom-0 right-0 rounded-full bg-main shadow opacity-0 shadow z-30 hover:opacity-100 dark:border dark:border-true-gray-700"
       :style="handleStyle"
       :class="handlerDown ? '!opacity-100' : ''"
     />

package/main.ts

@@ -6,11 +6,7 @@ import { router } from './routes'
 import createDirectives from './modules/directives'
 import createSlidevContext from './modules/context'
 
-import 'virtual:windi-base.css'
-import 'virtual:windi-components.css'
 import '/@slidev/styles'
-import 'virtual:windi-utilities.css'
-import 'virtual:windi-devtools'
 
 const app = createApp(App)
 app.use(router)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.32.4",
+  "version": "0.34.0",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,9 +16,10 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.5.2",
-    "@slidev/parser": "0.32.4",
-    "@slidev/types": "0.32.4",
-    "@vueuse/core": "^8.6.0",
+    "@slidev/parser": "0.34.0",
+    "@slidev/types": "0.34.0",
+    "@unocss/reset": "^0.42.0",
+    "@vueuse/core": "^8.7.5",
     "@vueuse/head": "^0.7.6",
     "@vueuse/motion": "^2.0.0-beta.18",
     "codemirror": "^5.65.5",
@@ -27,17 +28,18 @@
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
     "js-yaml": "^4.1.0",
-    "katex": "^0.15.6",
-    "mermaid": "^9.1.1",
+    "katex": "^0.16.0",
+    "mermaid": "^9.1.3",
     "monaco-editor": "^0.33.0",
-    "nanoid": "^3.3.4",
-    "prettier": "^2.6.2",
+    "nanoid": "^4.0.0",
+    "prettier": "^2.7.1",
     "recordrtc": "^5.6.2",
-    "resolve": "^1.22.0",
-    "vite-plugin-windicss": "^1.8.4",
-    "vue": "^3.2.36",
-    "vue-router": "^4.0.15",
-    "vue-starport": "^0.2.11",
-    "windicss": "^3.5.4"
+    "resolve": "^1.22.1",
+    "unocss": "^0.42.0",
+    "vite-plugin-windicss": "^1.8.6",
+    "vue": "^3.2.37",
+    "vue-router": "^4.0.16",
+    "vue-starport": "^0.3.0",
+    "windicss": "^3.5.5"
   }
 }

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/setup/shortcuts.ts

@@ -1,7 +1,7 @@
 /* __imports__ */
 
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
-import { downloadPDF, next, nextSlide, prev, prevSlide } from '../logic/nav'
+import { downloadPDF, go, next, nextSlide, prev, prevSlide } from '../logic/nav'
 import { toggleDark } from '../logic/dark'
 import { showGotoDialog, showOverview, toggleOverview } from '../state'
 import { drawingEnabled } from '../logic/drawings'
@@ -14,6 +14,7 @@ export default function setupShortcuts() {
     prev,
     nextSlide,
     prevSlide,
+    go,
     downloadPDF,
     toggleDark,
     toggleOverview,

package/shim.d.ts

@@ -2,7 +2,7 @@ declare interface Window {
   // extend the window
 }
 
-// with vite-plugin-md, markdowns can be treat as Vue components
+// with vite-plugin-vue-markdown, markdowns can be treat as Vue components
 declare module '*.md' {
   import type { ComponentOptions } from 'vue'
   const component: ComponentOptions

package/styles/code.css

@@ -41,12 +41,12 @@ html:not(.dark) .shiki-dark {
   @apply w-4 mr-6 inline-block text-right text-gray-400 dark:text-gray-600
 }
 
-// revert windicss preflight for katex
+/* revert windicss preflight for katex */
 .katex,
 .katex :after,
 .katex :before {
   border-color: currentColor;
 }
 
-// codemirror
+/* codemirror */
 .CodeMirror pre.CodeMirror-placeholder { opacity: 0.4; }

package/styles/index.css

@@ -8,6 +8,7 @@ body,
   height: 100vh;
   height: calc(var(--vh, 1vh) * 100);
   overflow: hidden;
+  @apply font-sans;
 }
 
 html {
@@ -16,10 +17,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
 }

package/styles/layouts-base.css

@@ -70,7 +70,7 @@
   }
 
   a {
-    @apply border-current border-b border-dashed hover:(text-$slidev-theme-primary border-solid);
+    @apply border-current border-b border-dashed hover:text-$slidev-theme-primary hover:border-solid;
   }
 
   td, th {

package/uno.config.ts

@@ -0,0 +1,34 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  safelist: [
+    '!opacity-0',
+    'prose',
+  ],
+  shortcuts: {
+    'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
+    'abs-tl': 'absolute top-0 left-0',
+    'abs-tr': 'absolute top-0 right-0',
+    'abs-b': 'absolute bottom-0 left-0 right-0',
+    'abs-bl': 'absolute bottom-0 left-0',
+    'abs-br': 'absolute bottom-0 right-0',
+  },
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons(),
+    presetTypography(),
+  ],
+  transformers: [
+    transformerDirectives({ enforce: 'pre' }),
+    transformerVariantGroup(),
+  ],
+})

package/windi.config.ts

@@ -40,6 +40,7 @@ export default defineConfig({
     ],
   },
   plugins: [
+    // @ts-expect-error casing
     typography,
   ],
   safelist: [