Repository navigation
Migrate ArticleComponents from nodejs.dev #5242
Description
Continuing the migration of components from nodejs.dev that we started here, we should start migrating the ArticleComponents from the nodejs.dev repository.
This issue will keep track of these components and their development progress.
The Migration of each Component
- Each Component should go under
components/Articlefolder on this repository - Each Component has its sub-folder (e.g.,
components/Article/Banner) - The folder structure should pretty much be the same (CSS components, React, and sub-components), but feel free to make changes if you see deemed
- Please add some if the Component still needs to get unit tests. At least to ensure the Component is rendering. If the Component has states/CTAs (Buttons/Triggers), please cover them too.
- The Storybook of each component should allow interaction with all possible states of the Component
- If the Component depends on Hooks, please migrate them too, with the following caveat:
- If that component only uses the Hook, move it to the same folder of the Component
- Otherwise, migrate it to the
hooksfolder of the repository.
- If the Component has a Gatsby-specific logic (e.g.
Dark Theme Switcher), if it is straightforward enough (e.g. a dark theme switcher plugin for Next.js or it is simple enough to code by ourselves, e.g. a Hook that we manage together with a React Provider) then feel free to do it.- Otherwise, if you have questions, please ask them on this Issue or your Draft PR for the Component.
List of Components to Migrate
-
Alert@araujogui -
AuthorList@shanpriyan -
BlockQuote@araujogui -
Codebox@araujogui -
DataTag@Olaleye-Blessing -
EditLink@HinataKah0
Components to avoid migration for now
Note.: If you feel adventurous and want to migrate these components, feel free, as existing logic exists within our current Website codebase. But please keep in mind these require an understanding of Nextra and the current structure of the website (such as how we generate pagination, how we generate ToC and how we generate a list of blog posts)
- Pagination @ktssr
- The Pagination Component uses metadata specific to Gatsby's pagination system. This Component should be done later, with the same design and as much of a similar codebase as possible, but using Nextra's Pagination System (or the one we created for the current blog system).
- This Component isn't a Pagination Component, and should be named as
PreviousNextLink - This Component should be placed on
components/Learn - This Component should probably have a different type definition for its Previous/Next Links instead of the current Gatsby-specific type
- TableOfContents
- The Table of Contents Component uses metadata specific to Gatsby's TOC system. This Component should be done later, with the same design and as much of a similar codebase as possible, but using Nextra's ToC System (Comes from Graymatter)
- RecentPosts
- The Recent Posts Component uses metadata specific to Gatsby. This Component should be done later, with the same design and as much of a similar codebase as possible, but using our own Blog Metadata System.
Activity
araujogui commentedon Apr 9, 2023
I'll work on
Alertcomponent!AugustinMauroy commentedon Apr 9, 2023
I would like work on code box.
And I want update it to fix:
And put select lang in strong.
ovflowd commentedon Apr 9, 2023
Sorry, @AugustinMauroy can you please finish one PR at time? Your current ShellBox PR is still in a draft state, so please finish it first before volunteering for another component. Thank you!
AugustinMauroy commentedon Apr 9, 2023
@ovflowd it's finish I await your review 😄.
shanpriyan commentedon Apr 10, 2023
I will work on
AuthorListHinataKah0 commentedon Apr 10, 2023
I would like to work on
EditLinksince my PR is waiting to be merged 😄Since I'll need
@fortawesome, do I need to submit another fast tracked PR to install it? Or can I do it in my migration PR?ovflowd commentedon Apr 11, 2023
You can do it on your PR. You can also use something different from FortAwesome, maybe that is more FOSS-friendly. We did have to use two different icon libraries on nodejs.dev, but we could simply use different icons/different library.
araujogui commentedon Apr 11, 2023
Hey, working on
BlockQuotecomponent.ovflowd commentedon Apr 11, 2023
@HinataKah0 I guess it's fine to keep using FortAwesome if all the free icons are enough.
Olaleye-Blessing commentedon Apr 14, 2023
I would like to work on
DataTagcomponent,ovflowd commentedon Apr 15, 2023
@HinataKah0 fyi I guess we're switching to
react-iconsto keep one package :)araujogui commentedon Apr 15, 2023
Hey, I would like to work on
Codeboxcomponent.ovflowd commentedon Apr 16, 2023
Just a FYI @araujogui. I personally feel that the ShellBox and CodeBox component can be merged into one. And simply have different flavours/layouts. Feel free to experiment with that.
ovflowd commentedon Apr 20, 2023
FYI: If anybody wants to volunteer for the
Pagination,TableOfContentsandRecentPostscomponents, feel free to tackle them :) (If you feel confident enough)ktssr commentedon Apr 20, 2023
@ovflowd I can pick Pagination
ovflowd commentedon Apr 20, 2023
Hey @ktssr that's great. I'd say that the Pagination Component from
Articleis more like aPreviousNextLinkComponent. Let me add instructions on the issue description.AugustinMauroy commentedon May 12, 2023
I'm working on TableOfContents.
ovflowd commentedon May 18, 2023
Hey y'all, the Author Component seems to be broken. Can anybody give a look into it? https://nodejs-org-stories-r8m4tjtra-openjs.vercel.app/?path=/story/article-authorlist-author--default
Also, @araujogui or @AugustinMauroy the Codebox component got merged but I wanted a few changes:
Now, @AugustinMauroy the Shellbox copy button doesn't show the
cursor: pointerwhen hovering it, can you fix that?AugustinMauroy commentedon May 18, 2023
Shellbox part will fix on installTabs
araujogui commentedon May 19, 2023
Sure, working on Codebox changes