What's next for Node.js Website?

[ovflowd]

Premise (Outdated)

Much work through these last years was done on the https://github.com/nodejs/nodejs.dev repository. From drafting the new design from [this](https://www.figma.com/file/lOxAGGg5KXb6nwie7zXkz6/NJ---Design-System) Figma, to implementation of the pages, curation of what should be the content of the new website, and much more. 

These last months have been incredibly important; with fascinating work being pushed through the edge of this open-source furnace, we finally finished the main goals and features of the Website Redesign Initiative.

This allowed us to focus on migrating the Node.js Website (this very own repository) [into a modern Framework](https://github.com/nodejs/nodejs.org/issues/4958) that would also be compatible with the work we've done on the `nodejs.dev` repository. These changes were the foundational milestone allowing us to adopt the content, design and feature set from https://nodejs.dev.

But what's next? This discussion aims to highlight what the Website Team is coordinating to get done and how we want to make these changes transparent and allow the inner and outer community to contribute, As one of our core goals is to improve the Developer Experience and allow more people to be able to contribute towards the Node.js Website.

Node.js Website Redesign

A quick preamble

Hey y'all 👋 we're currently in the process of redesigning the Node.js Website. This multi-year effort has evolved from many previous efforts (for the curious ones: The Node.js Website Redesign Initiative, The nodejs.dev repository, and others).

This process has brought a lot of technical refactoring, restructuring of the Website Repository, and change of technologies used. This has been a long process, but to keep the new contributors short, most of the historical information is available on the hidden comments, and all the current relevant information is available below and on the non-hidden comments).

The Effort

The Node.js Website Redesign is the initiative of revamping the current design of the Node.js Website into the newly done Figma Design.

The process consists of 3 main steps: (Creating Components -> Creating Layouts -> Migrating Pages)

Note that Issues regarding the Website Redesign will have a website redesign label. Issues that are ready to be worked on will have a Ready status.

• Creating React Components that follow the designs and implementation specs from the Figmas.
  • Each Component is described within the Figma on the "Design System" Tab
  • Issues will be created for each Component by the Website Team Maintainers
    • Changes should not be done before these issues get created
    • Issues will describe how the Components should work and the validation process
    • Issues will describe where styles, hooks and other pieces of code should live and any other 3rd party needed information
  • Contributors and Newcomers are free to work on the implementation of these Issues
• Creating the Layouts that will be used for the Pages
  • Layouts will be done following the same process mentioned before
• Pages will be migrated from the nodejs.dev/content/ folder into pages/new folder
  • The pages/new folder is a temporary folder
  • Instructions on how to migrate each page, such as:
    • Filenaming and Extension of each file
    • What should be changed on each migrated page Markdown Frontmatter
    • Which Layout each migrated page should adopt
    • Which pages should not be migrated

Then, after this process is done and validated:

• The old pages, styles, components and layouts will be removed
• All pages under pages/new will be moved to pages/
• Other minor changes such as on pages/_app.tsx and pages/_document.tsx will be done

Most of the communication of each step will be done before we move to each step, so don't worry!

Recommended Reading Material

We recommend reading the Contributing and Collaborator Guidelines and the comments below.

---

cc @nodejs/website

[ovflowd]

ℹ️ Updates on Development

Hey everyone! 👋 I'm excited to share some updates about our upcoming website redesign. Here's what you need to know:

Design Progress 🎨

We're getting closer to finalizing the new designs! Next Monday, we'll have pre-final reviews at the Foundation. The Figma Link to the new designs is available for internal use. Remember not to share it until it's ready for public release.

Please refrain from extensive design critiques as our focus is on the technical aspects. Your feedback is valuable, but let's allow the experts to lead in design decisions.

Component Work 💻

@bmuenzenmeyer and I will soon create/update issues for component work. Some pages might not be ready immediately, like API Docs, but we can still work on components. Note that not all designs will be incorporated, so these are not final.

Design System and Icons 🎨 🔣

We're adopting Tailwind CSS as our base design system, offering consistent styles across components. Check out the Tailwind Configuration for color and font variables. Heroicons will replace React Icons.

