Merge branch 'main' into feat-hide-console

app/api/src/docker/README.md

@@ -17,7 +17,6 @@ Because of the way the docker containers to be deployed as lambdas on aws are so
 
 The docker build relies on a git ignored file, the aws-lambda-rie. [Download it](https://github.com/aws/aws-lambda-runtime-interface-emulator/releases/download/v1.0/aws-lambda-rie), then put it into `app/api/src/docker/common/`. alternatively you can put this download into the DockerFiles by reading the instructions at around line 29 of the DockerFiles (`app/api/src/docker/openscad/Dockerfile` & `app/api/src/docker/cadquery/Dockerfile`). However this will mean slower build times as it will need download this 14mb file every build.
 
-you will also need to create a .env in `app/api/src/docker/.env` for the following env-vars `DEV_AWS_SECRET_ACCESS_KEY, DEV_AWS_ACCESS_KEY_ID and DEV_BUCKET`. Ask @irev-dev for credentials and he can sort you out.
 
 Run
 

app/web/src/App.tsx

@@ -1,7 +1,8 @@
 import { AuthProvider } from '@redwoodjs/auth'
 import GoTrue from 'gotrue-js'
 
-import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
+import { RedwoodProvider } from '@redwoodjs/web'
+import FatalErrorBoundary from 'src/components/FatalErrorBoundary/FatalErrorBoundary'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import { createMuiTheme } from '@material-ui/core/styles'

app/web/src/components/EditorMenu/helpers.ts

@@ -54,7 +54,9 @@ export const makeStlDownloadHandler =
         extensions: ['.stl'],
       })
     }
