@slidev/cli 0.49.15 → 0.49.17

package/README.md

@@ -36,20 +36,21 @@ Presentation <b>slide</b>s for <b>dev</b>elopers 🧑‍💻👩‍💻👨‍
 
 ## Features
 
-- 📝 [**Markdown-based**](https://sli.dev/guide/syntax.html) - use your favorite editors and workflow
-- 🧑‍💻 [**Developer Friendly**](https://sli.dev/guide/syntax.html#code-blocks) - built-in syntax highlighting, live coding, etc.
-- 🎨 [**Themable**](https://sli.dev/themes/gallery.html) - theme can be shared and used with npm packages.
-- 🌈 [**Stylish**](https://sli.dev/guide/syntax.html#embedded-styles) - on-demand utilities via [UnoCSS](https://github.com/unocss/unocss).
-- 🤹 [**Interactive**](https://sli.dev/custom/directory-structure.html#components) - embedding Vue components seamlessly.
-- 🎙 [**Presenter Mode**](https://sli.dev/guide/presenter-mode.html) - use another window, or even your phone to control your slides.
-- 🧮 [**LaTeX**](https://sli.dev/guide/syntax.html#latex) - built-in LaTeX math equations support.
-- 📰 [**Diagrams**](https://sli.dev/guide/syntax.html#diagrams) - creates diagrams with textual descriptions
-- 🌟 [**Icons**](https://sli.dev/guide/syntax.html#icons) - access to icons from any iconset directly.
-- 💻 [**Editors**](https://sli.dev/guide/editors.html) - integrated editor, or [extension for VS Code](https://github.com/slidevjs/slidev-vscode)
-- 🎥 [**Recording**](https://sli.dev/guide/recording.html) - built-in recording and camera view.
-- 📤 [**Portable**](https://sli.dev/guide/exporting.html) - export into PDF, PNGs, or even a hostable SPA.
-- ⚡️ [**Fast**](https://vitejs.dev) - instant reloading powered by [Vite](https://vitejs.dev).
-- 🛠 [**Hackable**](https://sli.dev/custom/config-vite.html) - using Vite plugins, Vue components, or any npm packages.
+- 📝 [**Markdown-based**](https://sli.dev/guide/syntax) - foucus on content and use your favorite editor
+- 🧑‍💻 [**Developer Friendly**](https://sli.dev/guide/syntax#code-blocks) - built-in code highlighting, live coding, etc.
+- 🎨 [**Themable**](https://sli.dev/resources/theme-gallery) - theme can be shared and used with npm packages
+- 🌈 [**Stylish**](https://sli.dev/guide/syntax#embedded-styles) - on-demand utilities via [UnoCSS](https://github.com/unocss/unocss).
+- 🤹 [**Interactive**](https://sli.dev/custom/directory-structure#components) - embedding Vue components seamlessly
+- 🎙 [**Presenter Mode**](https://sli.dev/guide/ui#presenter-mode) - use another window, or even your phone to control your slides
+- 🎨 [**Drawing**](https://sli.dev/features/drawing) - draw and annotate on your slides
+- 🧮 [**LaTeX**](https://sli.dev/features/latex) - built-in LaTeX math equations support
+- 📰 [**Diagrams**](https://sli.dev/guide/syntax#diagrams) - creates diagrams using textual descriptions with [Mermaid.js](https://mermaid.js.org/)
+- 🌟 [**Icons**](https://sli.dev/features/icons) - access to icons from any icon set directly
+- 💻 [**Editor**](https://sli.dev/guide/index#editor) - integrated editor, or the [VSCode extension](https://sli.dev/features/vscode-extension)
+- 🎥 [**Recording**](https://sli.dev/features/recording) - built-in recording and camera view
+- 📤 [**Portable**](https://sli.dev/guide/exporting) - export into PDF, PNGs, or PPTX
+- ⚡️ [**Fast**](https://vitejs.dev) - instant reloading powered by [Vite](https://vitejs.dev)
+- 🛠 [**Hackable**](https://sli.dev/custom/) - using Vite plugins, Vue components, or any npm packages
 
 ## Getting Started
 

package/dist/{build-J45HACJD.mjs → build-OXWIETNK.mjs}

@@ -1,7 +1,7 @@
 import {
   getIndexHtml,
   resolveViteConfigs
-} from "./chunk-VAXCTWQX.mjs";
+} from "./chunk-T42M3I2X.mjs";
 import "./chunk-27Q2X57X.mjs";
 
 // node/commands/build.ts

package/dist/{chunk-X5LWKCT6.mjs → chunk-KRQVQU6O.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveViteConfigs
-} from "./chunk-VAXCTWQX.mjs";
+} from "./chunk-T42M3I2X.mjs";
 
 // node/commands/server.ts
 import { join } from "node:path";

package/dist/{chunk-VAXCTWQX.mjs → chunk-T42M3I2X.mjs}

@@ -7176,7 +7176,7 @@ var require_dist = __commonJS({
 });
 
 // package.json
-var version = "0.49.15";
+var version = "0.49.17";
 
 // node/commands/shared.ts
 import { existsSync as existsSync7, promises as fs9 } from "node:fs";
@@ -7257,7 +7257,6 @@ function updateFrontmatterPatch(slide, frontmatter) {
 import { join as join9 } from "node:path";
 import { existsSync as existsSync6 } from "node:fs";
 import process2 from "node:process";
-import { fileURLToPath as fileURLToPath4 } from "node:url";
 import Icons from "unplugin-icons/vite";
 import IconsResolver from "unplugin-icons/resolver";
 import Components from "unplugin-vue-components/vite";
@@ -7500,10 +7499,7 @@ function getDefine(options) {
 }
 
 // node/vite/loaders.ts
-import path from "node:path";
 import { notNullish, range } from "@antfu/utils";
-import fg3 from "fast-glob";
-import { bold, gray, red, yellow } from "kolorist";
 import * as parser2 from "@slidev/parser/fs";
 import equal from "fast-deep-equal";
 
@@ -7843,35 +7839,40 @@ var templateSlides = {
   id: "/@slidev/slides",
   async getContent({ data }, { getLayouts }) {
     const layouts = await getLayouts();
-    const imports = [
-      `import { shallowRef } from 'vue'`,
-      `import * as __layout__error from '${layouts.error}'`
+    const statements = [
+      `import { defineAsyncComponent, shallowRef } from 'vue'`,
+      `import SlideError from '${layouts.error}'`,
+      `import SlideLoading from '@slidev/client/internals/SlideLoading.vue'`,
+      `const componentsCache = new Array(${data.slides.length})`,
+      `const getAsyncComponent = (idx, loader) => defineAsyncComponent({`,
+      `  loader,`,
+      `  delay: 300,`,
+      `  loadingComponent: SlideLoading,`,
+      `  errorComponent: SlideError,`,
+      `  onError: e => console.error('Failed to load slide ' + (idx + 1), e) `,
+      `})`
     ];
     const slides = data.slides.map((_, idx) => {
       const no = idx + 1;
-      imports.push(`import { meta as f${no} } from '${VIRTUAL_SLIDE_PREFIX}${no}.frontmatter'`);
-      return `{
-          no: ${no},
-          meta: f${no},
-          component: async () => {
-            try {
-              return await import('${VIRTUAL_SLIDE_PREFIX}${no}.md')
-            }
-            catch(e) {
-              console.error('Failed to load slide ${no}:', e)
-              return __layout__error
-            }
-          },
-        }`;
+      statements.push(
+        `import { meta as f${no} } from '${VIRTUAL_SLIDE_PREFIX}${no}/frontmatter'`,
+        // For some unknown reason, import error won't be caught by the error component. Catch it here.
+        `const load${no} = async () => {`,
+        `  try { return componentsCache[${idx}] ??= await import('${VIRTUAL_SLIDE_PREFIX}${no}/md') }`,
+        `  catch (e) { return SlideError }`,
+        `}`
+      );
+      return `{ no: ${no}, meta: f${no}, load: load${no}, component: getAsyncComponent(${idx}, load${no}) }`;
     });
     return [
-      ...imports,
+      ...statements,
       `const data = [
 ${slides.join(",\n")}
 ]`,
       `if (import.meta.hot) {`,
       `  import.meta.hot.data.slides ??= shallowRef()`,
       `  import.meta.hot.data.slides.value = data`,
+      `  import.meta.hot.dispose(() => componentsCache.length = 0)`,
       `  import.meta.hot.accept()`,
       `}`,
       `export const slides = import.meta.hot ? import.meta.hot.data.slides : shallowRef(data)`
@@ -7941,7 +7942,7 @@ ${title}
 </template>`);
     lines.push(
       `<script setup lang="ts">`,
-      `import { useSlideContext } from '@slidev/client'`,
+      `import { useSlideContext } from '@slidev/client/context.ts'`,
       `import { computed } from 'vue'`,
       `const props = defineProps<{ no?: number | string }>()`,
       `const { $page } = useSlideContext()`,
@@ -7978,9 +7979,11 @@ var templates = [
 ];
 
 // node/options.ts
+import path from "node:path";
 import { uniq as uniq4 } from "@antfu/utils";
 import Debug from "debug";
 import mm from "micromatch";
+import fg3 from "fast-glob";
 
 // node/parser.ts
 import * as parser from "@slidev/parser/fs";
@@ -8076,23 +8079,48 @@ async function resolveOptions(options, mode) {
     themeRoots,
     addonRoots,
     roots,
-    utils: createDataUtils(data)
+    utils: createDataUtils(data, rootsInfo.clientRoot, roots)
   };
   return resolved;
 }
-function createDataUtils(data) {
+function createDataUtils(data, clientRoot, roots) {
   const monacoTypesIgnorePackagesMatches = (data.config.monacoTypesIgnorePackages || []).map((i) => mm.matcher(i));
+  let _layouts_cache_time = 0;
+  let _layouts_cache = {};
   return {
-    isMonacoTypesIgnored: (pkg) => monacoTypesIgnorePackagesMatches.some((i) => i(pkg))
+    isMonacoTypesIgnored: (pkg) => monacoTypesIgnorePackagesMatches.some((i) => i(pkg)),
+    getLayouts: async () => {
+      const now = Date.now();
+      if (now - _layouts_cache_time < 2e3)
+        return _layouts_cache;
+      const layouts = {};
+      for (const root of [clientRoot, ...roots]) {
+        const layoutPaths = await fg3("layouts/**/*.{vue,ts}", {
+          cwd: root,
+          absolute: true,
+          suppressErrors: true
+        });
+        for (const layoutPath of layoutPaths) {
+          const layoutName = path.basename(layoutPath).replace(/\.\w+$/, "");
+          layouts[layoutName] = layoutPath;
+        }
+      }
+      _layouts_cache_time = now;
+      _layouts_cache = layouts;
+      return layouts;
+    }
   };
 }
 
-// node/vite/loaders.ts
-var regexId = /^\/@slidev\/slide\/(\d+)\.(md|json)(?:\?import)?$/;
-var regexIdQuery = /(\d+)\.(md|json|frontmatter)$/;
+// node/vite/common.ts
+var regexSlideReqPath = /^\/__slidev\/slides\/(\d+)\.json$/;
+var regexSlideFacadeId = /^\/@slidev\/slides\/(\d+)\/(md|frontmatter)($|\?)/;
+var regexSlideSourceId = /__slidev_(\d+)\.(md|frontmatter)$/;
 var templateInjectionMarker = "/* @slidev-injection */";
 var templateImportContextUtils = `import { useSlideContext as _useSlideContext, frontmatterToProps as _frontmatterToProps } from "@slidev/client/context.ts"`;
 var templateInitContext = `const { $slidev, $nav, $clicksContext, $clicks, $page, $renderContext, $frontmatter } = _useSlideContext()`;
+
+// node/vite/loaders.ts
 function getBodyJson(req) {
   return new Promise((resolve8, reject) => {
     let body = "";
@@ -8123,382 +8151,247 @@ function withRenderedNote(data) {
     noteHTML: renderNote(data?.note)
   };
 }
-function createSlidesLoader(options, pluginOptions, serverOptions) {
+function createSlidesLoader(options, serverOptions) {
   const hmrPages = /* @__PURE__ */ new Set();
   let server;
-  let _layouts_cache_time = 0;
-  let _layouts_cache = {};
   let skipHmr = null;
   const { data, clientRoot, roots, mode, utils } = options;
   const templateCtx = {
     md: sharedMd,
-    async getLayouts() {
-      const now = Date.now();
-      if (now - _layouts_cache_time < 2e3)
-        return _layouts_cache;
-      const layouts = {};
-      for (const root of [clientRoot, ...roots]) {
-        const layoutPaths = await fg3("layouts/**/*.{vue,ts}", {
-          cwd: root,
-          absolute: true,
-          suppressErrors: true
-        });
-        for (const layoutPath of layoutPaths) {
-          const layoutName = path.basename(layoutPath).replace(/\.\w+$/, "");
-          layouts[layoutName] = layoutPath;
-        }
-      }
-      _layouts_cache_time = now;
-      _layouts_cache = layouts;
-      return layouts;
-    }
+    getLayouts: utils.getLayouts
   };
-  return [
-    {
-      name: "slidev:loader",
-      configureServer(_server) {
-        server = _server;
-        updateServerWatcher();
-        server.middlewares.use(async (req, res, next) => {
-          const match = req.url?.match(regexId);
-          if (!match)
-            return next();
-          const [, no, type] = match;
-          const idx = Number.parseInt(no) - 1;
-          if (type === "json" && req.method === "GET") {
-            res.write(JSON.stringify(withRenderedNote(data.slides[idx])));
-            return res.end();
-          }
-          if (type === "json" && req.method === "POST") {
-            const body = await getBodyJson(req);
-            const slide = data.slides[idx];
-            if (body.content && body.content !== slide.source.content)
-              hmrPages.add(idx);
-            if (body.content)
-              slide.content = slide.source.content = body.content;
-            if (body.note)
-              slide.note = slide.source.note = body.note;
-            if (body.frontmatter)
-              updateFrontmatterPatch(slide, body.frontmatter);
-            parser2.prettifySlide(slide.source);
-            const fileContent = await parser2.save(data.markdownFiles[slide.source.filepath]);
-            if (body.skipHmr) {
-              skipHmr = {
-                filePath: slide.source.filepath,
-                fileContent
-              };
+  function getSourceId(index, type) {
+    return `${data.slides[index].source.filepath}__slidev_${index + 1}.${type}`;
+  }
+  function updateServerWatcher() {
+    if (!server)
+      return;
+    server.watcher.add(data.watchFiles);
+  }
+  function getFrontmatter(pageNo) {
+    return {
+      ...data.headmatter?.defaults || {},
+      ...data.slides[pageNo]?.frontmatter || {}
+    };
+  }
+  return {
+    name: "slidev:loader",
+    configureServer(_server) {
+      server = _server;
+      updateServerWatcher();
+      server.middlewares.use(async (req, res, next) => {
+        const match = req.url?.match(regexSlideReqPath);
+        if (!match)
+          return next();
+        const [, no] = match;
+        const idx = Number.parseInt(no) - 1;
+        if (req.method === "GET") {
+          res.write(JSON.stringify(withRenderedNote(data.slides[idx])));
+          return res.end();
+        } else if (req.method === "POST") {
+          const body = await getBodyJson(req);
+          const slide = data.slides[idx];
+          if (body.content && body.content !== slide.source.content)
+            hmrPages.add(idx);
+          if (body.content)
+            slide.content = slide.source.content = body.content;
+          if (body.note)
+            slide.note = slide.source.note = body.note;
+          if (body.frontmatter)
+            updateFrontmatterPatch(slide, body.frontmatter);
+          parser2.prettifySlide(slide.source);
+          const fileContent = await parser2.save(data.markdownFiles[slide.source.filepath]);
+          if (body.skipHmr) {
+            skipHmr = {
+              filePath: slide.source.filepath,
+              fileContent
+            };
+            server?.moduleGraph.invalidateModule(
+              server.moduleGraph.getModuleById(getSourceId(idx, "md"))
+            );
+            if (body.frontmatter) {
               server?.moduleGraph.invalidateModule(
-                server.moduleGraph.getModuleById(`${VIRTUAL_SLIDE_PREFIX}${no}.md`)
+                server.moduleGraph.getModuleById(getSourceId(idx, "frontmatter"))
               );
-              if (body.frontmatter) {
-                server?.moduleGraph.invalidateModule(
-                  server.moduleGraph.getModuleById(`${VIRTUAL_SLIDE_PREFIX}${no}.frontmatter`)
-                );
-              }
             }
-            res.statusCode = 200;
-            res.write(JSON.stringify(withRenderedNote(slide)));
-            return res.end();
           }
-          next();
-        });
-      },
-      async handleHotUpdate(ctx) {
-        if (!data.watchFiles.includes(ctx.file))
-          return;
-        await ctx.read();
-        const newData = await serverOptions.loadData?.();
-        if (!newData)
-          return [];
-        if (skipHmr && newData.markdownFiles[skipHmr.filePath]?.raw === skipHmr.fileContent) {
-          skipHmr = null;
-          return [];
+          res.statusCode = 200;
+          res.write(JSON.stringify(withRenderedNote(slide)));
+          return res.end();
         }
-        const moduleIds = /* @__PURE__ */ new Set();
-        if (data.slides.length !== newData.slides.length) {
-          moduleIds.add(templateSlides.id);
-          range(newData.slides.length).map((i) => hmrPages.add(i));
-        }
-        if (!equal(data.headmatter.defaults, newData.headmatter.defaults)) {
-          moduleIds.add(templateSlides.id);
-          range(data.slides.length).map((i) => hmrPages.add(i));
-        }
-        if (!equal(data.config, newData.config))
-          moduleIds.add(templateConfigs.id);
-        if (!equal(data.features, newData.features)) {
-          setTimeout(() => {
-            ctx.server.hot.send({ type: "full-reload" });
-          }, 1);
-        }
-        const length = Math.min(data.slides.length, newData.slides.length);
-        for (let i = 0; i < length; i++) {
-          const a = data.slides[i];
-          const b = newData.slides[i];
-          if (!hmrPages.has(i) && a.content.trim() === b.content.trim() && a.title?.trim() === b.title?.trim() && equal(a.frontmatter, b.frontmatter)) {
-            if (a.note !== b.note) {
-              ctx.server.hot.send(
-                "slidev:update-note",
-                {
-                  no: i + 1,
-                  note: b.note || "",
-                  noteHTML: renderNote(b.note || "")
-                }
-              );
-            }
-            continue;
+        next();
+      });
+    },
+    async handleHotUpdate(ctx) {
+      if (!data.watchFiles.includes(ctx.file))
+        return;
+      await ctx.read();
+      const newData = await serverOptions.loadData?.();
+      if (!newData)
+        return [];
+      if (skipHmr && newData.markdownFiles[skipHmr.filePath]?.raw === skipHmr.fileContent) {
+        skipHmr = null;
+        return [];
+      }
+      const moduleIds = /* @__PURE__ */ new Set();
+      if (data.slides.length !== newData.slides.length) {
+        moduleIds.add(templateSlides.id);
+        range(newData.slides.length).map((i) => hmrPages.add(i));
+      }
+      if (!equal(data.headmatter.defaults, newData.headmatter.defaults)) {
+        moduleIds.add(templateSlides.id);
+        range(data.slides.length).map((i) => hmrPages.add(i));
+      }
+      if (!equal(data.config, newData.config))
+        moduleIds.add(templateConfigs.id);
+      if (!equal(data.features, newData.features)) {
+        setTimeout(() => {
+          ctx.server.hot.send({ type: "full-reload" });
+        }, 1);
+      }
+      const length = Math.min(data.slides.length, newData.slides.length);
+      for (let i = 0; i < length; i++) {
+        const a = data.slides[i];
+        const b = newData.slides[i];
+        if (!hmrPages.has(i) && a.content.trim() === b.content.trim() && a.title?.trim() === b.title?.trim() && equal(a.frontmatter, b.frontmatter)) {
+          if (a.note !== b.note) {
+            ctx.server.hot.send(
+              "slidev:update-note",
+              {
+                no: i + 1,
+                note: b.note || "",
+                noteHTML: renderNote(b.note || "")
+              }
+            );
           }
-          ctx.server.hot.send(
-            "slidev:update-slide",
-            {
-              no: i + 1,
-              data: withRenderedNote(newData.slides[i])
-            }
-          );
-          hmrPages.add(i);
-        }
-        Object.assign(data, newData);
-        Object.assign(utils, createDataUtils(newData));
-        if (hmrPages.size > 0)
-          moduleIds.add(templateTitleRendererMd.id);
-        const vueModules = Array.from(hmrPages).flatMap((i) => {
-          const id = `${VIRTUAL_SLIDE_PREFIX}${i + 1}`;
-          const frontmatter = ctx.server.moduleGraph.getModuleById(`${id}.frontmatter`);
-          const main = ctx.server.moduleGraph.getModuleById(`${id}.md`);
-          const styles = main ? [...main.clientImportedModules].find((m) => m.id?.startsWith(`${id}.md?vue&type=style`)) : void 0;
-          return [
-            frontmatter,
-            main,
-            styles
-          ];
-        });
-        hmrPages.clear();
-        const moduleEntries = [
-          ...ctx.modules.filter((i) => i.id === templateMonacoRunDeps.id || i.id === templateMonacoTypes.id),
-          ...vueModules,
-          ...Array.from(moduleIds).map((id) => ctx.server.moduleGraph.getModuleById(id))
-        ].filter(notNullish).filter((i) => !i.id?.startsWith("/@id/@vite-icons"));
-        updateServerWatcher();
-        return moduleEntries;
-      },
-      resolveId(id) {
-        if (id.startsWith("/@slidev/"))
+          continue;
+        }
+        ctx.server.hot.send(
+          "slidev:update-slide",
+          {
+            no: i + 1,
+            data: withRenderedNote(newData.slides[i])
+          }
+        );
+        hmrPages.add(i);
+      }
+      Object.assign(data, newData);
+      Object.assign(utils, createDataUtils(newData, clientRoot, roots));
+      if (hmrPages.size > 0)
+        moduleIds.add(templateTitleRendererMd.id);
+      const vueModules = Array.from(hmrPages).flatMap((idx) => {
+        const frontmatter = ctx.server.moduleGraph.getModuleById(getSourceId(idx, "frontmatter"));
+        const main = ctx.server.moduleGraph.getModuleById(getSourceId(idx, "md"));
+        const styles = main ? [...main.clientImportedModules].find((m) => m.id?.includes(`&type=style`)) : void 0;
+        return [
+          frontmatter,
+          main,
+          styles
+        ];
+      });
+      hmrPages.clear();
+      const moduleEntries = [
+        ...ctx.modules.filter((i) => i.id === templateMonacoRunDeps.id || i.id === templateMonacoTypes.id),
+        ...vueModules,
+        ...Array.from(moduleIds).map((id) => ctx.server.moduleGraph.getModuleById(id))
+      ].filter(notNullish).filter((i) => !i.id?.startsWith("/@id/@vite-icons"));
+      updateServerWatcher();
+      return moduleEntries;
+    },
+    resolveId: {
+      order: "pre",
+      handler(id) {
+        if (id.startsWith("/@slidev/") || id.includes("__slidev_"))
           return id;
         return null;
-      },
-      async load(id) {
-        const template = templates.find((i) => i.id === id);
-        if (template) {
+      }
+    },
+    async load(id) {
+      const template = templates.find((i) => i.id === id);
+      if (template) {
+        return {
+          code: await template.getContent(options, templateCtx, this),
+          map: { mappings: "" }
+        };
+      }
+      const matchFacade = id.match(regexSlideFacadeId);
+      if (matchFacade) {
+        const [, no, type] = matchFacade;
+        const idx = +no - 1;
+        const sourceId = JSON.stringify(getSourceId(idx, type));
+        return [
+          `export * from ${sourceId}`,
+          `export { default } from ${sourceId}`
+        ].join("\n");
+      }
+      const matchSource = id.match(regexSlideSourceId);
+      if (matchSource) {
+        const [, no, type] = matchSource;
+        const idx = +no - 1;
+        const slide = data.slides[idx];
+        if (!slide)
+          return;
+        if (type === "md") {
           return {
-            code: await template.getContent(options, templateCtx, this),
+            code: slide.content,
             map: { mappings: "" }
           };
-        }
-        if (id.startsWith(VIRTUAL_SLIDE_PREFIX)) {
-          const remaning = id.slice(VIRTUAL_SLIDE_PREFIX.length);
-          const match = remaning.match(regexIdQuery);
-          if (match) {
-            const [, no, type] = match;
-            const pageNo = Number.parseInt(no) - 1;
-            const slide = data.slides[pageNo];
-            if (!slide)
-              return;
-            if (type === "md") {
-              return {
-                code: slide?.content,
-                map: { mappings: "" }
-              };
-            } else if (type === "frontmatter") {
-              const slideBase = {
-                ...withRenderedNote(slide),
-                frontmatter: void 0,
-                source: void 0,
-                importChain: void 0,
-                // remove raw content in build, optimize the bundle size
-                ...mode === "build" ? { raw: "", content: "", note: "" } : {}
-              };
-              const fontmatter = getFrontmatter(pageNo);
-              return {
-                code: [
-                  "// @unocss-include",
-                  'import { computed, reactive, shallowReactive } from "vue"',
-                  `export const frontmatterData = ${JSON.stringify(fontmatter)}`,
-                  // handle HMR, update frontmatter with update
-                  "if (import.meta.hot) {",
-                  "  const firstLoad = !import.meta.hot.data.frontmatter",
-                  "  import.meta.hot.data.frontmatter ??= reactive(frontmatterData)",
-                  "  import.meta.hot.accept(({ frontmatterData: update }) => {",
-                  "    if (firstLoad) return",
-                  "    const frontmatter = import.meta.hot.data.frontmatter",
-                  "    Object.keys(frontmatter).forEach(key => {",
-                  "      if (!(key in update)) delete frontmatter[key]",
-                  "    })",
-                  "    Object.assign(frontmatter, update)",
-                  "  })",
-                  "}",
-                  "export const frontmatter = import.meta.hot ? import.meta.hot.data.frontmatter : reactive(frontmatterData)",
-                  "export default frontmatter",
-                  "export const meta = shallowReactive({",
-                  "  get layout(){ return frontmatter.layout },",
-                  "  get transition(){ return frontmatter.transition },",
-                  "  get class(){ return frontmatter.class },",
-                  "  get clicks(){ return frontmatter.clicks },",
-                  "  get name(){ return frontmatter.name },",
-                  "  get preload(){ return frontmatter.preload },",
-                  // No need to be reactive, as it's only used once after reload
-                  "  slide: {",
-                  `    ...(${JSON.stringify(slideBase)}),`,
-                  `    frontmatter,`,
-                  `    filepath: ${JSON.stringify(mode === "dev" ? slide.source.filepath : "")},`,
-                  `    start: ${JSON.stringify(slide.source.start)},`,
-                  `    id: ${pageNo},`,
-                  `    no: ${no},`,
-                  "  },",
-                  "  __clicksContext: null,",
-                  "  __preloaded: false,",
-                  "})"
-                ].join("\n"),
-                map: { mappings: "" }
-              };
-            }
-          }
+        } else if (type === "frontmatter") {
+          const slideBase = {
+            ...withRenderedNote(slide),
+            frontmatter: void 0,
+            source: void 0,
+            importChain: void 0,
+            // remove raw content in build, optimize the bundle size
+            ...mode === "build" ? { raw: "", content: "", note: "" } : {}
+          };
+          const fontmatter = getFrontmatter(idx);
           return {
-            code: "",
+            code: [
+              "// @unocss-include",
+              'import { computed, reactive, shallowReactive } from "vue"',
+              `export const frontmatterData = ${JSON.stringify(fontmatter)}`,
+              // handle HMR, update frontmatter with update
+              "if (import.meta.hot) {",
+              "  const firstLoad = !import.meta.hot.data.frontmatter",
+              "  import.meta.hot.data.frontmatter ??= reactive(frontmatterData)",
+              "  import.meta.hot.accept(({ frontmatterData: update }) => {",
+              "    if (firstLoad) return",
+              "    const frontmatter = import.meta.hot.data.frontmatter",
+              "    Object.keys(frontmatter).forEach(key => {",
+              "      if (!(key in update)) delete frontmatter[key]",
+              "    })",
+              "    Object.assign(frontmatter, update)",
+              "  })",
+              "}",
+              "export const frontmatter = import.meta.hot ? import.meta.hot.data.frontmatter : reactive(frontmatterData)",
+              "export default frontmatter",
+              "export const meta = shallowReactive({",
+              "  get layout(){ return frontmatter.layout },",
+              "  get transition(){ return frontmatter.transition },",
+              "  get class(){ return frontmatter.class },",
+              "  get clicks(){ return frontmatter.clicks },",
+              "  get name(){ return frontmatter.name },",
+              "  get preload(){ return frontmatter.preload },",
+              // No need to be reactive, as it's only used once after reload
+              "  slide: {",
+              `    ...(${JSON.stringify(slideBase)}),`,
+              `    frontmatter,`,
+              `    filepath: ${JSON.stringify(mode === "dev" ? slide.source.filepath : "")},`,
+              `    start: ${JSON.stringify(slide.source.start)},`,
+              `    id: ${idx},`,
+              `    no: ${no},`,
+              "  },",
+              "  __clicksContext: null,",
+              "  __preloaded: false,",
+              "})"
+            ].join("\n"),
             map: { mappings: "" }
           };
         }
       }
-    },
-    {
-      name: "slidev:layout-transform:pre",
-      enforce: "pre",
-      async transform(code, id) {
-        if (!id.startsWith(VIRTUAL_SLIDE_PREFIX))
-          return;
-        const remaning = id.slice(VIRTUAL_SLIDE_PREFIX.length);
-        const match = remaning.match(regexIdQuery);
-        if (!match)
-          return;
-        const [, no, type] = match;
-        if (type !== "md")
-          return;
-        return transformMarkdown(code, +no - 1);
-      }
-    },
-    {
-      name: "slidev:context-transform:pre",
-      enforce: "pre",
-      async transform(code, id) {
-        if (!id.endsWith(".vue") || id.includes("/@slidev/client/") || id.includes("/packages/client/"))
-          return;
-        return transformVue(code);
-      }
-    },
-    {
-      name: "slidev:slide-transform:post",
-      enforce: "post",
-      transform(code, id) {
-        if (!id.match(/\/@slidev\/slides\/\d+\.md($|\?)/))
-          return;
-        const replaced = code.replace("if (_rerender_only)", "if (false)");
-        if (replaced !== code)
-          return replaced;
-      }
-    }
-  ];
-  function updateServerWatcher() {
-    if (!server)
-      return;
-    server.watcher.add(data.watchFiles);
-  }
-  function getFrontmatter(pageNo) {
-    return {
-      ...data.headmatter?.defaults || {},
-      ...data.slides[pageNo]?.frontmatter || {}
-    };
-  }
-  async function transformMarkdown(code, index) {
-    const layouts = await templateCtx.getLayouts();
-    const frontmatter = getFrontmatter(index);
-    let layoutName = frontmatter?.layout || (index === 0 ? "cover" : "default");
-    if (!layouts[layoutName]) {
-      console.error(red(`
-Unknown layout "${bold(layoutName)}".${yellow(" Available layouts are:")}`) + Object.keys(layouts).map((i, idx) => (idx % 3 === 0 ? "\n    " : "") + gray(i.padEnd(15, " "))).join("  "));
-      console.error();
-      layoutName = "default";
     }
-    delete frontmatter.title;
-    const imports = [
-      `import InjectedLayout from "${toAtFS(layouts[layoutName])}"`,
-      templateImportContextUtils,
-      templateInitContext,
-      templateInjectionMarker
-    ];
-    code = code.replace(/(<script setup.*>)/g, `$1
-${imports.join("\n")}
-`);
-    const injectA = code.indexOf("<template>") + "<template>".length;
-    const injectB = code.lastIndexOf("</template>");
-    let body = code.slice(injectA, injectB).trim();
-    if (body.startsWith("<div>") && body.endsWith("</div>"))
-      body = body.slice(5, -6);
-    code = `${code.slice(0, injectA)}
-<InjectedLayout v-bind="_frontmatterToProps($frontmatter,${index})">
-${body}
-</InjectedLayout>
-${code.slice(injectB)}`;
-    return code;
-  }
-  function transformVue(code) {
-    if (code.includes(templateInjectionMarker) || code.includes("useSlideContext()"))
-      return code;
-    const imports = [
-      templateImportContextUtils,
-      templateInitContext,
-      templateInjectionMarker
-    ];
-    const matchScript = code.match(/<script((?!setup).)*(setup)?.*>/);
-    if (matchScript && matchScript[2]) {
-      return code.replace(/(<script.*>)/g, `$1
-${imports.join("\n")}
-`);
-    } else if (matchScript && !matchScript[2]) {
-      const matchExport = code.match(/export\s+default\s+\{/);
-      if (matchExport) {
-        const exportIndex = (matchExport.index || 0) + matchExport[0].length;
-        let component = code.slice(exportIndex);
-        component = component.slice(0, component.indexOf("</script>"));
-        const scriptIndex = (matchScript.index || 0) + matchScript[0].length;
-        const provideImport = '\nimport { injectionSlidevContext } from "@slidev/client/constants.ts"\n';
-        code = `${code.slice(0, scriptIndex)}${provideImport}${code.slice(scriptIndex)}`;
-        let injectIndex = exportIndex + provideImport.length;
-        let injectObject = "$slidev: { from: injectionSlidevContext },";
-        const matchInject = component.match(/.*inject\s*:\s*([[{])/);
-        if (matchInject) {
-          injectIndex += (matchInject.index || 0) + matchInject[0].length;
-          if (matchInject[1] === "[") {
-            let injects = component.slice((matchInject.index || 0) + matchInject[0].length);
-            const injectEndIndex = injects.indexOf("]");
-            injects = injects.slice(0, injectEndIndex);
-            injectObject += injects.split(",").map((inject) => `${inject}: {from: ${inject}}`).join(",");
-            return `${code.slice(0, injectIndex - 1)}{
-${injectObject}
-}${code.slice(injectIndex + injectEndIndex + 1)}`;
-          } else {
-            return `${code.slice(0, injectIndex)}
-${injectObject}
-${code.slice(injectIndex)}`;
-          }
-        }
-        return `${code.slice(0, injectIndex)}
-inject: { ${injectObject} },
-${code.slice(injectIndex)}`;
-      }
-    }
-    return `<script setup>
-${imports.join("\n")}
-</script>
-${code}`;
-  }
+  };
 }
 
 // node/vite/unocss.ts
@@ -8890,7 +8783,7 @@ function loadPrismPlugin(name) {
   try {
     require2(`prismjs/plugins/${name}/prism-${name}`);
   } catch (e) {
-    throw new Error(`Cannot load Prism plugin "${name}". Please check the spelling.`);
+    throw new Error(`Cannot load Prism plugin "${name}". Please check the spelling.`, { cause: e });
   }
 }
 function selectLanguage(options, lang) {
@@ -8994,7 +8887,7 @@ function markdownItVDrag(md, markdownTransformMap) {
 }
 
 // node/syntax/transform/code-wrapper.ts
-var reCodeBlock = /^```([\w'-]+)(?:\s*\{([\w*,|-]+)\}\s*?(\{[^}]*\})?([^\r\n]*))?\r?\n(\S[\s\S]*?)^```$/gm;
+var reCodeBlock = /^```([\w'-]+)?\s*(?:\{([\w*,|-]+)\}\s*?(\{[^}]*\})?([^\r\n]*))?\r?\n(\S[\s\S]*?)^```$/gm;
 function transformCodeWrapper(ctx) {
   ctx.s.replace(
     reCodeBlock,
@@ -9095,7 +8988,7 @@ function createMonacoWriter({ userRoot }) {
           let json;
           try {
             json = JSON.parse(data.toString());
-          } catch (e) {
+          } catch {
             return;
           }
           if (json.type === "custom" && json.event === "slidev:monaco-write") {
@@ -9598,6 +9491,130 @@ async function createVuePlugin(options, pluginOptions) {
   ];
 }
 
+// node/vite/layoutWrapper.ts
+import { bold, gray, red, yellow } from "kolorist";
+function createLayoutWrapperPlugin({ data, utils }) {
+  return {
+    name: "slidev:layout-wrapper",
+    async transform(code, id) {
+      const match = id.match(regexSlideSourceId);
+      if (!match)
+        return;
+      const [, no, type] = match;
+      if (type !== "md")
+        return;
+      const index = +no - 1;
+      const layouts = await utils.getLayouts();
+      const rawLayoutName = data.slides[index]?.frontmatter?.layout ?? data.slides[0]?.frontmatter?.default?.layout;
+      let layoutName = rawLayoutName || (index === 0 ? "cover" : "default");
+      if (!layouts[layoutName]) {
+        console.error(red(`
+Unknown layout "${bold(layoutName)}".${yellow(" Available layouts are:")}`) + Object.keys(layouts).map((i, idx) => (idx % 3 === 0 ? "\n    " : "") + gray(i.padEnd(15, " "))).join("  "));
+        console.error();
+        layoutName = "default";
+      }
+      const setupTag = code.match(/^<script setup.*>/m);
+      if (!setupTag)
+        throw new Error(`[Slidev] Internal error: <script setup> block not found in slide ${index + 1}.`);
+      const templatePart = code.slice(0, setupTag.index);
+      const scriptPart = code.slice(setupTag.index);
+      const bodyStart = templatePart.indexOf("<template>") + 10;
+      const bodyEnd = templatePart.lastIndexOf("</template>");
+      let body = code.slice(bodyStart, bodyEnd).trim();
+      if (body.startsWith("<div>") && body.endsWith("</div>"))
+        body = body.slice(5, -6);
+      return [
+        templatePart.slice(0, bodyStart),
+        `<InjectedLayout v-bind="_frontmatterToProps($frontmatter,${index})">
+${body}
+</InjectedLayout>`,
+        templatePart.slice(bodyEnd),
+        scriptPart.slice(0, setupTag[0].length),
+        `import InjectedLayout from "${toAtFS(layouts[layoutName])}"`,
+        templateImportContextUtils,
+        templateInitContext,
+        "$clicksContext.setup()",
+        templateInjectionMarker,
+        scriptPart.slice(setupTag[0].length)
+      ].join("\n");
+    }
+  };
+}
+
+// node/vite/contextInjection.ts
+function createContextInjectionPlugin() {
+  return {
+    name: "slidev:context-injection",
+    async transform(code, id) {
+      if (!id.endsWith(".vue") || id.includes("/@slidev/client/") || id.includes("/packages/client/"))
+        return;
+      if (code.includes(templateInjectionMarker) || code.includes("useSlideContext()"))
+        return code;
+      const imports = [
+        templateImportContextUtils,
+        templateInitContext,
+        templateInjectionMarker
+      ];
+      const matchScript = code.match(/<script((?!setup).)*(setup)?.*>/);
+      if (matchScript && matchScript[2]) {
+        return code.replace(/(<script.*>)/g, `$1
+${imports.join("\n")}
+`);
+      } else if (matchScript && !matchScript[2]) {
+        const matchExport = code.match(/export\s+default\s+\{/);
+        if (matchExport) {
+          const exportIndex = (matchExport.index || 0) + matchExport[0].length;
+          let component = code.slice(exportIndex);
+          component = component.slice(0, component.indexOf("</script>"));
+          const scriptIndex = (matchScript.index || 0) + matchScript[0].length;
+          const provideImport = '\nimport { injectionSlidevContext } from "@slidev/client/constants.ts"\n';
+          code = `${code.slice(0, scriptIndex)}${provideImport}${code.slice(scriptIndex)}`;
+          let injectIndex = exportIndex + provideImport.length;
+          let injectObject = "$slidev: { from: injectionSlidevContext },";
+          const matchInject = component.match(/.*inject\s*:\s*([[{])/);
+          if (matchInject) {
+            injectIndex += (matchInject.index || 0) + matchInject[0].length;
+            if (matchInject[1] === "[") {
+              let injects = component.slice((matchInject.index || 0) + matchInject[0].length);
+              const injectEndIndex = injects.indexOf("]");
+              injects = injects.slice(0, injectEndIndex);
+              injectObject += injects.split(",").map((inject) => `${inject}: {from: ${inject}}`).join(",");
+              return `${code.slice(0, injectIndex - 1)}{
+${injectObject}
+}${code.slice(injectIndex + injectEndIndex + 1)}`;
+            } else {
+              return `${code.slice(0, injectIndex)}
+${injectObject}
+${code.slice(injectIndex)}`;
+            }
+          }
+          return `${code.slice(0, injectIndex)}
+inject: { ${injectObject} },
+${code.slice(injectIndex)}`;
+        }
+      }
+      return `<script setup>
+${imports.join("\n")}
+</script>
+${code}`;
+    }
+  };
+}
+
+// node/vite/hmrPatch.ts
+function createHmrPatchPlugin() {
+  return {
+    name: "slidev:slide-transform:post",
+    transform(code, id) {
+      if (!id.match(regexSlideSourceId))
+        return;
+      const replaced = code.replace("if (_rerender_only)", "if (false)");
+      if (replaced !== code)
+        return replaced;
+    }
+  };
+}
+
 // node/vite/index.ts
 async function ViteSlidevPlugin(options, pluginOptions, serverOptions = {}) {
   const {
@@ -9616,10 +9633,12 @@ async function ViteSlidevPlugin(options, pluginOptions, serverOptions = {}) {
   const drawingData = await loadDrawings(options);
   const publicRoots = [...themeRoots, ...addonRoots].map((i) => join9(i, "public")).filter(existsSync6);
   const plugins = [
+    createSlidesLoader(options, serverOptions),
     createMarkdownPlugin(options, pluginOptions),
+    createLayoutWrapperPlugin(options),
+    createContextInjectionPlugin(),
     createVuePlugin(options, pluginOptions),
-    createSlidesLoader(options, pluginOptions, serverOptions),
-    createMonacoWriter(options),
+    createHmrPatchPlugin(),
     Components({
       extensions: ["vue", "md", "js", "ts", "jsx", "tsx"],
       dirs: [
@@ -9642,7 +9661,7 @@ async function ViteSlidevPlugin(options, pluginOptions, serverOptions = {}) {
     }),
     Icons({
       defaultClass: "slidev-icon",
-      collectionsNodeResolvePath: fileURLToPath4(import.meta.url),
+      collectionsNodeResolvePath: options.cliRoot,
       ...iconsOptions
     }),
     config.remoteAssets === true || config.remoteAssets === mode ? import("vite-plugin-remote-assets").then((r) => r.VitePluginRemoteAssets({
@@ -9670,7 +9689,8 @@ async function ViteSlidevPlugin(options, pluginOptions, serverOptions = {}) {
         ...serverRefOptions.state
       },
       onChanged(key, data, patch, timestamp) {
-        serverRefOptions.onChanged && serverRefOptions.onChanged(key, data, patch, timestamp);
+        if (serverRefOptions.onChanged)
+          serverRefOptions.onChanged(key, data, patch, timestamp);
         if (!options.data.config.drawings.persist)
           return;
         if (key === "drawings")
@@ -9679,6 +9699,7 @@ async function ViteSlidevPlugin(options, pluginOptions, serverOptions = {}) {
     }),
     createConfigPlugin(options),
     createMonacoTypesLoader(options),
+    createMonacoWriter(options),
     createVueCompilerFlagsPlugin(options),
     createUnocssPlugin(options, pluginOptions),
     publicRoots.length ? import("vite-plugin-static-copy").then((r) => r.viteStaticCopy({

package/dist/cli.mjs

@@ -1,6 +1,6 @@
 import {
   createServer
-} from "./chunk-X5LWKCT6.mjs";
+} from "./chunk-KRQVQU6O.mjs";
 import {
   getThemeMeta,
   loadSetups,
@@ -9,7 +9,7 @@ import {
   resolveOptions,
   resolveTheme,
   version
-} from "./chunk-VAXCTWQX.mjs";
+} from "./chunk-T42M3I2X.mjs";
 import {
   getRoots,
   isInstalledGlobally,
@@ -325,7 +325,7 @@ cli.command(
   }).strict().help(),
   async (args) => {
     const { entry, theme, base, download, out, inspect } = args;
-    const { build } = await import("./build-J45HACJD.mjs");
+    const { build } = await import("./build-OXWIETNK.mjs");
     for (const entryFile of entry) {
       const options = await resolveOptions({ entry: entryFile, theme, inspect }, "build");
       if (download && !options.data.config.download)

package/dist/index.d.mts

@@ -9,6 +9,6 @@ declare function ViteSlidevPlugin(options: ResolvedSlidevOptions, pluginOptions:
 declare function createServer(options: ResolvedSlidevOptions, viteConfig?: InlineConfig, serverOptions?: SlidevServerOptions): Promise<vite.ViteDevServer>;
 
 declare function resolveOptions(options: SlidevEntryOptions, mode: ResolvedSlidevOptions['mode']): Promise<ResolvedSlidevOptions>;
-declare function createDataUtils(data: SlidevData): ResolvedSlidevUtils;
+declare function createDataUtils(data: SlidevData, clientRoot: string, roots: string[]): ResolvedSlidevUtils;
 
 export { ViteSlidevPlugin, createDataUtils, createServer, resolveOptions };

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import {
   createServer
-} from "./chunk-X5LWKCT6.mjs";
+} from "./chunk-KRQVQU6O.mjs";
 import {
   ViteSlidevPlugin,
   createDataUtils,
   parser,
   resolveOptions
-} from "./chunk-VAXCTWQX.mjs";
+} from "./chunk-T42M3I2X.mjs";
 import "./chunk-27Q2X57X.mjs";
 export {
   ViteSlidevPlugin,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/cli",
-  "version": "0.49.15",
+  "version": "0.49.17",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -48,11 +48,11 @@
     "@iconify-json/ph": "^1.1.13",
     "@iconify-json/svg-spinners": "^1.1.2",
     "@lillallol/outline-pdf": "^4.0.0",
-    "@shikijs/markdown-it": "^1.10.0",
-    "@shikijs/twoslash": "^1.10.0",
-    "@shikijs/vitepress-twoslash": "^1.10.0",
-    "@unocss/extractor-mdc": "^0.61.2",
-    "@unocss/reset": "^0.61.2",
+    "@shikijs/markdown-it": "^1.10.3",
+    "@shikijs/twoslash": "^1.10.3",
+    "@shikijs/vitepress-twoslash": "^1.10.3",
+    "@unocss/extractor-mdc": "^0.61.3",
+    "@unocss/reset": "^0.61.3",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "chokidar": "^3.6.0",
@@ -67,7 +67,7 @@
     "htmlparser2": "^9.1.0",
     "is-installed-globally": "^1.0.0",
     "jiti": "^1.21.6",
-    "katex": "^0.16.10",
+    "katex": "^0.16.11",
     "kolorist": "^1.8.0",
     "local-pkg": "^0.5.0",
     "lz-string": "^1.5.0",
@@ -90,28 +90,28 @@
     "resolve-from": "^5.0.0",
     "resolve-global": "^2.0.0",
     "semver": "^7.6.2",
-    "shiki": "^1.10.0",
+    "shiki": "^1.10.3",
     "shiki-magic-move": "^0.4.2",
     "sirv": "^2.0.4",
     "source-map-js": "^1.2.0",
-    "typescript": "^5.5.2",
-    "unocss": "^0.61.2",
+    "typescript": "^5.5.3",
+    "unocss": "^0.61.3",
     "unplugin-icons": "^0.19.0",
     "unplugin-vue-components": "^0.27.2",
     "unplugin-vue-markdown": "^0.26.2",
     "untun": "^0.1.3",
     "uqr": "^0.1.2",
-    "vite": "^5.3.2",
+    "vite": "^5.3.3",
     "vite-plugin-inspect": "^0.8.4",
-    "vite-plugin-remote-assets": "^0.4.1",
-    "vite-plugin-static-copy": "^1.0.5",
+    "vite-plugin-remote-assets": "^0.5.0",
+    "vite-plugin-static-copy": "^1.0.6",
     "vite-plugin-vue-server-ref": "^0.4.2",
     "vitefu": "^0.2.5",
-    "vue": "^3.4.31",
+    "vue": "^3.4.32",
     "yargs": "^17.7.2",
-    "@slidev/client": "0.49.15",
-    "@slidev/types": "0.49.15",
-    "@slidev/parser": "0.49.15"
+    "@slidev/parser": "0.49.17",
+    "@slidev/types": "0.49.17",
+    "@slidev/client": "0.49.17"
   },
   "devDependencies": {
     "@hedgedoc/markdown-it-plugins": "^2.1.4",

package/template.md

@@ -6,7 +6,7 @@ theme: seriph
 background: https://cover.sli.dev
 # apply any unocss classes to the current slide
 class: 'text-center'
-# https://sli.dev/custom/highlighters.html
+# https://sli.dev/custom/config-highlighter.html
 highlighter: shiki
 # some information about the slides, markdown enabled
 info: |
@@ -115,7 +115,7 @@ Hover on the bottom-left corner to see the navigation's control panel, [learn mo
 | <kbd>up</kbd> | previous slide |
 | <kbd>down</kbd> | next slide |
 
-<!-- https://sli.dev/guide/animations.html#click-animations -->
+<!-- https://sli.dev/guide/animations.html#click-animation -->
 <img
   v-click
   class="absolute -bottom-9 -left-7 w-80 opacity-50"