reactjs / reactjs/react.dev

Explore adding top-level "API" link to header nav

Open
#171 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

difficulty: medium discussion type: documentation type: website
Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

This discussion thread on Twitter provided feedback that the reference section of the docs may not be very discoverable due to the new website's accordion sidebar.

@gaearon proposed we could do something similar to what Jest does and add an "API" link to the header that directly opens the first page of the reference section (eg React Top-Level API).

Unfortunately this is a little more complicated than it would seem at a glance because of:

Unfortunately we can't rely on anything dynamic (like markdown frontmatter tags) to help with the "active" link styling because the header and footer are part of the "static" Gatsby layout. (Technically we could move them into the templates but this doesn't seem ideal.)

We could move reference docs into a new folder (eg "content/api") give them a unique URL prefix (eg "/api") but we'd need to leave backwards-compatible redirects (eg redirect_from like here) in place so that no bookmarked links were broken. This would also require separating "Docs" and "API" sidebar structure.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/components/LayoutHeader/Header.js and the content/docs structure, then review how the current active header link is determined. Compare the proposed /api move, redirects such as redirect_from, and separate sidebar structure. Done would mean an API header link that opens the reference section without breaking existing links or active navigation styling.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation, frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.