docs(en): merge docs/main into docs-cn/main @ 953ee569

.vitepress/config.js

@@ -41,6 +41,10 @@ const Guide = [
     text: '编辑器整合',
     link: '/guide/editors',
   },
+  {
+    text: 'FAQ',
+    link: '/guide/faq',
+  },
 ]
 
 const Theme = [

custom/directory-structure.md

@@ -25,7 +25,7 @@ your-slidev/
 
 ## 组件 {#components}
 
-约定：`./components/*.{vue,js,ts,jsx,tsx}`
+约定：`./components/*.{vue,js,ts,jsx,tsx,md}`
 
 此目录中的组件可以在幻灯片的 Markdown 中直接使用，其组件名与文件名相同。
 

guide/faq.md

@@ -0,0 +1,118 @@
+# FAQ
+
+## Grids
+
+Since Slidev is based on the Web, you can apply any grid layouts as you want. [CSS Grids](https://css-tricks.com/snippets/css/complete-guide-grid/), [flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), or even [Masonry](https://css-tricks.com/native-css-masonry-layout-in-css-grid/), you get the full controls.
+
+Since we have [Windi CSS](https://windicss.org/) built-in, here is one simple way for you to reference:
+
+```html
+<div class="grid grid-cols-2 gap-4">
+<div>
+
+The first column
+
+</div>
+<div>
+
+The second column
+
+</div>
+</div>
+```
+
+Go further, you can customize the size of each columns like:
+
+```html
+<div class="grid grid-cols-[200px,1fr,10%] gap-4">
+<div>
+
+The first column (200px)
+
+</div>
+<div>
+
+The second column (auto fit)
+
+</div>
+<div>
+
+The third column (10% width to parent container)
+
+</div>
+</div>
+```
+
+Learn more about [Windi CSS Grids](https://windicss.org/utilities/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.
+
+For example:
+
+```html
+<div class="absolute left-30px bottom-30px">
+This is a left-bottom aligned footer
+</div>
+```
+
+To change the canvas' actual size, you can pass the `canvasWidth` options in your first frontmatter:
+
+```yaml
+---
+canvasWidth: 800
+---
+```
+
+## Font Size
+
+If you feel the font size in your slides are too small, you can adjust it in a few ways:
+
+### Override Local Style
+
+You can override styles for each slide with the inlined `<style>` tag.
+
+```md
+# Page 1
+
+<style>
+h1 {
+  font-size: 10em;
+}
+</style>
+
+---
+
+# Page 2
+
+This will not be affected.
+```
+
+Learn more: [Embedded Styles](/guide/syntax.html#embedded-styles)
+
+### Override Global Style
+
+You can provide custom global styles by creating `./style.css`, for example
+
+```css
+/* style.css */ 
+
+h1 {
+  font-size: 10em !important;
+}
+```
+
+Learn more: [Global Style](/custom/directory-structure.html#style)
+
+### Scale the Canvas
+
+Changing the canvas' actual size will scale all your contents(text, images, components, etc.) and slides
+
+```yaml
+---
+# default: 980
+# since the canvas gets smaller, the visual size will become larger
+canvasWidth: 800
+---
+```

guide/install.md

@@ -19,7 +19,7 @@ $ npm init slidev@latest
 使用 Yarn：
 
 ```bash
-$ yarn create slidev@latest
+$ yarn create slidev
 ```
 
 跟随命令行的提示，它将自动为你打开幻灯片，网址是 http://localhost:3030/。

guide/why.md

@@ -70,4 +70,6 @@ $ npm init slidev
 
 或者你也可以通过下方的视频进行快速预览:
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/eW7v-2ZKZOU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="aspect-9/16 relative">
+<iframe class="rounded w-full shadow-md border-none" src="https://www.youtube.com/embed/eW7v-2ZKZOU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

package.json

@@ -6,11 +6,11 @@
     "postinstall": "node .vitepress/scripts/prepare.js"
   },
   "devDependencies": {
-    "@iconify/json": "^1.1.346",
-    "@slidev/client": "^0.13.0",
-    "@slidev/parser": "^0.13.0",
+    "@iconify/json": "^1.1.347",
+    "@slidev/client": "^0.13.4",
+    "@slidev/parser": "^0.13.4",
     "@slidev/theme-default": "^0.7.4",
-    "@slidev/types": "^0.13.0",
+    "@slidev/types": "^0.13.4",
     "@types/fs-extra": "^9.0.11",
     "@types/node": "^15.6.0",
     "fs-extra": "^10.0.0",

windi.config.ts

@@ -4,7 +4,7 @@ import aspectRatio from 'windicss/plugin/aspect-ratio'
 export default defineConfig({
   extract: {
     include: [
-      // '**/*.{md}',
+      '**/*.md',
       '.vitepress/theme/**/*.{md,vue}',
       '.vitepress/@slidev/client/internals/SlideContainer.vue',
       '.vitepress/@slidev/client/layouts/*.vue',