@slidev/client 0.48.0-beta.2 → 0.48.0-beta.20

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/monaco.css

@@ -0,0 +1,27 @@
+div[widgetid='messageoverlay'] {
+  transform: translateY(calc(100% * (var(--slidev-slide-scale) - 1)));
+}
+
+.slidev-monaco-container {
+  position: relative;
+  margin: var(--slidev-code-margin);
+  padding: var(--slidev-code-padding);
+  line-height: var(--slidev-code-line-height);
+  border-radius: var(--slidev-code-radius);
+  background: var(--slidev-code-background);
+}
+
+.slidev-monaco-container .monaco-editor {
+  --monaco-monospace-font: var(--slidev-code-font-family);
+  --vscode-editor-background: var(--slidev-code-background);
+  --vscode-editorGutter-background: var(--slidev-code-background);
+}
+
+/** Revert styles */
+.slidev-monaco-container .monaco-editor a {
+  border-bottom: none;
+}
+
+.slidev-monaco-container .monaco-editor a:hover {
+  border-bottom: none;
+}

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/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,88 +0,0 @@
-<script setup lang="ts">
-import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
-import { ref, watch, watchEffect } from 'vue'
-import { currentSlideId } from '../logic/nav'
-import { useDynamicSlideInfo } from '../logic/note'
-import NoteDisplay from './NoteDisplay.vue'
-
-const props = defineProps({
-  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(currentSlideId)
-
-const note = ref('')
-let timer: any
-
-const { ignoreUpdates } = ignorableWatch(
-  note,
-  (v) => {
-    const id = currentSlideId.value
-    clearTimeout(timer)
-    timer = setTimeout(() => {
-      update({ raw: null!, note: v }, id)
-    }, 500)
-  },
-)
-
-watch(
-  info,
-  (v) => {
-    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-50']"
-    :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-green border-2"
-    style="line-height: 1.75;"
-    :style="props.style"
-    :class="props.class"
-    :placeholder="placeholder"
-    @keydown.esc=" editing = false"
-    @focus="editing = true"
-  />
-</template>