Repository navigation
x/pkgsite: redesign - the documentation section #41587
Description
We'll be redesigning pkg.go.dev based on feedback received over the last year. This is the second in a series of issues about plans for the pkgsite/design-2020 milestone. Comment below with any feedback or suggestions related to this issue!
Overview
The documentation section of the pkg.go.dev/<path> page will have the following changes:
- Documentation index section will be added back
- Top level heading for each section will always be present
- New features for copying and viewing source code
Design
Here's a preview of what the documentation section will look like:
Note: The images shown in this issue are mocks, so the data may not accurately represent the exact contents of a given package.
Documentation Index
Based on feedback that we've received, we understand that users find viewing the full package API useful, so the documentation index will be added back.
At the same time, we’ve heard that having a sidenav is useful for navigating the documentation, especially when the documentation is very long. We plan to keep this feature as well. In the new design, the function and type sections will be closed by default, since having everything expanded can be overwhelming. When a user clicks on a function or type from the index, that section will auto-expand.
Empty Sections
We want to create a consistent structure across different packages in the documentation section. Therefore, when a section in the documentation is empty, we will still display the section header (for example, "Variables"), along with a message indicating it is empty ("There are no variables in this pacakge."):
We believe that doing so allows users to become familiar with the structure of this section over time. More importantly, UX research has shown that consistent documentation is important for accessibility. For screen reader users, having a consistent documentation structure allows them to predict the page structure. This means, for instance, if they know “Variables” is the fourth header, and they’re looking for variables, they can bounce to the fourth header without listening to each of the first three.
New Features
Copy
Next to each code block, we will be adding a copy button, so that users can easily copy and paste the code in that block.
View Source Code
We also want to make jumping to the source identifier a more discoverable feature. To do so, if a block of code corresponds to a function, type or method, we will also include a source code widget. Clicking on that link will take users to the source code.
Related Issues
- x/pkgsite: LHS navigation panel is "lossy" #40612: LHS navigation panel is "lossy"
- x/pkgsite: landing page for docs provides no structural information at a glance. #40715: landing page for docs provides no structural information at a glance
- x/pkgsite: auto-expand left sidebar #40577: auto-expand left sidebar
- x/pkgsite: malformed function signature on LHS index #41486: malformed function signature on LHS index
- x/pkgsite: confusing scrolling (and header scrolls off the top) #40773: confusing scrolling (and header scrolls off the top)
Activity
[-]x/pkgsite: <this issue is a placeholder for a future issue> [/-][+]x/pkgsite: redesign - the documentation section[/+]tooolbox commentedon Sep 24, 2020
Thanks for posting, @julieqiu, my 2 cents:
Great!! 🎉
This sounds good and the mock GIF looks good as well. Initial reaction is that it's cool that the README is in the sidebar as well, and I feel like the header (with package version, refresh date, license, etc.) seems improved.
I think this is a great idea.
Sounds neat; not major, but neat.
Sounds good; it would be cool to have an example as well. Linking into appropriate source locations is a very useful aspect of the docs, so expanding this is capability sounds like a move in the right direction, although it could perhaps be overdone with links in every nook and cranny.
Thanks again!
julieqiu commentedon Sep 24, 2020
Thanks @tooolbox! That's great to hear :)
Clicking on
<>in screenshot underNew Featureswould take you to the source code. On hover, both<>and copy icon will display a tooltip that provides context on what that icon does.Delta456 commentedon Oct 3, 2020
The redesign looks amazing! Can we also show how many downloads or
go gets were there for the module as NPM, PIP etc also show it? I most of the time have to see git clones.PS: I didn't want to open a separate issue for this.
julieqiu commentedon Oct 6, 2020
@Delta456, glad to hear! If you don't mind, could you please raise a separate issue for this? While the feature you suggest sounds interesting, it doesn't fit under the umbrella of this design issue.
julieqiu commentedon Oct 28, 2020
A preview of the redesign is now available on beta.pkg.go.dev! Give it a try, and please file an issue for any bugs.
See #41585 (comment) also for instructions on how to run the beta site locally.
julieqiu commentedon Nov 10, 2020
This is now live on pkg.go.dev! See #41585 (comment) for details.