@slidev/client 0.48.0-beta.8 → 0.48.0

package/state/index.ts

@@ -5,6 +5,7 @@ import { slideAspect } from '../env'
 export const showRecordingDialog = ref(false)
 export const showInfoDialog = ref(false)
 export const showGotoDialog = ref(false)
+export const showOverview = ref(false)
 
 export const shortcutsEnabled = ref(true)
 export const breakpoints = useBreakpoints({
@@ -13,7 +14,7 @@ export const breakpoints = useBreakpoints({
 })
 export const windowSize = useWindowSize()
 export const magicKeys = useMagicKeys()
-export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect > 120)
+export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect.value > 120)
 export const fullscreen = useFullscreen(isClient ? document.body : null)
 
 export const activeElement = useActiveElement()
@@ -24,7 +25,6 @@ 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 showOverview = useLocalStorage('slidev-show-overview', false, { listenToStorageChanges: false })
 export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
 export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
 export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false, { listenToStorageChanges: false })

package/styles/code.css

@@ -44,9 +44,9 @@ html:not(.dark) .shiki span {
   overflow: auto;
 }
 
-.slidev-code .line.highlighted {
+.slidev-code .slidev-code-highlighted {
 }
-.slidev-code .line.dishonored {
+.slidev-code .slidev-code-dishonored {
   opacity: 0.3;
   pointer-events: none;
 }
@@ -59,7 +59,9 @@ html:not(.dark) .shiki span {
 .slidev-code-line-numbers .slidev-code code .line::before {
   content: counter(step);
   counter-increment: step;
-  @apply w-4 mr-6 inline-block text-right text-gray-400 dark:text-gray-600;
+  display: inline-block;
+  text-align: right;
+  --uno: w-4 mr-6 text-gray-400 dark-text-gray-600;
 }
 
 /* Inline Code */
@@ -67,7 +69,7 @@ html:not(.dark) .shiki span {
   font-size: 0.9em;
   background: var(--slidev-code-background);
   border-radius: var(--slidev-code-radius);
-  @apply font-light py-0.5 px-1.5;
+  --uno: font-light py-0.5 px-1.5;
 }
 
 .slidev-layout :not(pre) > code:before {
@@ -82,4 +84,6 @@ html:not(.dark) .shiki span {
 }
 
 /* CodeMirror */
-.CodeMirror pre.CodeMirror-placeholder { opacity: 0.4; }
+.CodeMirror pre.CodeMirror-placeholder {
+  opacity: 0.4;
+}

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;
   }
 
@@ -54,7 +55,9 @@
   }
 
   blockquote {
-    @apply text-sm px-2 py-1 bg-$prism-background text-$prism-foreground border-$slidev-theme-primary border-l rounded;
+    background: var(--slidev-code-background);
+    color: var(--slidev-code-foreground);
+    @apply text-sm px-2 py-1 border-primary border-l rounded;
   }
 
   blockquote > * {
@@ -66,7 +69,7 @@
   }
 
   tr {
-    @apply border-b border-gray-400 border-opacity-20;
+    @apply border-b border-main;
   }
 
   th {
@@ -74,26 +77,28 @@
   }
 
   a {
-    @apply border-current border-b border-dashed hover:text-$slidev-theme-primary hover:border-solid;
+    @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;
   }
 
   kbd {
-    @apply border border-gray-400 border-b-2 border-opacity-20 rounded;
+    @apply border border-main border-b-2 rounded;
     @apply bg-gray-400 bg-opacity-5 py-0.5 px-1 text-xs font-mono;
   }
 }
 
 .slidev-layout,
-[dir=ltr],
-.slidev-layout [dir=ltr] {
+[dir='ltr'],
+.slidev-layout [dir='ltr'] {
   h1 {
     @apply -ml-[0.05em] mr-0;
   }
@@ -107,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,6 +7,7 @@
   --slidev-code-line-height: 18px;
   --slidev-code-radius: 4px;
   --slidev-code-margin: 4px 0;
+  --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,15 +16,26 @@ 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-400/20',
+    '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',
     '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',
   },
+  // 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()