SVG thumbnails for "Hero" category

[VaibhavSaini19]

🚀 Feature

A default thumbnail is being used currently for a code block. For the "Hero" category, SVG thubmnails that represents the code block preview in an abstract manner (like a skeleton template) would help a user to get an intuition about the template in a glance in the sidebar itself

Have you spent some time to check if this issue has been raised before?

Yes

Have you read the Contributing Guidelines?

Yes

Pitch

This would enhance the user experience by providing a quick abstract preview of the code block in the sidebar that would reduce the time required to find the desired template. The thumbnail can be designed using any designing tool like Figma, Adobe XD etc.

[GaganSingh5]

hey @VaibhavSaini19 I can do this. But as i see you have create a different issues for each block to add svg, now every dev will use its own way to implement this logic. Could this create merge conflicts?? And even different devs will use different creativity domain to create the svg this could lead to inconsistencies.

[VaibhavSaini19]

Hi @GaganSingh5

now every dev will use its own way to implement this logic. Could this create merge conflicts??

Could you elaborate on this a bit more please? Like what logic are you talking about and how it would create conflicts?

[GaganSingh5]

@VaibhavSaini19 As we are adding thumbnails inside the assets folder now everyone will use their own naming conventions and in js file where files are everyone will use their own logic to use these images. That may led to conflict I think.

[VaibhavSaini19]

@GaganSingh5 you might wanna take a look at the Contributing Guidelines of a repository when you wish to contribute to it 😀. It is clearly mentioned in the steps on how to name the thumbnail files. As far as displaying them is concerned, I have already written the code to display a temporary thumbnail for each of them dynamically for now. It just needs to be changed to use the respective thumbnail (which will have the same name as that of the code block+ _thumb.svg), for which an issue has been already created, and will be taken care of.

So you can create the thumbnails without worrying about the conflicts

[GaganSingh5]

@VaibhavSaini19 so i just need to add the svg thats it? :)

[VaibhavSaini19]

@GaganSingh5 Yes 😉

[GaganSingh5]

hey @VaibhavSaini19 created this for hero1 what do you think???

[VaibhavSaini19]

@GaganSingh5 if you want, I can assign this to you, and then you can create a PR to discuss the proposed changes. The issue section is not the right place to discuss your proposal.

[GaganSingh5]

@VaibhavSaini19 yeah sure!!

[gridhead]

@VaibhavSaini19 As we are adding thumbnails inside the assets folder now everyone will use their own naming conventions and in js file where files are everyone will use their own logic to use these images. That may led to conflict I think.

Nope. Naming alone won't lead to conflicts. (Even if it does, I think we would be able to resolve the issues)