_content: Sidebar template prop

- Adds desktop only sidebar options
- Turn on any doc template with "Sidebar" prop
- currently 2 sidebar choices "faq" or "bug"

Added to the following pages
- /doc/install
- /doc/faq
- /help

Video: https://drive.google.com/file/d/1MmZSvdqcmREeB5ZU0YXwuilFDsusmne1/view?usp=sharing

Change-Id: Ie106fdfeac464752789319aa87ffe0144dbc5c88
Reviewed-on: https://go-review.googlesource.com/c/website/+/441857
TryBot-Result: Gopher Robot <gobot@golang.org>
Auto-Submit: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>
Run-TryBot: Jamal Carvalho <jamal@golang.org>

11 files changed, 142 insertions, 17 deletions

diff --git a/_content/article.tmpl b/_content/article.tmpl
index 15c44015..fec661bb 100644
--- a/_content/article.tmpl
+++ b/_content/article.tmpl
@@ -1,6 +1,21 @@
 {{define "layout"}}
   <article class="Article {{with section .}}Article--{{strings.Trim . "/"}}{{end}}">
+
+    {{if .sidebar }}
+    <div class="Article-columns">
+    <div class="Article-content">
+    {{end}}
     <h1>{{.title}}</h1>
     {{.Content}}
+
+    {{if .sidebar }}
+    </div>
+    {{if eq .sidebar "faq"}}
+      {{ faqsidebar .}}
+    {{else if eq .sidebar "bug"}}
+      {{ bugsidebar .}}
+    {{end}}
+    </div>
+    {{end}}
   </article>
 {{end}}
