Merge pull request #6 from murilo-cunha/docs

Docs

.github/workflows/publish.yaml

@@ -2,8 +2,10 @@ name: Publish package to npmjs
 on:
  push:
  branches: [main]
+env:
+ BASE: slidev-addon-asciinema
 jobs:
- build:
+ publish:
  runs-on: ubuntu-latest
  steps:
  - uses: actions/checkout@v3
@@ -34,3 +36,31 @@ jobs:
  tag_name: "${{ env.TAG }}",
  generate_release_notes: true
  })
+ build:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
+ with:
+ node-version: '14'
+ - name: Install dependencies
+ run: yarn install
+ - name: Build
+ run: yarn build --base ${{ env.BASE }}
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v1
+ with:
+ path: dist/
+ deploy:
+ needs: build
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+ permissions:
+ pages: write
+ id-token: write
+ runs-on: ubuntu-latest
+ steps:
+ - name: Deploy to GitHub Pages
+ id: deployment
+ uses: actions/deploy-pages@v2

README.md

@@ -1,2 +1,115 @@
-# slidev-addon-asciinema
-Slidev addon to embed asciinema casts to presentations.
+<div style="text-align:center;">
+ <img src="https://pbs.twimg.com/profile_images/1388805947691134976/bIiEQTyK_400x400.jpg" width=30%/>
+ <img src="https://avatars.githubusercontent.com/u/6506055?s=280&v=4" width=30%/>
+</div>
+
+# Asciinema player for Slidev
+
+> Slidev addon to embed asciinema casts to presentations.
+
+## Get started
+
+### Create a project
+
+With NPM:
+
+```console
+npm init slidev
+```
+
+With Yarn:
+
+```console
+yarn create slidev
+```
+
+With pnpm:
+
+```console
+pnpm create slidev
+```
+
+### Add slidev addon
+
+With NPM:
+
+```console
+npm install slidev-addon-asciinema
+```
+
+With Yarn:
+
+```console
+yarn add slidev-addon-asciinema
+```
+
+With pnpm:
+
+```console
+pnpm add slidev-addon-asciinema
+```
+
+### Declare the addon
+
+Either add in your `slides.md` top frontmatter:
+
+```yaml
+theme: ...
+...
+addons:
+ - slidev-addon-asciinema
+---
+# Slides markdown
+```
+
+Or add it in your `package.json` file:
+
+```json
+{
+ // ...
+ "scripts": {
+ // ...
+ },
+ "slidev": {
+ "addons": [
+ "slidev-addon-asciinema"
+ ]
+ }
+}
+```
+
+### Use it in your presentation
+
+> 🚨 Wrap the component in `<RenderWhen>` tags. Slidev will otherwise render the component multiple times. See [#396](https://github.com/slidevjs/slidev/issues/396#issuecomment-1137191344) for more information.
+
+```md
+# Example
+
+<RenderWhen context="main">
+ <Asciinema src="/casts/yourcast.cast" />
+</RenderWhen>
+```
+
+The parameter `src` will look for static assets from the [`public` directory](https://sli.dev/custom/directory-structure.html#public). In this example, the file is be located at `your-project-root/public/casts/yourcast.cast`.
+
+### Customize your player
+
+All the[ `asciinema-player`'s options](https://github.com/asciinema/asciinema-player#options) are available via `:playerProps`. For example, one could change the speed and the number of lines of player's terminal with:
+
+```md
+# Example
+
+<RenderWhen context="main">
+ <Asciinema src="/casts/yourcast.cast" :playerProps="{speed: 2, rows: 23}"/>
+</RenderWhen>
+```
+
+## Known issues
+
+There are a couple of issues already identified
+
+- Player placeholder is resized after playing cast - [#1](https://github.com/murilo-cunha/slidev-addon-asciinema/issues/1)
+- Nerd fonts are not supported by the player - [#2](https://github.com/murilo-cunha/slidev-addon-asciinema/issues/2)
+- Video's progress does not move in the same place where click happens - [#5](https://github.com/murilo-cunha/slidev-addon-asciinema/issues/5)
+
+Would you like to contribute? Leave a PR! 🚀

example.md

@@ -9,9 +9,31 @@ layout: cover
 layout: intro
 ---
 
+# Usage
+
+See all `:playerProps` at [`asciinema player` docs](https://github.com/asciinema/asciinema-player)
+
+```md
+<RenderWhen context="main">
+ <Asciinema src="/casts/demo.cast" :playerProps="{speed: 2, rows: 15}"/>
+</RenderWhen>
+```
+
+---
+
 # Demo
 
 
 <RenderWhen context="main">
- <Asciinema src="/casts/demo.cast" :playerProps="{speed: 2, rows: 23}"/>
-</RenderWhen>
+ <Asciinema src="/casts/demo.cast" :playerProps="{speed: 2, rows: 16}"/>
+</RenderWhen>
+
+---
+layout: cover
+---
+
+## Check out the GitHub repo for more information!
+
+<br/>
+
+> [github.com/murilo-cunha/slidev-addon-asciinema](https://github.com/murilo-cunha/slidev-addon-asciinema)