static/frontend/search/search.tmpl

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

{{define "main"}}
  <main class="go-Container">
    <div class="go-Content SearchResults">
      {{if eq .SearchMode .SearchModeSymbol }}
        {{template "search_symbol" .}}
      {{else}}
        {{template "search_package" .}}
      {{end}}
      {{if gt (len .Results) 0}}
        {{template "search_pagination" .}}
      {{end}}
    </div>
  </main>
{{end}}

{{define "search_symbol"}}
  <h1>{{capitalize .SearchModeSymbol}}s matching “{{.Query}}”</h1>
  {{if gt (len .Results) 0}}
    <div class="SearchResults-summary">
      <div>
        Showing <strong>{{len $.Results}}</strong> matching {{.SearchModeSymbol}}s.
        <a href="/search-help">Search help</a>
      </div>
    </div>
  {{end}}
  {{if eq (len .Results) 0}}
    <a class="SearchResults-instead" data-gtmc="toggle search mode" href="{{.Pagination.URL .Pagination.Limit .SearchModePackage .Query}}">
      <span class="SearchResults-insteadPrefix">Search instead for </span>“{{.SearchModePackage}}: {{.Query}}”
    </a>
    {{template "gopher-airplane" "No results found."}}
    <p class="SearchResults-emptyContentMessage">
      Try searching for a package by visiting <a href="https://pkg.go.dev/search?q={{.Query}}">pkg.go.dev/search?q={{.Query}}</a>.
    </p>
  {{else}}
    {{template "search_symbol_results" .}}
  {{end}}
{{end}}

{{define "search_symbol_results"}}
  <div>
    {{$query := .Query}}
    {{range $i, $r := .Results}}
      <div class="SearchSnippet">
        <div class="SearchSnippet-headerContainer">
          <h2>
            <a href="{{.SymbolLink}}" data-gtmc="symbol search result symbol" data-gtmv="{{$i}}"
                data-test-id="snippet-title">
              <span class="SearchSnippet-symbolKind">{{.SymbolKind}}</span>
              {{.SymbolName}}
            </a>
            <span class="SearchSnippet-header-dash">in</span>
            <a href="/{{$r.PackagePath}}" data-gtmc="symbol search result package" data-gtmv="{{$i}}"
              class="">{{$r.PackagePath}}</a>
          </h2>
          {{with $r.ChipText}}<span class="go-Chip go-Chip--inverted">{{.}}</span>{{end}}
        </div>
        {{with $r.Synopsis}}<p class="SearchSnippet-infoLabel" data-test-id="snippet-synopsis">{{.}}</p>{{end}}
        <pre class="SearchSnippet-symbolCode">{{.SymbolSynopsis}}</pre>
        {{template "search_metadata" $r}}
      </div> <!-- SearchSnippet -->
    {{end}}
  </div>
{{end}}

{{define "search_package"}}
  <h1>Search results for “{{.Query}}”</h1>
  <a class="SearchResults-instead" data-gtmc="toggle search mode" href="{{.Pagination.URL .Pagination.Limit .SearchModeSymbol .Query}}">
    <span class="SearchResults-insteadPrefix">Search instead for </span>“{{.SearchModeSymbol}}: {{.Query}}”
  </a>
  {{if gt (len .Results) 0}}
    <div class="SearchResults-summary">
      <div>
        Showing <strong>{{len .Results}}</strong> modules with matching packages. <a href="/search-help">Search help</a>
      </div>
    </div>
  {{end}}
  {{if eq (len .Results) 0}}
    {{template "gopher-airplane" "No results found."}}
    <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>
  {{else}}
    {{template "search_package_results" .}}
  {{end}}
{{end}}

{{define "search_package_results"}}
  <div>
    {{$query := .Query}}
    {{range $i, $v := .Results}}
      <div class="SearchSnippet">
        <div class="SearchSnippet-headerContainer">
          <h2>
            <a href="/{{$v.PackagePath}}" data-gtmc="search result" data-gtmv="{{$i}}"
                data-test-id="snippet-title">
              <span class="SearchSnippet-header-name">{{$v.Name}}</span>
              <span class="SearchSnippet-header-dash">–</span>
              {{$v.PackagePath}}
            </a>
          </h2>
          {{with $v.ChipText}}<span class="go-Chip go-Chip--inverted">{{.}}</span>{{end}}
        </div>
        {{with $v.Synopsis}}
          <p class="SearchSnippet-synopsis" data-test-id="snippet-synopsis">
            {{.}}
          </p>
        {{end}}
        {{template "search_metadata" $v}}
        {{with .OtherMajor}}
          <div>
            <span class="go-textSubtle">{{.Heading}}</span>
            {{range $i, $v := .Links}}
              <a href="/{{$v.Href}}" data-gtmc="search result other major"><strong>{{$v.Body}}</strong></a>
            {{end}}
          </div>
        {{end}}
        {{with .SameModule}}
          {{$m := .}}
          <div class="SearchSnippet-sub go-textSubtle">
            <a href="{{$v.ModulePath}}#section-directories"><strong>{{.Heading}}</strong></a>
            {{range $i, $v := .Links}}
              {{if lt $i 5}}
                <a class="go-Chip go-Chip--subtle"
                    href="/{{$v.Href}}"
                    {{if gt $i 4 }}data-hidden="true"{{end}}
                    data-gtmc="search result same module">
                  {{$v.Body}}
                </a>
              {{end}}
            {{end}}
            {{$more := subtract (len .Links) 5}}
            {{if gt (len .Links) 5}}
              <a href="{{$v.ModulePath}}#section-directories" class="go-Chip go-Chip--subtle"
                  data-gtmc="search result more packages">
                +{{$more}} more
              </a>
            {{end}}
          </div>
        {{end}}
      </div> <!-- SearchSnippet -->
    {{end}}
  </div>
{{end}}

{{define "search_metadata"}}
  <div class="SearchSnippet-infoLabel">
    <a href="/{{$.PackagePath}}?tab=importedby" aria-label="Go to Imported By">
       <span class="go-textSubtle">Imported by </span><strong>{{.NumImportedBy}}</strong>
    </a>
    <span class="go-textSubtle">|</span>
    <span class="go-textSubtle">
      <strong>{{.DisplayVersion}}</strong> published on <span data-test-id="snippet-published"><strong>{{.CommitTime}}</strong></span>
    </span>
    <span class="go-textSubtle">|</span>
    <span data-test-id="snippet-license">
    {{if .Licenses}}
      <a href="/{{$.PackagePath}}?tab=licenses" aria-label="Go to Licenses">
        {{commaseparate .Licenses}}
      </a>
    {{else}}
      <span class="go-textSubtle">No license</span>
    {{end}}
    </span>
  </div>
{{end}}

{{define "search_pagination"}}
  {{$p := .Pagination}}
  <div class="SearchPagination" data-test-id="pagination">
    Didn't find what you were looking for?&nbsp;
    {{- if and (lt $p.Limit $p.MaxLimit) (eq $p.Limit (len .Results)) -}}
      <a href="{{$p.URL $p.MaxLimit $.SearchMode ""}}" data-gtmc="search more results">Show more results.</a>
    {{- else -}}
      See <a href="/search-help" data-gtmc="search help"> search help.</a>
    {{- end -}}
  </div>
{{end}}