irev-dev / cadhub Goto Github PK

Something basic will do using native database quries will be fine. See the prisma docs
https://www.prisma.io/docs/concepts/components/prisma-client/filtering#filter-conditions

We should be able to use "contains" on the title and description for a very basic search.

We might add elastic search or algolia later for a more advanced implementation

if you want to pick this one up, let me know and I'll try and get you designs soon. But it's basically going to be a search field, then displaying projects with the projects cards that already exist on the home page https://cadhub.xyz/

The page needs the following component

For this issue you need to:

• Make a react component for the above
• It should have 2 props 1) emotes: array (more info below) 2) callback that returns an emoji
• when the user clicks an existing emoji it should fire the callback, if the click the three dot menu should open a small emoji selector (this will also fire the callback when an emoji from the menu is selected)
• materialUI is already included in the project, so use that for the dropdown/popover menu
• Style with tailwind css
• dots can be found here by search for dots-vertical and should be added to Svg.js

emotes array is:

   emotes: {
      emojii: string,
      count: number,
   }[] // basically an array of objects with an emojii and count properties

and example data would be:

   emotes: [
      {
         emojii: '❤️',
         count: 3,
      },
      {
         emojii: '😁',
         count: 2,
      },
   ]

Design can be found here
Context of where this will go:

Favicon support is a mess.
This npm module might be worth running to generate everything we need?
https://www.npmjs.com/package/favicons

other resources
https://scotch.io/tutorials/all-favicons-for-all-devices-and-sizes

Hello,

I just opened the website on my phone but the lay-out is not looking good.
See image:

With kind regards,

Hendrie Bosch

it will be something adopted instead of trying to write my own from scratch.

The profile page will have following updatable avatar component

For this issue you need to:

• Make a react component for the above extending/modifying the ImageUploader component

• It should at least have 3 props 1) isEditable: boolean, 2) imageId: string (this will be a cloudinary id used to fetch the image) 3) onChange: callback that returns the new couldinaryid when a new upload occures
• Style with tailwind css

Design can be found here
Context of where these inputs will go:

Sometimes they need a refresh, which is confusing to users who just uploaded an image.

See designs here

Currently, the only thing missing is the bottom section with the list of parts.
You should be able to re-use web/src/components/Parts/Parts.js to recreate the list, as this is already used on the homepage and looks almost exactly the same.

The donut has too much detail for a favicon, updating to just the letter "C"

The work flow is a little confusing atm

Once the user has made changes to the template code we should then let them save this as a "part".

Should be fairly straight forward, and I suspect will be very similar to this diff full PR is here too

I believe the file main file that needs to be changed is web/src/components/UserForm/UserForm.js

What to have a go at this one @Yash-R?

The same popover component from material ui that's used in web/src/components/EmojiReaction/EmojiReaction.js can be used for this.
atm the button immediately signs the user out which is not intuitive, plus there's no easy way for a user to get to their profile so this helps with both

This avatar is located within: web/src/layouts/MainLayout/MainLayout.js

to link to the user profile use <Link to={routes.user2({userName: user.userName})}>...</Link> similar to what's used in web/src/components/PartProfile/PartProfile.js

I started playing around on CadHub.xyz and tried to set my profile picture by selecting the image and clicking the "Upload" button. A green flash message shows at top saying "User Updated" and there are no errors in the web console, but when I leave and come back I see that my profile picture wasn't saved.

Version: Current Pre-Alpha on cadhub.xyz
Browser: Firefox 84.0 (64-bit)
OS: Ubuntu 18.04 64-bit

See this forum post.
https://community.redwoodjs.com/t/intermitant-502-runtime-exiterror/1471/4

The profile have the following styled input

For this issue you need to:

• Make a react component for the above
• It should at least have 3 props 1) isEditable: boolean, 2) value: string 3) onChange: callback
• Style with tailwind css

Design can be found here
Context of where these inputs will go:

Seems like this is going to be needed eventually, but I guess definitely not needed at the current MVP. really not sure how the schema needs to change for this one. Might be worth asking on the redwoodjs forums.

This issue probably can be broken down a little too, assuming we want to have email notifications as well as in app that can be done after in app notifications.

If you open up the dev tool console on theguardian.com there is a well formated console.log that invites folks to apply for jobs.

I'd like to have the same thing inviting folks to get involved in the project. This will make a good first issue since you don't need prior knowledge of how the project works. Just need to google how to format console logs.
I think the best way to add it is in a useEffect hook on the mainlayout since that's on every page.
web/src/layouts/MainLayout/MainLayout.js

The page needs the following component

For this issue you need to:

• Make a react component for the above
• It should at least have 2 props 1) userName: string, 2) partName: string
• Style with tailwind css

Design can be found here
Context of where these inputs will go:

