feat: TitleRenderer defaults to render current slide's title

docs/builtin/components.md

@@ -158,7 +158,7 @@ Total number of slides.
 <SlidesTotal />
 ```
 
-### `Titles`
+### `TitleRenderer`
 
 Insert the main title from a slide parsed as HTML.
 

docs/custom/index.md

@@ -110,11 +110,11 @@ In addition, every slide accepts the following configuration in the Frontmatter
 - `hide` (`boolean`): The same as `disabled`.
 - `hideInToc` (`boolean`): Hide the slide for the `<Toc>` components (learn more [here](/builtin/components.html#toc)).
 - `layout` (`string`): Defines the layout component applied to the slide (learn more [here](/guide/syntax.html#front-matter-layouts) and [here](/builtin/layouts.html)).
-- `level` (`number`): Override the title level for the `<Title>` and `<Toc>` components (only if `title` has also been declared, learn more [here](/builtin/components.html#titles)).
+- `level` (`number`): Override the title level for the `<TitleRenderer>` and `<Toc>` components (only if `title` has also been declared, learn more [here](/builtin/components.html#titlerenderer)).
 - `preload` (`boolean`, default `true`): Preload the next slide (learn more [here](/guide/animations.html#motion)).
 - `routeAlias` (`string`): Create a route alias that can be used in the URL or with the `<Link>` component (learn more [here](/builtin/components.html#link)).
 - `src` (`string`): Includes a markdown file (learn more [here](/guide/syntax.html#multiple-entries)).
-- `title` (`string`): Override the title for the `<Title>` and `<Toc>` components (learn more [here](/builtin/components.html#titles)).
+- `title` (`string`): Override the title for the `<TitleRenderer>` and `<Toc>` components (learn more [here](/builtin/components.html#titlerenderer)).
 - `transition` (`string | TransitionProps`): Defines the transition between the slide and the next one (learn more [here](/guide/animations.html#slide-transitions)).
 - `zoom` (`number`): Custom zoom scale. Useful for slides with a lot of content.
 

packages/client/internals/Goto.vue

@@ -3,7 +3,7 @@ import { computed, ref, watch } from 'vue'
 import Fuse from 'fuse.js'
 import { activeElement, showGotoDialog } from '../state'
 import { useNav } from '../composables/useNav'
-import Titles from '#slidev/title-renderer'
+import TitleRenderer from '#slidev/title-renderer'
 
 const container = ref<HTMLDivElement>()
 const input = ref<HTMLInputElement>()
@@ -161,7 +161,7 @@ watch(activeElement, () => {
         <div w-4 text-right op50 text-sm>
           {{ item.no }}
         </div>
-        <Titles :no="item.no" />
+        <TitleRenderer :no="item.no" />
       </li>
     </ul>
   </div>

packages/slidev/node/virtual/titles.ts

@@ -4,9 +4,19 @@ export const templateTitleRendererMd: VirtualModuleTemplate = {
   id: '/@slidev/title-renderer.md',
   async getContent({ data }) {
     const lines = data.slides
-      .map(({ title }, i) => `<template ${i === 0 ? 'v-if' : 'v-else-if'}="+no === ${i + 1}">\n\n${title}\n\n</template>`)
+      .map(({ title }, i) => `<template ${i === 0 ? 'v-if' : 'v-else-if'}="no === ${i + 1}">\n\n${title}\n\n</template>`)
 
-    lines.push(`<script setup lang="ts">defineProps<{ no: number | string }>()</script>`)
+    lines.push(
+      [
+        `<script setup lang="ts">`,
+        `import { useSlideContext } from '@slidev/client'`,
+        `import { computed } from 'vue'`,
+        `const props = defineProps<{ no?: number | string }>()`,
+        `const { $page } = useSlideContext()`,
+        `const no = computed(() => +(props.no ?? $page.value))`,
+        `</script>`,
+      ].join('\n'),
+    )
 
     return lines.join('\n')
   },