docs: update docs with latest features

.vitepress/config.ts

@@ -1,5 +1,6 @@
 import type { DefaultTheme } from 'vitepress'
 import { defineConfig } from 'vitepress'
+import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 
 const CURRENT_VERSION = '0.47.1'
 
@@ -124,10 +125,6 @@ const Customizations: (DefaultTheme.NavItemWithLink | DefaultTheme.NavItemChildr
     text: 'Configure UnoCSS',
     link: '/custom/config-unocss',
   },
-  {
-    text: 'Configure Windi CSS',
-    link: '/custom/config-windicss',
-  },
   {
     text: 'Configure Monaco',
     link: '/custom/config-monaco',
@@ -225,6 +222,9 @@ export default defineConfig({
         'markdown',
       )
     },
+    codeTransformers: [
+      transformerTwoslash(),
+    ],
   },
   cleanUrls: true,
   themeConfig: {

.vitepress/theme/components/Environment.vue

@@ -3,13 +3,13 @@ defineProps<{ type: 'node' | 'client' }>()
 </script>
 
 <template>
-  <details class="px-4 py-3 mt-4 rounded bg-gray-400 bg-opacity-10">
-    <summary class="outline-none">
+  <details class="p4 mt-4 rounded-lg bg-gray-400 bg-opacity-10">
+    <summary class="outline-none !m0 select-none">
       Environment:
-      <span class="capitalize" :class="type === 'node' ? 'text-orange-400' : 'text-green-400'">{{ type }}</span>
+      <span class="capitalize font-bold" :class="type === 'node' ? 'text-orange-400' : 'text-green-400'">{{ type }}</span>
     </summary>
 
-    <div class="mt-2 opacity-75">
+    <div class="pt2 opacity-75">
       <span v-if="type === 'node'">
         This setup function will only run on Node.js environment, you can have access to Node's API.
       </span>

.vitepress/theme/index.ts

@@ -1,12 +1,16 @@
-// import Layout from './Layout.vue'
-// import NotFound from './NotFound.vue'
 import Theme from 'vitepress/theme'
+import type { EnhanceAppContext } from 'vitepress'
+import TwoSlash from '@shikijs/vitepress-twoslash/client'
 
+import '@shikijs/vitepress-twoslash/style.css'
 import './styles/vars.css'
 import './styles/demo.css'
 import './styles/custom.css'
 import 'uno.css'
 
 export default {
   extends: Theme,
+  enhanceApp({ app }: EnhanceAppContext) {
+    app.use(TwoSlash as any)
+  },
 }

TRANSLATIONS.md

@@ -46,7 +46,6 @@ In case it's already been translated but you're wondering how to maintain it, sk
 - [ ] `config-shortcuts.md` - Configuring Shortcuts
 - [ ] `config-vite.md` - Configuring Vite
 - [ ] `config-vue.md` - Configuring Vue
-- [ ] `config-windicss.md`- Configuring Windicss
 - [ ] `directory-structure.md` - Configuring the directory structure
 - [ ] `fonts.md` - Configuring fonts
 - [ ] `global-layers.md` - Configuring the global layers

custom/config-vite.md

@@ -13,7 +13,6 @@ Slidev has the following plugins preconfigured:
 - [unplugin-icons](https://github.com/antfu/unplugin-icons)
 - [vite-plugin-vue-markdown](https://github.com/antfu/vite-plugin-vue-markdown)
 - [vite-plugin-remote-assets](https://github.com/antfu/vite-plugin-remote-assets)
-- [vite-plugin-windicss](https://github.com/windicss/vite-plugin-windicss)
 - [unocss/vite](https://github.com/unocss/unocss/tree/main/packages/vite)
 
 Learn more about the [pre-configurations here](https://github.com/slidevjs/slidev/blob/main/packages/slidev/node/plugins/preset.ts).

custom/config-windicss.md

@@ -3,14 +3,7 @@
 <Environment type="node" />
 
 ::: warning
-Since Slidev v0.42.0, [UnoCSS](/custom/config-unocss) become the default CSS framework for Slidev.
-
-You can still use Windi CSS by setting `css: windicss` in the frontmatter.
-```md
----
-css: windicss
----
-```
+Since Slidev v0.47.0, we no longer support Windi CSS. Please migrate to [UnoCSS](/custom/config-unocss).
 :::
 
 Markdown naturally supports embedded HTML markups. You can therefore style your content the way you want.

custom/directory-structure.md

@@ -115,18 +115,18 @@ import './code.css'
 import './layouts.css'
 ```
 
-Styles will be processed by [UnoCSS](https://unocss.dev/) and [PostCSS](https://postcss.org/), so you can use css nesting and [at-directives](https://windicss.org/features/directives.html) out-of-box. For example:
+Styles will be processed by [UnoCSS](https://unocss.dev/) and [PostCSS](https://postcss.org/), so you can use css nesting and [at-directives](https://unocss.dev/transformers/directives#apply) out-of-box. For example:
 
 ```less
 .slidev-layout {
-  @apply px-14 py-10 text-[1.1rem];
+  --uno: px-14 py-10 text-[1.1rem];
 
   h1, h2, h3, h4, p, div {
-    @apply select-none;
+    --uno: select-none;
   }
 
   pre, code {
-    @apply select-text;
+    --uno: select-text;
   }
 
   a {
@@ -135,7 +135,7 @@ Styles will be processed by [UnoCSS](https://unocss.dev/) and [PostCSS](https://
 }
 ```
 
-[Learn more about the syntax](https://windicss.org/features/directives.html).
+[Learn more about the syntax](https://unocss.dev/transformers/directives#apply).
 
 ## `index.html`
 

custom/fonts.md

@@ -11,7 +11,7 @@ In your frontmatter, configure as following
 fonts:
   # basically the text
   sans: Robot
-  # use with `font-serif` css class from windicss
+  # use with `font-serif` css class from UnoCSS
   serif: Robot Slab
   # for code blocks, inline code, etc.
   mono: Fira Code

custom/highlighters.md

@@ -49,22 +49,6 @@ export default defineShikiSetup(() => {
 
 Refer to [Shiki's docs](https://shiki.style) for available theme names.
 
-## TwoSlash Integration
-
-This feature is only available when you set `highlighter` to `shiki`.
-
-[TwoSlash](https://twoslash.netlify.app/) is a powerful tool for rendering TypeScript code blocks with type information on hover or inlined. It's quite useful for preparing slides for JavaScript/TypeScript-related topics.
-
-To use it, you can add `twoslash` to the code block's language identifier:
-
-~~~md
-```ts twoslash
-console.log('hello')
-```
-~~~
-
-An example of TwoSlash enabled code snippet [can be found here](https://antfu.me/posts/shikiji-twoslash).
-
 ## Configure Prism
 
 To configure your Prism, you can just import the theme CSS or use [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) to configure themes for both light and dark mode. Refer to its docs for more details.

custom/index.md

@@ -37,8 +37,8 @@ export:
   dark: false
   withClicks: false
   withToc: false
-# syntax highlighter, can be 'prism', 'shiki' or `shikiji`
-highlighter: prism
+# syntax highlighter, can be 'prism', 'shiki'
+highlighter: shiki
 # show line numbers in code blocks
 lineNumbers: false
 # enable monaco editor, can be boolean, 'dev' or 'build'
@@ -123,7 +123,6 @@ Refer to the [Directory Structure](/custom/directory-structure) section.
 - [Configure Vue](/custom/config-vue)
 - [Configure Vite](/custom/config-vite)
 - [Configure UnoCSS](/custom/config-unocss)
-- [Configure Windi CSS](/custom/config-windicss)
 - [Configure Monaco](/custom/config-monaco)
 - [Configure KaTeX](/custom/config-katex)
 - [Configure Mermaid](/custom/config-mermaid)

guide/faq.md

@@ -43,8 +43,6 @@ The third column (10% width to parent container)
 </div>
 ```
 
-Learn more about [Windi CSS Grids](https://windicss.org/utilities/layout/grid.html).
-
 ## Positioning
 
 Slides are defined in fixed sizes (default `980x552px`) and scale to fit with the user screen. You can safely use absolute position in your slides as they will scale along with the screen.

guide/index.md

@@ -1,3 +1,7 @@
+---
+outline: deep
+---
+
 # Getting Started
 
 Slidev <sup>(slide + dev, **/slaɪdɪv/**)</sup> is a web-based slides maker and presenter. It's designed for developers to focus on writing content in Markdown while also having the power of HTML and Vue components to deliver pixel-perfect layouts and designs with embedded interactive demos in your presentations.
@@ -11,7 +15,7 @@ You can learn more about the rationale behind the project in the [Why Slidev](/g
 - 📝 [**Markdown-based**](/guide/syntax.html) - use your favorite editors and workflow
 - 🧑‍💻 [**Developer Friendly**](/guide/syntax.html#code-blocks) - built-in syntax highlighting, live coding, etc.
 - 🎨 [**Themable**](/themes/gallery.html) - theme can be shared and used with npm packages
-- 🌈 [**Stylish**](/guide/syntax.html#embedded-styles) - on-demand utilities via [UnoCSS](https://github.com/unocss/unocss) or [Windi CSS](https://windicss.org/).
+- 🌈 [**Stylish**](/guide/syntax.html#embedded-styles) - on-demand utilities via [UnoCSS](https://github.com/unocss/unocss).
 - 🤹 [**Interactive**](/custom/directory-structure.html#components) - embedding Vue components seamlessly
 - 🎙 [**Presenter Mode**](/guide/presenter-mode.html) - use another window, or even your phone to control your slides
 - 🎨 [**Drawing**](/guide/drawing.html) - draw and annotate on your slides
@@ -26,34 +30,30 @@ You can learn more about the rationale behind the project in the [Why Slidev](/g
 
 ## Scaffolding Your First Presentation
 
-<br>
-
 ### Try it Online
 
-[sli.dev/new](https://sli.dev/new)
+Start Slidev right in your browser: [sli.dev/new](https://sli.dev/new)
 
 [![](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://sli.dev/new)
 
 ### Create Locally
 
-With NPM:
+::: code-group
 
-```bash
-$ npm init slidev
+```bash [npm]
+npm init slidev@latest
 ```
 
-With Yarn:
-
-```bash
-$ yarn create slidev
+```bash [yarn]
+yarn create slidev
 ```
 
-With pnpm:
-
-```bash
-$ pnpm create slidev
+```bash [pnpm]
+pnpm create slidev
 ```
 
+:::
+
 Follow the prompts and start making your slides now! For more details about the markdown syntax, read through the [syntax guide](/guide/syntax).
 
 ## Command Line Interface
@@ -93,9 +93,9 @@ Hello World
 
 Directly use code blocks for highlighting
 
-//```ts
+```ts
 console.log('Hello, World!')
-//```
+```
 
 ---
 
@@ -110,8 +110,8 @@ Slidev is made possible by combining these tools and technologies.
 
 - [Vite](https://vitejs.dev) - An extremely fast frontend tooling
 - [Vue 3](https://v3.vuejs.org/) powered [Markdown](https://daringfireball.net/projects/markdown/syntax) - Focus on the content while having the power of HTML and Vue components whenever needed
-- [Windi CSS](https://github.com/windicss/windicss) or [UnoCSS](https://github.com/unocss/unocss) - On-demand utility-first CSS framework, style your slides at ease
-- [Prism](https://github.com/PrismJS/prism), [Shiki](https://github.com/shikijs/shiki), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability
+- [UnoCSS](https://github.com/unocss/unocss) - On-demand utility-first CSS framework, style your slides at ease
+- [Shiki](https://github.com/shikijs/shiki), [Prism](https://github.com/PrismJS/prism), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability
 - [RecordRTC](https://recordrtc.org) - Built-in recording and camera view
 - [VueUse](https://vueuse.org) family -  [`@vueuse/core`](https://github.com/vueuse/vueuse), [`@vueuse/head`](https://github.com/vueuse/head), [`@vueuse/motion`](https://github.com/vueuse/motion), etc.
 - [Iconify](https://iconify.design/) - Iconsets collection.

guide/install.md

@@ -6,24 +6,22 @@
 
 The best way to get started is using our official starter template.
 
-With NPM:
+::: code-group
 
-```bash
-$ npm init slidev@latest
+```bash [npm]
+npm init slidev@latest
 ```
 
-With Yarn:
-
-```bash
-$ yarn create slidev
+```bash [yarn]
+yarn create slidev
 ```
 
-With PNPM:
-
-```bash
-$ pnpm create slidev
+```bash [pnpm]
+pnpm create slidev
 ```
 
+:::
+
 Follow the prompts and it will open up the slideshow at `http://localhost:3030/` automatically for you.
 
 It also contains the basic setup and a short demo with instructions on how to get started with Slidev.
@@ -33,35 +31,29 @@ It also contains the basic setup and a short demo with instructions on how to ge
 If you still prefer to install Slidev manually or would like to integrate it into your existing projects, you can do:
 
 ```bash
-$ npm install @slidev/cli @slidev/theme-default
+npm install @slidev/cli @slidev/theme-default
 ```
 ```bash
-$ touch slides.md
+touch slides.md
 ```
 ```bash
-$ npx slidev
+npx slidev
 ```
 
-> Please note if you are using [pnpm](https://pnpm.io), you will need to enable [shamefully-hoist](https://pnpm.io/npmrc#shamefully-hoist) option for Slidev to work properly:
->
-> ```bash
-> echo 'shamefully-hoist=true' >> .npmrc
-> ```
-
 ## Install Globally
 
 > Available since v0.14
 
 You can install Slidev globally with the following command
 
 ```bash
-$ npm i -g @slidev/cli
+npm i -g @slidev/cli
 ```
 
 And then use `slidev` everywhere without creating a project every time.
 
 ```bash
-$ slidev
+npx slidev
 ```
 
 This command will also try to use local `@slidev/cli` if it has been found in the `node_modules`.