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)