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>
  <div class="SearchResults-summary">
    <div>
      Showing <strong>{{len $.Results}}</strong> matching {{.SearchModeSymbol}}s.
      <a href="/search-help">Search help</a>
    </div>
  </div>
  {{template "search_tabs" .}}
  {{if eq (len .Results) 0}}
    {{template "search_no_results" .}}
  {{else}}
    {{template "search_symbol_results" .}}
  {{end}}
{{end}}

{{define "search_no_results"}}
 {{template "gopher-airplane" "It looks like there are no matches for your search."}}
 <p class="SearchResults-emptyContentMessage">
   Need help? Check out <a href="/search-help" data-gtmc="search help"> tips for searching</a> on pkg.go.dev.
 </p>
{{end}}

{{define "search_symbol_results"}}
  <div>
    {{$query := .Query}}
    {{range $i, $r := .Results}}
      {{$moreLink := eq $i (subtract $.Pagination.DefaultLimit 1)}}
      <div class="SearchSnippet" {{if $moreLink}}id="more-results"{{end}}>
        <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>{{capitalize .SearchModePackage}}s matching “{{.Query}}”</h1>
  <div class="SearchResults-summary">
    <div>
      Showing <strong>{{len .Results}}</strong> modules with matching packages. <a href="/search-help">Search help</a>
    </div>
  </div>
  {{template "search_tabs" .}}
  {{if eq (len .Results) 0}}
    {{template "search_no_results" .}}
  {{else}}
    {{template "search_package_results" .}}
  {{end}}
{{end}}

{{define "search_package_results"}}
  <div>
    {{$query := .Query}}
    {{range $i, $v := .Results}}
      {{$moreLink := eq $i (subtract $.Pagination.DefaultLimit 1)}}
      <div class="SearchSnippet" {{if $moreLink}}id="more-results"{{end}}>
        <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>
              {{$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?
    {{$m := or $.SearchMode .SearchModePackage}}
    {{- if and (lt $p.Limit $p.MaxLimit) (eq $p.Limit (len .Results)) -}}
      <a href="{{$p.URL $p.MaxLimit $m ""}}#more-results" 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}}

{{define "search_tabs"}}
  <div>
    <nav class="go-TabNav">
      <ul>
        <li {{if not (eq .SearchMode .SearchModeSymbol)}}aria-current="page"{{end}}><a href="{{.Pagination.URL .Pagination.Limit .SearchModePackage .Query}}">Packages</a></li>
        <li {{if eq .SearchMode .SearchModeSymbol}}aria-current="page"{{end}}><a href="{{.Pagination.URL .Pagination.Limit .SearchModeSymbol .Query}}">Symbols</a></li>
      </ul>
      <hr />
    </nav>
  </div>
{{end}}