Add react-static content for deploying docs

.eslintrc

@@ -31,38 +31,30 @@
     }
   },
   "rules": {
-    "quotes": [
-      "error",
-      "single",
-      {
-        "allowTemplateLiterals": true
-      }
-    ],
+    "arrow-parens": "off",
     "comma-dangle": "off",
+    "complexity": "off",
+    "consistent-return": "warn",
+    "func-style": "off",
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "indent": "off",
-    "space-before-function-paren": "off",
-    "react/jsx-indent-props": "off",
     "max-len": "off",
+    "max-params": ["error", 5],
+    "no-invalid-this": "off",
     "no-magic-numbers": "off",
-    "func-style": "off",
-    "arrow-parens": "off",
-    "no-use-before-define": "off",
     "no-undef": ["error", { "typeof": true }],
+    "no-unused-vars": ["error", { "argsIgnorePattern": "^_+$" }],
+    "no-use-before-define": "off",
+    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
     "react/jsx-filename-extension": "off",
-    "react/require-extension": "off",
+    "react/jsx-handler-names": "off",
+    "react/jsx-indent-props": "off",
+    "react/no-find-dom-node": "off",
     "react/no-multi-comp": "off",
     "react/prop-types": "warn",
+    "react/require-extension": "off",
     "react/sort-comp": "warn",
     "react/sort-prop-types": "warn",
-    "react/jsx-handler-names": "off",
-    "react/no-find-dom-node": "off",
-    "no-invalid-this": "off",
-    "complexity": "off",
-    "no-unused-vars": [
-      "error",
-      {
-        "argsIgnorePattern": "^_+$"
-      }
-    ]
+    "space-before-function-paren": "off"
   }
 }

.gitignore

