@slidev/client 0.48.0-beta.9 → 0.48.0

package/styles/index.css

@@ -16,22 +16,27 @@ html {
 }
 
 .slidev-icon-btn {
-  @apply inline-block cursor-pointer select-none !outline-none;
+  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 hover:(opacity-100 bg-gray-400 bg-opacity-10);
   @apply md:p-2;
 }
 
 .slidev-icon-btn.shallow {
-  @apply opacity-30
+  opacity: 0.3;
 }
 
 .slidev-icon-btn.active {
-  @apply opacity-100
+  opacity: 1;
 }
 
 .slidev-icon-btn.disabled {
-  @apply opacity-25 pointer-events-none;
+  opacity: 0.25;
+  pointer-events: none;
 }
 
 .slidev-vclick-target {
@@ -39,11 +44,13 @@ html {
 }
 
 .slidev-vclick-hidden {
-  @apply !opacity-0 !pointer-events-none;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  user-select: none !important;
 }
 
 .slidev-vclick-fade {
-  @apply opacity-50;
+  opacity: 0.5;
 }
 
 .slidev-icon {
@@ -53,7 +60,56 @@ html {
 }
 
 .slidev-page {
-  @apply absolute top-0 left-0 right-0 w-full relative;
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+}
+
+/* Note Clicks */
+
+.slidev-note-with-clicks .slidev-note-fade {
+  color: #888888ab;
+}
+
+.slidev-note-click-mark {
+  user-select: none;
+  font-size: 0.7em;
+  display: inline-flex;
+  --uno: text-violet bg-violet/10 px1 font-mono rounded items-center border
+    border-transparent;
+}
+.slidev-note-click-mark.slidev-note-click-mark-active {
+  --uno: border border-violet;
+}
+.slidev-note-click-mark.slidev-note-click-mark-past {
+  filter: saturate(0);
+  opacity: 0.5;
+}
+.slidev-note-click-mark.slidev-note-click-mark-future {
+  opacity: 0.5;
+}
+
+.slidev-note-click-mark::before {
+  content: '';
+  display: inline-block;
+  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M23 28a1 1 0 0 1-.71-.29l-6.13-6.14l-3.33 5a1 1 0 0 1-1 .44a1 1 0 0 1-.81-.7l-6-20A1 1 0 0 1 6.29 5l20 6a1 1 0 0 1 .7.81a1 1 0 0 1-.44 1l-5 3.33l6.14 6.13a1 1 0 0 1 0 1.42l-4 4A1 1 0 0 1 23 28m0-2.41L25.59 23l-7.16-7.15l5.25-3.5L7.49 7.49l4.86 16.19l3.5-5.25Z'/%3E%3C/svg%3E");
+  -webkit-mask: var(--un-icon) no-repeat;
+  mask: var(--un-icon) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  background-color: currentColor;
+  color: inherit;
+  width: 1.2em;
+  height: 1.2em;
+  opacity: 0.8;
+}
+
+.slidev-note-click-mark::after {
+  content: attr(data-clicks);
+  display: inline-block;
+  transform: translateY(0.1em);
 }
 
 /* Transform the position back for Rough Notation (v-mark) */

package/styles/katex.css

@@ -2,4 +2,4 @@
 }
 .slidev-katex-wrapper .mord.dishonored {
   opacity: 0.3;
-}
+}

package/styles/layouts-base.css