\ No newline at end of file
diff --git a/_content/css/styles.css b/_content/css/styles.css
index aa369b06..2f75bf22 100644
--- a/_content/css/styles.css
+++ b/_content/css/styles.css
@@ -884,6 +884,55 @@ h1 + h2.subtitle {
 [data-theme='dark'] .CopyPaste .CopyPaste-icon-dark {
   display: block;
 }
+.Sidebar {
+  display: none;
+}
+.Sidebar a {
+  width: 7.5rem;
+}
+.Sidebar h4 {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.Sidebar p, .Sidebar-faq .link {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+.Sidebar-faq h4 {
+  font-size: 0.813rem;
+  margin-top: 1.25rem;
+  margin-bottom: 0.375rem;
+}
+.Sidebar-faq p {
+  margin-top: 0;
+  margin-bottom: 0.625rem;
+}
+.Sidebar-socialLinks {
+  display: flex;
+  align-items: center;
+}
+.Sidebar-socialLinks a {
+  display: flex;
+  width: unset;
+  margin-right: 0.675rem;
+}
+@media screen and (min-width: 78rem) {
+  .Article-columns {
+    display: flex;
+    gap: 10rem;
+  }
+  .Article-content {
+    flex: 3;
+  }
+  .Sidebar {
+    display: block;
+    flex: 1;
+  }
+}
 .Article.Doc img {
   background-color: var(--white);
 }
@@ -4729,7 +4778,7 @@ th.pkg-name {
   height: 3rem;
 }
 /* for doc/install */
-a#start {
+a.btn {
   background: var(--deep-cerulian);
   font-style: normal;
   font-weight: 400;
diff --git a/_content/doc/faq.html b/_content/doc/faq.html
index 1500df83..f4f70e9c 100644
--- a/_content/doc/faq.html
+++ b/_content/doc/faq.html
@@ -1,5 +1,6 @@
 <!--{
-	"Title": "Frequently Asked Questions (FAQ)"
+    "Title": "Frequently Asked Questions (FAQ)",
+    "Sidebar": "faq"
 }-->
 
 <h2 id="Origins">Origins</h2>
diff --git a/_content/doc/install.html b/_content/doc/install.html
index 1e034d6a..855157ba 100644
--- a/_content/doc/install.html
+++ b/_content/doc/install.html
@@ -1,7 +1,9 @@
 <!--{
-    "Title": "Download and install",
-    "HideTOC": true
+	"Title": "Download and install",
+  "HideTOC": true,
+  "Sidebar": "bug"
 }-->
+
 <p>
   Download and install Go quickly with the steps described here.
 </p>
@@ -17,7 +19,7 @@
   </li>
 </ul>
 <p class="DownloadBtn">
-  <a href="/dl/" id="start" class="download js-download">
+  <a href="/dl/" id="start" class="btn download js-download">
     <span id="download-description" class="js-downloadDescription"></span>
   </a>
 </p>
diff --git a/_content/help.html b/_content/help.md
index c9337ae4..59a64751 100644
--- a/_content/help.html
+++ b/_content/help.md
@@ -1,15 +1,14 @@
-<!--{
-	"Title": "Help",
-	"Template": true,
-	"layout": "article"
-}-->
+---
+title: "Help"
+template: true
+layout: "article"
+sidebar: "bug"
+---
 
 <div id="manual-nav"></div>
 
 <h2 id="help">Get help</h2>
 
-<img class="gopher" src="/doc/gopher/help.png" alt=""/>
-
 <h3 id="mailinglist"><a href="https://groups.google.com/group/golang-nuts">Go Nuts Mailing List</a></h3>
 <p>
 Get help from Go users, and share your work on the official mailing list.
diff --git a/_content/images/icons/github.svg b/_content/images/icons/github.svg
new file mode 100644
index 00000000..52d9a194
--- /dev/null
+++ b/_content/images/icons/github.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.984 0c-1.45 0-2.795.363-4.032 1.088a7.846 7.846 0 0 0-2.864 2.864A7.833 7.833 0 0 0 0 7.984c0 1.141.24 2.235.72 3.28a7.996 7.996 0 0 0 1.904 2.64 8.236 8.236 0 0 0 2.8 1.664c.181.021.32-.016.416-.112a.365.365 0 0 0 .128-.288v-1.376a3.159 3.159 0 0 1-1.12.08 2.105 2.105 0 0 1-.784-.24 2.113 2.113 0 0 1-.48-.384 1.977 1.977 0 0 1-.24-.368l-.064-.16a3.06 3.06 0 0 0-.384-.72 1.832 1.832 0 0 0-.352-.352l-.144-.096c-.31-.203-.395-.347-.256-.432a.613.613 0 0 1 .304-.064c.235.01.453.09.656.24.16.107.299.235.416.384l.144.208c.32.533.741.827 1.264.88.33.032.677-.032 1.04-.192.043-.427.208-.784.496-1.072-1.088-.128-1.915-.432-2.48-.912-.768-.64-1.152-1.659-1.152-3.056 0-.832.277-1.552.832-2.16a2.386 2.386 0 0 1-.128-.688 2.899 2.899 0 0 1 .24-1.36l.128-.016c.117 0 .25.016.4.048.203.043.432.123.688.24.299.139.624.325.976.56.533-.16 1.205-.24 2.016-.24.63 0 1.296.08 2 .24.341-.235.667-.421.976-.56.256-.117.485-.197.688-.24.15-.032.283-.048.4-.048l.144.016c.267.661.304 1.344.112 2.048l-.016.048c.267.299.47.635.608 1.008.15.373.224.757.224 1.152 0 .96-.187 1.739-.56 2.336-.31.512-.757.901-1.344 1.168-.459.192-1.035.33-1.728.416.16.128.288.31.384.544.107.267.16.57.16.912v2.208c0 .117.043.219.128.304.096.085.235.112.416.08a7.68 7.68 0 0 0 2.832-1.664 8.122 8.122 0 0 0 1.904-2.672A7.818 7.818 0 0 0 16 7.984a8.075 8.075 0 0 0-1.12-4.032A7.971 7.971 0 0 0 12 1.088 7.804 7.804 0 0 0 7.984 0Z" fill="#1C1F23"/></svg>
\ No newline at end of file
diff --git a/_content/images/icons/reddit.svg b/_content/images/icons/reddit.svg
new file mode 100644
index 00000000..c98c2ecd
--- /dev/null
+++ b/_content/images/icons/reddit.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M9.492 10.232a.144.144 0 0 1 0 .204c-.31.308-.796.458-1.487.458l-.006-.001-.005.001c-.69 0-1.177-.15-1.487-.459a.143.143 0 0 1 0-.203.146.146 0 0 1 .204 0c.253.251.672.374 1.283.374l.005.001.006-.001c.61 0 1.029-.123 1.282-.374a.146.146 0 0 1 .205 0ZM7.199 8.62a.614.614 0 0 0-1.23 0 .614.614 0 0 0 1.23 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-3.333-.086a1.032 1.032 0 0 0-1.75-.739c-.704-.463-1.656-.758-2.71-.796l.576-1.816 1.562.366-.002.023a.844.844 0 0 0 1.69 0 .844.844 0 0 0-1.63-.305l-1.684-.395a.144.144 0 0 0-.171.097l-.643 2.025c-1.104.013-2.104.31-2.839.787a1.03 1.03 0 0 0-1.733.753c0 .377.208.704.512.883-.02.11-.033.221-.033.334 0 1.52 1.87 2.758 4.169 2.758 2.298 0 4.168-1.238 4.168-2.758a1.83 1.83 0 0 0-.029-.315c.324-.174.547-.51.547-.902Zm-3.248.094a.614.614 0 0 0-.615.613.614.614 0 0 0 1.23 0 .614.614 0 0 0-.615-.613Z" fill="#EB5428"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/_content/images/icons/slack_2.svg b/_content/images/icons/slack_2.svg
new file mode 100644
index 00000000..2ecad741
--- /dev/null
+++ b/_content/images/icons/slack_2.svg
@@ -0,0 +1 @@
+<svg width="11" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.293 5.43c0 .497-.515.903-1.146.903C.516 6.333 0 5.927 0 5.43s.516-.903 1.147-.903h1.146v.903ZM2.871 5.43c0-.497.516-.903 1.147-.903.63 0 1.146.406 1.146.903v2.26c0 .497-.515.903-1.146.903-.631 0-1.147-.406-1.147-.903V5.43Z" fill="#E01E5A"/><path d="M4.018 1.805c-.631 0-1.147-.406-1.147-.902C2.871.406 3.387 0 4.018 0c.63 0 1.146.406 1.146.903v.902H4.018ZM4.018 2.26c.63 0 1.146.406 1.146.902 0 .497-.515.903-1.146.903H1.147C.516 4.065 0 3.66 0 3.162c0-.496.516-.902 1.147-.902h2.87Z" fill="#36C5F0"/><path d="M8.622 3.162c0-.496.516-.902 1.147-.902.63 0 1.146.406 1.146.902 0 .497-.515.903-1.146.903H8.622v-.903ZM8.044 3.163c0 .497-.515.902-1.146.902-.631 0-1.147-.405-1.147-.902V.903C5.751.406 6.267 0 6.898 0c.63 0 1.146.406 1.146.903v2.26Z" fill="#2EB67D"/><path d="M6.898 6.787c.63 0 1.146.406 1.146.903s-.515.902-1.146.902c-.631 0-1.147-.405-1.147-.902v-.903h1.147ZM6.898 6.333c-.631 0-1.147-.406-1.147-.903s.516-.903 1.147-.903h2.87c.632 0 1.147.406 1.147.903s-.515.903-1.146.903H6.898Z" fill="#ECB22E"/></svg>
\ No newline at end of file
diff --git a/_content/images/icons/twitter.svg b/_content/images/icons/twitter.svg
new file mode 100644
index 00000000..c035b035
--- /dev/null
+++ b/_content/images/icons/twitter.svg
@@ -0,0 +1 @@
+<svg width="15" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.016 1.344c-.203.288-.427.56-.672.816-.235.245-.49.47-.768.672.01.128.016.256.016.384 0 .576-.064 1.147-.192 1.712a7.95 7.95 0 0 1-.528 1.616 8.881 8.881 0 0 1-1.264 2.032 7.9 7.9 0 0 1-1.728 1.536 7.9 7.9 0 0 1-2.096.944 8.131 8.131 0 0 1-2.368.32 8.46 8.46 0 0 1-2.304-.32A7.86 7.86 0 0 1 0 10.096c.768.085 1.52.027 2.256-.176a5.836 5.836 0 0 0 2-1.024 2.71 2.71 0 0 1-1.28-.32 2.97 2.97 0 0 1-.992-.864 3.122 3.122 0 0 1-.4-.8l.272.032c.341.032.677 0 1.008-.096a2.89 2.89 0 0 1-.912-.352A3 3 0 0 1 .72 5.008a3.068 3.068 0 0 1-.16-.976V4a2.7 2.7 0 0 0 1.312.368 2.813 2.813 0 0 1-.928-1.04 2.333 2.333 0 0 1-.256-.656A2.748 2.748 0 0 1 .992.528c.363.459.768.864 1.216 1.216a8.271 8.271 0 0 0 4.704 1.792 1.701 1.701 0 0 1-.064-.32 3.719 3.719 0 0 1-.016-.336c0-.405.075-.779.224-1.12a3.1 3.1 0 0 1 .608-.912c.267-.267.576-.475.928-.624C8.944.074 9.317 0 9.712 0c.395 0 .773.08 1.136.24.363.16.677.384.944.672a5.588 5.588 0 0 0 1.824-.704c-.107.341-.267.65-.48.928-.213.267-.475.49-.784.672A6.18 6.18 0 0 0 14 1.36l.016-.016Z" fill="#6FA8D8"/></svg>
\ No newline at end of file
diff --git a/_content/project.html b/_content/project.html
index eeb42792..7bdd8485 100644
--- a/_content/project.html
+++ b/_content/project.html
@@ -1,11 +1,9 @@
 <!--{
 	"Title": "The Go Project",
-	"Template": true,
-	"layout": "article"
+	"layout": "article",
+	"template": true
 }-->
 
-<img class="gopher" src="/doc/gopher/project.png" alt="" />
-
 <div id="manual-nav"></div>
 
 <p>
diff --git a/_content/site.tmpl b/_content/site.tmpl
index a0b63808..24c51657 100644
--- a/_content/site.tmpl
+++ b/_content/site.tmpl
@@ -413,7 +413,10 @@
 {{define "doclayout"}}
 {{/* used from various subdirectory default.tmpl */}}
 <article class="Doc Article">
-
+{{if .sidebar }}
+<div class="Article-columns">
+<div class="Article-content">
+{{end}}
 {{if .title}}
 <h1>{{.title}}</h1>
 {{else if eq .layout "error"}}
@@ -436,8 +439,62 @@
 <div id="nav" class="TOC"></div>
 {{end}}
 
+
 {{.Content}}
 
+{{if .sidebar }}
+</div>
+{{if eq .sidebar "faq"}}
+{{ faqsidebar .}}
+{{else if eq .sidebar "bug"}}
+{{ bugsidebar .}}
+{{end}}
+</div>
+{{end}}
 </article>
 
 {{end}}
+
+{{define "bugsidebar"}}
+<aside class="Sidebar">
+  <h4>Report Issues</h4>
+  <p>If you spot bugs, mistakes, or inconsistencies in the Go project's code or documentation, please let us know by filing a ticket on our <a href="https://github.com/golang/go/issues">issue tracker.</a> Of course, you should check it's not an existing issue before creating a new one.</p>
+  <a class="btn" href="https://github.com/golang/go/issues">Filing a ticket</a>
+</aside>
+{{end}}
+
+{{define "faqsidebar"}}
+<aside class="Sidebar Sidebar-faq">
+  <h4>Release Notes</h4>
+  <p>Learn about what's new in each Go release.</p>
+  <a class="link" href="/doc/devel/release">View release notes</a>
+
+  <h4>Code of Conduct</h4>
+  <p>Guidelines for participating in Go community spaces and reporting process for handing issues.</p>
+  <a class="link" href="/conduct">View more</a>
+
+  <h4>Brand Guidelines</h4>
+  <p>Guidance about reusing the Go logo, gopher mascot, etc.</p>
+  <a class="link" href="/blog/go-brand">View guidelines</a>
+
+  <h4>Contribute Guide</h4>
+  <p>Learn how to file bugs, pull requests, or otherwise contribute to the Go ecosystem.</p>
+  <a class="link" href="/doc/contribute">View guide</a>
+
+  <h4>Get connected</h4>
+  <div class="Sidebar-socialLinks">
+    <a href="https://twitter.com/golang" rel="noopener noreferrer" target="_blank">
+      <img width="15" height="12" src="/images/icons/twitter.svg" aria-hidden="true" />
+    </a>
+    <a href="https://www.reddit.com/r/golang/" rel="noopener noreferrer" target="_blank">
+      <img width="16" height="16" src="/images/icons/reddit.svg" aria-hidden="true" />
+    </a>
+    <a href="https://github.com/golang" rel="noopener noreferrer" target="_blank">
+      <img width="16" height="16" src="/images/icons/github.svg" aria-hidden="true" />
+    </a>
+    <a href="https://gophers.slack.com/" rel="noopener noreferrer" target="_blank">
+      <img width="16" height="16" src="/images/icons/slack.svg" aria-hidden="true" />
+    </a>
+  </div>
+</aside>
+{{end}}