This is causing noise in the console.

The part profile should show the license in the left-hard side bar, it should link to the official version of the license

When the profile is in edit mode, this button will become a select

You might be able to reuse the export drop down from the ideToolbar

Lets start with 3 common licenses, it will be easy to add more later. Lets go with

• GPL-3
• MIT
• Apache-2

The license data will need to be saved on the part, so the schema will need updating api/prisma/schema.prisma.
it should be
license String @default("MIT")
And yes lets make the default MIT.

The api/prisma/schema.prisma will updating basically the createPartInput and updatePartInput will need to have license: String added.

Running yarn rw db save "add part license" should initiate the db migration and yarn rw db up should run the migration.

Reach out if you get stuck at all.

ISSUE IS PAUSED!

as it depends on #45, #46 and #47. Feel free to have a look at those.
I'll unpause this when those are ready to go

There are designs for the part page

Please use tailwind to style
Designs can be found here

Will be good to make sure folk arriving understand what the project is trying to achieve.

Basically, we want to control the sign up flow, this will allow us to have a more custom look and feel, we can also ask if user's want to sign up to the newsletter at the same time.

Alternatives listed on the modal npm package
https://www.npmjs.com/package/netlify-identity-widget#list-of-alternatives

netlify docs
https://docs.netlify.com/visitor-access/identity/#enable-identity-in-the-ui

Important for SEO reasons,

Useful information about how to add analytics with the redwood router here
https://community.redwoodjs.com/t/site-analytics-for-redwoodjs/572
and here
https://community.redwoodjs.com/t/how-can-i-listen-for-router-changes/1020

Going to go with react-ga

This button:

On the partProfile page has 11 hardcoded and it clicking it doesn't do anything.

1. 11 needs to be changed to a count of the comments (should be just be Comments.length)
2. clicking the button should scroll to the comments at the bottom of the page, this can be as simple as adding an id to the comment h3, or using a fancy smooth scrolling library. I don't mind either way, but slighly prefer the first option for simplicity's sake.

File to update is web/src/components/PartProfile/PartProfile.js

<PartCard title={title} imageUrl={imageUrl} emotes={emotes} />

The part component will be used for displaying many parts on the parts page.

The component should:

• Be built with react
• Styled with Tailwind CSS
• display a maximum of 5 emotes.
• Accept 3 props with the following types:
  The component should accept three props with the following types:

{
   title: string,
   imageUrl: string,
   emotes: {
      emojii: string,
      count: number,
   }[] // basically an array of objects with an emojii and count properties
}

and example data would be:

{
   title: 'Ducky Key Caps',
   imageUrl: 'https://images.unsplash.com/photo-1595225386386-79c3543adbd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80',
   emotes: [
      {
         emojii: '❤️',
         count: 3,
      },
      {
         emojii: '😁',
         count: 2,
      },
   ]
}

Bonus points for writing tests too, but not needed.

Link to the figma design

Later the component will also take user id as a prop and used that to fetch the gravatar, but just leave a circle there for now.

Let me know if you have any questions or need help with anything.
Ticket is flexiable and we can reduce the scope if you think any part of it is beyond your skill level.

There are some bugs with the cascadeStudio integration that I know of. In order to fix them properly, I'd like to submit a PR to cascade studio in order to get it bundled but that's going to take a while. so in the meantime letting the user know of the issues and work around will help bridge the gap.

Our nav-bar should look like this:

But currently looks like this:

• Styles should be done in tailwind css (note: gradients can be like so)
• The two fonts used are Ropa Sans and Roberto (if they're not already in the project by the time you start this ticket please make sure they're configured with tailwind)

When a user isn't signed in it should look like this:

Link to the prisma design

The file that needs editing is MainLayout.js

Let me know if you have any questions or need help with anything.
Ticket is flexiable and we can reduce the scope if you think any part of it is beyond your skill level.

There are a bunch of files with "2" in the name, like User2Cell, which need to be renamed.

Currently, the title of the website is just "repo" which is the default for a Redwood app.

It's easy to fine in index.html however it set as:
<title><%= htmlWebpackPlugin.options.title %></title>
and it's not clear where the title is set for this. It should be changed to "CadHub".
If you're unable to find how to change this webpack option, the redwood docs or webpack dos should help, if not the redwood community should be able to help you, on discord or the forum.
https://community.redwoodjs.com/
https://discord.com/invite/jjSYEQd

Currently, when parts are created or edited, a string can be set to a image url, to be the main image for the part.
https://cadhub.xyz/parts/1/edit
or
https://cadhub.xyz/parts/new
This should instead be a file upload for images.
Use https://www.filestack.com
This should be a fairly straight forward task as redwood already has an excellect cookbook guide for just this.
https://redwoodjs.com/cookbook/file-uploads