Component Transition 🔄

Existing components will be remapped or replaced to align with the new design. This plan will be shared later this month, specifying deletions, updates, and new additions. We're discarding previous styles from nodejs.dev.

Styling Components 💅

Refer to the Figma Design System for component styles. You can often copy CSS directly. Minimize duplicated styles to maintain consistency.

Code Editors ⌨️

We're switching from PrismJS to Shiki with Rehype Pretty Code. Shiki is used by VS Code. Themes for GitHub Light and Nord will be integrated.

API Docs 📋

• API Docs are separate and not part of the initial development.
• Some component designs are finalized and can be implemented.
• The overall layout of the API Docs will change.
• The goal is to have a self-hosted API Docs application on nodejs/node.
• API Components from nodejs/nodejs.org will be reused in the API Docs codebase.

Other Updates ℹ️

• We're adopting Vercel OG Image Generation for blog images.
• Unnecessary packages like PrismJS and React Icons will be removed.
• Collaborator Guides and README will be updated.

Development Progress 🚧

• As Figma designs approach finalization, development on new components is getting closer.
• You can start working on tasks like Tailwind setup and more.
• Component designs are mostly locked in, allowing us to begin implementing a few components.

Let's work together to bring these exciting changes to life! 🚀

[ovflowd]

• The New Designs (Figma) are available here: https://www.figma.com/file/pu1vZPqNIM7BePd6W8APA5/Node.js
• The full content of this update is available through Slack: https://openjs-foundation.slack.com/archives/CVAMEJ4UV/p1691420914457079
  • The version above is a summary generated by ChatGPT.

[terlan4]

@ovflowd , when are you planning to release the new version?

[ovflowd]

What do you mean by that?

[terlan4]

@ovflowd , I mean seeing nodejs.org website as on those Figma designs. I wonder how long it would take?

[ovflowd]

I do not think I can evaluate the amount of time that this will take to reach completion. This is an open source project, not a product. It will solely depend on the free will and time of the contributors.

Being reasonable this will definitely take months.

[ovflowd]

ℹ️ Updates on Development

The current Figma designs were updated to a semi-final version. All the Components on the Component Design Syetem are pretty much final and can be worked on.

We're now validating the structure and layouts of the Website Redesign with the Node.js TSC (Technical Steering Committee)

And we're creating issues pertinent to the Development of the new Website. You can already stay tuned on the Issues tab of this Repository to follow-up all the needed work :)

[bmuenzenmeyer]

Someone asked how to validate values across Figma and the finished code. I wanted to present a brief guide here, and would not be surprised if someone showed me a better way then 😄

How to verify changes with Figma

1 Find the thing you are building

In this case, I care about the color swatches. I found them on the Design System Page

If I click on the whole component, I might get a grouping, which doesn't show me any CSS property values.

example of a single click grouping

2 Double-click on the item

Select a single component by double clicking.

Doing this will also reveal values on the right hand, properties tab

3 Find the value you are looking for

Green 400? Ah, there is it. #84BA64

4 Dev Mode?

You might have also noticed something called Dev Mode on the FIgma or those screenshots. Turn it on and off with this toggle.

This gets more interesting when you look at a CSS component that is intended for direct usage on the screen, unlike the swatch.

Let's look at some Text Styles

Or a button

[ovflowd]

ℹ️ Updates on Development

Here are more updates on what's going on with the Node.js Website Redesign:

• We finished the migration to Next.js's App Router. This allows us to use the greatest and latest features of Next.js and brings numerous improvements on bundling, bootstrap, separation of client-side/server-side (reduce of bundle-sizes, what is rendered on the server and what on the client, etc.)
• Continued improvements of the legacy Website (removal of the legacyMain.js file, adoption of Shikiji as a syntax highlighter, other minor styles, and bug fixes while we're working on the redesign
• We're nearing the end of the First Phase of the Website Redesign, which is the actual development of the React Components. Very few remaining now. (I believe 2-3 issues still need to be created for the 2-3 remaining components, but after that, we can start working on the layouts)
• We've adopted a new Internationalization System (next-intl) and are working closely with the maintainers of next-intl and providing them feedback (so we can enable Turbopack and other neat features)
  • next-intl has great integration with Next.js but can also run standalone (without Next.js)
• We've adopted Sentry for reporting Exceptions and Monitoring our Application, and we're working closely with the Sentry team to bring optimal configuration to our setup. Right now we're trying to tweak a few performance and bundling optimisations for Sentry

We are super excited with the direction of the work and even more as we're nearing the next step of the Website Redesign with implementing the Layouts on Storybook.

What would be the remaining steps?

• Create the Layouts and use them on Storybook with "demo" of how each page would look like
• Create a branch with adoption of the new Layouts over the pages
  • This might require some extra logic to be implemented and maybe a few hooks here and there for the optimal coverage of this
• Deploy Live the new Layouts (Website Redesign)
• Remove the old Layouts, old styles and remnant codebase of the Legacy Website

[ValeriiRuchko]

Can you please tell when the new design of the site will be shipped to the audience? 👉👈

[ovflowd]

No. Because there's no date.

[ovflowd]

But I'd recommend you keep a tab on the PRs we're opening :) it will become a bit obvious when we're closer to the finish line. Also I'll be updating this thread once we have more updates!

[ValeriiRuchko]

Thank you for your answer and I wish you good luck :D

[ovflowd]

ℹ️ Updates on Development

Hey y'all 👋 it's been a while since I've posted updates here! So I wanted to come up with shiny updates!

Component Development is complete

The development of all essential Components needed for the Node.js Website Redesign is complete. From now on, only development of React Components specific to certain Layouts will be done; And these will be done within the Pull Requests for each Layout.

We're implementing the Website Redesign Layouts

For a while already, the Node.js Team has been implementing the Website Redesign Layouts within the core of the Node.js Website. Remember that these layouts are behind a feature flag, and won't be visible until explicitly requested. You can run locally the Node.js Website with the new Layouts enabled with npm run serve:redesign

What is the state of development of Layouts?

• Base Layout (Base Styling)
  • This is a transitive/wrapper layout, and not directly used by pages
• Article Layout (Article-specific Styling)
  • This is a transitive/wrapper layout, and not directly used by pages
  • Used by Learn and About Layouts
• Centered Layout (Pages with Centered Content)
  • Used by Home Layout and Error/NotFound Pages
• Blog Layout (For Blog Index and Category Pages)
• Post Layout (For Blog Posts and Posts in general)
• Learn Layout (For Learn Pages)
• Docs Layout (For Deprecated Node.js Guides)
• Content Layout
  • This is a transitive/wrapper layout, and not directly used by pages
  • Used by Docs and Post Layouts
• About Layout (For About and Get Involved Pages)
• Home Layout (For the Home Page)
• Default Layout (For any other Page)
• Download Layout (For Download Pages)

What's next and remaining in order to get the Website Redesign released?

The following tasks still need to be done before we are able to release the Node.js Website with the Redesign:

• Finish the missing Layouts
• Migrate deprecated Node.js Guides to Learn Pages
• Remove deprecated content
• Enable the Website Redesign with a feature flag to test traffic and look for Errors
• Remove legacy Website Pages, Content, functions, styles and codebase
• Remove Website Redesign Feature Flag
• Remove Legacy Website i18n keys
• Enable Node.js Website on Crowdin so that translations can start to happen again

---

Thank you all for following the Node.js Website redesign updates!

[ovflowd]

It's funny how quickly a discussion might need to be updated! One month passed, and we've finished the Downloads Layouts. We're working on the bug fixes and UI improvements! We're live on https://beta-node-js-org.vercel.app and getting things ready to release to production ✨

[nazarepiedady]

@ovflowd, you and the team are doing an excellent, I can not wait 🤤 to start to translate the content and help to build the website (right after I polish my React and Next.js knowledge 😅).

[Igorgro]

Website is down now, returning 404

[AugustinMauroy]

Website is down now, returning 404

Which link is death ?

[ovflowd]

This links doesn't matter anymore as we concluded the redesign. You can simply access https://nodejs.org