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
* Upgrade to react-static v7 (#882)
* Add a trailing slash for prod routes
* Use local paths instead of general strings
* remove double slashes
* Update formidable-oss-badges
* Infra/Docs: Have one build/basepath for staging/prod/dev (#884)
- Switch dev + staging + prod **all** to one basepath (always `/open-source/spectacle`)
- Collapse build/serve commands to `build` and `serve` and remove / replace config / symlink files now no longer needed.
- Make the static build served from 4000 so dev can serve on 3000
- Rename deploy commands.
- Have AWS deploy go off `dist/open-source/spectacle` instead of `dist`. (Surge build stays the same file-location-wise).
* Badges should route to project docs
* button as external a tag rather than react-router Link
Co-authored-by: boygirl <[email protected]>
Co-authored-by: Ryan Roemer <[email protected]>
Co-authored-by: boygirl <[email protected]>
Co-authored-by: Ryan Roemer <[email protected]>
<strong>✨ A ReactJS based Presentation Library ✨</strong>
@@ -12,69 +12,15 @@
12
12
</a>
13
13
</p>
14
14
15
-
Looking for a quick preview of what you can do with Spectacle? Check out our Live Demo deck [here](https://raw.githack.com/FormidableLabs/spectacle/master/examples/one-page.html).
15
+
Looking for a quick preview of what you can do with Spectacle? Check out our Live Demo deck
Copy file name to clipboardExpand all lines: docs/README.md
+13-67Lines changed: 13 additions & 67 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,41 +12,23 @@ $ yarn install
12
12
$ yarn start
13
13
```
14
14
15
-
Note that paths in local development are based on a root of "/" but be careful when defining relative and absolute paths
16
-
inline or doing url parsing, as the production output root will be "open-source/spectacle."
15
+
Then visit: http://localhost:3000/open-source/spectacle/
17
16
18
17
## Building the site for deployment
19
18
20
-
### Build and check the staging site
21
-
22
-
The staging build is served from a root path, e.g. `http://example/com`. This is typically used for CI / per-PR previews.
23
-
24
-
```bash
25
-
$ cd docs
26
-
$ yarn stage:build
27
-
$ yarn stage:serve
28
-
```
29
-
30
-
This build creates `dist/open-source/spectacle` simulating the directory style output.
31
-
32
-
Then visit: http://localhost:3000/open-source/spectacle/
33
-
34
19
### Build and check the production site
35
20
36
-
The production site is served from a nested path, e.g. `https://formidable.com/open-source/spectacle`.
21
+
The staging and production sites are served from a nested path, e.g. `https://formidable.com/open-source/spectacle`.
37
22
38
23
```bash
39
24
$ cd docs
40
-
$ yarn prod:build
41
-
$ yarn prod:serve
25
+
$ yarn build
26
+
$ yarn serve
42
27
```
43
28
44
-
This build creates `dist` but the `serve` dev server remaps paths to make it appear at `open-source/spectacle`. This build **is** the appropriate, full production build.
29
+
Then visit: http://localhost:4000/open-source/spectacle/
45
30
46
-
Then visit: http://localhost:3000/open-source/spectacle/
47
-
48
-
Both of these steps are important for validating that both the `basePath` used by the static HTML output and the `basename` used
49
-
by the client-side router are working as expected. This is also where you'll want to validate that there are no hardcoded, inlined, or malformed asset paths that worked locally but will not resolve correctly in production!
31
+
Both of these steps are important for validating that both the `basePath` used by the static HTML output and the `basename` used by the client-side router are working as expected. This is also where you'll want to validate that there are no hardcoded, inlined, or malformed asset paths that worked locally but will not resolve correctly in production!
50
32
51
33
## Deployment
52
34
@@ -62,12 +44,12 @@ To test things out locally find the `Surge.sh` entry in 1password in the IC vaul
62
44
63
45
```bash
64
46
$ cd docs
65
-
$ yarn clean
66
-
$ yarn stage:build
47
+
$ yarn clean&& \
48
+
yarn build
67
49
$ SURGE_LOGIN=<SNIPPED> \
68
50
SURGE_TOKEN=<SNIPPED> \
69
51
TRAVIS_PULL_REQUEST=12 \
70
-
yarn stage:deploy
52
+
yarn deploy:stage
71
53
```
72
54
73
55
### Production
@@ -94,52 +76,16 @@ Then build for production and deploy with dry run to check things:
- Almost all of your code will be executed in two contexts: first in node for server-side rendering and static html generation, then client-side as a PWA. In addition to writing [node-safe code](https://github.com/nozzle/react-static/blob/master/docs/concepts.md#writing-universal-node-safe-code), this also means that it's necessary to validate that both contexts are working as expected.
106
88
107
-
- In addition to two execution contexts, there are three stages: development, staging, and production. `yarn start` uses a local dev server with live reload that takes about one second to rebuild. This is a good choice for most local development, but it's important to keep in mind that **the development server does not build the static html.** For that, you will want to use `yarn stage:build && yarn stage:serve`.
89
+
- In addition to two execution contexts, there are three stages: development, staging, and production. `yarn start` uses a local dev server with live reload that takes about one second to rebuild. This is a good choice for most local development, but it's important to keep in mind that **the development server does not build the static html.** For that, you will want to use `yarn build && yarn serve` used for staging and production deploys.
108
90
109
91
- When debugging an issue with the static html output, don't be shy about cracking open the `dist` folder and looking at the output!
110
-
111
-
- When debugging an issue with the PWA or SSR-PWA coordination, consider using `yarn stage-debug` -- this builds the staging output without minification/uglification and propagates warnings/errors.
112
-
113
-
- We have seen errors related to minification, uglification, and codesplitting before, please do not treat the debug build or the local dev server as 1:1 with production output!
114
-
115
-
## Tips for getting the most out of react-static + webpack tooling
116
-
117
-
We are on react-static v5 due to painful upgrade issues with v7, which means...
118
-
119
-
- You'll want to make sure that when you refer to the docs you're in the v5 branch.
120
-
121
-
- When you install the react-static CLI tool globally, you'll want to use the v5 version (`npm install -g react-static@^5.9.12`) which currently has a wider selection of working templates that can be very useful as executable canonical references.
122
-
123
-
- If you're looking for the client-side router documentation for react-static to see how to implement a certain behavior, the best place to start is in the [react-router docs](https://reacttraining.com/react-router/web/api/), which react-static v5 uses under the hood. There are a few additional react-static specific properties for [Router](https://github.com/nozzle/react-static/blob/v5/docs/components.md#router), [Routes](https://github.com/nozzle/react-static/blob/v5/docs/components.md#routes), and [Link](https://github.com/nozzle/react-static/blob/v5/docs/components.md#link), but if you need something from the routing that doesn't seem to covered in the react-static api, the react-router docs are pretty likely to have you covered.
124
-
125
-
- You'll ~~want~~ need to use Webpack 3 plugins. Webpack has an [interesting approach](https://github.com/webpack/webpack.js.org/issues/1854) to documenting old versions. The existing documentation is broadly usable but you may want to familiarize yourself with this [introductory v3 to v4 migration guide](https://webpack.js.org/migrate/4/) and the relevant [react-static docs](https://github.com/nozzle/react-static/blob/v5/docs/config.md#webpack).
126
-
127
-
- Interestingly, some webpack v4 loaders still work with v3, while some webpack v3 loaders _don't_ work with webpack v3. Version-twiddling or using a different loader for reasons that are unclear may be required. When tweaking webpack, it's extra-important to validate both PWA and static html output and clear out cached files.
128
-
129
-
## Using this project as a template:
130
-
131
-
This lander is designed to be easily re-used as a template for other projects.
132
-
133
-
What to change:
134
-
135
-
- Docs Content
136
-
- markdown content lives in `/docs/content`
137
-
-_Note:_ Any markdown files placed here will be rendered as separate pages, and header tags will be rendered into a hierarchical sidebar. Please make sure header tags do not include any special symbols as they will be used to create anchor tags and hashes.
138
-
- Main Page Content
139
-
-`src/screens/home/_content.js` includes section titles, descriptions, and assets urls
140
-
-`src/screens/home/hero.js`
141
-
- Constants
142
-
- client constants live in `src/constants.js`
143
-
- static constants live in `static-config-parts/constants.js`
144
-
- Assets
145
-
- Logos, sidebar svgs and favicons (TODO: These are all very similar svgs, and could some day live in a separate repo, and take props like color, name etc)
Copy file name to clipboardExpand all lines: docs/content/advanced-concepts.md
+6-18Lines changed: 6 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,26 +3,16 @@ title: Advanced Concepts
3
3
order: 2
4
4
---
5
5
6
-
<aname="advanced-concepts"></a>
7
-
8
6
# Advanced Concepts
9
7
10
-
<aname="build--deployment"></a>
11
-
12
8
## Build & Deployment
13
9
14
10
There are a variety of ways to host your Spectacle presentation.
15
11
16
-
1. If you are integrating this lib yourself, take your build and follow the linked instructions from any of (but not limited to) this list of providers:
1. If you are integrating this lib yourself, take your build and follow the linked instructions from any of (but not limited to) the following providers: [Heroku](https://devcenter.heroku.com/articles/git#deploying-code), [Zeit](https://zeit.co/docs/v2/platform/deployments), or [Surge](https://surge.sh/help/deploying-continuously-using-git-hooks).
21
13
22
14
2. If using `spectacle-cli` (either `spectacle --action build` or `spectacle-boilerplate` with `yarn clean && yarn build`) your output is `dist/` and upload that directory to any of the above static hosting providers.
23
15
24
-
<aname="keyboard-controls"></a>
25
-
26
16
## Keyboard Controls
27
17
28
18
| Key Combination | Function |
@@ -33,16 +23,14 @@ There are a variety of ways to host your Spectacle presentation.
33
23
| Alt/Option + P | Toggle Presenter Mode |
34
24
| Alt/Option + F | Toggle Fullscreen Mode |
35
25
36
-
<aname="query-parameters"></a>
37
-
38
26
## Query Parameters
39
27
40
28
A handful of query parameters are supported within your Spectacle presentation.
41
29
Append your URL with one of the following parameters, like so: `&<parameter>=true`.
42
30
To combine parameters, use multiple `&` to separate the parameters, e.g.: `&exportMode=true&printMode=true`
|`exportMode`| For exporting your presentation as a PDF. Add it to your project URL and "Save to PDF" directly from the browser |
47
-
|`printMode`| Turns your slideshow into a printer-friendly, black & white version. Meant for use concurrently with `?exportMode` e.g. `?exportMode&printMode`|
48
-
|`presenterMode`| Displays a Presenter Mode for ease of presentation. For more info on this mode, please see [Presenting](/docs/basic-concepts#presenting) in our Basic Concepts doc |
|`exportMode`| For exporting your presentation as a PDF. Add it to your project URL and "Save to PDF" directly from the browser |
35
+
|`printMode`| Turns your slideshow into a printer-friendly, black & white version. Meant for use concurrently with `?exportMode` e.g. `?exportMode&printMode`|
36
+
|`presenterMode`| Displays a Presenter Mode for ease of presentation. For more info on this mode, please see [Presenting](./basic-concepts#presenting) in our Basic Concepts doc |
0 commit comments