EddieHubCommunity
[FEATURE] Profile playground and check page
Description
Playground page where people can add their profile json into a form and it shows them what it would look like
- validates json
- formats json
- shows main profile (bio, tags, social shortcuts)
- shows links
- shows milestones
Screenshots
No response
Additional information
No response
It's great having you contribute to this project
Welcome to the community :nerd_face:If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
@samyabrata-maji how is it going? If you are busy don't worry, we will unassigned it so others can work on it, let me know
@eddiejaoude I tried solving it. Couldn't implement it. I think its better to assign it to someone else.
Hy @eddiejaoude, I read the issue and I think I can implement this. Let me just confirm it once with you if I understood it correctly.
So basically we will have one more link in the navigation bar named as "Playground". When user will click on it, a form will appear where user can enter their profile json. Option to validate and format the json should be there in the page.
Option to preview how json will look in the website must also be there.
Correct eddie
Have done some development. Attaching screenshots. Let me know if these looks fine. Also please suggest any ui improvements.
Features added:
- Playground page
- Preview page
Playground page
Validations
Playground with all values filled
Preview page
Love the json validator with line numbers 👍
It would be good if the preview of the profile was on the same page?
Push the code to a draft pull request and we can take a look and give better suggestions
For now preview page is in seperate page.
We can do in same page. Either we can show in a modal in same page or below the form. Let me know what you think. Will make changes accordingly.
I have created a draft pull request. You can review the code and let me know if any mistakes are there.
A modal is a great idea if it is not too much work, otherwise show it below. Do what is the simplest first and we can improve more later.
Note we are using tailwindcss, and I have also bought the components package, so if you need any prebuilt components let me know and I can share the code for it https://tailwindui.com/components/application-ui/overlays/modals
Yes sure, I will show the preview in modal then.
Please share the modal code. I will check it and make changes accordingly
You can share the first modal code which is in the website link you shared.
Hy @eddiejaoude, I have added a modal for watching the preview. Attaching the screenshot. I have pushed all the changes to draft pull request #4211. Please review it and let me know any improvements or anything missing in it.
Modal screenshot
This looks great @yatharth1706 👍 . I will have a proper look tomorrow. Thank you and sorry for my slow reply
Hi @eddiejaoude, I think you can close this issue now. As my branch has been merged into master with your modifications. Let me know if anything is pending in this feature. Happy to help 😃
Hi @eddiejaoude, I think you can close this issue now. As my branch has been merged into master with your modifications. Let me know if anything is pending in this feature. Happy to help 😃
Thank you for your contribution and for pointing out it has now been completed! I will close the Issue.
