From 6b57aadddb1d963f359d117c0c2495e11bc18f24 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 22 May 2021 17:40:42 +0800 Subject: [PATCH 1/7] docs: fix windicss --- windi.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/windi.config.ts b/windi.config.ts index 80e10b9a..9a61d52e 100644 --- a/windi.config.ts +++ b/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', From f85ab4c6544c5faba6beaf287ba88b486ed47510 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 22 May 2021 18:21:47 +0800 Subject: [PATCH 2/7] docs: add faq --- .vitepress/config.js | 4 ++ custom/directory-structure.md | 2 +- guide/faq.md | 118 ++++++++++++++++++++++++++++++++++ 3 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 guide/faq.md diff --git a/.vitepress/config.js b/.vitepress/config.js index f9f372f6..5b719b67 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -41,6 +41,10 @@ const Guide = [ text: 'Editor Integrations', link: '/guide/editors', }, + { + text: 'FAQ', + link: '/guide/faq', + }, ] const Theme = [ diff --git a/custom/directory-structure.md b/custom/directory-structure.md index a3aa029a..41773cd5 100644 --- a/custom/directory-structure.md +++ b/custom/directory-structure.md @@ -21,7 +21,7 @@ All of them are optional. ## Components -Conventions: `./components/*.{vue,js,ts,jsx,tsx}` +Conventions: `./components/*.{vue,js,ts,jsx,tsx,md}` Components inside this directory can be directly used in the slides Markdown with the same component name as the file name. diff --git a/guide/faq.md b/guide/faq.md new file mode 100644 index 00000000..a2627512 --- /dev/null +++ b/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 +
+
+ +The first column + +
+
+ +The second column + +
+
+``` + +Go further, you can customize the size of each columns like: + +```html +
+
+ +The first column (200px) + +
+
+ +The second column (auto fit) + +
+
+ +The third column (10% width to parent container) + +
+
+``` + +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 +
+This is a left-bottom aligned footer +
+``` + +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 ` + +--- + +# 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 +--- +``` From 8e5fb9466f6965f6888fe83555bfc0261d188054 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 22 May 2021 18:23:27 +0800 Subject: [PATCH 3/7] chore: fix windi extract --- package.json | 8 ++++---- pnpm-lock.yaml | 50 ++++++++++++++++++++++++------------------------- windi.config.ts | 2 +- 3 files changed, 30 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index a5383b95..14373444 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index db75637e..788dd842 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,11 +2,11 @@ lockfileVersion: 5.3 specifiers: '@antfu/utils': ^0.1.6 - '@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 '@vueuse/core': ^4.11.0 @@ -25,17 +25,17 @@ dependencies: typeit: 7.0.4 devDependencies: - '@iconify/json': 1.1.346 - '@slidev/client': 0.13.0 - '@slidev/parser': 0.13.0 - '@slidev/theme-default': 0.7.4_@slidev+client@0.13.0 - '@slidev/types': 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+client@0.13.4 + '@slidev/types': 0.13.4 '@types/fs-extra': 9.0.11 '@types/node': 15.6.0 fs-extra: 10.0.0 typescript: 4.2.4 vite-plugin-components: 0.9.1 - vite-plugin-icons: 0.5.1_@iconify+json@1.1.346 + vite-plugin-icons: 0.5.1_@iconify+json@1.1.347 vite-plugin-windicss: 0.16.0-beta.22 vitepress: 0.13.2 windicss: 3.0.9 @@ -199,8 +199,8 @@ packages: resolution: {integrity: sha512-LFelJDOLZ6JHlmlAkgrvmcu4hpNPB91KYcr4f60D/exzU1eNOb4/KCVHIydGHIQFaOacIOD+Xy+B7P1z812cZg==} dev: true - /@iconify/json/1.1.346: - resolution: {integrity: sha512-RFYxTAnXW7W/QJrFCrqBPzX6MgYNa+xNxUv62jXdbOn0f81ZQGep3UZtduv+IQSrl2tl3a88mjkyK6sMQKe+Xw==} + /@iconify/json/1.1.347: + resolution: {integrity: sha512-tXd8zM1eczMJlQgR3CRVqIIgKJkV8MfMJh7qllOdoyHkDv3t6eeWxqc4ZTRMCgC6uF21lyPs5t2Gw3k4AMKAHQ==} dev: true /@nodelib/fs.scandir/2.1.4: @@ -232,13 +232,13 @@ packages: resolution: {integrity: sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ==} dev: true - /@slidev/client/0.13.0: - resolution: {integrity: sha512-4PHZyFltsGGBwqTf1WOD5m01mxDiYxsn+An36FISKRlWWOKaa0esFHxnsPMgO1jQlq/9r7PjLumhNIwzB/boqQ==} + /@slidev/client/0.13.4: + resolution: {integrity: sha512-tB797wOfAgFsRzxsMvD3siZaAPQ2nh5I0yIfmamSFR704WqOyoscgDe4NmyMo+r9hzoY+zNiPZTJIJHqLUOz7g==} engines: {node: '>=14.0.0'} dependencies: '@antfu/utils': 0.1.6 - '@slidev/parser': 0.13.0 - '@slidev/types': 0.13.0 + '@slidev/parser': 0.13.4 + '@slidev/types': 0.13.4 '@vueuse/core': 4.11.0_vue@3.0.11 '@vueuse/head': 0.5.1_vue@3.0.11 '@vueuse/motion': 1.5.5_vue@3.0.11 @@ -260,28 +260,28 @@ packages: - supports-color dev: true - /@slidev/parser/0.13.0: - resolution: {integrity: sha512-YTDfcTNWWKMnH7ZivsahVDRcA/GVNgFvz0xkxBCU5yEiDzTDSiua9vVvTd6+0Q/Mi/aHemMa20gZ1Zs+X+TVbQ==} + /@slidev/parser/0.13.4: + resolution: {integrity: sha512-l4o18OjH5JqI21q4Z1FmFOEWq0jCUGgDRmX5fK/Hqn5VTwJc8zjf8UKRgDJWQ/VSe0sNoEs8909XeTAU2sNeZQ==} engines: {node: '>=14.0.0'} dependencies: - '@slidev/types': 0.13.0 + '@slidev/types': 0.13.4 js-yaml: 4.1.0 dev: true - /@slidev/theme-default/0.7.4_@slidev+client@0.13.0: + /@slidev/theme-default/0.7.4_@slidev+client@0.13.4: resolution: {integrity: sha512-WdfWjIFmJoQB1+iD9LvEU6c/I2gyiQP9277Z9fvchKfDKl3d43XJYG5HawEhLsUnXMV/s3RKVcY/MpRSuVFFMg==} engines: {node: '>=14.0.0'} peerDependencies: '@slidev/client': ^0.6.7 dependencies: - '@slidev/client': 0.13.0 + '@slidev/client': 0.13.4 codemirror-theme-vars: 0.1.1 prism-theme-vars: 0.2.2 theme-vitesse: 0.1.11 dev: true - /@slidev/types/0.13.0: - resolution: {integrity: sha512-L6e1CCx8kPk0H+MNT6qozHKb3VT19kk0w3TPdp7NVWr9T1JayCtlH9w2UBvXGZqgc5d3mQ8fVaUTpxq9GlNfyQ==} + /@slidev/types/0.13.4: + resolution: {integrity: sha512-/8vkL55SUbxnl8LYZikrHVL2v539d3IeioyZEwoHMBo1oPLC8LFcxgPHVM+fyPmITxZ2Acr6Vwr7j2mxczDGhQ==} engines: {node: '>=14.0.0'} dev: true @@ -2042,14 +2042,14 @@ packages: - supports-color dev: true - /vite-plugin-icons/0.5.1_@iconify+json@1.1.346: + /vite-plugin-icons/0.5.1_@iconify+json@1.1.347: resolution: {integrity: sha512-snEQYVnZ7NFEShFpki3vL9vj8k7M60PO6SXQTZgzIgrwlVsTsGzgsLw8B73v4DzEygPS7wuw3q6XqlZDVUMSiQ==} peerDependencies: '@iconify/json': '*' '@vue/compiler-sfc': ^3.0.2 vue-template-compiler: ^2.6.12 dependencies: - '@iconify/json': 1.1.346 + '@iconify/json': 1.1.347 '@iconify/json-tools': 1.0.10 vue-template-es2015-compiler: 1.9.1 dev: true diff --git a/windi.config.ts b/windi.config.ts index 9a61d52e..dc1bf6e4 100644 --- a/windi.config.ts +++ b/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', From 210478e16de5e1c602efdd05985de21524178a56 Mon Sep 17 00:00:00 2001 From: Florian Woelki Date: Sat, 22 May 2021 12:25:52 +0200 Subject: [PATCH 4/7] chore: typo (#2) --- .vitepress/theme/components/Environment.vue | 2 +- custom/config-vite.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.vitepress/theme/components/Environment.vue b/.vitepress/theme/components/Environment.vue index 575fd928..d16c16b1 100644 --- a/.vitepress/theme/components/Environment.vue +++ b/.vitepress/theme/components/Environment.vue @@ -16,7 +16,7 @@ defineProps<{ type: 'node' | 'client' }>() This setup function will only run on Node.js environment, you can have access to Node's API. - This setup function will only run on client side. Make sure the browser compacitblity when importing packages. + This setup function will only run on client side. Make sure the browser compatibility when importing packages. diff --git a/custom/config-vite.md b/custom/config-vite.md index a59892fd..d43427e7 100644 --- a/custom/config-vite.md +++ b/custom/config-vite.md @@ -15,4 +15,4 @@ Slidev has the following plugins preconfigured: - [vite-plugin-icons](https://github.com/antfu/vite-plugin-icons) - [vite-plugin-remote-assets](https://github.com/antfu/vite-plugin-remote-assets) -Learn mode about the [pre-configurations here](https://github.com/slidevjs/slidev/blob/main/packages/slidev/node/plugins/preset.ts). +Learn more about the [pre-configurations here](https://github.com/slidevjs/slidev/blob/main/packages/slidev/node/plugins/preset.ts). From a84780e3faca9001383881213b87365c37aea748 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 22 May 2021 18:26:53 +0800 Subject: [PATCH 5/7] chore: remove latest tag for yarn, close #3 --- guide/install.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/install.md b/guide/install.md index 12911172..ea7a63e8 100644 --- a/guide/install.md +++ b/guide/install.md @@ -15,7 +15,7 @@ $ npm init slidev@latest With Yarn: ```bash -$ yarn create slidev@latest +$ yarn create slidev ``` Follow the prompts and it will open up the slideshow at http://localhost:3030/ automatically for you. From 953ee5694ffc44df8da634f1e6123cc1b411229b Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 23 May 2021 05:22:29 +0800 Subject: [PATCH 6/7] fix: youtube video size --- guide/why.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/guide/why.md b/guide/why.md index 4c7e57c0..b05daf7a 100644 --- a/guide/why.md +++ b/guide/why.md @@ -66,4 +66,6 @@ $ npm init slidev Or have a quick preview of it: - +
+ +
From 202b975c664d7ce631b600eea415536409a3f9b0 Mon Sep 17 00:00:00 2001 From: QC-L Date: Sun, 23 May 2021 20:03:17 +0800 Subject: [PATCH 7/7] docs(cn): fix conflicts --- .vitepress/theme/components/Environment.vue | 4 ---- custom/config-vite.md | 4 ---- custom/directory-structure.md | 6 +----- 3 files changed, 1 insertion(+), 13 deletions(-) diff --git a/.vitepress/theme/components/Environment.vue b/.vitepress/theme/components/Environment.vue index 8d295fa1..45672d1b 100644 --- a/.vitepress/theme/components/Environment.vue +++ b/.vitepress/theme/components/Environment.vue @@ -16,11 +16,7 @@ defineProps<{ type: 'node' | 'client' }>() 此配置仅在 Node.js 环境下运行。你可以访问 Node.js 的相关 API 了解更多。 -<<<<<<< HEAD 此配置仅在客户端环境下运行。在引入包时，请确保浏览器的兼容性。 -======= - This setup function will only run on client side. Make sure the browser compatibility when importing packages. ->>>>>>> 953ee5694ffc44df8da634f1e6123cc1b411229b diff --git a/custom/config-vite.md b/custom/config-vite.md index b108c639..5d321af4 100644 --- a/custom/config-vite.md +++ b/custom/config-vite.md @@ -19,8 +19,4 @@ Slidev 已经内置了以下插件： - [vite-plugin-icons](https://github.com/antfu/vite-plugin-icons) - [vite-plugin-remote-assets](https://github.com/antfu/vite-plugin-remote-assets) -<<<<<<< HEAD 可以在 [此处](https://github.com/slidevjs/slidev/blob/main/packages/slidev/node/plugins/preset.ts) 了解 Slidev 的相关预设。 -======= -Learn more about the [pre-configurations here](https://github.com/slidevjs/slidev/blob/main/packages/slidev/node/plugins/preset.ts). ->>>>>>> 953ee5694ffc44df8da634f1e6123cc1b411229b diff --git a/custom/directory-structure.md b/custom/directory-structure.md index bd132923..544fa4df 100644 --- a/custom/directory-structure.md +++ b/custom/directory-structure.md @@ -25,11 +25,7 @@ your-slidev/ ## 组件 {#components} -<<<<<<< HEAD -约定：`./components/*.{vue,js,ts,jsx,tsx}` -======= -Conventions: `./components/*.{vue,js,ts,jsx,tsx,md}` ->>>>>>> 953ee5694ffc44df8da634f1e6123cc1b411229b +约定：`./components/*.{vue,js,ts,jsx,tsx,md}` 此目录中的组件可以在幻灯片的 Markdown 中直接使用，其组件名与文件名相同。