@@ -1,8 +1,36 @@
-node_modules
+# dependencies
+/node_modules
+/*/node_modules
 package-lock.json
+yarn.lock
+
+# testing
+/coverage
+test/screenshots
+
+# production
+/dist
+/tmp
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+\.hg
+.idea
+.vscode
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.log
+
+# build
+coverage
+Procfile
+build
 dist
 lib
 es
-*.log
-.DS_Store
-.vscode

.travis.yml

@@ -1,8 +1,9 @@
 language: node_js
 
 node_js:
-  - "8"
   - "10"
+  - "12"
+  - "13"
 
 # Use container-based Travis infrastructure.
 sudo: false
@@ -22,5 +23,12 @@ notifications:
     on_failure: always
 
 script:
+  # Core library
   - yarn run build
   - yarn run check-ci
+
+jobs:
+  include:
+    - stage: documentation
+      node_js: "12"
+      script: echo "TODO (1) install+lint+build docs, (2) deploy"

docs/.babelrc

@@ -0,0 +1,4 @@
+{
+  "extends": "react-static/.babelrc",
+  "plugins": ["babel-plugin-styled-components"]
+}

docs/README.md

@@ -0,0 +1,93 @@
+# Spectacle Documentation Site
+
+Now built with react-static!
+
+## Getting Started
+
+To install and run the docs site locally:
+
+```sh
+$ cd docs
+$ yarn install
+$ yarn start
+```
+
+Note that paths in local development are based on a root of "/" but be careful when defining relative and absolute paths
+inline or doing url parsing, as the production output root will be "open-source/spectacle."
+
+## Building the site for deployment
+
+### Build and check the staging site
+
+The staging build is served from a root path, e.g. `http://example/com`. This is typically used for CI / per-PR previews.
+
+```sh
+$ cd docs
+$ yarn stage:build
+$ yarn stage:serve
+```
+
+This build creates `dist/open-source/spectacle` simulating the directory style output.
+
+Then visit: http://localhost:3000/open-source/spectacle/
+
+### Build and check the production site
+
+The production site is served from a nested path, e.g. `https://formidable.com/open-source/spectacle`.
+
+```sh
+$ cd docs
+$ yarn prod:build
+$ yarn prod:serve
+```
+
+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.
+
+Then visit: http://localhost:3000/open-source/spectacle/
+
+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!
+
+## Tips for developing
+
+- 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.
+
+- 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 && yarn serve`. The `yarn build` command is used by formidable.com within its build script that moves the output of this lander into the correct location within the overall site output.
+
+- When debugging an issue with the static html output, don't be shy about cracking open the `dist` folder and looking at the output!
+
+- 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.
+
+- 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!
+
+## Tips for getting the most out of react-static + webpack tooling
+
+We are on react-static v5 due to blocking stability issues with v6, which means...
+
+- You'll want to make sure that when you refer to the docs you're in the v5 branch.
+
+- 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.
+
+- 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.
+
+- 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).
+
+- 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.
+
+## Using this project as a template:
+
+This lander is designed to be easily re-used as a template for other projects.
+
+What to change:
+
+- Docs Content
+  - markdown content lives in `/docs/content`
+  - _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.
+- Main Page Content
+  - `src/screens/home/_content.js` includes section titles, descriptions, and assets urls
+  - `src/screens/home/hero.js`
+- Constants
+  - client constants live in `src/constants.js`
+  - static constants live in `static-config-parts/constants.js`
+- Assets
+  - 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)

docs/basic-concepts.md → docs/content/basic-concepts.md

@@ -1,3 +1,8 @@
+---
+title: Basic Concepts
+order: 1
+---
+
 <a name="basic-concepts"></a>
 
 # Basic Concepts

docs/extensions.md → docs/content/extensions.md

@@ -1,3 +1,8 @@
+---
+title: Extensions
+order: 4
+---
+
 <a name="third-party"></a>
 
 # Third Party Extensions

docs/getting-started.md → docs/content/getting-started.md

@@ -1,3 +1,8 @@
+---
+title: Getting Started
+order: 0
+---
+
 <a name="getting-started"></a>
 
 # Getting Started

docs/props.md → docs/content/props.md

@@ -1,3 +1,8 @@
+---
+title: Base Props
+order: 3
+---
+
 <a name="base-props"></a>
 
 # Base Props

docs/tag-api.md → docs/content/tag-api.md

@@ -1,3 +1,8 @@
+---
+title: Tag API
+order: 2
+---
+
 <a name="tag-api"></a>
 
 # Tag API

docs/tutorial.md → docs/content/tutorial.md

@@ -1,3 +1,10 @@
+---
+title: Getting Started with Spectacle - A Tutorial
+order: 5
+---
+
+<a name="tutorial"></a>
+
 # Getting Started with Spectacle: A Tutorial
 
 In this guide, we'll show you how to get started with Spectacle and walk you through the creation and customization of a presentation deck. We've created a Github repository with the [completed project](https://github.com/FormidableLabs/spectacle-boilerplate), and will link the corresponding commit where appropriate to help you follow along. If you want, you can [view the completed tutorial here](https://github.com/FormidableLabs/spectacle-boilerplate/blob/master/presentation/index.js).

docs/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "formidable-spectacle-docs",
+  "version": "5.1.0",
+  "description": "Documentation site for Spectacle",
+  "main": "static.config.js",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/FormidableLabs/spectacle-docs/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FormidableLabs/spectacle-docs.git"
+  },
+  "homepage": "https://github.com/FormidableLabs/spectacle-docs#readme",
+  "scripts": {
+    "start": "react-static start",
+    "clean": "rimraf dist",
+    "stage:build": "react-static build --staging",
+    "stage:serve": "serve -l 3000 -c serve-staging.json",
+    "prod:build": "react-static build",
+    "prod:serve": "serve -l 3000",
+    "stage-debug": "react-static build --staging --debug",
+    "prettier-all": "npx prettier --write '{src,static-config-helpers,static-config-parts,static.config,scripts,lib}/**/*.{js,jsx}'",
+    "preversion": "yarn run lint && yarn run build",
+    "format": "yarn run lint --fix",
+    "lint": "eslint 'src/**/*.js' 'static-config-*/*.js' 'src/**/*.js' 'static.config.js'",
+    "test-local": "node test/spectacle-integration.js"
+  },
+  "dependencies": {
+    "@babel/node": "^7.2.0",
+    "array-shuffle": "^1.0.1",
+    "axios": "^0.16.2",
+    "chokidar": "2.0.3",
+    "classnames": "^2.2.6",
+    "exenv": "^1.2.2",
+    "formidable-oss-badges": "0.1.1",
+    "gray-matter": "^3.1.1",
+    "history": "^4.7.2",
+    "htmr": "0.6.3",
+    "jdown": "^0.3.0",
+    "klaw": "^2.1.1",
+    "mdast": "^3.0.0",
+    "prismjs": "^1.15.0",
+    "prop-types": "^15.6.2",
+    "raw-loader": "^1.0.0",
+    "react": "^16.7.0",
+    "react-copy-to-clipboard": "^5.0.1",
+    "react-dom": "^16.0.0",
+    "react-ga": "^2.4.1",
+    "react-hot-loader": "^4.0.0-beta.21",
+    "react-router": "^4.2.0",
+    "react-router-ga": "^1.0.0",
+    "react-side-effect": "^1.1.5",
+    "react-static": "^5.9.12",
+    "styled-components": "^4.1.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.2.0",
+    "@babel/core": "^7.2.0",
+    "anchorate": "^1.1.0",
+    "babel-preset-stage-1": "^6.24.1",
+    "chalk": "^2.4.1",
+    "change-case": "^3.0.2",
+    "config": "^3.0.0",
+    "eslint-config-formidable": "^4.0.0",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-config-react-tools": "1.x.x",
+    "eslint-plugin-filenames": "^1.3.2",
+    "eslint-plugin-prettier": "^3.0.0",
+    "eslint-plugin-promise": "^4.0.1",
+    "folder-reader": "^2.0.0",
+    "gatsby-remark-prismjs": "^3.2.2",
+    "github-slugger": "^1.2.1",
+    "js-yaml": "^3.12.0",
+    "json-to-frontmatter-markdown": "^1.0.0",
+    "lodash": "^4.17.11",
+    "node-dir": "^0.1.17",
+    "prettier": "^1.15.1",
+    "puppeteer": "^1.13.0",
+    "react-document-meta": "^2.0.3",
+    "react-router-scroll": "^0.2.0",
+    "react-static-plugin-styled-components": "^6.0.0-beta.28",
+    "remark": "^10.0.1",
+    "remark-frontmatter": "^1.3.0",
+    "remark-html": "^8.0.0",
+    "remark-kbd": "^1.0.16",
+    "remark-slug": "^5.1.1",
+    "remark-toc": "^5.1.0",
+    "rimraf": "^3.0.0",
+    "serve": "^11.3.0",
+    "spectacle": "^5.0.0",
+    "style-loader": "^0.23.1",
+    "surge": "^0.20.1",
+    "to-vfile": "^5.0.2",
+    "toml-js": "0.0.8",
+    "unist-util-select": "^1.5.0",
+    "unist-util-visit": "^1.4.0",
+    "url-loader": "^1.1.2"
+  }
+}

docs/public/robots.txt

@@ -0,0 +1 @@
+User-agent: *

docs/public/static/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="./static/favicon/favicon-32.png"/>
+            <TileColor>#ff4081</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>