Create MetaBar Component

[bmuenzenmeyer]

Create a MetaBar component using the new figma design (direct link to).

This component is a sidebar that will display on most content/markdown pages. It displays metadata about the content

Read more about the Node.js Website redesign

---

Before You Start...

• Use the Contributor's Guide to learn how to setup your environment, run available commands, and construct proper commits.
• Review the technologies used when building the site, and why they were chosen.
• Review the component creation guide to follow our standards.
• ❗ Review the translation guide, especially how to add new keys.

---

Details

❓ Not sure where to start breaking down the figma? Read this short guide
🌐 This story requires some internationalization support. Slow down!

• Create a new directory called MetaBar within the Common directory that contains all the new code.
• Use the new AvatarGroup component introduced within feat(avatarGroup): introduce #5916
• The @heroicons/react module has the icon code-bracket available for use.
• The static file social-github.svg should be used for the Edit this page icon

Suggested Props

Only display these values on the Metabar if provided

Name	type	comments	label
lastUpdate	Date	format per Figma	Last Updated (internationalized as components.metabar.lastUpdated)
readingTime	string		Reading Time (internationalized as components.metabar.readingTime)
addedInVersion	string		Added In (internationalized as components.metabar.addedIn)
author	string		Author (internationalized as components.metabar.author)
authors	Object[]	Object array capable of rendering AvatarGroup	Authors (internationalized as components.metabar.authors)
sourceURL	string or typeof Next Link		Contribute (internationalized as components.metabar.contribute)
viewAsURL	string or typeof Next Link	Render the code-bracket link if the viewAsURL is provided	View as (internationalized as components.metabar.viewAs)
toc	object[]	Nested list of links that could mimic a markdown heading hierarchy. See below commentary.	Table of Contents (internationalized as components.metabar.tableOfContents)

Storybook

Add a storybook story file components/Common/MetaBar/index.stories.tsx which exercises each of the component's states.

There are 2 states to capture within styles and stories:

• Light Mode
• Dark Mode

Open and Future Questions

the toc prop needs to be supplied by static or dynamic analysis of the content it is rendering. I have seen this work a couple ways, but suggest it's out of scope for this simple story and want to omit it. A future layout or provider needs to supply this data.

For this initial work, let's make a best effort to render a nested hierarchy of headings as an unordered list.

[bmuenzenmeyer]

@ovflowd would love an opinion on the toc prop - i think it's out of scope for this simple component, but makes for harder work in the future

[ovflowd]

@ovflowd would love an opinion on the toc prop - i think it's out of scope for this simple component, but makes for harder work in the future

Shouldn't we start with the ToC component first?

[ovflowd]

But to answer your question, afaik the ToC comes directly from Remark, there's already a defined data structure, defined here: https://github.com/nodejs/nodejs.org/blob/main/types/dynamic.ts#L8

This is the type of the ToC that is automatically inferred from Markdown files and available here https://github.com/nodejs/nodejs.org/blob/main/theme.tsx#L15

So I assume that's what the toc prop should accept? And I think we should call it "headings" instead of ToC just for consistency between files.

[adeyinkaezra123]

Hello, I'd love to pick this up

[bmuenzenmeyer]

Shouldn't we start with the ToC component first?

We can break it out into a separate component, sure