@slidev/docs 52.0.1 → 52.2.3

package/builtin/components.md

@@ -253,7 +253,7 @@ Apply scaling or transforming to elements.
 ### Usage
 
 ```md
-<Transform :scale="0.5">
+<Transform :scale="0.5" origin="top center">
   <YourElements />
 </Transform>
 ```

package/builtin/layouts.md

@@ -214,4 +214,10 @@ This shows on the left
 # Right
 
 This shows on the right
+
+<style>
+.two-cols-header {
+  column-gap: 20px; /* Adjust the gap size as needed */
+}
+</style>
 ```

package/features/og-image.md

@@ -0,0 +1,41 @@
+---
+relates:
+  - features/seo-meta
+tags: ['SEO', head]
+description: |
+  Set the Open Graph image for your slides.
+---
+
+# Open Graph Image
+
+Slidev allows you to set the Open Graph image via the `seoMeta.ogImage` option in the headmatter:
+
+```md
+---
+seoMeta:
+  ogImage: https://url.to.your.image.png
+---
+
+# Your slides here
+```
+
+Learn more about [SEO Meta Tags](./seo-meta).
+
+## Local Image
+
+If you have `./og-image.png` in your project root, Slidev will grab it as the Open Graph image automatically without any configuration.
+
+## Auto-generate
+
+Since v52.1.0, Slidev supports auto-generating the Open Graph image from the first slide.
+
+You can set `seoMeta.ogImage` to `auto` to enable this feature.
+
+```md
+---
+seoMeta:
+  ogImage: auto
+---
+```
+
+It will use [playwright](https://playwright.dev/) to capture the first slide and save it as `./og-image.png` (same as `slidev export`). You may also commit the generated image to your repository to avoid the auto-generation. Or if you generate it on CI, you might also want to setup the playwright environment.

package/features/remote-access.md

@@ -52,7 +52,7 @@ You can open a [Cloudflare Quick Tunnels](https://developers.cloudflare.com/clou
 ::: code-group
 
 ```bash [pnpm]
-pnpm dev -- --remote --tunnel
+pnpm dev --remote --tunnel
 # i.e. slidev --remote --tunnel
 ```
 

package/features/rough-marker.md

@@ -17,15 +17,15 @@ Slidev integrates [Rough Notation](https://github.com/linkstrifer/react-rough-no
 
 ### `v-mark` directive
 
-Rough Notation integrates comes with the `v-mark` directive.
+Rough Notation integration comes with the `v-mark` directive.
 
 #### Type
 
-`v-mark.underline` for the underline mark, `v-mark.circle` for the circle mark, etc. Default to `underline`
+Use `v-mark.underline` for the underline mark, `v-mark.circle` for the circle mark, etc. (defaults to `underline`).
 
 #### Color
 
-`v-mark.red` makes the notation `red`. Supported built-in color themes from UnoCSS. For custom colors, use object syntax `v-mark="{ color: '#234' }"`
+`v-mark.red` makes the notation `red`. Supported built-in color themes from UnoCSS. For custom colors, use object syntax `v-mark="{ color: '#234' }"`.
 
 #### Clicks
 
@@ -33,7 +33,7 @@ Rough Notation integrates comes with the `v-mark` directive.
 
 #### Options
 
-Optionally you can pass an object to `v-mark` to specify the options, for example:
+Optionally, you can pass an object to `v-mark` to specify the options, for example:
 
 ```vue
 <span v-mark="{ at: 5, color: '#234', type: 'circle' }">

package/features/seo-meta.md

