Migrate Header and Footer Components

[ovflowd]

Continuing the migration of components from nodejs.dev that we started here, we want to migrate the Header and Footer Components.

This issue will keep track of these components and their development progress.

The Migration of each Component

• Each Component should go under components folder on this repository
• Each Component has its sub-folder (e.g., components/NewHeader)
• 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 hooks folder 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

• Footer
  • This Component should be named NewFooter @AugustinMauroy
• Header
  • This Component should be named NewHeader @u-rogel

[AugustinMauroy]

I'm taking this issue . (if it's ok)

[ovflowd]

Can you choose one component? (As we want to have one per time)

[AugustinMauroy]

i prefer footer

[AugustinMauroy]

About footer I just have to migrate code or I have to implement-it ?

[u-rogel]

I will look into the Header component

[ovflowd]

@AugustinMauroy, you should migrate not reimplement it, if possible :) (We want to have the same design and feature-set, as otherwise it could take more time to get an approval)

[AugustinMauroy]

So I just create the component and create the stories

[u-rogel]

@ovflowd hi, I started to work on converting <Header /> to the new codebase but came across compiling issue. Also when switching back to the major/website-redesign branch, runnning again npm ci then npm run serve I get issues.
Have you seen this error before?

[AugustinMauroy]

It's common error with nextjs and NODE_ENV.
Personally it appears randomly.

[ovflowd]

hi, I started to work on converting

to the new codebase but came across compiling issue. Also when switching back to the major/website-redesign branch, runnning again npm ci then npm run serve I get issues.
Have you seen this error before?

This sounds a Next.js cache issue. I'd delete the .next and node_modules/.cache folders :)

[u-rogel]

This sounds a Next.js cache issue. I'd delete the .next and node_modules/.cache folders :)

@ovflowd Did so and still getting it. Can you think of any other command expect to npm ci & npm run serve I need to run in order to get it up and running?

[ovflowd]

I honestly don't know why you're facing this. I will investigate 😅

What Node.js version you're using and which OS? Will try to replicate this issue.

[u-rogel]

Using macOS 13.0.1
Node v18.16.0

[ovflowd]

@u-rogel I've spotted a weird misconfiguration on package.json, and fixed it :) (It was related to NODE_ENV)

[u-rogel]

@ovflowd any idea how to fix it or will you push a fix to it?

[ovflowd]

@u-rogel I pushed a fix already to the major/website-redesign branch :)

[u-rogel]

Cool, now it works!

[ashutosh887]

@ovflowd I would like to take either of header/footer

[ovflowd]

Hey there 👋 as shown above these two also got worked on already (checkboxes marked), another issue I forgot to close 🙈😅

But thanks for the interest! I'm actually going to open a few more issue that need work 👀 haven't had time yet 🫠