feat(construct): updating to newer cdk "Distribution", more aggressiv…

.github/workflows/pr.yml

@@ -1,9 +1,9 @@
-name: Serverless UI Build & Deploy Example Site
+name: Serverless UI Build & Deploy Example Sites
 
 on: [pull_request]
 
 jobs:
-  deploy-pr-preview:
+  deploy-simple-preview:
     runs-on: ubuntu-latest
 
     steps:
@@ -22,7 +22,8 @@ jobs:
           aws-region: us-west-2
       - run: lerna bootstrap
       - run: lerna run prepack
-      - run: yarn sui deploy --compiled-build --dir="./example-site/dist" --functions="./example-site/functions"
+      - run: cd examples/simple && yarn install
+      - run: yarn sui deploy --compiled-build --dir="./examples/simple/dist" --functions="./examples/simple/functions"
       - name: Add PR Comment
         uses: actions/github-script@v3
         with:
@@ -42,3 +43,24 @@ jobs:
               repo: context.repo.repo,
               body: `✅ Your deploy preview is ready: ${template.Outputs[baseUrlKey].Value}`,
             });
+  deploy-gatsby-preview:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: "14.x"
+      - run: npm install -g aws-cdk
+      - run: npm install -g lerna
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-west-2
+      - run: lerna bootstrap
+      - run: lerna run prepack
+      - run: cd examples/gatsby && yarn install && yarn build
+      - run: yarn sui deploy --compiled-build --dir="./examples/gatsby/public"

examples/gatsby/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.cache/
+public

examples/gatsby/README.md

@@ -0,0 +1,12 @@
+# Gatsby Example Website for Serverless UI
+
+This is simple Gatsby website that can be deployed with Serverless UI. We use this website for integration tests in this repository.
+
+Try it yourself with:
+
+```shell
+npm install -g @serverlessui/cli
+npm install
+npm run build
+sui deploy --dir="public"
+```

examples/gatsby/gatsby-config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  siteMetadata: {
+    title: "gatsby",
+  },
+  plugins: [
+    "gatsby-plugin-image",
+    "gatsby-plugin-react-helmet",
+    {
+      resolve: "gatsby-plugin-manifest",
+      options: {
+        icon: "src/images/icon.png",
+      },
+    },
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "images",
+        path: "./src/images/",
+      },
+      __key: "images",
+    },
+  ],
+};

examples/gatsby/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "gatsby",
+  "version": "1.0.0",
+  "private": true,
+  "description": "gatsby",
+  "author": "Jake Partusch",
+  "keywords": [
+    "gatsby"
+  ],
+  "scripts": {
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  },
+  "dependencies": {
+    "gatsby": "^3.0.1",
+    "gatsby-plugin-image": "^1.0.0",
+    "gatsby-plugin-manifest": "^3.0.0",
+    "gatsby-plugin-react-helmet": "^4.0.0",
+    "gatsby-plugin-sharp": "^3.0.0",
+    "gatsby-plugin-sitemap": "^3.0.0",
+    "gatsby-source-filesystem": "^3.0.0",
+    "gatsby-transformer-sharp": "^3.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-helmet": "^6.1.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.8.56"
+  }
+}

examples/gatsby/src/pages/404.js

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { Link } from "gatsby"
+
+// styles
+const pageStyles = {
+  color: "#232129",
+  padding: "96px",
+  fontFamily: "-apple-system, Roboto, sans-serif, serif",
+}
+const headingStyles = {
+  marginTop: 0,
+  marginBottom: 64,
+  maxWidth: 320,
+}
+
+const paragraphStyles = {
+  marginBottom: 48,
+}
+const codeStyles = {
+  color: "#8A6534",
+  padding: 4,
+  backgroundColor: "#FFF4DB",
+  fontSize: "1.25rem",
+  borderRadius: 4,
+}
+
+// markup
+const NotFoundPage = () => {
+  return (
+    <main style={pageStyles}>
+      <title>Not found</title>
+      <h1 style={headingStyles}>Page not found</h1>
+      <p style={paragraphStyles}>
+        Sorry{" "}
+        <span role="img" aria-label="Pensive emoji">
+          😔
+        </span>{" "}
+        we couldn’t find what you were looking for.
+        <br />
+        {process.env.NODE_ENV === "development" ? (
+          <>
+            <br />
+            Try creating a page in <code style={codeStyles}>src/pages/</code>.
+            <br />
+          </>
+        ) : null}
+        <br />
+        <Link to="/">Go home</Link>.
+      </p>
+    </main>
+  )
+}
+
+export default NotFoundPage