Skip to content

Commit

Permalink
fix: docs
Browse files Browse the repository at this point in the history
  • Loading branch information
antfu committed Apr 26, 2021
1 parent faf159e commit d81a358
Show file tree
Hide file tree
Showing 7 changed files with 31 additions and 16 deletions.
9 changes: 5 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,16 +37,15 @@ For a full example, you can check the [demo](./demo) folder, which is a draft fo

## TODO

- [ ] Foot notes
- [ ] Configuration in header
- [ ] Preload next slide
- [ ] Shiki + TwoSlash?
- [ ] VS Code extension
- [ ] Presentor View
- [ ] Timer
- [ ] A few more themes
- [ ] Dialog before recording
- [ ] Docs
- [x] Presentor Mode
- [x] Foot notes
- [x] Configuration in header
- [x] Hide dev buttons on build
- [x] Embedded editor
- [x] Custom Monaco setup
Expand All @@ -62,6 +61,8 @@ For a full example, you can check the [demo](./demo) folder, which is a draft fo
- [x] Dev Mode
- [x] Build Mode
- [x] Export PDF
- [x] Export PNG
- [x] Better CLI
- [x] Configurable themes

## Sponsors
Expand Down
2 changes: 1 addition & 1 deletion docs/.vitepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const slidebars = [
},
{
text: 'Record Presentation',
link: '/guide/record',
link: '/guide/recording',
},
{
text: 'Presenter Mode',
Expand Down
2 changes: 1 addition & 1 deletion docs/custom/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,4 @@ This also works:

> TODO:
Check more in the [directory structure](/guide/dir-structure) section.
Check more in the [directory structure](/custom/dir-structure) section.
12 changes: 11 additions & 1 deletion docs/guide/export.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,20 @@ Exporting your slides into PDF by the following command
$ slidev export
```

After a few seconds, your slides will be ready at `./slides.pdf`.
After a few seconds, your slides will be ready at `./slides-exports.pdf`.

## PNGs

Passing the `--format png` option, it will export PNG images for each slide.

```bash
$ slidev export --format png
```

## Single-Page Application (SPA)

> ⚗️ Experimental
Since Slidev is a web app, there is no reason you can't host it.

You can build the slides into a self hostable SPA by:
Expand Down
File renamed without changes.
8 changes: 4 additions & 4 deletions docs/guide/syntax.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,15 @@ Refer to [supported frontmatter fields](/guide/frontmatter-fields) for more deta

### Code Snippet

A big reason I am making this is that I need to make code looks right in the slides. So just as you expected, you can use markdown favored code block to highlight your code.
A big reason I am making this is that I need to make my code looks just right in the slides. So just as you expected, you can use Markdown favored code block to highlight your code.

~~~md
```ts
console.log('HelloWorld')
`​``
~~~

Whenever you want to do some modification in the presentation, simply add `{monaco}` after the language id, it will turn the block into a full-featured Monaco editor!
Whenever you want to do some modification in the presentation, simply add `{monaco}` after the language id, it turns the block into a full-featured Monaco editor!

~~~md
```ts{monaco}
Expand Down Expand Up @@ -118,7 +118,7 @@ All the configurations needed can also be defined in the Markdown file. For exam

```md
---
theme: '@slidev/theme-seriph'
theme: seriph
layout: cover
background: 'https://source.unsplash.com/1600x900/?nature,water'
---
Expand All @@ -128,4 +128,4 @@ background: 'https://source.unsplash.com/1600x900/?nature,water'
This is the cover page.
```

For more details about using a theme, refer to [this section](/guide/use-theme).
For more details about using a theme, refer to [this section](/themes/).
14 changes: 9 additions & 5 deletions docs/guide/why.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,21 @@

There are a lot of feature-rich, general-purpose, WYSIWYG slides makers like [Microsoft PowerPoint](https://www.microsoft.com/en-us/microsoft-365/powerpoint) and [Apple Keynote](https://www.apple.com/keynote/). They work pretty well on making nice slides with animations, charts, and many other things, while being very intuitive and easy to learn. So why bother making Slidev?

Slidev is trying to provide the flexibility and interactivity for developers to make their presentation even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with. Slidev separates the content and visual to make you focus on one thing at a time, while being able to share and use the themes with the community.
Slidev is trying to provide the flexibility and interactivity for developers to make their presentation even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with. Slidev separates the content and visuals. This allows you to focus on one thing at a time, while being able to reuse the themes from the community.

While Slidev will never tend to replace those slides apps and being beginner friendly, here is a few notions and highlights of Slidev:
While Slidev will never tend to replace those slides apps and being beginner-friendly, here is a few notions and highlights of Slidev:

## Slidev

### Text-based

Slidev uses an extended Markdown format to store and organize your slides in a single plain text file. This lets you focus on making the content. And since the content and styles are separated, this also made it possible to switch between different themes effortlessly.

Learn mode about the slides [Markdown Syntax](/guide/syntax).

### Themable

Themes for Slidev can be shared and installed using npm packages. And apply them with only one line of config. Check out the [theme gallery](/guide/theme-gallery) or [how to write a theme](/guide/write-a-theme).
Themes for Slidev can be shared and installed using npm packages. And apply them with only one line of config. Check out the [theme gallery](/themes/gallery) or [how to write a theme](/themes/write-a-theme).

### Developer Friendly

Expand All @@ -28,12 +30,14 @@ You can write custom components and use them directly inside your markdown file.

### Recording Support

Slidev provides built-in recording and camera view. You can share your presentation with your camera view inside, or record and save seperately for your screen and camera. All with one go, no addition tools needed.
Slidev provides built-in recording and camera view. You can share your presentation with your camera view inside, or record and save seperately for your screen and camera. All with one go, no additional tools are needed.

Learn more about the [recording here](/guide/recording).

### Portable

Export your slides into PDF, PNGs, or even a hostable Single-page Application (SPA) with a single command, and share them anywhere.

### Hackable

Since Slidev is powered by web technologies, anything that can be done with web apps are also possible with Slidev. For example, WebGL, API requesting, Iframes or even live sharing, it's up to your imaginations!
Since Slidev is powered by web technologies, anything that can be done with web apps are also possible with Slidev. For example, WebGL, API requesting, iframes, or even live sharing, it's up to your imaginations!

0 comments on commit d81a358

Please sign in to comment.