One page standalone HTML presentation (a la remark)

.babelrc

@@ -5,7 +5,7 @@
     "react"
   ],
   "plugins": [
-    "transform-decorators-legacy",
+    "transform-decorators-legacy"
   ],
   "env": {
     "production": {
@@ -15,8 +15,8 @@
         "transform-react-constant-elements",
         "transform-react-inline-elements",
         "transform-runtime",
-        "transform-decorators-legacy",
-      ],
+        "transform-decorators-legacy"
+      ]
     },
     "test": {
       "plugins": [

.gitignore

@@ -3,4 +3,4 @@ dist
 lib
 *.log
 .DS_Store
-.vscode
+.vscode

.npmignore

@@ -1,3 +1,11 @@
-node_modules
-src
-*.log
+/*
+!/dist/spectacle*
+dist/*.map
+!/docs
+!/lib
+!/src
+__snapshots__
+*.test.js
+!LICENSE
+!README.md
+!package.json

.travis.yml

@@ -2,9 +2,8 @@ language: node_js
 
 node_js:
   - 4
-  - 5
   - 6
-  - 7
+  - 8
 
 # Use container-based Travis infrastructure.
 sudo: false
@@ -19,10 +18,9 @@ notifications:
     on_failure: always
 
 before_install:
-  - npm install -g npm@3
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
 
 script:
-  - npm run lint
-  - npm run test
+  - yarn run lint
+  - yarn run test

CONTRIBUTING.md

@@ -0,0 +1,109 @@
+Thanks for contributing!
+
+## Development
+
+### Installing dependencies
+
+```bash
+yarn install
+```
+
+You will find all building blocks that make up Spectacle in the [`src`](src) folder.
+
+### Testing
+
+You will find tests for files colocated with `*.test.js` suffixes. Whenever making any changes, ensure that all existing tests pass by running `yarn run test`.
+
+If you are adding a new feature or some extra functionality, you should also make sure to accompany those changes with appropriate tests.
+
+### Linting
+
+Before commiting any changes, be sure to do `yarn run lint`; this will lint all relevant files using [ESLint](http://eslint.org/) and report on any changes that you need to make.
+
+### Before submitting a PR...
+
+Thanks for taking the time to help us make Spectacle even better! Before you go ahead and submit a PR, make sure that you have done the following:
+
+- Run the tests using `yarn run test`.
+- Run lint and flow using `yarn run lint`
+
+## Releasing a new version to NPM (only for project administrators):
+
+1. Run `npm version patch` (or `minor`, `major` as appropriate) to run tests and lint, build the `lib` ands `dist` directories, , then update `package.json` and add a git tag.
+2. Run `npm publish` and publish to npm if all is well.
+3. Run `git push && git push --tags`
+
+## Contributor Covenant Code of Conduct
+
+### Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+### Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+### Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+### Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+### Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at ken.wheeler@formidable.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+### Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

README.markdown → README.md

@@ -1,6 +1,7 @@
 # Spectacle
 
 [![Join the chat at https://gitter.im/FormidableLabs/spectacle](https://badges.gitter.im/FormidableLabs/spectacle.svg)](https://gitter.im/FormidableLabs/spectacle?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Travis Status][trav_img]][trav_site]
 ReactJS based Presentation Library
 
 [Spectacle Boilerplate](https://github.com/FormidableLabs/spectacle-boilerplate/)
@@ -10,6 +11,7 @@ ReactJS based Presentation Library
 <!-- MarkdownTOC depth=4 autolink=true bracket=round autoanchor=true -->
 
 - [Getting Started](#getting-started)
+- [One Page](#one-page)
 - [Development](#development)
 - [Build & Deployment](#build--deployment)
 - [Presenting](#presenting)
@@ -57,10 +59,97 @@ ReactJS based Presentation Library
 
 The best way to get started is by using the [Spectacle Boilerplate](https://github.com/FormidableLabs/spectacle-boilerplate).
 
-Alternatively, you can `npm install spectacle` and write your own build configurations.
+Alternatively, you can `npm install spectacle` and write your own build configurations. We also provide full UMD builds (with a `Spectacle` global variable) of the library at `dist/spectacle.js` and `dist/spectacle.min.js` for more general use cases. You could, for example, include the library via a script tag with: `https://unpkg.com/spectacle@VERSION/dist/spectacle.min.js`.
+
+Note that we have webpack externals for `react`, `react-dom`, and `prop-types`, so you will need to provide them in your upstream build or something like linking in via `script` tags in your HTML page for all three libraries. This comports with our project dependencies which place these three libraries in `peerDependencies`.
 
 But really, it is SO much easier to just use the boilerplate. Trust me.
 
+<a name="one-page"></a>
+## One Page
+
+To aid with speedy development / kicking the tires on spectacle, we suuport using a simple boilerplate HTML page with a bespoke script tag that contains your entire presentation. The rest of the setup will take care of transpiling your React/ESnext code, providing Spectacle, React, and ReactDOM libraries, and being raring to go with a minimum of effort.
+
+We can start with this projet's sample at [`one-page.html`](./one-page.html). It's essentially, the same presentation as the fully-built-from-source version, with a few notable exceptions:
+
+1. There are no `import`s or `require`s. Everything must come from the global namespace. This includes `Spectacle`, `React`, `ReactDOM` and all the Spectacle exports from [`./src/index.js`](./src/index.js) -- `Deck`, `Slide`, `themes`, etc.
+2. The presentation must include exaclty **one** script tag with the type `text/spectacle` that is a function. Presently, that function is directly inserted inline into a wrapper code boilerplate as a React Component `render` function. The wrapper is transpiled. There should not be any extraneous content around it like outer variables or comments.
+
+    **Good** examples:
+
+    ```html
+    <script type="text/spectacle">
+      () => (
+        <Deck>{/* SLIDES */}</Deck>
+      )
+    </script>
+    ```
+
+    ```html
+    <script type="text/spectacle">
+      () => {
+        // Code-y code stuff in JS...
+
+        return (
+          <Deck>{/* SLIDES */}</Deck>
+        );
+      }
+    </script>
+    ```
+
+    **Bad** examples of what not to do:
+
+    ```html
+    <script type="text/spectacle">
+      // Outer comment (BAD)
+      const outerVariable = "BAD";
+
+      () => (
+        <Deck>{/* SLIDES */}</Deck>
+      )
+    </script>
+    ```
+
+... with those guidelines in mind, here's the boilerplate that you can literally copy-and-paste into an HTML file and start a Spectacle presentation that works from the get go!
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no" />
+    <title>Spectacle</title>
+    <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
+    <link href="https://unpkg.com/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" type="text/css">
+    <link href="https://unpkg.com/normalize.css@7/normalize.css" rel="stylesheet" type="text/css">
+    <link href="https://unpkg.com/spectacle/lib/themes/default/index.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+    <div id="root"></div>
+    <script src="https://unpkg.com/prismjs@1/prism.js"></script>
+    <script src="https://unpkg.com/prismjs@1/components/prism-jsx.min.js"></script>
+    <script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
+    <script src="https://unpkg.com/react@15/dist/react.js"></script>
+    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
+    <script src="https://unpkg.com/spectacle/dist/spectacle.js"></script>
+    <script src="https://unpkg.com/spectacle/lib/one-page.js"></script>
+    <script type="text/spectacle">
+      () => {
+        // Your JS Code goes here
+
+        return (
+          <Deck>
+          {/* Throw in some slides here! */}
+          </Deck>
+        );
+      }
+    </script>
+</body>
+</html>
+```
+
 <a name="development"></a>
 ## Development
 
