Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Shadcn/Tailwind migration #13946

Closed
pettinarip opened this issue Sep 24, 2024 · 90 comments · Fixed by #14597
Closed

Shadcn/Tailwind migration #13946

pettinarip opened this issue Sep 24, 2024 · 90 comments · Fixed by #14597
Assignees
@pettinarip
Labels
epic 💪 This issue is an epic on our product roadmap good first issue Good item to try if you're new to contributing hacktoberfest Track hacktoberfest activity hacktoberfest-beginner GFI for hacktoberfest participants help wanted Extra attention is needed or someone is needed to help

Comments

@pettinarip
Copy link
Member

pettinarip commented Sep 24, 2024 •
edited
Loading

Description

As part of our Q3 roadmap, this issue tracks the progress of the Shadcn/Tailwind migration.

How to contribute

If you’d like to help with the component migration, please follow these steps:

  1. Read the following “Tips & Guidance” section for basic things to keep in mind while doing the migration.
  2. Leave a comment here asking which component you would like to work out.
  3. We assign you to the file by adding your handle next to the file name in the list.
    • If you were assigned to multiple files then create a separate PR for each component. It will make the testing and review process much simpler and more organized.
  4. Once you finish it (PR merged), we’ll mark it as done.
  5. Repeat!

Tips & Guidance

  • Migrate only the components defined in the component file.
  • Replace all Chakra imports (unless there is an exception mentioned in this file) with native tags or shadcn components installed in components/ui
    • @chakra-ui/react/Icon ⇒ just use the exported svg component from react-icons instead <MdMenu className="text-2xl" />
  • Replace other imports
    • OldText ⇒ use the native <p> tag
    • OldHeading ⇒ use native <h1>, <h2>, etc. tags
    • Link ⇒ use the Link component defined in components/ui/Link
    • Buttons ⇒ use the buttons defined in components/ui/buttons/Button
    • images ⇒ use TwImage from components/Image
    • Chakra Badge => new Tag component in /ui folder
  • For layout and general component structure
    • Use the components in components/ui/flex as much as possible
  • Colors
    • Define missing colors in the tailwind.config.ts file. At the review stage, we will analyze & try to replace old theme colors with new colors from the Design System.

Done

List
@pettinarip pettinarip self-assigned this Sep 24, 2024
@github-actions github-actions bot added the needs triage 📥 This issue needs triaged before being worked on label Sep 24, 2024
@pettinarip pettinarip added epic 💪 This issue is an epic on our product roadmap and removed needs triage 📥 This issue needs triaged before being worked on labels Sep 24, 2024
@TylerAPfledderer
Copy link
Contributor

@pettinarip I'm currently handling all of the Quiz components

@pettinarip
Copy link
Member Author

@TylerAPfledderer gotcha! added your name next to them, ty.

@saurabhburade
Copy link
Contributor

@pettinarip Please assign me the Banners/ContributorsQuizBanner.tsx component.

@pettinarip
Copy link
Member Author

Assigned @saurabhburade 👍🏼

@minimalsm minimalsm added help wanted Extra attention is needed or someone is needed to help good first issue Good item to try if you're new to contributing labels Sep 25, 2024
This was referenced Sep 25, 2024
Merged
Merged
Merged
Merged
Merged
Merged
@Baystef
Copy link
Contributor

Baystef commented Sep 27, 2024

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

@pettinarip
Copy link
Member Author

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

Yey! awesome, assigned! let me know if you need any clarification or help 💪🏼

@Baystef
Copy link
Contributor

Baystef commented Sep 27, 2024 •
edited
Loading

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

Yey! awesome, assigned! let me know if you need any clarification or help 💪🏼

