Noodles, Poodles and More!

    astro-terminal-player

    0.1.5 • Public • Published

    🚀  Astro — Terminal player (Asciinema)

    NPM Downloads ISC License PRs Welcome
    Astro TypeScript Prettier EditorConfig ESLint

    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

    Vite client-side fix

    You might want to add this to your astro.config:

    export default defineConfig({
      /* ... */
      vite: { optimizeDeps: { include: ['asciinema-player'] } },
    });

    So client-side, third-party JS will be loaded properly, instead of getting this error:

    Uncaught SyntaxError: The requested module '.../@babel/runtime/regenerator/...' does not provide an export named 'default' ...

    Also importing asciinema-player CSS solve a discrepency between dev and build where the latter comes unstyled. To fix this, add this to your CSS:

    @import 'asciinema-player/dist/bundle/asciinema-player.css';

    Note that this component is already importing CSS bundle internally, so this is a temporary quick fix.

    🛠  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

    Install

    npm i astro-terminal-player

    DownloadsWeekly Downloads

    10

    Version

    0.1.5

    License

    ISC

    Unpacked Size

    16 kB

    Total Files

    7

    Last publish

    Collaborators

    • julian.cataldo