-    toast("CadHub is a work in process and We're still working out kinks with the STL download.")
+    toast(
+      "CadHub is a work in process and We're still working out kinks with the STL download."
+    )
     if (geometry) {
       if (
         type === 'geometry' &&

app/web/src/components/FatalErrorBoundary/FatalErrorBoundary.tsx

@@ -2,7 +2,34 @@ import { FatalErrorBoundary as FatalErrorBoundaryBase } from '@redwoodjs/web'
 import * as Sentry from '@sentry/browser'
 
 class FatalErrorBoundary extends FatalErrorBoundaryBase {
-  componentDidCatch(error, errorInfo) {
+  async componentDidCatch(error, errorInfo) {
+    // debug netlify prerender code below
+    // const div = document.createElement('div')
+    // div.innerHTML = JSON.stringify(error)
+    // document.body.append(div)
+
+    /* More debug explanation.
+    If there's an error in netlify's prerendering service,
+    we don't have access to the log so we have to spin it up locally to check.
+    This can be with the following commands
+    ```
+    $ git clone https://github.com/netlify/prerender.git
+    $ cd prerender
+    ```
+    comment out the lines `server.use(require("./lib/plugins/basicAuth"));` and `server.use(require("./lib/plugins/s3HtmlCache"));` in `server.js`
+    then
+    ```
+    $ npm install
+    $ npm start
+    ```
+    This will spin up the service on port 3000, prerendering can than be tested with
+    http://localhost:3000/https://cadhub.xyz
+    or
+    http://localhost:3000/http://localhost:8910/
+    where the second url is the route you want to test.
+    However we don't have access to the console since it's run by a separate chrome instance,
+    so instead errors are put into the DOM
+    */
     Sentry.withScope((scope) => {
       scope.setExtras(errorInfo)
       Sentry.captureException(error)

app/web/src/components/Hero/AssetWithGooey.tsx

@@ -4,8 +4,8 @@ import { useLoader, useThree, useFrame } from '@react-three/fiber'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit'
 import texture from 'src/components/IdeViewer/dullFrontLitMetal.png'
-import { useTexture, MeshDistortMaterial, Sphere } from '@react-three/drei'
+import { Glitch, EffectComposer } from '@react-three/postprocessing'
-import { Glitch, EffectComposer } from "@react-three/postprocessing";
+import { MeshDistortMaterial, Sphere, useTexture } from '@react-three/drei'
 
 const thresholdAngle = 10
 export default function AssetWithGooey({

app/web/src/components/Hero/Hero.tsx

@@ -12,6 +12,7 @@ import Gravatar from 'src/components/Gravatar/Gravatar'
 import ProjectsCell from 'src/components/ProjectsCell'
 import OutBound from 'src/components/OutBound/OutBound'
 import { DynamicProjectButton } from 'src/components/NavPlusButton/NavPlusButton'
+import FatalErrorBoundary from 'src/components/FatalErrorBoundary/FatalErrorBoundary'
 
 // dynamic import to enable pre-render iof the homepage
 const AssetWithGooey = React.lazy(
@@ -280,32 +281,43 @@ function ModelSection({
   const { ref, inView } = useInView()
   return (
     <div className="relative h-full">
-      <div className="absolute inset-0" ref={ref}>
+      <FatalErrorBoundary
-        <Canvas
+        page={() => (
-          linear
+          <div className="bg-gray-800 p-8 rounded-md text-ch-gray-300">
-          dpr={[1, 2]}
+            something seams to have gone wrong here
-          orthographic
+          </div>
-          camera={{ zoom: 75, position: [0, 0, 500] }}
+        )}
-        >
+      >
-          {!inView && <DisableRender />}
+        <div className="absolute inset-0" ref={ref}>
-          <pointLight position={[2, 3, 5]} color="#FFFFFF" intensity={2} />
+          <Canvas
-          <pointLight position={[2, 3, -5]} color="#FFFFFF" intensity={2} />
+            linear
-          <pointLight position={[-6, 3, -5]} color="#FFFFFF" intensity={2} />
+            dpr={[1, 2]}
-          <pointLight position={[-6, 3, 5]} color="#FFFFFF" intensity={2} />
+            orthographic
-
+            camera={{ zoom: 75, position: [0, 0, 500] }}
-          <pointLight position={[2, 1.5, 0]} color="#0000FF" intensity={2} />
-          <pointLight position={[2, 1.5, 0]} color="#FF0000" intensity={2} />
-          <Suspense
-            fallback={<Html center className="loading" children="Loading..." />}
           >
-            <AssetWithGooey assetUrl={assetUrl} scale={scale} />
+            {!inView && <DisableRender />}
-          </Suspense>
+            <pointLight position={[2, 3, 5]} color="#FFFFFF" intensity={2} />
+            <pointLight position={[2, 3, -5]} color="#FFFFFF" intensity={2} />
+            <pointLight position={[-6, 3, -5]} color="#FFFFFF" intensity={2} />
+            <pointLight position={[-6, 3, 5]} color="#FFFFFF" intensity={2} />
 
-          {/* uncomment for framerate and render time */}
+            <pointLight position={[2, 1.5, 0]} color="#0000FF" intensity={2} />
-          {/* <Stats showPanel={0} className="three-debug-panel-1" /> */}
+            <pointLight position={[2, 1.5, 0]} color="#FF0000" intensity={2} />
-          {/* <Stats showPanel={1} className="three-debug-panel-2" /> */}
+
-        </Canvas>
+            <Suspense
-      </div>
+              fallback={
+                <Html center className="loading" children="Loading..." />
+              }
+            >
+              <AssetWithGooey assetUrl={assetUrl} scale={scale} />
+            </Suspense>
+
+            {/* uncomment for framerate and render time */}
+            {/* <Stats showPanel={0} className="three-debug-panel-1" /> */}
+            {/* <Stats showPanel={1} className="three-debug-panel-2" /> */}
+          </Canvas>
+        </div>
+      </FatalErrorBoundary>
     </div>
   )
 }

app/web/src/components/IdeSideBar/sidebarConfig.tsx

@@ -63,12 +63,17 @@ const DiscordLink = () => (
   </a>
 )
 
-const settingsConfig = [
+interface settingsConfig {
+  title: string
+  name: string
+  Content: React.FC
+}
+
+const settingsConfig: settingsConfig[] = [
   {
     title: 'Editor',
     name: 'editor',
-    open: false,
+    Content: () => (
-    content: (
       <div className="p-2">
         <p>
           <em>Coming Soon</em>
@@ -84,8 +89,7 @@ const settingsConfig = [
   {
     title: 'Viewer',
     name: 'viewer',
-    open: false,
+    Content: () => (
-    content: (
       <div className="p-2">
         <p>
           <em>Coming Soon</em>
@@ -101,8 +105,7 @@ const settingsConfig = [
   {
     title: 'Console',
     name: 'console',
-    open: false,
+    Content: () => (
-    content: (
       <div className="p-2">
         <p>
           <em>Coming Soon</em>
@@ -135,24 +138,26 @@ function SettingsMenu({ parentName }: { parentName: string }) {
   const { state, thunkDispatch } = useIdeContext()
   return (
     <article className="">
-      {settingsConfig.map((item) => (
+      {settingsConfig.map(({ name, title, Content }) => (
         <details
-          key={'settings-tray-' + item.name}
+          key={'settings-tray-' + name}
-          open={state.sideTray.slice(-1)[0] === item.name}
+          open={state.sideTray.slice(-1)[0] === name}
-          onClick={(e) => {
-            e.preventDefault()
-            thunkDispatch((dispatch) =>
-              dispatch({
-                type: 'settingsButtonClicked',
-                payload: [parentName, item.name],
-              })
-            )
-          }}
         >
-          <summary className="px-2 py-2 bg-ch-pink-800 bg-opacity-10 my-px cursor-pointer">
+          <summary
-            {item.title}
+            className="px-2 py-2 bg-ch-pink-800 bg-opacity-10 my-px cursor-pointer"
+            onClick={(e) => {
+              e.preventDefault()
+              thunkDispatch((dispatch) =>
+                dispatch({
+                  type: 'settingsButtonClicked',
+                  payload: [parentName, name],
+                })
+              )
+            }}
+          >
+            {title}
           </summary>
-          {item.content}
+          <Content />
         </details>
       ))}
     </article>

app/web/src/index.html

@@ -7,7 +7,7 @@
     <meta property="og:type" content="website" />
     <meta name="robots" content="index, follow" />
     <title>CadHub</title>
-    <meta property="og:description" content="A community hub for CodeCAD parts, OpenSCAD, CadQuery and more" />
+    <meta property="og:description" content="A community hub for CodeCAD parts, OpenSCAD, CadQuery, JSCAD and more" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta property="twitter:domain" content="cadhub.xyz" />
     <meta property="og:locale" content="en-US" />

app/web/src/pages/FatalErrorPage/FatalErrorPage.js

@@ -10,7 +10,7 @@ import Seo from 'src/components/Seo/Seo'
 
 export default () => (
   <main>
-    <Seo title="Fatal error" description="Fatal error" lang="en-US" />
+    <Seo title="CadHub" description="CadHub" lang="en-US" />
 
     <style
       dangerouslySetInnerHTML={{