Let me know of any env vars or things I need to do to the delployment environment in order for your changes to go live.

Would be awesome if we had 3d view that is interactable right in the social media preview.
Like what sketchfab.com has done, example tweet.

https://twitter.com/matthieurouif/status/1326471429202694144

I found the following documentation on twitter about "player cards"
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/player-card
I imagine once you've got it working for twitter, it should be 🤞 only a few tweaks to get it working on other platforms.

@yencolon Your welcome to it.
Look at how the LoginModal is used in web/src/components/LandingSection/LandingSection.js
import LoginModal from 'src/components/LoginModal'
It opens when the Signup button is clicked, you should pretty much be able to copy the same logic, just for the fork button when no user is signed in.
The fork button is in web/src/components/IdeToolbar/IdeToolbar.js and you should be able to use the useAuth hook for telling if the user is signed in
const { isAuthenticated } = useAuth()

Temporary measure while we don't have any kind of search. is basically to stop the website looking like it's filled with dumby data, which it looks like atm.

This button doesn't do anything, I did have it working but must have broken it. I think it probably has something todo with useAuth hook and how it's enabled.

There is no logo for the current website and we need one

There's just a circle.

If you have logo design chops feel free to pitch something. I'm not too fussy about the look of it, so long as it looks "designed" though, obviously I reserve the right to turn down attempts where no effort has been put in.

Logo needs to be placed in the nav bar, as well as the favicon.

there is a bug

This will be done after some the editing experience is polished and probably after notifications are added as well.

The profile page uses "rich-markdown-editor" for displaying and editing markdown though it needs to look like this

But currently look like this with default styles

For this issue you need to research rich-markdown-editor to find the best way to style it and to style it.
Most likely it will be the inbuilt theming
though for parts not appropiate for the theming above try and use tailwind

Design can be found here
Context of where this will go:

Currently, CadHub has a very incomplete integration with a fork of CascadeStudio.
Original: https://github.com/zalo/CascadeStudio
My fork: https://github.com/Irev-Dev/CascadeStudio

The integration is working locally, but is buggy and tends to stop working after opening a second project/part, and it doesn't work at all on the live website, So debugging this might involve a bunch of deploys to see if it's working live.
Netlify is setup to rebuild on PR, so label your PR as WIP if you are just trying to test instead of a final PR.

I'll consider this issue completed if parts successfuly load on the live website, and changing to a different part works.

The solution might be simple but will probably need someone with a reasonable amount of web-dev experience. Bonus points if you're able to get CascadeStudio related code to lazy load as at the moment I think it's slowing down initial page paint.

Because the integration is done by git submodules, pull requests will be needed for both this PR and the CascadeStudio fork, but I've labelled that with hacktoberfest as well.
It might be useful to look at the PR diff in my fork to see what I've changed to get it what's working so far.
https://github.com/Irev-Dev/cadhub
Plus one of my earlier PRs in this repo when I wan setting up cascadeStudio
https://github.com/Irev-Dev/cadhub/pull/1/files
There's a lot of unrelated stuff in the PR, though Part.js might be of use.
As well as the code I pasted from the original project directily into index.html
Some relevante stuff in HomePage.js though it has since been moved out.

Of course happy to help out as much as I can too, if I can answer any questions on the work I've done so far.

Due to an initing problem changes would get cancelled by pressing F5/regenerating the model.

The current integration is very hacky as I was aiming primarily to get something working asap, also because the original project is not bundled it make the integration difficult.

I think the best approach is to make some PR to the original project to get it bundled and then redo the integration.

Some tips would be, that the current project initialization in for initing the editor etc as well as initing the whole thing as a pwa, would be good to separate these concerns so we can skip the latter.

also the wasm file is like 7mb, and I think it's eating through my netlify cdn bandwidth. Currently it's loaded on page load. Might be best to lazy load this when a User actually trys to use the ide (I'm not sure if netlify invalidates all cached files on each build, if so that's a shame for such a big file that's not going to change much. Might be good to look into.)

Also might be good for cadhub to "own" the editor/ide, so that we can keep that consistent for future integrations but that might be cross that bridge when we get to it.

You can see the changes I have made here
zalo/CascadeStudio@master...Irev-Dev:master
But is obviously not great, plenty of things have just been commented out.

Zalo made a really good point that we can canabalize features from his work on making a gallery. One thing he pointed out, in particular, is a screen shot util he made that would be useful.

This ticket lacks detail, I'de need to do a bit of investigative work to be able to describe well how it would need to be integrated, but if anyone is particularly interested, feel free to get your hands dirty.

There are designs for the part page

I haven't given it enough thought to write up a good issue, but someone is more than welcome to have a crack at it.
Please use tailwind to style
Designs can be found here