Docs: deployment

.github/workflows/docs-website.yml

@@ -2,8 +2,15 @@ name: Deploy Website
 
 on:
   push:
+    paths:
+      - 'docs/**'
+      - 'website/**'
+  pull_request:
     branches:
       - main
+    paths:
+      - 'docs/**'
+      - 'website/**'
 
 jobs:
   deploy-website:
@@ -12,6 +19,9 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
+      - 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)"
@@ -32,6 +42,23 @@ jobs:
         run: yarn build
         working-directory: ./website
 
-      - name: Deploy
-        run: echo 'Coming Soon'
+      - name: Deploy docs (staging)
+        if: github.ref != 'refs/heads/main'
+        run: yarn deploy:stage
+        working-directory: ./website
+        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 }}
+          GITHUB_DEPLOYMENT_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
+          SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
+
+      - name: Deploy docs (production)
+        if: github.ref == 'refs/heads/main'
+        run: yarn deploy:prod
         working-directory: ./website
+        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 }}

lib/report/index.html

@@ -267,7 +267,7 @@ <h4 class="text-xl font-mono font-semibold">Diff</h4>
         <div class="flex flex-1 flex-col-reverse lg:flex-row py-3 font-light">
           <div class="flex-1 text-center lg:text-left">
             Copyright © {{currentYear}}
-            <a class="hover:text-blue-400" href="https://www.formidable.com/"
+            <a class="hover:text-blue-400" href="https://formidable.com/"
               >Formidable Labs, LLC</a
             >.
           </div>

website/README.md

@@ -16,18 +16,15 @@ $ yarn start
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
+Navigate to: http://localhost:3000/open-source/react-native-owl
+
 ### Build
 
 ```
 $ yarn build
+$ yarn serve
 ```
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
-### Deployment
-
-```
-$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+Navigate to: http://localhost:5000/open-source/react-native-owl/

website/docusaurus.config.js

@@ -8,13 +8,13 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 const config = {
   title: 'React Native Owl',
   tagline: 'Visual Regression Testing for React Native',
-  url: 'https://formidable.com/open-source/react-native-owl/',
-  baseUrl: '/',
+  url: 'https://formidable.com/',
+  baseUrl: '/open-source/react-native-owl/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'images/favicon.ico',
-  organizationName: 'FormidableLabs', // Usually your GitHub org/user name.
-  projectName: 'react-native-owl', // Usually your repo name.
+  organizationName: 'FormidableLabs',
+  projectName: 'react-native-owl',
 
   presets: [
     [
@@ -95,7 +95,7 @@ const config = {
       footer: {
         style: 'dark',
         logo: {
-          href: 'https://www.formidable.com/',
+          href: 'https://formidable.com/',
         },
         links: [
           {

website/formideploy.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  lander: {
+    name: "react-native-owl"
+  },
+  build: {
+    // Build output directory.
+    // Docusaurus defaults to `build`.
+    // We use `docusaurus build --out-dir build/open-source/docusaurus` to build intermediate real dirs.
+    dir: "build"
+  }
+};

website/package.json

@@ -5,11 +5,12 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
-    "build": "docusaurus build",
+    "build": "docusaurus build --out-dir build/open-source/react-native-owl",
     "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
-    "serve": "docusaurus serve",
+    "serve": "formideploy serve",
+    "deploy:stage": "formideploy deploy --staging",
+    "deploy:prod": "formideploy deploy --production",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids"
   },
@@ -41,6 +42,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.0.0-beta.14",
     "@tsconfig/docusaurus": "^1.0.4",
+    "formideploy": "^0.4.1",
     "typescript": "^4.4.4"
   }
 }