16
65%
MIT
bs-spectacle
1.0.2
Spectacle bindings for Bucklescript
bindingreactpresentation
homepagerepositorynpmissuesdocumentation

bs-spectacle

BuckleScript bindings for Spectacle

npm (scoped) CircleCI

Example

See examples/full-spectacle. It uses almost all features of Spectacle.

examples/extras aims to showcase features not included in original Spectacle example.

  • RE
  • ML 
open BsSpectacle;

let theme =
  Theme.(
    createTheme(
      {primary: "#26A0D1", secondary: "white", tertiary: "#505050", quarternary: "white"},
      {
        primary: {name: "Merriweather", googleFont: true, styles: [|"300"|]},
        secondary: {name: "Roboto", googleFont: true, styles: [|"100"|]},
        tertiary: simpleFont("monospace")
      }
    )
  );

let s = ReasonReact.stringToElement;

let component = ReasonReact.statelessComponent("Simple");

let make = (_children) => {
  ...component,
  render: (_self) =>
    <Deck transition=[|Zoom, Slide|] theme>
      <Slide>
        <Heading textColor="secondary" textFont="secondary"> (s("Hello, world")) </Heading>
      </Slide>
      <Slide transition=[|Slide|] bgColor="secondary">
        <BlockQuote>
          <Quote> (s({js|It’s easy, see...|js})) </Quote>
          <Cite> (s("Unknown")) </Cite>
        </BlockQuote>
      </Slide>
    </Deck>
};
open BsSpectacle
let theme =
  let open Theme in
    createTheme
      {
        primary = "#26A0D1";
        secondary = "white";
        tertiary = "#505050";
        quarternary = "white"
      }
      {
        primary =
          { name = "Merriweather"; googleFont = true; styles = [|"300"|] };
        secondary =
          { name = "Roboto"; googleFont = true; styles = [|"100"|] };
        tertiary = (simpleFont "monospace")
      }
let s = ReasonReact.stringToElement
let component = ReasonReact.statelessComponent "Simple"
let make _children =
  {
    component with
    render =
      (fun _self  ->
         ((Deck.createElement ~transition:[|Zoom;Slide|] ~theme
             ~children:[((Slide.createElement
                            ~children:[((Heading.createElement
                                           ~textColor:"secondary"
                                           ~textFont:"secondary"
                                           ~children:[s "Hello, world"] ())
                                      [@JSX ])] ())[@JSX ]);
                       ((Slide.createElement ~transition:[|Slide|]
                           ~bgColor:"secondary"
                           ~children:[((BlockQuote.createElement
                                          ~children:[((Quote.createElement
                                                         ~children:[s
                                                                    {js|It’s easy, see...|js}]
                                                         ())[@JSX ]);
                                                    ((Cite.createElement
                                                        ~children:[s
                                                                    "Unknown"]
                                                        ())[@JSX ])] ())
                                     [@JSX ])] ())[@JSX ])] ())[@JSX ]))
  }

Installation

Easiest way is:

  1. use create-react-app

  2. install this bindings and spectacle

    $ npm install --save bs-spectacle spectacle-scripts reason-react
# or
$ yarn add bs-spectacle spectacle-scripts reason-react

  3. add bs-spectacle to bs-dependencies in your bsconfig.json

    {
...
"bs-dependencies": ["bs-spectacle"]
}

  4. modify package.json scripts

    "scripts": {
    "build": "bsb -make-world && react-scripts build",
    "start": "bsb -make-world -w",
    "clean": "bsb -clean-world",
    "test": "echo \"Error: no test specified\" && exit 1"
}

To run it in dev mode, run npm start in one shell and react-scripts start in another shell.

Status

Every spectacle feature is supported.

Components

  • Deck
  • Slide (Base)
  • Notes
  • Layout
  • Fit
  • Fill
  • Markdown
  • Magic
  • Appear
  • BlockQuote, Quote and Cite (Base)
  • CodePane (Base)
  • Code (Base)
  • ComponentPlayground
  • GoToAction (Base)
  • Heading (Base)
  • Image (Base)
  • Link (Base)
  • List & ListItem (Base)
  • S (Base)
  • Table, TableRow, TableBody, TableHeader, TableHeaderItem and TableItem (Base)
  • Text (Base)
  • Typeface

APIs

  • Theme
  • Transition Function
  • MarkdownSlides
  • Preloader
  • History

Project

Made with

Reason