@@ -1,7 +1,8 @@
 .slidev-layout {
   @apply px-14 py-10 text-[1.1rem] h-full;
 
-  pre, code {
+  pre,
+  code {
     @apply select-text;
   }
 
@@ -79,11 +80,13 @@
     @apply border-current border-b border-dashed hover:text-primary hover:border-solid;
   }
 
-  td, th {
+  td,
+  th {
     @apply p-2 py-3;
   }
 
-  b, strong {
+  b,
+  strong {
     @apply font-600;
   }
 
@@ -94,8 +97,8 @@
 }
 
 .slidev-layout,
-[dir=ltr],
-.slidev-layout [dir=ltr] {
+[dir='ltr'],
+.slidev-layout [dir='ltr'] {
   h1 {
     @apply -ml-[0.05em] mr-0;
   }
@@ -109,10 +112,10 @@
   }
 }
 
-[dir=rtl],
-.slidev-layout [dir=rtl] {
+[dir='rtl'],
+.slidev-layout [dir='rtl'] {
   h1 {
-    @apply -mr-[0.05em] ml-0; 
+    @apply -mr-[0.05em] ml-0;
   }
 
   h6 {

package/styles/shiki-twoslash.css

@@ -11,7 +11,7 @@
 }
 
 .twoslash-popup-container {
-  font-size: calc(13px * var(--slidev-slide-scale, 1));
+  font-size: 13px;
 }
 
 .twoslash-popup-container .twoslash-popup-code {

package/styles/vars.css

@@ -7,7 +7,7 @@
   --slidev-code-line-height: 18px;
   --slidev-code-radius: 4px;
   --slidev-code-margin: 4px 0;
-  --slidev-theme-primary: #3AB9D5;
+  --slidev-theme-primary: #3ab9d5;
 
   --slidev-transition-duration: 0.5s;
   --slidev-slide-container-background: black;

package/uno.config.ts

@@ -8,6 +8,7 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
+import { variantMatcher } from '@unocss/preset-mini/utils'
 
 export default defineConfig({
   safelist: [
@@ -15,9 +16,10 @@ export default defineConfig({
     'prose',
   ],
   shortcuts: {
-    'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
+    'bg-main': 'bg-white dark:bg-[#121212]',
     'bg-active': 'bg-gray-400/10',
     'border-main': 'border-gray/20',
+    'text-main': 'text-[#181818] dark:text-[#ddd]',
     'text-primary': 'color-$slidev-theme-primary',
     'bg-primary': 'bg-$slidev-theme-primary',
     'border-primary': 'border-$slidev-theme-primary',
@@ -27,6 +29,13 @@ export default defineConfig({
     'abs-bl': 'absolute bottom-0 left-0',
     'abs-br': 'absolute bottom-0 right-0',
   },
+  // Slidev Specific Variants, probably extrat to a preset later
+  variants: [
+    // `forward:` and `backward:` variant to selectively apply styles based on the direction of the slide
+    // For example, `forward:text-red` will only apply to the slides that are navigated forward
+    variantMatcher('forward', input => ({ prefix: `.slidev-nav-go-forward ${input.prefix}` })),
+    variantMatcher('backward', input => ({ prefix: `.slidev-nav-go-backward ${input.prefix}` })),
+  ],
   presets: [
     presetUno(),
     presetAttributify(),

package/utils.ts

@@ -1,6 +1,7 @@
-import type { RouteRecordRaw } from 'vue-router'
+import type { SlideRoute } from '@slidev/types'
+import { configs } from './env'
 
-export function getSlideClass(route?: RouteRecordRaw, extra = '') {
+export function getSlideClass(route?: SlideRoute, extra = '') {
   const classes = ['slidev-page', extra]
 
   const no = route?.meta?.slide?.no
@@ -9,3 +10,15 @@ export function getSlideClass(route?: RouteRecordRaw, extra = '') {
 
   return classes.filter(Boolean).join(' ')
 }
+
+export async function downloadPDF() {
+  const { saveAs } = await import('file-saver')
+  saveAs(
+    typeof configs.download === 'string'
+      ? configs.download
+      : configs.exportFilename
+        ? `${configs.exportFilename}.pdf`
+        : `${import.meta.env.BASE_URL}slidev-exported.pdf`,
+    `${configs.title}.pdf`,
+  )
+}

package/composables/useContext.ts

@@ -1,17 +0,0 @@
-import type { ComputedRef } from 'vue'
-import { computed } from 'vue'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import type { SlidevContext } from '../modules/context'
-import { configs } from '../env'
-import { useNav } from './useNav'
-
-export function useContext(
-  route: ComputedRef<RouteLocationNormalizedLoaded>,
-): SlidevContext {
-  const nav = useNav(route)
-  return {
-    nav,
-    configs,
-    themeConfigs: computed(() => configs.themeConfig),
-  }
-}

package/composables/useTweetScript.ts

@@ -1,17 +0,0 @@
-import { createSharedComposable, useScriptTag } from '@vueuse/core'
-import type { ComponentInternalInstance } from 'vue'
-import { onMounted } from 'vue'
-
-export const useTweetScript = createSharedComposable(
-  (vm: ComponentInternalInstance, create: () => void) =>
-    useScriptTag(
-      'https://platform.twitter.com/widgets.js',
-      () => {
-        if (vm.isMounted)
-          create()
-        else
-          onMounted(create, vm)
-      },
-      { async: true },
-    ),
-)

package/iframes/monaco/index.css

@@ -1,28 +0,0 @@
-html,
-body,
-#container {
-  padding: 0;
-  margin: 0;
-  background: var(--slidev-code-background);
-  width: 100%;
-  height: 200%;
-}
-
-#container {
-  padding: var(--slidev-code-padding);
-  margin: var(--slidev-code-margin);
-  border-radius: var(--slidev-code-radius);
-}
-
-.monaco-editor .monaco-hover {
-  border-radius: var(--slidev-code-radius);
-  overflow: hidden;
-  border: none;
-  outline: none;
-}
-
-.monaco-editor .lines-content,
-.monaco-editor .view-line,
-.monaco-editor .view-lines {
-  user-select: none;
-}

package/iframes/monaco/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<html>
-<body>
-  <div id="container"></div>
-  <script type="module" src="./index.ts"></script>
-</body>
-</html>

package/iframes/monaco/index.ts

@@ -1,260 +0,0 @@
-import '/@slidev/styles'
-import './index.css'
-
-import type * as monaco from 'monaco-editor'
-import { formatCode } from '../../setup/prettier'
-import setupMonaco from '../../setup/monaco'
-import '/@slidev/monaco-types'
-
-const url = new URL(location.href)
-const props = {
-  id: url.searchParams.get('id'),
-  code: '',
-  diff: '',
-  lang: url.searchParams.get('lang') ?? 'typescript',
-  readonly: false,
-  lineNumbers: url.searchParams.get('lineNumbers') ?? 'off',
-  dark: false,
-  style: '',
-  editorOptions: {},
-}
-
-const styleObject = document.createElement('style')
-let originalEditor: monaco.editor.IStandaloneCodeEditor
-let modifiedEditor: monaco.editor.IStandaloneCodeEditor
-let format: () => void = () => { }
-let update: () => void = () => { }
-
-document.body.appendChild(styleObject)
-
-function lang() {
-  switch (props.lang) {
-    case 'ts':
-    case 'tsx':
-      return 'typescript'
-    case 'jsx':
-    case 'js':
-      return 'javascript'
-    default:
-      return props.lang
-  }
-}
-
-function ext() {
-  switch (lang()) {
-    case 'typescript':
-      return 'ts'
-    case 'javascript':
-      return 'js'
-    default:
-      return lang()
-  }
-}
-
-function post(data: any, type = 'slidev-monaco') {
-  if (window.parent === window)
-    return
-
-  window.parent.postMessage(
-    {
-      type,
-      id: props.id,
-      data,
-    },
-    location.origin,
-  )
-}
-
-async function start() {
-  const { monaco, theme = {}, editorOptions = {} } = await setupMonaco()
-
-  const style = getComputedStyle(document.documentElement)
-  const container = document.getElementById('container')!
-
-  const model = monaco.editor.createModel(
-    props.code,
-    lang(),
-    monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`),
-  )
-
-  if (url.searchParams.get('diff')) {
-    // Diff editor
-    const diffModel = monaco.editor.createModel(
-      props.diff,
-      lang(),
-      monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`),
-    )
-    const monacoEditor = monaco.editor.createDiffEditor(container, {
-      fontSize: +style.getPropertyValue('--slidev-code-font-size').replace(/px/g, ''),
-      fontFamily: style.getPropertyValue('--slidev-code-font-family'),
-      lineHeight: +style.getPropertyValue('--slidev-code-line-height').replace(/px/g, ''),
-      lineDecorationsWidth: 0,
-      lineNumbersMinChars: 0,
-      scrollBeyondLastLine: false,
-      scrollBeyondLastColumn: 0,
-      automaticLayout: true,
-      readOnly: props.readonly,
-      theme: 'vitesse-dark',
-      lineNumbers: props.lineNumbers as any,
-      glyphMargin: false,
-      scrollbar: {
-        useShadows: false,
-        vertical: 'hidden',
-        horizontal: 'hidden',
-      },
-      overviewRulerLanes: 0,
-      minimap: { enabled: false },
-      enableSplitViewResizing: false,
-      renderOverviewRuler: false,
-      // renderSideBySide: false,
-      ...editorOptions,
-    })
-    monacoEditor.setModel({
-      original: model,
-      modified: diffModel,
-    })
-    originalEditor = monacoEditor.getOriginalEditor()
-    modifiedEditor = monacoEditor.getModifiedEditor()
-
-    format = async () => {
-      model.setValue((await formatCode(props.code, lang())).trim())
-      diffModel.setValue((await formatCode(props.diff, lang())).trim())
-    }
-
-    // ctrl+s to format
-    originalEditor.onKeyDown((e) => {
-      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
-        e.preventDefault()
-        format()
-      }
-    })
-    modifiedEditor.onKeyDown((e) => {
-      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
-        e.preventDefault()
-        format()
-      }
-    })
-
-    update = () => {
-      monaco.editor.setTheme(props.dark
-        ? (theme.dark || 'vitesse-dark')
-        : (theme.light || 'vitesse-light'))
-      styleObject.innerHTML = `:root { ${props.style} }`
-
-      if (originalEditor.getValue().toString() !== props.code) {
-        const selection = originalEditor.getSelection()
-        originalEditor.setValue(props.code)
-        if (selection)
-          originalEditor.setSelection(selection)
-      }
-      originalEditor.updateOptions(props.editorOptions)
-
-      if (modifiedEditor.getValue().toString() !== props.diff) {
-        const selection = modifiedEditor.getSelection()
-        modifiedEditor.setValue(props.diff)
-        if (selection)
-          modifiedEditor.setSelection(selection)
-      }
-      modifiedEditor.updateOptions(props.editorOptions)
-    }
-
-    diffModel.onDidChangeContent(() => {
-      onCodeChange(diffModel.getValue().toString())
-    })
-
-    function onCodeChange(diff: string) {
-      props.diff = diff
-      post({ diff })
-    }
-  }
-  else {
-    // Normal editor
-    originalEditor = monaco.editor.create(container, {
-      model,
-      tabSize: 2,
-      insertSpaces: true,
-      detectIndentation: false,
-      folding: false,
-      fontSize: +style.getPropertyValue('--slidev-code-font-size').replace(/px/g, ''),
-      fontFamily: style.getPropertyValue('--slidev-code-font-family'),
-      lineHeight: +style.getPropertyValue('--slidev-code-line-height').replace(/px/g, ''),
-      lineDecorationsWidth: 0,
-      lineNumbersMinChars: 0,
-      scrollBeyondLastLine: false,
-      scrollBeyondLastColumn: 0,
-      automaticLayout: true,
-      readOnly: props.readonly,
-      theme: 'vitesse-dark',
-      lineNumbers: props.lineNumbers as any,
-      glyphMargin: false,
-      scrollbar: {
-        useShadows: false,
-        vertical: 'hidden',
-        horizontal: 'hidden',
-      },
-      overviewRulerLanes: 0,
-      minimap: { enabled: false },
-      ...editorOptions,
-    })
-
-    format = async () => {
-      model.setValue((await formatCode(props.code, lang())).trim())
-    }
-
-    // ctrl+s to format
-    originalEditor.onKeyDown((e) => {
-      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
-        e.preventDefault()
-        format()
-      }
-    })
-
-    update = () => {
-      monaco.editor.setTheme(props.dark
-        ? (theme.dark || 'vitesse-dark')
-        : (theme.light || 'vitesse-light'))
-      styleObject.innerHTML = `:root { ${props.style} }`
-
-      if (originalEditor.getValue().toString() !== props.code) {
-        const selection = originalEditor.getSelection()
-        originalEditor.setValue(props.code)
-        if (selection)
-          originalEditor.setSelection(selection)
-      }
-      originalEditor.updateOptions(props.editorOptions)
-    }
-  }
-
-  originalEditor.onDidContentSizeChange(() => {
-    post({ height: Math.max(originalEditor.getContentHeight(), modifiedEditor?.getContentHeight() ?? 0) })
-  })
-
-  model.onDidChangeContent(() => {
-    onCodeChange(model.getValue().toString())
-  })
-
-  function onCodeChange(code: string) {
-    props.code = code
-    post({ code })
-  }
-
-  update()
-
-  post({}, 'slidev-monaco-loaded')
-}
-
-window.addEventListener('message', (payload) => {
-  if (payload.source === window)
-    return
-  if (payload.origin !== location.origin)
-    return
-  if (typeof payload.data !== 'string')
-    return
-  const { type, data, id } = JSON.parse(payload.data)
-  if (type === 'slidev-monaco' && id === props.id) {
-    Object.assign(props, data)
-    update()
-  }
-})
-
-start()

package/internals/NoteEditor.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
-import { ref, watch, watchEffect } from 'vue'
-import { useDynamicSlideInfo } from '../logic/note'
-import NoteDisplay from './NoteDisplay.vue'
-
-const props = defineProps({
-  no: {
-    type: Number,
-  },
-  class: {
-    default: '',
-  },
-  editing: {
-    default: false,
-  },
-  style: {
-    default: () => ({}),
-  },
-  placeholder: {
-    default: 'No notes for this slide',
-  },
-})
-
-const emit = defineEmits([
-  'update:editing',
-])
-const editing = useVModel(props, 'editing', emit, { passive: true })
-
-const { info, update } = useDynamicSlideInfo(props.no)
-
-const note = ref('')
-let timer: any
-
-const { ignoreUpdates } = ignorableWatch(
-  note,
-  (v) => {
-    const id = props.no
-    clearTimeout(timer)
-    timer = setTimeout(() => {
-      update({ note: v }, id)
-    }, 500)
-  },
-)
-
-watch(
-  info,
-  (v) => {
-    if (editing.value)
-      return
-    clearTimeout(timer)
-    ignoreUpdates(() => {
-      note.value = v?.note || ''
-    })
-  },
-  { immediate: true, flush: 'sync' },
-)
-
-const input = ref<HTMLTextAreaElement>()
-
-watchEffect(() => {
-  if (editing.value)
-    input.value?.focus()
-})
-
-onClickOutside(input, () => {
-  editing.value = false
-})
-</script>
-
-<template>
-  <NoteDisplay
-    v-if="!editing"
-    class="my--4 border-transparent border-2"
-    :class="[props.class, note ? '' : 'opacity-25 italic select-none']"
-    :style="props.style"
-    :note="note || placeholder"
-    :note-html="info?.noteHTML"
-  />
-  <textarea
-    v-else
-    ref="input"
-    v-model="note"
-    class="prose resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
-    style="line-height: 1.75;"
-    :style="props.style"
-    :class="props.class"
-    :placeholder="placeholder"
-    @keydown.esc=" editing = false"
-    @focus="editing = true"
-  />
-</template>