app/api/db/schema.prisma

@@ -5,7 +5,7 @@ datasource db {
 
 generator client {
   provider      = "prisma-client-js"
-  binaryTargets = "native"
+  binaryTargets = ["native", "darwin-arm64", "darwin"]
 }
 
 // sqlLight does not suport enums so we can't use enums until we set up postgresql in dev mode

app/web/src/Routes.js

@@ -56,6 +56,7 @@ const Routes = () => {
       <Route path="/u/{userName}" page={UserPage} name="user" />
       <Route path="/u/{userName}/{projectTitle}" page={ProjectPage} name="project" />
       <Route path="/u/{userName}/{projectTitle}/ide" page={IdeProjectPage} name="ide" />
+      <Route path="/u/{userName}/{projectTitle}/embed" page={EmbedProjectPage} name="embed" />
       <Route path="/u/{userName}/{projectTitle}/social-card" page={SocialCardPage} name="socialCard" />
 
       <Private unauthenticated="home" role="admin">

app/web/src/components/EmbedProjectCell/EmbedProjectCell.mock.ts

@@ -0,0 +1,6 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  ideProject: {
+    id: 42,
+  },
+})

app/web/src/components/EmbedProjectCell/EmbedProjectCell.stories.tsx

@@ -0,0 +1,16 @@
+import { Loading, Empty, Success } from './EmbedProjectCell'
+import { standard } from './EmbedProjectCell.mock'
+
+export const loading = () => {
+  return Loading ? <Loading /> : null
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : null
+}
+
+export const success = () => {
+  return Success ? <Success {...standard()} /> : null
+}
+
+export default { title: 'Cells/EmbedProjectCell' }

app/web/src/components/EmbedProjectCell/EmbedProjectCell.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@redwoodjs/testing'
+import { Loading, Empty, Success } from './EmbedProjectCell'
+import { standard } from './EmbedProjectCell.mock'
+
+describe('EmbedProjectCell', () => {
+  test('Loading renders successfully', () => {
+    render(<Loading />)
+    // Use screen.debug() to see output
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+  })
+
+  test('Empty renders successfully', async () => {
+    render(<Empty />)
+    expect(screen.getByText('Empty')).toBeInTheDocument()
+  })
+
+  test('Success renders successfully', async () => {
+    render(<Success ideProject={standard().ideProject} />)
+    expect(screen.getByText(/42/i)).toBeInTheDocument()
+  })
+})

app/web/src/components/EmbedProjectCell/EmbedProjectCell.tsx

@@ -0,0 +1,71 @@
+import useUser from 'src/helpers/hooks/useUser'
+import EmbedViewer from 'src/components/EmbedViewer/EmbedViewer'
+import { useIdeState } from 'src/helpers/hooks/useIdeState'
+import { IdeContext } from 'src/helpers/hooks/useIdeContext'
+
+export const QUERY = gql`
+  query FIND_PROJECT_BY_USENAME_TITLE(
+    $projectTitle: String!
+    $userName: String!
+  ) {
+    project: projectByUserAndTitle(
+      projectTitle: $projectTitle
+      userName: $userName
+    ) {
+      id
+      title
+      description
+      code
+      mainImage
+      createdAt
+      cadPackage
+      user {
+        id
+        userName
+        image
+      }
+    }
+  }
+`
+
+export interface Project {
+  id: string
+  title: string
+  code: string
+  description: string
+  mainImage: string
+  createdAt: string
+  cadPackage: 'openscad' | 'cadquery'
+  user: {
+    id: string
+    userName: string
+    image: string
+  }
+}
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Project not found</div>
+
+interface SaveCodeArgs {
+  input: any
+  id: string
+  isFork: boolean
+}
+
+export const Success = ({
+  project,
+  refetch,
+}: {
+  project: Project
+  refetch: any
+}) => {
+  const [state, thunkDispatch] = useIdeState()
+
+
+  return (
+      <IdeContext.Provider value={{ state, thunkDispatch, project }}>
+        <EmbedViewer />
+      </IdeContext.Provider>
+  )
+}

app/web/src/components/EmbedViewer/EmbedViewer.tsx

@@ -0,0 +1,19 @@
+import { useIdeInit } from 'src/components/EncodedUrl/helpers'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
+import IdeViewer from 'src/components/IdeViewer/IdeViewer'
+import { use3dViewerResize } from 'src/helpers/hooks/use3dViewerResize'
+
+function EmbedViewer() {
+    const { state, project } = useIdeContext()
+    console.log('from EmbedViewer', { cadPackage: project.cadPackage, code: project.code })
+    useIdeInit(project?.cadPackage, project?.code || state?.code, "viewer")
+    const { viewerDomRef } = use3dViewerResize()
+
+    return (
+        <div className="h-screen flex flex-col">
+            <IdeViewer isMinimal={true} />
+        </div>
+    )
+}
+
+export default EmbedViewer

app/web/src/components/IdeViewer/IdeViewer.tsx

@@ -4,8 +4,10 @@ import { PureIdeViewer } from './PureIdeViewer'
 
 const IdeViewer = ({
   handleOwnCamera = false,
+  isMinimal = false,
 }: {
-  handleOwnCamera?: boolean
+  handleOwnCamera?: boolean,
+  isMinimal?: boolean,
 }) => {
   const { state, thunkDispatch } = useIdeContext()
   const dataType = state.objectData?.type
@@ -35,7 +37,7 @@ const IdeViewer = ({
       }
     })
   }
-
+  
   return (
     <PureIdeViewer
       dataType={dataType}
@@ -44,6 +46,7 @@ const IdeViewer = ({
       onCameraChange={onCameraChange}
       isLoading={state.isLoading}
       camera={state?.camera}
+      isMinimal={isMinimal}
     />
   )
 }

app/web/src/components/ProjectProfile/ProjectProfile.tsx

@@ -52,6 +52,7 @@ const ProjectProfile = ({
         })
       )
   }, [currentUser, project?.title, userProject.userName])
+  console.log('from ProjectProfile', { cadPackage: project.cadPackage, code: project.code })
   useIdeInit(project?.cadPackage, project?.code, 'viewer')
   const [newDescription, setNewDescription] = useState(project?.description)
   const onDescriptionChange = (description) => setNewDescription(description())

app/web/src/pages/EmbedProjectPage/EmbedProjectPage.tsx

@@ -0,0 +1,11 @@
+import EmbedProjectCell from 'src/components/EmbedProjectCell'
+
+const EmbedProjectPage = ({ userName, projectTitle }) => {
+  return (
+    <>
+      <EmbedProjectCell userName={userName} projectTitle={projectTitle} />
+    </>
+  )
+}
+
+export default EmbedProjectPage