Merge branch 'main' into tonai-addons

demo/composable-vue/components/DarkToggle.vue

@@ -10,8 +10,8 @@ const { isDark, toggleDark } = useDarkMode()
     @click="toggleDark()"
   >
     <div class="flex">
-      <carbon:moon v-if="isDark" />
-      <carbon:sun v-else />
+      <div v-if="isDark" class="i-carbon:moon" />
+      <div v-else class="i-carbon:sun" />
       <span class="mr-1 ml-2">{{ isDark ? 'Dark' : 'Light' }}</span>
     </div>
   </button>

demo/starter/slides.md

@@ -29,14 +29,14 @@ overviewSnapshots: true
 Presentation slides for developers
 
 <div class="pt-12">
-  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
-    Press Space for next page <carbon:arrow-right class="inline"/>
+  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" flex="~ justify-center items-center gap-2" hover="bg-white bg-opacity-10">
+    Press Space for next page <div class="i-carbon:arrow-right inline-block"/>
   </span>
 </div>
 
 <div class="abs-br m-6 flex gap-2">
   <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
-    <carbon:edit />
+    <div class="i-carbon:edit" />
   </button>
   <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" title="Open in GitHub"
     class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
@@ -577,7 +577,7 @@ Double-click on the draggable elements to edit their positions.
 
 ```md
 <v-drag text-3xl>
-  <carbon:arrow-up />
+  <div class="i-carbon:arrow-up" />
   Use the `v-drag` component to have a draggable container!
 </v-drag>
 ```

docs/.vitepress/theme/components/Demo.vue

@@ -128,7 +128,7 @@ onMounted(play)
       </div>
 
       <div v-if="completed" class="absolute text-xs right-1 top-1 icon-btn opacity-50" title="Replay" @click="play()">
-        <carbon:reset />
+        <div class="i-carbon:reset" />
       </div>
 
       <div class="language-md !bg-transparent px4 py1">
@@ -158,10 +158,10 @@ onMounted(play)
         opacity="0 hover:100"
       >
         <div class="icon-btn" :class="{ disabled: page === 0 }" @click="page = 0">
-          <carbon:chevron-left />
+          <div class="i-carbon:chevron-left" />
         </div>
         <div class="icon-btn" :class="{ disabled: page === 1 }" @click="page = 1">
-          <carbon:chevron-right />
+          <div class="i-carbon:chevron-right" />
         </div>
       </div>
     </DemoSlide>

docs/.vitepress/theme/components/FeatureTag.vue

@@ -54,7 +54,7 @@ const colors = computed(() => {
   <a v-if="props.removable" class="feature-tag flex gap-1 items-center">
     {{ formattedTag }}
     <button class="flex items-center op-70 hover:bg-gray-200/20 hover:op90 rounded-full mr--1" @click="emit('remove')">
-      <carbon:close />
+      <div class="i-carbon:close" />
     </button>
   </a>
   <span v-else-if="props.noclick" class="feature-tag">

docs/.vitepress/theme/components/ShowCaseInfo.vue

@@ -42,23 +42,23 @@ defineProps<{
         class="ml-2 text-current! opacity-20 hover:opacity-100 hover:text-[#cb3837]"
         target="_blank"
       >
-        <carbon:video />
+        <div class="i-carbon:video" />
       </a>
       <a
         v-if="info.slidesLink"
         :href="info.slidesLink"
         class="ml-2 text-current! opacity-20 hover:opacity-100 hover:text-[#cb3837]"
         target="_blank"
       >
-        <carbon:presentation-file />
+        <div class="i-carbon:presentation-file" />
       </a>
       <a
         v-if="info.sourceLink"
         :href="info.sourceLink"
         class="ml-2 text-current! opacity-20 hover:opacity-100"
         target="_blank"
       >
-        <carbon:logo-github />
+        <div class="i-carbon:logo-github" />
       </a>
     </div>
   </div>

docs/.vitepress/theme/components/TheTweet.vue

@@ -63,7 +63,7 @@ if (isClient) {
     <div ref="tweet" class="mx-auto w-140">
       <div v-if="!loaded" class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
         <div class="m-auto animate-pulse text-4xl">
-          <carbon:logo-twitter />
+          <div class="i-carbon:logo-twitter" />
         </div>
       </div>
     </div>

docs/custom/config-highlighter.md

@@ -35,11 +35,11 @@ import { defineShikiSetup } from '@slidev/types'
 // ---cut-start---
 // @ts-expect-error missing types
 // ---cut-end---
-import customTheme from './customTheme.tmTheme.json'
+import customLanguage from './customLanguage.tmLanguage.json'
 // ---cut-start---
 // @ts-expect-error missing types
 // ---cut-end---
-import customLanguage from './customLanguage.tmLanguage.json'
+import customTheme from './customTheme.tmTheme.json'
 
 export default defineShikiSetup(() => {
   return {

docs/custom/directory-structure.md

@@ -129,6 +129,6 @@ The final hosted `index.html` will be:
 
 ## Global Layers
 
-Pattern: `global-top.vue` | `global-bottom.vue` | `custom-nav-controls.vue` | `layouts/slide-top.vue` | `layouts/slide-bottom.vue`
+Pattern: `global-top.vue` | `global-bottom.vue` | `custom-nav-controls.vue` | `slide-top.vue` | `slide-bottom.vue`
 
 <LinkCard link="features/global-layers" />

docs/features/draggable.md

@@ -42,7 +42,7 @@ dragPos:
 ---
 
 <v-drag pos="foo" text-3xl>
-  <carbon:arrow-up />
+  <div class="i-carbon:arrow-up" />
   Use the `v-drag` component to have a draggable container!
 </v-drag>
 ```
@@ -51,7 +51,7 @@ dragPos:
 
 ```md
 <v-drag pos="Left,Top,Width,Height,Rotate" text-3xl>
-  <carbon:arrow-up />
+  <div class="i-carbon:arrow-up" />
   Use the `v-drag` component to have a draggable container!
 </v-drag>
 ```

docs/features/global-layers.md

@@ -10,10 +10,10 @@ Global layers allow you to have custom components that **persist** across slides
 
 Slidev provides three layers for this usage, create `global-top.vue`, `global-bottom.vue`, or `custom-nav-controls.vue` under your project root and it will pick up automatically.
 
-There are also layers for **each** slide: `layouts/slide-top.vue` and `layouts/slide-bottom.vue`. The usage is similar to the global layers, but they are applied to every slide, so there may be more than one instance of them.
+There are also layers for **each** slide: `slide-top.vue` and `slide-bottom.vue`. The usage is similar to the global layers, but they are applied to every slide, so there may be more than one instance of them.
 
 ::: tip
-When exporting, the `--per-slide` option should be used to ensure the global layers are applied to each slide correctly.
+If you are using `global-top.vue` or `global-bottom.vue` depending on the current navigation state, when exporting, the `--per-slide` option should be used to ensure the correct state is applied to each slide. Or you can use `slide-top.vue` and `slide-bottom.vue` instead.
 :::
 
 ## Layers relationship
@@ -43,7 +43,7 @@ The text `Your Name` will appear on all your slides.
 <!-- custom-nav-controls -->
 <template>
   <button class="icon-btn" title="Next" @click="$nav.next">
-    <carbon:arrow-right />
+    <div class="i-carbon:arrow-right" />
   </button>
 </template>
 ```
@@ -93,7 +93,7 @@ To enable it conditionally, you can use the <LinkInline link="guide/global-conte
 <!-- hide the button in Presenter model -->
 <template>
   <button v-if="!$nav.isPresenter" class="icon-btn" title="Next" @click="$nav.next">
-    <carbon:arrow-right />
+    <div class="i-carbon:arrow-right" />
   </button>
 </template>
 ```

docs/features/index.md

@@ -52,7 +52,7 @@ You can also read <LinkInline link="guide/" /> to learn the features by topic.
     px3 py2 gap-2 border-2 border-solid border-transparent
     class="bg-$vp-c-bg-alt focus-within:border-color-$vp-c-brand"
   >
-    <carbon:search text-sm op-80 />
+    <div class="i-carbon:search" text-sm op-80 />
     <input
       v-model="search"
       type="search" text-base
@@ -63,7 +63,7 @@ You can also read <LinkInline link="guide/" /> to learn the features by topic.
     v-if="tagsArr.length"
     flex items-center gap-1
   >
-    <carbon:tag text-sm mr-1 op-80 />
+    <div class="i-carbon:tag" text-sm mr-1 op-80 />
     <FeatureTag v-for="tag in tagsArr" :key="tag" :tag removable @remove="removeTag(tag)"/>
   </div>
 </div>
@@ -73,7 +73,7 @@ You can also read <LinkInline link="guide/" /> to learn the features by topic.
 <div v-if="filteredFeatures.length === 0" class="w-full mt-6 op-80 flex flex-col items-center">
   No results found
   <button class="block select-button flex-inline gap-1 items-center px-2 py-1 hover:bg-gray-400/10 rounded" @click="resetFilters()">
-    <carbon:filter-remove />
+    <div class="i-carbon:filter-remove" />
     Clear Filters
   </button>
 </div>

docs/guide/exporting.md

@@ -199,6 +199,14 @@ Here is a basic example that covers all backgrounds in the application:
 
 ## Troubleshooting
 
+### Missing Content or Animation not Finished
+
+If you find that some content is missing or the animations are not finished in the exported PDF, you can try adding a wait time before exporting each slide:
+
+```bash
+$ slidev export --wait 1000
+```
+
 ### Broken Emojis
 
 If the PDF or PNG are missing Emojis, you are likely missing required fonts (such as. e.g. [Google's _Noto Emoji_](https://fonts.google.com/noto/specimen/Noto+Emoji)) in your environment.
@@ -210,3 +218,7 @@ $ curl -L --output NotoColorEmoji.ttf https://github.com/googlefonts/noto-emoji/
 $ sudo mv NotoColorEmoji.ttf /usr/local/share/fonts/
 $ fc-cache -fv
 ```
+
+### Wrong Context in Global Layers
+
+See the tip in https://sli.dev/features/global-layers.

docs/package.json

@@ -1,9 +1,9 @@
 {
   "name": "docs",
   "type": "module",
-  "version": "0.50.0-beta.5",
+  "version": "0.50.0-beta.7",
   "private": true,
-  "packageManager": "pnpm@9.12.2",
+  "packageManager": "pnpm@9.14.3",
   "scripts": {
     "dev": "vitepress",
     "build": "vitepress build",
@@ -33,6 +33,7 @@
     "unplugin-icons": "catalog:",
     "unplugin-vue-components": "catalog:",
     "vite-plugin-inspect": "catalog:",
-    "vitepress": "catalog:"
+    "vitepress": "catalog:",
+    "vue": "catalog:"
   }
 }

docs/resources/learning.md

@@ -19,3 +19,4 @@
 
 - [開発者のためのスライド作成ツール Slidev がすごい](https://zenn.dev/ryo_kawamata/articles/introduce-slidev) by [ryo_kawamata](https://zenn.dev/ryo_kawamata)
 - [Markdownでオシャレなスライドを作るSli.dev](https://qiita.com/e99h2121/items/a115f8865a0dc21bb462) by [Nobuko YAMADA](https://qiita.com/e99h2121)
+- [【Slidev 超入門】エンジニアだからこそ作れるつよつよスライドの作り方！](https://zenn.dev/takumaru/articles/3faa75c2f09493) by [takuma-ru](https://zenn.dev/takumaru)

package.json

@@ -1,8 +1,8 @@
 {
   "type": "module",
-  "version": "0.50.0-beta.5",
+  "version": "0.50.0-beta.7",
   "private": true,
-  "packageManager": "pnpm@9.12.2",
+  "packageManager": "pnpm@9.14.3",
   "engines": {
     "node": ">=18.0.0"
   },
@@ -78,6 +78,10 @@
       "@hedgedoc/markdown-it-plugins@2.1.4": "patches/@hedgedoc__markdown-it-plugins@2.1.4.patch"
     }
   },
+  "resolutions": {
+    "typescript": "catalog:",
+    "vite": "catalog:"
+  },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
   },

packages/client/builtin/TocList.vue

@@ -11,6 +11,7 @@ import type { TocItem } from '@slidev/types'
 import TitleRenderer from '#slidev/title-renderer'
 import { toArray } from '@antfu/utils'
 import { computed } from 'vue'
+import { useNav } from '../composables/useNav'
 
 const props = withDefaults(defineProps<{
   level: number
@@ -20,6 +21,8 @@ const props = withDefaults(defineProps<{
   listClass?: string | string[]
 }>(), { level: 1 })
 
+const { isPresenter } = useNav()
+
 const classes = computed(() => {
   return [
     ...toArray(props.listClass || []),
@@ -47,7 +50,7 @@ const styles = computed(() => {
       :key="item.path" class="slidev-toc-item"
       :class="[{ 'slidev-toc-item-active': item.active }, { 'slidev-toc-item-parent-active': item.activeParent }]"
     >
-      <Link :to="item.path">
+      <Link :to="isPresenter ? `/presenter${item.path}` : item.path">
         <TitleRenderer :no="item.no" />
       </Link>
       <TocList

packages/client/builtin/Tweet.vue

@@ -55,7 +55,7 @@ onMounted(() => {
     <div ref="tweet" class="tweet slidev-tweet">
       <div v-if="!loaded || tweetNotFound" class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
         <div class="m-auto animate-pulse text-4xl">
-          <carbon:logo-twitter />
+          <div class="i-carbon:logo-twitter" />
           <span v-if="tweetNotFound">Could not load tweet with id="{{ props.id }}"</span>
         </div>
       </div>

packages/client/composables/useTimer.ts

@@ -0,0 +1,20 @@
+import { useInterval } from '@vueuse/core'
+import { computed } from 'vue'
+
+export function useTimer() {
+  const { counter, isActive, reset, pause, resume } = useInterval(1000, { controls: true })
+
+  const timer = computed(() => {
+    const passed = counter.value
+    const sec = Math.floor(passed % 60).toString().padStart(2, '0')
+    const min = Math.floor(passed / 60).toString().padStart(2, '0')
+    return `${min}:${sec}`
+  })
+
+  return {
+    timer,
+    isTimerAvctive: isActive,
+    resetTimer: reset,
+    toggleTimer: () => (isActive.value ? pause() : resume()),
+  }
+}

packages/client/composables/useViewTransition.ts

@@ -17,7 +17,7 @@ export function useViewTransition() {
     const toMeta = getSlide(to.params.no as string)?.meta
     const fromNo = fromMeta?.slide?.no
     const toNo = toMeta?.slide?.no
-    const transitionType = fromNo != null && toNo != null
+    const transitionType = fromNo != null && toNo != null && fromNo !== toNo
       && ((fromNo < toNo ? fromMeta?.transition : toMeta?.transition) ?? configs.transition)
     if (transitionType !== 'view-transition') {
       isViewTransition.value = false
@@ -41,7 +41,6 @@ export function useViewTransition() {
 
     // Wait for `TransitionGroup` to become normal `div`
     setTimeout(() => {
-      // @ts-expect-error missing types
       document.startViewTransition(() => {
         changeRoute()
         return promise

packages/client/internals/ClicksSlider.vue

@@ -42,7 +42,7 @@ function onMousedown() {
     :class="length && props.clicksContext.isMounted ? '' : 'op50'"
   >
     <div class="flex gap-0.2 items-center min-w-16 font-mono mr1">
-      <carbon:cursor-1 text-sm op50 />
+      <div class="i-carbon:cursor-1 text-sm op50" />
       <template v-if="current >= 0 && current !== CLICKS_MAX && active">
         <div flex-auto />
         <span text-primary>{{ current }}</span>

packages/client/internals/CodeRunner.vue

@@ -119,7 +119,7 @@ else if (autorun)
   </div>
   <div v-if="code.trim()" class="absolute right-1 top-1 max-h-full flex gap-1">
     <IconButton class="w-8 h-8 max-h-full flex justify-center items-center" title="Run code" @click="triggerRun">
-      <carbon:play />
+      <div class="i-carbon:play" />
     </IconButton>
   </div>
 </template>

packages/client/internals/ContextMenu.vue

@@ -69,21 +69,23 @@ const top = computed(() => {
       <div v-if="item === 'separator'" :key="index" class="w-full my1 border-t border-main" />
       <div
         v-else-if="item.small"
-        class="p-2 w-[40px] h-[40px] inline-block text-center cursor-pointer rounded"
+        class="p-2 w-[40px] h-[40px] inline-block text-center cursor-pointer rounded flex"
         :class="item.disabled ? `op40` : `hover:bg-active`"
         :title="(item.label as string)"
         @click="item.action"
       >
-        <component :is="item.icon" />
+        <div v-if="typeof item.icon === 'string'" :class="item.icon" class="text-1.2em ma" />
+        <component :is="item.icon" v-else />
       </div>
       <div
         v-else
         class="w-full grid grid-cols-[35px_1fr] p-2 pl-0 cursor-pointer rounded"
         :class="item.disabled ? `op40` : `hover:bg-active`"
         @click="item.action"
       >
-        <div class="mx-auto">
-          <component :is="item.icon" />
+        <div class="mx-auto flex">
+          <div v-if="typeof item.icon === 'string'" :class="item.icon" class="text-1.2em ma" />
+          <component :is="item.icon" v-else />
         </div>
         <div v-if="typeof item.label === 'string'">
           {{ item.label }}