You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -60,10 +61,95 @@ The best way to get started is by using the [Spectacle Boilerplate](https://gith
60
61
61
62
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`.
62
63
63
-
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`.
64
+
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`.
64
65
65
66
But really, it is SO much easier to just use the boilerplate. Trust me.
66
67
68
+
<aname="one-page"></a>
69
+
## One Page
70
+
71
+
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.
72
+
73
+
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:
74
+
75
+
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.
76
+
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.
77
+
78
+
**Good** examples:
79
+
80
+
```html
81
+
<scripttype="text/spectacle">
82
+
() => (
83
+
<Deck>{/* SLIDES */}</Deck>
84
+
)
85
+
</script>
86
+
```
87
+
88
+
```html
89
+
<scripttype="text/spectacle">
90
+
() => {
91
+
// Code-y code stuff in JS...
92
+
93
+
return (
94
+
<Deck>{/* SLIDES */}</Deck>
95
+
);
96
+
}
97
+
</script>
98
+
```
99
+
100
+
**Bad** examples of what not to do:
101
+
102
+
```html
103
+
<scripttype="text/spectacle">
104
+
// Outer comment (BAD)
105
+
constouterVariable="BAD";
106
+
107
+
() => (
108
+
<Deck>{/* SLIDES */}</Deck>
109
+
)
110
+
</script>
111
+
```
112
+
113
+
... 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!
0 commit comments