Keywords:
- astro
- astro-component
- asciinema
- terminal
- sessions
- cli
- recording
- player
- javascript
- command-line
🚀 Astro — Terminal Player (Asciinema)
Embed player for terminal sessions (recorded with asciinema) in your Astro project.
Using asciinema player under the hood.
Comes with full asciinema player settings support, typings and docs hints.
Auto plays / pauses when player is visible.
📦 Installation
pnpm i asciinema-player astro-terminal-player🛠 Usage
---
import { TerminalPlayer } from 'astro-terminal-player';
import myRecordedCast from '../assets/myRecordedCast.cast?url';
// ...
---<!-- ... -->
<body>
<!-- Place component inside `BODY` tag -->
<TerminalPlayer
src={myRecordedCast /* Required */}
settings={{
/* `asciinema-player` settings are typed and thoroughly documented */
loop: true,
speed: 1.7,
theme: 'solarized-dark',
terminalFontSize: 'big',
}}
aria-label="Terminal session player!"
class="my-custom-css-overrides"
class:list={['my-custom-css-list']}
/>
<!-- ... -->
</body>🎉 Result
TypeScript API
Extends: astroHTML.JSX.HTMLAttributes
name
type
required
src
string | undefined
true
settings
AsciinemaSettings
false
cols
number
false
rows
number
false
autoPlay
boolean
false
preload
boolean
false
loop
boolean | number
false
startAt
number | string
false
speed
number
false
idleTimeLimit
number
false
* poster
"data:text/plain,I'm regular \x1b[1
true
poster
string
false
fit
string
false
terminalFontSize
'small' | 'medium' | 'big' | string
false
terminalFontFamily
string
false
terminalLineHeight
number
false
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.1.1 (2022-10-17)
Bug Fixes
- remove package prefix, simplify import method (73bd31b)
0.1.0 (2022-10-15)
Features
- init terminal player component (886e0fe)
...
Licenses
Package
Author
License
URL