From 3bb08da1d0564bd60896f2c742fb67e805f3994a Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Tue, 1 Aug 2017 11:04:35 -0700 Subject: [PATCH 01/21] A potpouri of fixes and updates for the underlying infrastructure. * Publish `dist/spectacle.js` and `dist/spectacle.min.js` as UMD bundles. Fixes #333 * Only publish specific files and bundles per whitelist `.npmignore`. * Switch to `npm version` publishing workflow. * Add `CONTRINBUTING.md` with COC and instructions for publishing. * Travis: Use yarn, update node versions. * Minor touchups: * Rename `README.markdown` to `README.md` since all other docs use that suffix. * Fix trailing commas in `.babelrc` * Add Travis CI badge. --- .babelrc | 6 +- .gitignore | 2 +- .npmignore | 12 +++- .travis.yml | 8 +-- CONTRIBUTING.md | 109 +++++++++++++++++++++++++++++++ README.markdown => README.md | 8 ++- index.js | 8 +-- package.json | 10 ++- webpack.config.production.js | 28 ++++---- webpack.config.umd.js | 37 +++++++++++ webpack.config.umd.production.js | 21 ++++++ 11 files changed, 215 insertions(+), 34 deletions(-) create mode 100644 CONTRIBUTING.md rename README.markdown => README.md (97%) create mode 100644 webpack.config.umd.js create mode 100644 webpack.config.umd.production.js diff --git a/.babelrc b/.babelrc index dcbd4aeac..4c3b6ced5 100644 --- a/.babelrc +++ b/.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": [ diff --git a/.gitignore b/.gitignore index 019775a96..9303a7bff 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,4 @@ dist lib *.log .DS_Store -.vscode \ No newline at end of file +.vscode diff --git a/.npmignore b/.npmignore index 9ffa000cf..6c982ecec 100644 --- a/.npmignore +++ b/.npmignore @@ -1,3 +1,9 @@ -node_modules -src -*.log +/* +!/dist/spectacle* +dist/*.map +!/docs +!/lib +!/src +!LICENSE +!README.md +!package.json diff --git a/.travis.yml b/.travis.yml index 575621afe..8a3d5ffc9 100644 --- a/.travis.yml +++ b/.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 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 000000000..003047bdd --- /dev/null +++ b/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/ diff --git a/README.markdown b/README.md similarity index 97% rename from README.markdown rename to README.md index b857de025..ca19e1ba4 100644 --- a/README.markdown +++ b/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/) @@ -57,7 +58,7 @@ 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`. But really, it is SO much easier to just use the boilerplate. Trust me. @@ -75,7 +76,7 @@ Open a browser and hit [http://localhost:3000](http://localhost:3000), and we ar ## 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 +564,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 diff --git a/index.js b/index.js index 02e4f5c74..9f6e2ad59 100644 --- a/index.js +++ b/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(, document.getElementById("root")); +render(, document.getElementById('root')); diff --git a/package.json b/package.json index 63558644b..c48f6dd11 100644 --- a/package.json +++ b/package.json @@ -4,11 +4,17 @@ "description": "ReactJS Powered Presentation Framework", "main": "lib/index.js", "scripts": { + "preversion": "npm run test && npm run lint", + "version": "npm run build:publish", "clean:lib": "rimraf lib", "clean:dist": "rimraf dist", - "build:lib": "cross-env NODE_ENV=production babel src -d lib --copy-files && babel example/src -d example/lib --copy-files", + "clean": "npm run clean:lib && npm run clean:dist", + "build:lib": "cross-env NODE_ENV=production babel src -d lib --copy-files && rimraf 'lib/**/__snapshots__' 'lib/**/*.test.js'", "build:dist": "cross-env NODE_ENV=production webpack --config webpack.config.production.js", - "lint": "eslint --ext .js,.jsx src", + "build:dist-umd": "webpack --config webpack.config.umd.js", + "build:dist-umd-prod": "cross-env NODE_ENV=production webpack --config webpack.config.umd.production.js", + "build:publish": "npm run clean && npm run build:lib && npm run build:dist-umd && npm run build:dist-umd-prod", + "lint": "eslint src *.js", "deploy": "npm run build:dist && surge -p .", "start": "node server.js", "test": "jest --verbose" diff --git a/webpack.config.production.js b/webpack.config.production.js index 8322f8c40..97baef25b 100644 --- a/webpack.config.production.js +++ b/webpack.config.production.js @@ -1,22 +1,22 @@ -var path = require("path"); -var webpack = require("webpack"); +const path = require('path'); +const webpack = require('webpack'); module.exports = { - devtool: "source-map", + devtool: 'source-map', entry: [ - "babel-polyfill", - "./index" + 'babel-polyfill', + './index' ], output: { - path: path.join(__dirname, "dist"), - filename: "bundle.js", - publicPath: "/dist/" + path: path.join(__dirname, 'dist'), + filename: 'bundle.js', + publicPath: '/dist/' }, plugins: [ new webpack.optimize.OccurrenceOrderPlugin(), new webpack.DefinePlugin({ - "process.env": { - "NODE_ENV": JSON.stringify("production") + 'process.env': { + 'NODE_ENV': JSON.stringify('production') } }), new webpack.optimize.UglifyJsPlugin({ @@ -29,16 +29,16 @@ module.exports = { loaders: [{ test: /\.js$/, exclude: /node_modules/, - loader: "babel-loader" + loader: 'babel-loader' }, { test: /\.css$/, - loader: "style-loader!css-loader" + loader: 'style-loader!css-loader' }, { test: /\.(png|jpg)$/, - loader: "url-loader?limit=8192" + loader: 'url-loader?limit=8192' }, { test: /\.svg$/, - loader: "url-loader?limit=10000&mimetype=image/svg+xml" + loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }] } }; diff --git a/webpack.config.umd.js b/webpack.config.umd.js new file mode 100644 index 000000000..49ac466da --- /dev/null +++ b/webpack.config.umd.js @@ -0,0 +1,37 @@ +const path = require('path'); +const webpack = require('webpack'); + +module.exports = { + entry: { + spectacle: './src/index.js' + }, + output: { + path: path.join(__dirname, 'dist'), + pathinfo: true, + filename: '[name].js', + library: 'Spectacle', + libraryTarget: 'umd' + }, + plugins: [ + new webpack.optimize.OccurrenceOrderPlugin(), + new webpack.SourceMapDevToolPlugin({ + filename: '[file].map' + }) + ], + module: { + loaders: [{ + test: /\.js$/, + exclude: /node_modules/, + loader: 'babel-loader' + }, { + test: /\.css$/, + loader: 'style-loader!css-loader' + }, { + test: /\.(png|jpg)$/, + loader: 'url-loader?limit=8192' + }, { + test: /\.svg$/, + loader: 'url-loader?limit=10000&mimetype=image/svg+xml' + }] + } +}; diff --git a/webpack.config.umd.production.js b/webpack.config.umd.production.js new file mode 100644 index 000000000..348132888 --- /dev/null +++ b/webpack.config.umd.production.js @@ -0,0 +1,21 @@ +const webpack = require('webpack'); +const config = require('./webpack.config.umd'); + +// Mutate dev config to production. +config.output.pathinfo = false; +config.output.filename = '[name].min.js'; +config.plugins = config.plugins.concat([ + new webpack.DefinePlugin({ + 'process.env': { + 'NODE_ENV': JSON.stringify('production') + } + }), + new webpack.optimize.UglifyJsPlugin({ + sourceMap: true, + compressor: { + warnings: false + } + }) +]); + +module.exports = config; From 4033084a1843a9338c4216a5fe9d11100299b419 Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Tue, 1 Aug 2017 11:09:47 -0700 Subject: [PATCH 02/21] Remove tests from src publishing. --- .npmignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.npmignore b/.npmignore index 6c982ecec..a3ddf19f2 100644 --- a/.npmignore +++ b/.npmignore @@ -4,6 +4,8 @@ dist/*.map !/docs !/lib !/src +__snapshots__ +*.test.js !LICENSE !README.md !package.json From 9d82fabf94a9b3a6348d421f6f7fd8577611d27d Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Fri, 4 Aug 2017 09:43:42 -0700 Subject: [PATCH 03/21] Add externals. Start WIP for one-page.html --- one-page.html | 85 +++++++++++++++++++++++++++++++++++++++++++ webpack.config.umd.js | 26 +++++++++++++ 2 files changed, 111 insertions(+) create mode 100644 one-page.html diff --git a/one-page.html b/one-page.html new file mode 100644 index 000000000..42caeccb4 --- /dev/null +++ b/one-page.html @@ -0,0 +1,85 @@ + + + + + + Spectacle + + + + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/webpack.config.umd.js b/webpack.config.umd.js index 49ac466da..7d7dea493 100644 --- a/webpack.config.umd.js +++ b/webpack.config.umd.js @@ -12,6 +12,32 @@ module.exports = { library: 'Spectacle', libraryTarget: 'umd' }, + externals: [ + { + "react": { + root: "React", + commonjs2: "react", + commonjs: "react", + amd: "react" + } + }, + { + "react-dom": { + root: "ReactDOM", + commonjs2: "react-dom", + commonjs: "react-dom", + amd: "react-dom" + } + }, + { + "prop-types": { + root: "PropTypes", + commonjs2: "prop-types", + commonjs: "prop-types", + amd: "prop-types" + } + } + ], plugins: [ new webpack.optimize.OccurrenceOrderPlugin(), new webpack.SourceMapDevToolPlugin({ From 4ff80d34fa32fb13ce611882c9d158abd8847cad Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Fri, 4 Aug 2017 09:47:03 -0700 Subject: [PATCH 04/21] Add peerDeps to externals --- README.md | 2 ++ webpack.config.umd.js | 26 ++++++++++++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/README.md b/README.md index ca19e1ba4..d8a5aae54 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,8 @@ The best way to get started is by using the [Spectacle Boilerplate](https://gith 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` tages 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. diff --git a/webpack.config.umd.js b/webpack.config.umd.js index 49ac466da..7d7dea493 100644 --- a/webpack.config.umd.js +++ b/webpack.config.umd.js @@ -12,6 +12,32 @@ module.exports = { library: 'Spectacle', libraryTarget: 'umd' }, + externals: [ + { + "react": { + root: "React", + commonjs2: "react", + commonjs: "react", + amd: "react" + } + }, + { + "react-dom": { + root: "ReactDOM", + commonjs2: "react-dom", + commonjs: "react-dom", + amd: "react-dom" + } + }, + { + "prop-types": { + root: "PropTypes", + commonjs2: "prop-types", + commonjs: "prop-types", + amd: "prop-types" + } + } + ], plugins: [ new webpack.optimize.OccurrenceOrderPlugin(), new webpack.SourceMapDevToolPlugin({ From 6ec9a12386ed9eda68f7ba75134a6c1f7f44d66e Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Fri, 4 Aug 2017 10:09:32 -0700 Subject: [PATCH 05/21] Start abstracting out the loading code. --- one-page.html | 68 +++++++++++++++++---------------------------------- one-page.js | 34 ++++++++++++++++++++++++++ 2 files changed, 57 insertions(+), 45 deletions(-) create mode 100644 one-page.js diff --git a/one-page.html b/one-page.html index 42caeccb4..b1d62ba15 100644 --- a/one-page.html +++ b/one-page.html @@ -15,8 +15,9 @@ - + + - \ No newline at end of file diff --git a/one-page.js b/one-page.js new file mode 100644 index 000000000..d796bad09 --- /dev/null +++ b/one-page.js @@ -0,0 +1,34 @@ +// TODO: Place this in standalone script in `dist` +// TODO: Consistent quotes. +(function () { + var loadSpectacleScript = function () { + // Adapted from https://github.com/babel/babel-standalone/blob/master/src/transformScriptTags.js + var scripts = document.getElementsByTagName('script'); + var script, input, output; + + // Load only our bespoke "text/spectacle" tags. + for (var i = 0; i < scripts.length; i++) { + script = scripts.item(i); + + // Load first spectacle script. + if (script.type === 'text/spectacle') { + input = script.innerHTML; + output = Babel.transform(input, { + presets: [ + [ "es2015", { "loose": true, "modules" : false } ], + "stage-0", + "react" + ] + }).code; + + eval(output); + + break; + } + }; + }; + + if (typeof window !== 'undefined' && window && window.addEventListener) { + window.addEventListener('DOMContentLoaded', loadSpectacleScript, false); + } +})(); From ef4eb4e5644c74e6231c648b625168c480ec193e Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Fri, 4 Aug 2017 10:15:45 -0700 Subject: [PATCH 06/21] Abstract out more --- one-page.html | 58 +++++++++++++++++---------------------------------- one-page.js | 41 +++++++++++++++++++++++++++++------- 2 files changed, 52 insertions(+), 47 deletions(-) diff --git a/one-page.html b/one-page.html index b1d62ba15..a9e6d4ee5 100644 --- a/one-page.html +++ b/one-page.html @@ -19,45 +19,25 @@ \ No newline at end of file diff --git a/one-page.js b/one-page.js index d796bad09..01bf3e069 100644 --- a/one-page.js +++ b/one-page.js @@ -1,19 +1,44 @@ // TODO: Place this in standalone script in `dist` // TODO: Consistent quotes. -(function () { - var loadSpectacleScript = function () { +(() => { + // Template for taking a render function and turning it into a presentation. + // TODO: createTheme / theme from example not supported because not exported. + const template = (renderFn) => ` + (() => { + const { render } = ReactDOM; + const { + Deck, + Slide, + Heading, + Link, + Text + } = Spectacle; + + const renderFn = ${renderFn}; + + class Presentation extends React.Component { + render() { + return renderFn(); + } + } + + render(, document.getElementById('root')); + })(); + `; + + const loadSpectacleScript = () => { // Adapted from https://github.com/babel/babel-standalone/blob/master/src/transformScriptTags.js - var scripts = document.getElementsByTagName('script'); - var script, input, output; + const scripts = document.getElementsByTagName('script'); // Load only our bespoke "text/spectacle" tags. - for (var i = 0; i < scripts.length; i++) { - script = scripts.item(i); + for (let i = 0; i < scripts.length; i++) { + const script = scripts.item(i); // Load first spectacle script. if (script.type === 'text/spectacle') { - input = script.innerHTML; - output = Babel.transform(input, { + const renderFn = script.innerHTML; + const input = template(renderFn); + const output = Babel.transform(input, { presets: [ [ "es2015", { "loose": true, "modules" : false } ], "stage-0", From c0dbf660787bb36d49cfb7052a3da8a66c207adc Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Fri, 4 Aug 2017 10:24:15 -0700 Subject: [PATCH 07/21] Lint fixes and abstract to separate files --- one-page.html | 2 +- one-page.js | 59 ------------------------------------------ src/one-page.js | 60 +++++++++++++++++++++++++++++++++++++++++++ webpack.config.umd.js | 30 +++++++++++----------- 4 files changed, 76 insertions(+), 75 deletions(-) delete mode 100644 one-page.js create mode 100644 src/one-page.js diff --git a/one-page.html b/one-page.html index a9e6d4ee5..4962f85d6 100644 --- a/one-page.html +++ b/one-page.html @@ -17,7 +17,7 @@ - + diff --git a/src/one-page.js b/src/one-page.js index f2a0c793b..4b2af2ecf 100644 --- a/src/one-page.js +++ b/src/one-page.js @@ -9,11 +9,36 @@ const template = (renderFn) => ` (() => { const { render } = ReactDOM; const { + Appear, + BlockQuote, + Cite, + CodePane, + Code, + ComponentPlayground, Deck, - Slide, + Fill, + Fit, Heading, + Image, + Layout, Link, - Text + ListItem, + List, + Markdown, + MarkdownSlides, + Notes, + Quote, + S, + Slide, + SlideSet, + TableBody, + TableHeader, + TableHeaderItem, + TableItem, + TableRow, + Table, + Text, + Typeface } = Spectacle; const renderFn = ${renderFn}; From e2b80d6fa81c4779205551d77e0225e32c068d9b Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Fri, 4 Aug 2017 11:44:48 -0700 Subject: [PATCH 09/21] Add todo notes and switch to online image links --- one-page.html | 12 ++++++------ src/one-page.js | 8 ++++++-- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/one-page.html b/one-page.html index d00a0b75f..a5f4cea1c 100644 --- a/one-page.html +++ b/one-page.html @@ -38,7 +38,7 @@ Hit Your Right Arrow To Begin! - {/* TODO IMAGES: */} + Wait what? @@ -55,8 +55,7 @@ theme="dark" /> - {/* TODO IMAGES: bgImage={images.city.replace("/", "")} */} - + Full Width @@ -98,10 +97,9 @@ Inline Markdown - {/* TODO IMAGES ![Markdown Logo](${images.markdown.replace("/", "")}) */} {` -TODO_MARKDOWN_LOGO_IMAGE +![Markdown Logo](https://raw.githubusercontent.com/FormidableLabs/spectacle/master/example/assets/markdown.png) You can write inline images, [Markdown Links](http://commonmark.org), paragraph text and most other markdown syntax * Lists too! @@ -194,7 +192,9 @@ Made with love in Seattle by - {/* TODO: IMAGE */} + + + ); diff --git a/src/one-page.js b/src/one-page.js index 4b2af2ecf..d946b3bc9 100644 --- a/src/one-page.js +++ b/src/one-page.js @@ -4,7 +4,11 @@ /*global Babel:false*/ // Template for taking a render function and turning it into a presentation. -// TODO: createTheme / theme from example not supported because not exported. +// +// TODO: Reconsider the API/interface for bringing in the presentation. +// Pure JSX? (but then how to do JS stuff). +// TODO: Document limitations. Maybe consider a `SpectacleOnePage.FOO()` or +// something to allow kickout to full access / do the page root directly. const template = (renderFn) => ` (() => { const { render } = ReactDOM; @@ -53,8 +57,8 @@ const template = (renderFn) => ` })(); `; +// Adapted from https://github.com/babel/babel-standalone/blob/master/src/transformScriptTags.js const loadSpectacleScript = () => { - // Adapted from https://github.com/babel/babel-standalone/blob/master/src/transformScriptTags.js const scripts = document.getElementsByTagName('script'); // Load only our bespoke "text/spectacle" tags. From bacf4bd548ace7403f0fa77e8d255a9a8634a076 Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Fri, 4 Aug 2017 13:04:43 -0700 Subject: [PATCH 10/21] Switch all assets to rawgit --- one-page.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/one-page.html b/one-page.html index a5f4cea1c..435b70c32 100644 --- a/one-page.html +++ b/one-page.html @@ -55,7 +55,7 @@ theme="dark" /> - + Full Width @@ -99,7 +99,7 @@ {` -![Markdown Logo](https://raw.githubusercontent.com/FormidableLabs/spectacle/master/example/assets/markdown.png) +![Markdown Logo](https://rawgit.com/FormidableLabs/spectacle/master/example/assets/markdown.png) You can write inline images, [Markdown Links](http://commonmark.org), paragraph text and most other markdown syntax * Lists too! From 1ab02e534c69c9b4cd639a500fdb458f67e59982 Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Fri, 4 Aug 2017 13:06:46 -0700 Subject: [PATCH 11/21] Switch to rawgit cdn --- one-page.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/one-page.html b/one-page.html index 435b70c32..e2d966615 100644 --- a/one-page.html +++ b/one-page.html @@ -55,7 +55,7 @@ theme="dark" /> - + Full Width @@ -99,7 +99,7 @@ {` -![Markdown Logo](https://rawgit.com/FormidableLabs/spectacle/master/example/assets/markdown.png) +![Markdown Logo](https://cdn.rawgit.com/FormidableLabs/spectacle/master/example/assets/markdown.png) You can write inline images, [Markdown Links](http://commonmark.org), paragraph text and most other markdown syntax * Lists too! @@ -193,7 +193,7 @@ Made with love in Seattle by - + From 8e4f1bb653d1f347854c7cf088d782c691339897 Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Fri, 4 Aug 2017 14:06:09 -0700 Subject: [PATCH 12/21] Export themes and use in one-page. --- one-page.html | 327 ++++++++++++++++++++++++++------------------------ src/index.js | 10 +- 2 files changed, 177 insertions(+), 160 deletions(-) diff --git a/one-page.html b/one-page.html index e2d966615..72671c21b 100644 --- a/one-page.html +++ b/one-page.html @@ -19,185 +19,194 @@ \ No newline at end of file diff --git a/src/index.js b/src/index.js index 224dd5b4e..42f2c204f 100644 --- a/src/index.js +++ b/src/index.js @@ -29,6 +29,13 @@ import Table from './components/table'; import Text from './components/text'; import Typeface from './components/typeface'; +import defaultTheme from './themes/default'; + +const themes = { + // Rename from `default` to `defaultTheme` to avoid keyword issues. + defaultTheme +}; + export { Appear, BlockQuote, @@ -59,5 +66,6 @@ export { TableRow, Table, Text, - Typeface + Typeface, + themes }; From e7418f9a0d44faa1c7002d52b1a8e75a7e721142 Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Fri, 4 Aug 2017 14:22:17 -0700 Subject: [PATCH 13/21] Add code example. --- one-page.html | 38 ++++++++++++++++++++++++++++++++++---- 1 file changed, 34 insertions(+), 4 deletions(-) diff --git a/one-page.html b/one-page.html index 72671c21b..3bd4186e7 100644 --- a/one-page.html +++ b/one-page.html @@ -26,10 +26,40 @@ primary: "#ff4081" }); + // Example source code for a source code slide. + const exampleDeck = ` +return ( + + + + React Presentations + + + Written In React + + + + + Wait What? + + + + + Thats right + + + Inline style based theme system + Autofit Text + PDF Export + + + +) + `.trim(); + // Create our presentation. return ( - {/* TODO: THEME theme={theme} */} Spectacle @@ -52,11 +82,11 @@ - {/* TODO: REQUIRE/JSX */} + /> Date: Fri, 4 Aug 2017 14:26:38 -0700 Subject: [PATCH 14/21] Switch all external assets to unpkg. --- index.html | 6 +++--- one-page.html | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 21140447c..ca0f45256 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,12 @@ Spectacle - +
- - + + \ No newline at end of file diff --git a/one-page.html b/one-page.html index 3bd4186e7..34f0ceca1 100644 --- a/one-page.html +++ b/one-page.html @@ -6,12 +6,12 @@ Spectacle - +
- - + + From a87dedaaeff158cbd1e4a48fd659df14b0acc57c Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Fri, 4 Aug 2017 14:40:28 -0700 Subject: [PATCH 15/21] Finish off duplicating the full presentation. --- one-page.html | 56 +++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 54 insertions(+), 2 deletions(-) diff --git a/one-page.html b/one-page.html index 34f0ceca1..5fa5c9abf 100644 --- a/one-page.html +++ b/one-page.html @@ -20,6 +20,10 @@ + ``` + + ```html + + ``` + + **Bad** examples of what not to do: + + ```html + + ``` + +... 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 + + + + + + Spectacle + + + + + +
+ + + + + + + + + + + +``` + ## Development diff --git a/index.html b/index.html index ca0f45256..60cf0cb0a 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,12 @@ Spectacle - +
- - + + \ No newline at end of file diff --git a/one-page.html b/one-page.html index 5fa5c9abf..71a3e5c27 100644 --- a/one-page.html +++ b/one-page.html @@ -10,12 +10,12 @@
- - - - - - + + + + + + - \ No newline at end of file + From 1649d7f3138d43bc12959a3c8afd255dcf9c047a Mon Sep 17 00:00:00 2001 From: Ryan Roemer Date: Fri, 4 Aug 2017 15:19:29 -0700 Subject: [PATCH 17/21] Minor cleanup --- README.md | 4 ++-- src/one-page.js | 6 +----- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 23def3cfb..c96cf3444 100644 --- a/README.md +++ b/README.md @@ -129,8 +129,8 @@ We can start with this projet's sample at [`one-page.html`](./one-page.html). It - - + +