all: add initial side navigation UI experiment

This change implements the beginnings of a sticky navigation
component on documentation pages.

It is only implemented for wide (desktop) viewports and has no
JavaScript to show selection while scrolling. That will come
in later changes as the hierarchy gets fleshed out.

This also slightly adjusts the amount of space given between
the site header and an element scrolled into view by an anchor.

Updates b/148095016

Change-Id: Id213f1dcb7a2600d5c64bf955c79e0bbc55581db
Reviewed-on: https://team-review.git.corp.google.com/c/golang/discovery/+/745552
Reviewed-by: Alexander Rakoczy <rakoczy@google.com>
CI-Result: Cloud Build <devtools-proctor-result-processor@system.gserviceaccount.com>

.prettierrc.yaml

@@ -1,2 +1,3 @@
 arrowParens: avoid
 singleQuote: true
+printWidth: 100

content/static/css/sidenav.css

@@ -0,0 +1,125 @@
+/*
+ * Copyright 2020 The Go Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+/*
+ * Styling for when the “sidenav” experiment is active.
+ */
+
+.Documentation {
+  column-gap: 2.8125rem;
+  display: grid;
+  grid-template-columns: 1fr minmax(0, 3fr);
+}
+.Documentation-nav {
+  max-height: calc(100vh - 4.0625rem); /* 4.0625rem is the site header height */
+  overflow-x: hidden;
+  overflow-y: scroll;
+  padding-top: 1rem;
+  padding-left: 1.75rem;
+  position: sticky;
+  top: 4.0625rem;
+}
+.Documentation-toc {
+  margin-top: 0;
+}
+.Documentation-toc a {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.Documentation-tocItem {
+  display: block;
+  position: relative;
+}
+.Documentation-tocItem + .Documentation-tocItem {
+  margin-top: 0.5rem;
+}
+.Documentation-tocItem--selected::before {
+  border-radius: 0.375rem;
+  background-color: #377d9c;
+  content: '';
+  display: block;
+  height: 0.375rem;
+  left: -1.1875rem;
+  position: absolute;
+  top: 0.5625rem;
+  width: 0.375rem;
+}
+/* Needed for higher specificity. */
+.TypesAndFuncs .TypesAndFuncs-list,
+.TypesAndFuncs .TypesAndFuncs-list ul {
+  padding-left: 0;
+}
+.TypesAndFuncs-list {
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+.is-withSideNav .Documentation-tocItem--index,
+.is-withSideNav .Documentation-index {
+  display: none;
+}
+.Documentation-tocItem--constants,
+.Documentation-tocItem--variables,
+.Documentation-tocItem--typesAndFuncs {
+  display: block;
+}
+
+.TypesAndFuncs-list > .TypesAndFuncs-item:first-of-type {
+  margin-top: 0.5rem;
+  padding-top: 0;
+}
+.TypesAndFuncs-item {
+  border-left: 0.125rem solid #f0f1f2;
+  padding-left: 0.625rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+.TypesAndFuncs > .TypesAndFuncs-item:first-of-type {
+  margin-top: 0.5rem;
+  padding-top: 0;
+}
+.TypesAndFuncs-item--noBorder {
+  border-left: 0;
+  padding: 0;
+}
+.TypesAndFuncs-item .TypesAndFuncs-item {
+  border-left: 0.125rem solid #f0f1f2;
+  padding-left: 1.25rem;
+}
+.TypesAndFuncs-summary {
+  cursor: pointer;
+  list-style-type: none;
+  outline: none;
+  position: relative;
+}
+.TypesAndFuncs-summary::marker {
+  display: none;
+}
+.TypesAndFuncs-summary::-webkit-details-marker {
+  display: none;
+}
+.TypesAndFuncs-summary::before {
+  border-bottom: 0.3125rem solid transparent;
+  border-left: 0.3125rem solid #606368;
+  border-right: 0;
+  border-top: 0.3125rem solid transparent;
+  content: '';
+  display: block;
+  height: 0;
+  left: -1.125rem;
+  position: absolute;
+  top: 0.4375rem;
+  width: 0;
+}
+.TypesAndFuncs[open] .TypesAndFuncs-summary::before {
+  border-bottom: 0;
+  border-left: 0.3125rem solid transparent;
+  border-right: 0.3125rem solid transparent;
+  border-top: 0.3125rem solid #606368;
+  left: -1.3125rem;
+  top: 0.625rem;
+}

content/static/css/stylesheet.css

@@ -1,8 +1,8 @@
 /*
-	Copyright 2019 The Go Authors. All rights reserved.
-	Use of this source code is governed by a BSD-style
-	license that can be found in the LICENSE file.
-*/
+ * Copyright 2019 The Go Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
 
 :root {
   --gray-1: #202224;
@@ -217,8 +217,8 @@ code {
 :target::before {
   content: ' ';
   display: block;
-  height: 4.125rem;
-  margin-top: -4.125rem; /* Move hidden anchor content for deep linking with a sticky header. */
+  height: 5.125rem;
+  margin-top: -5.125rem; /* Move hidden anchor content for deep linking with a sticky header. */
   pointer-events: none;
   visibility: hidden;
 }
@@ -316,14 +316,10 @@ code {
   padding: 0.5rem 0.5rem 0.5rem 1rem;
   min-height: 2.863125rem;
 }
-.Site-header--dark
-  .Experiment-autoComplete
-  input[type='text'].Header-searchFormInput {
+.Site-header--dark .Experiment-autoComplete input[type='text'].Header-searchFormInput {
   color: initial;
 }
-.Site-header--dark
-  .Experiment-autoComplete
-  input[type='text'].Header-searchFormInput::placeholder {
+.Site-header--dark .Experiment-autoComplete input[type='text'].Header-searchFormInput::placeholder {
   color: initial;
 }
 .Site-header--dark input[type='text'].Header-searchFormInput,
@@ -831,6 +827,12 @@ code {
   padding-bottom: 0;
 }
 
+.Documentation-tocItem--constants,
+.Documentation-tocItem--variables,
+.Documentation-tocItem--funcsAndTypes {
+  display: none;
+}
+
 .Documentation-overviewHeader,
 .Documentation-indexHeader,
 .Documentation-constantsHeader,

content/static/html/base.tmpl

@@ -12,9 +12,12 @@
 <meta name="Description" content="Go is an open source programming language that makes it easy to build simple, reliable, and efficient software.">
 <link href="https://fonts.googleapis.com/css?family=Work+Sans:600|Roboto:400,700|Source+Code+Pro" rel="stylesheet">
 <link href="/static/css/stylesheet.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{if (.Experiments.IsActive "sidenav")}}
+  <link href="/static/css/sidenav.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{end}}
 <link href="/third_party/dialog-polyfill/dialog-polyfill.css?version={{.AppVersionLabel}}" rel="stylesheet">
 <title>{{if .HTMLTitle}}{{.HTMLTitle}} · {{end}}pkg.go.dev</title>
-<body class="Site">
+<body class="Site{{if (.Experiments.IsActive "sidenav")}} is-withSideNav{{end}}">
 <header class="Site-header Site-header--dark">
   <div class="Header">
     <nav class="Header-nav">

internal/fetch/dochtml/template.go

@@ -34,19 +34,67 @@ var htmlPackage = template.Must(template.New("package").Funcs(
 	},
 ).Parse(`{{- "" -}}
 {{- if or .Doc .Consts .Vars .Funcs .Types .Examples.List -}}
+<nav class="Documentation-nav">
 	<ul class="Documentation-toc">{{"\n" -}}
 	{{- if or .Doc (index .Examples.Map "") -}}
-		<li class="Documentation-tocItem"><a href="#pkg-overview">Overview</a></li>{{"\n" -}}
+		<li class="Documentation-tocItem Documentation-tocItem--selected">
+			<a href="#pkg-overview">Overview</a>
+		</li>{{"\n" -}}
 	{{- end -}}
 	{{- if or .Consts .Vars .Funcs .Types .Examples.List -}}
-		<li class="Documentation-tocItem"><a href="#pkg-index">Index</a></li>{{"\n" -}}
+		<li class="Documentation-tocItem Documentation-tocItem--index"><a href="#pkg-index">Index</a></li>{{"\n" -}}
 	{{- end -}}
 	{{- if .Examples.List -}}
 		<li class="Documentation-tocItem"><a href="#pkg-examples">Examples</a></li>{{"\n" -}}
 	{{- end -}}
+	{{- if .Consts -}}
+	  <li class="Documentation-tocItem Documentation-tocItem--constants">
+			<a href="#pkg-constants">Constants</a>
+		</li>{{"\n"}}
+	{{- end -}}
+	{{- if .Vars -}}
+		<li class="Documentation-tocItem Documentation-tocItem--variables">
+			<a href="#pkg-variables">Variables</a>
+		</li>{{"\n"}}
+	{{- end -}}
+
+	<li class="Documentation-tocItem Documentation-tocItem--funcsAndTypes">
+		<details class="TypesAndFuncs" open>
+			<summary class="TypesAndFuncs-summary">types and functions</summary>
+			<ul class="TypesAndFuncs-list">
+				{{- range .Funcs -}}
+				<li class="TypesAndFuncs-item">
+					<a href="#{{.Name}}">func {{.Name}}</a>
+				</li>{{"\n"}}
+				{{- end -}}
+
+				{{- range .Types -}}
+					{{- $tname := .Name -}}
+					<li class="TypesAndFuncs-item"><a href="#{{$tname}}">type {{$tname}}</a></li>{{"\n"}}
+					{{- with .Funcs -}}
+						<li class="TypesAndFuncs-item TypesAndFuncs-item--noBorder"><ul>{{"\n" -}}
+						{{range .}}<li class="TypesAndFuncs-item"><a href="#{{.Name}}">func {{.Name}}</a></li>{{"\n"}}{{end}}
+						</ul></li>{{"\n" -}}
+					{{- end -}}
+					{{- with .Methods -}}
+						<li class="TypesAndFuncs-item TypesAndFuncs-item--noBorder"><ul>{{"\n" -}}
+						{{range .}}<li class="TypesAndFuncs-item"><a href="#{{$tname}}.{{.Name}}">func ({{.Recv}}) {{.Name}}</a></li>{{"\n"}}{{end}}
+						</ul></li>{{"\n" -}}
+					{{- end -}}
+				{{- end -}}
+			</ul>
+		</details>
+	</li>
+
+	{{- range $marker, $item := .Notes -}}
+	<li><a href="#pkg-note-{{$marker}}">{{$marker}}s</a></li>
+	{{- end -}}
 	</ul>{{"\n" -}}
+</nav>
 {{- end -}}
 
+<div> {{/* Documentation content container */}}
+
 {{- if or .Doc (index .Examples.Map "") -}}
 	<section class="Documentation-overview">
 		<h2 id="pkg-overview" class="Documentation-overviewHeader">Overview <a href="#pkg-overview">¶</a></h2>{{"\n\n" -}}
@@ -212,6 +260,8 @@ var htmlPackage = template.Must(template.New("package").Funcs(
 </section>
 {{- end -}}
 
+</div> {{/* End documentation content container */}}
+
 {{- define "example" -}}
 	{{- range . -}}
 	<details id="{{.ID}}" class="Documentation-exampleDetails">{{"\n" -}}