Merge pull request #348 from FormidableLabs/docs/formideploy

Set up Formideploy for Docusarus site

Author: carloskelly13

.github/workflows/deploy-docs.yml

@@ -0,0 +1,54 @@
+name: Deploy Docs Site
+
+on:
+  push:
+    paths:
+      - 'docs/**'
+      - 'website/**'
+  pull_request:
+    branches:
+      - 'master'
+    paths:
+      - 'docs/**'
+      - 'website/**'
+
+jobs:
+  deploy-website:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'yarn'
+
+      - name: AWS CLI version
+        run: "aws --version"
+
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: ./website
+
+      - name: Build the website
+        run: yarn build
+        working-directory: ./website
+
+      # Use `gh` tool to infer more information about the pull request.
+      # The underlying issue here is pushes to a non-mergeable/master 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 (production)
+        if: github.ref == 'refs/heads/master'
+        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 }}

README.md

@@ -22,7 +22,7 @@ The library is structured modularly and lets you style and compose its component
 
 <p align="center"><img src="https://user-images.githubusercontent.com/17658189/63181897-1d67d380-c049-11e9-9dd2-7da2a3a57f05.gif" width=500></p>
 
-Come learn more at our [docs site](https://formidable-react-live-docs.vercel.app)!
+Come learn more at our [docs site](https://formidable.com/open-source/react-live)!
 
 ## Support
 

docs/introduction.mdx

@@ -7,6 +7,8 @@ import { DemoLiveEditor } from "../website/src/components/live-edit";
 
 # Introduction
 
+[![React Live — Formidable, We build the modern web](https://raw.githubusercontent.com/FormidableLabs/react-live/master/react-live-Hero.png)](https://formidable.com/open-source/)
+
 **React Live** brings you the ability to render React components with editable source code and live preview. React Live is structured modularly and lets you style and compose its components freely. The following demos show typical use cases including the editor, preview, and error pane components.
 
 To see React Live in action, make changes to the following editor panes:
@@ -33,9 +35,12 @@ export const jsxExample = `
 To render a series of components or render components beyond just JSX, React Live also provides a `render` function to pass JSX into when the `noInline` prop is present. This lets you render multiple or functional components with hooks. This example shows a functional component with a `useState` hook.
 
 export const noInlineExample = `
-const Counter = () => {
+type Props = {
+  label: string;
+}
+const Counter = (props: Props) => {
   const [count, setCount] =
-    React.useState(0)
+    React.useState<number>(0)
   return (
     <div>
       <h3 style={{
@@ -44,7 +49,7 @@ const Counter = () => {
         padding: 8,
         borderRadius: 4
       }}>
-        Counter: {count} 🧮
+        {props.label}: {count} 🧮
       </h3>
       <button
         onClick={() =>
@@ -55,7 +60,7 @@ const Counter = () => {
     </div>
   )
 }
-render(<Counter />)
+render(<Counter label="Counter" />)
 `.trim();
 
 <DemoLiveEditor code={noInlineExample} noInline />

website/docusaurus.config.js

@@ -9,7 +9,7 @@ const config = {
   title: "React Live",
   tagline: "A flexible playground for live editing React components",
   url: "https://formidable.com",
-  baseUrl: "/",
+  baseUrl: "/open-source/react-live",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
   favicon: "img/favicon.ico",

website/formideploy.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  lander: {
+    name: "react-live",
+  },
+  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,14 +5,15 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
-    "build": "docusaurus build",
+    "build": "docusaurus build --out-dir build/open-source/react-live",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "deploy:prod": "formideploy deploy --production"
   },
   "dependencies": {
     "@docusaurus/core": "2.4.0",
@@ -24,12 +25,13 @@
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-live": "^3.2.0",
+    "react-live": "^4.0.0",
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.0",
     "@tsconfig/docusaurus": "^1.0.5",
+    "formideploy": "^0.4.2",
     "typescript": "^4.7.4"
   },
   "browserslist": {