cadhub

cadhub copied to clipboard

Feature Description

Create a code snippet and supporting assets to be able to embed CadHub projects on other web sites/pages.

Background Research

• CodePen has a blog walkthrough post for users to explain how their embed editor works.
• CodeSandbox has an even more thorough page dedicated to their embed.

Requirements

Technically the IDE or Details pages, or any page for that matter, can be embedded elsewhere via an iframe. But the idea is to create an endpoint that displays the model with the optional addition of either the code or the project info in as small a package size as possible. In the future there should be URL parameters that allow for additional configurations. My initial thoughts are:

1. Remove Monaco, React, any Redwood dependencies. Keeping the "editor" styles might mean recreating them.
2. have STL pre-generated so that code evaluation can be removed
3. Have either vanilla JS or Preact / Alpine / Petite Vue for targeted interactivity, things like switch between tabs for example.
4. Remove any layout change features: code or details on left, viewer on right or full-width.
5. Add control to Share dialog to generate embed snippet, maybe allow user to adjust height of embed in advance with a slider or something?

@Irev-Dev here is my proposed URL structure: https://cadhub.xyz/u/[username]/[project-name]/embed

Based on:

• Editor view: https://cadhub.xyz/u/irevdev/tutorial-hinge/ide
• Details view: https://cadhub.xyz/u/irevdev/tutorial-hinge

Just want to note that after multi-file support there will be a need to be able to define which file's code is visible in the "editor" if included in the embed.

Okay wow, this sounds like a lot more work than I was expecting 😅

I don't think I get why so much effort needs to go into sliming it down? Is it because when you load an iframe you effectively have to download two websites?

I think removing monaco make sense, but replacing react with preact (or other) and than having to roll a new fetching solution in order to remove RW deps feels like we're maintaining a completely seperate project for the sake of embeds. (I'm also not sure about if there is going to be bundling complications since using react is a pretty baked in assumption for RW apps.

Having the STL pre-generated make sense, will depend on work I'm trying to do currently.

URL's seem fine.

I guess I'm not completely sure of what the vision for this is? if we use pre-generated STL, why are we including code at all? is this for tutorial's sake? in which case it can't be edited in the embed?, users will need to go to full website if they want to make changes?

I'm just trying to think how I've personally interacted codepen and codesandbox embeds in the past. I guess I'll interact with them and look at the output as part of a blog post, but the moment I want to see the code I'll immediately click through to the pen. Just thinking out loud here, maybe a part viewer embed will be enough? Guess it's going to depend on who embedding. On medium, embeds are small because of enforced width so part viewer only make sense, but someone's blog they could make it as large as they wanted.

I would agree for embed to be just preview, and maybe also show code with syntax highligh in some way(tabs, or sth).

To be able to run the code user should open cadhub.

This type of embed is very useful, and I would personally be fine with it.

Oh totally @Irev-Dev ! I was only envisioning this as a previewer for sure.

The code "editor" I was picturing is just for display similar to @hrgdavor's mention above: just a display of the code beside, and click through to the full site to edit.

I'm gonna pull back the discussion about removing or replacing React, sorry that'll be fine, and keeping React will let us keep R3F and the Viewer Pane intact.

Yes my vision for this is primarily a Model Preview with the option to show the Code beside for tutorials and the like, or alternatively the Project Details as chosen by the person embedding.

Yeah and that's a good way to put it, I just don't want to embed the whole site because it's adding unnecessary code to other people's pages, so I just would like to not include routing, Golden Layout, and other parts of the full Editor page that aren't needed.

I believe Redwood bundles by page so we should get that for free.

yup cool, I think keeping react is a much better move from at leat getting an MVP working, can always optimize from there.