[Docs] New website (#1109)

* scaffold new Docusaurus site

* replace /docs dir

* set baseUrl and change build out-dir

* re-add formideploy and config

* update docs GH Actions workflow

* fix incorrect build out-dir path

* re-enable GTM

* lint website dir too

* restore brand colors to sidebar

* commenting out dup nav item

* adding styled components and types, oss-badges, copy-to-clipboard

* touch when adding libs

* adding statis assets from previous codebase, refactored file organization just a bit

* removing infima based styles in favor of styled components

* integrating previous non-typescript codebase to typescript for lander

* optional props

removing the requirement for noMargin and noPadding

misc code cleanup

* fix header svg and video issues

* Update get-started.tsx

cleanup and consistency

* updating button styles

* autoPlay still breaks the Video

i have removed the autoPlay prop as it crashes the app at the terminal. made some comments as a reminder of the issue

* include fix for PR number in Docs GH Action

* adding autoPlay back to video

needed to downgrade node to 16 LTS

* adding and updating libs

* added, removed, reorganized, and renamed various static asset files

* moved to index dir

* Delete custom.css

converted to use sass

* various updates to config for docusaurus

updates for sass, alpha, there are some comments in here that are still in testing for nav items and footer

* grok'd for old code, bridge between compiled CSS vars and JS

* various global styles

* the heart of our CSS customizations happens in this file

* import paths, added content as props, and theme provider

* overhaul of the preview section

* overhaul of the oss section

* overhaul of the header and hero sections

* overhaul of the get started CTA section

* overhaul of the features section

* all content for the site comes from this file and is passed down via props

* overhaul of various global components used like wrappers, buttons, titles, body copy, etc

* removing getComputedStyle as it's unneeded and causes an SSR issue

* adding engines <18

* docs for testing second level

* touch update to libs

* swapped icon for logo and removed old code

* remove the privacy and cookie stuff

* design adjustments

* fix bug where copy button switches color depending on color mode

* how dare they use any-link

* adding new theme value

* design updates and cleanup

* fixing broken link preventing build from completing

* update h1 to uppercase

* add label for small screens

* hero h1 uppercase

* mobile adjustments

* design tweaks

* bug fix for broken link

* additional design updates

* update lib to 2.0-rc-1

* fix typo

* adding a temp external link for testing

* naming cleanup

* documentation of styles

* fix odd spacing

* adding overrides for prism styles

* refactor function to utils

* cleanup and refactor to global, light, dark sections

* footer logo link and mobile style adjustment

* adding width and height to images

* adding height auto so images can resize properly

* auto height

* adding a height to see if that will contain the badge

* hover color to white

* remove testing link

* font color to 454545

* restore index.md page and filter from Sidebar

* adding redirects docusaurus plugin

* rewiring basic-concepts to be index for docs

* comments

* remove swizzled sidebar

* ripping styles components and replacing with css modules

* updating to 2.0

* touch

* converting all rem values to be 37.5% smaller

original code had a 62.5% font hack in it which was colliding with docusaurus. I've gone through and removed pattern and converted all rem values. Many values can be refactored into variables.

* fixing grid and badge alignment

* spacing adjustments

* consolidating values to variables round 1

* consolidating values to variables round 2

* adding new darkest grey for prism background in dark mode

* smoothing out animations, adding clsx where needed

* removing testing MD files

* Remove some JSX.Element

* Small tweak to docusaurus config

* Slim prism config

* Prune some commented-out CSS

* Remove superfluous && className

* Dedup romanize fn

* Update docs.yml

* Docs footer logo fix

* Add robots.txt

* SEO fixes

Co-authored-by: Ryan Srofe <[email protected]>
Co-authored-by: Grant Sander <[email protected]>

Author: 3 people

.github/workflows/docs.yml

@@ -1,82 +1,75 @@
-name: Docs
+name: Deploy Website
 
-defaults:
-  run:
-    working-directory: ./docs
-
-# Compiles and deploys documentation on:
-#   every push that has a change in the docs folder
-#   every pull request with main branch as the base and has a change in the docs folder
 on:
   push:
     paths:
       - 'docs/**'
+      - 'website/**'
   pull_request:
     branches:
       - main
     paths:
       - 'docs/**'
+      - 'website/**'
+
+defaults:
+  run:
+    working-directory: ./website
 
 jobs:
-  docs:
-    name: Build the docs
-    # TODO: Switch to `ubuntu-latest` when GH internal migration complete
-    # because it has awscli@2 built in.
-    # See `ubuntu-latest` note in: https://docs.github.com/en/actions/reference/specifications-for-github-hosted-runners#supported-runners-and-hardware-resources
-    runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node-version: [14.x]
+  deploy-website:
+    runs-on: ubuntu-latest
+
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: ${{ matrix.node-version }}
 
-      - name: Get Yarn Cache Directory Path
-        id: cache-dir-path
+      - name: AWS CLI version
+        run: "aws --version"
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - name: Use Yarn Cache
-        uses: actions/cache@v2
-        id: cache
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
-          path: ${{ steps.cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('./docs/yarn.lock') }}
-
-      - name: Installation ${{ matrix.node-version }}
-        run: yarn --prefer-offline --frozen-lockfile --non-interactive
-
-      # Used to install the root node_modules necessary for linting
-      - name: Root Node Installation ${{ matrix.node-version }}
-        working-directory: ./
-        run: yarn --prefer-offline --frozen-lockfile --non-interactive
-
-      - name: Check Code ${{ matrix.node-version }}
-        run: yarn check-ci
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('website/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
-      - name: Clean Code ${{ matrix.node-version }}
-        run: yarn clean
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
 
-      - name: Build Docs ${{ matrix.node-version }}
+      - name: Build the website
         run: yarn build
 
-      # deploy to staging if the branch is not main
-      - name: Deploy Docs (staging)
+      # Use `gh` tool to infer more information about the pull request.
+      # The underlying issue here is pushes to a non-mergeable/main target branch
+      # don't have the PR number easily available.
+      # https://stackoverflow.com/a/70102700
+      - name: Get pull request info
+        id: pr_info
+        run: echo "::set-output name=pull_request_number::$(gh pr view --json number -q .number || echo "")"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Deploy docs (staging)
         if: github.ref != 'refs/heads/main'
         run: yarn deploy:stage
         env:
+          # GH actions have a PR merge commit that _isn't_ our actual commits.
+          # Manually infer correct branch and sha for pull requests.
           FORMIDEPLOY_GIT_SHA: ${{ github.event.pull_request.head.sha }}
+          FORMIDEPLOY_PULL_REQUEST: ${{ steps.pr_info.outputs.pull_request_number }}
           GITHUB_DEPLOYMENT_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
           SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
 
-      # deploy to production only if the branch is main
       - name: Deploy docs (production)
         if: github.ref == 'refs/heads/main'
-        run: yarn run deploy:prod
+        run: yarn deploy:prod
         env:
           GITHUB_DEPLOYMENT_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

docs/.babelrc

@@ -1,6 +1,7 @@
 ---
 title: Advanced Concepts
 order: 2
+sidebar_position: 2
 ---
 
 # Advanced Concepts
@@ -29,8 +30,8 @@ A handful of query parameters are supported within your Spectacle presentation.
 Append your URL with one of the following parameters, like so: `&<parameter>=true`.
 To combine parameters, use multiple `&` to separate the parameters, e.g.: `&exportMode=true&printMode=true`
 
-| Parameter       | Description of Use                                                                                                                                             |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `exportMode`    | For exporting your presentation as a PDF. Add it to your project URL and "Save to PDF" directly from the browser                                               |
-| `printMode`     | Turns your slideshow into a printer-friendly, black & white version. Meant for use concurrently with `?exportMode` e.g. `?exportMode=true&printMode=true`      |
-| `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 |
+| Parameter       | Description of Use                                                                                                                                        |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `exportMode`    | For exporting your presentation as a PDF. Add it to your project URL and "Save to PDF" directly from the browser                                          |
+| `printMode`     | Turns your slideshow into a printer-friendly, black & white version. Meant for use concurrently with `?exportMode` e.g. `?exportMode=true&printMode=true` |
+| `presenterMode` | Displays a Presenter Mode for ease of presentation. For more info on this mode, please see [Presenting](./#presenting) in our Basic Concepts doc          |

docs/README.md

@@ -1,6 +1,7 @@
 ---
 title: API Reference
 order: 5
+sidebar_position: 5
 ---
 
 # API Reference