Repository navigation
Write React Components #10
Description
Activity
I can help you with that
Update on that:
-
nodejs/nodejs.orgas a monorepo - i18n package
- UI package
Once we've created the UI package, we can open an output suite to create the components.
Reacted by flakey5-
CodeBox(Done)Implementation to match: nodejs.org CodeBox
CodeTabs(Done)Implementation to match: nodejs.org CodeTabs
DataTag(Done)
ChangeHistory(In Review)Version history selector similar to
@node-core/ui-components/Common/Selectfor displaying API changes across versions.Props:
changes: Array of change objects with structure:{ versions: string[], // e.g., ["v18.0.0", "v19.1.0", "v20.0.0"] label: string, // e.g., "Added in", "Deprecated in", "Removed in" url?: string // Optional link to changelog/release notes }
Example:
<ChangeHistory changes={[ { versions: ["v16.0.0"], label: "Added in ...", url: "https://github.com/nodejs/node/pr/url" }, { versions: ["v18.0.0", "v18.1.0"], label: "Modified in ..." }, { versions: ["v20.0.0"], label: "Deprecated in ...", url: "https://github.com/nodejs/node/pr/url" } ]} />
Design
SideBar(Done)Navigation sidebar for documentation pages, similar to
@node-core/ui-components/Container/SideBar.Props:
versions: Array of available documentation versions (e.g.,["v18.0.0", "v20.0.0", "v21.0.0"])currentVersion: Currently selected version (e.g.,"v20.1.0")currentPage: Current page identifier for highlighting (e.g.,"async_context.html")docPages: Array of documentation page objects:{ title: string, // e.g., "Globals" headings: Array<[string, string]>, // [title, hash] pairs doc: string // filename, e.g., "globals.html" }
Example:
<SideBar versions={["v18.19.0", "v20.11.0", "v21.6.0"]} currentVersion="v20.11.0" currentPage="async_context.html" docPages={[ { title: "Async Context", headings: [ ["asyncLocalStorage", "#async-local-storage"], ["AsyncResource", "#async-resource"] ], doc: "async_context.html" }, { title: "Buffer", headings: [ ["Buffer.alloc()", "#buffer-alloc"], ["Buffer.from()", "#buffer-from"] ], doc: "buffer.html" } ]} />
Design
MetaBar(Done)Wrapper of
@node-core/ui-components/Containers/MetaBar.Props:
headings: Array of heading objects for table of contents:{ depth: number, value: string } // e.g., { depth: 2, value: "API Reference" }
addedIn: Version when documentation/module was added (e.g.,"v0.10.0")readingTime: Estimated reading time (e.g.,"9 min read")viewAs: Array of alternative view formats:[string, string][] // [Type, URL] pairs, e.g., [["JSON", "globals.json"]]
editThisPage: GitHub URL for editing the current page
Example:
<MetaBar headings={[ { depth: 1, value: "File System" }, { depth: 2, value: "fs.readFile()" }, { depth: 2, value: "fs.writeFile()" }, { depth: 3, value: "Options" } ]} addedIn="v0.10.0" readingTime="12 min read" viewAs={[ ["JSON", "fs.json"], ["Raw", "fs.md"] ]} editThisPage="https://github.com/nodejs/node/edit/main/doc/api/fs.md" />
Prop-less Wrapper Components
NavBar: Wrapper of@node-core/ui-components/Containers/NavBar(Done)
- changed the title
[-]Start writing React components from Figma Designs[/-][+]Write React Components[/+]on May 27, 2025 For
CodeBoxandCodeTabsmake them living in@node-core/ui-componentFor
CodeBoxandCodeTabsmake them living in@node-core/ui-componentWe already have base implementations there. The ones here should simply be a wrapper around those matching the wrappers we use on the website. (For example, adding the copy/paste functionality).
The other components, however, should like in
ui-components, so they can be tested with Storybook.Reacted by Augustin MauroyGood stuff! Thanks for documenting this!
Reacted by Augustin Mauroy- linked a pull request that will close this issuefeat(web): add web generator #285
on Jun 6, 2025 All react components have been written (one still needs to land in ui components). this'll close once they are all merged into this repository in the linked PR.
I've self assigned to discourage users from taking on this issue, since it's all but completed.
Reacted by Augustin Mauroy and Claudio Wunder- moved this from Todo to Done in Node.js API Documentation Tooling
on Jun 17, 2025
This is the issue that requires
nodejs/nodejs.orgto be already as a monorepo or have a way that we can import the React Components created from there;We would also need to add the API Docs-specific Components to this repository within the
mdx-reactgenerator folder. Layouts (header, footer, navigation) must probably exist within thereact-webgenerator (?).. I assume that a good chunk can be reused from the Node.js Website ones.The Figma design is available here: https://www.figma.com/design/pu1vZPqNIM7BePd6W8APA5/Node.js?node-id=422-7923