@slidev/cli 0.48.0-beta.3 → 0.48.0-beta.4

package/template.md

@@ -14,6 +14,9 @@ info: |
   Presentation slides for developers.
 
   Learn more at [Sli.dev](https://sli.dev)
+transition: slide-left
+title: Welcome to Slidev
+mdc: true
 ---
 
 # Welcome to Slidev
@@ -21,20 +24,27 @@ info: |
 Presentation slides for developers
 
 <div class="pt-12">
-  <span @click="$slidev.nav.next" class="px-2 p-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
+  <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>
 </div>
 
-<a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" title="Open in GitHub"
-  class="abs-br m-6 text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
-  <carbon-logo-github />
-</a>
+<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 />
+  </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">
+    <carbon-logo-github />
+  </a>
+</div>
 
 <!--
 The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
 -->
 
+---
+transition: fade-out
 ---
 
 # What is Slidev?
@@ -71,6 +81,25 @@ h1 {
 }
 </style>
 
+<!--
+Here is another comment.
+-->
+
+---
+layout: default
+---
+
+# Table of contents
+
+```html
+<Toc minDepth="1" maxDepth="1"></Toc>
+```
+
+<Toc maxDepth="1"></Toc>
+
+---
+transition: slide-up
+level: 2
 ---
 
 # Navigation
@@ -82,7 +111,7 @@ Hover on the bottom-left corner to see the navigation's controls panel, [learn m
 |     |     |
 | --- | --- |
 | <kbd>right</kbd> / <kbd>space</kbd>| next animation or slide |
-| <kbd>left</kbd>  / <kbd>shift</kbd><kbd>space</kbd>| previous animation or slide |
+| <kbd>left</kbd>  / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide |
 | <kbd>up</kbd> | previous slide |
 | <kbd>down</kbd> | next slide |
 
@@ -102,26 +131,41 @@ image: https://source.unsplash.com/collection/94734566/1920x1080
 
 # Code
 
-Use code snippets and get the highlighting directly!
+Use code snippets and get the highlighting directly, and even types hover![^1]
 
-<!-- https://sli.dev/guide/syntax.html#line-highlighting -->
+```ts {all|5|7|7-8|10|all} twoslash
+// TwoSlash enables TypeScript hover information
+// and errors in markdown code blocks
+// More at https://shiki.style/packages/twoslash
 
-```ts {all|2|1-6|9|all}
-interface User {
-  id: number
-  firstName: string
-  lastName: string
-  role: string
-}
+import { computed, ref } from 'vue'
 
-function updateUser(id: number, update: User) {
-  const user = getUser(id)
-  const newUser = { ...user, ...update }
-  saveUser(id, newUser)
-}
+const count = ref(0)
+const doubled = computed(() => count.value * 2)
+
+doubled.value = 2
 ```
 
-<arrow v-click="[3, 4]" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1" />
+<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" />
+
+<!-- This allow you to embed external code blocks -->
+<!-- <<< @/snippets/external.ts#snippet -->
+
+<!-- Footer -->
+[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)
+
+<!-- Inline style -->
+<style>
+.footnotes-sep {
+  @apply mt-5 opacity-10;
+}
+.footnotes {
+  @apply text-sm opacity-75;
+}
+.footnote-backref {
+  display: none;
+}
+</style>
 
 ---
 
@@ -155,13 +199,23 @@ Check out [the guides](https://sli.dev/builtin/components.html) for more.
 </div>
 </div>
 
+<!--
+Presenter note with **bold**, *italic*, and ~~striked~~ text.
+
+Also, HTML elements are valid:
+<div class="flex w-full">
+  <span style="flex-grow: 1;">Left content</span>
+  <span>Right content</span>
+</div>
+-->
+
 ---
 class: px-20
 ---
 
 # Themes
 
-Slidev comes with powerful theming support. Themes are able to provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
+Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
 
 <div grid="~ cols-2 gap-2" m="t-2">
 
@@ -276,7 +330,7 @@ LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/).
 Inline $\sqrt{3x-1}+(1+x)^2$
 
 Block
-$$
+$$ {1|3|all}
 \begin{array}{c}
 
 \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
@@ -299,9 +353,9 @@ $$
 
 You can create diagrams / graphs from textual descriptions, directly in your Markdown.
 
-<div class="grid grid-cols-2 gap-4 pt-4 -mb-6">
+<div class="grid grid-cols-4 gap-5 pt-4 -mb-6">
 
-```mermaid {scale: 0.9}
+```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
 sequenceDiagram
     Alice->John: Hello John, how are you?
     Note over Alice,John: A typical interaction
@@ -314,6 +368,59 @@ C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
 
+```mermaid
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectivness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+```
+
+```plantuml {scale: 0.7}
+@startuml
+
+package "Some Group" {
+  HTTP - [First Component]
+  [Another Component]
+}
+
+node "Other Groups" {
+  FTP - [Second Component]
+  [First Component] --> FTP
+}
+
+cloud {
+  [Example 1]
+}
+
+database "MySql" {
+  folder "This is my folder" {
+    [Folder 3]
+  }
+  frame "Foo" {
+    [Frame 4]
+  }
+}
+
+[Another Component] --> [Example 1]
+[Example 1] --> [Folder 3]
+[Folder 3] --> [Frame 4]
+
+@enduml
+```
+
 </div>
 
 [Learn More](https://sli.dev/guide/syntax.html#diagrams)
@@ -325,4 +432,4 @@ class: text-center
 
 # Learn More
 
-[Documentations](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev)
+[Documentations](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/showcases.html)

package/dist/chunk-DWXI5WEO.mjs

@@ -1,72 +0,0 @@
-// node/utils.ts
-import { join } from "node:path";
-import { createRequire } from "node:module";
-import { fileURLToPath } from "node:url";
-import { ensurePrefix, slash } from "@antfu/utils";
-import isInstalledGlobally from "is-installed-globally";
-import { resolvePath } from "mlly";
-import globalDirs from "global-directory";
-var require2 = createRequire(import.meta.url);
-function toAtFS(path) {
-  return `/@fs${ensurePrefix("/", slash(path))}`;
-}
-async function resolveImportPath(importName, ensure = false) {
-  try {
-    return await resolvePath(importName, {
-      url: fileURLToPath(import.meta.url)
-    });
-  } catch {
-  }
-  if (isInstalledGlobally) {
-    try {
-      return require2.resolve(join(globalDirs.yarn.packages, importName));
-    } catch {
-    }
-    try {
-      return require2.resolve(join(globalDirs.npm.packages, importName));
-    } catch {
-    }
-  }
-  if (ensure)
-    throw new Error(`Failed to resolve package "${importName}"`);
-  return void 0;
-}
-async function resolveGlobalImportPath(importName) {
-  try {
-    return await resolvePath(importName, {
-      url: fileURLToPath(import.meta.url)
-    });
-  } catch {
-  }
-  try {
-    return require2.resolve(join(globalDirs.yarn.packages, importName));
-  } catch {
-  }
-  try {
-    return require2.resolve(join(globalDirs.npm.packages, importName));
-  } catch {
-  }
-  throw new Error(`Failed to resolve global package "${importName}"`);
-}
-function stringifyMarkdownTokens(tokens) {
-  return tokens.map((token) => token.children?.filter((t) => ["text", "code_inline"].includes(t.type) && !t.content.match(/^\s*$/)).map((t) => t.content.trim()).join(" ")).filter(Boolean).join(" ");
-}
-function generateGoogleFontsUrl(options) {
-  const weights = options.weights.flatMap((i) => options.italic ? [`0,${i}`, `1,${i}`] : [`${i}`]).sort().join(";");
-  const fonts = options.webfonts.map((i) => `family=${i.replace(/^(['"])(.*)\1$/, "$1").replace(/\s+/g, "+")}:${options.italic ? "ital," : ""}wght@${weights}`).join("&");
-  return `https://fonts.googleapis.com/css2?${fonts}&display=swap`;
-}
-async function packageExists(name) {
-  if (await resolveImportPath(`${name}/package.json`).catch(() => false))
-    return true;
-  return false;
-}
-
-export {
-  toAtFS,
-  resolveImportPath,
-  resolveGlobalImportPath,
-  stringifyMarkdownTokens,
-  generateGoogleFontsUrl,
-  packageExists
-};