@slidev/docs 52.14.0 → 52.14.2

package/custom/config-code-runners.md

@@ -64,7 +64,7 @@ The runner can either return a text or HTML output, or an element to be mounted.
 
 ## Additional Runner Dependencies
 
-By default, Slidev will scan the Markdown source and automatically import the necessary dependencies for the code runners. If you want to manually import dependencies, you can use the `monacoRunAdditionalDeps` option in the slide frontmatter:
+By default, Slidev will scan the Markdown source and automatically import the necessary dependencies for the code runners. If you want to manually import dependencies, you can use the `monacoRunAdditionalDeps` option in the [headmatter](./index#headmatter):
 
 ```yaml
 monacoRunAdditionalDeps:

package/custom/config-mermaid-renderer.md

@@ -0,0 +1,19 @@
+# Configure Mermaid Renderer
+
+<Environment type="client" />
+
+1. The user installs the Mermaid library they want to use. e.g.) `npm install beautiful-mermaid`
+2. Create `./setup/mermaid-renderer.ts` with the following content:
+
+```ts
+// setup/mermaid-renderer.ts
+import { defineMermaidRendererSetup } from '@slidev/types'
+// example. https://github.com/lukilabs/beautiful-mermaid?tab=readme-ov-file#readme
+import { renderMermaid } from 'beautiful-mermaid'
+
+export default defineMermaidRendererSetup(() => {
+  return (code, _options) => renderMermaid(code)
+})
+```
+
+This setting allows you to use the 3rd party Mermaid library. Replace the `renderMermaid()` part with the render function of the library.

package/custom/directory-structure.md

@@ -43,6 +43,12 @@ Pattern: `./style.css` | `./styles/index.{css,js,ts}`
 
 Files following this convention will be injected to the App root. If you need to import multiple CSS entries, you can create the following structure and manage the import order yourself.
 
+:::warning
+Global CSS here also applies to the presenter UI. Prefer scoping styles to individual slides, or wrap your selectors under `.slidev-layout` to avoid leaking styles into presenter mode.
+
+**Example:** Use `.slidev-layout .grid { ... }` instead of just `.grid { ... }`.
+:::
+
 ```bash
 your-slidev/
   ├── ...

package/features/index.md

@@ -17,7 +17,7 @@ const query = useUrlSearchParams('hash-params', { removeFalsyValues: true })
 const search = toRef(query, 'search') as Ref<string | null>
 const tags = toRef(query, 'tags') as Ref<string | null>
 const tagsArr = computed({
-  get: () => tags.value?.toLowerCase().split(',').map(t => t.trim()).filter(Boolean) ?? [],
+  get: () => tags.value?.split(',').map(t => t.trim()).filter(Boolean) ?? [],
   set: (val: string[]) => query.tags = val.join(','),
 })
 
@@ -25,8 +25,17 @@ const filteredFeatures = computed(() => {
   const s = search.value?.toLowerCase().trim()
   const t = tagsArr.value
   return Object.values(features).filter(feature => {
-    return (!s || feature.title.toLowerCase().includes(s) || feature.description.toLowerCase().includes(s))
-      && (!t?.length || t.every(tag => feature.tags?.includes(tag)))
+    const matchSearch = !s ||
+      feature.name.toLowerCase().includes(s) ||
+      feature.title.toLowerCase().includes(s) ||
+      feature.description.toLowerCase().includes(s)
+
+    const matchTags = !t?.length || t.every(tag =>
+      feature.tags?.some(featureTag =>
+        featureTag.toLowerCase() === tag.toLowerCase()
+      )
+    )
+    return matchSearch && matchTags
   })
 })
 

package/guide/hosting.md

@@ -188,6 +188,28 @@ Create `vercel.json` in your project root with the following content:
 
 Then go to your [Vercel dashboard](https://vercel.com/) and create a new site with the repository.
 
+### Zephyr Cloud {#zephyr-cloud}
+
+To deploy your Slidev deck on [Zephyr Cloud](https://zephyr-cloud.io/), you can add Zephyr support to an existing Slidev project with:
+
+```bash
+npx with-zephyr@latest
+```
+
+This codemod detects your bundler (Slidev uses Vite) and updates your config for Zephyr Cloud.
+
+After setup, run your normal build command, for example:
+
+```bash
+npm run build
+```
+
+When the build runs with Zephyr enabled, your app is deployed and Zephyr Cloud returns a preview URL.
+
+::: info
+Zephyr Cloud is a bit different from most hosting providers: every `build` run triggers a deployment.
+:::
+
 ### Host on Docker {#docker}
 
 If you need a rapid way to run a presentation with containers, you can use the prebuilt [docker image](https://hub.docker.com/r/tangramor/slidev) maintained by [tangramor](https://github.com/tangramor), or build your own.

package/guide/index.md

@@ -40,7 +40,7 @@ Start Slidev right in your browser with StackBlitz: [sli.dev/new](https://sli.de
 
 ### Create Locally
 
-> Requires [Node.js](https://nodejs.org) >= 18.0 installed.
+> Requires [Node.js](https://nodejs.org) >= 20.12.0 installed.
 
 Run the following command to create a new Slidev project locally:
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/docs",
   "type": "module",
-  "version": "52.14.0",
+  "version": "52.14.2",
   "license": "MIT",
   "funding": "https://github.com/sponsors/antfu",
   "homepage": "https://sli.dev",
@@ -17,14 +17,14 @@
   ],
   "devDependencies": {
     "@antfu/utils": "^9.3.0",
-    "@iconify/json": "^2.2.443",
-    "@shikijs/vitepress-twoslash": "^4.0.0",
-    "@types/node": "^25.3.2",
-    "@unocss/reset": "^66.6.2",
+    "@iconify/json": "^2.2.445",
+    "@shikijs/vitepress-twoslash": "^4.0.1",
+    "@types/node": "^25.3.3",
+    "@unocss/reset": "^66.6.3",
     "@vueuse/core": "^14.2.1",
     "fast-glob": "^3.3.3",
     "gray-matter": "^4.0.3",
-    "shiki": "^4.0.0",
+    "shiki": "^4.0.1",
     "typeit": "8.1.0",
     "typescript": "^5.9.3",
     "unocss": "^66.6.2",
@@ -35,9 +35,9 @@
     "vitepress-plugin-group-icons": "^1.7.1",
     "vitepress-plugin-llms": "^1.11.0",
     "vue": "^3.5.29",
-    "@slidev/parser": "52.14.0",
-    "@slidev/client": "52.14.0",
-    "@slidev/types": "52.14.0"
+    "@slidev/client": "52.14.2",
+    "@slidev/parser": "52.14.2",
+    "@slidev/types": "52.14.2"
   },
   "scripts": {
     "dev": "vitepress",

package/resources/addon-gallery.md

@@ -12,11 +12,11 @@ Browse awesome addons available for Slidev here.
 
 Read more about <LinkInline link="guide/theme-addon#use-addon" /> to use them, and <LinkInline link="guide/write-addon" /> to create your own addon.
 
-## Official Addons
+<!-- ## Official Addons
 
 <ClientOnly>
   <AddonGallery collection="official"/>
-</ClientOnly>
+</ClientOnly> -->
 
 ## Community Addons