From ad008f0449f00d699e7a8cfd06cd5119cc57fd9f Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 17 Nov 2021 18:56:32 +0100 Subject: [PATCH 001/110] docs: typos in code (#45) --- custom/highlighters.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/custom/highlighters.md b/custom/highlighters.md index dbee808..994026b 100644 --- a/custom/highlighters.md +++ b/custom/highlighters.md @@ -60,8 +60,8 @@ import { defineShikiSetup } from '@slidev/types' export default defineShikiSetup(async({ loadTheme }) => { return { theme: { - dark: await loadTheme('path/to/theme.json')), - light: await loadTheme('path/to/theme.json')), + dark: await loadTheme('path/to/theme.json'), + light: await loadTheme('path/to/theme.json'), }, } }) From 5d92892e4c0e345ea45cde50316330f4c97117de Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 17 Nov 2021 18:56:43 +0100 Subject: [PATCH 002/110] docs: typo (#44) --- guide/install.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/install.md b/guide/install.md index 58e2048..29988f0 100644 --- a/guide/install.md +++ b/guide/install.md @@ -39,7 +39,7 @@ $ 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-flatten=true' >> .npmrc +> echo 'shamefully-hoist=true' >> .npmrc > ``` ## Install Globally From c393c03ca6c46af4a218f37db04bc399bde16088 Mon Sep 17 00:00:00 2001 From: Christian S Date: Sat, 4 Dec 2021 00:56:52 +0100 Subject: [PATCH 003/110] chore: typo (#46) --- builtin/layouts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/builtin/layouts.md b/builtin/layouts.md index a8970d9..1b655a6 100644 --- a/builtin/layouts.md +++ b/builtin/layouts.md @@ -15,7 +15,7 @@ Used to display the cover page for the presentation, may contain the presentatio ### `default` -The most baisc layout, to display any kind of content. +The most basic layout, to display any kind of content. ### `end` From fbc97d802e30cc663321c93b32fff3cee9ca7ff9 Mon Sep 17 00:00:00 2001 From: Arnaud Thomas D Date: Thu, 9 Dec 2021 00:49:21 +0100 Subject: [PATCH 004/110] docs: fix typo (#47) --- custom/fonts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/custom/fonts.md b/custom/fonts.md index 02b4a4d..6be9f4f 100644 --- a/custom/fonts.md +++ b/custom/fonts.md @@ -100,7 +100,7 @@ Currently, only Google Fonts is supported, we are planned to add more providers ```yaml --- fonts: - provide: 'none' + provider: 'none' --- ``` From a261c239adbbea08fafc043330460e1e7bb16e54 Mon Sep 17 00:00:00 2001 From: tkgroot Date: Mon, 20 Dec 2021 18:43:30 +0100 Subject: [PATCH 005/110] chore: typo (#48) --- builtin/layouts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/builtin/layouts.md b/builtin/layouts.md index 1b655a6..d50357e 100644 --- a/builtin/layouts.md +++ b/builtin/layouts.md @@ -7,7 +7,7 @@ ### `center` -Displays the content in the middle of the sreen. +Displays the content in the middle of the screen. ### `cover` From 06ae2757fe5d59fbc9f2acd5867bba7521f3d679 Mon Sep 17 00:00:00 2001 From: Tony Cabaye Date: Mon, 17 Jan 2022 16:56:33 +0100 Subject: [PATCH 006/110] feat: add TOC documentation (#49) --- builtin/components.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/builtin/components.md b/builtin/components.md index 822a9e6..b957d8e 100644 --- a/builtin/components.md +++ b/builtin/components.md @@ -4,6 +4,42 @@ > The documentations of this section is still working in progress. Before that, you can take a look at the [source code](https://github.com/slidevjs/slidev/blob/main/packages/client/builtin) directly. +### `TOC` + +Insert a Table Of Content. + +Titles and title levels get automatically retrieved from the first title element of each slides. + +You can override this automatic behaviour for a slide by using the front matter syntax: +```yml +--- +title: Amazing slide title +level: 2 +--- +``` + +Or if you prefer the slide to not appear in the TOC at all, you can use: +```yml +--- +hideInToc: true +--- +``` + +#### Usage +~~~md + +~~~ + +Parameters: + +* `columns` (`string | number`, default: `1`): The number of columns of the display +* `maxDepth` (`string | number`, default: `Infinity`): The maximum depth level of title to display +* `minDepth` (`string | number`, default: `1`): The minimum depth level of title to display +* `mode` (`'all' | 'onlyCurrentTree'| 'onlySiblings'`, default: `'all'`): + * `'all'`: Display all items + * `'onlyCurrentTree'`: Display only items that are in current tree (active item, parents and children of active item) + * `'onlySiblings'`: Display only items that are in current tree and their direct siblings + ## Custom Components Create a directory `components/` under your project root, and simply put your custom Vue components under it, then you can use it with the same name in your markdown file! From ce73d5801d6634c1734058202032c57f3360bfe3 Mon Sep 17 00:00:00 2001 From: chengpeiquan Date: Tue, 18 Jan 2022 13:14:14 +0800 Subject: [PATCH 007/110] fix: broken links (#50) --- themes/write-a-theme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/write-a-theme.md b/themes/write-a-theme.md index f802bdf..45658dc 100644 --- a/themes/write-a-theme.md +++ b/themes/write-a-theme.md @@ -120,7 +120,7 @@ Slidev toggles a `dark` class on the page's `html` element for switching color s Syntax highlighting colors are also provided in the theme. We support both [Prism](https://prismjs.com/) and [Shiki](https://github.com/shikijs/shiki). For more information please refer to [the syntax highlighting docs](/custom/highlighters). -You can support either one of them, or both. Refer to the default theme for configurations examples [`./styles/prism.css`](https://github.com/slidevjs/slidev/blob/main/packages/theme-default/styles/prism.css) / [`./setup/shiki.ts`](https://github.com/slidevjs/slidev/blob/main/packages/theme-default/setup/shiki.ts). +You can support either one of them, or both. Refer to the default theme for configurations examples [`./styles/code.css`](https://github.com/slidevjs/slidev/blob/main/packages/create-theme/template/styles/code.css) / [`./setup/shiki.ts`](https://github.com/slidevjs/slidev/blob/main/packages/create-theme/template/setup/shiki.ts). Also, remember to specify the supported highlighters in your `package.json` From 4890d427ba544b99fd2fae4ba003b50a13fae3a5 Mon Sep 17 00:00:00 2001 From: Plat <60182057+p1atdev@users.noreply.github.com> Date: Sun, 6 Feb 2022 21:56:38 +0900 Subject: [PATCH 008/110] Minor notation change (#51) --- resources/learning.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/learning.md b/resources/learning.md index 14da52c..cfa4cab 100644 --- a/resources/learning.md +++ b/resources/learning.md @@ -16,7 +16,7 @@ - [神器！这款开源项目可以让你使用 Markdown 来做 PPT！](https://zhuanlan.zhihu.com/p/377567327) by [Github掘金计划](https://www.zhihu.com/people/github-stars) - [【用 markdown 写 Slide!】神器 Slidev 的安装及 bug 解决](https://blog.csdn.net/weixin_43828250/article/details/116664775) by HaloHoohoo -## 日本语 +## 日本語 - [開発者のためのスライド作成ツール Slidev がすごい](https://zenn.dev/ryo_kawamata/articles/introduce-slidev) by [ryo_kawamata](https://zenn.dev/ryo_kawamata) - [Markdownでオシャレなスライドを作るSli.dev](https://qiita.com/e99h2121/items/a115f8865a0dc21bb462) by [Nobuko YAMADA](https://qiita.com/e99h2121) From d99ebc341368cc7f6df4ae4cbd893a171a853aa6 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Mon, 7 Feb 2022 09:55:59 +0800 Subject: [PATCH 009/110] feat: add ja trans --- .vitepress/config.js | 4 ++++ README.md | 1 + 2 files changed, 5 insertions(+) diff --git a/.vitepress/config.js b/.vitepress/config.js index 8599e5b..915337d 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -106,6 +106,10 @@ const Translations = [ text: 'Ελληνικά', link: 'https://el.sli.dev{{pathname}}', }, + { + text: '日本語', + link: 'https://ja.sli.dev{{pathname}}', + }, ] const Customizations = [ diff --git a/README.md b/README.md index d3f0f88..cc88fa2 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ Documentation for [Slidev](https://github.com/slidevjs/slidev) | Deutsch | [docs-de](https://github.com/slidevjs/docs-de) | [de.sli.dev](https://de.sli.dev) | [@fabiankachlock](https://github.com/fabiankachlock) | | Português (BR) | [docs-br](https://github.com/slidevjs/docs-br) | [br.sli.dev](https://br.sli.dev) | [@luisfelipesdn12](https://github.com/luisfelipesdn12) | | Ελληνικά | [docs-el](https://github.com/slidevjs/docs-el) | [el.sli.dev](https://el.sli.dev) | [@GeopJr](https://github.com/GeopJr) | +| 日本語 | [docs-ja](https://github.com/slidevjs/docs-el) | [ja.sli.dev](https://ja.sli.dev) | [@IkumaTadokoro](https://github.com/IkumaTadokoro) | ## Start Server Locally From e89a81b443cfb679cd8c86c03daff8f512d98f1d Mon Sep 17 00:00:00 2001 From: Alexander Eble <35292572+alexanderdavide@users.noreply.github.com> Date: Mon, 14 Feb 2022 08:15:17 +0100 Subject: [PATCH 010/110] docs: add favicon frontmatter configure (#53) Co-authored-by: Alexander Eble --- custom/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/custom/index.md b/custom/index.md index cae9780..33b9bab 100644 --- a/custom/index.md +++ b/custom/index.md @@ -33,6 +33,8 @@ aspectRatio: '16/9' # real width of the canvas, unit in px canvasWidth: 980 +# favicon, can be a local file path or URL +favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png' # fonts will be auto imported from Google fonts # Learn more: https://sli.dev/custom/fonts fonts: From 871a293da7f02bedf8804133bf6a4af060611eb0 Mon Sep 17 00:00:00 2001 From: Augustine Date: Wed, 16 Feb 2022 22:06:17 +0800 Subject: [PATCH 011/110] docs: update shiki URL (#54) --- guide/syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/syntax.md b/guide/syntax.md index a885c67..e82c3ea 100644 --- a/guide/syntax.md +++ b/guide/syntax.md @@ -72,7 +72,7 @@ console.log('Hello, World!') //``` ~~~ -We support [Prism](http://prismjs.com) and [Shiki](https://github.com/shiki/shiki) as syntax highlighters. Refer to [the highlighters section](/custom/highlighters) for more details. +We support [Prism](http://prismjs.com) and [Shiki](https://github.com/shikijs/shiki) as syntax highlighters. Refer to [the highlighters section](/custom/highlighters) for more details. ### Line Highlighting From 5b4af788678dc110e79241e2109414652f9b71dc Mon Sep 17 00:00:00 2001 From: Alexander Eble <35292572+alexanderdavide@users.noreply.github.com> Date: Mon, 7 Mar 2022 23:20:37 +0100 Subject: [PATCH 012/110] Add slidev-theme-academic (#55) --- .vitepress/themes.ts | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/.vitepress/themes.ts b/.vitepress/themes.ts index 9c285e0..1090423 100644 --- a/.vitepress/themes.ts +++ b/.vitepress/themes.ts @@ -315,6 +315,29 @@ export const community: ThemeInfo[] = [ 'light', ], }, + { + id: 'slidev-theme-academic', + name: 'Academic', + description: 'Academic presentations with Slidev made simple', + author: { + name: 'Alexander Eble', + link: 'https://github.com/alexanderdavide', + }, + repo: 'https://github.com/alexanderdavide/slidev-theme-academic', + previews: [ + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/01.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/02.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/03.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/04.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/05.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/06.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/07.png', + ], + tags: [ + 'dark', + 'light', + ], + }, // Add yours here! { id: '', From 61b06f20d904b70a8b14d4b69879ed25d0f08510 Mon Sep 17 00:00:00 2001 From: Alexander Eble <35292572+alexanderdavide@users.noreply.github.com> Date: Mon, 7 Mar 2022 23:21:36 +0100 Subject: [PATCH 013/110] Add showcase Git's Most Wanted (#56) --- .vitepress/showcases.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/.vitepress/showcases.ts b/.vitepress/showcases.ts index dd7136b..e8e1242 100644 --- a/.vitepress/showcases.ts +++ b/.vitepress/showcases.ts @@ -108,6 +108,18 @@ export const showcases: ShowCaseInfo[] = [ at: 'Thoughtworks Internal Lunch & Learn', datetime: '2021-11-12', }, + { + title: 'Git\'s Most Wanted', + cover: 'https://cdn.jsdelivr.net/gh/alexanderdavide/git-most-wanted@assets/slides-export/01.png', + author: { + name: 'Alexander Eble', + link: 'https://github.com/alexanderdavide', + }, + slidesLink: 'https://git-most-wanted.alex-eble.de', + sourceLink: 'https://github.com/alexanderdavide/git-most-wanted', + at: 'Internal Tech Talk', + datetime: '2022-03-11', + }, // Add yours here! { title: 'Yours?', From e9cccdbd077d1ac7b5667b48fab66e5c0f9b5d37 Mon Sep 17 00:00:00 2001 From: tangramor Date: Wed, 16 Mar 2022 15:13:52 +0800 Subject: [PATCH 014/110] feat: update install.md to fix the missed docker part (#57) --- guide/install.md | 65 ++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 63 insertions(+), 2 deletions(-) diff --git a/guide/install.md b/guide/install.md index 29988f0..2dc43fd 100644 --- a/guide/install.md +++ b/guide/install.md @@ -62,6 +62,67 @@ This command will also try to use local `@slidev/cli` if it has been found in th ## Install on Docker -If you need a rapid way to run a presentation with containers, you can use the prebuilt [docker](https://hub.docker.com/r/stig124/slidev) image maintained by [stig124](https://github.com/Stig124), or build your own. +If you need a rapid way to run a presentation with containers, you can use the prebuilt [docker](https://hub.docker.com/r/tangramor/slidev) image maintained by [tangramor](https://github.com/tangramor), or build your own. -Refer to the [slidevjs/container repo](https://github.com/slidevjs/container) for more details. +Just run following command in your work folder: + +```bash +docker run --name slidev --rm -it \ + --user node \ + -v ${PWD}:/slidev \ + -p 3030:3030 \ + tangramor/slidev:latest +``` + +If your work folder is empty, it will generate a template `slides.md` and other related files under your work folder, and launch the server on port `3030`. + +You can access your slides from http://localhost:3030/ + + +### Build deployable image + +Or you can create your own slidev project to a docker image with Dockerfile: + +```Dockerfile +FROM tangramor/slidev:latest + +ADD . /slidev + +``` + +Create the docker image: `docker build -t myppt .` + +And run the container: `docker run --name myslides --rm --user node -p 3030:3030 myppt` + +You can visit your slides from http://localhost:3030/ + + +### Build hostable SPA (Single Page Application) + +Run command `docker exec -i slidev npx slidev build` on the running container `slidev`. It will generate static HTML files under `dist` folder. + +You can host `dist` in a static web site such as [Github pages](https://tangramor.github.io/slidev_docker/) or Gitlab pages. Because in Github pages the url may contain subfolder, so you need to modify the generated `index.html` to change `href="/assets/xxx` to `href="./assets/xxx`. And to avoid Jekyll build process, you need to add an empty file `.nojekyll`. + +You can also host it by yourself: + +```bash +docker run --name myslides --rm -p 80:80 -v ${PWD}/dist:/usr/share/nginx/html nginx:alpine +``` + +Or create a static image with following Dockerfile: + +```Dockerfile +FROM nginx:alpine + +COPY dist /usr/share/nginx/html + +``` + +Create the docker image: `docker build -t mystaticppt .` + +And run the container: `docker run --name myslides --rm -p 80:80 mystaticppt` + +You can visit your slids from http://localhost/ + + +Refer to the [tangramor/slidev_docker](https://github.com/tangramor/slidev_docker) for more details. From 1abac97d69f2a4c1bf1ea213947287922b7adba4 Mon Sep 17 00:00:00 2001 From: tangramor Date: Wed, 16 Mar 2022 18:53:55 +0800 Subject: [PATCH 015/110] Update install.md to fix typos about docker section (#58) --- guide/install.md | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/guide/install.md b/guide/install.md index 2dc43fd..c1e7157 100644 --- a/guide/install.md +++ b/guide/install.md @@ -101,9 +101,19 @@ You can visit your slides from http://localhost:3030/ Run command `docker exec -i slidev npx slidev build` on the running container `slidev`. It will generate static HTML files under `dist` folder. -You can host `dist` in a static web site such as [Github pages](https://tangramor.github.io/slidev_docker/) or Gitlab pages. Because in Github pages the url may contain subfolder, so you need to modify the generated `index.html` to change `href="/assets/xxx` to `href="./assets/xxx`. And to avoid Jekyll build process, you need to add an empty file `.nojekyll`. -You can also host it by yourself: +#### Host on Github Pages + +You can host `dist` in a static web site such as [Github Pages](https://tangramor.github.io/slidev_docker/) or Gitlab Pages. + +Because in Github pages the url may contain subfolder, so you need to modify the generated `index.html` to change `href="/assets/xxx` to `href="./assets/xxx`. Or you may use `--base=//` option during the build process, such as: `docker exec -i slidev npx slidev build --base=/slidev_docker/`. + +And to avoid Jekyll build process, you need to add an empty file `.nojekyll`. + + +#### Host by docker + +You can also host it by yourself with docker: ```bash docker run --name myslides --rm -p 80:80 -v ${PWD}/dist:/usr/share/nginx/html nginx:alpine @@ -122,7 +132,7 @@ Create the docker image: `docker build -t mystaticppt .` And run the container: `docker run --name myslides --rm -p 80:80 mystaticppt` -You can visit your slids from http://localhost/ +You can visit your slides from http://localhost/ Refer to the [tangramor/slidev_docker](https://github.com/tangramor/slidev_docker) for more details. From b18d6f476b18393dabf793d2f08d22f243683948 Mon Sep 17 00:00:00 2001 From: Alex Liu Date: Tue, 22 Mar 2022 10:53:21 +0800 Subject: [PATCH 016/110] docs: add custom-nav-controls documents (#60) --- custom/global-layers.md | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/custom/global-layers.md b/custom/global-layers.md index e907c8f..f5388cf 100644 --- a/custom/global-layers.md +++ b/custom/global-layers.md @@ -4,13 +4,15 @@ Global layers allow you to have custom components that **persistent** across slides. This could be useful for having footers, cross-slides animations, global effects, etc. -Slidev provides two layers for this usage, create `global-top.vue` or `global-bottom.vue` under your project root and it will pick up automatically. +Slidev provides three layers for this usage, create `global-top.vue`, `global-bottom.vue` or `custom-nav-controls.vue` under your project root and it will pick up automatically. Layers relationship: - Global Top (`global-top.vue`) - Slides - Global Bottom (`global-bottom.vue`) +- NavControls + - Customized Navigation Controls (`custom-nav-controls.vue`) ## Example @@ -23,6 +25,17 @@ Layers relationship: The text `Your Name` will appear to all your slides. +```html + + +``` + +The button `Next` will appear in NavControls. + To enabled it conditionally, you can apply it with the [Vue Global Context](/custom/vue-context). ```html @@ -60,3 +73,13 @@ To enabled it conditionally, you can apply it with the [Vue Global Context](/cus ``` + +```html + + + +``` From d68398ac58d3e8efc2f6d29119938f4a4382f617 Mon Sep 17 00:00:00 2001 From: Ruy Adorno Date: Fri, 25 Mar 2022 12:56:21 -0400 Subject: [PATCH 017/110] docs: add mention to --dark option when exporting (#61) --- guide/exporting.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/guide/exporting.md b/guide/exporting.md index 398969d..86df8df 100644 --- a/guide/exporting.md +++ b/guide/exporting.md @@ -19,6 +19,12 @@ $ slidev export After a few seconds, your slides will be ready at `./slides-exports.pdf`. +In case you want to export your slides using the dark version of the theme, use the `--dark` option: + +```bash +$ slidev export --dark +``` + ### Export Clicks Steps > Available since v0.21 From 9fa6829bca1bd8a2262cbc20eb2759d08a0f11fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Emonet?= Date: Wed, 13 Apr 2022 10:41:52 +0200 Subject: [PATCH 018/110] fix: correct typo in the name of the generated pdf (#62) --- guide/exporting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/exporting.md b/guide/exporting.md index 86df8df..5ee1fb0 100644 --- a/guide/exporting.md +++ b/guide/exporting.md @@ -17,7 +17,7 @@ Now export your slides to PDF using the following command $ slidev export ``` -After a few seconds, your slides will be ready at `./slides-exports.pdf`. +After a few seconds, your slides will be ready at `./slides-export.pdf`. In case you want to export your slides using the dark version of the theme, use the `--dark` option: From 73087998518d8ebb02773f5f2ee6959d7255a222 Mon Sep 17 00:00:00 2001 From: Alexander Eble <35292572+alexanderdavide@users.noreply.github.com> Date: Thu, 14 Apr 2022 03:46:18 +0200 Subject: [PATCH 019/110] Document parameter listClass of Toc (#63) --- builtin/components.md | 1 + 1 file changed, 1 insertion(+) diff --git a/builtin/components.md b/builtin/components.md index b957d8e..016202a 100644 --- a/builtin/components.md +++ b/builtin/components.md @@ -33,6 +33,7 @@ hideInToc: true Parameters: * `columns` (`string | number`, default: `1`): The number of columns of the display +* `listClass` (`string | string[]`, default: `''`): Classes to apply to the table of contents list * `maxDepth` (`string | number`, default: `Infinity`): The maximum depth level of title to display * `minDepth` (`string | number`, default: `1`): The minimum depth level of title to display * `mode` (`'all' | 'onlyCurrentTree'| 'onlySiblings'`, default: `'all'`): From 0daa359721a2cdbb0abac8fc5f5e1c00dd7b4452 Mon Sep 17 00:00:00 2001 From: Tony Cabaye Date: Thu, 14 Apr 2022 10:59:55 +0200 Subject: [PATCH 020/110] feat: add doc for Titles and Link components (#64) --- builtin/components.md | 63 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 51 insertions(+), 12 deletions(-) diff --git a/builtin/components.md b/builtin/components.md index 016202a..e07348d 100644 --- a/builtin/components.md +++ b/builtin/components.md @@ -4,28 +4,21 @@ > The documentations of this section is still working in progress. Before that, you can take a look at the [source code](https://github.com/slidevjs/slidev/blob/main/packages/client/builtin) directly. -### `TOC` +### `Toc` Insert a Table Of Content. -Titles and title levels get automatically retrieved from the first title element of each slides. - -You can override this automatic behaviour for a slide by using the front matter syntax: -```yml ---- -title: Amazing slide title -level: 2 ---- -``` - -Or if you prefer the slide to not appear in the TOC at all, you can use: +If you want a slide to not appear in the `` component, you can use in the front matter block of the slide: ```yml --- hideInToc: true --- ``` +Titles are displayed using the [`` component](#titles) + #### Usage + ~~~md ~~~ @@ -41,6 +34,52 @@ Parameters: * `'onlyCurrentTree'`: Display only items that are in current tree (active item, parents and children of active item) * `'onlySiblings'`: Display only items that are in current tree and their direct siblings +### `Link` + +Insert a link you can use to navigate to a given slide. + +#### Usage + +~~~md +Go to slide 42 + +~~~ + +Parameters: + +* `to` (`string | number`): The path of the slide to navigate to (slides starts from `1`) +* `title` (`string`): The title to display + +### `Titles` + +Insert the main title from a slide parsed as HTML. + +Titles and title levels get automatically retrieved from the first title element of each slides. + +You can override this automatic behaviour for a slide by using the front matter syntax: +```yml +--- +title: Amazing slide title +level: 2 +--- +``` + +#### Usage + +The `` component is a virtual component you can import with: +```js +import Titles from '/@slidev/titles.md' +``` + +Then you can use it with: +~~~md + +~~~ + +Parameters: + +* `no` (`string | number`): The number of the slide to display the title from (slides starts from `1`) + ## Custom Components Create a directory `components/` under your project root, and simply put your custom Vue components under it, then you can use it with the same name in your markdown file! From 37797ff651c1914f542e82bc6a10f8450281fad5 Mon Sep 17 00:00:00 2001 From: Tony Cabaye Date: Fri, 15 Apr 2022 08:52:17 +0200 Subject: [PATCH 021/110] feat: update config doc (#65) --- custom/index.md | 36 +++++++++++++++++++++++++++--------- 1 file changed, 27 insertions(+), 9 deletions(-) diff --git a/custom/index.md b/custom/index.md index 33b9bab..64a8b4d 100644 --- a/custom/index.md +++ b/custom/index.md @@ -11,30 +11,45 @@ You can configure Slidev in the frontmatter of your first slide, the following s # theme id or package name theme: 'default' # title of your slide, will auto infer from the first header if not specified -title: '' +title: 'Slidev' # titleTemplate for the webpage, `%s` will be replaced by the page's title titleTemplate: '%s - Slidev' +# information for your slides, can be a markdown string +info: false # enabled pdf downloading in SPA build, can also be a custom url -download: true +download: false +# filename of the export file +exportFilename: 'slidev-exported.pdf' # syntax highlighter, can be 'prism' or 'shiki' highlighter: 'prism' # show line numbers in code blocks lineNumbers: false -# enable monaco editor, default to dev only +# enable monaco editor, can be boolean, 'dev' or 'build' monaco: 'dev' +# download remote assets in local using vite-plugin-remote-assets, can be boolean, 'dev' or 'build' +remoteAssets: false +# controls whether texts in slides are selectable +selectable: true +# enable slide recording, can be boolean, 'dev' or 'build' +record: 'dev' -# force color schema for the slides, could be 'auto', 'light', or 'dark' +# force color schema for the slides, can be 'auto', 'light', or 'dark' colorSchema: 'auto' -# router mode for vue-router, could be "history" or "hash" +# router mode for vue-router, can be "history" or "hash" routerMode: 'history' # aspect ratio for the slides aspectRatio: '16/9' # real width of the canvas, unit in px canvasWidth: 980 +# used for theme customization, will inject root styles as `--slidev-theme-x` for attribute `x` +themeConfig: + primary: '#5d8392' # favicon, can be a local file path or URL favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png' +# URL of PlantUML server used to render diagrams +plantUmlServer: 'https://www.plantuml.com/plantuml' # fonts will be auto imported from Google fonts # Learn more: https://sli.dev/custom/fonts fonts: @@ -47,10 +62,13 @@ defaults: layout: 'default' # ... -# information for your slides, can be a markdown string -info: | - ## Slidev - My first [Slidev](http://sli.dev/) presentations! +# drawing options +# Learn more: https://sli.dev/guide/drawing.html +drawings: + enabled: true + persist: false + presenterOnly: false + syncAll: true --- ``` From 030576270f137f7a9f12dda14c167d21a7eb432c Mon Sep 17 00:00:00 2001 From: Alexander Eble <35292572+alexanderdavide@users.noreply.github.com> Date: Mon, 25 Apr 2022 05:31:27 +0200 Subject: [PATCH 022/110] docs: update previews of slidev-theme-academic (#66) --- .vitepress/themes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vitepress/themes.ts b/.vitepress/themes.ts index 1090423..df153c6 100644 --- a/.vitepress/themes.ts +++ b/.vitepress/themes.ts @@ -327,7 +327,7 @@ export const community: ThemeInfo[] = [ previews: [ 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/01.png', 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/02.png', - 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/03.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/08.png', 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/04.png', 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/05.png', 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/06.png', From 87e46ef57643c3aa0f8551691b431a7cec3ed0c4 Mon Sep 17 00:00:00 2001 From: Tony Cabaye Date: Thu, 19 May 2022 11:15:57 +0200 Subject: [PATCH 023/110] feat: add doc for CLI commands (#67) --- custom/index.md | 1 + guide/install.md | 86 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 87 insertions(+) diff --git a/custom/index.md b/custom/index.md index 64a8b4d..faddfd7 100644 --- a/custom/index.md +++ b/custom/index.md @@ -9,6 +9,7 @@ You can configure Slidev in the frontmatter of your first slide, the following s ```yaml --- # theme id or package name +# Learn more: https://sli.dev/themes/use.html theme: 'default' # title of your slide, will auto infer from the first header if not specified title: 'Slidev' diff --git a/guide/install.md b/guide/install.md index c1e7157..fd7f85c 100644 --- a/guide/install.md +++ b/guide/install.md @@ -136,3 +136,89 @@ You can visit your slides from http://localhost/ Refer to the [tangramor/slidev_docker](https://github.com/tangramor/slidev_docker) for more details. + +### Command Line Interface (CLI) + +`@slidev/cli` Expose a few commands you can use with `npx slidev ...` or by adding scripts in your `package.json`: +```json +{ + "script": { + "dev": "slidev" + } +} +``` + +In that case you will be able to run `npm run dev`. + +You can pass options to any commands: + +* boolean option are `true` if they are present, false otherwise (example: `slidev --open`) +* some options can have values you can add just after the option or by using the `=` character (example: `slidev --port 8080` or `slidev --port=8080`) + +If you use npm scripts, don't forget to add `--` after the npm command: +```bash +npm run slidev -- --open +``` + +#### `slidev [entry]` + +Start a local server for Slidev. + +* `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry. + +Options: + +* `--port`, `-p` (`number`, default: `3030`): port number. +* `--open`, `-o` (`boolean`, default: `false`): open in browser. +* `--remote [password]` (`string`): listen to public host and enable remote control, if a value is passed then the presenter mode is private and only accessible by passing the given password in the URL query `password` parameter. +* `--log` (`'error', 'warn', 'info', 'silent'`, default: `'warn'`): Log level. +* `--force`, `-f` (`boolean`, default `false`): force the optimizer to ignore the cache and re-bundle. +* `--theme`, `-t` (`string`): override theme. + +#### `slidev build [entry]` + +Build hostable SPA. + +* `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry. + +Options: + +* `--watch`, `-w` (`boolean`, default: `false`): build watch. +* `--out`, `-o` (`string`, default: `dist`): output dir. +* `--base` (`string`, default: `/`): base URL (see https://cli.vuejs.org/config/#publicpath) +* `--download` (`boolean`, default: `false`): allow to download the slides as PDF inside the SPA. +* `--theme`, `-t` (`string`): override theme. + +#### `slidev export [entry]` + +Export slides to PDF (or other format). + +* `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry. + +Options: + +* `--output` (`string`, default: use `exportFilename` (see https://sli.dev/custom/#frontmatter-configures) or use `[entry]-export`): path to the output. +* `--base` (`'pdf', 'png', 'md'`, default: `'pdf'`): output format. +* `--timeout` (`number`, default: `30000`): timeout for rendering the print page (see https://playwright.dev/docs/api/class-page#page-goto). +* `--range` (`string`): page ranges to export (example: `'1,4-5,6'`). +* `--dark` (`boolean`, default: `false`): export as dark theme. +* `--with-clicks`, `-c` (`boolean`, default: `false`): export pages for every clicks (see https://sli.dev/guide/animations.html#click-animations). +* `--theme`, `-t` (`string`): override theme. + +#### `slidev format [entry]` + +Format the markdown file. + +* `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry. + +#### `slidev theme [subcommand]` + +Theme related operations. + +Subcommands: + +* `eject [entry]`: Eject current theme into local file system + * `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry. + * Options: + * `--dir` (`string`, default: `theme`): output dir. + * `--theme`, `-t` (`string`): override theme. From 017f644e8a13bbfaaadda40c0b1fdf54ddb284a0 Mon Sep 17 00:00:00 2001 From: Haili Zhang Date: Sun, 22 May 2022 16:57:40 +0800 Subject: [PATCH 024/110] doc: propose a new showcase (#68) --- .vitepress/showcases.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/.vitepress/showcases.ts b/.vitepress/showcases.ts index e8e1242..7c4c6fa 100644 --- a/.vitepress/showcases.ts +++ b/.vitepress/showcases.ts @@ -120,6 +120,18 @@ export const showcases: ShowCaseInfo[] = [ at: 'Internal Tech Talk', datetime: '2022-03-11', }, + { + title: 'OpenFunction 202', + cover: 'https://s2.loli.net/2022/05/22/4zsCnkQRFoAU1E5.png', + author: { + name: 'Haili Zhang', + link: 'https://github.com/webup', + }, + slidesLink: 'https://openfunction-talks.netlify.app/2022/202-node-async/', + sourceLink: 'https://github.com/webup/openfunction-talks/tree/main/202-node-async', + at: 'OpenFunction Tutorial Sharing', + datetime: '2022-05-08', + }, // Add yours here! { title: 'Yours?', From afa4515b72ea8814d0a633bdb4ec4c41734b502c Mon Sep 17 00:00:00 2001 From: Liran Tal Date: Wed, 25 May 2022 00:43:40 +0300 Subject: [PATCH 025/110] docs: typo with NavControls action description (#69) --- custom/global-layers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/custom/global-layers.md b/custom/global-layers.md index f5388cf..12579f9 100644 --- a/custom/global-layers.md +++ b/custom/global-layers.md @@ -36,7 +36,7 @@ The text `Your Name` will appear to all your slides. The button `Next` will appear in NavControls. -To enabled it conditionally, you can apply it with the [Vue Global Context](/custom/vue-context). +To enable it conditionally, you can apply it with the [Vue Global Context](/custom/vue-context). ```html From 18216961c9b829103d7ee5bc6c426cb525c3d51c Mon Sep 17 00:00:00 2001 From: Tony Cabaye Date: Wed, 25 May 2022 11:18:56 +0200 Subject: [PATCH 026/110] feat: addons doc (#71) * fix: title levels * feat: add addons doc * fix: remove compiler macro warnings --- .vitepress/config.js | 20 ++++++ .../theme/components/AlgoliaSearchBox.vue | 2 +- .../theme/components/BooleanDisplay.vue | 2 +- .vitepress/theme/components/Environment.vue | 2 - .vitepress/theme/components/NavBar.vue | 3 +- .../theme/components/NavDropdownLink.vue | 2 +- .../theme/components/NavDropdownLinkItem.vue | 2 +- .vitepress/theme/components/NavLink.vue | 2 +- .vitepress/theme/components/ShowCaseInfo.vue | 1 - .vitepress/theme/components/SideBar.vue | 1 - .vitepress/theme/components/ThemeGallery.vue | 2 +- .vitepress/theme/components/ThemeInfo.vue | 2 +- .vitepress/theme/components/Tweet.vue | 2 +- TRANSLATIONS.md | 5 ++ addons/use.md | 38 ++++++++++ addons/write-an-addon.md | 71 +++++++++++++++++++ guide/install.md | 12 ++-- 17 files changed, 149 insertions(+), 20 deletions(-) create mode 100644 addons/use.md create mode 100644 addons/write-an-addon.md diff --git a/.vitepress/config.js b/.vitepress/config.js index 915337d..c5b3569 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -70,6 +70,17 @@ const Theme = [ }, ] +const Addon = [ + { + text: 'Use Addon', + link: '/addons/use', + }, + { + text: 'Write an Addon', + link: '/addons/write-an-addon', + }, +] + const Translations = [ { text: 'English', @@ -191,6 +202,10 @@ const slidebars = [ text: 'Themes', children: Theme, }, + { + text: 'Addons', + children: Addon, + }, { text: 'Customizations', children: Customizations, @@ -254,6 +269,10 @@ module.exports = { text: 'Theme', items: Theme, }, + { + text: 'Addon', + items: Addon, + }, { text: 'Customize', items: Customizations, @@ -271,6 +290,7 @@ module.exports = { sidebar: { '/guide/': slidebars, '/themes/': slidebars, + '/addons/': slidebars, '/custom/': slidebars, '/builtin/': slidebars, '/resources/': slidebars, diff --git a/.vitepress/theme/components/AlgoliaSearchBox.vue b/.vitepress/theme/components/AlgoliaSearchBox.vue index 3961a51..b9a5b7f 100644 --- a/.vitepress/theme/components/AlgoliaSearchBox.vue +++ b/.vitepress/theme/components/AlgoliaSearchBox.vue @@ -5,7 +5,7 @@ diff --git a/.vitepress/theme/components/NavBar.vue b/.vitepress/theme/components/NavBar.vue index 5ba8c8d..ed00270 100644 --- a/.vitepress/theme/components/NavBar.vue +++ b/.vitepress/theme/components/NavBar.vue @@ -39,7 +39,6 @@ diff --git a/.vitepress/theme/components/HomeHero.vue b/.vitepress/theme/components/HomeHero.vue index 8bcbfff..efbc158 100644 --- a/.vitepress/theme/components/HomeHero.vue +++ b/.vitepress/theme/components/HomeHero.vue @@ -17,14 +17,14 @@ @@ -51,19 +51,19 @@ +