TwImage is not working with remote URLs , getting this error cos its using next/image under the hood Error: Invalid src prop (https://avatars2.githubusercontent.com/u/364566?v=4) on next/image, hostname "avatars2.githubusercontent.com" is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

should I add avatars2.githubusercontent.com to next.config.js or use the bare img element, this also shows a warning Using could result in slower LCP and higher bandwidth. Consider usingfromnext/image to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element but it works
@pettinarip

@pettinarip
Copy link
Member Author

Right @Baystef lets use the img tag for now. You can leave the warning.

Baystef added a commit to Baystef/ethereum-org-website that referenced this issue Sep 27, 2024
@Baystef
refactor(shadcn migration): migrate contributors component to shadcn/…
14dd4c9 
…tailwind [ethereum#13946]
@Baystef Baystef mentioned this issue Sep 27, 2024
Merged
This was referenced Sep 27, 2024
Merged
Merged
@corwintines corwintines added the hacktoberfest Track hacktoberfest activity label Sep 30, 2024
@isabelladebrito isabelladebrito pinned this issue Sep 30, 2024
@saurabhburade saurabhburade mentioned this issue Oct 1, 2024
Merged
@yashtotla
Copy link
Contributor

Hi @pettinarip can you assign the ProductCard.tsx migration to me? Thanks!

@kushagrasarathe
Copy link
Contributor

hey @pettinarip could you please assign ExpandableCard.tsx's migration to me. Thanks

@pettinarip
Copy link
Member Author

@yashtotla @kushagrasarathe thanks for helping! assigned, thanks

@TylerAPfledderer TylerAPfledderer mentioned this issue Jan 27, 2025
Merged
@ashiskumar-1999 ashiskumar-1999 mentioned this issue Jan 28, 2025
Merged
This was referenced Jan 29, 2025
Merged
Merged
Merged
@pettinarip
Copy link
Member Author

Amazing @JoeChenJ thanks for the hard work. I unassigned myself from the slug page in case you are interested.

@pettinarip
Copy link
Member Author

FYI I've updated the assignments the components since we didn't get a PR.

@JoeChenJ
Copy link
Contributor

Thank you @pettinarip ! I wanna work on:

  • BoxGrid.tsx
  • CardList.tsx
  • InfoBanner.tsx
  • Leaderboard.tsx
  • Roadmap/RoadmapActionCard/index.tsx

@JoeChenJ JoeChenJ mentioned this issue Jan 31, 2025
Merged
@JoeChenJ
Copy link
Contributor

Hey @pettinarip , looks like there's already a PR merged for CardList.tsx. Please remove it from the Pending section

@pettinarip
Copy link
Member Author

@JoeChenJ ah! good catch! sorry my bad. Updating...

This was referenced Feb 1, 2025
Merged
Merged
Merged
@JoeChenJ
Copy link
Contributor

JoeChenJ commented Feb 2, 2025

Hey @pettinarip , I would like to handle CallToContribute/index.tsx and IssuesList.tsx .

Looks like Callout.tsx, get-eth.tsx, what-is-ethereum.tsx, [...slug].tsx are not using any Chakra imports. And I can't find the file Layer2/Layer2Onboard.tsx.

@JoeChenJ JoeChenJ mentioned this issue Feb 2, 2025
Merged
@TylerAPfledderer TylerAPfledderer mentioned this issue Feb 3, 2025
Merged
@JoeChenJ JoeChenJ mentioned this issue Feb 3, 2025
Merged
@pettinarip
Copy link
Member Author

@JoeChenJ thanks! assigned those two.

I've updated the list and removed the already migrated ones. Regarding the Layer2/Layer2Onboard.tsx it was recently part of a refactor where we removed it. Thanks for calling this out.

Baystef added a commit to Baystef/ethereum-org-website that referenced this issue Feb 3, 2025
@Baystef
refactor(dapps): migrate dapps page to tailwind/shadcn [ethereum#13946]
9b9cf43
@Baystef Baystef mentioned this issue Feb 3, 2025
Merged
@pettinarip pettinarip mentioned this issue Feb 5, 2025
Merged
Baystef added a commit to Baystef/ethereum-org-website that referenced this issue Feb 7, 2025
@Baystef
feat(gas): migrate gas page to tailwind/shadcn [ethereum#13946]
0b687b9
@Baystef Baystef mentioned this issue Feb 7, 2025
Merged
@ashiskumar-1999 ashiskumar-1999 mentioned this issue Feb 8, 2025
Merged
This was referenced Feb 13, 2025
Merged
Merged
@pettinarip
Copy link
Member Author

Aaaaand its donee!!! 🚀 🚀 🚀

Thanks to all who has participated and contributed to this effort.

@pettinarip pettinarip unpinned this issue Feb 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@pettinarip pettinarip

Labels
epic 💪 This issue is an epic on our product roadmap good first issue Good item to try if you're new to contributing hacktoberfest Track hacktoberfest activity hacktoberfest-beginner GFI for hacktoberfest participants help wanted Extra attention is needed or someone is needed to help
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: Migrate StakingComparison to Shadcn/Tailwind. ashiskumar-1999/ethereum-org-website