spectacle
Version:
ReactJS Powered Presentation Framework
196 lines (185 loc) • 7.37 kB
JavaScript
import React from "react";
import {
Appear, BlockQuote, Cite, CodePane, Deck, Fill,
Heading, Image, Layout, Link, ListItem, List, Markdown, Quote, Slide, Spectacle,
TableHeaderItem, TableItem, TableRow, Table, Text
} from "../src";
import preloader from "../src/utils/preloader";
import createTheme from "../src/themes/default";
import Interactive from "../assets/interactive";
require("normalize.css");
require("../src/themes/default/index.css");
const images = {
city: require("../assets/city.jpg"),
kat: require("../assets/kat.png"),
logo: require("../assets/formidable-logo.svg"),
markdown: require("../assets/markdown.png")
};
preloader(images);
const theme = createTheme({
primary: "#ff4081"
});
export default class Presentation extends React.Component {
render() {
return (
<Spectacle theme={theme}>
<Deck transition={["zoom", "slide"]} transitionDuration={500}>
<Slide transition={["zoom"]} bgColor="primary">
<Heading size={1} fit caps lineHeight={1} textColor="black">
Spectacle
</Heading>
<Heading size={1} fit caps>
A ReactJS Presentation Library
</Heading>
<Heading size={1} fit caps textColor="black">
Where You Can Write Your Decks In JSX
</Heading>
<Link href="https://github.com/FormidableLabs/spectacle">
<Text bold caps textColor="tertiary">View on Github</Text>
</Link>
<Text textSize="1.5em" margin="20px 0px 0px" bold>Hit Your Right Arrow To Begin!</Text>
</Slide>
<Slide transition={["slide"]} bgColor="black" notes="You can even put notes on your slide. How awesome is that?">
<Image src={images.kat.replace("/", "")} margin="0px auto 40px" height="293px"/>
<Heading size={2} caps fit textColor="primary" textFont="primary">
Wait what?
</Heading>
</Slide>
<Slide transition={["zoom", "fade"]} bgColor="primary" notes="<ul><li>talk about that</li><li>and that</li></ul>">
<CodePane
lang="jsx"
source={require("raw!../assets/deck.example")}
margin="20px auto"
/>
</Slide>
<Slide transition={["slide"]} bgImage={images.city.replace("/", "")} bgDarken={0.75}>
<Appear fid="1">
<Heading size={1} caps fit textColor="primary">
Full Width
</Heading>
</Appear>
<Appear fid="2">
<Heading size={1} caps fit textColor="tertiary">
Adjustable Darkness
</Heading>
</Appear>
<Appear fid="3">
<Heading size={1} caps fit textColor="primary">
Background Imagery
</Heading>
</Appear>
</Slide>
<Slide transition={["zoom", "fade"]} bgColor="primary">
<Heading caps fit>Flexible Layouts</Heading>
<Layout>
<Fill>
<Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
Left
</Heading>
</Fill>
<Fill>
<Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
Right
</Heading>
</Fill>
</Layout>
</Slide>
<Slide transition={["slide"]} bgColor="black">
<BlockQuote>
<Quote>Wonderfully formatted quotes</Quote>
<Cite>Ken Wheeler</Cite>
</BlockQuote>
</Slide>
<Slide transition={["spin", "zoom"]} bgColor="tertiary">
<Heading caps fit size={1} textColor="primary">
Inline Markdown
</Heading>
<Markdown>
{`
![Markdown Logo](${images.markdown.replace("/", "")})
You can write inline images, [Markdown Links](http://commonmark.org), paragraph text and most other markdown syntax
* Lists too!
* With ~~strikethrough~~ and _italic_
* And let's not forget **bold**
`}
</Markdown>
</Slide>
<Slide transition={["slide", "spin"]} bgColor="primary">
<Heading caps fit size={1} textColor="tertiary">
Smooth
</Heading>
<Heading caps fit size={1} textColor="secondary">
Combinable Transitions
</Heading>
</Slide>
<Slide transition={["fade"]} bgColor="secondary" textColor="primary">
<List>
<Appear><ListItem>Inline style based theme system</ListItem></Appear>
<Appear><ListItem>Autofit text</ListItem></Appear>
<Appear><ListItem>Flexbox layout system</ListItem></Appear>
<Appear><ListItem>PDF export</ListItem></Appear>
<Appear><ListItem>And...</ListItem></Appear>
</List>
</Slide>
<Slide transition={["slide"]} bgColor="primary">
<Heading size={1} caps fit textColor="tertiary">
Your presentations are interactive
</Heading>
<Interactive/>
</Slide>
<Slide transition={["slide"]} bgColor="primary"
notes="Hard to find cities without any pizza"
>
<Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
Pizza Toppings
</Heading>
<Layout>
<Table>
<thead>
<TableRow>
<TableHeaderItem/>
<TableHeaderItem>2011</TableHeaderItem>
<TableHeaderItem>2013</TableHeaderItem>
<TableHeaderItem>2015</TableHeaderItem>
</TableRow>
</thead>
<tbody>
<TableRow>
<TableItem>None</TableItem>
<TableItem>61.8%</TableItem>
<TableItem>39.6%</TableItem>
<TableItem>35.0%</TableItem>
</TableRow>
<TableRow>
<TableItem>Pineapple</TableItem>
<TableItem>28.3%</TableItem>
<TableItem>54.5%</TableItem>
<TableItem>61.5%</TableItem>
</TableRow>
<TableRow>
<TableItem>Pepperoni</TableItem>
<TableItem/>
<TableItem>50.2%</TableItem>
<TableItem>77.2%</TableItem>
</TableRow>
<TableRow>
<TableItem>Olives</TableItem>
<TableItem/>
<TableItem>24.9%</TableItem>
<TableItem>55.9%</TableItem>
</TableRow>
</tbody>
</Table>
</Layout>
</Slide>
<Slide transition={["spin", "slide"]} bgColor="tertiary">
<Heading size={1} caps fit lineHeight={1.5} textColor="primary">
Made with love in Seattle by
</Heading>
<Link href="http://www.formidable.com"><Image width="100%" src={images.logo}/></Link>
</Slide>
</Deck>
</Spectacle>
);
}
}