Skip to content

One page standalone HTML presentation (a la remark) #348

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 22 commits into from
Aug 7, 2017
Merged

One page standalone HTML presentation (a la remark) #348

merged 22 commits into from
Aug 7, 2017

Conversation

@ryan-roemer
Copy link
Member

@ryan-roemer ryan-roemer commented Aug 4, 2017 •
edited
Loading

This feature implements remark style presentations where all you need is a single HTML boilerplate to write an entire presentation!

Status

Waiting on upstream PR #343 -- for a comparison of this vs that branch, see: infra/cleanup...feature/one-page

Changes

  • Switch all script tag links to unpkg
  • Add one-page.html and documentation about how to use. And add src/one-page.js for distribution / use.

Here it is!

With these changes, this will produce a fully working Spectacle presentation, and in one-page.html here we've completely duplicated the base Spectacle example:

<!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>

/cc @kenwheeler

@ryan-roemer
A potpouri of fixes and updates for the underlying infrastructure.
3bb08da 
* 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.
@ryan-roemer
Remove tests from src publishing.
4033084
@ryan-roemer
Add externals. Start WIP for one-page.html
9d82fab
@ryan-roemer
Add peerDeps to externals
4ff80d3
@ryan-roemer
Merge branch 'infra/cleanup' into feature/one-page
d7eca6b
@ryan-roemer
Start abstracting out the loading code.
6ec9a12
@ryan-roemer
Abstract out more
ef4eb4e
@ryan-roemer
Lint fixes and abstract to separate files
c0dbf66
@ryan-roemer
Add in full example presentation with todo notes.
5f9889b
@ryan-roemer
Add todo notes and switch to online image links
e2b80d6
@ryan-roemer
Switch all assets to rawgit
bacf4bd
@ryan-roemer
Switch to rawgit cdn
1ab02e5
@ryan-roemer
Export themes and use in one-page.
8e4f1bb
@ryan-roemer
Add code example.
e7418f9
@ryan-roemer
Switch all external assets to unpkg.
2745578
@ryan-roemer
Finish off duplicating the full presentation.
a87deda
@ryan-roemer
Finish readme. Do major versions for script includes.
0e8fc7e
@ryan-roemer
Minor cleanup
1649d7f
bmathews
bmathews reviewed Aug 4, 2017
View reviewed changes
README.md Outdated
<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 tage 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.
Copy link
Contributor

@bmathews bmathews Aug 4, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo: bespoke script tage

Copy link
Member Author

@ryan-roemer ryan-roemer Aug 4, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually did that twice in the readme. Thanks!

@kenwheeler kenwheeler merged commit d77dca9 into master Aug 7, 2017
@ryan-roemer ryan-roemer mentioned this pull request Aug 8, 2017
Closed
2 tasks
@kale-stew kale-stew deleted the feature/one-page branch October 31, 2019 01:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@bmathews bmathews bmathews left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@ryan-roemer @bmathews @kenwheeler