static: copying web assets into nested folder structure

Web assets are being reorganized in the pattern content/<service>(/<domain>)/<file> to make the structure of the web services and our component based development pattern easier to understand. New shared assets will go into content/shared grouped by component. Templates used to generate package docs moves to content/doc. Assets used in the frontend move to content/frontend grouped by by page. Assets used in the worker move to content/worker. In slightly more detail the final result will look like: static/doc body.tmpl outline.tmpl ... static/frontend /badge /homepage ... /unit /versions /main ... static/shared /breadcrumb /button /typography ... static/worker worker.css worker.ts ... Code in motion. The frontend still reads from content/static. Change-Id: I03dc39bfd3c94ff8d749a2c8e440b201276c40ba Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/327295 Trust: Jamal Carvalho <jamal@golang.org> Reviewed-by: Julie Qiu <julie@golang.org>
2021-06-11 13:33:39 -04:00 · 2021-06-11 13:33:39 -04:00 · b37c8ca1d6
--- a/static/doc/body.tmpl
+++ b/static/doc/body.tmpl
@ -0,0 +1,194 @@
+<!--
+  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.
+-->
+<div class="Documentation-content js-docContent"> {{/* Documentation content container */}}
+{{- if or .Package.Doc (index .Examples.Map "") -}}
+  <section class="Documentation-overview">
+    <h3 tabindex="-1" id="pkg-overview" class="Documentation-overviewHeader">Overview <a href="#pkg-overview">¶</a></h3>{{"\n\n" -}}
+    {{render_doc_extract_links .Package.Doc}}{{"\n" -}}
+    {{- template "example" (index .Examples.Map "") -}}
+  </section>
+{{- end -}}
+
+{{- if or .Consts .Vars .Funcs .Types -}}
+  <section class="Documentation-index">
+    <h3 id="pkg-index" class="Documentation-indexHeader">Index <a href="#pkg-index">¶</a></h3>{{"\n\n" -}}
+    <ul class="Documentation-indexList">{{"\n" -}}
+      {{- if .Consts -}}<li class="Documentation-indexConstants"><a href="#pkg-constants">Constants</a></li>{{"\n"}}{{- end -}}
+      {{- if .Vars -}}<li class="Documentation-indexVariables"><a href="#pkg-variables">Variables</a></li>{{"\n"}}{{- end -}}
+
+      {{- range .Funcs -}}
+      <li class="Documentation-indexFunction">
+        <a {{if .IsDeprecated}}class="js-deprecatedTagLink" {{end}}href="#{{.Name}}">{{render_synopsis .Decl}}</a>
+        {{- if .IsDeprecated -}}
+          <span class="Documentation-indexDeprecated Documentation-deprecatedTag">deprecated</span>
+        {{- end -}}
+      </li>{{"\n"}}
+      {{- end -}}
+
+      {{- range .Types -}}
+        {{- $tname := .Name -}}
+        <li class="Documentation-indexType">
+          <a {{if .IsDeprecated}}class="js-deprecatedTagLink" {{end}}href="#{{$tname}}">type {{$tname}}</a>
+          {{- if .IsDeprecated -}}
+            <span class="Documentation-indexDeprecated Documentation-deprecatedTag">deprecated</span>
+          {{- end -}}
+        </li>{{"\n"}}
+        {{- with .Funcs -}}
+          <li><ul class="Documentation-indexTypeFunctions">{{"\n" -}}{{- range . -}}<li>
+            <a {{if .IsDeprecated}}class="js-deprecatedTagLink" {{end}}href="#{{.Name}}">{{render_synopsis .Decl}}</a>
+            {{- if .IsDeprecated -}}
+              <span class="Documentation-indexDeprecated Documentation-deprecatedTag">deprecated</span>
+            {{- end -}}
+          </li>{{"\n"}}{{- end -}}</ul></li>{{"\n" -}}
+        {{- end -}}
+        {{- with .Methods -}}
+          <li><ul class="Documentation-indexTypeMethods">{{"\n" -}}{{range .}}<li>
+            <a {{if .IsDeprecated}}class="js-deprecatedTagLink" {{end}}href="#{{$tname}}.{{.Name}}">{{render_synopsis .Decl}}</a>
+            {{- if .IsDeprecated -}}
+              <span class="Documentation-indexDeprecated Documentation-deprecatedTag">deprecated</span>
+            {{- end -}}
+          </li>{{"\n"}}{{end}}</ul></li>{{"\n" -}}
+        {{- end -}}
+      {{- end -}}
+
+      {{- range $marker, $item := .Package.Notes -}}
+      <li class="Documentation-indexNote"><a href="#pkg-note-{{$marker}}">{{(index $.NoteHeaders $marker).Label}}s</a></li>
+      {{- end -}}
+    </ul>{{"\n" -}}
+  </section>
+
+  {{- if .Examples.List -}}
+  <section class="Documentation-examples">
+    <h4 tabindex="-1" id="pkg-examples" class="Documentation-examplesHeader">Examples <a class="Documentation-idLink" href="#pkg-examples">¶</a></h4>{{"\n" -}}
+    <ul class="Documentation-examplesList">{{"\n" -}}
+      {{- range .Examples.List -}}
+        <li><a href="#{{.ID}}" class="js-exampleHref">{{or .ParentID "Package"}}{{with .Suffix}} ({{.}}){{end}}</a></li>{{"\n" -}}
+      {{- end -}}
+    </ul>{{"\n" -}}
+  </section>
+  {{- end -}}
+
+  <h3 tabindex="-1" id="pkg-constants" class="Documentation-constantsHeader">Constants <a href="#pkg-constants">¶</a></h3>{{"\n"}}
+  <section class="Documentation-constants">
+  {{- if .Consts -}}
+    {{- range .Consts -}}
+      {{- template "declaration-view-source" . -}}
+    {{- end -}}
+  {{- else -}}
+      <p class="Documentation-empty">This section is empty.</p>
+  {{- end -}}
+  </section>
+
+  <h3 tabindex="-1" id="pkg-variables" class="Documentation-variablesHeader">Variables <a href="#pkg-variables">¶</a></h3>{{"\n"}}
+  <section class="Documentation-variables">
+  {{- if .Vars -}}
+    {{- range .Vars -}}
+      {{- template "declaration-view-source" . -}}
+    {{- end -}}
+  {{- else -}}
+    <p class="Documentation-empty">This section is empty.</p>
+  {{- end -}}
+  </section>
+
+  <h3 tabindex="-1" id="pkg-functions" class="Documentation-functionsHeader">Functions <a href="#pkg-functions">¶</a></h3>{{"\n"}}
+  <section class="Documentation-functions">
+  {{- if .Funcs -}}
+        {{- range .Funcs -}}
+        <div class="Documentation-function">
+	  {{template "item" .}}
+        </div>
+        {{- end -}}
+  {{- else -}}
+    <p class="Documentation-empty">This section is empty.</p>
+  {{- end -}}
+  </section>
+
+  <h3 tabindex="-1" id="pkg-types" class="Documentation-typesHeader">Types <a href="#pkg-types">¶</a></h3>{{"\n"}}
+  <section class="Documentation-types">
+  {{- if .Types -}}
+    {{- range .Types -}}
+    <div class="Documentation-type">
+      {{template "item" .}}
+    </div>
+    {{- end -}}
+  {{- else -}}
+    <p class="Documentation-empty">This section is empty.</p>
+  {{- end -}}
+  </section>
+{{- end -}}
+
+{{- if .Package.Notes -}}
+  <h3 tabindex="-1" id="pkg-notes" class="Documentation-notesHeader">Notes <a href="#pkg-notes">¶</a></h3>{{"\n"}}
+  <section class="Documentation-notes">
+    {{- range $marker, $content := .Package.Notes -}}
+    <div class="Documentation-note">
+      <h3 tabindex="-1" id="{{(index $.NoteHeaders $marker).SafeIdentifier}}" class="Documentation-noteHeader">{{(index $.NoteHeaders $marker).Label}}s <a href="#pkg-note-{{$marker}}">¶</a></h3>
+      <ul class="Documentation-noteList" style="padding-left: 20px; list-style: initial;">{{"\n" -}}
+      {{- range $v := $content -}}
+        <li style="margin: 6px 0 6px 0;">{{render_doc $v.Body}}</li>
+      {{- end -}}
+      </ul>{{"\n" -}}
+    </div>
+    {{- end -}}
+  </section>
+{{- end -}}
+</div> {{/* End documentation content container */}}
+
+{{define "item"}}
+  {{$id := safe_id .FullName}}
+  {{if .IsDeprecated}}
+    <details class="Documentation-deprecatedDetails js-deprecatedDetails">
+      <summary>
+        <h4 tabindex="-1" id="{{$id}}" data-kind="{{.Kind}}" class="{{.HeaderClass}}">
+          <span class="Documentation-deprecatedTitle">
+            {{.HeaderStart}} {{source_link .Name .Decl}}
+            <span class="Documentation-deprecatedTag">deprecated</span>
+            <span class="Documentation-deprecatedBody"></span>
+          </span>
+          {{- template "since_version" .FullName -}}
+        </h4>{{"\n"}}
+      </summary>
+      <div class="go-Message go-Message--warning Documentation-deprecatedItemBody">
+        <div class="Documentation-deprecatedMessage">
+          <img class="go-Icon" height="24" width="24" src="/static/_icon/alert_gm_grey_24dp.svg" alt="">
+          This {{.Kind}} has been deprecated.
+        </div>
+        {{template "item_body" .}}
+      </div>
+    </details>
+  {{else}}
+    <h4 tabindex="-1" id="{{$id}}" data-kind="{{.Kind}}" class="{{.HeaderClass}}">
+      <span>{{.HeaderStart}} {{source_link .Name .Decl}} <a class="Documentation-idLink" href="#{{$id}}">¶</a></span>
+        {{- template "since_version" .FullName -}}
+    </h4>{{"\n"}}
+    {{template "item_body" .}}
+  {{end}}
+{{end}}
+
+{{define "item_body"}}
+  {{- template "declaration" . -}}
+  {{- template "example" .Examples -}}
+  {{- range .Consts -}}
+  <div class="Documentation-typeConstant">
+    {{- template "declaration" . -}}
+  </div>
+  {{- end -}}
+  {{- range .Vars -}}
+  <div class="Documentation-typeVariable">
+    {{- template "declaration" . -}}
+  </div>
+  {{- end -}}
+  {{- range .Funcs -}}
+  <div class="Documentation-typeFunc">
+    {{template "item" .}}
+  </div>
+  {{- end -}}
+  {{- range .Methods -}}
+  <div class="Documentation-typeMethod">
+    {{template "item" .}}
+  </div>
+  {{- end -}}
+{{end}}
--- a/static/doc/declaration.tmpl
+++ b/static/doc/declaration.tmpl
@ -0,0 +1,38 @@
+<!--
+  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.
+-->
+
+{{- define "declaration" -}}
+  {{- $out := render_decl .Doc .Decl -}}
+  {{if $out.Decl}}
+    <div class="Documentation-declaration">
+      <pre>{{- $out.Decl -}}</pre>
+    </div>
+  {{end}}
+  {{- $out.Doc -}}
+  {{"\n"}}
+{{- end -}}
+
+{{- define "declaration-view-source" -}}
+  {{- $out := render_decl .Doc .Decl -}}
+  {{if $out.Decl}}
+    <div class="Documentation-declaration">
+      <span class="Documentation-declarationLink">{{source_link "View Source" .Decl}}</span>
+      <pre>{{- $out.Decl -}}</pre>
+    </div>
+  {{end}}
+  {{- $out.Doc -}}
+  {{"\n"}}
+{{- end -}}
+
+{{- define "since_version" -}}
+  {{$v := (since_version .)}}
+  <span class="Documentation-sinceVersion">
+    {{if $v.String}}
+      <span class="Documentation-sinceVersionLabel">added in</span>
+      <span class="Documentation-sinceVersionVersion">{{$v}}</span>
+    {{end}}
+  </span>
+{{end}}
--- a/static/doc/example.tmpl
+++ b/static/doc/example.tmpl
@ -0,0 +1,30 @@
+<!--
+  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.
+-->
+
+{{- define "example" -}}
+  {{- range . -}}
+  <details tabindex="-1" id="{{.ID}}" class="Documentation-exampleDetails js-exampleContainer">{{"\n" -}}
+    <summary class="Documentation-exampleDetailsHeader">Example{{with .Suffix}} ({{.}}){{end}} <a href="#{{.ID}}">¶</a></summary>{{"\n" -}}
+    <div class="Documentation-exampleDetailsBody">{{"\n" -}}
+      {{- if .Doc -}}{{render_doc .Doc}}{{"\n" -}}{{- end -}}
+      {{- with play_url .Example -}}
+      <p><a class="Documentation-examplesPlay" href="{{.}}">Open in Go playground »</a></p>{{"\n" -}}
+      {{- end -}}
+      {{render_code .Example}}{{"\n" -}}
+      <pre><span class="Documentation-exampleOutputLabel">Output:</span>{{"\n\n"}}<span class="Documentation-exampleOutput">{{- .Output -}}</span></pre>{{"\n" -}}
+    </div>{{"\n" -}}
+    {{- if .Play -}}
+      <div class="Documentation-exampleButtonsContainer">
+        <p class="Documentation-exampleError" role="alert" aria-atomic="true"></p>
+        <button class="Documentation-exampleShareButton" aria-label="Share Code">Share</button>
+        <button class="Documentation-exampleFormatButton" aria-label="Format Code">Format</button>
+        <button class="Documentation-exampleRunButton" aria-label="Run Code">Run</button>
+      </div>
+    {{- end -}}
+  </details>{{"\n" -}}
+  {{"\n"}}
+  {{- end -}}
+{{- end -}}
--- a/static/doc/legacy-outline.tmpl
+++ b/static/doc/legacy-outline.tmpl
@ -0,0 +1,123 @@
+<!--
+  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.
+-->
+<ul role="group" id="doc-outline">
+  {{if or .Package.Doc (index .Examples.Map "")}}
+    <li role="none">
+      <a href="#pkg-overview" role="treeitem" aria-level="2" tabindex="-1"
+          data-gtmc="doc outline link">Overview</a>
+    </li>
+  {{end}}
+  {{- if or .Consts .Vars .Funcs .Types -}}
+    <li class="DocNav-overview" role="none">
+      <a href="#pkg-index" role="treeitem" aria-level="2" tabindex="-1" aria-owns="nav-group-index"
+          {{if .Examples.List}} aria-expanded="false"{{end}}
+          data-gtmc="doc outline link">
+        Index
+      </a>
+      {{if .Examples.List}}
+        <ul role="group" id="nav-group-index">
+          <li role="none">
+            <a href="#pkg-examples" role="treeitem" aria-level="3" tabindex="-1"
+                data-gtmc="doc outline link">
+              Examples
+            </a>
+          </li>
+        </ul>
+      {{end}}
+    </li>
+    <li class="DocNav-constants" role="none">
+      <a href="#pkg-constants" role="treeitem" aria-level="2" tabindex="-1"
+          data-gtmc="doc outline link">
+        Constants
+      </a>
+    </li>
+    <li class="DocNav-variables" role="none">
+      <a href="#pkg-variables" role="treeitem" aria-level="2" tabindex="-1"
+          data-gtmc="doc outline link">
+        Variables
+      </a>
+    </li>
+    <li class="DocNav-functions" role="none">
+      <a href="#pkg-functions" role="treeitem" aria-level="2" tabindex="-1" aria-owns="nav-group-functions"
+           {{if gt (len .Funcs) 0}}aria-expanded="false"{{end}} data-gtmc="doc outline link">
+        Functions
+      </a>
+      <ul role="group" id="nav-group-functions">
+        {{range .Funcs}}
+            <li role="none">
+              <a href="#{{.Name}}" role="treeitem" aria-level="3" tabindex="-1"
+                   title="{{render_short_synopsis .Decl}}" data-gtmc="doc outline link">
+                {{render_short_synopsis .Decl}}
+              </a>
+            </li>
+        {{end}}
+      </ul>
+    </li>
+    <li class="DocNav-types" role="none">
+      <a href="#pkg-types" role="treeitem" aria-level="2" tabindex="-1" aria-owns="nav-group-types"
+           {{if gt (len .Types) 0}}aria-expanded="false"{{end}} data-gtmc="doc outline link">
+        Types
+      </a>
+      <ul role="group" id="nav-group-types">
+        {{range .Types}}
+          {{$tname := .Name}}
+          <li role="none">
+            {{if or .Funcs .Methods}}
+              {{$navgroupname := (printf "nav.group.%s" $tname)}}
+              {{$navgroupid := (safe_id $navgroupname)}}
+              <a href="#{{$tname}}" role="treeitem" aria-expanded="false" aria-level="3" tabindex="-1"
+                   data-aria-owns="{{$navgroupid}}" title="type {{$tname}}"
+                   data-gtmc="doc outline link">
+                type {{$tname}}
+              </a>
+              <ul role="group" id="{{$navgroupid}}">
+                {{range .Funcs}}
+                  <li role="none">
+                    <a href="#{{.Name}}" role="treeitem" aria-level="4" tabindex="-1"
+                        title="{{render_short_synopsis .Decl}}" data-gtmc="doc outline link">
+                      {{render_short_synopsis .Decl}}
+                    </a>
+                  </li>
+                {{end}}
+                {{range .Methods}}
+                  <li role="none">
+                    <a href="#{{$tname}}.{{.Name}}" role="treeitem" aria-level="4" tabindex="-1"
+                        title="{{render_short_synopsis .Decl}}" data-gtmc="doc outline link">
+                      {{render_short_synopsis .Decl}}
+                    </a>
+                  </li>
+                {{end}}
+              </ul>
+            {{else}}
+              <a href="#{{$tname}}" role="treeitem" aria-level="3" tabindex="-1" title="type {{$tname}}"
+                  data-gtmc="doc outline link">
+                type {{$tname}}
+              </a>
+            {{end}} {{/* if or .Funcs .Methods */}}
+          </li>
+        {{end}} {{/* range .Types */}}
+      </ul>
+    </li>
+  {{end}}
+  {{if .Package.Notes}}
+    <li class="DocNav-notes" role="none">
+      <a href="#pkg-notes" role="treeitem" aria-expanded="false" aria-level="2" tabindex="-1"
+           aria-owns="nav-group-notes" data-gtmc="doc outline link">
+        Notes
+      </a>
+      <ul role="group" id="nav-group-notes">
+        {{range $marker, $item := .Package.Notes}}
+          <li role="none">
+            <a href="#pkg-note-{{$marker}}" role="treeitem" aria-level="3" tabindex="-1"
+                data-gtmc="doc outline link">
+              {{(index $.NoteHeaders $marker).Label}}s
+            </a>
+          </li>
+        {{end}}
+      </ul>
+    </li>
+  {{end}}
+</ul>
--- a/static/doc/outline.tmpl
+++ b/static/doc/outline.tmpl
@ -0,0 +1,105 @@
+<!--
+  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.
+-->
+<ul>
+  {{if or .Package.Doc (index .Examples.Map "")}}
+    <li>
+      <a href="#pkg-overview" data-gtmc="doc outline link">Overview</a>
+    </li>
+  {{end}}
+  {{- if or .Consts .Vars .Funcs .Types -}}
+    <li class="DocNav-overview">
+      <a href="#pkg-index" data-gtmc="doc outline link">
+        Index
+      </a>
+      {{if .Examples.List}}
+        <ul>
+          <li>
+            <a href="#pkg-examples" data-gtmc="doc outline link">
+              Examples
+            </a>
+          </li>
+        </ul>
+      {{end}}
+    </li>
+    <li class="DocNav-constants">
+      <a href="#pkg-constants" data-gtmc="doc outline link">
+        Constants
+      </a>
+    </li>
+    <li class="DocNav-variables">
+      <a href="#pkg-variables" data-gtmc="doc outline link">
+        Variables
+      </a>
+    </li>
+    <li class="DocNav-functions">
+      <a href="#pkg-functions" data-gtmc="doc outline link">
+        Functions
+      </a>
+      {{if .Funcs}}
+        <ul>
+          {{range .Funcs}}
+            <li>
+              <a href="#{{.Name}}" title="{{render_short_synopsis .Decl}}" data-gtmc="doc outline link">
+                {{render_short_synopsis .Decl}}
+              </a>
+            </li>
+          {{end}}
+        </ul>
+      {{end}}
+    </li>
+    <li class="DocNav-types">
+      <a href="#pkg-types" data-gtmc="doc outline link">
+        Types
+      </a>
+      <ul>
+        {{range .Types}}
+          {{$tname := .Name}}
+          <li>
+            <a href="#{{$tname}}" title="type {{$tname}}" data-gtmc="doc outline link">
+              type {{$tname}}
+            </a>
+            {{if or .Funcs .Methods}}
+              <ul>
+                {{range .Funcs}}
+                  <li>
+                    <a href="#{{.Name}}" title="{{render_short_synopsis .Decl}}"
+                        data-gtmc="doc outline link">
+                      {{render_short_synopsis .Decl}}
+                    </a>
+                  </li>
+                {{end}}
+                {{range .Methods}}
+                  <li>
+                    <a href="#{{$tname}}.{{.Name}}" title="{{render_short_synopsis .Decl}}"
+                        data-gtmc="doc outline link">
+                      {{render_short_synopsis .Decl}}
+                    </a>
+                  </li>
+                {{end}}
+              </ul>
+            {{end}} {{/* if or .Funcs .Methods */}}
+          </li>
+        {{end}} {{/* range .Types */}}
+      </ul>
+    </li>
+  {{end}}
+  {{if .Package.Notes}}
+    <li class="DocNav-notes">
+      <a href="#pkg-notes" data-gtmc="doc outline link">
+        Notes
+      </a>
+      <ul>
+        {{range $marker, $item := .Package.Notes}}
+          <li>
+            <a href="#pkg-note-{{$marker}}" data-gtmc="doc outline link">
+              {{(index $.NoteHeaders $marker).Label}}s
+            </a>
+          </li>
+        {{end}}
+      </ul>
+    </li>
+  {{end}}
+</ul>
--- a/static/doc/sidenav-mobile.tmpl
+++ b/static/doc/sidenav-mobile.tmpl
@ -0,0 +1,51 @@
+<!--
+  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.
+-->
+
+<optgroup label="Documentation">
+  {{if or .Package.Doc (index .Examples.Map "")}}
+    <option value="pkg-overview">Overview</option>
+  {{end}}
+  {{if or .Consts .Vars .Funcs .Types}}
+    <option value="pkg-index">Index</option>
+  {{end}}
+  {{if .Examples.List}}
+    <option value="pkg-examples">Examples</option>
+  {{end}}
+  {{if .Consts}}
+    <option value="pkg-constants">Constants</option>
+  {{end}}
+  {{if .Vars}}
+    <option value="pkg-variables">Variables</option>
+  {{end}}
+</optgroup>
+{{if .Funcs}}
+  <optgroup label="Functions">
+    {{range .Funcs}}
+      <option value="{{.Name}}">{{render_short_synopsis .Decl}}</option>
+    {{end}}
+  </optgroup>
+{{end}}
+{{if .Types}}
+  <optgroup label="Types">
+    {{range .Types}}
+      {{$tname := .Name}}
+      <option value="{{$tname}}">type {{$tname}}</option>
+      {{range .Funcs}}
+        <option value="{{.Name}}">{{render_short_synopsis .Decl}}</option>
+      {{end}}
+      {{range .Methods}}
+        <option value="{{$tname}}.{{.Name}}">{{render_short_synopsis .Decl}}</option>
+      {{end}}
+    {{end}} {{/* range .Types */}}
+  </optgroup>
+{{end}}
+{{if .Package.Notes}}
+  <optgroup label="Notes">
+    {{range $marker, $item := .Package.Notes}}
+      <option value="pkg-note-{{$marker}}">{{(index $.NoteHeaders $marker).Label}}s</option>
+    {{end}}
+  </optgroup>
+{{end}}
--- a/static/frontend/badge/badge.css
+++ b/static/frontend/badge/badge.css
@ -0,0 +1,30 @@
+/*
+ * Copyright 2021 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.
+ */
+
+.Badge label,
+.Badge input {
+  width: 100%;
+}
+.Badge-badgeIcon {
+  height: 1.25rem;
+  width: 5.625rem;
+}
+.Badge-snippetContainer {
+  background-color: var(--color-background-accented);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+  padding: 1rem;
+}
+.Badge-gopherLanding {
+  height: 12.25rem;
+  text-align: center;
+}
+.Badge-gopherLanding img {
+  height: 7.8125rem;
+  width: auto;
+}
--- a/static/frontend/badge/badge.svg
+++ b/static/frontend/badge/badge.svg
--- a/static/frontend/badge/badge.tmpl
+++ b/static/frontend/badge/badge.tmpl
@ -0,0 +1,85 @@
+<!--
+  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.
+-->
+
+{{define "title"}}<title>Badge · pkg.go.dev</title>{{end}}
+
+{{define "description"}}
+  <meta name="description" content="Create a badge to link to pkg.go.dev from your project website or README file.">
+{{end}}
+
+{{define "pre-content"}}
+  <link href="/static/badge/badge.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{end}}
+
+{{define "main"}}
+  <main class="go-Container">
+    <div class="go-Content Badge">
+      <form class="go-Form" action="/badge/" data-gtmc="badge form" aria-label="Create a Badge">
+        <h1>Create a badge</h1>
+        <p>Create a badge to link to pkg.go.dev from your project website or README file.</p>
+        <label class="go-Label">
+          Badge
+          <a class="js-badgeExampleButton" href="https://pkg.go.dev/{{.LinkPath}}">
+            <img class="Badge-badgeIcon" src="/static/badge/badge.svg" alt="Go Reference">
+          </a>
+        </label>
+        <label class="go-Label">
+          URL
+          <input name="path" class="go-Input js-toolsPathInput"
+              value="{{if .LinkPath}}https://pkg.go.dev/{{.LinkPath}}{{end}}" placeholder="e.g., https://pkg.go.dev/golang.org/x/pkgsite">
+        </label>
+        <button type="submit" class="go-Button">{{if .LinkPath}}Update{{else}}Create{{end}}</button>
+      </form>
+      <div class="Badge-snippetContainer">
+        {{if .LinkPath}}
+          <label class="go-Label">HTML
+            <div class="go-InputGroup">
+              <input class="go-Input" readonly
+                  value='<a href="https://pkg.go.dev/{{.LinkPath}}"><img src="https://pkg.go.dev/{{.BadgePath}}" alt="Go Reference"></a>'>
+              <button
+                class="go-Button go-Button--inverted go-Clipboard js-clipboard"
+                aria-label="Copy to Clipboard"
+                data-gtmc="clipboard button"
+              >
+                <img
+                  class="go-Icon"
+                  height="24"
+                  width="24"
+                  src="/static/_icon/content_copy_gm_grey_24dp.svg"
+                  alt=""
+                />
+              </button>
+            </div>
+          </label>
+          <label class="go-Label">Markdown
+            <div class="go-InputGroup">
+              <input class="go-Input" readonly
+                  value="[![Go Reference](https://pkg.go.dev/{{.BadgePath}})](https://pkg.go.dev/{{.LinkPath}})">
+              <button
+                class="go-Button go-Button--inverted go-Clipboard js-clipboard"
+                aria-label="Copy to Clipboard"
+                data-gtmc="clipboard button"
+              >
+                <img
+                  class="go-Icon"
+                  height="24"
+                  width="24"
+                  src="/static/_icon/content_copy_gm_grey_24dp.svg"
+                  alt=""
+                />
+              </button>
+            </div>
+          </label>
+        {{else}}
+          <div class="Badge-gopherLanding">
+            <img width="1200" height="945" src="/static/_gopher/airplane-1200x945.svg" alt="The Go Gopher"/>
+            <p class="go-textSubtle">Type a pkg.go.dev URL above to create a badge link.</p>
+          </div>
+        {{end}}
+      </div>
+    </div>
+  </main>
+{{end}}
--- a/static/frontend/error/error.tmpl
+++ b/static/frontend/error/error.tmpl
@ -0,0 +1,17 @@
+<!--
+  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.
+-->
+
+{{define "title"}}<title>{{.MessageData}} · pkg.go.dev</title>{{end}}
+
+{{define "main"}}
+  <main class="go-Container">
+    <div class="go-Content go-Content--center">
+      <img class="Error-gopher" width="945" height="1200"
+          src="/static/_gopher/airplane-1200x945.svg" alt="The Go Gopher">
+      {{template "message" .MessageData}}
+    </div>
+  </main>
+{{end}}
--- a/static/frontend/fetch/fetch.css
+++ b/static/frontend/fetch/fetch.css
@ -0,0 +1,45 @@
+/*
+ * Copyright 2021 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.
+ */
+
+.Fetch-button {
+  align-self: center;
+}
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+.Fetch-dot {
+  animation-duration: 1.4s;
+  animation-fill-mode: both;
+  animation-iteration-count: infinite;
+  animation-name: blink;
+  background-color: var(--color-brand-primary);
+  border-radius: 50%;
+  display: inline-block;
+  height: 0.5rem;
+  width: 0.5rem;
+}
+.Fetch-loading {
+  display: none;
+  text-align: center;
+}
+.Fetch-loading:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.Fetch-loading:nth-child(3) {
+  animation-delay: 0.4s;
+}
+.Fetch-message,
+.Fetch-messageSecondary {
+  text-align: center;
+}
--- a/static/frontend/fetch/fetch.js
+++ b/static/frontend/fetch/fetch.js
@ -0,0 +1,7 @@
+/*!
+ * @license
+ * 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.
+ */const fetchButton=document.querySelector(".js-fetchButton");fetchButton&&fetchButton.addEventListener("click",e=>{e.preventDefault(),fetchPath()});async function fetchPath(){const e=document.querySelector(".js-fetchMessage"),t=document.querySelector(".js-fetchMessageSecondary"),o=document.querySelector(".js-fetchButton"),n=document.querySelector(".js-fetchLoading");if(!(e&&t&&o&&n))return;e.textContent=`Fetching ${e.dataset.path}`,t.textContent="Feel free to navigate away and check back later, we\u2019ll keep working on it!",o.style.display="none",n.style.display="block";const c=await fetch(`/fetch${window.location.pathname}`,{method:"POST"});if(c.ok){window.location.reload();return}const a=await c.text();n.style.display="none",t.textContent="";const s=new DOMParser().parseFromString(a,"text/html");e.innerHTML=s.documentElement.textContent??""}
+//# sourceMappingURL=fetch.js.map
--- a/static/frontend/fetch/fetch.js.map
+++ b/static/frontend/fetch/fetch.js.map
@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["fetch.ts"],
+  "sourcesContent": ["/*!\n * @license\n * Copyright 2020 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\nconst fetchButton = document.querySelector('.js-fetchButton');\nif (fetchButton) {\n  fetchButton.addEventListener('click', e => {\n    e.preventDefault();\n    fetchPath();\n  });\n}\n\nasync function fetchPath() {\n  const fetchMessageEl = document.querySelector<HTMLHeadingElement>('.js-fetchMessage');\n  const fetchMessageSecondary = document.querySelector<HTMLParagraphElement>(\n    '.js-fetchMessageSecondary'\n  );\n  const fetchButton = document.querySelector<HTMLButtonElement>('.js-fetchButton');\n  const fetchLoading = document.querySelector<HTMLDivElement>('.js-fetchLoading');\n  if (!(fetchMessageEl && fetchMessageSecondary && fetchButton && fetchLoading)) {\n    return;\n  }\n  fetchMessageEl.textContent = `Fetching ${fetchMessageEl.dataset.path}`;\n  fetchMessageSecondary.textContent =\n    'Feel free to navigate away and check back later, we\u2019ll keep working on it!';\n  fetchButton.style.display = 'none';\n  fetchLoading.style.display = 'block';\n\n  const response = await fetch(`/fetch${window.location.pathname}`, { method: 'POST' });\n  if (response.ok) {\n    window.location.reload();\n    return;\n  }\n  const responseText = await response.text();\n  fetchLoading.style.display = 'none';\n  fetchMessageSecondary.textContent = '';\n  const responseTextParsedDOM = new DOMParser().parseFromString(responseText, 'text/html');\n  fetchMessageEl.innerHTML = responseTextParsedDOM.documentElement.textContent ?? '';\n}\n"],
+  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOA,KAAM,aAAc,SAAS,cAAc,mBAC3C,AAAI,aACF,YAAY,iBAAiB,QAAS,GAAK,CACzC,EAAE,iBACF,cAIJ,0BAA2B,CACzB,KAAM,GAAiB,SAAS,cAAkC,oBAC5D,EAAwB,SAAS,cACrC,6BAEI,EAAc,SAAS,cAAiC,mBACxD,EAAe,SAAS,cAA8B,oBAC5D,GAAI,CAAE,IAAkB,GAAyB,GAAe,GAC9D,OAEF,EAAe,YAAc,YAAY,EAAe,QAAQ,OAChE,EAAsB,YACpB,kFACF,EAAY,MAAM,QAAU,OAC5B,EAAa,MAAM,QAAU,QAE7B,KAAM,GAAW,KAAM,OAAM,SAAS,OAAO,SAAS,WAAY,CAAE,OAAQ,SAC5E,GAAI,EAAS,GAAI,CACf,OAAO,SAAS,SAChB,OAEF,KAAM,GAAe,KAAM,GAAS,OACpC,EAAa,MAAM,QAAU,OAC7B,EAAsB,YAAc,GACpC,KAAM,GAAwB,GAAI,aAAY,gBAAgB,EAAc,aAC5E,EAAe,UAAY,EAAsB,gBAAgB,aAAe",
+  "names": []
+}
--- a/static/frontend/fetch/fetch.tmpl
+++ b/static/frontend/fetch/fetch.tmpl
@ -0,0 +1,46 @@
+<!--
+  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.
+-->
+
+{{define "title"}}<title>{{.MessageData}} · pkg.go.dev</title>{{end}}
+
+{{define "pre-content"}}
+  <link href="/static/fetch/fetch.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{end}}
+
+{{define "main"}}
+  <main class="go-Container">
+    <div class="go-Content go-Content--center">
+      <img class="Fetch-gopher" width="945" height="1200"
+          src="/static/_gopher/airplane-1200x945.svg" alt="The Go Gopher">
+      <h3 class="Fetch-message js-fetchMessage"
+        data-test-id="fetch-message"
+        aria-live="polite"
+        data-path="{{.MessageData}}">
+        Oops! We couldn't find “{{.MessageData}}”.
+      </h3>
+      <div class="Fetch-loading js-fetchLoading" aria-live="polite">
+        <i class="Fetch-dot"></i>
+        <i class="Fetch-dot"></i>
+        <i class="Fetch-dot"></i>
+      </div>
+      <p class="Fetch-messageSecondary js-fetchMessageSecondary" aria-live="polite">
+        Check that you entered the URL correctly,
+        try fetching it following the <a href="/about#adding-a-package">instructions here</a>,
+        or request to add “{{.MessageData}}” to pkg.go.dev.
+      </p>
+      <button class="go-Button Fetch-button js-fetchButton" data-test-id="fetch-button" aria-live="polite">
+        Request “{{.MessageData}}”
+      </button>
+    </div>
+  </main>
+
+{{end}}
+
+{{define "post-content"}}
+  <script>
+    loadScript("/static/fetch/fetch.js");
+  </script>
+{{end}}
--- a/static/frontend/fetch/fetch.ts
+++ b/static/frontend/fetch/fetch.ts
@ -0,0 +1,42 @@
+/*!
+ * @license
+ * 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.
+ */
+
+const fetchButton = document.querySelector('.js-fetchButton');
+if (fetchButton) {
+  fetchButton.addEventListener('click', e => {
+    e.preventDefault();
+    fetchPath();
+  });
+}
+
+async function fetchPath() {
+  const fetchMessageEl = document.querySelector<HTMLHeadingElement>('.js-fetchMessage');
+  const fetchMessageSecondary = document.querySelector<HTMLParagraphElement>(
+    '.js-fetchMessageSecondary'
+  );
+  const fetchButton = document.querySelector<HTMLButtonElement>('.js-fetchButton');
+  const fetchLoading = document.querySelector<HTMLDivElement>('.js-fetchLoading');
+  if (!(fetchMessageEl && fetchMessageSecondary && fetchButton && fetchLoading)) {
+    return;
+  }
+  fetchMessageEl.textContent = `Fetching ${fetchMessageEl.dataset.path}`;
+  fetchMessageSecondary.textContent =
+    'Feel free to navigate away and check back later, we’ll keep working on it!';
+  fetchButton.style.display = 'none';
+  fetchLoading.style.display = 'block';
+
+  const response = await fetch(`/fetch${window.location.pathname}`, { method: 'POST' });
+  if (response.ok) {
+    window.location.reload();
+    return;
+  }
+  const responseText = await response.text();
+  fetchLoading.style.display = 'none';
+  fetchMessageSecondary.textContent = '';
+  const responseTextParsedDOM = new DOMParser().parseFromString(responseText, 'text/html');
+  fetchMessageEl.innerHTML = responseTextParsedDOM.documentElement.textContent ?? '';
+}
--- a/static/frontend/frontend.css
+++ b/static/frontend/frontend.css
@ -0,0 +1,108 @@
+/*!
+ * Copyright 2021 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.
+ */
+
+/**
+ * Typography should be imported first to ensure expected CSS
+ * inheritance on text elements.
+ */
+@import url('../_typography/typography.css');
+
+@import url('../_button/button.css');
+@import url('../_breadcrumb/breadcrumb.css');
+@import url('../_chip/chip.css');
+@import url('../_clipboard/clipboard.css');
+@import url('../_color/color.css');
+@import url('../_footer/footer.css');
+@import url('../_form/form.css');
+@import url('../_gopher/gopher.css');
+@import url('../_header/header.css');
+@import url('../_icon/icon.css');
+@import url('../_message/message.css');
+@import url('../_modal/modal.css');
+@import url('../_outline/tree.css');
+@import url('../_tooltip/tooltip.css');
+
+:root {
+  /* Padding at the left and right of the viewport. */
+  --gutter: 1rem;
+
+  /* Margin between containers in the grid layout. */
+  --gap: 1rem;
+
+  /* The margin placed above elements scrolled to by clicking hash links. */
+  --scroll-margin: calc(
+    var(--js-sticky-header-height, 3.5rem) + var(--js-sticky-nav-height, 0) + 2rem
+  );
+
+  /* Default styles for page elements. */
+  --border: 0.0625rem solid var(--color-border);
+  --border-radius: 0.25rem;
+  --box-shadow: 0 0 0.375rem 0 rgb(0 0 0 / 25%);
+  --focus-box-shadow: 0 0 0.0625rem 0.0625rem rgba(0, 112, 210, 0.6);
+}
+
+[data-theme='dark'] :root {
+  --box-shadow: 0 0.3125rem 0.9375rem rgb(0 0 0 / 45%);
+}
+@media (min-width: 50rem) {
+  :root {
+    --gutter: 1.5rem;
+    --gap: 2rem;
+    --scroll-margin: calc(
+      var(--js-sticky-header-height, 3.5rem) + var(--js-sticky-nav-height, 0) + 1rem
+    );
+  }
+}
+@media (min-width: 80rem) {
+  :root {
+    --gutter: 2rem;
+  }
+}
+@media (min-width: 112rem) {
+  :root {
+    --gutter: 2.5rem;
+  }
+}
+
+*:target {
+  scroll-margin-top: var(--scroll-margin);
+}
+
+body {
+  background-color: var(--color-background);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-width: 23.5rem;
+
+  /**
+   * This is used to programatically detect whether overflow needs to be altered
+   * to prevent jitter when focusing within fixed elements on iOS.
+   * It also must be set to 'touch' for the fix to work.
+   */
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: none;
+}
+
+.go-Container {
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+  margin-bottom: 5rem;
+}
+.go-Content {
+  display: flex;
+  flex-flow: column;
+  gap: 1rem;
+  margin: 0 auto;
+  max-width: 63rem;
+  min-height: 32rem;
+  padding: 2rem var(--gutter);
+  width: 100%;
+}
+.go-Content--center {
+  margin: auto;
+}
--- a/static/frontend/frontend.js
+++ b/static/frontend/frontend.js
@ -0,0 +1,50 @@
+/**
+ * @license
+ * 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.
+ */
+import "../_header/header.js";
+import "../_keyboard/keyboard.js";
+import {ClipboardController} from "../_clipboard/clipboard.js";
+import {ToolTipController} from "../_tooltip/tooltip.js";
+import {SelectNavController} from "../_outline/select.js";
+import {ModalController} from "../_modal/modal.js";
+for (const el of document.querySelectorAll(".js-clipboard")) {
+  new ClipboardController(el);
+}
+for (const el of document.querySelectorAll(".js-modal")) {
+  new ModalController(el);
+}
+for (const t of document.querySelectorAll(".js-tooltip")) {
+  new ToolTipController(t);
+}
+for (const el of document.querySelectorAll(".js-selectNav")) {
+  new SelectNavController(el);
+}
+(function setupGoogleTagManager() {
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    "gtm.start": new Date().getTime(),
+    event: "gtm.js"
+  });
+})();
+function removeUTMSource() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const utmSource = urlParams.get("utm_source");
+  if (utmSource !== "gopls" && utmSource !== "godoc" && utmSource !== "pkggodev") {
+    return;
+  }
+  const newURL = new URL(window.location.href);
+  urlParams.delete("utm_source");
+  newURL.search = urlParams.toString();
+  window.history.replaceState(null, "", newURL.toString());
+}
+if (document.querySelector(".js-gtmID")?.dataset.gtmid && window.dataLayer) {
+  window.dataLayer.push(function() {
+    removeUTMSource();
+  });
+} else {
+  removeUTMSource();
+}
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiYmFzZS50cyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiLyoqXG4gKiBAbGljZW5zZVxuICogQ29weXJpZ2h0IDIwMjAgVGhlIEdvIEF1dGhvcnMuIEFsbCByaWdodHMgcmVzZXJ2ZWQuXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhIEJTRC1zdHlsZVxuICogbGljZW5zZSB0aGF0IGNhbiBiZSBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlLlxuICovXG5cbmltcG9ydCAnLi4vX2hlYWRlci9oZWFkZXIuanMnO1xuaW1wb3J0ICcuLi9fa2V5Ym9hcmQva2V5Ym9hcmQuanMnO1xuaW1wb3J0IHsgQ2xpcGJvYXJkQ29udHJvbGxlciB9IGZyb20gJy4uL19jbGlwYm9hcmQvY2xpcGJvYXJkLmpzJztcbmltcG9ydCB7IFRvb2xUaXBDb250cm9sbGVyIH0gZnJvbSAnLi4vX3Rvb2x0aXAvdG9vbHRpcC5qcyc7XG5pbXBvcnQgeyBTZWxlY3ROYXZDb250cm9sbGVyIH0gZnJvbSAnLi4vX291dGxpbmUvc2VsZWN0LmpzJztcbmltcG9ydCB7IE1vZGFsQ29udHJvbGxlciB9IGZyb20gJy4uL19tb2RhbC9tb2RhbC5qcyc7XG5cbmZvciAoY29uc3QgZWwgb2YgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbDxIVE1MQnV0dG9uRWxlbWVudD4oJy5qcy1jbGlwYm9hcmQnKSkge1xuICBuZXcgQ2xpcGJvYXJkQ29udHJvbGxlcihlbCk7XG59XG5cbmZvciAoY29uc3QgZWwgb2YgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbDxIVE1MRGlhbG9nRWxlbWVudD4oJy5qcy1tb2RhbCcpKSB7XG4gIG5ldyBNb2RhbENvbnRyb2xsZXIoZWwpO1xufVxuXG5mb3IgKGNvbnN0IHQgb2YgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbDxIVE1MRGV0YWlsc0VsZW1lbnQ+KCcuanMtdG9vbHRpcCcpKSB7XG4gIG5ldyBUb29sVGlwQ29udHJvbGxlcih0KTtcbn1cblxuZm9yIChjb25zdCBlbCBvZiBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsPEhUTUxTZWxlY3RFbGVtZW50PignLmpzLXNlbGVjdE5hdicpKSB7XG4gIG5ldyBTZWxlY3ROYXZDb250cm9sbGVyKGVsKTtcbn1cblxuaW50ZXJmYWNlIFRhZ01hbmFnZXJFdmVudCB7XG4gIGV2ZW50OiBzdHJpbmc7XG4gICdndG0uc3RhcnQnOiBudW1iZXI7XG59XG5cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tdW51c2VkLXZhcnNcbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIFdpbmRvdyB7XG4gICAgZGF0YUxheWVyPzogKFRhZ01hbmFnZXJFdmVudCB8IFZvaWRGdW5jdGlvbilbXTtcbiAgfVxufVxuXG4vKipcbiAqIHNldHVwR29vZ2xlVGFnTWFuYWdlciBpbnRpYWxpemVzIEdvb2dsZSBUYWcgTWFuYWdlci5cbiAqL1xuKGZ1bmN0aW9uIHNldHVwR29vZ2xlVGFnTWFuYWdlcigpIHtcbiAgd2luZG93LmRhdGFMYXllciA9IHdpbmRvdy5kYXRhTGF5ZXIgfHwgW107XG4gIHdpbmRvdy5kYXRhTGF5ZXIucHVzaCh7XG4gICAgJ2d0bS5zdGFydCc6IG5ldyBEYXRlKCkuZ2V0VGltZSgpLFxuICAgIGV2ZW50OiAnZ3RtLmpzJyxcbiAgfSk7XG59KSgpO1xuXG4vKipcbiAqIHJlbW92ZVVUTVNvdXJjZSByZW1vdmVzIHRoZSB1dG1fc291cmNlIEdFVCBwYXJhbWV0ZXIgaWYgcHJlc2VudC5cbiAqIFRoaXMgaXMgZG9uZSB1c2luZyBKYXZhU2NyaXB0LCBzbyB0aGF0IHRoZSB1dG1fc291cmNlIGlzIHN0aWxsXG4gKiBjYXB0dXJlZCBieSBHb29nbGUgQW5hbHl0aWNzLlxuICovXG5mdW5jdGlvbiByZW1vdmVVVE1Tb3VyY2UoKSB7XG4gIGNvbnN0IHVybFBhcmFtcyA9IG5ldyBVUkxTZWFyY2hQYXJhbXMod2luZG93LmxvY2F0aW9uLnNlYXJjaCk7XG4gIGNvbnN0IHV0bVNvdXJjZSA9IHVybFBhcmFtcy5nZXQoJ3V0bV9zb3VyY2UnKTtcbiAgaWYgKHV0bVNvdXJjZSAhPT0gJ2dvcGxzJyAmJiB1dG1Tb3VyY2UgIT09ICdnb2RvYycgJiYgdXRtU291cmNlICE9PSAncGtnZ29kZXYnKSB7XG4gICAgcmV0dXJuO1xuICB9XG5cbiAgLyoqIFN0cmlwIHRoZSB1dG1fc291cmNlIHF1ZXJ5IHBhcmFtZXRlciBhbmQgcmVwbGFjZSB0aGUgVVJMLiAqKi9cbiAgY29uc3QgbmV3VVJMID0gbmV3IFVSTCh3aW5kb3cubG9jYXRpb24uaHJlZik7XG4gIHVybFBhcmFtcy5kZWxldGUoJ3V0bV9zb3VyY2UnKTtcbiAgbmV3VVJMLnNlYXJjaCA9IHVybFBhcmFtcy50b1N0cmluZygpO1xuICB3aW5kb3cuaGlzdG9yeS5yZXBsYWNlU3RhdGUobnVsbCwgJycsIG5ld1VSTC50b1N0cmluZygpKTtcbn1cblxuaWYgKGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3I8SFRNTEVsZW1lbnQ+KCcuanMtZ3RtSUQnKT8uZGF0YXNldC5ndG1pZCAmJiB3aW5kb3cuZGF0YUxheWVyKSB7XG4gIHdpbmRvdy5kYXRhTGF5ZXIucHVzaChmdW5jdGlvbiAoKSB7XG4gICAgcmVtb3ZlVVRNU291cmNlKCk7XG4gIH0pO1xufSBlbHNlIHtcbiAgcmVtb3ZlVVRNU291cmNlKCk7XG59XG4iXSwKICAibWFwcGluZ3MiOiAiQUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFPQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFFQSxXQUFXLE1BQU0sU0FBUyxpQkFBb0Msa0JBQWtCO0FBQzlFLE1BQUksb0JBQW9CO0FBQUE7QUFHMUIsV0FBVyxNQUFNLFNBQVMsaUJBQW9DLGNBQWM7QUFDMUUsTUFBSSxnQkFBZ0I7QUFBQTtBQUd0QixXQUFXLEtBQUssU0FBUyxpQkFBcUMsZ0JBQWdCO0FBQzVFLE1BQUksa0JBQWtCO0FBQUE7QUFHeEIsV0FBVyxNQUFNLFNBQVMsaUJBQW9DLGtCQUFrQjtBQUM5RSxNQUFJLG9CQUFvQjtBQUFBO0FBa0IxQixBQUFDLGtDQUFpQztBQUNoQyxTQUFPLFlBQVksT0FBTyxhQUFhO0FBQ3ZDLFNBQU8sVUFBVSxLQUFLO0FBQUEsSUFDcEIsYUFBYSxJQUFJLE9BQU87QUFBQSxJQUN4QixPQUFPO0FBQUE7QUFBQTtBQVNYLDJCQUEyQjtBQUN6QixRQUFNLFlBQVksSUFBSSxnQkFBZ0IsT0FBTyxTQUFTO0FBQ3RELFFBQU0sWUFBWSxVQUFVLElBQUk7QUFDaEMsTUFBSSxjQUFjLFdBQVcsY0FBYyxXQUFXLGNBQWMsWUFBWTtBQUM5RTtBQUFBO0FBSUYsUUFBTSxTQUFTLElBQUksSUFBSSxPQUFPLFNBQVM7QUFDdkMsWUFBVSxPQUFPO0FBQ2pCLFNBQU8sU0FBUyxVQUFVO0FBQzFCLFNBQU8sUUFBUSxhQUFhLE1BQU0sSUFBSSxPQUFPO0FBQUE7QUFHL0MsSUFBSSxTQUFTLGNBQTJCLGNBQWMsUUFBUSxTQUFTLE9BQU8sV0FBVztBQUN2RixTQUFPLFVBQVUsS0FBSyxXQUFZO0FBQ2hDO0FBQUE7QUFBQSxPQUVHO0FBQ0w7QUFBQTsiLAogICJuYW1lcyI6IFtdCn0K
--- a/static/frontend/frontend.js.map
+++ b/static/frontend/frontend.js.map
@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["base.ts"],
+  "sourcesContent": ["/**\n * @license\n * Copyright 2020 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\nimport '../_header/header.js';\nimport '../_keyboard/keyboard.js';\nimport { ClipboardController } from '../_clipboard/clipboard.js';\nimport { ToolTipController } from '../_tooltip/tooltip.js';\nimport { SelectNavController } from '../_outline/select.js';\nimport { ModalController } from '../_modal/modal.js';\n\nfor (const el of document.querySelectorAll<HTMLButtonElement>('.js-clipboard')) {\n  new ClipboardController(el);\n}\n\nfor (const el of document.querySelectorAll<HTMLDialogElement>('.js-modal')) {\n  new ModalController(el);\n}\n\nfor (const t of document.querySelectorAll<HTMLDetailsElement>('.js-tooltip')) {\n  new ToolTipController(t);\n}\n\nfor (const el of document.querySelectorAll<HTMLSelectElement>('.js-selectNav')) {\n  new SelectNavController(el);\n}\n\ninterface TagManagerEvent {\n  event: string;\n  'gtm.start': number;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ndeclare global {\n  interface Window {\n    dataLayer?: (TagManagerEvent | VoidFunction)[];\n  }\n}\n\n/**\n * setupGoogleTagManager intializes Google Tag Manager.\n */\n(function setupGoogleTagManager() {\n  window.dataLayer = window.dataLayer || [];\n  window.dataLayer.push({\n    'gtm.start': new Date().getTime(),\n    event: 'gtm.js',\n  });\n})();\n\n/**\n * removeUTMSource removes the utm_source GET parameter if present.\n * This is done using JavaScript, so that the utm_source is still\n * captured by Google Analytics.\n */\nfunction removeUTMSource() {\n  const urlParams = new URLSearchParams(window.location.search);\n  const utmSource = urlParams.get('utm_source');\n  if (utmSource !== 'gopls' && utmSource !== 'godoc' && utmSource !== 'pkggodev') {\n    return;\n  }\n\n  /** Strip the utm_source query parameter and replace the URL. **/\n  const newURL = new URL(window.location.href);\n  urlParams.delete('utm_source');\n  newURL.search = urlParams.toString();\n  window.history.replaceState(null, '', newURL.toString());\n}\n\nif (document.querySelector<HTMLElement>('.js-gtmID')?.dataset.gtmid && window.dataLayer) {\n  window.dataLayer.push(function () {\n    removeUTMSource();\n  });\n} else {\n  removeUTMSource();\n}\n"],
+  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOA,6BACA,iCACA,iEACA,2DACA,4DACA,qDAEA,SAAW,KAAM,UAAS,iBAAoC,iBAC5D,GAAI,GAAoB,GAG1B,SAAW,KAAM,UAAS,iBAAoC,aAC5D,GAAI,GAAgB,GAGtB,SAAW,KAAK,UAAS,iBAAqC,eAC5D,GAAI,GAAkB,GAGxB,SAAW,KAAM,UAAS,iBAAoC,iBAC5D,GAAI,GAAoB,GAkB1B,AAAC,WAAiC,CAChC,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CACpB,YAAa,GAAI,QAAO,UACxB,MAAO,eASX,YAA2B,CACzB,KAAM,GAAY,GAAI,iBAAgB,OAAO,SAAS,QAChD,EAAY,EAAU,IAAI,cAChC,GAAI,IAAc,SAAW,IAAc,SAAW,IAAc,WAClE,OAIF,KAAM,GAAS,GAAI,KAAI,OAAO,SAAS,MACvC,EAAU,OAAO,cACjB,EAAO,OAAS,EAAU,WAC1B,OAAO,QAAQ,aAAa,KAAM,GAAI,EAAO,YAG/C,AAAI,SAAS,cAA2B,cAAc,QAAQ,OAAS,OAAO,UAC5E,OAAO,UAAU,KAAK,UAAY,CAChC,MAGF",
+  "names": []
+}
--- a/static/frontend/frontend.tmpl
+++ b/static/frontend/frontend.tmpl
@ -0,0 +1,78 @@
+<!--
+  Copyright 2021 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.
+-->
+
+<!DOCTYPE html>
+<html lang="en" data-layout="{{if .UseResponsiveLayout}}responsive{{end}}">
+  <head>
+    <!-- This will capture unhandled errors during page load for reporting later. -->
+    <script>
+      window.addEventListener('error', window.__err=function f(e){f.p=f.p||[];f.p.push(e)});
+    </script>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    {{block "description" .}}
+      <meta name="description" content="Go is an open source programming language that makes it easy to build simple, reliable, and efficient software.">
+    {{end}}
+    <meta class="js-gtmID" data-gtmid="{{.GoogleTagManagerID}}">
+    <link rel="shortcut icon" href="/static/_icon/favicon.ico">
+    <!-- Only load the css reset for non-legacy pages -->
+    {{if not .UseSiteWrapper}}
+      <link href="/static/_base/reset.css" rel="stylesheet">
+    {{end}}
+    <link href="/static/_base/base.css" rel="stylesheet">
+    {{block "title" .}}
+      <title>pkg.go.dev</title>
+    {{end}}
+    {{block "pre-content" .}}{{end}}
+  </head>
+  <body>
+    <!-- loadScript appends JS sources to the document head. It loads scripts as asynchronous
+        modules eliminating parser-blocking JavaScript. -->
+    <script>
+      function loadScript(src) {
+        let s = document.createElement('script');
+        s.src = src;
+        s.type = 'module';
+        s.async = true;
+        s.defer = true
+        document.head.appendChild(s);
+      }
+      loadScript("/static/_base/base.js");
+    </script>
+    {{if .UseSiteWrapper}}
+      <div class="Site Site--wide Site--redesign">
+    {{end}}
+    {{template "header" .}}
+    {{if .UseSiteWrapper}}
+      <div class="Site-content">
+    {{end}}
+      {{template "main" .}}
+    {{if .UseSiteWrapper}}
+      </div>
+    {{end}}
+    {{template "footer" .}}
+    {{if .UseSiteWrapper}}
+      </div>
+    {{end}}
+    {{if .GoogleTagManagerID}}
+      <script>
+        // this will throw if the querySelector can’t find the element
+        const gtmId = document.querySelector('.js-gtmID').dataset.gtmid;
+        if (!gtmId) {
+          throw new Error('Google Tag Manager ID not found');
+        }
+        loadScript(`https://www.googletagmanager.com/gtm.js?id=${gtmId}`);
+      </script>
+      <noscript>
+        <iframe src="https://www.googletagmanager.com/ns.html?id={{.GoogleTagManagerID}}"
+                height="0" width="0" style="display:none;visibility:hidden">
+        </iframe>
+      </noscript>
+    {{end}}
+    {{block "post-content" .}}{{end}}
+  </body>
+</html>
--- a/static/frontend/frontend.ts
+++ b/static/frontend/frontend.ts
@ -0,0 +1,79 @@
+/**
+ * @license
+ * 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.
+ */
+
+import '../_header/header.js';
+import '../_keyboard/keyboard.js';
+import { ClipboardController } from '../_clipboard/clipboard.js';
+import { ToolTipController } from '../_tooltip/tooltip.js';
+import { SelectNavController } from '../_outline/select.js';
+import { ModalController } from '../_modal/modal.js';
+
+for (const el of document.querySelectorAll<HTMLButtonElement>('.js-clipboard')) {
+  new ClipboardController(el);
+}
+
+for (const el of document.querySelectorAll<HTMLDialogElement>('.js-modal')) {
+  new ModalController(el);
+}
+
+for (const t of document.querySelectorAll<HTMLDetailsElement>('.js-tooltip')) {
+  new ToolTipController(t);
+}
+
+for (const el of document.querySelectorAll<HTMLSelectElement>('.js-selectNav')) {
+  new SelectNavController(el);
+}
+
+interface TagManagerEvent {
+  event: string;
+  'gtm.start': number;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+declare global {
+  interface Window {
+    dataLayer?: (TagManagerEvent | VoidFunction)[];
+  }
+}
+
+/**
+ * setupGoogleTagManager intializes Google Tag Manager.
+ */
+(function setupGoogleTagManager() {
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    'gtm.start': new Date().getTime(),
+    event: 'gtm.js',
+  });
+})();
+
+/**
+ * removeUTMSource removes the utm_source GET parameter if present.
+ * This is done using JavaScript, so that the utm_source is still
+ * captured by Google Analytics.
+ */
+function removeUTMSource() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const utmSource = urlParams.get('utm_source');
+  if (utmSource !== 'gopls' && utmSource !== 'godoc' && utmSource !== 'pkggodev') {
+    return;
+  }
+
+  /** Strip the utm_source query parameter and replace the URL. **/
+  const newURL = new URL(window.location.href);
+  urlParams.delete('utm_source');
+  newURL.search = urlParams.toString();
+  window.history.replaceState(null, '', newURL.toString());
+}
+
+if (document.querySelector<HTMLElement>('.js-gtmID')?.dataset.gtmid && window.dataLayer) {
+  window.dataLayer.push(function () {
+    removeUTMSource();
+  });
+} else {
+  removeUTMSource();
+}
--- a/static/frontend/homepage/homepage.css
+++ b/static/frontend/homepage/homepage.css
@ -0,0 +1,138 @@
+/*!
+ * 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.
+ */
+
+.go-SearchForm {
+  display: none;
+}
+
+.Homepage-logo {
+  display: block;
+  height: 10rem;
+  margin: 3.125rem auto;
+  width: auto;
+}
+@media only screen and (min-width: 52rem) {
+  .Homepage {
+    margin: 2rem auto;
+  }
+  .Homepage-logo {
+    margin: 3.5rem auto;
+  }
+}
+.Homepage-searchForm input {
+  background: url('/static/_icon/search_gm_grey_24dp.svg') right no-repeat;
+  background-position: left 0.75rem center;
+  background-size: 1.5rem;
+  border: var(--border);
+  border-radius: 0.5rem 0 0 0.5rem;
+  color: var(--color-text);
+  font-size: 1rem;
+  height: 3rem;
+  padding-left: 2.75rem;
+  width: 37.6875rem;
+}
+.Homepage-buttonGroup {
+  display: flex;
+  justify-content: center;
+  margin: 2.5rem auto auto 0;
+}
+.Homepage-searchButton {
+  background-color: var(--color-button);
+  border: none;
+  border-radius: 0 0.5rem 0.5rem 0;
+  color: var(--color-button-text);
+  cursor: pointer;
+  font-size: 1em;
+  height: 3rem;
+  padding: 0 1.375rem;
+  width: 7.375rem;
+}
+.Homepage-searchHelp {
+  align-items: center;
+  display: block;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 45.0625rem;
+  text-align: center;
+  width: 100%;
+}
+@media only screen and (min-width: 30rem) {
+  .Homepage-searchHelp {
+    display: flex;
+  }
+}
+a.Homepage-helpLink {
+  align-items: center;
+  display: inline-flex;
+  font-size: 1em;
+  font-weight: initial;
+  margin-right: 0.5rem;
+  white-space: nowrap;
+}
+.Homepage-helpLink img {
+  height: 1rem;
+  margin-left: 0.25rem;
+  position: relative;
+  top: 0.1875rem;
+  width: 1rem;
+}
+.Homepage-exampleSearches {
+  align-items: center;
+  color: var(--color-text-subtle);
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-align: center;
+  width: 100%;
+}
+@media only screen and (min-width: 30rem) {
+  .Homepage-exampleSearches {
+    display: flex;
+  }
+}
+.Homepage-exampleSearchesLabel {
+  display: block;
+  margin-bottom: 1rem;
+  text-transform: uppercase;
+}
+@media only screen and (min-width: 30rem) {
+  .Homepage-exampleSearchesLabel {
+    display: inline;
+    margin-bottom: -0.1rem;
+  }
+}
+.Homepage-exampleSearch {
+  color: var(--color-brand-primary);
+  font-size: 1rem;
+  font-weight: initial;
+  padding: 0 0.625rem;
+}
+.Questions {
+  background: var(--color-background-accented);
+  color: var(--color-text);
+  display: flex;
+  padding-bottom: 1rem;
+  padding-top: 0.5rem;
+}
+.Questions-header {
+  color: var(--color-text);
+  font-weight: bold;
+  margin: 1rem 0;
+}
+.Questions-content {
+  flex-grow: 1;
+  margin: 0 auto;
+  max-width: 75.75rem;
+  padding: 0 1.5rem;
+}
+.Questions-content ul {
+  list-style: none;
+  padding-inline-start: 0;
+}
+.Questions-content ul > li {
+  font-size: 0.875rem;
+  line-height: 1.75rem;
+}
--- a/static/frontend/homepage/homepage.tmpl
+++ b/static/frontend/homepage/homepage.tmpl
@ -0,0 +1,61 @@
+<!--
+    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.
+-->
+
+{{define "pre-content"}}
+  <link href="/static/homepage/homepage.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{end}}
+
+{{define "main"}}
+  <main class="go-Container">
+    <div class="go-Content go-Content--center">
+      <img class="Homepage-logo" src="/static/_gopher/package-search.jpeg" alt="Cartoon gopher typing">
+      <form class="Homepage-searchForm" action="/search" role="search" data-gtmc="homepage search form"
+          aria-label="Search for a Package">
+        <div class="Homepage-buttonGroup">
+          <input
+            data-test-id="homepage-search"
+            id="AutoComplete"
+            role="textbox"
+            aria-label="Search for Go packages"
+            type="text"
+            name="q"
+            placeholder="Search for Go packages"
+            autocapitalize="off"
+            autocomplete="off"
+            autocorrect="off"
+            spellcheck="false"
+            title="Search for Go packages"
+            autofocus="true">
+          <button type="submit" class="Homepage-searchButton">Search</button>
+        </div>
+      </form>
+      <span class="Homepage-searchHelp">
+        <div class="Homepage-exampleSearches">
+          <span class="Homepage-exampleSearchesLabel">Example searches:</span>
+          <a class="Homepage-exampleSearch" href="/search?q=http">“http”</a>
+          <a class="Homepage-exampleSearch" href="/search?q=command">“command”</a>
+          <a class="Homepage-exampleSearch" href="/search?q=yaml+OR+json+OR+xml">“yaml OR json OR xml”</a>
+        </div>
+        <a href="/search-help" target="_blank" rel="noopener" class="Homepage-helpLink">
+          Search help <span><img width="24" height="24" src="/static/_icon/launch_gm_grey_24dp.svg" alt=""></span>
+        </a>
+      <span>
+    </div>
+  </main>
+{{end}}
+
+{{define "pre-footer"}}
+  <div class="Questions">
+    <div class="Questions-content">
+      <div class="Questions-header">Frequently asked questions:</div>
+      <ul>
+        <li><a href="https://go.dev/about#adding-a-package">How can I add a package?</a></li>
+        <li><a href="https://go.dev/about#removing-a-package">How can I remove a package?</a></li>
+        <li><a href="https://go.dev/about#creating-a-badge">How can I add a go badge in my README file?</a></li>
+      </ul>
+    </div>
+  </div>
+{{end}}
--- a/static/frontend/license-policy/license-policy.tmpl
+++ b/static/frontend/license-policy/license-policy.tmpl
@ -0,0 +1,64 @@
+<!--
+  Copyright 2021 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.
+-->
+
+{{define "title"}}<title>License Policy · pkg.go.dev</title>{{end}}
+
+{{define "main"}}
+  <style>
+    .LicenseTypes-list {
+      line-height: 1.25rem;
+      list-style: initial;
+      padding-left: 2.25rem;
+    }
+  </style>
+  <main class="go-Container">
+    <div class="go-Content">
+      <h1 data-test-id="license-policy-heading">License Disclaimer</h1>
+      <p>
+        The Go website displays license information in order to help users evaluate
+        packages for their intended use. Licenses are detected using heuristics
+        based on their file name and contents. We hope this information is helpful,
+        but this is not legal advice and we do not make any guarantees regarding
+        the accuracy of our license detection.
+      </p>
+      <p>
+        If we are not able to detect one of the licenses below, only
+        limited package and module information will be made available. If you are
+        a package author seeking to make your content available on the Go
+        website, please be aware that our detection algorithms can be affected by
+        any modifications of the license text, or by the use of an uncommon
+        license file name.
+      </p>
+      <p>
+        We currently use
+        <a href="https://pkg.go.dev/github.com/google/licensecheck">github.com/google/licensecheck</a>
+        for license detection, and look for licenses in files with the following names:
+        {{commaseparate .LicenseFileNames}}. The match is case-insensitive.
+      </p>
+      <p>
+        We currently detect and recognize the following licenses:
+        <ul class="LicenseTypes-list">
+          {{range .LicenseTypes -}}
+            <li>
+              {{if .URL -}}
+                <a href="{{.URL}}" target="_blank" rel="noopener">{{.Name}}</a>
+              {{else}}
+                {{.Name}}
+              {{- end}}
+            </li>
+          {{- end}}
+        </ul>
+      </p>
+      <p>
+        If you use a package whose license is not detected, please inform the package author.
+        If you are a package author who believes a license for one of your packages
+        should have been detected and was not, please check for discrepancies between your license
+        and the official text. If you still believe there is an error, please
+        <a href="https://golang.org/s/pkgsite-feedback">file an issue</a>.
+      </p>
+    </div>
+  </main>
+{{end}}
--- a/static/frontend/search-help/search-help.tmpl
+++ b/static/frontend/search-help/search-help.tmpl
@ -0,0 +1,23 @@
+<!--
+  Copyright 2021 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.
+-->
+
+{{define "title"}}<title>Search Help · pkg.go.dev</title>{{end}}
+
+{{define "main"}}
+  <main class="go-Container">
+    <div class="go-Content">
+      <h1>Search help</h1>
+        <p>You can use symbols or words in your search to make your search results more precise.</p>
+        <h2>Search for an exact match</h2>
+        <p>Put a word or phrase inside quotes. For example, <a href="/search?q=&quot;go+cloud&quot;">"go cloud"</a>.</p>
+        <h2>Combine searches</h2>
+        <p>Put OR between each search query. For example, <a href="/search?q=yaml+OR+json">yaml OR json</a>.</p>
+        <h2>Search by package path</h2>
+        <p>You can search for a package by its full or partial import path. For example, <a href="/search?q=go%2Fpackages">go/packages</a>.</p>
+        <p>If the query matches a package import path, you will be redirected to the package details page for the latest version of that package. For example, <a href="/search?q=golang.org/x/tools/go/packages">golang.org/x/tools/go/packages</a>.</p>
+    </div>
+  </main>
+{{end}}
--- a/static/frontend/search/_pagination.tmpl
+++ b/static/frontend/search/_pagination.tmpl
@ -0,0 +1,39 @@
+<!--
+  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.
+-->
+
+{{define "pagination_summary"}}
+  {{- if gt .TotalCount .ResultCount -}}
+    {{- add .Offset 1}} – {{add .Offset .ResultCount}} of
+  {{- end}} {{if .Approximate}}about {{end}}{{.TotalCount -}}
+{{end}}
+
+{{define "pagination_nav"}}
+  {{if gt (len .Pages) 1}}
+    <div class="Pagination-nav">
+      <div class="Pagination-navInner">
+        {{ $pagination := . }}
+        {{if .PrevPage}}
+          <a class="Pagination-previous" href="{{.PageURL .PrevPage}}">Previous</a>
+        {{else}}
+          <span class="Pagination-previous" aria-disabled="true">Previous</span>
+        {{end}}
+        {{$page := .Page}}
+        {{range $i := .Pages}}
+          {{if eq $i $page}}
+            <b class="Pagination-number">{{$i}}</b>
+          {{else}}
+            <a class="Pagination-number" href="{{$pagination.PageURL $i}}">{{$i}}</a>
+          {{end}}
+        {{end}}
+        {{if .NextPage}}
+          <a class="Pagination-next" href="{{.PageURL .NextPage}}">Next</a>
+        {{else}}
+          <span class="Pagination-next" aria-disabled="true">Next</span>
+        {{end}}
+      </div>
+    </div>
+  {{end}}
+{{end}}
--- a/static/frontend/search/search.css
+++ b/static/frontend/search/search.css
@ -0,0 +1,120 @@
+/*
+ * Copyright 2021 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.
+ */
+
+.SearchResults {
+  margin: 0 auto;
+  max-width: 60em;
+  padding: 2rem 0;
+}
+.SearchResults-header {
+  font-size: 1.875rem;
+}
+.SearchResults-resultCount {
+  display: flex;
+  justify-content: space-between;
+}
+.SearchResults-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.LegacySearchSnippet {
+  border-top: var(--border);
+  padding: 1rem 0;
+}
+.LegacySearchSnippet-header {
+  font-size: 1.5rem;
+  margin: 0 0 0.3125rem;
+}
+.SearchSnippet {
+  padding: 1rem 0;
+}
+.SearchSnippet:only-of-type,
+.SearchSnippet:last-of-type {
+  border-bottom: var(--border);
+  margin-bottom: 1rem;
+}
+.SearchSnippet-synopsis {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  margin: 0 0 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.SearchSnippet-infoLabel {
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.SearchSnippet-infoLabelDivider {
+  margin-left: 2rem;
+}
+.SearchSnippet-sub {
+  font-size: 0.875rem;
+  margin-top: 0.3125rem;
+}
+.SearchSnippet-breadcrumb {
+  color: var(--color-text-subtle);
+  font-size: 0.75rem;
+}
+.SearchSnippet-version {
+  font-size: 0.75rem;
+}
+.SearchSnippet-headerContainer {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+}
+.SearchSnippet-header {
+  font-size: 1.5rem;
+  margin: 0 0 0.3125rem 0;
+}
+.SearchSnippet-symbol {
+  background: var(--blue);
+  border-radius: 1rem;
+  padding: 0 0.375rem;
+}
+
+.Pagination-nav {
+  display: flex;
+}
+.Pagination-navInner {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+}
+.Pagination-previous[aria-disabled='true'],
+.Pagination-next[aria-disabled='true'] {
+  color: var(--color-text-subtle);
+}
+.Pagination-number {
+  color: var(--color-text);
+  padding: 0 0.375rem;
+}
+
+.SearchResults .Pagination-nav,
+.SearchResults-help,
+.SearchResults-resultCount {
+  flex-wrap: wrap;
+  font-size: 0.875rem;
+}
+@media only screen and (min-width: 50rem) {
+  .SearchResults .Pagination-nav,
+  .SearchResults-help,
+  .SearchResults-resultCount {
+    flex-wrap: wrap;
+    font-size: 1.125rem;
+  }
+  .Pagination-navInner {
+    max-width: 25rem;
+  }
+  .Pagination-previous {
+    margin-right: 0.75rem;
+  }
+  .Pagination-next {
+    margin-left: 0.75rem;
+  }
+}
--- a/static/frontend/search/search.tmpl
+++ b/static/frontend/search/search.tmpl
@ -0,0 +1,160 @@
+<!--
+  Copyright 2021 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.
+-->
+
+{{define "title"}}
+  <title>{{.Query}} - Search Results · pkg.go.dev</title>
+{{end}}
+
+{{define "pre-content"}}
+  <link href="/static/search/search.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{end}}
+
+{{define "main"}}
+  <main class="go-Container">
+    <div class="go-Content">
+      <h1 class="SearchResults-header">Results for “{{.Query}}”</h1>
+      <div class="SearchResults-help"><a href="/search-help">Search help</a></div>
+      <div class="SearchResults-resultCount go-textSubtle">
+        {{template "pagination_summary" .Pagination}} {{pluralize .Pagination.TotalCount "result"}}
+        {{template "pagination_nav" .Pagination}}
+      </div>
+        {{if eq (len .Results) 0}}
+          <div>
+            <img class="SearchResults-emptyContentGopher" width="945" height="1200"
+                src="/static/_gopher/airplane-1200x945.svg" alt="The Go Gopher">
+            <h3 class="SearchResults-emptyContentMessage">No results found.</h3>
+            <p class="SearchResults-emptyContentMessage">
+              If you think “{{.Query}}” is a valid package or module, you could try downloading it by visiting <a href="https://pkg.go.dev/{{.Query}}">pkg.go.dev/{{.Query}}</a>.
+            </p>
+          </div>
+        {{else}}
+          <div>{{/* Containing element is needed to use *-of-type selectors */}}
+            {{if (.Experiments.IsActive "search-grouping")}}
+              {{template "grouped_search" .}}
+            {{else}}
+              {{template "legacy_search" .}}
+            {{end}}
+          </div>
+        {{end}}
+      <div class="SearchResults-footer">
+        {{template "pagination_nav" .Pagination}}
+      </div>
+    </div>
+  </main>
+{{end}}
+
+
+{{define "legacy_search"}}
+  {{$query := .Query}}
+  {{range $i, $v := .Results}}
+    <div class="LegacySearchSnippet">
+      <h2 class="LegacySearchSnippet-header">
+        <a href="/{{$v.PackagePath}}" data-gtmc="search result" data-gtmv="{{$i}}"
+            data-test-id="snippet-title">
+          {{$v.PackagePath}}
+        </a>
+      </h2>
+      <p class="SearchSnippet-synopsis go-textSubtle" data-test-id="snippet-synopsis">{{$v.Synopsis}}</p>
+      <div class="SearchSnippet-infoLabel">
+        <strong class="InfoLabel-title">Version:</strong>
+        <span data-test-id="snippet-version"> {{$v.DisplayVersion}}</span>
+        <span class="InfoLabel-divider">|</span>
+        <strong class="InfoLabel-title">Published:</strong>
+        <span data-test-id="snippet-published"> {{$v.CommitTime}}</span>
+        <span class="InfoLabel-divider">|</span>
+        <strong class="InfoLabel-title">Imported by:</strong>
+        <span data-test-id="snippet-importedby"> {{$v.NumImportedBy}}</span>
+        <span class="InfoLabel-divider">|</span>
+        <strong class="InfoLabel-title">{{pluralize (len $v.Licenses) "License"}}:</strong>
+        <span data-test-id="snippet-license">
+          {{if $v.Licenses}}
+            {{commaseparate $v.Licenses}}
+          {{else}}
+            <span>N/A</span>
+          {{end}}
+        </span>
+      </div>
+      {{with .SameModule}}
+        <div class="SearchSnippet-sub">
+          <span>{{.Heading}}</span>
+          {{range $i, $v := .Links}}
+            <a href="/{{$v.Href}}" data-gtmc="search result" data-gtmv="{{$i}}">{{$v.Body}}</a>
+          {{end}}
+          <span>{{.Suffix}}</span>
+        </div>
+      {{end}}
+      {{with .LowerMajor}}
+        <div class="SearchSnippet-sub">
+          <span>{{.Heading}}</span>
+          {{range $i, $v := .Links}}
+            <a href="/{{$v.Href}}" data-gtmc="search result" data-gtmv="{{$i}}">{{$v.Body}}</a>
+          {{end}}
+        </div>
+      {{end}}
+    </div> <!-- SearchSnippet -->
+  {{end}}
+{{end}}
+
+{{define "grouped_search"}}
+  {{$query := .Query}}
+  {{range $i, $v := .Results}}
+    <div class="SearchSnippet">
+      <div class="SearchSnippet-breadcrumb">{{$v.PackagePath}}</div>
+      <div class="SearchSnippet-headerContainer">
+        <h2 class="SearchSnippet-header">
+          <a href="/{{$v.PackagePath}}" data-gtmc="search result" data-gtmv="{{$i}}"
+              data-test-id="snippet-title">
+            {{$v.Name}}
+          </a>
+          <span class="SearchSnippet-version">{{$v.DisplayVersion}}</span>
+        </h2>
+        {{with .Symbols}}
+          <div class="SearchSnippet-symbolContainer">
+            <span class="SearchSnippet-symbolHeading">{{.Heading}}</span>
+            {{range $i, $v := .Links}}
+              <a class="SearchSnippet-symbol" href="/{{$v.Href}}">{{$v.Body}}</a>
+            {{end}}
+            <span>{{.Suffix}}</span>
+          </div>
+        {{end}}
+      </div>
+      <p class="SearchSnippet-synopsis go-textSubtle" data-test-id="snippet-synopsis">{{$v.Synopsis}}</p>
+      <div class="SearchSnippet-infoLabel">
+        <span class="InfoLabel-title">Published:</span>
+        <span data-test-id="snippet-published"> {{$v.CommitTime}}</span>
+        <span class="SearchSnippet-infoLabelDivider"></span>
+        <span class="InfoLabel-title">{{pluralize (len $v.Licenses) "License"}}:</span>
+        <span data-test-id="snippet-license">
+          {{if $v.Licenses}}
+            {{commaseparate $v.Licenses}}
+          {{else}}
+            <span>N/A</span>
+          {{end}}
+        </span>
+        <span class="SearchSnippet-infoLabelDivider"></span>
+        <span class="InfoLabel-title">Imported by:</span>
+        <span data-test-id="snippet-importedby"><strong>{{$v.NumImportedBy}}</b></spastrong>
+      </div>
+      {{with .SameModule}}
+        <div class="SearchSnippet-sub">
+          <span>{{.Heading}}</span>
+          {{range $i, $v := .Links}}
+            <a href="/{{$v.Href}}" data-gtmc="search result same module" data-gtmv="{{$i}}">{{$v.Body}}</a>
+          {{end}}
+          <span>{{.Suffix}}</span>
+        </div>
+      {{end}}
+      {{with .LowerMajor}}
+        <div class="SearchSnippet-sub">
+          <span>{{.Heading}}</span>
+          {{range $i, $v := .Links}}
+            <a href="/{{$v.Href}}" data-gtmc="search result lower major" data-gtmv="{{$i}}">{{$v.Body}}</a>
+          {{end}}
+        </div>
+      {{end}}
+    </div> <!-- SearchSnippet -->
+  {{end}}
+{{end}}
--- a/static/frontend/styleguide/styleguide.css
+++ b/static/frontend/styleguide/styleguide.css
@ -0,0 +1,139 @@
+/*!
+ * Copyright 2021 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.
+ */
+
+@import url('../unit/main/_meta.css');
+
+.StyleGuide {
+  background-color: var(--color-background);
+}
+.StyleGuide > section {
+  align-items: center;
+  display: grid;
+  gap: 1rem 2rem;
+  grid-template-columns: 100%;
+  margin-bottom: 1rem;
+}
+.StyleGuide > section > header {
+  border-bottom: var(--border);
+  grid-column: 1/-1;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+}
+.StyleGuide > section > h2 {
+  grid-column: 1/-1;
+  width: max-content;
+}
+.StyleGuide > section > hr {
+  grid-column: 1/-1;
+}
+.StyleGuide > section > h3 {
+  grid-column: 1/-1;
+  margin: 1rem 0;
+}
+.StyleGuide > section > p {
+  grid-column: 1/-1;
+}
+.StyleGuide .Color,
+.StyleGuide .ColorIntent {
+  grid-template-columns: repeat(auto-fit, 5rem [col-start] minmax(12rem, auto) [col-end]);
+}
+.StyleGuide .Outline {
+  align-items: flex-start;
+}
+.StyleGuide .Outline > span {
+  margin-top: 0.5rem;
+}
+@media (min-width: 80rem) {
+  .StyleGuide .Icon {
+    grid-template-columns: 10rem 8rem auto;
+  }
+  .StyleGuide .Typography,
+  .StyleGuide .Button,
+  .StyleGuide .Form,
+  .StyleGuide .Modal,
+  .StyleGuide .Message,
+  .StyleGuide .Breadcrumb,
+  .StyleGuide .Chip,
+  .StyleGuide .Tooltip,
+  .StyleGuide .Outline,
+  .StyleGuide .Clipboard {
+    grid-template-columns: 20rem auto;
+  }
+}
+@media (min-width: 112rem) {
+  .StyleGuide .Icon {
+    grid-template-columns: 10rem auto 50%;
+  }
+  .StyleGuide .Typography,
+  .StyleGuide .Button,
+  .StyleGuide .Form,
+  .StyleGuide .Modal,
+  .StyleGuide .Message,
+  .StyleGuide .Breadcrumb,
+  .StyleGuide .Chip,
+  .StyleGuide .Tooltip,
+  .StyleGuide .Outline,
+  .StyleGuide .Clipboard {
+    grid-template-columns: auto 50%;
+  }
+}
+
+.StringifyElement {
+  align-items: baseline;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0.25rem;
+}
+.ElementMarkup > pre,
+.StringifyElement-markup {
+  color: var(--color-text-subtle);
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+  max-width: 100%;
+  padding-left: 2rem;
+  position: relative;
+}
+.ElementMarkup > pre::before,
+.StringifyElement-markup::before {
+  background: url(/static/_icon/content_copy_gm_grey_24dp.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+  content: ' ';
+  left: 0.5rem;
+  padding-left: 1rem;
+  position: absolute;
+  width: 1rem;
+}
+.StringifyElement-markup:active {
+  filter: contrast(0.9);
+}
+.StringifyElement-details {
+  color: var(--color-text-subtle);
+  font-size: 0.8125rem;
+  overflow-x: auto;
+}
+.GoColor-circle {
+  background-color: var(--color);
+  border: var(--border);
+  border-radius: 2rem;
+  height: 3rem;
+  margin: auto;
+  margin-bottom: 0.5rem;
+  width: 3rem;
+}
+.GoIcon-title,
+.GoColor-title {
+  text-transform: capitalize;
+}
+
+.go-Main-navDesktop a + ul {
+  text-transform: capitalize;
+}
+
+.MainHeader-toggle {
+  display: flex;
+}
--- a/static/frontend/styleguide/styleguide.js
+++ b/static/frontend/styleguide/styleguide.js
@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2021 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.
+ */import{SelectNavController as o,makeSelectNav as l}from"../_outline/select.js";import{TreeNavController as i}from"../_outline/tree.js";window.addEventListener("load",()=>{const e=document.querySelector(".js-tree");if(e){const t=new i(e),r=l(t);document.querySelector(".js-mainNavMobile")?.appendChild(r)}const s=document.querySelector(".Outline .js-tree");if(s){const t=new i(s),r=l(t);document.querySelector(".Outline .js-select")?.appendChild(r)}for(const t of document.querySelectorAll(".js-toggleTheme"))t.addEventListener("click",r=>{const n=r.currentTarget.getAttribute("data-value");document.documentElement.setAttribute("data-theme",String(n))});for(const t of document.querySelectorAll(".js-toggleLayout"))t.addEventListener("click",r=>{const n=r.currentTarget.getAttribute("data-value");document.documentElement.setAttribute("data-layout",String(n))});for(const t of document.querySelectorAll(".js-selectNav"))new o(t)}),customElements.define("go-color",class extends HTMLElement{constructor(){super();this.style.setProperty("display","contents");const e=this.id;this.removeAttribute("id"),this.innerHTML=`
+        <div style="--color: var(${e});" class="GoColor-circle"></div>
+        <span>
+          <div id="${e}" class="go-textLabel GoColor-title">${e.replace("--color-","").replaceAll("-"," ")}</div>
+          <pre class="StringifyElement-markup">var(${e})</pre>
+        </span>
+      `,this.querySelector("pre")?.addEventListener("click",()=>{navigator.clipboard.writeText(`var(${e})`)})}}),customElements.define("go-icon",class extends HTMLElement{constructor(){super();this.style.setProperty("display","contents");const e=this.getAttribute("name");this.innerHTML=`<p id="icon-${e}" class="go-textLabel GoIcon-title">${e.replaceAll("_"," ")}</p>
+        <stringify-el>
+          <img class="go-Icon" height="24" width="24" src="/static/_icon/${e}_gm_grey_24dp.svg" alt="">
+        </stringify-el>
+      `}}),customElements.define("clone-el",class extends HTMLElement{constructor(){super();this.style.setProperty("display","contents");const e=this.getAttribute("selector");if(!e)return;const s="    "+document.querySelector(e)?.outerHTML;this.innerHTML=`
+        <stringify-el collapsed>${s}</stringify-el>
+      `}}),customElements.define("stringify-el",class extends HTMLElement{constructor(){super();this.style.setProperty("display","contents");const e=this.innerHTML,s=this.id?` id="${this.id}"`:"";this.removeAttribute("id");let t='<pre class="StringifyElement-markup">'+a(c(e))+"</pre>";this.hasAttribute("collapsed")&&(t=`<details class="StringifyElement-details"><summary>Markup</summary>${t}</details>`),this.innerHTML=`<span${s}>${e}</span>${t}`,this.querySelector("pre")?.addEventListener("click",()=>{navigator.clipboard.writeText(e)})}});function c(e){return e.split(`
+`).reduce((s,t)=>{if(s.result.length===0){const r=t.indexOf("<");s.start=r===-1?0:r}return t=t.slice(s.start),t&&s.result.push(t),s},{result:[],start:0}).result.join(`
+`)}function a(e){return e?.replaceAll("<","&lt;")?.replaceAll(">","&gt;")}
+//# sourceMappingURL=styleguide.js.map
--- a/static/frontend/styleguide/styleguide.js.map
+++ b/static/frontend/styleguide/styleguide.js.map
--- a/static/frontend/styleguide/styleguide.tmpl
+++ b/static/frontend/styleguide/styleguide.tmpl
@ -0,0 +1,177 @@
+<!--
+  Copyright 2021 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.
+-->
+
+{{define "title"}}<title>Style Guide · pkg.go.dev</title>{{end}}
+
+{{define "main-styles"}}
+  <link href="/static/styleguide/styleguide.css" rel="stylesheet">
+{{end}}
+
+{{define "main-scripts"}}
+  <script type="module">
+    loadScript("/static/styleguide/styleguide.js", {async: true})
+  </script>
+{{end}}
+
+{{define "main-banner"}}
+  <div class="go-Message go-Message--notice">
+    <img class="go-Icon" height="24" width="24" src="/static/_icon/info_gm_grey_24dp.svg" alt="Notice">&nbsp;
+    Work in progess.
+  </div>
+{{end}}
+
+{{define "main-header"}}
+  <nav class="go-Main-headerBreadcrumb go-Breadcrumb" aria-label="Breadcrumb">
+    <ol>
+      <li><a href="/" data-gtmc="breadcrumb link">Discover Packages</a></li>
+      <li>
+        <a href="#breadcrumb" data-gtmc="breadcrumb link" aria-current="location">Style Guide</a>
+      </li>
+    </ol>
+  </nav>
+  <div class="go-Main-headerContent">
+    <div class="go-Main-headerTitle">
+      <a class="go-Main-headerLogo" href="https://go.dev/" aria-hidden="true" tabindex="-1" data-gtmc="header link"
+          aria-label="Link to Go Homepage">
+        <img height="78" width="207" src="/static/_logo/go-blue.svg" alt="Go">
+      </a>
+      <h1 class="go-Main-headerTitle">Style Guide</h1>
+    </div>
+    <div class="go-Main-headerDetails">
+      <fieldset class="go-Main-headerDetailItem go-Label go-Label--inline MainHeader-toggle">
+        <legend>Theme</legend>
+        <div class="go-InputGroup">
+          <button class="go-Button go-Button--inverted js-toggleTheme" data-value="light" title="Light"
+              aria-label="Set light theme">
+            <img class="go-Icon" height="24" width="24" src="/static/_icon/light_mode_gm_grey_24dp.svg"
+                alt="">
+          </button>
+          <button class="go-Button go-Button--inverted js-toggleTheme" data-value="dark" title="Dark"
+              aria-label="Set dark theme">
+            <img class="go-Icon" height="24" width="24" alt=""
+              src="/static/_icon/brightness_2_gm_grey_24dp.svg">
+          </button>
+        </div>
+      </fieldset>
+      <fieldset class="go-Main-headerDetailItem go-Label go-Label--inline MainHeader-toggle">
+        <legend>Layout</legend>
+        <div class="go-InputGroup">
+          <button class="go-Button go-Button--inverted js-toggleLayout" data-value="responsive"
+              title="Responsive" aria-label="Set responsive layout">
+            <img class="go-Icon" height="24" width="24" src="/static/_icon/responsive_layout_gm_grey_24dp.svg"
+                alt="">
+          </button>
+          <button class="go-Button go-Button--inverted js-toggleLayout" data-value="stacked"
+              title="Stacked" aria-label="Set stacked layout">
+            <img class="go-Icon" height="24" width="24" src="/static/_icon/table_rows_gm_grey_24dp.svg"
+                alt="">
+          </button>
+          <button class="go-Button go-Button--inverted js-toggleLayout" data-value="compact"
+              title="Compact" aria-label="Set compact layout">
+            <img class="go-Icon" height="24" width="24" src="/static/_icon/toolbar_gm_grey_24dp.svg"
+                alt="">
+          </button>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+{{end}}
+
+{{define "main-nav"}}
+  <div class="go-Main-navDesktop">
+    {{template "tree-nav" .Outline}}
+  </div>
+  <div class="go-Main-navMobile js-mainNavMobile">
+    <!-- Generated -->
+  </div>
+{{end}}
+
+{{define "main-content"}}
+  <div class="StyleGuide">
+    {{range .Sections}}
+      <section class="{{.Title}}">
+        {{.Content}}
+      </section>
+    {{end}}
+  </div>
+{{end}}
+
+{{define "main-aside"}}
+  <div class="UnitMeta">
+    <h2 class="go-textLabel UnitMeta-detailsTitle">Details</h2>
+    <ul class="UnitMeta-details">
+      <li>
+        <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
+          <summary>
+            <img class="go-Icon" src="/static/_icon/check_circle_gm_grey_24dp.svg" alt="checked"
+                height="24" width="24">
+            Valid <a href="https://github.com/example.com/module/tree/v1.0.0/go.mod" target="_blank"
+                rel="noreferrer">go.mod</a> file
+            <img class="go-Icon" src="/static/_icon/help_gm_grey_24dp.svg" alt="" height="24"
+                width="24">
+          </summary>
+          <p>
+            The Go module system was introduced in Go 1.11 and is the official dependency management
+            solution for Go.
+          </p>
+        </details>
+      </li>
+      <li>
+        <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
+          <summary>
+            <img class="go-Icon" src="/static/_icon/check_circle_gm_grey_24dp.svg" alt="checked"
+                height="24" width="24">
+            Redistributable license
+            <img class="go-Icon" src="/static/_icon/help_gm_grey_24dp.svg" alt="" height="24"
+                width="24">
+          </summary>
+          <p>
+            Redistributable licenses place minimal restrictions on how software can be used,
+            modified, and redistributed.
+          </p>
+        </details>
+      </li>
+      <li>
+        <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
+          <summary>
+            <img class="go-Icon" src="/static/_icon/check_circle_gm_grey_24dp.svg" alt="checked"
+                height="24" width="24">
+            Tagged version
+            <img class="go-Icon" src="/static/_icon/help_gm_grey_24dp.svg" alt="" height="24"
+                width="24">
+          </summary>
+          <p>Modules with tagged versions give importers more predictable builds.</p>
+        </details>
+      </li>
+      <li>
+        <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
+          <summary>
+            <img class="go-Icon" src="/static/_icon/check_circle_gm_grey_24dp.svg" alt="checked"
+                height="24" width="24">
+            Stable version
+            <img class="go-Icon" src="/static/_icon/help_gm_grey_24dp.svg" alt="" height="24"
+                width="24">
+          </summary>
+          <p>When a project reaches major version v1 it is considered stable.</p>
+        </details>
+      </li>
+    </ul>
+    <div class="UnitMeta-learn">
+      <a href="https://go.dev/about#best-practices-h2">Learn more</a>
+    </div>
+    <h2 class="go-textLabel">Repository</h2>
+    <div class="UnitMeta-repo">
+      <a href="https://github.com/example.com/module" title="https://github.com/example.com/module"
+          target="_blank" rel="noopener">
+        github.com/example.com/module
+      </a>
+    </div>
+  </div>
+{{end}}
+
+{{define "main-footer"}}
+
+{{end}}
--- a/static/frontend/styleguide/styleguide.ts
+++ b/static/frontend/styleguide/styleguide.ts
@ -0,0 +1,158 @@
+/**
+ * @license
+ * Copyright 2021 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.
+ */
+
+import { SelectNavController, makeSelectNav } from '../_outline/select.js';
+import { TreeNavController } from '../_outline/tree.js';
+
+window.addEventListener('load', () => {
+  const tree = document.querySelector<HTMLElement>('.js-tree');
+  if (tree) {
+    const treeCtrl = new TreeNavController(tree);
+    const select = makeSelectNav(treeCtrl);
+    document.querySelector('.js-mainNavMobile')?.appendChild(select);
+  }
+
+  const guideTree = document.querySelector<HTMLElement>('.Outline .js-tree');
+  if (guideTree) {
+    const treeCtrl = new TreeNavController(guideTree);
+    const select = makeSelectNav(treeCtrl);
+    document.querySelector('.Outline .js-select')?.appendChild(select);
+  }
+
+  for (const el of document.querySelectorAll('.js-toggleTheme')) {
+    el.addEventListener('click', e => {
+      const value = (e.currentTarget as HTMLButtonElement).getAttribute('data-value');
+      document.documentElement.setAttribute('data-theme', String(value));
+    });
+  }
+  for (const el of document.querySelectorAll('.js-toggleLayout')) {
+    el.addEventListener('click', e => {
+      const value = (e.currentTarget as HTMLButtonElement).getAttribute('data-value');
+      document.documentElement.setAttribute('data-layout', String(value));
+    });
+  }
+
+  for (const el of document.querySelectorAll<HTMLSelectElement>('.js-selectNav')) {
+    new SelectNavController(el);
+  }
+});
+
+customElements.define(
+  'go-color',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      this.style.setProperty('display', 'contents');
+      // The current version of TypeScript is not aware of String.replaceAll.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const name = this.id as any;
+      this.removeAttribute('id');
+      this.innerHTML = `
+        <div style="--color: var(${name});" class="GoColor-circle"></div>
+        <span>
+          <div id="${name}" class="go-textLabel GoColor-title">${name
+        .replace('--color-', '')
+        .replaceAll('-', ' ')}</div>
+          <pre class="StringifyElement-markup">var(${name})</pre>
+        </span>
+      `;
+      this.querySelector('pre')?.addEventListener('click', () => {
+        navigator.clipboard.writeText(`var(${name})`);
+      });
+    }
+  }
+);
+
+customElements.define(
+  'go-icon',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      this.style.setProperty('display', 'contents');
+      // The current version of TypeScript is not aware of String.replaceAll.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const name = this.getAttribute('name') as any;
+      this.innerHTML = `<p id="icon-${name}" class="go-textLabel GoIcon-title">${name.replaceAll(
+        '_',
+        ' '
+      )}</p>
+        <stringify-el>
+          <img class="go-Icon" height="24" width="24" src="/static/_icon/${name}_gm_grey_24dp.svg" alt="">
+        </stringify-el>
+      `;
+    }
+  }
+);
+
+customElements.define(
+  'clone-el',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      this.style.setProperty('display', 'contents');
+      const selector = this.getAttribute('selector');
+      if (!selector) return;
+      const html = '    ' + document.querySelector(selector)?.outerHTML;
+      this.innerHTML = `
+        <stringify-el collapsed>${html}</stringify-el>
+      `;
+    }
+  }
+);
+
+customElements.define(
+  'stringify-el',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      this.style.setProperty('display', 'contents');
+      const html = this.innerHTML;
+      const idAttr = this.id ? ` id="${this.id}"` : '';
+      this.removeAttribute('id');
+      let markup = `<pre class="StringifyElement-markup">` + escape(trim(html)) + `</pre>`;
+      if (this.hasAttribute('collapsed')) {
+        markup = `<details class="StringifyElement-details"><summary>Markup</summary>${markup}</details>`;
+      }
+      this.innerHTML = `<span${idAttr}>${html}</span>${markup}`;
+      this.querySelector('pre')?.addEventListener('click', () => {
+        navigator.clipboard.writeText(html);
+      });
+    }
+  }
+);
+
+/**
+ * trim removes excess indentation from html markup by
+ * measuring the number of spaces in the first line of
+ * the given string and removing that number of spaces
+ * from the beginning of each line.
+ */
+function trim(html: string) {
+  return html
+    .split('\n')
+    .reduce<{ result: string[]; start: number }>(
+      (acc, val) => {
+        if (acc.result.length === 0) {
+          const start = val.indexOf('<');
+          acc.start = start === -1 ? 0 : start;
+        }
+        val = val.slice(acc.start);
+        if (val) {
+          acc.result.push(val);
+        }
+        return acc;
+      },
+      { result: [], start: 0 }
+    )
+    .result.join('\n');
+}
+
+function escape(html: string) {
+  // The current version of TypeScript is not aware of String.replaceAll.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (html as any)?.replaceAll('<', '&lt;')?.replaceAll('>', '&gt;');
+}
--- a/static/frontend/unit/_header.css
+++ b/static/frontend/unit/_header.css
@ -0,0 +1,125 @@
+/*!
+ * Copyright 2020-2021 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.
+ */
+
+.UnitHeader-overflowContainer {
+  display: none;
+  height: 1.5rem;
+  position: absolute;
+  right: 1rem;
+  width: 1.5rem;
+}
+.go-Main-header[data-fixed] .UnitHeader-overflowContainer {
+  display: block;
+}
+@media screen and (min-width: 80rem) {
+  .go-Main-header[data-fixed] .UnitHeader-overflowContainer {
+    display: none;
+  }
+}
+.UnitHeader-overflowImage {
+  fill: var(--gray-3);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.UnitHeader-overflowSelect {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: transparent;
+  cursor: pointer;
+  font-size: 1rem;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.UnitHeader-overflowSelect option {
+  color: var(--color-text);
+}
+
+.UnitHeader-versionBadge,
+.DetailsHeader-badge {
+  border-radius: unset;
+  color: var(--color-text-inverted);
+  font-size: 0.7rem;
+  line-height: 0.85rem;
+  margin: -1rem 0 -1rem 0.5rem;
+  padding: 0.25rem 0.5rem;
+  text-transform: uppercase;
+  top: -0.0625rem;
+}
+.UnitHeader-versionBadge--unknown,
+.DetailsHeader-badge--unknown {
+  display: none;
+}
+
+a.UnitHeader-backLink {
+  color: var(--color-text);
+  display: block;
+  font-size: 1rem;
+}
+.UnitHeader-backLink img {
+  vertical-align: middle;
+}
+
+.DetailsHeader-badge--notAtLatest a {
+  display: none;
+}
+.DetailsHeader-badge--notAtLatest span.DetailsHeader-span--latest {
+  display: none;
+}
+.DetailsHeader-badge--notAtLatest .UnitMetaDetails-icon {
+  z-index: 1;
+}
+.DetailsHeader-badge--notAtLatest .UnitMetaDetails-toggletipBubble {
+  color: var(--black);
+  text-transform: none;
+}
+.DetailsHeader-span--notAtLatest .UnitMetaDetails-toggletip {
+  height: 0;
+}
+.DetailsHeader-span--notAtLatest .UnitMetaDetails-toggletip button {
+  height: 0.8125rem;
+  line-height: 0;
+}
+.DetailsHeader-span--notAtLatest .UnitMetaDetails-toggletip img {
+  vertical-align: middle;
+}
+
+.DetailsHeader-badge--goToLatest span {
+  display: none;
+}
+.DetailsHeader-badge--goToLatest span.DetailsHeader-span--goToLatest {
+  display: initial;
+}
+.DetailsHeader-badge--unknown a {
+  display: none;
+}
+.DetailsHeader-badge--unknown span {
+  display: none;
+}
+
+.DetailsHeader-badge {
+  border-radius: 1rem;
+  display: inline-block;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.75rem;
+  position: relative;
+  top: -0.125rem;
+}
+
+.DetailsHeader-badge--latest a {
+  display: none;
+}
+.DetailsHeader-badge--latest span.DetailsHeader-span--notAtLatest {
+  display: none;
+}
--- a/static/frontend/unit/_header.tmpl
+++ b/static/frontend/unit/_header.tmpl
@ -0,0 +1,274 @@
+<!--
+  Copyright 2020-2021 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.
+-->
+
+{{/* . is internal/frontend.UnitPage */}}
+
+{{define "unit-header"}}
+  {{template "unit-header-breadcrumbs" .}}
+  <div class="go-Main-headerContent">
+    {{template "unit-header-title" .}}
+    {{template "unit-header-details" .}}
+  </div>
+{{end}}
+
+{{define "unit-header-breadcrumbs"}}
+  <nav class="go-Main-headerBreadcrumb go-Breadcrumb" aria-label="Breadcrumb" data-test-id="UnitHeader-breadcrumb">
+    <ol>
+      {{with .Breadcrumb}}
+        {{range .Links}}
+          <li data-test-id="UnitHeader-breadcrumbItem">
+            <a href="{{.Href}}" data-gtmc="breadcrumb link">{{.Body}}</a>
+          </li>
+        {{end}}
+        <li>
+          <a href="{{$.CanonicalURLPath}}" data-gtmc="breadcrumb link" aria-current="location"
+              data-test-id="UnitHeader-breadcrumbCurrent">
+            {{.Current}}
+          </a>
+          {{if .CopyData}}
+            <button
+              class="go-Button go-Button--inline go-Clipboard js-clipboard"
+              title="Copy path to clipboard.&#10;&#10;{{.CopyData}}"
+              aria-label="Copy Path to Clipboard"
+              data-to-copy="{{.CopyData}}"
+              data-gtmc="breadcrumbs button"
+            >
+              <img
+                class="go-Icon go-Icon--accented"
+                height="24"
+                width="24"
+                src="/static/_icon/content_copy_gm_grey_24dp.svg"
+                alt=""
+              >
+            </button>
+          {{end}}
+        {{end}}
+      </li>
+    </ol>
+  </nav>
+{{end}}
+
+{{define "unit-header-title"}}
+  <div class="go-Main-headerTitle js-stickyHeader">
+    <a class="go-Main-headerLogo" href="https://go.dev/" aria-hidden="true" tabindex="-1" data-gtmc="header link" aria-label="Link to Go Homepage">
+      <img height="78" width="207" src="/static/_logo/go-blue.svg" alt="Go">
+    </a>
+    <h1 data-test-id="UnitHeader-title">{{.Title}}</h1>
+    {{range .PageLabels}}
+      <span class="go-Chip go-Chip--inverted">{{.}}</span>
+    {{end}}
+    {{with .Breadcrumb}}
+      {{if .CopyData}}
+        <button
+          class="go-Button go-Button--inline go-Clipboard js-clipboard"
+          title="Copy path to clipboard.&#10;&#10;{{.CopyData}}"
+          aria-label="Copy Path to Clipboard"
+          data-to-copy="{{.CopyData}}"
+          data-gtmc="title button"
+          tabindex="-1"
+        >
+          <img
+            class="go-Icon go-Icon--accented"
+            height="24"
+            width="24"
+            src="/static/_icon/content_copy_gm_grey_24dp.svg"
+            alt=""
+          />
+        </button>
+      {{end}}
+    {{end}}
+  </div>
+{{end}}
+
+{{define "unit-header-details"}}
+  <div class="go-Main-headerDetails">
+    {{if (eq .SelectedTab.Name "")}}
+      {{template "detail-item-version" .}}
+      {{template "detail-item-commit-time" .}}
+      {{template "detail-item-licenses" .}}
+      {{if .Unit.IsPackage}}
+        {{template "detail-item-imports" .}}
+        {{template "detail-item-importedby" .}}
+      {{end}}
+    {{else}}
+      {{template "detail-page-nav" .}}
+    {{end}}
+  </div>
+  {{template "detail-items-overflow" .}}
+{{end}}
+
+{{define "detail-item-version"}}
+  <span class="go-Main-headerDetailItem" data-test-id="UnitHeader-version">
+    <a href="?tab=versions" aria-label="Go to Versions" data-gtmc="header link"><span class="go-textSubtle">Version: </span>{{.DisplayVersion}}</a>
+    <!-- Do not reformat the data attributes of the following div: the server uses a regexp to extract them. -->
+    <span class="{{.LatestMinorClass}}" data-test-id="UnitHeader-minorVersionBanner">
+      <span class="go-Chip DetailsHeader-span--latest">Latest</span>
+      <span class="go-Chip DetailsHeader-span--notAtLatest">
+        Latest
+        {{template "severity-toggletip" "This package is not in the latest version of its module."}}
+      </span>
+      <a href="{{.LatestURL}}" aria-label="Go to Latest Version" data-gtmc="header link">
+        <span class="go-Chip go-Chip--alert DetailsHeader-span--goToLatest">Go to latest</span>
+      </a>
+    </span>
+  </span>
+{{end}}
+
+{{define "detail-item-commit-time"}}
+  <span class="go-Main-headerDetailItem" data-test-id="UnitHeader-commitTime">
+    Published: {{.Details.CommitTime}}
+  </span>
+{{end}}
+
+{{define "detail-item-licenses"}}
+  <span class="go-Main-headerDetailItem" data-test-id="UnitHeader-licenses">
+    License:{{" "}}
+    {{- if .Details.Licenses -}}
+      {{- if .Unit.IsRedistributable -}}
+        <a href="{{$.URLPath}}?tab=licenses" data-test-id="UnitHeader-license"
+            aria-label="Go to Licenses" data-gtmc="header link">
+          {{- range $i, $e := .Details.Licenses -}}
+            {{if $i}}, {{end}}{{$e.Type}}
+          {{- end -}}
+        </a>
+      {{else}}
+        <span>
+          {{- range $i, $e := .Details.Licenses -}}
+            {{if $i}}, {{end}} {{$e.Type}}
+          {{- end -}}
+        </span>
+        <a href="/license-policy" class="Disclaimer-link"
+            aria-label="Go to License Policy" data-gtmc="info link">
+          <em>not legal advice</em>
+        </a>
+      {{end}}
+    {{else}}
+      <span>None detected</span>
+      <a href="/license-policy" class="Disclaimer-link"
+          aria-label="Go to License Policy" data-gtmc="info link">
+        <em>not legal advice</em>
+      </a>
+    {{end}}
+  </span>
+{{end}}
+
+{{define "detail-item-imports"}}
+  <span class="go-Main-headerDetailItem" data-test-id="UnitHeader-imports">
+    <a href="{{$.URLPath}}?tab=imports" aria-label="Go to Imports"
+        data-gtmc="header link">
+      <span class="go-textSubtle">Imports: </span>{{.Details.NumImports}}
+    </a>
+  </span>
+{{end}}
+
+{{define "detail-item-importedby"}}
+  <span class="go-Main-headerDetailItem" data-test-id="UnitHeader-importedby">
+    <a href="{{$.URLPath}}?tab=importedby" aria-label="Go to Imported By"
+        data-gtmc="header link">
+       <span class="go-textSubtle">Imported by: </span>{{.Details.ImportedByCount}}
+    </a>
+  </span>
+{{end}}
+
+{{define "detail-items-overflow"}}
+  <div class="UnitHeader-overflowContainer">
+    <svg class="UnitHeader-overflowImage" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+      <path d="M0 0h24v24H0z" fill="none"/>
+      <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+    </svg>
+    <select class="UnitHeader-overflowSelect js-selectNav" tabindex="-1">
+      <option value="/">Main</option>
+      <option value="{{$.URLPath}}?tab=versions">
+        Versions
+      </option>
+      <option value="{{$.URLPath}}?tab=licenses">
+        Licenses
+      </option>
+      {{if .Unit.IsPackage}}
+        <option value="{{$.URLPath}}?tab=imports">
+          Imports
+        </option>
+        <option value="{{$.URLPath}}?tab=importedby">
+          Imported By
+        </option>
+      {{end}}
+    </select>
+  </div>
+{{end}}
+
+{{define "detail-page-nav"}}
+  <span class="go-Main-headerDetailItem">
+    <a class="UnitHeader-backLink" href="{{.URLPath}}" data-gtmc="header link">
+      <img class="go-Icon" height="24" width="24" src="/static/_icon/arrow_left_alt_gm_grey_24dp.svg" alt="">
+      Go to main page
+    </a>
+  </span>
+{{end}}
+
+{{define "unit-header-banners"}}
+  {{with .RedirectedFromPath}}
+    <div class="go-Message go-Message--notice">
+      <img
+        class="go-Icon"
+        height="24"
+        width="24"
+        src="/static/_icon/info_gm_grey_24dp.svg"
+        alt="Notice"
+      />&nbsp; Redirected from <span data-test-id="redirected-banner-text">{{.}}</span>.
+    </div>
+  {{end}}
+  {{if .Unit.Deprecated}}
+    <div class="go-Message go-Message--warning">
+      <img
+        class="go-Icon"
+        height="24"
+        width="24"
+        src="/static/_icon/alert_gm_grey_24dp.svg"
+        alt="Warning"
+      />&nbsp; <strong>Deprecated</strong>
+      {{- with .Unit.DeprecationComment -}}
+        <strong>:</strong>&nbsp;{{.}}
+      {{- end -}}
+    </div>
+  {{end}}
+  {{if .Unit.Retracted}}
+    <div class="go-Message go-Message--warning">
+      <img
+        class="go-Icon"
+        height="24"
+        width="24"
+        src="/static/_icon/alert_gm_grey_24dp.svg"
+        alt="Warning"
+      />&nbsp; <strong>Retracted</strong>
+      {{- with .Unit.RetractionRationale -}}
+        <strong>:</strong>&nbsp;{{.}}
+      {{- end -}}
+    </div>
+  {{end}}
+  {{if .LatestMajorVersion}}
+    <div class="go-Message go-Message--notice" data-test-id="UnitHeader-majorVersionBanner">
+      <img
+        class="go-Icon"
+        height="24"
+        width="24"
+        src="/static/_icon/info_gm_grey_24dp.svg"
+        alt="Notice"
+      />&nbsp; The highest tagged major version is
+      <a href="/{{.LatestMajorVersionURL}}" data-gtmc="banner link" aria-label="Go to Latest Major Version">
+        {{- .LatestMajorVersion -}}
+      </a>.
+    </div>
+  {{end}}
+{{end}}
+
+{{define "severity-toggletip"}}
+  <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
+    <summary>
+      <img class="go-Icon go-Icon--inverted" height="24" width="24" src="/static/_icon/alert_gm_grey_24dp.svg" alt="Warning">
+    </summary>
+    <p>{{.}}</p>
+  </details>
+{{end}}
--- a/static/frontend/unit/importedby/importedby.css
+++ b/static/frontend/unit/importedby/importedby.css
@ -0,0 +1,28 @@
+/*
+ * Copyright 2021 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.
+ */
+
+.ImportedBy-heading {
+  margin-bottom: 1rem;
+}
+.ImportedBy-list {
+  list-style: none;
+  padding: 0;
+}
+.ImportedBy .Pagination-nav,
+.ImportedBy .Pagination-navInner {
+  justify-content: flex-start;
+}
+.ImportedBy-details {
+  margin: 0.5rem 0;
+}
+.ImportedBy-detailsContent {
+  margin-left: 2.5rem;
+}
+.ImportedBy-detailsIndent {
+  margin-bottom: 0.5rem;
+  margin-left: 1.1rem;
+  margin-top: 0.5rem;
+}
--- a/static/frontend/unit/importedby/importedby.tmpl
+++ b/static/frontend/unit/importedby/importedby.tmpl
@ -0,0 +1,51 @@
+<!--
+  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.
+-->
+
+{{define "main-styles"}}
+  <link href="/static/unit/importedby/importedby.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{end}}
+
+{{define "main-header"}}
+  {{template "unit-header" .}}
+{{end}}
+
+{{define "main-content"}}
+  {{block "importedby" .Details}}{{end}}
+{{end}}
+
+{{define "importedby"}}
+  <div class="ImportedBy">
+    {{if .ImportedBy}}
+      <div class="ImportedBy-heading">
+        <strong>Known {{pluralize .Total "importer"}}:</strong> {{.NumImportedByDisplay}}
+      </div>
+      {{template "sections" .ImportedBy}}
+    {{else}}
+      {{template "empty-content" "No known importers for this package!"}}
+    {{end}}
+  </div>
+{{end}}
+
+{{define "sections"}}
+  <ul class="ImportedBy-list">
+    {{range .}}
+      {{template "section" .}}
+    {{end}}
+  </ul>
+{{end}}
+
+{{define "section"}}
+  {{if .Subs}}
+    <details class="ImportedBy-details">
+      <summary>{{.Prefix}} ({{.NumLines}})</summary>
+      <div class="ImportedBy-detailsContent">
+        {{template "sections" .Subs}}
+      </div>
+    </details>
+  {{else}}
+    <li class="ImportedBy-detailsIndent"><a class="u-breakWord" href="/{{.Prefix}}">{{.Prefix}}</a></li>
+  {{end}}
+{{end}}
--- a/static/frontend/unit/imports/imports.css
+++ b/static/frontend/unit/imports/imports.css
@ -0,0 +1,12 @@
+/*
+ * Copyright 2021 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.
+ */
+
+.Imports-listItem {
+  line-height: 1.125rem;
+}
+.Imports-list {
+  margin: 1rem 0;
+}
--- a/static/frontend/unit/imports/imports.tmpl
+++ b/static/frontend/unit/imports/imports.tmpl
@ -0,0 +1,51 @@
+<!--
+  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.
+-->
+
+
+{{define "main-styles"}}
+  <link href="/static/unit/imports/imports.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{end}}
+
+{{define "main-header"}}
+  {{template "unit-header" .}}
+{{end}}
+
+{{define "main-content"}}
+  {{block "imports" .Details}}{{end}}
+{{end}}
+
+{{define "imports"}}
+  <div>
+    {{if or .ExternalImports .InternalImports .StdLib}}
+      {{if .ExternalImports}}
+        <h2 class="Imports-heading go-textTitle">Imports</h2>
+        <ul class="Imports-list">
+        {{range .ExternalImports}}
+          <li class="Imports-listItem"><a href="/{{.}}">{{.}}</a></li>
+        {{end}}
+        </ul>
+      {{end}}
+      {{if .InternalImports}}
+        <h2 class="Imports-heading go-textTitle">Imports in module “{{.ModulePath}}”</h2>
+        <ul class="Imports-list">
+        {{range .InternalImports}}
+          <li class="Imports-listItem"><a href="/{{.}}">{{.}}</a></li>
+        {{end}}
+        </ul>
+      {{end}}
+      {{if .StdLib}}
+        <h2 class="Imports-heading go-textTitle">Standard library Imports</h2>
+        <ul class="Imports-list">
+        {{range .StdLib}}
+          <li class="Imports-listItem"><a href="/{{.}}">{{.}}</a></li>
+        {{end}}
+        </ul>
+      {{end}}
+    {{else}}
+      {{template "empty-content" "This package does not have any imports!"}}
+    {{end}}
+  </div>
+{{end}}
--- a/static/frontend/unit/licenses/licenses.css
+++ b/static/frontend/unit/licenses/licenses.css
@ -0,0 +1,33 @@
+/*!
+ * Copyright 2021 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.
+ */
+
+.License {
+  margin-bottom: 1rem;
+}
+
+.License > h2 {
+  margin-bottom: 1rem;
+}
+.License > p {
+  margin-bottom: 0.5rem;
+}
+.License-contents {
+  border: var(--border);
+  border-radius: 0.1875rem;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+  margin: 0;
+  overflow-x: auto;
+  padding: 1.5rem;
+  tab-size: 4;
+}
+.License-source {
+  font-size: 0.875rem;
+  padding-top: 0.5rem;
+}
+.Disclaimer-link {
+  font-style: italic;
+}
--- a/static/frontend/unit/licenses/licenses.tmpl
+++ b/static/frontend/unit/licenses/licenses.tmpl
@ -0,0 +1,30 @@
+<!--
+  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.
+-->
+
+{{define "main-styles"}}
+  <link href="/static/unit/licenses/licenses.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{end}}
+
+{{define "main-header"}}
+  {{template "unit-header" .}}
+{{end}}
+
+{{define "main-content"}}
+  {{block "licenses" .Details}}{{end}}
+{{end}}
+
+{{define "licenses"}}
+  {{range .Licenses}}
+    <section class="License" id="{{.Anchor}}">
+      <h2 class="go-textTitle">
+        <div id="#{{.Anchor}}">{{range $i, $e := .Types}}{{if $i}}, {{end}}{{$e}}{{end}}</div>
+      </h2>
+      <p>This is not legal advice. <a href="/license-policy">Read disclaimer.</a></p>
+      <pre class="License-contents">{{printf "%s" .Contents}}</pre>
+    </section>
+    <div class="License-source go-textSubtle">Source: {{.Source}}</div>
+  {{end}}
+{{end}}
--- a/static/frontend/unit/main/_build-context.css
+++ b/static/frontend/unit/main/_build-context.css
@ -0,0 +1,35 @@
+/*!
+ * 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.
+ */
+
+.UnitBuildContext-titleContext label,
+.UnitBuildContext-singleContext {
+  color: var(--color-text-subtle);
+  font-size: 0.875rem;
+}
+.UnitBuildContext-singleContext {
+  padding: 0.35rem 0;
+}
+.UnitBuildContext-titleContext select {
+  border-color: var(--color-border);
+  color: var(--color-text-subtle);
+  margin-left: 0.25rem;
+  min-width: 6rem;
+  padding: 0.25rem 0.125rem;
+}
+.UnitBuildContext-titleContext option {
+  color: var(--color-text-subtle);
+}
+
+.UnitDoc .UnitBuildContext-titleContext {
+  position: relative;
+}
+
+.UnitDoc .UnitBuildContext-titleContext label,
+.UnitDoc .UnitBuildContext-singleContext {
+  bottom: 0.875rem;
+  position: absolute;
+  right: 0;
+}
--- a/static/frontend/unit/main/_build-context.tmpl
+++ b/static/frontend/unit/main/_build-context.tmpl
@ -0,0 +1,25 @@
+<!--
+  Copyright 2021 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.
+-->
+
+{{define "unit-build-context"}}
+  {{if .BuildContexts}}
+    {{if gt (len .BuildContexts) 1}}
+      <div class="UnitBuildContext-titleContext">
+        <label><a href="https://go.dev/about#build-context">Rendered for</a>
+          <select class="go-Select js-buildContextSelect">
+            {{range .BuildContexts}}
+              <option{{if eq .GOOS $.GOOS}} selected{{end}} value="{{.GOOS}}">{{.GOOS}}/{{.GOARCH}}</option>
+            {{end}}
+          </select>
+        </label>
+      </div>
+    {{else if not (eq .GOOS "all")}}
+      <div class="UnitBuildContext-titleContext">
+        <div class="UnitBuildContext-singleContext"><a href="/about#build-context">Rendered for</a> {{.GOOS}}/{{.GOARCH}}</div>
+      </div>
+    {{end}}
+  {{end}}
+{{end}}
--- a/static/frontend/unit/main/_directories.css
+++ b/static/frontend/unit/main/_directories.css
@ -0,0 +1,151 @@
+/*!
+ * 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.
+ */
+
+.UnitDirectories {
+  margin-bottom: 2rem;
+}
+.UnitDirectories h2 a.UnitDirectories-idLink,
+.UnitDirectories summary a {
+  opacity: 0;
+}
+.UnitDirectories h2:hover a,
+.UnitDirectories summary:focus a {
+  opacity: 1;
+}
+.UnitDirectories-title {
+  border-bottom: var(--border);
+  font-size: 1.375rem;
+  margin: 0.5rem 0 0 0;
+  padding-bottom: 1rem;
+}
+.UnitDirectories-title img {
+  margin: auto 1rem auto 0;
+}
+.UnitDirectories-table {
+  border-collapse: collapse;
+  height: 0;
+  table-layout: auto;
+  width: 100%;
+}
+.UnitDirectories-table--tree {
+  margin-top: -2rem;
+}
+.UnitDirectories-tableHeader {
+  background-color: var(--color-background-accented);
+}
+.UnitDirectories-tableHeader--tree {
+  visibility: hidden;
+}
+.UnitDirectories td {
+  border-bottom: var(--border);
+  max-width: 32rem;
+  min-width: 12rem;
+  padding: 0.25rem 1rem;
+  vertical-align: middle;
+  word-break: break-word;
+}
+.UnitDirectories th {
+  padding: 0.5rem 1rem;
+  text-align: left;
+}
+.UnitDirectories tr.hidden {
+  display: none;
+}
+.UnitDirectories tr[aria-controls] {
+  cursor: pointer;
+}
+.UnitDirectories tr[aria-controls]:hover {
+  background-color: var(--color-background-accented);
+}
+.UnitDirectories th.UnitDirectories-toggleHead {
+  font-size: 0;
+  max-width: 0.625rem;
+  padding: 0;
+  width: 0.625rem;
+}
+.UnitDirectories td.UnitDirectories-toggleCell,
+th.UnitDirectories-toggleCell {
+  background-color: var(--background);
+  border: var(--white);
+  max-width: 0.625rem;
+  padding: 0;
+  width: 0.625rem;
+}
+.UnitDirectories-toggleButton {
+  font-size: 1.25rem;
+  left: -0.75rem;
+  margin: 0 0 -1rem -0.875rem;
+  padding: 0;
+  position: absolute;
+  vertical-align: top;
+}
+.UnitDirectories-subSpacer {
+  border-right: var(--border);
+  display: inline;
+  margin-right: 0.875rem;
+  width: 0.0625rem;
+}
+.UnitDirectories-toggleButton[aria-expanded='true'] img {
+  transform: rotate(90deg);
+}
+.UnitDirectories-pathCell {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  line-height: 1.75rem;
+  word-break: break-all;
+}
+.UnitDirectories-pathCell > div {
+  position: relative;
+}
+.UnitDirectories-subdirectory {
+  border-left: var(--border);
+  display: flex;
+  flex-direction: column;
+  margin-left: 0.375rem;
+  padding: 0.5rem 1rem;
+}
+.UnitDirectories-mobileSynopsis {
+  display: none;
+  line-height: 1.25rem;
+  margin-top: 0.25rem;
+  word-break: keep-all;
+}
+@media only screen and (max-width: 52rem) {
+  .UnitDirectories-mobileSynopsis {
+    display: initial;
+  }
+  .UnitDirectories-table th.UnitDirectories-desktopSynopsis,
+  .UnitDirectories-table td.UnitDirectories-desktopSynopsis {
+    display: none;
+  }
+}
+.UnitDirectories-expandButton {
+  position: relative;
+}
+.UnitDirectories-expandButton button {
+  background-color: transparent;
+  border: none;
+  bottom: 1rem;
+  color: var(--color-brand-primary);
+  cursor: pointer;
+  display: none;
+  font-size: 0.875rem;
+  position: absolute;
+  right: 0;
+  text-decoration: none;
+}
+.UnitDirectories-badge {
+  border: 0.0625rem solid var(--color-text-subtle);
+  border-radius: 0.125rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1rem;
+  margin-left: 0.5rem;
+  margin-top: 0.125rem;
+  padding: 0 0.35rem;
+  text-align: center;
+}
--- a/static/frontend/unit/main/_directories.tmpl
+++ b/static/frontend/unit/main/_directories.tmpl
@ -0,0 +1,81 @@
+<!--
+  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.
+-->
+
+{{define "unit-directories"}}
+  <div class="UnitDirectories js-unitDirectories">
+    <h2 class="UnitDirectories-title" id="section-directories">
+      <img class="go-Icon" height="24" width="24" src="/static/_icon/folder_gm_grey_24dp.svg" alt="">
+      Directories
+      <a class="UnitDirectories-idLink" href="#section-directories">¶</a>
+    </h2>
+    <div class="UnitDirectories-expandButton">
+      <button class="js-expandAllDirectories" data-test-id="directories-toggle"
+          data-gtmc="directories button" aria-label="Expand All Directories">
+        Expand all
+      </button>
+    </div>
+    <table class="UnitDirectories-table UnitDirectories-table--tree js-expandableTable"
+          data-test-id="UnitDirectories-table">
+      <tr class="UnitDirectories-tableHeader UnitDirectories-tableHeader--tree">
+        <th>Path</th>
+        <th class="UnitDirectories-desktopSynopsis">Synopsis</th>
+      </tr>
+      {{range $dir := .Directories.External}}
+          {{template "directory" .}}
+      {{end}}
+      {{if .Directories.Internal}}
+          {{template "directory" .Directories.Internal}}
+      {{end}}
+    </table>
+  </div>
+{{end}}
+
+{{define "directory"}}
+  {{$prefix := .Prefix}}
+  <tr{{if .Subdirectories}} data-aria-controls="{{range .Subdirectories}}{{$prefix}}-{{.Suffix}} {{end}}"{{end}}>
+    <td data-id="{{$prefix}}" data-aria-owns="{{range .Subdirectories}}{{$prefix}}-{{.Suffix}} {{end}}">
+      <div class="UnitDirectories-pathCell">
+        <div>
+          {{- if .Subdirectories -}}
+            <button type="button" class="go-Button go-Button--inline UnitDirectories-toggleButton"
+                aria-expanded="false"
+                aria-label="{{len .Subdirectories}} more from"
+                data-aria-controls="{{range .Subdirectories}}{{$prefix}}-{{.Suffix}} {{end}}"
+                data-aria-labelledby="{{$prefix}}-button {{$prefix}}"
+                data-id="{{$prefix}}-button">
+              <img class="go-Icon" height="24" width="24" src="/static/_icon/arrow_right_gm_grey_24dp.svg"
+                  alt="">
+            </button>
+          {{- end -}}
+          {{- if .Root -}}
+            <a href="{{.Root.URL}}">{{.Root.Suffix}}</a>
+            {{if .Root.IsModule}}<span class="go-Chip go-Chip--inverted">module</span>{{end}}
+          </div>
+          <div class="UnitDirectories-mobileSynopsis">{{.Root.Synopsis}}</div>
+        </div>
+      </td>
+      <td class="UnitDirectories-desktopSynopsis">{{.Root.Synopsis}}</td>
+    {{- else -}}
+        <span>{{.Prefix}}</span>
+      </td>
+      <td class="UnitDirectories-desktopSynopsis"></td>
+    {{- end -}}
+  </tr>
+  {{- range .Subdirectories -}}
+    <tr data-id="{{$prefix}}-{{.Suffix}}">
+      <td>
+        <div class="UnitDirectories-subdirectory">
+          <span>
+            <a href="{{.URL}}">{{.Suffix}}</a>
+            {{if .IsModule}}<span class="go-Chip go-Chip--inverted">Module</span>{{end}}
+          </span>
+          <div class="UnitDirectories-mobileSynopsis">{{.Synopsis}}</div>
+        </div>
+      </td>
+      <td class="UnitDirectories-desktopSynopsis">{{.Synopsis}}</td>
+    {{- end -}}
+  </tr>
+{{end}}
--- a/static/frontend/unit/main/_doc.css
+++ b/static/frontend/unit/main/_doc.css
@ -0,0 +1,344 @@
+/*!
+ * 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.
+ */
+
+/* stylelint-disable no-descending-specificity */
+.UnitDoc {
+  margin-bottom: 2rem;
+  word-break: break-word;
+}
+.UnitDoc h2 a.UnitDoc-idLink,
+.UnitDoc summary a {
+  opacity: 0;
+}
+.UnitDoc h2:hover a,
+.UnitDoc summary:focus a {
+  opacity: 1;
+}
+.UnitDoc-title {
+  border-bottom: var(--border);
+  padding-bottom: 1rem;
+}
+.UnitDoc-title img {
+  margin: auto 1rem auto 0;
+}
+.UnitDoc-emptySection {
+  background-color: var(--color-background-accented);
+  color: var(--gray-2);
+  height: 12.25rem;
+  margin-top: 1.5rem;
+  text-align: center;
+}
+.UnitDoc-emptySection img {
+  height: 7.8125rem;
+  width: auto;
+}
+.UnitDoc .Documentation h4 {
+  margin-top: 1.5rem;
+}
+.Documentation {
+  display: block;
+}
+.Documentation p {
+  margin: 1rem 0;
+}
+.Documentation h2,
+.Documentation h3 {
+  margin-top: 1.5rem;
+}
+.Documentation a {
+  text-decoration: none;
+}
+.Documentation a:hover {
+  text-decoration: underline;
+}
+.Documentation h2 a,
+.Documentation h3 a,
+.Documentation h4 a.Documentation-idLink,
+.Documentation summary a {
+  opacity: 0;
+}
+.Documentation a:focus {
+  opacity: 1;
+}
+.Documentation h3 a.Documentation-source {
+  opacity: 1;
+}
+.Documentation h2:hover a,
+.Documentation h3:hover a,
+.Documentation h4:hover a,
+.Documentation summary:hover a,
+.Documentation summary:focus a {
+  opacity: 1;
+}
+.Documentation ul {
+  line-height: 1.5rem;
+  list-style: none;
+  padding-left: 0;
+}
+.Documentation ul ul {
+  padding-left: 2em;
+}
+
+.Documentation pre + pre {
+  margin-top: 0.625rem;
+}
+
+.Documentation .Documentation-declarationLink + pre {
+  border-radius: 0 0 0.3em 0.3em;
+  border-top: var(--border);
+  margin-top: 0;
+}
+.Documentation pre .comment {
+  color: var(--color-code-comment);
+}
+
+.Documentation-toc,
+.Documentation-overview,
+.Documentation-index,
+.Documentation-examples {
+  padding-bottom: 0;
+}
+.Documentation-empty {
+  color: var(--color-text-subtle);
+  margin-top: -0.5rem;
+}
+@media only screen and (min-width: 64rem) {
+  .Documentation-toc {
+    margin-left: 2rem;
+    white-space: nowrap;
+  }
+  .Documentation-toc-columns {
+    columns: 2;
+  }
+}
+.Documentation-toc:empty {
+  display: none;
+}
+.Documentation-tocItem {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.Documentation-tocItem--constants,
+.Documentation-tocItem--funcsAndTypes,
+.Documentation-tocItem--functions,
+.Documentation-tocItem--types,
+.Documentation-tocItem--variables,
+.Documentation-tocItem--notes {
+  display: none;
+}
+
+.Documentation-overviewHeader,
+.Documentation-indexHeader,
+.Documentation-constantsHeader,
+.Documentation-variablesHeader,
+.Documentation-examplesHeader,
+.Documentation-filesHeader,
+.Documentation-functionHeader,
+.Documentation-typeHeader,
+.Documentation-typeMethodHeader,
+.Documentation-typeFuncHeader {
+  margin-bottom: 0.5rem;
+}
+
+.Documentation-function h4,
+.Documentation-type h4,
+.Documentation-typeFunc h4,
+.Documentation-typeMethod h4 {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+}
+.Documentation-sinceVersion {
+  color: var(--color-text-subtle);
+  font-size: 0.9375rem;
+  font-weight: 400;
+}
+
+.Documentation-constants br:last-of-type,
+.Documentation-variables br:last-of-type {
+  display: none;
+}
+
+.Documentation-build {
+  color: var(--color-text-subtle);
+  padding-top: 1.5rem;
+  text-align: right;
+}
+.Documentation-declaration pre {
+  scroll-padding-top: calc(var(--js-sticky-header-height, 3.5rem) + 3.75rem);
+}
+@media only screen and (min-width: 64rem) {
+  .Documentation-declaration pre {
+    scroll-padding-top: calc(var(--js-sticky-header-height, 3.5rem) + 0.75rem);
+  }
+}
+.Documentation-declaration + .Documentation-declaration {
+  margin-top: 0.625rem;
+}
+.Documentation-declarationLink {
+  background-color: var(--color-background-accented);
+  border: var(--border);
+  border-bottom: none;
+  border-radius: 0.3em 0.3em 0 0;
+  display: block;
+  font-size: 0.75rem;
+  line-height: 0.5rem;
+  padding: 0.375rem;
+  text-align: right;
+}
+.Documentation-exampleButtonsContainer {
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+.Documentation-examplePlayButton {
+  background-color: var(--white);
+  border: 0.15rem solid var(--turq-med);
+  color: var(--turq-med);
+  cursor: pointer;
+  flex-shrink: 0;
+  height: 2.5rem;
+  width: 4.125rem;
+}
+.Documentation-exampleRunButton,
+.Documentation-exampleShareButton,
+.Documentation-exampleFormatButton {
+  border: 0.0625rem solid var(--turq-dark);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  height: 2rem;
+  margin-left: 0.5rem;
+  padding: 0 1rem;
+}
+.Documentation-exampleRunButton {
+  background-color: var(--turq-dark);
+  color: var(--white);
+}
+.Documentation-exampleShareButton,
+.Documentation-exampleFormatButton {
+  background-color: var(--white);
+  color: var(--turq-dark);
+}
+.Documentation-exampleDetails {
+  margin-top: 1rem;
+}
+.Documentation-exampleDetailsBody pre {
+  border-radius: 0 0 0.3rem 0.3rem;
+  margin-bottom: 1rem;
+  margin-top: -0.25rem;
+}
+.Documentation-exampleDetailsBody textarea {
+  height: 100%;
+  outline: none;
+  overflow: hidden;
+  resize: none;
+  width: 100%;
+}
+
+/**
+ * We add another selector here to these two classes to increase CSS specificity,
+ * the selector .Documentation pre + pre overrides .Documentation-exampleCode
+ * and .Documentation-exampleOutput by itself and would replace the styles.
+ */
+.Documentation-exampleDetailsBody .Documentation-exampleCode {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin: 0;
+}
+.Documentation-exampleDetailsBody .Documentation-exampleOutput {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin: 0 0 0.5rem;
+}
+.Documentation-exampleDetailsHeader {
+  color: var(--color-brand-primary);
+  cursor: pointer;
+  margin-bottom: 2rem;
+  outline: none;
+  text-decoration: none;
+}
+.Documentation-exampleOutputLabel {
+  color: var(--color-text-subtle);
+}
+.Documentation-exampleError {
+  color: var(--pink);
+  margin-right: 0.4rem;
+  padding-right: 0.5rem;
+}
+
+/* See https://golang.org/issue/43368 for context. */
+.Documentation-function pre,
+.Documentation-typeFunc pre,
+.Documentation-typeMethod pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  word-wrap: break-word;
+}
+
+.Documentation-indexDeprecated {
+  margin-left: 0.5rem;
+}
+.Documentation-deprecatedBody {
+  color: var(--color-text-subtle);
+  font-size: 0.87rem;
+  font-weight: 400;
+  margin-left: 0.25rem;
+  margin-right: 0.5rem;
+}
+.Documentation-deprecatedTag {
+  background-color: var(--color-border);
+  border-radius: 0.125rem;
+  color: var(--color-text-inverted);
+  font-size: 0.75rem;
+  font-weight: normal;
+  line-height: 1.375;
+  padding: 0.125rem 0.25rem;
+  text-transform: uppercase;
+  vertical-align: middle;
+}
+.Documentation-deprecatedTitle {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+.Documentation-deprecatedDetails {
+  color: var(--color-text-subtle);
+}
+.Documentation-deprecatedDetails a {
+  color: var(--color-text-subtle);
+}
+.Documentation-deprecatedDetails[open] {
+  color: var(--color-text);
+}
+.Documentation-deprecatedDetails[open] a {
+  color: var(--color-brand-primary);
+}
+.Documentation-deprecatedDetails .Documentation-deprecatedBody::after {
+  color: var(--color-brand-primary);
+  content: 'Show';
+}
+.Documentation-deprecatedDetails[open] .Documentation-deprecatedBody::after {
+  color: var(--color-brand-primary);
+  content: 'Hide';
+}
+.Documentation-deprecatedDetails > summary {
+  list-style: none;
+  opacity: 1;
+}
+.Documentation-deprecatedDetails .Documentation-source {
+  opacity: 1;
+}
+.Documentation-deprecatedItemBody {
+  padding: 1rem 1rem 0.5rem 1rem;
+}
+.Documentation-deprecatedMessage {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
--- a/static/frontend/unit/main/_doc.tmpl
+++ b/static/frontend/unit/main/_doc.tmpl
@ -0,0 +1,26 @@
+<!--
+  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.
+-->
+
+{{define "unit-doc"}}
+  <div class="UnitDoc">
+    <h2 class="UnitDoc-title" id="section-documentation">
+      <img class="go-Icon" height="24" width="24" src="/static/_icon/code_gm_grey_24dp.svg" alt="">
+      Documentation
+      <a class="UnitDoc-idLink" href="#section-documentation">¶</a>
+    </h2>
+    {{template "unit-build-context" .}}
+    <div class="Documentation js-documentation">
+      {{if .DocBody.String}}
+        {{.DocBody}}
+      {{else}}
+        <div class="UnitDoc-emptySection">
+          <img width="945" height="1200" src="/static/_gopher/airplane-1200x945.svg" alt="The Go Gopher"/>
+          <p>There is no documentation for this package.</p>
+        </div>
+      {{end}}
+    </div>
+  </div>
+{{end}}
--- a/static/frontend/unit/main/_files.css
+++ b/static/frontend/unit/main/_files.css
@ -0,0 +1,56 @@
+/*!
+ * 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.
+ */
+
+.UnitFiles {
+  margin-bottom: 2rem;
+}
+.UnitFiles-titleLink {
+  position: relative;
+}
+.UnitFiles-titleLink a {
+  bottom: 1rem;
+  font-size: 0.875rem;
+  position: absolute;
+  right: 0;
+}
+.UnitFiles-titleLink a::after {
+  background-image: url(/static/_icon/launch_gm_grey_24dp.svg);
+  background-repeat: no-repeat;
+  background-size: 0.875rem 1.25rem;
+  content: '';
+  display: inline-block;
+  height: 1rem;
+  left: 0.3125rem;
+  position: relative;
+  top: 0.125rem;
+  width: 1rem;
+}
+.UnitFiles h2 a.UnitFiles-idLink,
+.UnitFiles summary a {
+  opacity: 0;
+}
+.UnitFiles h2:hover a,
+.UnitFiles summary:focus a {
+  opacity: 1;
+}
+.UnitFiles-title {
+  border-bottom: var(--border);
+  font-size: 1.375rem;
+  margin: 0.5rem 0 0 0;
+  padding-bottom: 1rem;
+}
+.UnitFiles-title img {
+  margin: auto 1rem auto 0;
+}
+.UnitFiles-fileList {
+  column-count: 5;
+  column-width: 12.5rem;
+  line-height: 1.5rem;
+  list-style: none;
+  margin-top: 1rem;
+  padding-left: 0;
+  word-break: break-all;
+}
--- a/static/frontend/unit/main/_files.tmpl
+++ b/static/frontend/unit/main/_files.tmpl
@ -0,0 +1,27 @@
+<!--
+  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.
+-->
+
+{{define "unit-files"}}
+  <div class="UnitFiles js-unitFiles">
+    <h2 class="UnitFiles-title" id="section-sourcefiles">
+      <img class="go-Icon" height="24" width="24" src="/static/_icon/insert_drive_file_gm_grey_24dp.svg" alt="">
+      Source Files
+      <a class="UnitFiles-idLink" href="#section-sourcefiles">¶</a>
+    </h2>
+    <div class="UnitFiles-titleLink">
+      <a href="{{.SourceURL}}" target="_blank" rel="noopener">View all</a>
+    </div>
+    <div>
+      <ul class="UnitFiles-fileList">
+        {{- range .SourceFiles -}}
+          <li>
+            <a href="{{.URL}}" target="_blank" rel="noopener" title="{{.Name}}">{{.Name}}</a>
+          </li>
+        {{- end -}}
+      </ul>
+    </div>
+  </div>
+{{end}}
--- a/static/frontend/unit/main/_meta.css
+++ b/static/frontend/unit/main/_meta.css
@ -0,0 +1,55 @@
+/*!
+* Copyright 2019-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.
+*/
+
+.UnitMeta {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 100%;
+  white-space: nowrap;
+}
+.UnitMeta-details,
+.UnitMeta-links {
+  display: flex;
+  flex-flow: wrap;
+  flex-direction: column;
+  gap: 1rem;
+}
+.UnitMeta-repo {
+  align-items: center;
+  display: flex;
+}
+.UnitMeta-repo a {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.UnitMeta-linkSpacer {
+  display: none;
+}
+@media (min-width: 50rem) {
+  .UnitMeta {
+    grid-template-columns: max-content auto max-content;
+  }
+  .UnitMeta-details,
+  .UnitMeta-links {
+    flex-direction: row;
+  }
+  .UnitMeta-linkSpacer {
+    display: initial;
+  }
+}
+@media (min-width: 112rem) {
+  :root[data-layout='responsive'] .UnitMeta {
+    grid-template-columns: 100%;
+  }
+  :root[data-layout='responsive'] .UnitMeta-details,
+  :root[data-layout='responsive'] .UnitMeta-links {
+    flex-direction: column;
+    white-space: nowrap;
+  }
+  :root[data-layout='responsive'] .UnitMeta-linkSpacer {
+    display: none;
+  }
+}
--- a/static/frontend/unit/main/_meta.tmpl
+++ b/static/frontend/unit/main/_meta.tmpl
@ -0,0 +1,104 @@
+<!--
+  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.
+-->
+
+{{define "unit-meta"}}
+  <div class="UnitMeta">
+    <h2 class="go-textLabel">Details</h2>
+    {{template "unit-meta-details" .}}
+    <div class="UnitMeta-learn">
+      <a href="/about#best-practices-h2" data-gtmc="meta link">Learn more</a>
+    </div>
+    <h2 class="go-textLabel">Repository</h2>
+    <div class="UnitMeta-repo">
+      {{if .Details.RepositoryURL}}
+        <a href="{{.Details.RepositoryURL}}" title="{{.Details.RepositoryURL}}" target="_blank" rel="noopener">
+          {{stripscheme .Details.RepositoryURL}}
+        </a>
+      {{else}}
+        Repository URL not available.
+      {{end}}
+    </div>
+    {{if or .Details.ReadmeLinks .Details.DocLinks .Details.ModuleReadmeLinks}}
+      <span class="UnitMeta-linkSpacer"></span>
+      <h2 class="go-textLabel">Links</h2>
+      <ul class="UnitMeta-links">
+        {{template "unit-meta-links" .Details.ReadmeLinks}}
+        {{template "unit-meta-links" .Details.DocLinks}}
+        {{template "unit-meta-links" .Details.ModuleReadmeLinks}}
+      </ul>
+    {{end}}
+  </div>
+{{end}}
+
+{{define "unit-meta-links"}}
+  {{range .}}
+    <li>
+      <a href="{{.Href}}" title="{{.Href}}" target="_blank" rel="noopener"
+          data-test-id="meta-link-{{.Body}}">{{.Body}}</a>
+    </li>
+  {{end}}
+{{end}}
+
+{{define "unit-meta-details-check"}}
+  <img class="go-Icon{{if .}} go-Icon--accented{{end}}"
+    {{- if . -}}
+      src="/static/_icon/check_circle_gm_grey_24dp.svg" alt="checked"
+    {{- else -}}
+      src="/static/_icon/cancel_gm_grey_24dp.svg" alt="unchecked"
+    {{- end -}}
+  height="24" width="24">
+{{end}}
+
+{{define "unit-meta-details"}}
+  <ul class="UnitMeta-details">
+    <li>
+      <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
+        <summary class="go-textSubtle">
+          {{template "unit-meta-details-check" .Unit.HasGoMod}}
+          Valid {{if .Unit.HasGoMod}}<a href="{{.Details.ModFileURL}}" target="_blank" rel="noopener">{{end}}go.mod{{if .Unit.HasGoMod}}</a>{{end}} file
+          <img class="go-Icon" src="/static/_icon/help_gm_grey_24dp.svg" alt="" height="24" width="24">
+        </summary>
+        <p>
+          The Go module system was introduced in Go 1.11 and is the official dependency management
+          solution for Go.
+        </p>
+      </details>
+    </li>
+    <li>
+      <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
+        <summary class="go-textSubtle">
+          {{template "unit-meta-details-check" .Unit.IsRedistributable}}
+          Redistributable license
+          <img class="go-Icon" src="/static/_icon/help_gm_grey_24dp.svg" alt="" height="24" width="24">
+        </summary>
+        <p>
+          Redistributable licenses place minimal restrictions on how software can be used,
+          modified, and redistributed.
+        </p>
+      </details>
+    </li>
+    <li>
+      <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
+        <summary class="go-textSubtle">
+          {{template "unit-meta-details-check" .Details.IsTaggedVersion}}
+          Tagged version
+          <img class="go-Icon" src="/static/_icon/help_gm_grey_24dp.svg" alt="" height="24" width="24">
+        </summary>
+        <p>Modules with tagged versions give importers more predictable builds.</p>
+      </details>
+    </li>
+    <li>
+      <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
+        <summary class="go-textSubtle">
+          {{template "unit-meta-details-check"  .Details.IsStableVersion}}
+          Stable version
+          <img class="go-Icon" src="/static/_icon/help_gm_grey_24dp.svg" alt="" height="24" width="24">
+        </summary>
+        <p>When a project reaches major version v1 it is considered stable.</p>
+      </details>
+    </li>
+  </ul>
+{{end}}
--- a/static/frontend/unit/main/_modals.css
+++ b/static/frontend/unit/main/_modals.css
@ -0,0 +1,36 @@
+/*!
+* Copyright 2021 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.
+*/
+
+.JumpDialog-body {
+  height: 12rem;
+  overflow-y: auto;
+}
+.JumpDialog-list {
+  display: flex;
+  flex-direction: column;
+}
+.JumpDialog-input {
+  width: 100%;
+}
+.JumpDialog a {
+  padding: 0.25rem;
+  text-decoration: none;
+}
+.JumpDialog .JumpDialog-active {
+  background-color: var(--color-brand-primary);
+  color: var(--white);
+}
+
+.ShortcutsDialog-key {
+  text-align: right;
+}
+.ShortcutsDialog table {
+  padding: 0 1rem;
+}
+
+.ShortcutsDialog td {
+  padding-bottom: 0.5rem;
+}
--- a/static/frontend/unit/main/_modals.tmpl
+++ b/static/frontend/unit/main/_modals.tmpl
@ -0,0 +1,80 @@
+<!--
+  Copyright 2021 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.
+-->
+
+{{define "unit-modals"}}
+  <dialog id="jump-to-modal" class="JumpDialog go-Modal go-Modal--md js-modal">
+    <form method="dialog" data-gmtc="jump to form" aria-label="Jump to Identifier">
+      <div class="Dialog-title go-Modal-header">
+        <h2>Jump to</h2>
+        <button
+          class="go-Button go-Button--inline"
+          type="button"
+          data-modal-close
+          data-gtmc="modal button"
+          aria-label="Close"
+        >
+          <img
+            class="go-Icon"
+            height="24"
+            width="24"
+            src="/static/_icon/close_gm_grey_24dp.svg"
+            alt=""
+          />
+        </button>
+      </div>
+      <div class="JumpDialog-filter">
+        <input class="JumpDialog-input go-Input" autocomplete="off" type="text">
+      </div>
+      <div class="JumpDialog-body go-Modal-body">
+        <div class="JumpDialog-list"></div>
+      </div>
+      <div class="go-Modal-actions">
+        <button class="go-Button" data-test-id="close-dialog">Close</button>
+      </div>
+    </form>
+  </dialog>
+
+  <dialog class="ShortcutsDialog go-Modal go-Modal--sm js-modal">
+    <form method="dialog">
+      <div class="go-Modal-header">
+        <h2>Keyboard shortcuts</h2>
+        <button
+          class="go-Button go-Button--inline"
+          type="button"
+          data-modal-close
+          data-gtmc="modal button"
+          aria-label="Close"
+        >
+          <img
+            class="go-Icon"
+            height="24"
+            width="24"
+            src="/static/_icon/close_gm_grey_24dp.svg"
+            alt=""
+          />
+        </button>
+      </div>
+      <div class="go-Modal-body">
+        <table>
+          <tbody>
+            <tr><td class="ShortcutsDialog-key">
+              <strong>?</strong></td><td> : This menu</td>
+            </tr>
+            <tr><td class="ShortcutsDialog-key">
+              <strong>/</strong></td><td> : Search site</td>
+            </tr>
+            <tr><td class="ShortcutsDialog-key">
+              <strong>f</strong> or <strong>F</strong></td><td> : Jump to</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="go-Modal-actions">
+        <button class="go-Button" data-test-id="close-dialog">Close</button>
+      </div>
+    </form>
+  </dialog>
+{{end}}
--- a/static/frontend/unit/main/_outline.css
+++ b/static/frontend/unit/main/_outline.css
@ -0,0 +1,41 @@
+/*!
+ * 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.
+ */
+
+.UnitOutline-jumpTo {
+  display: flex;
+  margin-bottom: 1rem;
+}
+.UnitOutline-jumpTo button {
+  background-color: var(--color-background);
+  border: var(--border);
+  border-radius: 0.25rem;
+  color: var(--color-text-subtle);
+  cursor: pointer;
+  height: 2rem;
+  padding-left: 1rem;
+  text-align: left;
+  width: 100%;
+}
+.UnitOutline-jumpTo button:hover:not([disabled]) {
+  border-color: var(--color-border);
+}
+.UnitOutline-jumpTo::after {
+  align-self: center;
+  background-color: var(--color-background-accented);
+  border-radius: 0.5rem;
+  color: var(--gray-6);
+  content: 'f';
+  content: 'f' / 'find';
+  font-size: 0.75rem;
+  padding: 0.0625rem 0;
+  position: absolute;
+  right: 0.75rem;
+  text-align: center;
+  width: 1.5rem;
+}
+.UnitOutline-jumpToInput:disabled {
+  background-color: var(--gray-9);
+}
--- a/static/frontend/unit/main/_outline.tmpl
+++ b/static/frontend/unit/main/_outline.tmpl
@ -0,0 +1,102 @@
+<!--
+  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.
+-->
+
+{{define "unit-outline"}}
+  <div class="UnitOutline-jumpTo">
+    <button class="UnitOutline-jumpToInput js-jumpToInput"
+        aria-controls="jump-to-modal"
+        aria-label="Open Jump to Identifier"
+        data-test-id="jump-to-button" data-gtmc="outline button">
+      Jump to ...
+    </button>
+  </div>
+  <ul class="go-Tree js-tree" aria-label="Outline">
+    {{if .Readme.String}}
+      <li class="js-readmeOutline">
+        <a href="#section-readme" data-gtmc="outline link">
+          README
+        </a>
+        {{template "readme-outline" .ReadmeOutline}}
+      </li>
+    {{end}}
+    {{if .IsPackage}}
+      <li>
+        <a href="#section-documentation" data-gtmc="outline link">
+          Documentation
+        </a>
+        {{.DocOutline}}
+      </li>
+    {{end}}
+    {{if .SourceFiles}}
+      <li>
+        <a href="#section-sourcefiles" data-gtmc="outline link">
+          Source Files
+        </a>
+      </li>
+    {{end}}
+    {{if .Directories}}
+      <li>
+        <a href="#section-directories" data-gtmc="outline link">
+          Directories
+        </a>
+      </li>
+    {{end}}
+  </ul>
+{{end}}
+
+{{define "readme-outline"}}
+  <ul id="readme-outline">
+    {{range .}}
+      <li>
+        <a href="#{{.ID}}" data-gtmc="readme outline link">
+          {{.Text}}
+        </a>
+        {{if .Children}}
+          <ul>
+            {{range .Children}}
+              <li>
+                <a href="#{{.ID}}" data-gtmc="readme outline link">
+                  {{.Text}}
+                </a>
+                {{if .Children}}
+                  <ul>
+                    {{range .Children}}
+                      <li>
+                        <a href="#{{.ID}}" data-gtmc="readme outline link">
+                          {{.Text}}
+                        </a>
+                      </li>
+                    {{end}} {{/* range .Children */}}
+                  </ul>
+                {{end}} {{/* if .Children */}}
+              </li>
+            {{end}} {{/* range .Children */}}
+          </ul>
+        {{end}} {{/* if .Children */}}
+      </li>
+    {{end}} {{/* range . */}}
+  </ul>
+{{end}}
+
+{{define "unit-outline_mobile"}}
+  <label class="go-Label" aria-label="Menu">
+    <select class="go-Select js-selectNav">
+      <option disabled="" label="Outline"></option>
+      {{if .Readme.String}}
+        <optgroup label="README">
+          {{range .ReadmeOutline}}<option value="{{.ID}}">{{.Text}}</option>{{end}}
+        </optgroup>
+      {{end}}
+      {{.MobileOutline}}
+      {{if .SourceFiles}}
+        <option value="section-sourcefiles">Source Files</option>
+      {{end}}
+      {{if .Directories}}
+        <option value="section-directories">Directories</option>
+      {{end}}
+    </select>
+  </label>
+{{end}}
--- a/static/frontend/unit/main/_readme.css
+++ b/static/frontend/unit/main/_readme.css
@ -0,0 +1,70 @@
+/*!
+ * 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.
+ */
+
+.UnitReadme {
+  margin-bottom: 2rem;
+}
+.UnitReadme ul,
+.UnitReadme ol {
+  list-style: circle;
+}
+.UnitReadme h2 a.UnitReadme-idLink,
+.UnitReadme summary a {
+  opacity: 0;
+}
+.UnitReadme h2:hover a,
+.UnitReadme summary:focus a {
+  opacity: 1;
+}
+.UnitReadme-title {
+  border-bottom: var(--border);
+  font-size: 1.375rem;
+  padding-bottom: 1rem;
+}
+.UnitReadme-title img {
+  margin: auto 1rem auto 0;
+}
+.UnitReadme-content {
+  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
+  mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
+  max-height: 20rem;
+  overflow: hidden;
+  position: relative;
+}
+.UnitReadme-content ul {
+  line-height: 1.5rem;
+}
+.UnitReadme-expandLink {
+  background: none;
+  border: none;
+  color: var(--color-brand-primary);
+  cursor: pointer;
+  padding: 0;
+}
+.UnitReadme-collapseLink {
+  background: none;
+  border: none;
+  color: var(--color-brand-primary);
+  cursor: pointer;
+  display: none;
+  padding: 0;
+}
+.UnitReadme--expanded .UnitReadme-content {
+  -webkit-mask-image: none;
+  mask-image: none;
+  max-height: initial;
+  overflow: initial;
+}
+.UnitReadme--expanded .UnitReadme-expandLink {
+  display: none;
+}
+.UnitReadme--expanded .UnitReadme-collapseLink {
+  display: block;
+}
+
+.Overview-readmeContent {
+  overflow-wrap: break-word;
+}
--- a/static/frontend/unit/main/_readme.tmpl
+++ b/static/frontend/unit/main/_readme.tmpl
@ -0,0 +1,26 @@
+<!--
+  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.
+-->
+
+{{define "unit-readme"}}
+  <div class="UnitReadme {{if .ExpandReadme}}UnitReadme--expanded{{end}} js-readme">
+    <h2 class="UnitReadme-title" id="section-readme">
+      <img class="go-Icon" height="24" width="24" src="/static/_icon/chrome_reader_mode_gm_grey_24dp.svg" alt="">
+      README
+      <a class="UnitReadme-idLink" href="#section-readme">¶</a>
+    </h2>
+    {{if .Readme.String }}
+      <div class="UnitReadme-content" data-test-id="Unit-readmeContent">
+        <div class="Overview-readmeContent js-readmeContent">{{.Readme}}</div>
+      </div>
+      <button class="UnitReadme-expandLink js-readmeExpand"
+          data-test-id="readme-expand" data-gtmc="readme button"
+          aria-label="Expand Readme">Expand ▾</button>
+      <button class="UnitReadme-collapseLink js-readmeCollapse"
+          data-test-id="readme-collapse" data-gtmc="readme button"
+          aria-label="Expand Readme">Collapse ▴</button>
+    {{end}}
+  </div>
+{{end}}
--- a/static/frontend/unit/main/main.css
+++ b/static/frontend/unit/main/main.css
@ -0,0 +1,69 @@
+/*!
+ * 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.
+ */
+
+@import url('../../css/readme.css');
+
+@import url('./_build-context.css');
+@import url('./_directories.css');
+@import url('./_doc.css');
+@import url('./_files.css');
+@import url('./_meta.css');
+@import url('./_modals.css');
+@import url('./_outline.css');
+@import url('./_readme.css');
+
+.UnitDetails {
+  column-gap: 2rem;
+  display: grid;
+  grid-template-columns: minmax(0, auto);
+  margin: auto;
+  min-height: 32rem;
+}
+@media only screen and (min-width: 64rem) {
+  .UnitDetails {
+    grid-template-columns: 15.5rem minmax(30.5rem, 43.125rem) minmax(10rem, 15.5rem);
+  }
+}
+@media only screen and (min-width: 80rem) {
+  .UnitDetails {
+    grid-template-columns: 15.5rem minmax(43.125rem, 60rem) 15.5rem;
+    justify-content: center;
+  }
+}
+.UnitDetails :target {
+  scroll-margin-top: calc(var(--js-sticky-header-height, 3.5rem) * 2.15);
+}
+@media only screen and (min-width: 64rem) {
+  .UnitDetails :target {
+    scroll-margin-top: calc(var(--js-sticky-header-height, 3.5rem) * 1.25);
+  }
+}
+
+.UnitDetails :target:not(details, h2) {
+  background-color: var(--color-background-highlighted);
+  padding: 0.25rem;
+}
+.UnitDetails-meta {
+  order: -1;
+}
+@media only screen and (min-width: 64rem) {
+  .UnitDetails-meta {
+    display: block;
+    margin-top: 2rem;
+    order: initial;
+  }
+}
+.UnitDetails-contentEmpty {
+  background-color: var(--color-background-accented);
+  color: var(--color-text-subtle);
+  height: 15rem;
+  padding-top: 1rem;
+  text-align: center;
+}
+.UnitDetails-contentEmpty img {
+  height: 7.8125rem;
+  width: auto;
+}
--- a/static/frontend/unit/main/main.js
+++ b/static/frontend/unit/main/main.js
@ -0,0 +1,2 @@
+import"../../_jump/jump.js";import"../../_playground/playground.js";import{SelectNavController as i,makeSelectNav as m}from"../../_outline/select.js";import{TreeNavController as u}from"../../_outline/tree.js";const s=document.querySelector(".js-tree");if(s){const e=new u(s),t=m(e),a=document.querySelector(".js-mainNavMobile");a&&a.firstElementChild&&a?.replaceChild(t,a.firstElementChild),t.firstElementChild&&new i(t.firstElementChild)}const n=document.querySelector(".js-readme"),r=document.querySelector(".js-readmeContent"),c=document.querySelector(".js-readmeOutline"),d=document.querySelectorAll(".js-readmeExpand"),o=document.querySelector(".js-readmeCollapse"),p=document.querySelector(".DocNavMobile-select");n&&r&&c&&d.length&&o&&(window.location.hash.includes("readme")&&n.classList.add("UnitReadme--expanded"),p?.addEventListener("change",e=>{e.target.value.startsWith("readme-")&&n.classList.add("UnitReadme--expanded")}),d.forEach(e=>e.addEventListener("click",t=>{t.preventDefault(),n.classList.add("UnitReadme--expanded"),n.scrollIntoView()})),o.addEventListener("click",e=>{e.preventDefault(),n.classList.remove("UnitReadme--expanded"),d[1]&&d[1].scrollIntoView({block:"center"})}),r.addEventListener("keyup",()=>{n.classList.add("UnitReadme--expanded")}),r.addEventListener("click",()=>{n.classList.add("UnitReadme--expanded")}),c.addEventListener("click",()=>{n.classList.add("UnitReadme--expanded")}),document.addEventListener("keydown",e=>{(e.ctrlKey||e.metaKey)&&e.key==="f"&&n.classList.add("UnitReadme--expanded")}));for(const e of document.querySelectorAll(".js-deprecatedTagLink")){const t=new URL(e.href).hash,l=document.querySelector(t)?.parentElement?.parentElement;l&&(e.addEventListener("click",()=>{l.open=!0}),location.hash===t&&(l.open=!0))}document.querySelectorAll(".js-buildContextSelect").forEach(e=>{e.addEventListener("change",t=>{window.location.search=`?GOOS=${t.target.value}`})});
+//# sourceMappingURL=main.js.map
--- a/static/frontend/unit/main/main.js.map
+++ b/static/frontend/unit/main/main.js.map
@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["main.ts"],
+  "sourcesContent": ["import '../../_jump/jump.js';\nimport '../../_playground/playground.js';\n\nimport { SelectNavController, makeSelectNav } from '../../_outline/select.js';\nimport { TreeNavController } from '../../_outline/tree.js';\n\nconst treeEl = document.querySelector<HTMLElement>('.js-tree');\nif (treeEl) {\n  const treeCtrl = new TreeNavController(treeEl);\n  const select = makeSelectNav(treeCtrl);\n  const mobileNav = document.querySelector('.js-mainNavMobile');\n  if (mobileNav && mobileNav.firstElementChild) {\n    mobileNav?.replaceChild(select, mobileNav.firstElementChild);\n  }\n  if (select.firstElementChild) {\n    new SelectNavController(select.firstElementChild);\n  }\n}\n\n/**\n * Event handlers for expanding and collapsing the readme section.\n */\nconst readme = document.querySelector('.js-readme');\nconst readmeContent = document.querySelector('.js-readmeContent');\nconst readmeOutline = document.querySelector('.js-readmeOutline');\nconst readmeExpand = document.querySelectorAll('.js-readmeExpand');\nconst readmeCollapse = document.querySelector('.js-readmeCollapse');\nconst mobileNavSelect = document.querySelector<HTMLSelectElement>('.DocNavMobile-select');\nif (readme && readmeContent && readmeOutline && readmeExpand.length && readmeCollapse) {\n  if (window.location.hash.includes('readme')) {\n    readme.classList.add('UnitReadme--expanded');\n  }\n  mobileNavSelect?.addEventListener('change', e => {\n    if ((e.target as HTMLSelectElement).value.startsWith('readme-')) {\n      readme.classList.add('UnitReadme--expanded');\n    }\n  });\n  readmeExpand.forEach(el =>\n    el.addEventListener('click', e => {\n      e.preventDefault();\n      readme.classList.add('UnitReadme--expanded');\n      readme.scrollIntoView();\n    })\n  );\n  readmeCollapse.addEventListener('click', e => {\n    e.preventDefault();\n    readme.classList.remove('UnitReadme--expanded');\n    if (readmeExpand[1]) {\n      readmeExpand[1].scrollIntoView({ block: 'center' });\n    }\n  });\n  readmeContent.addEventListener('keyup', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  readmeContent.addEventListener('click', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  readmeOutline.addEventListener('click', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  document.addEventListener('keydown', e => {\n    if ((e.ctrlKey || e.metaKey) && e.key === 'f') {\n      readme.classList.add('UnitReadme--expanded');\n    }\n  });\n}\n\n/**\n * Expand details items that are focused. This will expand\n * deprecated symbols when they are navigated to from the index\n * or a direct link.\n */\nfor (const a of document.querySelectorAll<HTMLAnchorElement>('.js-deprecatedTagLink')) {\n  const hash = new URL(a.href).hash;\n  const heading = document.querySelector(hash);\n  const details = heading?.parentElement?.parentElement as HTMLDetailsElement | null;\n  if (details) {\n    a.addEventListener('click', () => {\n      details.open = true;\n    });\n    if (location.hash === hash) {\n      details.open = true;\n    }\n  }\n}\n\n/**\n * Listen for changes in the build context dropdown.\n */\ndocument.querySelectorAll('.js-buildContextSelect').forEach(el => {\n  el.addEventListener('change', e => {\n    window.location.search = `?GOOS=${(e.target as HTMLSelectElement).value}`;\n  });\n});\n"],
+  "mappings": "AAAA,4BACA,wCAEA,kFACA,2DAEA,KAAM,GAAS,SAAS,cAA2B,YACnD,GAAI,EAAQ,CACV,KAAM,GAAW,GAAI,GAAkB,GACjC,EAAS,EAAc,GACvB,EAAY,SAAS,cAAc,qBACzC,AAAI,GAAa,EAAU,mBACzB,GAAW,aAAa,EAAQ,EAAU,mBAExC,EAAO,mBACT,GAAI,GAAoB,EAAO,mBAOnC,KAAM,GAAS,SAAS,cAAc,cAChC,EAAgB,SAAS,cAAc,qBACvC,EAAgB,SAAS,cAAc,qBACvC,EAAe,SAAS,iBAAiB,oBACzC,EAAiB,SAAS,cAAc,sBACxC,EAAkB,SAAS,cAAiC,wBAClE,AAAI,GAAU,GAAiB,GAAiB,EAAa,QAAU,GACjE,QAAO,SAAS,KAAK,SAAS,WAChC,EAAO,UAAU,IAAI,wBAEvB,GAAiB,iBAAiB,SAAU,GAAK,CAC/C,AAAK,EAAE,OAA6B,MAAM,WAAW,YACnD,EAAO,UAAU,IAAI,0BAGzB,EAAa,QAAQ,GACnB,EAAG,iBAAiB,QAAS,GAAK,CAChC,EAAE,iBACF,EAAO,UAAU,IAAI,wBACrB,EAAO,oBAGX,EAAe,iBAAiB,QAAS,GAAK,CAC5C,EAAE,iBACF,EAAO,UAAU,OAAO,wBACpB,EAAa,IACf,EAAa,GAAG,eAAe,CAAE,MAAO,aAG5C,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,SAAS,iBAAiB,UAAW,GAAK,CACxC,AAAK,GAAE,SAAW,EAAE,UAAY,EAAE,MAAQ,KACxC,EAAO,UAAU,IAAI,2BAU3B,SAAW,KAAK,UAAS,iBAAoC,yBAA0B,CACrF,KAAM,GAAO,GAAI,KAAI,EAAE,MAAM,KAEvB,EAAU,AADA,SAAS,cAAc,IACd,eAAe,cACxC,AAAI,GACF,GAAE,iBAAiB,QAAS,IAAM,CAChC,EAAQ,KAAO,KAEb,SAAS,OAAS,GACpB,GAAQ,KAAO,KAQrB,SAAS,iBAAiB,0BAA0B,QAAQ,GAAM,CAChE,EAAG,iBAAiB,SAAU,GAAK,CACjC,OAAO,SAAS,OAAS,SAAU,EAAE,OAA6B",
+  "names": []
+}
--- a/static/frontend/unit/main/main.tmpl
+++ b/static/frontend/unit/main/main.tmpl
@ -0,0 +1,77 @@
+<!--
+  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.
+-->
+
+{{define "main-styles"}}
+  <link href="/static/unit/main/main.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{end}}
+
+{{define "main-banner"}}
+  {{template "unit-header-banners" .}}
+{{end}}
+
+{{define "main-header"}}
+  {{template "unit-header" .}}
+{{end}}
+
+{{define "main-aside"}}
+  {{block "unit-meta" .}}{{end}}
+{{end}}
+
+{{define "main-nav"}}
+  <div class="go-Main-navDesktop">
+    {{block "unit-outline" .Details}}{{end}}
+  </div>
+  <div class="go-Main-navMobile js-mainNavMobile">
+    <label class="go-Label">
+      <select class="go-Select">
+        {{if .Details.Readme.String}}
+          <option selected disabled>README</option>
+        {{else if .Details.DocBody.String}}
+          <option selected disabled>Documentation</option>
+        {{else if .Details.SourceFiles}}
+          <option selected disabled>Source Files</option>
+        {{else if .Details.Directories}}
+          <option selected disabled>Directories</option>
+        {{end}}
+      </select>
+    </label>
+  </div>
+{{end}}
+
+{{define "main-content"}}
+  <div class="UnitDetails" data-test-id="UnitDetails" style="display: block;">
+    <div class="UnitDetails-content js-unitDetailsContent" role="main" data-test-id="UnitDetails-content">
+      {{if .Details.Readme.String}}
+        {{block "unit-readme" .Details}}{{end}}
+      {{end}}
+      {{if .Details.IsPackage}}
+        {{if .Unit.IsRedistributable}}
+          {{block "unit-doc" .Details}}{{end}}
+        {{else}}
+          <div class="UnitDetails-contentEmpty">
+            <img width="945" height="1200" src="/static/_gopher/airplane-1200x945.svg" alt="The Go Gopher"/>
+            <p>Documentation not displayed due to license restrictions.</p>
+            <p>See our <a href="/license-policy">license policy</a>.</p>
+          </div>
+        {{end}}
+      {{end}}
+      {{if .Details.SourceFiles}}
+        {{block "unit-files" .Details}}{{end}}
+      {{end}}
+      {{if .Details.Directories}}
+        {{block "unit-directories" .Details}}{{end}}
+      {{end}}
+    </div>
+  </div>
+  {{template "unit-modals" .}}
+{{end}}
+
+{{define "main-scripts"}}
+  <div class="js-canonicalURLPath" data-canonical-url-path="{{.CanonicalURLPath}}" hidden></div>
+  <script>
+    loadScript('/static/unit/main/main.js')
+  </script>
+{{end}}
--- a/static/frontend/unit/main/main.ts
+++ b/static/frontend/unit/main/main.ts
@ -0,0 +1,94 @@
+import '../../_jump/jump.js';
+import '../../_playground/playground.js';
+
+import { SelectNavController, makeSelectNav } from '../../_outline/select.js';
+import { TreeNavController } from '../../_outline/tree.js';
+
+const treeEl = document.querySelector<HTMLElement>('.js-tree');
+if (treeEl) {
+  const treeCtrl = new TreeNavController(treeEl);
+  const select = makeSelectNav(treeCtrl);
+  const mobileNav = document.querySelector('.js-mainNavMobile');
+  if (mobileNav && mobileNav.firstElementChild) {
+    mobileNav?.replaceChild(select, mobileNav.firstElementChild);
+  }
+  if (select.firstElementChild) {
+    new SelectNavController(select.firstElementChild);
+  }
+}
+
+/**
+ * Event handlers for expanding and collapsing the readme section.
+ */
+const readme = document.querySelector('.js-readme');
+const readmeContent = document.querySelector('.js-readmeContent');
+const readmeOutline = document.querySelector('.js-readmeOutline');
+const readmeExpand = document.querySelectorAll('.js-readmeExpand');
+const readmeCollapse = document.querySelector('.js-readmeCollapse');
+const mobileNavSelect = document.querySelector<HTMLSelectElement>('.DocNavMobile-select');
+if (readme && readmeContent && readmeOutline && readmeExpand.length && readmeCollapse) {
+  if (window.location.hash.includes('readme')) {
+    readme.classList.add('UnitReadme--expanded');
+  }
+  mobileNavSelect?.addEventListener('change', e => {
+    if ((e.target as HTMLSelectElement).value.startsWith('readme-')) {
+      readme.classList.add('UnitReadme--expanded');
+    }
+  });
+  readmeExpand.forEach(el =>
+    el.addEventListener('click', e => {
+      e.preventDefault();
+      readme.classList.add('UnitReadme--expanded');
+      readme.scrollIntoView();
+    })
+  );
+  readmeCollapse.addEventListener('click', e => {
+    e.preventDefault();
+    readme.classList.remove('UnitReadme--expanded');
+    if (readmeExpand[1]) {
+      readmeExpand[1].scrollIntoView({ block: 'center' });
+    }
+  });
+  readmeContent.addEventListener('keyup', () => {
+    readme.classList.add('UnitReadme--expanded');
+  });
+  readmeContent.addEventListener('click', () => {
+    readme.classList.add('UnitReadme--expanded');
+  });
+  readmeOutline.addEventListener('click', () => {
+    readme.classList.add('UnitReadme--expanded');
+  });
+  document.addEventListener('keydown', e => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+      readme.classList.add('UnitReadme--expanded');
+    }
+  });
+}
+
+/**
+ * Expand details items that are focused. This will expand
+ * deprecated symbols when they are navigated to from the index
+ * or a direct link.
+ */
+for (const a of document.querySelectorAll<HTMLAnchorElement>('.js-deprecatedTagLink')) {
+  const hash = new URL(a.href).hash;
+  const heading = document.querySelector(hash);
+  const details = heading?.parentElement?.parentElement as HTMLDetailsElement | null;
+  if (details) {
+    a.addEventListener('click', () => {
+      details.open = true;
+    });
+    if (location.hash === hash) {
+      details.open = true;
+    }
+  }
+}
+
+/**
+ * Listen for changes in the build context dropdown.
+ */
+document.querySelectorAll('.js-buildContextSelect').forEach(el => {
+  el.addEventListener('change', e => {
+    window.location.search = `?GOOS=${(e.target as HTMLSelectElement).value}`;
+  });
+});
--- a/static/frontend/unit/unit.css
+++ b/static/frontend/unit/unit.css
@ -0,0 +1,329 @@
+/*!
+ * Copyright 2021 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.
+ */
+
+@import url('./_header.css');
+
+.go-Main {
+  background-color: var(--color-background);
+  color: var(--color-text);
+  display: grid;
+  flex-grow: 1;
+  grid-template-areas:
+    'banner'
+    'header'
+    'aside'
+    'nav'
+    'article'
+    'footer';
+  grid-template-columns: 100%;
+  grid-template-rows: repeat(6, min-content);
+  min-height: 32rem;
+}
+
+.go-Main-banner {
+  grid-area: banner;
+}
+.go-Main-header {
+  background-color: var(--color-background);
+  border-bottom: var(--border);
+  font-size: 0.875rem;
+  grid-area: header;
+  min-height: var(--js-unit-header-height);
+  padding: 0 var(--gutter);
+  position: sticky;
+  top: var(--js-unit-header-top, 0);
+  transition: box-shadow 0.25s linear;
+  z-index: 10;
+}
+.go-Main-nav {
+  background-color: var(--color-background);
+  border-bottom: var(--border);
+  font-size: 0.875rem;
+  grid-area: nav;
+  padding: 0 var(--gutter);
+}
+.go-Main-article {
+  background-color: var(--color-background);
+  grid-area: article;
+  margin: var(--gap) 0 5rem 0;
+  min-height: 32rem;
+  padding: 0 var(--gutter);
+}
+.go-Main-aside {
+  background-color: var(--color-background);
+  font-size: 0.875rem;
+  grid-area: aside;
+  padding: 1rem var(--gutter);
+}
+.go-Main-footer {
+  background-color: var(--color-background);
+  grid-area: footer;
+  padding: 0 var(--gutter);
+}
+
+.go-Main > *:empty {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.go-Main-headerBreadcrumb {
+  margin-top: 1rem;
+}
+.go-Main-headerContent {
+  margin-bottom: 1rem;
+  position: sticky;
+  top: 0;
+}
+.go-Main-headerContent[data-fixed] {
+  align-items: center;
+  display: flex;
+  margin-bottom: 0;
+  min-height: 0;
+}
+@media screen and (min-width: 80rem) {
+  .go-Main-headerContent[data-fixed] {
+    justify-content: space-between;
+  }
+}
+.go-Main-headerContent[data-fixed] .go-Chip {
+  display: none;
+}
+
+.go-Main-headerTitle {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  height: 3.5rem;
+}
+.go-Main-headerTitle .go-Clipboard {
+  display: none;
+}
+.go-Main-headerTitle[data-fixed] .go-Clipboard {
+  display: initial;
+}
+
+.go-Main-headerLogo {
+  --logo-height: 1.75rem;
+  --logo-width: calc(var(--logo-height) / 0.3768);
+
+  align-items: center;
+  display: flex;
+  margin-right: -0.5rem;
+  opacity: 0;
+  transition: opacity 0.25s ease-in-out, width 0.25s ease-out;
+  visibility: hidden;
+  width: 0;
+}
+.go-Main-headerLogo img {
+  height: var(--logo-height);
+  margin: -1rem 0;
+  width: var(--logo-width);
+}
+.go-Main-headerLogo[data-fixed] {
+  margin-right: 0;
+  opacity: 1;
+  visibility: visible;
+  width: var(--logo-width);
+}
+
+.go-Main-headerDetails {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  white-space: nowrap;
+}
+@media only screen and (min-width: 50rem) {
+  .go-Main-headerDetails {
+    display: flex;
+    flex-direction: row;
+    gap: 0 1rem;
+  }
+}
+.go-Main-headerDetails[data-fixed] {
+  display: none;
+}
+@media screen and (min-width: 80rem) {
+  :root:not([data-layout='compact']) .go-Main-headerDetails[data-fixed] {
+    display: flex;
+  }
+}
+.go-Main-headerDetailItem {
+  color: var(--color-text-subtle);
+  display: inline;
+  font-size: 0.875rem;
+  height: 1.75rem;
+  line-height: 1.75rem;
+}
+@media only screen and (min-width: 50rem) {
+  .go-Main-headerDetailItem:not(:last-of-type)::after {
+    content: '|';
+    padding-left: 1rem;
+  }
+}
+
+.go-Main-nav--sticky {
+  position: sticky;
+  top: var(--js-sticky-header-height, 3.5rem);
+  transition: box-shadow 0.25s linear;
+  z-index: 1;
+}
+.go-Main-nav--fixed {
+  border-top: initial;
+  box-shadow: var(--box-shadow);
+}
+
+.go-Main-navDesktop {
+  display: none;
+  margin-top: var(--gap);
+  overflow-y: auto;
+  padding: 0.25rem;
+  position: sticky;
+  top: calc(var(--js-sticky-header-height, 3.5rem) + 1rem);
+}
+.go-Main-navMobile {
+  display: flex;
+  margin: 0.5rem 0;
+}
+.go-Main-navMobile .go-Label {
+  flex-grow: 1;
+  position: relative;
+}
+.go-Main-navMobile .go-Select {
+  padding-left: 1.75rem;
+  width: 100%;
+}
+.go-Main-navMobile .go-Label::before {
+  background: url(/static/_icon/list_gm_grey_24dp.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+  content: ' ';
+  height: 1.25rem;
+  left: 0.5rem;
+  padding-left: 1rem;
+  position: absolute;
+  top: 0.375rem;
+  width: 1.25rem;
+}
+
+/* Safari only */
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) {
+    .go-Main-navMobile .go-Select {
+      -webkit-appearance: none;
+      appearance: none;
+    }
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  :root[data-layout='responsive'] .go-Main {
+    grid-template-areas:
+      'banner  banner'
+      'header  header'
+      'aside   aside'
+      'nav     article'
+      'footer  footer';
+    grid-template-columns: 21.5% minmax(0, auto);
+    grid-template-rows: repeat(5, min-content);
+  }
+  :root[data-layout='responsive'] .go-Main-nav {
+    border-bottom: none;
+    border-top: none;
+    padding: 0 0 0 var(--gutter);
+  }
+  :root[data-layout='responsive'] .go-Main-header[data-fixed] {
+    box-shadow: var(--box-shadow);
+  }
+  :root[data-layout='responsive'] .go-Main-article {
+    border-bottom: none;
+    border-top: none;
+    margin: var(--gap) 0 5rem var(--gap);
+    padding: 0 var(--gutter) 0 0;
+  }
+  :root[data-layout='responsive'] .go-Main-aside {
+    border-bottom: var(--border);
+  }
+  :root[data-layout='responsive'] .go-Main-nav--sticky {
+    position: initial;
+  }
+  :root[data-layout='responsive'] .go-Main-nav--fixed {
+    box-shadow: none;
+  }
+  :root[data-layout='responsive'] .go-Main-navDesktop {
+    display: block;
+  }
+  :root[data-layout='responsive'] .go-Main-navMobile {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 112rem) {
+  :root[data-layout='responsive'] .go-Main {
+    grid-template-areas:
+      'banner banner  banner'
+      'header header  header'
+      'nav    article aside'
+      'footer footer  footer';
+    grid-template-columns: minmax(17.5%, 1fr) minmax(0, 4fr) minmax(17.5%, 1fr);
+    grid-template-rows: repeat(4, min-content);
+  }
+  :root[data-layout='responsive'] .go-Main-article {
+    margin: var(--gap) var(--gap) 5rem;
+    padding: 0;
+  }
+  :root[data-layout='responsive'] .go-Main-aside {
+    border-bottom: none;
+    margin: var(--gap) 0 0 0;
+    padding: 0 var(--gutter) 0 0;
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  :root[data-layout='compact'] .go-Main {
+    grid-template-areas:
+      'banner  banner'
+      'header  .'
+      'header  nav'
+      'aside   aside'
+      'article article'
+      'footer  footer';
+    grid-template-columns: 1fr auto;
+    grid-template-rows: repeat(6, min-content);
+  }
+  :root[data-layout='compact'] .go-Main-nav {
+    align-items: center;
+    border-bottom: var(--border);
+    display: flex;
+    top: calc((var(--js-main-header-height, 0) - var(--js-sticky-header-height, 3.5rem)) * -1);
+  }
+  :root[data-layout='compact'] .go-Main-header[data-fixed] {
+    box-shadow: none;
+  }
+  :root[data-layout='compact'] .go-Main-nav--sticky {
+    height: var(--js-sticky-header-height, 3.5rem);
+    position: sticky;
+    top: 0;
+  }
+  :root[data-layout='compact'] .go-Main-nav--fixed {
+    box-shadow: none;
+  }
+  :root[data-layout='compact'] .go-Main-navDesktop {
+    display: none;
+  }
+  :root[data-layout='compact'] .go-Main-navMobile {
+    display: flex;
+  }
+}
+
+@media print {
+  .go-Main-header--sticky,
+  .go-Main-header--sticky > :last-child,
+  .go-Main-nav--sticky,
+  .go-Main-navDesktop {
+    position: initial;
+  }
+}
--- a/static/frontend/unit/unit.js
+++ b/static/frontend/unit/unit.js
@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2021 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.
+ */import{ExpandableRowsTableController as o}from"../_table/table.js";document.querySelectorAll(".js-expandableTable").forEach(n=>new o(n,document.querySelector(".js-expandAllDirectories")));const a=3.5;export class MainLayoutController{constructor(e,t){this.mainHeader=e;this.mainNav=t;this.handleDoubleClick=e=>{e.target===this.mainHeader?.lastElementChild&&(window.getSelection()?.removeAllRanges(),window.scrollTo({top:0,behavior:"smooth"}))};this.handleResize=()=>{const e=(t,i)=>document.documentElement.style.setProperty(t,i);e("--js-unit-header-height","0"),setTimeout(()=>{const t=(this.mainHeader?.getBoundingClientRect().height??0)/16;e("--js-unit-header-height",`${t}rem`),e("--js-sticky-header-height",`${a}rem`),e("--js-unit-header-top",`${(t-a)*-1}rem`)})};this.headerObserver=new IntersectionObserver(([i])=>{if(i.intersectionRatio<1)for(const r of document.querySelectorAll('[class^="go-Main-header"'))r.setAttribute("data-fixed","true");else{for(const r of document.querySelectorAll('[class^="go-Main-header"'))r.removeAttribute("data-fixed");this.handleResize()}},{threshold:1}),this.navObserver=new IntersectionObserver(([i])=>{i.intersectionRatio<1?(this.mainNav?.classList.add("go-Main-nav--fixed"),this.mainNav?.setAttribute("data-fixed","true")):(this.mainNav?.classList.remove("go-Main-nav--fixed"),this.mainNav?.removeAttribute("data-fixed"))},{threshold:1,rootMargin:`-${(a??0)*16+10}px`}),this.init()}init(){if(this.handleResize(),window.addEventListener("resize",this.handleResize),this.mainHeader?.addEventListener("dblclick",this.handleDoubleClick),this.mainHeader?.hasChildNodes()){const e=document.createElement("div");this.mainHeader?.prepend(e),this.headerObserver.observe(e)}if(this.mainNav?.hasChildNodes()){const e=document.createElement("div");this.mainNav?.prepend(e),this.navObserver.observe(e)}}}const s=n=>document.querySelector(n);new MainLayoutController(s(".js-mainHeader"),s(".js-mainNav"));
+//# sourceMappingURL=unit.js.map
--- a/static/frontend/unit/unit.js.map
+++ b/static/frontend/unit/unit.js.map
@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["unit.ts"],
+  "sourcesContent": ["/**\n * @license\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\nimport { ExpandableRowsTableController } from '../_table/table.js';\n\ndocument\n  .querySelectorAll<HTMLTableElement>('.js-expandableTable')\n  .forEach(\n    el =>\n      new ExpandableRowsTableController(\n        el,\n        document.querySelector<HTMLButtonElement>('.js-expandAllDirectories')\n      )\n  );\n\n/**\n * MainLayoutController calculates dynamic height values for header elements\n * to support variable size sticky positioned elements in the header so that\n * banners and breadcumbs may overflow to multiple lines.\n */\n\nconst headerHeight = 3.5;\n\nexport class MainLayoutController {\n  private headerObserver: IntersectionObserver;\n  private navObserver: IntersectionObserver;\n\n  constructor(private mainHeader?: Element | null, private mainNav?: Element | null) {\n    this.headerObserver = new IntersectionObserver(\n      ([e]) => {\n        if (e.intersectionRatio < 1) {\n          for (const x of document.querySelectorAll('[class^=\"go-Main-header\"')) {\n            x.setAttribute('data-fixed', 'true');\n          }\n        } else {\n          for (const x of document.querySelectorAll('[class^=\"go-Main-header\"')) {\n            x.removeAttribute('data-fixed');\n          }\n          this.handleResize();\n        }\n      },\n      { threshold: 1 }\n    );\n    this.navObserver = new IntersectionObserver(\n      ([e]) => {\n        if (e.intersectionRatio < 1) {\n          this.mainNav?.classList.add('go-Main-nav--fixed');\n          this.mainNav?.setAttribute('data-fixed', 'true');\n        } else {\n          this.mainNav?.classList.remove('go-Main-nav--fixed');\n          this.mainNav?.removeAttribute('data-fixed');\n        }\n      },\n      { threshold: 1, rootMargin: `-${(headerHeight ?? 0) * 16 + 10}px` }\n    );\n    this.init();\n  }\n\n  private init() {\n    this.handleResize();\n    window.addEventListener('resize', this.handleResize);\n    this.mainHeader?.addEventListener('dblclick', this.handleDoubleClick);\n    if (this.mainHeader?.hasChildNodes()) {\n      const headerSentinel = document.createElement('div');\n      this.mainHeader?.prepend(headerSentinel);\n      this.headerObserver.observe(headerSentinel);\n    }\n    if (this.mainNav?.hasChildNodes()) {\n      const navSentinel = document.createElement('div');\n      this.mainNav?.prepend(navSentinel);\n      this.navObserver.observe(navSentinel);\n    }\n  }\n\n  private handleDoubleClick: EventListener = e => {\n    const target = e.target;\n    if (target === this.mainHeader?.lastElementChild) {\n      window.getSelection()?.removeAllRanges();\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    }\n  };\n\n  private handleResize = () => {\n    const setProp = (name: string, value: string) =>\n      document.documentElement.style.setProperty(name, value);\n    setProp('--js-unit-header-height', '0');\n    setTimeout(() => {\n      const mainHeaderHeight = (this.mainHeader?.getBoundingClientRect().height ?? 0) / 16;\n      setProp('--js-unit-header-height', `${mainHeaderHeight}rem`);\n      setProp('--js-sticky-header-height', `${headerHeight}rem`);\n      setProp('--js-unit-header-top', `${(mainHeaderHeight - headerHeight) * -1}rem`);\n    });\n  };\n}\n\nconst el = <T extends HTMLElement>(selector: string) => document.querySelector<T>(selector);\nnew MainLayoutController(el('.js-mainHeader'), el('.js-mainNav'));\n"],
+  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOA,mEAEA,SACG,iBAAmC,uBACnC,QACC,GACE,GAAI,GACF,EACA,SAAS,cAAiC,8BAUlD,KAAM,GAAe,IAEd,iCAA2B,CAIhC,YAAoB,EAAqC,EAA0B,CAA/D,kBAAqC,eA+CjD,uBAAmC,GAAK,CAE9C,AAAI,AADW,EAAE,SACF,KAAK,YAAY,kBAC9B,QAAO,gBAAgB,kBACvB,OAAO,SAAS,CAAE,IAAK,EAAG,SAAU,aAIhC,kBAAe,IAAM,CAC3B,KAAM,GAAU,CAAC,EAAc,IAC7B,SAAS,gBAAgB,MAAM,YAAY,EAAM,GACnD,EAAQ,0BAA2B,KACnC,WAAW,IAAM,CACf,KAAM,GAAoB,MAAK,YAAY,wBAAwB,QAAU,GAAK,GAClF,EAAQ,0BAA2B,GAAG,QACtC,EAAQ,4BAA6B,GAAG,QACxC,EAAQ,uBAAwB,GAAI,GAAmB,GAAgB,YA9DzE,KAAK,eAAiB,GAAI,sBACxB,CAAC,CAAC,KAAO,CACP,GAAI,EAAE,kBAAoB,EACxB,SAAW,KAAK,UAAS,iBAAiB,4BACxC,EAAE,aAAa,aAAc,YAE1B,CACL,SAAW,KAAK,UAAS,iBAAiB,4BACxC,EAAE,gBAAgB,cAEpB,KAAK,iBAGT,CAAE,UAAW,IAEf,KAAK,YAAc,GAAI,sBACrB,CAAC,CAAC,KAAO,CACP,AAAI,EAAE,kBAAoB,EACxB,MAAK,SAAS,UAAU,IAAI,sBAC5B,KAAK,SAAS,aAAa,aAAc,SAEzC,MAAK,SAAS,UAAU,OAAO,sBAC/B,KAAK,SAAS,gBAAgB,gBAGlC,CAAE,UAAW,EAAG,WAAY,IAAK,IAAgB,GAAK,GAAK,SAE7D,KAAK,OAGC,MAAO,CAIb,GAHA,KAAK,eACL,OAAO,iBAAiB,SAAU,KAAK,cACvC,KAAK,YAAY,iBAAiB,WAAY,KAAK,mBAC/C,KAAK,YAAY,gBAAiB,CACpC,KAAM,GAAiB,SAAS,cAAc,OAC9C,KAAK,YAAY,QAAQ,GACzB,KAAK,eAAe,QAAQ,GAE9B,GAAI,KAAK,SAAS,gBAAiB,CACjC,KAAM,GAAc,SAAS,cAAc,OAC3C,KAAK,SAAS,QAAQ,GACtB,KAAK,YAAY,QAAQ,KAyB/B,KAAM,GAAK,AAAwB,GAAqB,SAAS,cAAiB,GAClF,GAAI,sBAAqB,EAAG,kBAAmB,EAAG",
+  "names": []
+}
--- a/static/frontend/unit/unit.tmpl
+++ b/static/frontend/unit/unit.tmpl
@ -0,0 +1,44 @@
+<!--
+  Copyright 2021 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.
+-->
+
+{{define "title"}}<title>{{.Title}} · pkg.go.dev</title>{{end}}
+
+{{define "description"}}{{.MetaDescription}}{{end}}
+
+{{define "pre-content"}}
+  <link href="/static/unit/unit.css?version={{.AppVersionLabel}}" rel="stylesheet">
+  {{block "main-styles".}}{{end}}
+{{end}}
+
+{{define "main"}}
+  <main class="go-Main">
+    <div class="go-Main-banner" role="alert">
+      {{- block "main-banner" .}}{{end -}}
+    </div>
+    <header class="go-Main-header js-mainHeader">
+      {{- block "main-header" .}}{{end -}}
+    </header>
+    <aside class="go-Main-aside">
+      {{- block "main-aside" .}}{{end -}}
+    </aside>
+    <nav class="go-Main-nav go-Main-nav--sticky js-mainNav" aria-label="Outline">
+      {{- block "main-nav" .}}{{end -}}
+    </nav>
+    <article class="go-Main-article js-mainContent">
+      {{- block "main-content" .}}{{end -}}
+    </article>
+    <footer class="go-Main-footer">
+      {{- block "main-footer" .}}{{end -}}
+    </footer>
+  </main>
+{{end}}
+
+{{define "post-content"}}
+  {{block "main-scripts" .}}{{end}}
+  <script>
+    loadScript('/static/unit/unit.js')
+  </script>
+{{end}}
--- a/static/frontend/unit/unit.ts
+++ b/static/frontend/unit/unit.ts
@ -0,0 +1,101 @@
+/**
+ * @license
+ * Copyright 2021 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.
+ */
+
+import { ExpandableRowsTableController } from '../_table/table.js';
+
+document
+  .querySelectorAll<HTMLTableElement>('.js-expandableTable')
+  .forEach(
+    el =>
+      new ExpandableRowsTableController(
+        el,
+        document.querySelector<HTMLButtonElement>('.js-expandAllDirectories')
+      )
+  );
+
+/**
+ * MainLayoutController calculates dynamic height values for header elements
+ * to support variable size sticky positioned elements in the header so that
+ * banners and breadcumbs may overflow to multiple lines.
+ */
+
+const headerHeight = 3.5;
+
+export class MainLayoutController {
+  private headerObserver: IntersectionObserver;
+  private navObserver: IntersectionObserver;
+
+  constructor(private mainHeader?: Element | null, private mainNav?: Element | null) {
+    this.headerObserver = new IntersectionObserver(
+      ([e]) => {
+        if (e.intersectionRatio < 1) {
+          for (const x of document.querySelectorAll('[class^="go-Main-header"')) {
+            x.setAttribute('data-fixed', 'true');
+          }
+        } else {
+          for (const x of document.querySelectorAll('[class^="go-Main-header"')) {
+            x.removeAttribute('data-fixed');
+          }
+          this.handleResize();
+        }
+      },
+      { threshold: 1 }
+    );
+    this.navObserver = new IntersectionObserver(
+      ([e]) => {
+        if (e.intersectionRatio < 1) {
+          this.mainNav?.classList.add('go-Main-nav--fixed');
+          this.mainNav?.setAttribute('data-fixed', 'true');
+        } else {
+          this.mainNav?.classList.remove('go-Main-nav--fixed');
+          this.mainNav?.removeAttribute('data-fixed');
+        }
+      },
+      { threshold: 1, rootMargin: `-${(headerHeight ?? 0) * 16 + 10}px` }
+    );
+    this.init();
+  }
+
+  private init() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize);
+    this.mainHeader?.addEventListener('dblclick', this.handleDoubleClick);
+    if (this.mainHeader?.hasChildNodes()) {
+      const headerSentinel = document.createElement('div');
+      this.mainHeader?.prepend(headerSentinel);
+      this.headerObserver.observe(headerSentinel);
+    }
+    if (this.mainNav?.hasChildNodes()) {
+      const navSentinel = document.createElement('div');
+      this.mainNav?.prepend(navSentinel);
+      this.navObserver.observe(navSentinel);
+    }
+  }
+
+  private handleDoubleClick: EventListener = e => {
+    const target = e.target;
+    if (target === this.mainHeader?.lastElementChild) {
+      window.getSelection()?.removeAllRanges();
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  private handleResize = () => {
+    const setProp = (name: string, value: string) =>
+      document.documentElement.style.setProperty(name, value);
+    setProp('--js-unit-header-height', '0');
+    setTimeout(() => {
+      const mainHeaderHeight = (this.mainHeader?.getBoundingClientRect().height ?? 0) / 16;
+      setProp('--js-unit-header-height', `${mainHeaderHeight}rem`);
+      setProp('--js-sticky-header-height', `${headerHeight}rem`);
+      setProp('--js-unit-header-top', `${(mainHeaderHeight - headerHeight) * -1}rem`);
+    });
+  };
+}
+
+const el = <T extends HTMLElement>(selector: string) => document.querySelector<T>(selector);
+new MainLayoutController(el('.js-mainHeader'), el('.js-mainNav'));
--- a/static/frontend/unit/versions/versions.css
+++ b/static/frontend/unit/versions/versions.css
@ -0,0 +1,142 @@
+/*
+ * Copyright 2021 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.
+ */
+
+.Versions table {
+  border-spacing: 0;
+}
+.Versions th {
+  text-align: left;
+}
+.Versions td {
+  padding-bottom: 1rem;
+}
+.Versions td:nth-child(1) {
+  padding-right: 3rem;
+  vertical-align: top;
+}
+.Versions td:nth-child(2) {
+  border-right: var(--border);
+  padding-right: 1rem;
+  text-align: right;
+  vertical-align: top;
+  white-space: nowrap;
+}
+.Versions td:nth-child(3) {
+  padding-left: 1rem;
+}
+.Versions-commitTime {
+  font-size: 1rem;
+  font-weight: 400;
+}
+.Versions-major {
+  font-weight: 600;
+}
+.Versions-symbols {
+  margin-left: 2rem;
+}
+.Versions-symbolBulletNew {
+  color: var(--color-text-subtle);
+  padding-right: 0.5rem;
+}
+.Versions-symbolBuilds,
+.Versions-symbolBuildsDash,
+.Versions-symbolOld {
+  color: var(--color-text-subtle);
+}
+.Versions-symbolChild {
+  padding-left: 2rem;
+}
+.Versions-symbolSection,
+.Versions-symbolType {
+  margin-bottom: 0.625rem;
+}
+.Versions-symbolsHeader {
+  margin: 0.625rem 0;
+}
+
+.Versions-title {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 2.5rem;
+  margin-bottom: 1rem;
+}
+.Versions-titleButtonGroup {
+  display: none;
+}
+.Versions-titleButtonGroup button {
+  font-size: 0.875rem;
+}
+.Versions-list {
+  gap: 0 1rem;
+  line-height: 2.25rem;
+}
+@media only screen and (min-width: 37.5rem) {
+  .Versions-list {
+    display: grid;
+    grid-template-columns: fit-content(8rem) fit-content(20rem) min-content auto;
+  }
+}
+.Version-major {
+  align-items: baseline;
+  display: flex;
+  margin-bottom: 1rem;
+  min-width: 4rem;
+}
+@media only screen and (min-width: 37.5rem) {
+  .Version-major {
+    margin-bottom: 0;
+  }
+}
+.Version-tag {
+  text-align: left;
+}
+@media only screen and (min-width: 37.5rem) {
+  .Version-tag {
+    text-align: right;
+  }
+}
+.Version-dot {
+  border: var(--border);
+  color: var(--gray-7);
+  display: none;
+  font-size: 2.75rem;
+  justify-content: center;
+  line-height: 1.75rem;
+  -webkit-text-stroke: 0.125rem var(--color-background);
+  width: 0;
+}
+.Version-dot::before {
+  content: '•';
+}
+@media only screen and (min-width: 37.5rem) {
+  .Version-dot {
+    display: flex;
+  }
+}
+.Version-dot--minor {
+  color: var(--color-brand-primary);
+}
+.Version-commitTime {
+  align-items: center;
+  display: flex;
+  margin-left: 1rem;
+  white-space: nowrap;
+}
+.Version-details {
+  line-height: 1.25rem;
+}
+.Version-summary {
+  align-items: center;
+  cursor: pointer;
+  line-height: 2.25rem;
+  padding-right: 0.5rem;
+  white-space: nowrap;
+  width: min-content;
+}
+.Version-summary .go-Chip {
+  margin-left: 0.5rem;
+}
--- a/static/frontend/unit/versions/versions.js
+++ b/static/frontend/unit/versions/versions.js
@ -0,0 +1,7 @@
+/*!
+ * @license
+ * Copyright 2021 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.
+ */class VersionsController{constructor(){this.expand=document.querySelector(".js-versionsExpand");this.collapse=document.querySelector(".js-versionsCollapse");this.details=[...document.querySelectorAll(".js-versionDetails")];if(!!this.expand?.parentElement){this.details.some(e=>e.tagName==="DETAILS")&&(this.expand.parentElement.style.display="block");for(const e of this.details)e.addEventListener("click",()=>{this.updateButtons()});this.expand?.addEventListener("click",()=>{this.details.map(e=>e.open=!0),this.updateButtons()}),this.collapse?.addEventListener("click",()=>{this.details.map(e=>e.open=!1),this.updateButtons()}),this.updateButtons(),this.setCurrent()}}setCurrent(){const e=document.querySelector(".js-canonicalURLPath")?.dataset?.canonicalUrlPath,t=document.querySelector(`.js-versionLink[href="${e}"]`);t&&(t.style.fontWeight="bold")}updateButtons(){setTimeout(()=>{if(!this.expand||!this.collapse)return;let e,t;for(const s of this.details)e=e||s.open,t=t||!s.open;this.expand.style.display=t?"inline-block":"none",this.collapse.style.display=t?"none":"inline-block"})}}new VersionsController;
+//# sourceMappingURL=versions.js.map
--- a/static/frontend/unit/versions/versions.js.map
+++ b/static/frontend/unit/versions/versions.js.map
@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["versions.ts"],
+  "sourcesContent": ["/*!\n * @license\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\n/**\n * VersionsController encapsulates event listeners and UI updates\n * for the versions page. As the the expandable sections containing\n * the symbol history for a package are opened and closed it toggles\n * visiblity of the buttons to expand or collapse them. On page load\n * it adds an indicator to the version that matches the version request\n * by the user for the page or the canonical url path.\n */\nclass VersionsController {\n  private expand = document.querySelector<HTMLButtonElement>('.js-versionsExpand');\n  private collapse = document.querySelector<HTMLButtonElement>('.js-versionsCollapse');\n  private details = [...document.querySelectorAll<HTMLDetailsElement>('.js-versionDetails')];\n\n  constructor() {\n    if (!this.expand?.parentElement) return;\n    if (this.details.some(d => d.tagName === 'DETAILS')) {\n      this.expand.parentElement.style.display = 'block';\n    }\n\n    for (const d of this.details) {\n      d.addEventListener('click', () => {\n        this.updateButtons();\n      });\n    }\n\n    this.expand?.addEventListener('click', () => {\n      this.details.map(d => (d.open = true));\n      this.updateButtons();\n    });\n\n    this.collapse?.addEventListener('click', () => {\n      this.details.map(d => (d.open = false));\n      this.updateButtons();\n    });\n\n    this.updateButtons();\n    this.setCurrent();\n  }\n\n  /**\n   * setCurrent applies the active style to the version dot\n   * for the version that matches the canonical URL path.\n   */\n  private setCurrent() {\n    const canonicalPath = document.querySelector<HTMLElement>('.js-canonicalURLPath')?.dataset\n      ?.canonicalUrlPath;\n    const versionLink = document.querySelector<HTMLElement>(\n      `.js-versionLink[href=\"${canonicalPath}\"]`\n    );\n    if (versionLink) {\n      versionLink.style.fontWeight = 'bold';\n    }\n  }\n\n  private updateButtons() {\n    setTimeout(() => {\n      if (!this.expand || !this.collapse) return;\n      let someOpen, someClosed;\n      for (const d of this.details) {\n        someOpen = someOpen || d.open;\n        someClosed = someClosed || !d.open;\n      }\n      this.expand.style.display = someClosed ? 'inline-block' : 'none';\n      this.collapse.style.display = someClosed ? 'none' : 'inline-block';\n    });\n  }\n}\n\nnew VersionsController();\n"],
+  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAeA,wBAAyB,CAKvB,aAAc,CAJN,YAAS,SAAS,cAAiC,sBACnD,cAAW,SAAS,cAAiC,wBACrD,aAAU,CAAC,GAAG,SAAS,iBAAqC,uBAGlE,GAAI,EAAC,KAAK,QAAQ,cAClB,CAAI,KAAK,QAAQ,KAAK,GAAK,EAAE,UAAY,YACvC,MAAK,OAAO,cAAc,MAAM,QAAU,SAG5C,SAAW,KAAK,MAAK,QACnB,EAAE,iBAAiB,QAAS,IAAM,CAChC,KAAK,kBAIT,KAAK,QAAQ,iBAAiB,QAAS,IAAM,CAC3C,KAAK,QAAQ,IAAI,GAAM,EAAE,KAAO,IAChC,KAAK,kBAGP,KAAK,UAAU,iBAAiB,QAAS,IAAM,CAC7C,KAAK,QAAQ,IAAI,GAAM,EAAE,KAAO,IAChC,KAAK,kBAGP,KAAK,gBACL,KAAK,cAOC,YAAa,CACnB,KAAM,GAAgB,SAAS,cAA2B,yBAAyB,SAC/E,iBACE,EAAc,SAAS,cAC3B,yBAAyB,OAE3B,AAAI,GACF,GAAY,MAAM,WAAa,QAI3B,eAAgB,CACtB,WAAW,IAAM,CACf,GAAI,CAAC,KAAK,QAAU,CAAC,KAAK,SAAU,OACpC,GAAI,GAAU,EACd,SAAW,KAAK,MAAK,QACnB,EAAW,GAAY,EAAE,KACzB,EAAa,GAAc,CAAC,EAAE,KAEhC,KAAK,OAAO,MAAM,QAAU,EAAa,eAAiB,OAC1D,KAAK,SAAS,MAAM,QAAU,EAAa,OAAS,kBAK1D,GAAI",
+  "names": []
+}
--- a/static/frontend/unit/versions/versions.tmpl
+++ b/static/frontend/unit/versions/versions.tmpl
@ -0,0 +1,126 @@
+<!--
+  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.
+-->
+
+{{define "main-styles"}}
+  <link href="/static/unit/versions/versions.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{end}}
+
+{{define "main-header"}}
+  {{template "unit-header" .}}
+{{end}}
+
+{{define "main-content"}}
+  {{block "versions" .Details}}{{end}}
+{{end}}
+
+{{define "main-scripts"}}
+  <script>
+    loadScript("/static/unit/versions/versions.js")
+  </script>
+{{end}}
+
+{{/* . is internal/frontend.VersionsDetails */}}
+
+{{define "versions"}}
+  <div class="Versions" data-test-id="UnitVersions">
+    <div class="Versions-title">
+      <h2 class="go-textTitle">Versions in this module</h2>
+      <div class="Versions-titleButtonGroup js-buttonGroup">
+        <button class="go-Button go-Button--inline js-versionsExpand" data-gtmc="versions button"
+            aria-label="Expand All Versions">
+          Expand all
+        </button>
+        <button class="go-Button go-Button--inline js-versionsCollapse" data-gtmc="versions button"
+            aria-label="Collapse All Versions">
+          Collapse all
+        </button>
+      </div>
+    </div>
+    {{template "version-list" .ThisModule}}
+    {{if .IncompatibleModules}}
+      <h2>Incompatible versions in this module</h2>
+      {{template "version-list" .IncompatibleModules}}
+    {{end}}
+    {{if .OtherModules}}
+      <h2>Other modules containing this package</h2>
+      {{range .OtherModules}}
+        <div><a href="/{{.}}">{{.}}</a></div>
+      {{end}}
+    {{end}}
+  </div>
+{{end}}
+
+{{/* . is []*internal/frontend.VersionList */}}
+
+{{define "version-list"}}
+  <div class="Versions-list">
+    {{range $major := .}}
+      {{range $i, $v := $major.Versions}}
+        <div class="Version-major">
+          {{if and (eq $i 0) (not $major.Incompatible)}}
+            <strong>{{$major.Major}}</strong>
+            {{if $major.Deprecated}}<span class="go-Chip go-Chip--inverted">deprecated</span>{{end}}
+          {{end}}
+        </div>
+        <div class="Version-tag">
+          <a class="js-versionLink" href="{{$v.Link}}">{{$v.Version}}</a>
+        </div>
+        <div class="Version-dot{{if and $v.IsMinor (not $major.Incompatible)}} Version-dot--minor{{end}}"></div>
+        {{if and $v.Symbols (not $major.Incompatible)}}
+          {{template "symbol-history" $v}}
+        {{else}}
+          <div class="Version-commitTime">
+            {{$v.CommitTime}}{{if $v.Retracted}}<span class="go-Chip go-Chip--inverted">retracted</span>{{end}}
+          </div>
+        {{end}}
+      {{end}}
+    {{end}}
+  </div>
+{{end}}
+
+{{define "symbol-history"}}
+  <details class="Version-details js-versionDetails">
+    <summary class="Version-summary">
+      {{.CommitTime}}{{if .Retracted}}<span class="go-Chip go-Chip--inverted">retracted</span>{{end}}
+    </summary>
+    <div class="Versions-symbols">
+      <div class="Versions-symbolsHeader">Changes in this version</div>
+      {{range .Symbols}}
+        <div class="Versions-symbolSection">
+          {{range .}}
+            {{if eq .Kind "Type"}}
+              <div class="Versions-symbolType">
+                {{template "symbol" .}}
+                {{range .Children}}
+                  <div class="Versions-symbolChild">{{template "symbol" .}}</div>
+                {{end}}
+              </div>
+            {{else}}
+              <div>{{template "symbol" .}}</div>
+            {{end}}
+          {{end}}
+        </div>
+      {{end}}
+    </div>
+  </details>
+{{end}}
+
+{{define "symbol"}}
+  <div>
+    {{if .New}}
+      <span class="Versions-symbolBulletNew">+</span>
+      <a class="Versions-symbolSynopsis" href="{{.Link}}">{{.Synopsis}}</a>
+    {{else}}
+      <span class="Versions-symbolOld Versions-symbolSynopsis">{{.Synopsis}}</span>
+    {{end}}
+    {{if .Builds}}
+      <span class="Versions-symbolBuildsDash">—</span>
+      <span class="Versions-symbolBuilds">
+        {{range $i, $b := .Builds}}{{if $i}}, {{end}}{{$b}}{{end}}
+      </span>
+    {{end}}
+  </div>
+{{end}}
--- a/static/frontend/unit/versions/versions.ts
+++ b/static/frontend/unit/versions/versions.ts
@ -0,0 +1,76 @@
+/*!
+ * @license
+ * Copyright 2021 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.
+ */
+
+/**
+ * VersionsController encapsulates event listeners and UI updates
+ * for the versions page. As the the expandable sections containing
+ * the symbol history for a package are opened and closed it toggles
+ * visiblity of the buttons to expand or collapse them. On page load
+ * it adds an indicator to the version that matches the version request
+ * by the user for the page or the canonical url path.
+ */
+class VersionsController {
+  private expand = document.querySelector<HTMLButtonElement>('.js-versionsExpand');
+  private collapse = document.querySelector<HTMLButtonElement>('.js-versionsCollapse');
+  private details = [...document.querySelectorAll<HTMLDetailsElement>('.js-versionDetails')];
+
+  constructor() {
+    if (!this.expand?.parentElement) return;
+    if (this.details.some(d => d.tagName === 'DETAILS')) {
+      this.expand.parentElement.style.display = 'block';
+    }
+
+    for (const d of this.details) {
+      d.addEventListener('click', () => {
+        this.updateButtons();
+      });
+    }
+
+    this.expand?.addEventListener('click', () => {
+      this.details.map(d => (d.open = true));
+      this.updateButtons();
+    });
+
+    this.collapse?.addEventListener('click', () => {
+      this.details.map(d => (d.open = false));
+      this.updateButtons();
+    });
+
+    this.updateButtons();
+    this.setCurrent();
+  }
+
+  /**
+   * setCurrent applies the active style to the version dot
+   * for the version that matches the canonical URL path.
+   */
+  private setCurrent() {
+    const canonicalPath = document.querySelector<HTMLElement>('.js-canonicalURLPath')?.dataset
+      ?.canonicalUrlPath;
+    const versionLink = document.querySelector<HTMLElement>(
+      `.js-versionLink[href="${canonicalPath}"]`
+    );
+    if (versionLink) {
+      versionLink.style.fontWeight = 'bold';
+    }
+  }
+
+  private updateButtons() {
+    setTimeout(() => {
+      if (!this.expand || !this.collapse) return;
+      let someOpen, someClosed;
+      for (const d of this.details) {
+        someOpen = someOpen || d.open;
+        someClosed = someClosed || !d.open;
+      }
+      this.expand.style.display = someClosed ? 'inline-block' : 'none';
+      this.collapse.style.display = someClosed ? 'none' : 'inline-block';
+    });
+  }
+}
+
+new VersionsController();
--- a/static/markdown.ts
+++ b/static/markdown.ts
@ -0,0 +1,23 @@
+import marked from 'marked';
+import fs from 'fs';
+
+/**
+ * parse extracts code snippets from markdown files in component
+ * directories for use as html in unit tests.
+ * @param file path to a markdown file.
+ * @returns code snippet from markdown file suitable to use
+ * in static unit tests.
+ */
+export async function parse(file: string): Promise<string> {
+  marked.use({ renderer: { code: code => code } });
+  const f = await new Promise<string>((resolve, reject) =>
+    fs.readFile(file, { encoding: 'utf-8' }, (err, data) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve(data);
+    })
+  );
+  return marked(f);
+}
--- a/static/shared/breadcrumb/breadcrumb.css
+++ b/static/shared/breadcrumb/breadcrumb.css
@ -0,0 +1,26 @@
+/*!
+ * Copyright 2021 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.
+ */
+
+.go-Breadcrumb ol {
+  line-height: 1.5rem;
+  white-space: initial;
+}
+.go-Breadcrumb li {
+  align-items: center;
+  color: var(--color-text-subtle);
+  display: inline-flex;
+  font-size: 0.875rem;
+}
+.go-Breadcrumb li:not(:last-child)::after {
+  content: '>';
+  padding: 0 0.5rem;
+}
+.go-Breadcrumb li:last-child > a {
+  color: var(--color-text-subtle);
+}
+.go-Breadcrumb li > .go-Clipboard {
+  margin: 0 0.5rem;
+}
--- a/static/shared/breadcrumb/breadcrumb.md
+++ b/static/shared/breadcrumb/breadcrumb.md
@ -0,0 +1,30 @@
+## Breadcrumbs
+
+---
+
+```html
+<nav class="go-Breadcrumb" aria-label="Breadcrumb">
+  <ol>
+    <li><a href="#" data-gtmc="breadcrumb link">Discover Packages</a></li>
+    <li><a href="#" data-gtmc="breadcrumb link">Standard Library</a></li>
+    <li><a href="#" data-gtmc="breadcrumb link">net</a></li>
+    <li>
+      <a href="#" data-gtmc="breadcrumb link" aria-current="location">http</a>
+      <button
+        class="go-Button go-Button--inline go-Clipboard js-clipboard"
+        aria-label="Copy Path to Clipboard"
+        data-to-copy="hello"
+        data-gtmc="clipboard button"
+      >
+        <img
+          class="go-Icon go-Icon--accented"
+          height="24"
+          width="24"
+          src="/static/_icon/content_copy_gm_grey_24dp.svg"
+          alt=""
+        />
+      </button>
+    </li>
+  </ol>
+</nav>
+```
--- a/static/shared/button/button.css
+++ b/static/shared/button/button.css
@ -0,0 +1,86 @@
+/*!
+ * Copyright 2021 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.
+ */
+
+button:focus:not([disabled]) {
+  border-color: var(--color-brand-primary);
+  -webkit-box-shadow: var(--focus-box-shadow);
+  box-shadow: var(--focus-box-shadow);
+  outline: transparent;
+}
+
+.go-Button {
+  align-items: center;
+  background-color: var(--color-button);
+  border: 0.0625rem solid transparent;
+  border-radius: var(--border-radius);
+  color: var(--color-button-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-weight: 500;
+  gap: 0.25rem;
+}
+.go-Button:not(.go-Button--inline) {
+  padding: 0.5rem;
+}
+
+.go-Button--accented {
+  background-color: var(--color-button-accented);
+  color: var(--color-button-accented-text);
+}
+.go-Button--inverted,
+.go-Button--text,
+.go-Button--inline {
+  background-color: var(--color-button-inverted);
+  color: var(--color-button-inverted-text);
+}
+.go-Button--inline {
+  background-color: transparent;
+}
+
+.go-Button--inverted {
+  border: var(--border);
+}
+
+.go-Button:hover {
+  box-shadow: var(--focus-box-shadow);
+  filter: contrast(0.95);
+}
+.go-Button--inline:hover {
+  box-shadow: none;
+  text-decoration: underline var(--color-button-inverted-text);
+}
+.go-Button:focus {
+  filter: contrast(0.95);
+}
+.go-Button--inverted:focus {
+  border-color: var(--color-button-inverted-text);
+}
+.go-Button:active {
+  box-shadow: none;
+  filter: contrast(0.85);
+}
+
+.go-Button:disabled {
+  background-color: var(--color-button-disabled);
+  box-shadow: none;
+  color: var(--color-button-text-disabled);
+  cursor: initial;
+  filter: none;
+  text-decoration: none;
+}
+.go-Button--accented:disabled {
+  background-color: var(--color-button-accented-disabled);
+  color: var(--color-button-accented-text-disabled);
+}
+.go-Button--inverted:disabled,
+.go-Button--text:disabled,
+.go-Button--inline:disabled {
+  background-color: var(--color-button-inverted-disabled);
+  color: var(--color-button-inverted-text-disabled);
+}
+.go-Button--inline:disabled {
+  background-color: transparent;
+}
--- a/static/shared/button/button.md
+++ b/static/shared/button/button.md
@ -0,0 +1,53 @@
+## Buttons
+
+---
+
+### Primary {#button-primary}
+
+```html
+<button class="go-Button">Primary</button>
+```
+
+```html
+<button class="go-Button" disabled>Primary</button>
+```
+
+### Inverted {#button-inverted}
+
+```html
+<button class="go-Button go-Button--inverted">Inverted</button>
+```
+
+```html
+<button class="go-Button go-Button--inverted" disabled>Inverted</button>
+```
+
+### Accented {#button-accented}
+
+```html
+<button class="go-Button go-Button--accented">Accented</button>
+```
+
+```html
+<button class="go-Button go-Button--accented" disabled>Accented</button>
+```
+
+### Text {#button-text}
+
+```html
+<button class="go-Button go-Button--text">Text</button>
+```
+
+```html
+<button class="go-Button go-Button--text" disabled>Text</button>
+```
+
+### Inline {#button-inline}
+
+```html
+<button class="go-Button go-Button--inline">Inline</button>
+```
+
+```html
+<button class="go-Button go-Button--inline" disabled>Inline</button>
+```
--- a/static/shared/chip/chip.css
+++ b/static/shared/chip/chip.css
@ -0,0 +1,34 @@
+/*!
+ * Copyright 2021 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.
+ */
+
+.go-Chip {
+  background: var(--color-button);
+  border: 0.0625rem solid var(--color-button);
+  border-radius: 1.25rem;
+  color: var(--color-button-text);
+  font-size: 0.75rem;
+  padding: 0.125rem 0.625rem;
+}
+.go-Chip--accented {
+  background: var(--color-button-accented);
+  border: 0.0625rem solid var(--color-button-accented);
+  color: var(--color-button-accented-text);
+}
+.go-Chip--inverted {
+  background: var(--color-button-inverted);
+  border: var(--border);
+  color: var(--color-text);
+}
+.go-Chip--highlighted {
+  background: var(--blue);
+  border-color: var(--blue);
+  color: var(--turq-dark);
+}
+.go-Chip--alert {
+  background: var(--pink);
+  border: 0.0625rem solid var(--pink);
+  color: var(--color-text-inverted);
+}
--- a/static/shared/chip/chip.md
+++ b/static/shared/chip/chip.md
@ -0,0 +1,23 @@
+## Chips
+
+---
+
+```html #chip-primary
+<span class="go-Chip">Primary</span>
+```
+
+```html #chip-inverted
+<span class="go-Chip go-Chip--inverted">Inverted</span>
+```
+
+```html #chip-highlighted
+<span class="go-Chip go-Chip--highlighted">Highlighed</span>
+```
+
+```html #chip-warning
+<span class="go-Chip go-Chip--accented">Warning</span>
+```
+
+```html #chip-alert
+<span class="go-Chip go-Chip--alert">Alert</span>
+```
--- a/static/shared/clipboard/clipboard.css
+++ b/static/shared/clipboard/clipboard.css
@ -0,0 +1,42 @@
+/*!
+ * Copyright 2021 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.
+ */
+
+.go-Clipboard {
+  position: relative;
+}
+.go-Clipboard::before {
+  background-color: var(--color-background-inverted);
+  border-radius: var(--border-radius);
+  color: var(--color-text-inverted);
+  content: attr(data-tooltip);
+  display: block;
+  font-size: 0.9em;
+  left: calc(100% + 0.125rem);
+  padding: 0.25rem 0.3rem;
+  position: absolute;
+  text-transform: uppercase;
+  top: 0.125rem;
+  white-space: nowrap;
+  z-index: 1000;
+}
+.go-Clipboard::after {
+  border-bottom: 0.25rem solid transparent;
+  border-left: 0;
+  border-right: 0.25rem solid var(--color-background-inverted);
+  border-top: 0.25rem solid transparent;
+  content: '';
+  display: block;
+  position: absolute;
+  right: -0.125rem;
+  top: 0.5625rem;
+  z-index: 1000;
+}
+.go-Clipboard:not([data-tooltip])::before,
+.go-Clipboard:not([data-tooltip])::after,
+.go-Clipboard[data-tooltip='']::before,
+.go-Clipboard[data-tooltip='']::after {
+  display: none;
+}
--- a/static/shared/clipboard/clipboard.js
+++ b/static/shared/clipboard/clipboard.js
@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2021 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.
+ */
+export class ClipboardController {
+  constructor(el) {
+    this.el = el;
+    this._data = el.dataset["toCopy"] ?? el.parentElement?.querySelector("input")?.value ?? el.innerText;
+    el.addEventListener("click", (e) => this.handleCopyClick(e));
+  }
+  handleCopyClick(e) {
+    e.preventDefault();
+    const TOOLTIP_SHOW_DURATION_MS = 1e3;
+    if (!navigator.clipboard) {
+      this.showTooltipText("Unable to copy", TOOLTIP_SHOW_DURATION_MS);
+      return;
+    }
+    navigator.clipboard.writeText(this._data).then(() => {
+      this.showTooltipText("Copied!", TOOLTIP_SHOW_DURATION_MS);
+    }).catch(() => {
+      this.showTooltipText("Unable to copy", TOOLTIP_SHOW_DURATION_MS);
+    });
+  }
+  showTooltipText(text, durationMs) {
+    this.el.setAttribute("data-tooltip", text);
+    setTimeout(() => this.el.setAttribute("data-tooltip", ""), durationMs);
+  }
+}
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiY2xpcGJvYXJkLnRzIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgMjAyMSBUaGUgR28gQXV0aG9ycy4gQWxsIHJpZ2h0cyByZXNlcnZlZC5cbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGEgQlNELXN0eWxlXG4gKiBsaWNlbnNlIHRoYXQgY2FuIGJlIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUuXG4gKi9cblxuLyoqXG4gKiBUaGlzIGNsYXNzIGRlY29yYXRlcyBhbiBlbGVtZW50IHRvIGNvcHkgYXJiaXRyYXJ5IGRhdGEgYXR0YWNoZWQgdmlhIGEgZGF0YS1cbiAqIGF0dHJpYnV0ZSB0byB0aGUgY2xpcGJvYXJkLlxuICovXG5leHBvcnQgY2xhc3MgQ2xpcGJvYXJkQ29udHJvbGxlciB7XG4gIC8qKlxuICAgKiBUaGUgZGF0YSB0byBiZSBjb3BpZWQgdG8gdGhlIGNsaXBib2FyZC5cbiAgICovXG4gIHByaXZhdGUgX2RhdGE6IHN0cmluZztcblxuICAvKipcbiAgICogQHBhcmFtIGVsIFRoZSBlbGVtZW50IHRoYXQgd2lsbCB0cmlnZ2VyIGNvcHlpbmcgdGV4dCB0byB0aGUgY2xpcGJvYXJkLiBUaGUgdGV4dCBpc1xuICAgKiBleHBlY3RlZCB0byBiZSB3aXRoaW4gaXRzIGRhdGEtdG8tY29weSBhdHRyaWJ1dGUuXG4gICAqL1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBIVE1MQnV0dG9uRWxlbWVudCkge1xuICAgIHRoaXMuX2RhdGEgPVxuICAgICAgZWwuZGF0YXNldFsndG9Db3B5J10gPz8gZWwucGFyZW50RWxlbWVudD8ucXVlcnlTZWxlY3RvcignaW5wdXQnKT8udmFsdWUgPz8gZWwuaW5uZXJUZXh0O1xuICAgIGVsLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZSA9PiB0aGlzLmhhbmRsZUNvcHlDbGljayhlKSk7XG4gIH1cblxuICAvKipcbiAgICogSGFuZGxlcyB3aGVuIHRoZSBwcmltYXJ5IGVsZW1lbnQgaXMgY2xpY2tlZC5cbiAgICovXG4gIGhhbmRsZUNvcHlDbGljayhlOiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIGNvbnN0IFRPT0xUSVBfU0hPV19EVVJBVElPTl9NUyA9IDEwMDA7XG5cbiAgICAvLyBUaGlzIEFQSSBpcyBub3QgYXZhaWxhYmxlIG9uIGlPUy5cbiAgICBpZiAoIW5hdmlnYXRvci5jbGlwYm9hcmQpIHtcbiAgICAgIHRoaXMuc2hvd1Rvb2x0aXBUZXh0KCdVbmFibGUgdG8gY29weScsIFRPT0xUSVBfU0hPV19EVVJBVElPTl9NUyk7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIG5hdmlnYXRvci5jbGlwYm9hcmRcbiAgICAgIC53cml0ZVRleHQodGhpcy5fZGF0YSlcbiAgICAgIC50aGVuKCgpID0+IHtcbiAgICAgICAgdGhpcy5zaG93VG9vbHRpcFRleHQoJ0NvcGllZCEnLCBUT09MVElQX1NIT1dfRFVSQVRJT05fTVMpO1xuICAgICAgfSlcbiAgICAgIC5jYXRjaCgoKSA9PiB7XG4gICAgICAgIHRoaXMuc2hvd1Rvb2x0aXBUZXh0KCdVbmFibGUgdG8gY29weScsIFRPT0xUSVBfU0hPV19EVVJBVElPTl9NUyk7XG4gICAgICB9KTtcbiAgfVxuXG4gIC8qKlxuICAgKiBTaG93cyB0aGUgZ2l2ZW4gdGV4dCBpbiBhIHRvb2x0aXAgZm9yIGEgc3BlY2lmaWVkIGFtb3VudCBvZiB0aW1lLCBpbiBtaWxsaXNlY29uZHMuXG4gICAqL1xuICBzaG93VG9vbHRpcFRleHQodGV4dDogc3RyaW5nLCBkdXJhdGlvbk1zOiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLmVsLnNldEF0dHJpYnV0ZSgnZGF0YS10b29sdGlwJywgdGV4dCk7XG4gICAgc2V0VGltZW91dCgoKSA9PiB0aGlzLmVsLnNldEF0dHJpYnV0ZSgnZGF0YS10b29sdGlwJywgJycpLCBkdXJhdGlvbk1zKTtcbiAgfVxufVxuIl0sCiAgIm1hcHBpbmdzIjogIkFBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBV08saUNBQTBCO0FBQUEsRUFVL0IsWUFBb0IsSUFBdUI7QUFBdkI7QUFDbEIsU0FBSyxRQUNILEdBQUcsUUFBUSxhQUFhLEdBQUcsZUFBZSxjQUFjLFVBQVUsU0FBUyxHQUFHO0FBQ2hGLE9BQUcsaUJBQWlCLFNBQVMsT0FBSyxLQUFLLGdCQUFnQjtBQUFBO0FBQUEsRUFNekQsZ0JBQWdCLEdBQXFCO0FBQ25DLE1BQUU7QUFDRixVQUFNLDJCQUEyQjtBQUdqQyxRQUFJLENBQUMsVUFBVSxXQUFXO0FBQ3hCLFdBQUssZ0JBQWdCLGtCQUFrQjtBQUN2QztBQUFBO0FBRUYsY0FBVSxVQUNQLFVBQVUsS0FBSyxPQUNmLEtBQUssTUFBTTtBQUNWLFdBQUssZ0JBQWdCLFdBQVc7QUFBQSxPQUVqQyxNQUFNLE1BQU07QUFDWCxXQUFLLGdCQUFnQixrQkFBa0I7QUFBQTtBQUFBO0FBQUEsRUFPN0MsZ0JBQWdCLE1BQWMsWUFBMEI7QUFDdEQsU0FBSyxHQUFHLGFBQWEsZ0JBQWdCO0FBQ3JDLGVBQVcsTUFBTSxLQUFLLEdBQUcsYUFBYSxnQkFBZ0IsS0FBSztBQUFBO0FBQUE7IiwKICAibmFtZXMiOiBbXQp9Cg==
--- a/static/shared/clipboard/clipboard.js.map
+++ b/static/shared/clipboard/clipboard.js.map
@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["clipboard.ts"],
+  "sourcesContent": ["/**\n * @license\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\n/**\n * This class decorates an element to copy arbitrary data attached via a data-\n * attribute to the clipboard.\n */\nexport class ClipboardController {\n  /**\n   * The data to be copied to the clipboard.\n   */\n  private _data: string;\n\n  /**\n   * @param el The element that will trigger copying text to the clipboard. The text is\n   * expected to be within its data-to-copy attribute.\n   */\n  constructor(private el: HTMLButtonElement) {\n    this._data =\n      el.dataset['toCopy'] ?? el.parentElement?.querySelector('input')?.value ?? el.innerText;\n    el.addEventListener('click', e => this.handleCopyClick(e));\n  }\n\n  /**\n   * Handles when the primary element is clicked.\n   */\n  handleCopyClick(e: MouseEvent): void {\n    e.preventDefault();\n    const TOOLTIP_SHOW_DURATION_MS = 1000;\n\n    // This API is not available on iOS.\n    if (!navigator.clipboard) {\n      this.showTooltipText('Unable to copy', TOOLTIP_SHOW_DURATION_MS);\n      return;\n    }\n    navigator.clipboard\n      .writeText(this._data)\n      .then(() => {\n        this.showTooltipText('Copied!', TOOLTIP_SHOW_DURATION_MS);\n      })\n      .catch(() => {\n        this.showTooltipText('Unable to copy', TOOLTIP_SHOW_DURATION_MS);\n      });\n  }\n\n  /**\n   * Shows the given text in a tooltip for a specified amount of time, in milliseconds.\n   */\n  showTooltipText(text: string, durationMs: number): void {\n    this.el.setAttribute('data-tooltip', text);\n    setTimeout(() => this.el.setAttribute('data-tooltip', ''), durationMs);\n  }\n}\n"],
+  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWO,gCAA0B,CAU/B,YAAoB,EAAuB,CAAvB,UAClB,KAAK,MACH,EAAG,QAAQ,QAAa,EAAG,eAAe,cAAc,UAAU,OAAS,EAAG,UAChF,EAAG,iBAAiB,QAAS,GAAK,KAAK,gBAAgB,IAMzD,gBAAgB,EAAqB,CACnC,EAAE,iBACF,KAAM,GAA2B,IAGjC,GAAI,CAAC,UAAU,UAAW,CACxB,KAAK,gBAAgB,iBAAkB,GACvC,OAEF,UAAU,UACP,UAAU,KAAK,OACf,KAAK,IAAM,CACV,KAAK,gBAAgB,UAAW,KAEjC,MAAM,IAAM,CACX,KAAK,gBAAgB,iBAAkB,KAO7C,gBAAgB,EAAc,EAA0B,CACtD,KAAK,GAAG,aAAa,eAAgB,GACrC,WAAW,IAAM,KAAK,GAAG,aAAa,eAAgB,IAAK",
+  "names": []
+}
--- a/static/shared/clipboard/clipboard.md
+++ b/static/shared/clipboard/clipboard.md
@ -0,0 +1,62 @@
+## Clipboard
+
+---
+
+Use an aria-label on buttons to provide context about the data being copied.
+
+### Button {#clipboard-button}
+
+```html
+<button
+  class="go-Button go-Button--inline go-Clipboard js-clipboard"
+  data-to-copy="hello, world!"
+  aria-label="Copy _DATA_ to Clipboard"
+  data-gtmc="clipboard button"
+>
+  <img
+    class="go-Icon"
+    height="24"
+    width="24"
+    src="/static/_icon/content_copy_gm_grey_24dp.svg"
+    alt=""
+  />
+</button>
+```
+
+```html
+<button
+  class="go-Button go-Button--inverted go-Clipboard js-clipboard"
+  data-to-copy="hello, world!"
+  aria-label="Copy _DATA_ to Clipboard"
+  data-gtmc="clipboard button"
+>
+  <img
+    class="go-Icon"
+    height="24"
+    width="24"
+    src="/static/_icon/content_copy_gm_grey_24dp.svg"
+    alt=""
+  />
+</button>
+```
+
+### Input {#clipboard-input}
+
+```html
+<div class="go-InputGroup">
+  <input class="go-Input" value="hello, world!" readonly />
+  <button
+    class="go-Button go-Button--inverted go-Clipboard js-clipboard"
+    aria-label="Copy to Clipboard"
+    data-gtmc="clipboard button"
+  >
+    <img
+      class="go-Icon"
+      height="24"
+      width="24"
+      src="/static/_icon/content_copy_gm_grey_24dp.svg"
+      alt=""
+    />
+  </button>
+</div>
+```
--- a/static/shared/clipboard/clipboard.test.ts
+++ b/static/shared/clipboard/clipboard.test.ts
@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2021 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.
+ */
+
+import { parse } from '../../markdown';
+import { ClipboardController } from './clipboard';
+
+describe('ClipboardController', () => {
+  const buttons: HTMLButtonElement[] = [];
+  const controllers: ClipboardController[] = [];
+  const dataToCopy = 'hello, world!';
+
+  beforeAll(async () => {
+    document.body.innerHTML = await parse(__dirname + '/clipboard.md');
+    for (const button of document.querySelectorAll<HTMLButtonElement>('.js-clipboard')) {
+      buttons.push(button);
+      controllers.push(new ClipboardController(button));
+    }
+  });
+
+  afterAll(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('copys data-to-copy when clicked', () => {
+    Object.assign(navigator, { clipboard: { writeText: () => Promise.resolve() } });
+    jest.spyOn(navigator.clipboard, 'writeText');
+    buttons[0].click();
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(dataToCopy);
+  });
+
+  it('copys input value when clicked', () => {
+    Object.assign(navigator, { clipboard: { writeText: () => Promise.resolve() } });
+    jest.spyOn(navigator.clipboard, 'writeText');
+    buttons[2].click();
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(dataToCopy);
+  });
+
+  it('shows error when clicked if clipboard is undefined', () => {
+    Object.assign(navigator, { clipboard: undefined });
+    jest.spyOn(controllers[1], 'showTooltipText');
+    buttons[1].click();
+    expect(controllers[1].showTooltipText).toHaveBeenCalledWith('Unable to copy', 1000);
+  });
+});
--- a/static/shared/clipboard/clipboard.ts
+++ b/static/shared/clipboard/clipboard.ts
@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2021 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.
+ */
+
+/**
+ * This class decorates an element to copy arbitrary data attached via a data-
+ * attribute to the clipboard.
+ */
+export class ClipboardController {
+  /**
+   * The data to be copied to the clipboard.
+   */
+  private _data: string;
+
+  /**
+   * @param el The element that will trigger copying text to the clipboard. The text is
+   * expected to be within its data-to-copy attribute.
+   */
+  constructor(private el: HTMLButtonElement) {
+    this._data =
+      el.dataset['toCopy'] ?? el.parentElement?.querySelector('input')?.value ?? el.innerText;
+    el.addEventListener('click', e => this.handleCopyClick(e));
+  }
+
+  /**
+   * Handles when the primary element is clicked.
+   */
+  handleCopyClick(e: MouseEvent): void {
+    e.preventDefault();
+    const TOOLTIP_SHOW_DURATION_MS = 1000;
+
+    // This API is not available on iOS.
+    if (!navigator.clipboard) {
+      this.showTooltipText('Unable to copy', TOOLTIP_SHOW_DURATION_MS);
+      return;
+    }
+    navigator.clipboard
+      .writeText(this._data)
+      .then(() => {
+        this.showTooltipText('Copied!', TOOLTIP_SHOW_DURATION_MS);
+      })
+      .catch(() => {
+        this.showTooltipText('Unable to copy', TOOLTIP_SHOW_DURATION_MS);
+      });
+  }
+
+  /**
+   * Shows the given text in a tooltip for a specified amount of time, in milliseconds.
+   */
+  showTooltipText(text: string, durationMs: number): void {
+    this.el.setAttribute('data-tooltip', text);
+    setTimeout(() => this.el.setAttribute('data-tooltip', ''), durationMs);
+  }
+}
--- a/static/shared/color/color-intent.md
+++ b/static/shared/color/color-intent.md
@ -0,0 +1,115 @@
+## Color Intents
+
+---
+
+### Brand {#color-intent-brand}
+
+<span style="display:contents;">
+  <go-color id="--color-brand-primary"></go-color>
+</span>
+
+### Background {#color-intent-background}
+
+<span style="display:contents;">
+  <go-color id="--color-background"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-background-inverted"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-background-accented"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-background-highlighted"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-background-warning"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-background-alert"></go-color>
+</span>
+
+### Border {#color-intent-border}
+
+<span style="display:contents;">
+  <go-color id="--color-border"></go-color>
+</span>
+
+### Text {#color-intent-text}
+
+<span style="display:contents;">
+  <go-color id="--color-text"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-text-subtle"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-text-inverted"></go-color>
+</span>
+
+### Input {#color-intent-input}
+
+<span style="display:contents;">
+  <go-color id="--color-input"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-input-text"></go-color>
+</span>
+
+### Button {#color-intent-button}
+
+<span style="display:contents;">
+  <go-color id="--color-button"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-button-disabled"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-button-text"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-button-text-disabled"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-button-inverted"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-button-inverted-disabled"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-button-inverted-text"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-button-inverted-text-disabled"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-button-accented"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-button-accented-disabled"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-button-accented-text"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--color-button-accented-text-disabled"></go-color>
+</span>
--- a/static/shared/color/color.css
+++ b/static/shared/color/color.css
@ -0,0 +1,76 @@
+/*!
+ * Copyright 2021 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 {
+  /* Colors */
+  --gray-1: #202224;
+  --gray-2: #3e4042;
+  --gray-3: #555759;
+  --gray-4: #6e7072;
+  --gray-5: #848688;
+  --gray-6: #aaacae;
+  --gray-7: #c6c8ca;
+  --gray-8: #dcdee0;
+  --gray-9: #f0f1f2;
+  --gray-10: #fafafa;
+  --turq-light: #5dc9e2;
+  --turq-med: #00add8;
+  --turq-dark: #007d9c;
+  --blue: #bfeaf4;
+  --black: #000;
+  --green: #3a6e11;
+  --green-light: #5fda64;
+  --pink: #ce3262;
+  --pink-light: #fdecf1;
+  --purple: #542c7d;
+  --slate: #253443; /* Footer background. */
+  --white: #fff;
+  --yellow: #fddd00;
+  --yellow-light: #fff8cc;
+
+  /* Color Intents */
+  --color-brand-primary: var(--turq-dark);
+  --color-background: var(--white);
+  --color-background-inverted: var(--slate);
+  --color-background-accented: var(--gray-10);
+  --color-background-highlighted: var(--blue);
+  --color-background-warning: var(--yellow-light);
+  --color-background-alert: var(--pink-light);
+  --color-border: var(--gray-7);
+  --color-text: var(--gray-1);
+  --color-text-subtle: var(--gray-4);
+  --color-text-inverted: var(--white);
+  --color-code-comment: var(--green);
+
+  /* Interactive Colors */
+  --color-input: var(--color-background);
+  --color-input-text: var(--color-text);
+  --color-button: var(--turq-dark);
+  --color-button-disabled: var(--gray-9);
+  --color-button-text: var(--white);
+  --color-button-text-disabled: var(--gray-3);
+  --color-button-inverted: var(--color-background);
+  --color-button-inverted-disabled: var(--color-background);
+  --color-button-inverted-text: var(--color-brand-primary);
+  --color-button-inverted-text-disabled: var(--color-text-subtle);
+  --color-button-accented: var(--yellow);
+  --color-button-accented-disabled: var(--gray-9);
+  --color-button-accented-text: var(--gray-1);
+  --color-button-accented-text-disabled: var(--gray-3);
+}
+
+[data-theme='dark'] {
+  --color-brand-primary: var(--turq-med);
+  --color-background: var(--gray-1);
+  --color-background-accented: var(--slate);
+  --color-background-highlighted: var(--gray-2);
+  --color-background-warning: var(--yellow);
+  --color-background-alert: var(--pink);
+  --color-border: var(--gray-4);
+  --color-text: var(--white);
+  --color-text-subtle: var(--gray-7);
+  --color-code-comment: var(--green-light);
+}
--- a/static/shared/color/color.md
+++ b/static/shared/color/color.md
@ -0,0 +1,104 @@
+## Colors
+
+---
+
+Prefer the use of Color Intent over Color variables where possible. Color Intents are themed and
+adjust for dark mode.
+
+### Gray {#colors-gray}
+
+<span style="display:contents;">
+  <go-color id="--gray-1"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--gray-2"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--gray-3"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--gray-4"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--gray-5"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--gray-6"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--gray-7"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--gray-8"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--gray-9"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--gray-10"></go-color>
+</span>
+
+### Brand {#colors-brand}
+
+<span style="display:contents;">
+  <go-color id="--turq-light"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--turq-med"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--turq-dark"></go-color>
+</span>
+
+### Other {#colors-other}
+
+<span style="display:contents;">
+  <go-color id="--blue"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--black"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--green"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--pink"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--pink-light"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--purple"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--slate"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--white"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--yellow"></go-color>
+</span>
+
+<span style="display:contents;">
+  <go-color id="--yellow-light"></go-color>
+</span>
--- a/static/shared/footer/footer.css
+++ b/static/shared/footer/footer.css
@ -0,0 +1,89 @@
+/*!
+ * Copyright 2021 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.
+ */
+
+.go-Footer {
+  background-color: var(--color-background-inverted);
+  color: var(--color-text-inverted);
+  font-size: 0.875rem;
+  width: 100%;
+}
+.go-Footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: auto;
+  max-width: 75.75rem;
+  padding: 2rem 1.5rem 2.625rem 1.5rem;
+}
+.go-Footer-linkColumn {
+  flex: 0 0 9.5rem;
+}
+.go-Footer .go-Footer-link {
+  color: var(--color-text-inverted);
+  display: flex;
+  flex: 1;
+  font-size: 0.875rem;
+  line-height: 2rem;
+}
+.go-Footer .go-Footer-link--primary {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.75rem;
+}
+.go-Footer-bottom {
+  align-items: center;
+  border-top: var(--border);
+  display: flex;
+  margin: 0 1.5rem;
+  min-height: 4.125rem;
+}
+.go-Footer-gopher {
+  align-self: flex-end;
+  height: 3.147rem;
+  width: 5rem;
+}
+.go-Footer-listRow {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+.go-Footer-listItem {
+  align-items: center;
+  display: flex;
+  flex: 1 100%;
+  justify-content: center;
+  margin: 0.4rem 0;
+  padding: 0 1rem;
+}
+.go-Footer-listItem a:link,
+.go-Footer-listItem a:visited {
+  color: var(--color-text-inverted);
+}
+
+.go-Footer-googleLogo {
+  align-self: flex-end;
+  height: 1.5rem;
+  margin-bottom: 1.3rem;
+  text-align: right;
+}
+.go-Footer-googleLogoImg {
+  height: 1.5rem;
+  width: 4.529rem;
+}
+
+@media only screen and (min-width: 52rem) {
+  .go-Footer-listItem {
+    flex: initial;
+  }
+  .go-Footer-listItem + .go-Footer-listItem {
+    border-left: var(--border);
+  }
+}
--- a/static/shared/footer/footer.tmpl
+++ b/static/shared/footer/footer.tmpl
@ -0,0 +1,127 @@
+<!--
+  Copyright 2021 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.
+-->
+
+{{define "footer"}}
+  <footer class="go-Footer">
+    {{block "pre-footer" .}}{{end}}
+    <div class="go-Footer-links">
+      <div class="go-Footer-linkColumn">
+        <a href="https://go.dev/solutions" class="go-Footer-link go-Footer-link--primary"
+            data-gtmc="footer link">
+          Why Go
+        </a>
+        <a href="https://go.dev/solutions#use-cases" class="go-Footer-link"
+            data-gtmc="footer link">
+          Use Cases
+        </a>
+        <a href="https://go.dev/solutions#case-studies" class="go-Footer-link"
+            data-gtmc="footer link">
+          Case Studies
+        </a>
+      </div>
+      <div class="go-Footer-linkColumn">
+        <a href="https://learn.go.dev/" class="go-Footer-link go-Footer-link--primary"
+            data-gtmc="footer link">
+          Getting Started
+        </a>
+        <a href="https://play.golang.org" class="go-Footer-link" data-gtmc="footer link">
+          Playground
+        </a>
+        <a href="https://tour.golang.org" class="go-Footer-link" data-gtmc="footer link">
+          Tour
+        </a>
+        <a href="https://stackoverflow.com/questions/tagged/go?tab=Newest" class="go-Footer-link"
+            data-gtmc="footer link">
+          Stack Overflow
+        </a>
+      </div>
+      <div class="go-Footer-linkColumn">
+        <a href="https://pkg.go.dev" class="go-Footer-link go-Footer-link--primary"
+            data-gtmc="footer link">
+          Discover Packages
+        </a>
+      </div>
+      <div class="go-Footer-linkColumn">
+        <a href="https://go.dev/about" class="go-Footer-link go-Footer-link--primary"
+            data-gtmc="footer link">
+          About
+        </a>
+        <a href="https://golang.org/dl/" class="go-Footer-link" data-gtmc="footer link">Download</a>
+        <a href="https://blog.golang.org" class="go-Footer-link" data-gtmc="footer link">Blog</a>
+        <a href="https://github.com/golang/go/issues" class="go-Footer-link" data-gtmc="footer link">
+          Issue Tracker
+        </a>
+        <a href="https://golang.org/doc/devel/release.html" class="go-Footer-link"
+            data-gtmc="footer link">
+          Release Notes
+        </a>
+        <a href="https://blog.golang.org/go-brand" class="go-Footer-link" data-gtmc="footer link">
+          Brand Guidelines
+        </a>
+        <a href="https://golang.org/conduct" class="go-Footer-link" data-gtmc="footer link">
+          Code of Conduct
+        </a>
+      </div>
+      <div class="go-Footer-linkColumn">
+        <a href="https://www.twitter.com/golang" class="go-Footer-link go-Footer-link--primary"
+            data-gtmc="footer link">
+          Connect
+        </a>
+        <a href="https://www.twitter.com/golang" class="go-Footer-link" data-gtmc="footer link">
+          Twitter
+        </a>
+        <a href="https://github.com/golang" class="go-Footer-link" data-gtmc="footer link">GitHub</a>
+        <a href="https://invite.slack.golangbridge.org/" class="go-Footer-link"
+            data-gtmc="footer link">
+          Slack
+        </a>
+        <a href="https://reddit.com/r/golang" class="go-Footer-link" data-gtmc="footer link">
+          Reddit
+        </a>
+        <a href="https://www.meetup.com/pro/go" class="go-Footer-link" data-gtmc="footer link">
+          Meetup
+        </a>
+        <a href="https://golangweekly.com/" class="go-Footer-link" data-gtmc="footer link">
+          Golang Weekly
+        </a>
+      </div>
+    </div>
+    <div class="go-Footer-bottom">
+      <img class="go-Footer-gopher" height="150" width="238" src="/static/_gopher/pilot-bust.svg"
+          alt="Gopher in flight goggles">
+      <ul class="go-Footer-listRow">
+        <li class="go-Footer-listItem">
+          <a href="https://go.dev/copyright" data-gtmc="footer link">Copyright</a>
+        </li>
+        <li class="go-Footer-listItem">
+          <a href="https://go.dev/tos" data-gtmc="footer link">Terms of Service</a>
+        </li>
+        <li class="go-Footer-listItem">
+          <a href="http://www.google.com/intl/en/policies/privacy/" data-gtmc="footer link"
+              target="_blank" rel="noopener">
+            Privacy Policy
+          </a>
+        </li>
+        <li class="go-Footer-listItem">
+          <a href="https://golang.org/s/pkgsite-feedback" target="_blank" rel="noopener"
+              data-gtmc="footer link">
+            Report an Issue
+          </a>
+        </li>
+        <li class="go-Footer-listItem">
+          <a href="https://golang.org" target="_blank" rel="noopener" data-gtmc="footer link">
+            golang.org
+          </a>
+        </li>
+      </ul>
+      <a class="go-Footer-googleLogo" href="https://google.com" target="_blank"rel="noopener"
+          data-gtmc="footer link">
+        <img class="go-Footer-googleLogoImg" height="24" width="72"
+            src="/static/_logo/google-white.svg" alt="Google logo">
+      </a>
+    </div>
+  </footer>
+{{end}}
--- a/static/shared/form/form.css
+++ b/static/shared/form/form.css
@ -0,0 +1,78 @@
+/*!
+ * Copyright 2021 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.
+ */
+
+select:focus:not([disabled]),
+input:focus:not([disabled]) {
+  border-color: var(--color-brand-primary);
+  -webkit-box-shadow: var(--focus-box-shadow);
+  box-shadow: var(--focus-box-shadow);
+  outline: transparent;
+}
+
+input::placeholder {
+  color: var(--color-text-subtle);
+}
+
+.go-Form {
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.go-Label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.go-Label--inline {
+  align-items: center;
+  flex-direction: row;
+}
+.go-Label legend {
+  margin-bottom: 0.5rem;
+}
+.go-Label--inline legend {
+  float: left;
+  margin-bottom: 0;
+}
+.go-Input,
+.go-Select {
+  background: var(--color-input);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  color: var(--color-input-text);
+}
+.go-Input {
+  padding: 0.40625rem 0.5rem;
+}
+.go-Select {
+  padding: 0.34375rem 0.5rem;
+}
+
+.go-InputGroup {
+  display: flex;
+}
+.go-InputGroup .go-Input {
+  flex: 1;
+}
+.go-InputGroup > :not(:first-child, :last-child) {
+  border-radius: 0;
+  margin-left: -0.0625rem;
+}
+.go-InputGroup > :first-child {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.go-InputGroup > :last-child {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  margin-left: -0.0625rem;
+}
+.go-InputGroup > *:hover,
+.go-InputGroup > *:focus {
+  z-index: 1;
+}
--- a/static/shared/form/form.md
+++ b/static/shared/form/form.md
@ -0,0 +1,120 @@
+## Forms
+
+---
+
+### Input {#form-input}
+
+```html
+<input class="go-Input" placeholder="Placeholder text" />
+```
+
+### Input w/ Label {#form-input-label}
+
+```html
+<label class="go-Label"
+  >URL
+  <input class="go-Input" placeholder="e.g., https://pkg.go.dev/net/http" />
+</label>
+```
+
+### Select w/ Inline Label {#form-select}
+
+```html
+<label class="go-Label go-Label--inline">
+  Rendered for
+  <select class="go-Select">
+    <option>linux/amd64</option>
+    <option>windows/amd64</option>
+    <option>darwin/amd64</option>
+    <option>js/wasm</option>
+  </select>
+</label>
+```
+
+### Input Groups {#form-groups}
+
+```html
+<form
+  class="go-InputGroup"
+  action="#forms"
+  data-gtmc="search form"
+  aria-label="Search for a package"
+  role="search"
+>
+  <input name="q" class="go-Input" placeholder="Search for a package" />
+  <button class="go-Button go-Button--inverted" aria-label="Submit search">
+    <img
+      class="go-Icon"
+      height="24"
+      width="24"
+      src="/static/_icon/search_gm_grey_24dp.svg"
+      alt=""
+    />
+  </button>
+</form>
+```
+
+```html
+<form
+  class="go-InputGroup"
+  action="#forms"
+  data-gtmc="search form"
+  aria-label="Search for a package"
+  role="search"
+>
+  <input name="q" class="go-Input" placeholder="Search for a package" />
+  <button class="go-Button">Submit</button>
+</form>
+```
+
+```html
+<div class="go-InputGroup">
+  <button class="go-Button go-Button--inverted" data-gtmc="menu button" aria-label="Open menu">
+    <img
+      class="go-Icon"
+      height="24"
+      width="24"
+      src="/static/_icon/filter_list_gm_grey_24dp.svg"
+      alt=""
+    />
+  </button>
+  <button class="go-Button go-Button--inverted" data-gtmc="menu button">Share</button>
+  <button class="go-Button go-Button--inverted" data-gtmc="menu button">Format</button>
+  <button class="go-Button go-Button--inverted" data-gtmc="menu button">Run</button>
+  <button class="go-Button go-Button--inverted" data-gtmc="menu button" aria-label="Search">
+    <img
+      class="go-Icon"
+      height="24"
+      width="24"
+      src="/static/_icon/search_gm_grey_24dp.svg"
+      alt=""
+    />
+  </button>
+</div>
+```
+
+```html
+<fieldset class="go-Label go-Label--inline">
+  <legend>Label</legend>
+  <div class="go-InputGroup">
+    <button class="go-Button go-Button--inverted" data-gtmc="menu button" aria-label="Open menu">
+      <img
+        class="go-Icon"
+        height="24"
+        width="24"
+        src="/static/_icon/filter_list_gm_grey_24dp.svg"
+        alt=""
+      />
+    </button>
+    <button class="go-Button go-Button--inverted" data-gtmc="menu button" aria-label="Search">
+      <img
+        class="go-Icon"
+        height="24"
+        width="24"
+        src="/static/_icon/search_gm_grey_24dp.svg"
+        alt=""
+      />
+    </button>
+  </div>
+</fieldset>
+```
--- a/static/shared/gopher/airplane-1200x945.svg
+++ b/static/shared/gopher/airplane-1200x945.svg
--- a/static/shared/gopher/empty_content.tmpl
+++ b/static/shared/gopher/empty_content.tmpl
@ -0,0 +1,13 @@
+<!--
+  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.
+-->
+
+{{define "empty-content"}}
+  <div>
+    <img class="EmptyContent-gopher" width="945" height="1200"
+        src="/static/_gopher/airplane-1200x945.svg" alt="The Go Gopher">
+    <h3 class="EmptyContent-message">{{.}}</h3>
+  </div>
+{{end}}
--- a/static/shared/gopher/gopher.css
+++ b/static/shared/gopher/gopher.css
@ -0,0 +1,31 @@
+/*!
+ * 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.
+ */
+
+.Error-gopher,
+.EmptyContent-gopher,
+.Fetch-gopher,
+.SearchResults-emptyContentGopher {
+  display: block;
+  margin: 0 auto;
+  max-width: 15rem;
+  padding: 1.25rem 0;
+}
+.Error-message,
+.EmptyContent-message,
+.SearchResults-emptyContentMessage {
+  color: var(--color-textSubtle);
+  text-align: center;
+}
+.Error-gopher,
+.EmptyContent-gopher,
+.NotFound-gopher,
+.SearchResults-emptyContentGopher {
+  display: block;
+  height: 15rem;
+  margin: 0 auto;
+  padding: 1.25rem 0;
+  width: 15rem;
+}
--- a/static/shared/gopher/package-search.jpeg
+++ b/static/shared/gopher/package-search.jpeg
--- a/static/shared/gopher/pilot-bust.svg
+++ b/static/shared/gopher/pilot-bust.svg
--- a/static/shared/header/header.css
+++ b/static/shared/header/header.css
@ -0,0 +1,295 @@
+/*!
+ * Copyright 2021 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.
+ */
+
+.go-Banner {
+  background-color: var(--gray-1);
+
+  /**
+   * Only show on wide viewports so the
+   * text never wraps or gets cut off.
+   */
+  display: none;
+}
+.go-Banner-inner {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 75.75rem;
+  min-height: 2.5rem;
+  padding: 0.5rem var(--gutter);
+}
+.Site--wide .go-Banner-inner {
+  max-width: 98rem;
+}
+.go-Banner--full .go-Banner-inner {
+  max-width: unset;
+}
+.go-Banner-message {
+  color: var(--white);
+  margin-right: 1.25rem;
+}
+.go-Banner-action:link,
+.go-Banner-action:visited {
+  color: var(--white);
+  text-decoration: underline;
+  white-space: nowrap;
+}
+@media only screen and (min-width: 52rem) {
+  .go-Banner {
+    display: block;
+  }
+}
+
+.go-Header {
+  background: #007d9c;
+  border-bottom: none;
+  box-shadow: 0 0.0625rem 0.125rem rgba(171, 171, 171, 0.3);
+  top: 0;
+  width: 100%;
+  z-index: 10;
+}
+.go-Header-inner {
+  margin: 0 auto;
+  max-width: 75.75rem;
+  padding: 0 var(--gutter);
+}
+.Site--wide .go-Header-inner {
+  max-width: 98rem;
+}
+.go-Header--full .go-Header-inner {
+  max-width: initial;
+}
+.go-Header-nav {
+  align-items: center;
+  display: flex;
+  height: 3.5rem;
+  justify-content: space-between;
+}
+.go-Header-rightContent {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: flex-end;
+  width: 100%;
+}
+.go-Header-inner--dark {
+  border-bottom: none;
+  color: var(--white);
+}
+.go-Header-logo {
+  display: block;
+  height: 2rem;
+  margin-right: 2.25rem;
+  width: 5.125rem;
+}
+.go-Header-logo--hidden {
+  display: none;
+}
+.go-Header-menuItem {
+  display: none;
+}
+.go-Header-menu {
+  align-items: stretch;
+  display: flex;
+  height: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+@media only screen and (min-width: 57.7rem) {
+  .go-Header-menuItem {
+    align-items: stretch;
+    display: inline-flex;
+    flex: none;
+  }
+  .go-Header-menu {
+    justify-content: flex-end;
+  }
+  .go-Header-navOpen {
+    display: none;
+  }
+}
+.go-Header-menuItem a:link,
+.go-Header-menuItem a:visited {
+  align-items: center;
+  border-bottom: 0.1875rem solid transparent;
+  border-top: 0.1875rem solid transparent; /* To ensure the text remains centered. */
+  color: var(--gray-2);
+  display: inline-flex;
+  margin: 0 0.3125rem;
+  padding: 0 0.9375rem;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+}
+.go-Header-menuItem--active a:link,
+.go-Header-menuItem--active a:visited {
+  border-bottom-color: var(--turq-med);
+  font-weight: bold;
+}
+.go-Header-menuItem a:hover {
+  border-bottom-color: var(--white);
+  color: var(--gray-2);
+}
+.go-NavigationDrawer-listItem a:link,
+.go-NavigationDrawer-listItem a:visited {
+  display: block;
+  margin: 0 1rem;
+  padding: 0.5rem;
+}
+.go-Header-inner--dark .go-Header-menuItem a:link,
+.go-Header-inner--dark .go-Header-menuItem a:visited {
+  color: var(--white);
+}
+
+.go-Header-navOpen {
+  background: no-repeat center/2rem url('/images/menu-24px.svg');
+  border: none;
+  height: 2.5rem;
+  margin-left: 1rem;
+  width: 2.5rem;
+}
+.go-Header-navOpen--white {
+  background: no-repeat center/2rem url('/static/_icon/menu_gm_grey_24dp.svg');
+  filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(13%) hue-rotate(245deg)
+    brightness(103%) contrast(107%);
+}
+
+.go-SearchForm {
+  align-items: center;
+  background-color: transparent;
+  border-radius: 0.25rem;
+  display: flex;
+  flex: 1;
+  font-size: 1rem;
+  height: 2rem;
+  margin: 0.6875rem 0;
+  max-width: 2rem;
+  transition: max-width 200ms;
+}
+.go-SearchForm--open {
+  background-color: var(--color-background);
+  margin-left: 1.5rem;
+  max-width: min(100%, 30rem);
+}
+.go-SearchForm svg {
+  box-sizing: border-box;
+  cursor: pointer;
+  fill: var(--white);
+  margin-left: 0.5rem;
+  width: 1.4375rem;
+}
+.go-SearchForm--open svg {
+  fill: var(--color-text-subtle);
+  margin-right: 0.5rem;
+}
+.go-SearchForm-input {
+  background-color: transparent;
+  border: none;
+  box-sizing: border-box;
+  font: inherit;
+  height: 100%;
+  opacity: 0;
+  outline: none;
+  padding: 0;
+  transition: width 200ms, padding 200ms, opacity 200ms;
+  width: 0;
+}
+.go-SearchForm--open .go-SearchForm-input {
+  flex: 1;
+  opacity: 1;
+  padding: 0.5rem;
+  transition: width 200ms, padding 200ms;
+  width: 100%;
+}
+.go-SearchForm-input::placeholder {
+  color: var(--color-text-subtle);
+}
+.go-SearchForm-submit {
+  background-color: transparent;
+  border: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  outline: 0;
+  padding: 0;
+}
+
+@media only screen and (min-width: 32rem) {
+  .go-Header-rightContent {
+    width: 100%;
+  }
+  .go-SearchForm {
+    background-color: var(--color-background);
+    margin: 0.6rem 1.4rem 0.6rem 0;
+    max-width: none;
+  }
+  .go-SearchForm-input {
+    opacity: 1;
+    padding: initial;
+    width: 100%;
+  }
+  .go-SearchForm svg {
+    fill: var(--color-text-subtle);
+    margin-right: 0.5rem;
+  }
+}
+
+.go-NavigationDrawer {
+  background: var(--white);
+  height: 100%;
+  left: auto;
+  max-width: 27rem;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transform: translateX(100%);
+  transition: transform 100ms ease-in-out;
+  width: 85%;
+  z-index: 30;
+}
+.go-NavigationDrawer.is-active {
+  transform: translateX(0);
+}
+.go-NavigationDrawer-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+.go-NavigationDrawer-logo {
+  display: block;
+  height: 2rem;
+  margin: 1rem 1rem;
+  width: 5.125rem;
+}
+.go-NavigationDrawer-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.go-NavigationDrawer-listItem {
+  font-size: 1.125rem;
+  margin: 0 0.5rem;
+}
+.go-NavigationDrawer-listItem--active {
+  background-color: var(--blue);
+  border-radius: 0.4rem;
+}
+.go-NavigationDrawer-scrim {
+  display: none;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 20;
+}
+.go-NavigationDrawer.is-active + .go-NavigationDrawer-scrim {
+  background-color: var(--gray-1);
+  display: block;
+  opacity: 0.32;
+}
--- a/static/shared/header/header.js
+++ b/static/shared/header/header.js
--- a/static/shared/header/header.js.map
+++ b/static/shared/header/header.js.map
@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["header.ts"],
+  "sourcesContent": ["function registerHeaderListeners() {\n  const header = document.querySelector('.js-header');\n  const menuButtons = document.querySelectorAll('.js-headerMenuButton');\n  menuButtons.forEach(button => {\n    button.addEventListener('click', e => {\n      e.preventDefault();\n      header?.classList.toggle('is-active');\n      button.setAttribute('aria-expanded', String(header?.classList.contains('is-active')));\n    });\n  });\n\n  const scrim = document.querySelector('.js-scrim');\n  scrim?.addEventListener('click', e => {\n    e.preventDefault();\n    header?.classList.remove('is-active');\n    menuButtons.forEach(button => {\n      button.setAttribute('aria-expanded', String(header?.classList.contains('is-active')));\n    });\n  });\n}\n\nfunction registerSearchFormListeners() {\n  const BREAKPOINT = 512;\n  const logo = document.querySelector('.js-headerLogo');\n  const form = document.querySelector<HTMLFormElement>('.js-searchForm');\n  const button = document.querySelector('.js-searchFormSubmit');\n  const input = form?.querySelector('input');\n\n  renderForm();\n\n  window.addEventListener('resize', renderForm);\n\n  function renderForm() {\n    if (window.innerWidth > BREAKPOINT) {\n      logo?.classList.remove('go-Header-logo--hidden');\n      form?.classList.remove('go-SearchForm--open');\n      input?.removeEventListener('focus', showSearchBox);\n      input?.removeEventListener('keypress', handleKeypress);\n      input?.removeEventListener('focusout', hideSearchBox);\n    } else {\n      button?.addEventListener('click', handleSearchClick);\n      input?.addEventListener('focus', showSearchBox);\n      input?.addEventListener('keypress', handleKeypress);\n      input?.addEventListener('focusout', hideSearchBox);\n    }\n  }\n\n  /**\n   * Submits form if Enter key is pressed\n   */\n  function handleKeypress(e: KeyboardEvent) {\n    if (e.key === 'Enter') form?.submit();\n  }\n\n  /**\n   * Shows the search box when it receives focus (expands it from\n   * just the spyglass if we're on mobile).\n   */\n  function showSearchBox() {\n    logo?.classList.add('go-Header-logo--hidden');\n    form?.classList.add('go-SearchForm--open');\n  }\n\n  /**\n   * Hides the search box (shrinks to just the spyglass icon).\n   */\n  function hideSearchBox() {\n    logo?.classList.remove('go-Header-logo--hidden');\n    form?.classList.remove('go-SearchForm--open');\n  }\n\n  /**\n   * Expands the searchbox so input is visible and gives\n   * the input focus.\n   */\n  function handleSearchClick(e: Event) {\n    e.preventDefault();\n\n    showSearchBox();\n    input?.focus();\n  }\n}\n\nregisterHeaderListeners();\nregisterSearchFormListeners();\n"],
+  "mappings": "AAAA,kCAAmC,CACjC,KAAM,GAAS,SAAS,cAAc,cAChC,EAAc,SAAS,iBAAiB,wBAC9C,EAAY,QAAQ,GAAU,CAC5B,EAAO,iBAAiB,QAAS,GAAK,CACpC,EAAE,iBACF,GAAQ,UAAU,OAAO,aACzB,EAAO,aAAa,gBAAiB,OAAO,GAAQ,UAAU,SAAS,mBAK3E,AADc,SAAS,cAAc,cAC9B,iBAAiB,QAAS,GAAK,CACpC,EAAE,iBACF,GAAQ,UAAU,OAAO,aACzB,EAAY,QAAQ,GAAU,CAC5B,EAAO,aAAa,gBAAiB,OAAO,GAAQ,UAAU,SAAS,mBAK7E,sCAAuC,CACrC,KAAM,GAAa,IACb,EAAO,SAAS,cAAc,kBAC9B,EAAO,SAAS,cAA+B,kBAC/C,EAAS,SAAS,cAAc,wBAChC,EAAQ,GAAM,cAAc,SAElC,IAEA,OAAO,iBAAiB,SAAU,GAElC,YAAsB,CACpB,AAAI,OAAO,WAAa,EACtB,IAAM,UAAU,OAAO,0BACvB,GAAM,UAAU,OAAO,uBACvB,GAAO,oBAAoB,QAAS,GACpC,GAAO,oBAAoB,WAAY,GACvC,GAAO,oBAAoB,WAAY,IAEvC,IAAQ,iBAAiB,QAAS,GAClC,GAAO,iBAAiB,QAAS,GACjC,GAAO,iBAAiB,WAAY,GACpC,GAAO,iBAAiB,WAAY,IAOxC,WAAwB,EAAkB,CACxC,AAAI,EAAE,MAAQ,SAAS,GAAM,SAO/B,YAAyB,CACvB,GAAM,UAAU,IAAI,0BACpB,GAAM,UAAU,IAAI,uBAMtB,YAAyB,CACvB,GAAM,UAAU,OAAO,0BACvB,GAAM,UAAU,OAAO,uBAOzB,WAA2B,EAAU,CACnC,EAAE,iBAEF,IACA,GAAO,SAIX,0BACA",
+  "names": []
+}
--- a/static/shared/header/header.tmpl
+++ b/static/shared/header/header.tmpl
@ -0,0 +1,79 @@
+<!--
+  Copyright 2021 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.
+-->
+
+{{define "header"}}
+  <header class="go-Header{{if .AllowWideContent}} go-Header--full{{end}} js-siteHeader">
+    <div class="go-Banner{{if .AllowWideContent}} go-Banner--full{{end}}">
+      <div class="go-Banner-inner">
+        <div class="go-Banner-message">Black Lives Matter</div>
+        <a class="go-Banner-action"
+          href="https://support.eji.org/give/153413/#!/donation/checkout"
+          target="_blank"
+          rel="noopener">Support the Equal Justice Initiative</a>
+      </div>
+    </div>
+    <div class="go-Header-inner go-Header-inner--dark">
+      <nav class="go-Header-nav">
+        <a href="https://go.dev/" data-gtmc="nav link" data-test-id="go-header-logo-link">
+          <img class="js-headerLogo go-Header-logo" src="/static/_logo/go-white.svg" alt="Go">
+        </a>
+        <div class="go-Header-rightContent">
+          <form class="js-searchForm go-SearchForm" action="/search" role="search" data-gtmc="header search form" >
+            <button class="js-searchFormSubmit go-SearchForm-submit" aria-label="Search for a package">
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M11.76 10.27L17.49 16L16 17.49L10.27 11.76C9.2 12.53 7.91 13 6.5 13C2.91 13 0 10.09 0 6.5C0 2.91 2.91 0 6.5 0C10.09 0 13 2.91 13 6.5C13 7.91 12.53 9.2 11.76 10.27ZM6.5 2C4.01 2 2 4.01 2 6.5C2 8.99 4.01 11 6.5 11C8.99 11 11 8.99 11 6.5C11 4.01 8.99 2 6.5 2Z">
+                </path></svg>
+            </button>
+            <input class="go-SearchForm-input js-searchFocus" aria-label="Search for a package"
+                type="text" name="q" size="1" placeholder="Search for a package"
+                autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false"
+                title="Search for a package">
+          </form>
+          <ul class="go-Header-menu">
+            <li class="go-Header-menuItem">
+              <a href="https://go.dev/solutions/" data-gtmc="nav link">Why Go</a>
+            </li>
+            <li class="go-Header-menuItem">
+              <a href="https://go.dev/learn/" data-gtmc="nav link">Getting Started</a>
+            </li>
+            <li class="go-Header-menuItem go-Header-menuItem--active">
+              <a href="/" data-gtmc="nav link">Discover Packages</a>
+            </li>
+            <li class="go-Header-menuItem">
+              <a href="https://go.dev/about" data-gtmc="nav link">About</a>
+            </li>
+          </ul>
+          <button class="go-Header-navOpen js-headerMenuButton go-Header-navOpen--white" data-gtmc="nav button" aria-label="Open navigation">
+          </button>
+        </div>
+      </nav>
+    </div>
+  </header>
+  <aside class="go-NavigationDrawer js-header">
+    <nav>
+      <div class="go-NavigationDrawer-header">
+        <a href="https://go.dev/" tabindex="-1">
+          <img class="go-NavigationDrawer-logo" src="/static/_logo/go-blue.svg" alt="Go.">
+        </a>
+      </div>
+      <ul class="go-NavigationDrawer-list">
+          <li class="go-NavigationDrawer-listItem">
+            <a href="https://go.dev/solutions/" tabindex="-1">Why Go</a>
+          </li>
+          <li class="go-NavigationDrawer-listItem">
+            <a href="https://go.dev/learn/" tabindex="-1">Getting Started</a>
+          </li>
+          <li class="go-NavigationDrawer-listItem go-NavigationDrawer-listItem--active">
+            <a href="/" tabindex="-1">Discover Packages</a>
+          </li>
+          <li class="go-NavigationDrawer-listItem">
+            <a href="https://go.dev/about" tabindex="-1">About</a>
+          </li>
+      </ul>
+    </nav>
+  </aside>
+  <div class="go-NavigationDrawer-scrim js-scrim" role="presentation"></div>
+{{end}}
--- a/Показать больше
+++ b/Показать больше