@authzed/animated-code-example-component ·    

Component for displaying an animated code example, along with an animated REPL-like environment and fake web browser. Useful for showing small "live" examples on landing and marketing pages. Only begins the animation once the component is visible on the page.

Documentation

* Installation
* Introduction
* Usage
* Simple example
* Playground

$3

``bash
npm install @authzed/animated-code-example-component
`

or

`bash
yarn add @authzed/animated-code-example-component
`

NOTE: Requires React.

$3

The Animated Code Example Component displays a fake code editor, REPL-like environment and web browser, all of which are scriptable by the caller to produce an animated virtual development enivornment for display on a landing or marketing page.

#### Simple example

A simple example that shows a (fake) website, "edits" it, then updates the website.

`ts
import React from "react";
import ReactDOM from "react-dom";

import {DemoScript, DemoStepKind, stepsForText, StepTarget} from '@authzed/animated-code-example-component';

// Include the CSS for the component.
import '@authzed/animated-code-example-component/dist/index.css'

const script: DemoScript = {
initialEditorContent:
@app.route('/')
def hello_world():
return 'Hello World!'
,
initialReplContent: '',
initialBrowserContent: 'Hello World!',
editorLanguage: 'python',
steps: [
...stepsForText(from somelib import something\n, StepTarget.EDITOR, 1, 1),
...stepsForText(' - Hi there!', StepTarget.EDITOR, 5, 23),
...stepsForText('./deploywebsite', StepTarget.REPL, 1, 1),
{ kind: DemoStepKind.SLEEP, duration: 200 },
{ kind: DemoStepKind.INSERT_TEXT, target: StepTarget.REPL, value: '\n> Website updated!' },
{ kind: DemoStepKind.SLEEP, duration: 500 },
{ kind: DemoStepKind.SET_BROWSER_CONTENT, target: StepTarget.BROWSER, value: 'Hello World! - Hi there!' },
]
}

function App() {
return (
;
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
`

$3

To edit and test demo scripts, the playground can be run via yarn:

`sh
cd playground
yarn install # If this is the first time running
yarn start
``