static/frontend/homepage/homepage.tmpl

<!--
    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/frontend/homepage/homepage.min.css?version={{.AppVersionLabel}}" rel="stylesheet">
{{end}}

{{define "main"}}
  <main class="go-Container">
    <div class="go-Content go-Content--center">
      <img class="Homepage-logo" width="700" height="300"
          src="/static/shared/gopher/package-search-700x300.jpeg" alt="Cartoon gopher typing">
      <form class="go-InputGroup Homepage-search
          {{if .Experiments.IsActive "symbol-search"}}Homepage-search--symbol{{end}}"
          action="/search" role="search" data-gtmc="homepage search form"
          aria-label="Search for a Package">
        <input
          class="go-Input js-searchFocus"
          data-test-id="homepage-search"
          id="AutoComplete"
          role="textbox"
          {{- if .Experiments.IsActive "symbol-search" -}}
            aria-label="Search packages or symbols"
          {{else}}
            aria-label="Search for Go packages"
          {{- end -}}
          type="search"
          name="q"
          {{- if .Experiments.IsActive "symbol-search" -}}
            placeholder="Search packages or symbols"
          {{else}}
            placeholder="Search for Go packages"
          {{- end -}}
          autocapitalize="off"
          autocomplete="off"
          autocorrect="off"
          spellcheck="false"
          {{- if .Experiments.IsActive "symbol-search" -}}
            title="Search packages or symbols"
          {{else}}
            title="Search for Go packages"
          {{- end -}}
          autofocus="true">
        <button type="submit" class="go-Button">Search</button>
      </form>
      {{if .Experiments.IsActive "symbol-search"}}
        <section class="go-Carousel Homepage-tips js-carousel" aria-label="Search Tips Carousel" data-slide-index="{{.TipIndex}}">
          <ul>
            {{range $i, $v := .SearchTips}}
              <li class="go-Carousel-slide" {{if not (eq $.TipIndex $i)}}aria-hidden{{end}}>
                <p>
                  <strong>Tip:</strong> {{.Text}}
                  <a href="/search?q={{$v.Example1}}">“{{$v.Example1}}”</a> or
                  <a href="/search?q={{$v.Example2}}">“{{$v.Example2}}”</a>.
                  <a href="/search-help" target="_blank" rel="noopener" class="Homepage-helpLink">
                    Search help <span><img width="24" height="24" src="/static/shared/icon/launch_gm_grey_24dp.svg" alt=""></span>
                  </a>
                </p>
              </li>
            {{end}}
          </ul>
        </section>
      {{else}}
      <div class="Homepage-examples">
        <span class="Homepage-examplesTitle">Example Searches:</span>
        <ul class="Homepage-examplesList">
          <li><a href="/search?q=http">“http”</a></li>
          <li><a href="/search?q=command">“command”</a></li>
          <li><a href="/search?q=yaml+OR+json+OR+xml">“yaml OR json OR xml”</a></li>
        </ul>
        <div>
          <a href="/search-help" target="_blank" rel="noopener" class="Homepage-helpLink">
            Search help <span><img width="24" height="24" src="/static/shared/icon/launch_gm_grey_24dp.svg" alt=""></span>
          </a>
        </div>
      </div>
      {{end}}
    </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}}