@@ -0,0 +1,36 @@
+---
+depends:
+  - custom/index#headmatter
+relates:
+  - features/og-image
+tags: [SEO, head]
+description: |
+  Configure SEO meta tags for better social media sharing and search engine optimization.
+---
+
+# SEO Meta Tags
+
+Slidev allows you to configure SEO meta tags in the headmatter to improve social media sharing and search engine optimization. You can set up Open Graph and Twitter Card meta tags to control how your slides appear when shared on social platforms.
+
+## Configuration
+
+Add the `seoMeta` configuration to your slides deck frontmatter:
+
+```yaml
+---
+# SEO meta tags
+seoMeta:
+  ogTitle: Slidev Starter Template
+  ogDescription: Presentation slides for developers
+  ogImage: https://cover.sli.dev
+  ogUrl: https://example.com
+  twitterCard: summary_large_image
+  twitterTitle: Slidev Starter Template
+  twitterDescription: Presentation slides for developers
+  twitterImage: https://cover.sli.dev
+  twitterSite: username
+  twitterUrl: https://example.com
+---
+```
+
+This feature is powered by [unhead](https://unhead.unjs.io/)'s `useHead` hook, please refer to the [documentation](https://unhead.unjs.io/docs/head/api/composables/use-seo-meta) for more details.

package/features/transform-component.md

@@ -13,7 +13,7 @@ description: |
 The `Transform` component allows you to scale the size of the elements on your slides:
 
 ```md
-<Transform :scale="0.5">
+<Transform :scale="0.5" origin="top center">
   <YourElements />
 </Transform>
 ```

package/guide/animations.md

@@ -197,11 +197,11 @@ You can also specify the enter and leave index for the `v-click` directive by pa
 
 ```md
 <div v-click.hide="[2, 4]">
-  This will be hidden at click 2 and 3.
+  This will be hidden at click 2 and 3 (and shown otherwise).
 </div>
 <div v-click />
 <div v-click="['+1', '+1']">
-  This will be shown at click 3, and hidden since click 4.
+  This will be shown only at click 2 (and hidden otherwise).
 </div>
 ```
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/docs",
   "type": "module",
-  "version": "52.0.1",
+  "version": "52.2.3",
   "license": "MIT",
   "funding": "https://github.com/sponsors/antfu",
   "homepage": "https://sli.dev",
@@ -17,28 +17,28 @@
   ],
   "devDependencies": {
     "@antfu/utils": "^9.2.0",
-    "@iconify/json": "^2.2.353",
-    "@shikijs/vitepress-twoslash": "^3.7.0",
-    "@types/node": "^24.0.7",
-    "@unocss/reset": "^66.3.2",
-    "@vueuse/core": "^13.4.0",
+    "@iconify/json": "^2.2.385",
+    "@shikijs/vitepress-twoslash": "^3.13.0",
+    "@types/node": "^24.5.2",
+    "@unocss/reset": "^66.5.1",
+    "@vueuse/core": "^13.9.0",
     "fast-glob": "^3.3.3",
     "gray-matter": "^4.0.3",
     "markdown-it": "^14.1.0",
-    "shiki": "^3.7.0",
+    "shiki": "^3.13.0",
     "typeit": "8.1.0",
-    "typescript": "^5.8.3",
-    "unocss": "^66.3.2",
-    "unplugin-icons": "^22.1.0",
+    "typescript": "^5.9.2",
+    "unocss": "^66.5.1",
+    "unplugin-icons": "^22.3.0",
     "unplugin-vue-components": "^28.8.0",
-    "vite-plugin-inspect": "^11.3.0",
-    "vitepress": "^2.0.0-alpha.7",
-    "vitepress-plugin-group-icons": "^1.6.0",
-    "vitepress-plugin-llms": "^1.6.0",
-    "vue": "^3.5.17",
-    "@slidev/parser": "52.0.1",
-    "@slidev/types": "52.0.1",
-    "@slidev/client": "52.0.1"
+    "vite-plugin-inspect": "^11.3.3",
+    "vitepress": "^2.0.0-alpha.12",
+    "vitepress-plugin-group-icons": "^1.6.3",
+    "vitepress-plugin-llms": "^1.7.5",
+    "vue": "^3.5.21",
+    "@slidev/parser": "52.2.3",
+    "@slidev/client": "52.2.3",
+    "@slidev/types": "52.2.3"
   },
   "scripts": {
     "dev": "vitepress",