Add Contextual Help & Tooltips

[ShaanCoding]

Feature Details

To look more into later & refine

Provide contextual help & tooltips to guide the user on the ReadME creation process
I.e. userfield would have a tooltip, saying (Please enter your github username)

[MathPow]

Hi Shaan. I could do something about it. I did something similar in my other project. If you could give me more details about what is the perfect user walkthrough, it would be awesome. Do you have an example that you found online about a design for contextual help? Maybe something like this would help users know where to go and what to do on there first visite.

OR

I will do it in my free time, so it could take some days.

[ShaanCoding]

Hey @MathPow thanks again for wanting to pick this work up! It would save me a lot of time as there's a lot of features / tickets I've got to work through 😆

In regards to this one, it was just a suggestion I've been given from user-feedback. This one isn't an onboarding flow but is instead tooltip / contextual help described in detail below:

Though at the current moment for this feature, I was thinking more of the following functionality:

With a info icon, like the one below

Explaining the use-case of the variable i.e. Logo URL would have a info icon with the description: "Logo URL specifies the image the project logo should take and render, can use relative paths from the repository this will be in or a direct URL" for example

[ShaanCoding]

FYI this would involve extending our schema to have a description type, regenerating our frontend types to support this and then creating the tooltip icon to render it. This project uses shacn/ui and they already have a tooltip icon, so this functionality should be fairly small / easy to implement (fingers crossed).

Have a look at the following for help in implementation: https://ui.shadcn.com/docs/components/tooltip & for icons we use lucide-react https://lucide.dev/guide/packages/lucide-react

In regards to onboarding flow, I like the idea - Though I'm not sure how disruptive this would be to the user as I feel like it adds another pain point / modal they have to hide before using it. I'll think about rescoping your suggestion into another ticket

In theory this should be a really easy ticket to add, just the responsiveness may be a pain

[MathPow]

Thank you for the details. I see what to do now. It will be a pretty easy task and I already know how to use Shadcn. I will look into the library for the icons.

Do you want me to generate the descriptions or you will give me a list?

Is there a other task after this one that would help you a lot?

[MathPow]

Where did you found the form with "Logo URL" and all that?

[ShaanCoding]

This text is available in the "Project Header" block on Othneil Drew's ReadME available here: https://www.makeread.me/generator/othneildrew-best-readme-template

This is just an example, all inputs and blocks should have this tooltip as an additional extra.

[MathPow]

Found it! :)

Do you want me to generate the descriptions or you will give me a list?

Is there a other task after this one that would help you a lot?

[ShaanCoding]

Feel free to add a description / do whatever you think is easiest.

I'm looking to redo these templates in the near future to remove some of the bugginess / inconsistencies as I've added a few more data types since creating the first template.

After this ticket, depending on how much time you have, feel free to pick up one of the following:

• Add Filtering / Searching for Codeblocks #49 -> The designs here don't exist, but we want to add a filter option (a multi-select) and a search bar (an input), and have these automatically query using react-query, a useDebounce (to minimise API calls) on every specific template page....
  • This is to make it easier to find blocks like 'License' without having to scroll down to the bottom block, if we know what we're looking for, to improve the user experience
• Radio buttons #36 -> This one I've partly started, I can give you the branch this afternoon. This just requires the factory with shadcn/ui to work correctly to allow values to be saved
• Allow Users To Drag 'Blocks' #50 -> I'd recommend looking into https://www.npmjs.com/package/react-beautiful-dnd for the library to implement this
  • I've also got to raise this as a bug, but if you show a 'hidden' template and then change the order, the template becomes hidden and a new template with the old index shows instead... if that makes sense -> I'll make a bug report with more details soon
• Uplift React Markdown #53
  • This ones kind of vague, but the markdown rendering is still a bit buggy / badly styled, this ones pretty vague so it might be best for me to pick up

Also if you have any feature ideas / requests, feel free to add them and we can prioritse these together