@@ -75,7 +164,7 @@ Open a browser and hit [http://localhost:3000](http://localhost:3000), and we ar
 <a name="build--deployment"></a>
 ## Build & Deployment
 
-Building the dist version of the project is as easy as running `npm run build`
+Building the dist version of the slides is as easy as running `npm run build:dist`
 
 If you want to deploy the slideshow to surge, run `npm run deploy`
 
@@ -563,3 +652,6 @@ The `Typeface` tag is used to apply a specific font to text content. It can eith
 - [Spectacle Code Slide](https://github.com/thejameskyle/spectacle-code-slide) - Step through lines of code using this awesome slide extension by @thejameskyle
 - [Spectacle Terminal Slide](https://github.com/elijahmanor/spectacle-terminal) - Terminal component that can be used in a spectacle slide deck by @elijahmanor
 - [Spectacle Image Slide](https://github.com/FezVrasta/spectacle-image-slide) - Show a slide with a big image and a title on top
+
+[trav_img]: https://api.travis-ci.org/FormidableLabs/spectacle.svg
+[trav_site]: https://travis-ci.org/FormidableLabs/spectacle

index.html

@@ -6,12 +6,12 @@
     <title>Spectacle</title>
     <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/prism/1.3.0/themes/prism-tomorrow.css">
+    <link href="https://unpkg.com/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" type="text/css">
 </head>
 <body>
     <div id="root"></div>
-    <script src="https://cdn.jsdelivr.net/prism/1.3.0/prism.js" type="text/javascript"></script>
-    <script src="https://cdn.jsdelivr.net/prism/1.3.0/components/prism-jsx.min.js" type="text/javascript"></script>
+    <script src="https://unpkg.com/prismjs@1/prism.js"></script>
+    <script src="https://unpkg.com/prismjs@1/components/prism-jsx.min.js"></script>
     <script src="./dist/bundle.js"></script>
 </body>
 </html>

index.js

@@ -1,6 +1,6 @@
-import React from "react";
-import { render } from "react-dom";
+import React from 'react';
+import { render } from 'react-dom';
 
-import Presentation from "./example/src";
+import Presentation from './example/src';
 
-render(<Presentation/>, document.getElementById("root"));
+render(<Presentation/>, document.getElementById('root'));