bs-spectacle

BuckleScript bindings for Spectacle

Example

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

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

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>
};

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