static/frontend/unit/_header.tmpl

<!--
  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" .}}
    {{if not .GoDocMode}}
      {{template "unit-header-details" .}}
    {{end}}
  </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/shared/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="{{if .LocalMode}}/{{else}}https://go.dev/{{end}}" aria-hidden="true" tabindex="-1" data-gtmc="header link" aria-label="Link to Go Homepage">
      <img height="78" width="207" src="/static/shared/logo/go-blue.svg" alt="Go">
    </a>
    <h1 class="UnitHeader-titleHeading" 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/shared/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="Version: {{.DisplayVersion}}" 
    data-gtmc="header link" aria-describedby="version-description">
      <span class="go-textSubtle" aria-hidden="true">Version: </span>
        {{.DisplayVersion}}
    </a>
    <div class="screen-reader-only" id="version-description" hidden>
      Opens a new window with list of versions in this module.
    </div>
    <!-- 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" 
        data-gtmc="header link" aria-describedby="license-description">
          {{- range $i, $e := .Details.Licenses -}}
            {{- if lt $i 3}}{{if $i}}, {{end}}{{$e.Type}}{{end -}}
            {{- if eq $i 3}}, + {{subtract (len $.Details.Licenses) 3}} more{{end -}}
          {{- end -}}
        </a>
      {{else}}
        <span>
          {{- range $i, $e := .Details.Licenses -}}
            {{if $i}}, {{end}} {{$e.Type}}
          {{- end -}}
        </span>
        <a href="/license-policy" class="Disclaimer-link" data-gtmc="info link"
        aria-describedby="license-description">
          <em>not legal advice</em>
        </a>
      {{end}}
    {{else}}
      <span>None detected</span>
      <a href="/license-policy" class="Disclaimer-link" data-gtmc="info link" 
      aria-describedby="license-description">
        <em>not legal advice</em>
      </a>
    {{end}}
  </span>
  <div class="screen-reader-only" id="license-description" hidden>
    Opens a new window with license information.
  </div>
{{end}}

{{define "detail-item-imports"}}
  <span class="go-Main-headerDetailItem" data-test-id="UnitHeader-imports">
    <a href="{{$.URLPath}}?tab=imports" aria-label="Imports: {{.Details.NumImports}}"
        data-gtmc="header link" aria-describedby="imports-description">
      <span class="go-textSubtle">Imports: </span>{{.Details.NumImports}}
    </a>
  </span>
  <div class="screen-reader-only" id="imports-description" hidden>
    Opens a new window with list of imports.
  </div>
{{end}}

{{define "detail-item-importedby"}}
  <span class="go-Main-headerDetailItem" data-test-id="UnitHeader-importedby">
    <a href="{{$.URLPath}}?tab=importedby" aria-label="Imported By: {{.Details.ImportedByCount}}"
        data-gtmc="header link" aria-describedby="importedby-description">
       <span class="go-textSubtle">Imported by: </span>{{.Details.ImportedByCount}}
    </a>
  </span>
  <div class="screen-reader-only" id="importedby-description" hidden>
    Opens a new window with list of known importers.
  </div>
{{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>
    <a class="UnitHeader-backLink" href="{{.URLPath}}" data-gtmc="header link">
      <img class="go-Icon" height="24" width="24" src="/static/shared/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/shared/icon/info_gm_grey_24dp.svg"
        alt="Notice"
      />&nbsp; Redirected from <span data-test-id="redirected-banner-text">{{.}}</span>.
    </div>
  {{- end -}}
   {{- with $vs := .Vulns -}}
      {{if eq (len $vs) 1}}
        <div>{{template "vuln-message" (index $vs 0)}}</div>
      {{else}}
        <details class="js-versionDetails">
            <summary class="go-Message go-Message--alert">
            <img
                class="go-Icon"
                height="24"
                width="24"
                src="/static/shared/icon/alert_gm_grey_24dp.svg"
                alt="Alert"
            />&nbsp;
            Affected by <a href="/vuln/{{(index $vs 0).ID}}">{{(index $vs 0).ID}}</a>
            {{with $more := subtract (len $vs) 1}} and {{$more}} other vulnerabilities{{end}}
          </summary>
          <div>
            {{range .}}{{template "vuln-message" .}}{{end}}
          </div>
        </details>
    {{end}}
  {{- end -}}
  {{- if .Unit.Deprecated -}}
    <div class="go-Message go-Message--warning">
      <img
        class="go-Icon"
        height="24"
        width="24"
        src="/static/shared/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/shared/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/shared/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/shared/icon/alert_gm_grey_24dp.svg" alt="Warning">
    </summary>
    <p>{{.}}</p>
  </details>
{{end}}