gatsby-transformer-slide-track

Parses YAML files that are generated by terminalizer for TerminalPlayer to consume.

Supported extensions: .yaml, .yml

Both .yaml and .yml are treated in the same way. This document uses both of them interchangeably.

Please note that this plugin is built into @arcblock/gatsby-theme-docs.

Install

npm install --save @arcblock/gatsby-transformer-slide-track

Note: You also need to have gatsby-source-filesystem installed and configured so it points to your files.

How to use

In your gatsby-config.js

module.exports = {
  plugins: [
    `@arcblock/gatsby-transformer-slide-track`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/data/`,
      },
    },
  ],
};

Where the source folder ./src/data/ contains the .yaml files.

How to query

You can query the nodes using GraphQL, like from the GraphiQL browser: localhost:8000/___graphql.

query RecordingListQuery {
  recordings: allTerminalRecording {
    nodes {
      absolutePath
      config {
        command
        cwd
        cols
        rows
        repeat
        quality
        frameDelay
        maxIdleTime
        cursorStyle
        fontFamily
        fontSize
        lineHeight
        letterSpacing
        frameBox {
          title
          type
          style {
            border
          }
        }
        theme {
          background
          foreground
          cursor
          black
          red
          green
          yellow
          blue
          magenta
          cyan
          white
          brightBlack
          brightRed
          brightGreen
          brightYellow
          brightBlue
          brightMagenta
          brightCyan
          brightWhite
        }
      }
      extension
      frames {
        content
        delay
      }
      id
      name
      relativeDirectory
      relativePath
    }
  }
}

Which would return data for @arcblock/ux/lib/Terminal/Player to consume:

render() {
  const recordings = data.recordings.nodes;
  const recording = recordings.find(x => x.relativePath.indexOf(sourceClean) >= 0);

  if (!recording) {
    return null;
  }

  return (
    <div className="terminal-player-container" style={{ width: '100%' }}>
      <TerminalPlayer frames={recording.frames} options={recording.config} />
    </div>
  );
}