November Papa Mike

    @authzed/animated-code-example-component
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    @authzed/animated-code-example-component · monthly downloads gitHub license npm version PRs welcome

    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

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

    or

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

    NOTE: Requires React.

    Introduction

    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.

    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 (
        <AnimatedCodeExample script={script} />;
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

    Playground

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

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

    Keywords

    none

    Install

    npm i @authzed/animated-code-example-component

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    Apache-2.0

    Unpacked Size

    166 kB

    Total Files

    10

    Last publish

    Collaborators

    • authzednpm