docs: sync (#235)

Author: kermanx

.vitepress/addons.ts

@@ -15,10 +15,20 @@ export const official: AddonInfo[] = [
 ]
 
 export const community: AddonInfo[] = [
+  {
+    id: 'slidev-addon-tldraw',
+    name: 'tldraw for Slidev',
+    description: 'Embed tldraw diagrams directly in Slidev, with in-slide editing support',
+    author: {
+      name: 'Albert Brand',
+      link: 'https://github.com/AlbertBrand',
+    },
+    repo: 'https://github.com/AlbertBrand/slidev-addon-tldraw',
+  },
   // Add yours here!
   {
     id: '',
-    link: 'https://github.com/slidevjs/docs/edit/main/.vitepress/addons.ts',
+    link: 'https://github.com/slidevjs/slidev/edit/main/docs/.vitepress/addons.ts',
     name: 'Yours?',
     description: '点击此处分享你的插件',
     author: {

.vitepress/scripts/prepare.js

@@ -202,6 +202,18 @@ export const showcases: ShowCaseInfo[] = [
     cover: 'https://github-production-user-asset-6210df.s3.amazonaws.com/7693264/284304324-db973b4c-a043-4644-932c-826169a1b4d8.gif',
     datetime: '2022-09-01',
   },
+  {
+    title: 'Comparison of Packaging Tools in 2023',
+    author: {
+      name: 'Peacock (Yoichi Takai)',
+      link: 'https://p3ac0ck.net',
+    },
+    at: 'PyCon APAC 2023',
+    slidesLink: 'https://slides.p3ac0ck.net/pyconapac2023/1',
+    sourceLink: 'https://github.com/peacock0803sz/slidev-slides/blob/7d41aa5e89ad8627cb68ae2cdbfe1681017b0408/talks/pyconapac2023/pyconapac2023.md',
+    cover: 'https://slides.p3ac0ck.net/pyconapac2023/cover.png',
+    datetime: '2023-10-28',
+  },
   {
     title: 'How Rust error handling ease web development',
     author: {

.vitepress/showcases.ts

@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-
 import TypeIt from 'typeit'
 import Markdown from 'markdown-it'
 import type { SlidevMarkdown } from '@slidev/types'
-
-import { parse } from '@slidev/parser'
+import { parseSync } from '@slidev/parser'
 import Cover from '@slidev/theme-default/layouts/cover.vue'
 import Default from '@slidev/client/layouts/default.vue'
 import Center from '@slidev/client/layouts/center.vue'
-import SlideContainer from '@slidev/client/internals/SlideContainer.vue'
+import SlideContainer from './SlideContainer.vue'
 import '@slidev/client/styles/layouts-base.css'
 import '@slidev/theme-default/styles/layouts.css'
 
@@ -38,7 +36,7 @@ watch([code, paused], () => {
   if (paused.value)
     return
   try {
-    info.value = parse(code.value)
+    info.value = parseSync(code.value, '')
   }
   catch {
   }

.vitepress/theme/components/Demo.vue

@@ -11,18 +11,23 @@ const resolved = computed(() => resolveLink(props.link))
 </script>
 
 <template>
-  <a class="link-card" :href="withBase(resolved.url)">
-    <div class="title">
-      <div>{{ resolved.title }}</div>
-      <div flex-grow />
-      <div flex gap-1>
-        <FeatureTag v-for="tag in resolved.tags" :key="tag" :tag />
+  <div class="sr-only">
+    {{ resolved.title }}
+  </div>
+  <ClientOnly>
+    <a class="link-card" :href="withBase(resolved.url)">
+      <div class="title">
+        <div>{{ resolved.title }}</div>
+        <div flex-grow />
+        <div flex gap-1>
+          <FeatureTag v-for="tag in resolved.tags" :key="tag" :tag />
+        </div>
       </div>
-    </div>
-    <div class="description">
-      {{ resolved.descripton }}
-    </div>
-  </a>
+      <div class="description">
+        {{ resolved.descripton }}
+      </div>
+    </a>
+  </ClientOnly>
 </template>
 
 <style scoped>

.vitepress/theme/components/LinkCard.vue

@@ -12,32 +12,35 @@ const resolved = computed(() => resolveLink(props.link))
 </script>
 
 <template>
-  <Tooltip class="inline-block" theme="twoslash">
-    <a
-      :href="withBase(resolved.url)"
-      target="_blank"
-      class="bg-$vp-c-default-soft hover:bg-$vp-c-brand-soft rounded px2 py1 !decoration-none"
-    >
-      {{ resolved.title }}
-    </a>
-
-    <template #popper>
+  <span class="sr-only">{{ resolved.title }}</span>
+  <ClientOnly>
+    <Tooltip class="inline-block" theme="twoslash">
       <a
         :href="withBase(resolved.url)"
         target="_blank"
-        flex flex-col p4 gap-2 max-w-100
+        class="bg-$vp-c-default-soft hover:bg-$vp-c-brand-soft rounded px2 py1 !decoration-none"
       >
-        <div flex gap-2>
-          <div>
-            {{ resolved.title }}
-          </div>
-          <div flex-grow />
-          <FeatureTag v-for="tag in resolved.tags" :key="tag" :tag :noclick="resolved.kind !== 'features'" text-xs />
-        </div>
-        <div op75 text-sm>
-          {{ resolved.descripton }}
-        </div>
+        {{ resolved.title }}
       </a>
-    </template>
-  </Tooltip>
+
+      <template #popper>
+        <a
+          :href="withBase(resolved.url)"
+          target="_blank"
+          flex flex-col p4 gap-2 max-w-100
+        >
+          <div flex gap-2>
+            <div>
+              {{ resolved.title }}
+            </div>
+            <div flex-grow />
+            <FeatureTag v-for="tag in resolved.tags" :key="tag" :tag :noclick="resolved.kind !== 'features'" text-xs />
+          </div>
+          <div op75 text-sm>
+            {{ resolved.descripton }}
+          </div>
+        </a>
+      </template>
+    </Tooltip>
+  </ClientOnly>
 </template>

.vitepress/theme/components/LinkInline.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+const slideAspect = 16 / 9
+const slideWidth = 980
+const slideHeight = 980 * 9 / 16
+
+const root = ref<HTMLDivElement>()
+const element = useElementSize(root)
+
+const width = computed(() => element.width.value)
+const height = computed(() => element.height.value)
+
+const screenAspect = computed(() => width.value / height.value)
+
+const scale = computed(() => {
+  if (screenAspect.value < slideAspect)
+    return width.value / slideWidth
+  return height.value * slideAspect / slideWidth
+})
+
+const style = computed(() => ({
+  height: `${slideHeight}px`,
+  width: `${slideWidth}px`,
+  transform: `translate(-50%, -50%) scale(${scale.value})`,
+}))
+</script>
+
+<template>
+  <div ref="root" class="slide-container">
+    <div class="slide-content" :style="style">
+      <slot />
+    </div>
+    <slot name="controls" />
+  </div>
+</template>
+
+<style lang="postcss">
+.slide-container {
+  @apply relative overflow-hidden;
+}
+
+.slide-content {
+  @apply relative overflow-hidden bg-main absolute left-1/2 top-1/2;
+}
+</style>

.vitepress/theme/components/SlideContainer.vue

@@ -7,7 +7,7 @@ function removeHash(link: string) {
 }
 
 function getGuideTitle(id: string) {
-  return Guides.find(g => g.link.endsWith(id))?.text ?? Advanced.find(g => g.link.endsWith(id))?.text ?? id
+  return Guides.find(g => g.link.endsWith(`/${id}`))?.text ?? Advanced.find(g => g.link.endsWith(id))?.text ?? id
 }
 
 export function resolveLink(link: string): {

.vitepress/utils.ts

@@ -74,6 +74,7 @@ npm run slidev -- --remote --port 8080 --open
 - `--dark` (`boolean`, 默认值: `false`): 导出为暗黑模式
 - `--with-clicks`, `-c` (`boolean`, 默认值: `false`): 为每次点击分别导出 (参考 https://cn.sli.dev/guide/animations.html#click-animations).
 - `--theme`, `-t` (`string`): 覆盖文件中设定的主题
+- `--omit-background` (`boolean`, default: `false`): 不导出浏览器默认的背景色
 
 ## `slidev format [entry]` {#format}
 

builtin/cli.md

@@ -9,8 +9,8 @@ declare module 'vue' {
   export interface GlobalComponents {
     AddonGallery: typeof import('./.vitepress/theme/components/AddonGallery.vue')['default']
     AddonInfo: typeof import('./.vitepress/theme/components/AddonInfo.vue')['default']
-    Arrow: typeof import('./.vitepress/@slidev/client/builtin/Arrow.vue')['default']
-    AutoFitText: typeof import('./.vitepress/@slidev/client/builtin/AutoFitText.vue')['default']
+    Arrow: typeof import('./node_modules/@slidev/client/builtin/Arrow.vue')['default']
+    AutoFitText: typeof import('./node_modules/@slidev/client/builtin/AutoFitText.vue')['default']
     'Carbon:chevronLeft': typeof import('~icons/carbon/chevron-left')['default']
     'Carbon:chevronRight': typeof import('~icons/carbon/chevron-right')['default']
     'Carbon:close': typeof import('~icons/carbon/close')['default']
@@ -39,7 +39,7 @@ declare module 'vue' {
     CarbonUserAvatar: typeof import('~icons/carbon/user-avatar')['default']
     CarbonUserSpeaker: typeof import('~icons/carbon/user-speaker')['default']
     CarbonVideo: typeof import('~icons/carbon/video')['default']
-    CodeBlockWrapper: typeof import('./.vitepress/@slidev/client/builtin/CodeBlockWrapper.vue')['default']
+    CodeBlockWrapper: typeof import('./node_modules/@slidev/client/builtin/CodeBlockWrapper.vue')['default']
     CodiconAdd: typeof import('~icons/codicon/add')['default']
     CodiconEye: typeof import('~icons/codicon/eye')['default']
     CodiconLock: typeof import('~icons/codicon/lock')['default']
@@ -52,37 +52,44 @@ declare module 'vue' {
     FeaturesAnimationInner: typeof import('./.vitepress/theme/components/FeaturesAnimationInner.vue')['default']
     FeaturesOverview: typeof import('./.vitepress/theme/components/FeaturesOverview.vue')['default']
     FeatureTag: typeof import('./.vitepress/theme/components/FeatureTag.vue')['default']
+    KaTexBlockWrapper: typeof import('./node_modules/@slidev/client/builtin/KaTexBlockWrapper.vue')['default']
     LandingPage: typeof import('./.vitepress/theme/components/LandingPage.vue')['default']
     Layout: typeof import('./.vitepress/theme/components/Layout.vue')['default']
-    Link: typeof import('./.vitepress/@slidev/client/builtin/Link.vue')['default']
+    LightOrDark: typeof import('./node_modules/@slidev/client/builtin/LightOrDark.vue')['default']
+    Link: typeof import('./node_modules/@slidev/client/builtin/Link.vue')['default']
     LinkCard: typeof import('./.vitepress/theme/components/LinkCard.vue')['default']
     LinkInline: typeof import('./.vitepress/theme/components/LinkInline.vue')['default']
     LogosVue: typeof import('~icons/logos/vue')['default']
     MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
-    Mermaid: typeof import('./.vitepress/@slidev/client/builtin/Mermaid.vue')['default']
-    Monaco: typeof import('./.vitepress/@slidev/client/builtin/Monaco.vue')['default']
-    PlantUml: typeof import('./.vitepress/@slidev/client/builtin/PlantUml.vue')['default']
-    RenderWhen: typeof import('./.vitepress/@slidev/client/builtin/RenderWhen.vue')['default']
+    Mermaid: typeof import('./node_modules/@slidev/client/builtin/Mermaid.vue')['default']
+    Monaco: typeof import('./node_modules/@slidev/client/builtin/Monaco.vue')['default']
+    PlantUml: typeof import('./node_modules/@slidev/client/builtin/PlantUml.vue')['default']
+    PoweredBySlidev: typeof import('./node_modules/@slidev/client/builtin/PoweredBySlidev.vue')['default']
+    RenderWhen: typeof import('./node_modules/@slidev/client/builtin/RenderWhen.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SeeAlso: typeof import('./.vitepress/theme/components/SeeAlso.vue')['default']
+    ShikiMagicMove: typeof import('./node_modules/@slidev/client/builtin/ShikiMagicMove.vue')['default']
     ShowCaseInfo: typeof import('./.vitepress/theme/components/ShowCaseInfo.vue')['default']
     ShowCases: typeof import('./.vitepress/theme/components/ShowCases.vue')['default']
     SimpleIconsGithub: typeof import('~icons/simple-icons/github')['default']
     SimpleIconsNpm: typeof import('~icons/simple-icons/npm')['default']
-    SlideCurrentNo: typeof import('./.vitepress/@slidev/client/builtin/SlideCurrentNo.vue')['default']
-    SlidesTotal: typeof import('./.vitepress/@slidev/client/builtin/SlidesTotal.vue')['default']
-    Starport: typeof import('vue-starport')['Starport']
-    StarportCarrier: typeof import('vue-starport')['StarportCarrier']
+    SlideContainer: typeof import('./.vitepress/theme/components/SlideContainer.vue')['default']
+    SlideCurrentNo: typeof import('./node_modules/@slidev/client/builtin/SlideCurrentNo.vue')['default']
+    SlidesTotal: typeof import('./node_modules/@slidev/client/builtin/SlidesTotal.vue')['default']
+    SlidevVideo: typeof import('./node_modules/@slidev/client/builtin/SlidevVideo.vue')['default']
     ThemeGallery: typeof import('./.vitepress/theme/components/ThemeGallery.vue')['default']
     ThemeInfo: typeof import('./.vitepress/theme/components/ThemeInfo.vue')['default']
     TheTweet: typeof import('./.vitepress/theme/components/TheTweet.vue')['default']
-    Toc: typeof import('./.vitepress/@slidev/client/builtin/Toc.vue')['default']
-    TocList: typeof import('./.vitepress/@slidev/client/builtin/TocList.vue')['default']
-    Transform: typeof import('./.vitepress/@slidev/client/builtin/Transform.vue')['default']
-    Tweet: typeof import('./.vitepress/@slidev/client/builtin/Tweet.vue')['default']
+    Toc: typeof import('./node_modules/@slidev/client/builtin/Toc.vue')['default']
+    TocList: typeof import('./node_modules/@slidev/client/builtin/TocList.vue')['default']
+    Transform: typeof import('./node_modules/@slidev/client/builtin/Transform.vue')['default']
+    Tweet: typeof import('./node_modules/@slidev/client/builtin/Tweet.vue')['default']
     TwemojiCatWithTearsOfJoy: typeof import('~icons/twemoji/cat-with-tears-of-joy')['default']
     UimRocket: typeof import('~icons/uim/rocket')['default']
-    Youtube: typeof import('./.vitepress/@slidev/client/builtin/Youtube.vue')['default']
+    VClickGap: typeof import('./node_modules/@slidev/client/builtin/VClickGap.vue')['default']
+    VDrag: typeof import('./node_modules/@slidev/client/builtin/VDrag.vue')['default']
+    VDragArrow: typeof import('./node_modules/@slidev/client/builtin/VDragArrow.vue')['default']
+    Youtube: typeof import('./node_modules/@slidev/client/builtin/Youtube.vue')['default']
   }
 }

components.d.ts

@@ -24,7 +24,7 @@ Slidev 已经内置了以下插件：
 ```ts twoslash
 /// <reference types="@slidev/types" />
 import type MarkdownIt from 'markdown-it'
-declare const MyPlugin: (md: MarkdownIt) => void
+declare const MyPlugin: (md: any) => void
 // ---cut---
 import { defineConfig } from 'vite'
 
@@ -37,7 +37,7 @@ export default defineConfig({
       /* markdown-it 的选项 */
       markdownItSetup(md) {
         /* 自定义的 markdown-it 插件 */
-        md.use(MyPlugin/* ... */)
+        md.use(MyPlugin, /* ... */)
       },
     },
     /* 其他插件的选项 */

custom/config-vite.md

@@ -1,6 +1,6 @@
 ---
 relates:
-  - Vue 的 <style scoped>: https://vue-loader.vuejs.org/guide/scoped-css.html
+  - Vue 的 Scoped CSS: https://vue-loader.vuejs.org/guide/scoped-css.html
   - UnoCSS directives: https://unocss.dev/transformers/directives
 tags: [样式, 语法]
 description: |

features/slide-scope-style.md

@@ -352,7 +352,7 @@ Slidev 内置了 [@vueuse/motion](https://motion.vueuse.org/)。你可以使用
 
 了解更多：[Demo](https://sli.dev/demo/starter/10) | [@vueuse/motion](https://motion.vueuse.org/) | [v-motion](https://motion.vueuse.org/features/directive-usage) | [Presets](https://motion.vueuse.org/features/presets)
 
-## Slide Transitions
+## Slide Transitions {#slide-transitions}
 
 <div id="pages-transitions" />
 

guide/animations.md

@@ -178,3 +178,21 @@ $ slidev export --executable-path [path_to_chromium]
 ```bash
 $ slidev export --with-toc
 ```
+
+### Omit Background
+
+When exporting to PNGs, you can remove the default browser background by passing `--omit-background`:
+
+```bash
+$ slidev export --omit-background
+```
+
+The default browser background is the white background visible on all browser windows and is different than other backgrounds applied throughout the application using CSS styling. [See Playwright docs](https://playwright.dev/docs/api/class-page#page-screenshot-option-omit-background). You will then need to apply additional CSS styling to the application to reveal the transparency.
+
+Here is a basic example that covers all backgrounds in the application:
+
+```css
+* {
+  background: transparent !important;
+}
+```

guide/exporting.md

@@ -26,7 +26,7 @@ $ slidev build --base /talks/my-cool-talk/
 
 参阅 [Vite 文档](https://cn.vitejs.dev/guide/build.html#public-base-path) 了解更多细节。
 
-### 输出目录 {#output}
+### 输出目录 {#output-directory}
 
 你可以通过 `--out` 选项更改输出目录：
 

guide/hosting.md

@@ -91,7 +91,7 @@ src: ./pages/4.md  # 本页只包含 frontmatter
 
 ## 备注 {#notes}
 
-每张幻灯片的末尾的注释块（若有），将被视为幻灯片的备注。它们将在 [演讲者模式](../guide/ui#presenter-mode) 中显示，以供您在演示过程中参考。
+每张幻灯片的末尾的注释块（若有），将被视为幻灯片的备注。它们将在 <LinkInline link="guide/ui#presenter-mode" /> 中显示，以供您在演示过程中参考。
 
 ```md {9,19-21}
 ---

guide/syntax.md

@@ -105,7 +105,7 @@ Slidev 以 Web 为平台的展示您的幻灯片，因此任何可以在 Web 应
 
 ## 尝试使用 Slidev
 
-动手尝试胜于千言万语。查看 <LinkInline link="guide/index"/> 指南，即刻创建您的第一个 Slidev 项目。
+动手尝试胜于千言万语。查看 <LinkInline link="guide/"/> 指南，即刻创建您的第一个 Slidev 项目。
 
 或者您也可以通过下方的视频进行快速预览: