diff --git a/demo/composable-vue/components/DarkToggle.vue b/demo/composable-vue/components/DarkToggle.vue index 71aa8510d7..f4c5a13886 100644 --- a/demo/composable-vue/components/DarkToggle.vue +++ b/demo/composable-vue/components/DarkToggle.vue @@ -10,8 +10,8 @@ const { isDark, toggleDark } = useDarkMode() @click="toggleDark()" >
- - +
+
{{ isDark ? 'Dark' : 'Light' }}
diff --git a/demo/starter/slides.md b/demo/starter/slides.md index d6b7fe8312..73b0f2985c 100644 --- a/demo/starter/slides.md +++ b/demo/starter/slides.md @@ -29,14 +29,14 @@ overviewSnapshots: true Presentation slides for developers
- - Press Space for next page + + Press Space for next page
@@ -577,7 +577,7 @@ Double-click on the draggable elements to edit their positions. ```md - +
Use the `v-drag` component to have a draggable container! ``` diff --git a/docs/.vitepress/theme/components/Demo.vue b/docs/.vitepress/theme/components/Demo.vue index c52f166b59..c88b7ec76d 100644 --- a/docs/.vitepress/theme/components/Demo.vue +++ b/docs/.vitepress/theme/components/Demo.vue @@ -128,7 +128,7 @@ onMounted(play)
- +
@@ -158,10 +158,10 @@ onMounted(play) opacity="0 hover:100" >
- +
- +
diff --git a/docs/.vitepress/theme/components/FeatureTag.vue b/docs/.vitepress/theme/components/FeatureTag.vue index 37cea9c435..7cf26fc338 100644 --- a/docs/.vitepress/theme/components/FeatureTag.vue +++ b/docs/.vitepress/theme/components/FeatureTag.vue @@ -54,7 +54,7 @@ const colors = computed(() => { {{ formattedTag }} diff --git a/docs/.vitepress/theme/components/ShowCaseInfo.vue b/docs/.vitepress/theme/components/ShowCaseInfo.vue index 49e475e148..3988bfa054 100644 --- a/docs/.vitepress/theme/components/ShowCaseInfo.vue +++ b/docs/.vitepress/theme/components/ShowCaseInfo.vue @@ -42,7 +42,7 @@ defineProps<{ class="ml-2 text-current! opacity-20 hover:opacity-100 hover:text-[#cb3837]" target="_blank" > - +
- +
- +
diff --git a/docs/.vitepress/theme/components/TheTweet.vue b/docs/.vitepress/theme/components/TheTweet.vue index 48a4c7fc31..1a849fa1bf 100644 --- a/docs/.vitepress/theme/components/TheTweet.vue +++ b/docs/.vitepress/theme/components/TheTweet.vue @@ -63,7 +63,7 @@ if (isClient) {
- +
diff --git a/docs/custom/config-highlighter.md b/docs/custom/config-highlighter.md index 21a1315329..c9b04cc51a 100644 --- a/docs/custom/config-highlighter.md +++ b/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 { diff --git a/docs/custom/directory-structure.md b/docs/custom/directory-structure.md index 99bfdc06dd..1acba44304 100644 --- a/docs/custom/directory-structure.md +++ b/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` diff --git a/docs/features/draggable.md b/docs/features/draggable.md index f593e974a6..298809fc50 100644 --- a/docs/features/draggable.md +++ b/docs/features/draggable.md @@ -42,7 +42,7 @@ dragPos: --- - +
Use the `v-drag` component to have a draggable container! ``` @@ -51,7 +51,7 @@ dragPos: ```md - +
Use the `v-drag` component to have a draggable container! ``` diff --git a/docs/features/global-layers.md b/docs/features/global-layers.md index f0fbfd927b..43ca05354b 100644 --- a/docs/features/global-layers.md +++ b/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. ``` @@ -93,7 +93,7 @@ To enable it conditionally, you can use the - +
``` diff --git a/docs/features/index.md b/docs/features/index.md index 97faf94555..68f6988254 100644 --- a/docs/features/index.md +++ b/docs/features/index.md @@ -52,7 +52,7 @@ You can also read 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" > - +
to learn the features by topic. v-if="tagsArr.length" flex items-center gap-1 > - +
@@ -73,7 +73,7 @@ You can also read to learn the features by topic.
No results found
diff --git a/docs/guide/exporting.md b/docs/guide/exporting.md index ee73c81de4..56c8de96ab 100644 --- a/docs/guide/exporting.md +++ b/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. diff --git a/docs/package.json b/docs/package.json index ae42186dee..5efa01d474 100644 --- a/docs/package.json +++ b/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:" } } diff --git a/docs/resources/learning.md b/docs/resources/learning.md index 9d32e1f78a..262c2f8c9a 100644 --- a/docs/resources/learning.md +++ b/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) diff --git a/package.json b/package.json index 0368a38140..09e7b68e52 100644 --- a/package.json +++ b/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" }, diff --git a/packages/client/builtin/TocList.vue b/packages/client/builtin/TocList.vue index d8e7cc6f89..3514d0eacb 100644 --- a/packages/client/builtin/TocList.vue +++ b/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 }]" > - + {
- +
Could not load tweet with id="{{ props.id }}"
diff --git a/packages/client/composables/useTimer.ts b/packages/client/composables/useTimer.ts new file mode 100644 index 0000000000..1d04c89ad5 --- /dev/null +++ b/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()), + } +} diff --git a/packages/client/composables/useViewTransition.ts b/packages/client/composables/useViewTransition.ts index a5341b354e..d7eea924ee 100644 --- a/packages/client/composables/useViewTransition.ts +++ b/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 diff --git a/packages/client/internals/ClicksSlider.vue b/packages/client/internals/ClicksSlider.vue index 39572fb323..84cf7fe2d7 100644 --- a/packages/client/internals/ClicksSlider.vue +++ b/packages/client/internals/ClicksSlider.vue @@ -42,7 +42,7 @@ function onMousedown() { :class="length && props.clicksContext.isMounted ? '' : 'op50'" >
- +
diff --git a/packages/client/internals/ContextMenu.vue b/packages/client/internals/ContextMenu.vue index 0fe04d690e..9f4404d718 100644 --- a/packages/client/internals/ContextMenu.vue +++ b/packages/client/internals/ContextMenu.vue @@ -69,12 +69,13 @@ const top = computed(() => {
- +
+
{ :class="item.disabled ? `op40` : `hover:bg-active`" @click="item.action" > -
- +
+
+
{{ item.label }} diff --git a/packages/client/internals/DrawingControls.vue b/packages/client/internals/DrawingControls.vue index edf572f07b..a46348b5e9 100644 --- a/packages/client/internals/DrawingControls.vue +++ b/packages/client/internals/DrawingControls.vue @@ -49,7 +49,7 @@ function setBrushColor(color: typeof brush.color) { :initial-y="10" > - +
@@ -57,16 +57,16 @@ function setBrushColor(color: typeof brush.color) { - +
- +
- +
- +
@@ -107,19 +107,19 @@ function setBrushColor(color: typeof brush.color) { - +
- +
- +
- - +
+
- - +
+
diff --git a/packages/client/internals/NavControls.vue b/packages/client/internals/NavControls.vue index 8197ecdfe7..be60addd1f 100644 --- a/packages/client/internals/NavControls.vue +++ b/packages/client/internals/NavControls.vue @@ -63,17 +63,17 @@ if (__SLIDEV_FEATURE_RECORD__) @mouseleave="onMouseLeave" > - - +
+
- +
- +
- +
- +
- +
- +
- +
- +
{{ presenterLayout }} @@ -147,14 +147,14 @@ if (__SLIDEV_FEATURE_RECORD__) title="Show info" @click="showInfoDialog = !showInfoDialog" > - +