content/static/styleguide/styleguide.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>Style Guide · pkg.go.dev</title>{{end}}

{{define "main-styles"}}
  <link href="/static/styleguide/styleguide.css" rel="stylesheet">
{{end}}

{{define "main-scripts"}}
  <script type="module">
    loadScript("/static/styleguide/styleguide.js", {async: true})
  </script>
{{end}}

{{define "main-banner"}}
  <div class="go-Message go-Message--notice">
    <img class="go-Icon" height="24" width="24" src="/static/_icon/info_gm_grey_24dp.svg" alt="Notice">&nbsp;
    Work in progess.
  </div>
{{end}}

{{define "main-header"}}
  <nav class="go-Main-headerBreadcrumb go-Breadcrumb" aria-label="Breadcrumb">
    <ol>
      <li><a href="/" data-gtmc="breadcrumb link">Discover Packages</a></li>
      <li>
        <a href="#breadcrumb" data-gtmc="breadcrumb link" aria-current="location">Style Guide</a>
      </li>
    </ol>
  </nav>
  <div class="go-Main-headerContent">
    <div class="go-Main-headerTitle">
      <a class="go-Main-headerLogo" href="https://go.dev/" aria-hidden="true" tabindex="-1" data-gtmc="header link"
          aria-label="Link to Go Homepage">
        <img height="78" width="207" src="/static/_logo/go-blue.svg" alt="Go">
      </a>
      <h1 class="go-Main-headerTitle">Style Guide</h1>
    </div>
    <div class="go-Main-headerDetails">
      <fieldset class="go-Main-headerDetailItem go-Label go-Label--inline MainHeader-toggle">
        <legend>Theme</legend>
        <div class="go-InputGroup">
          <button class="go-Button go-Button--inverted js-toggleTheme" data-value="light" title="Light"
              aria-label="Set light theme">
            <img class="go-Icon" height="24" width="24" src="/static/_icon/light_mode_gm_grey_24dp.svg"
                alt="">
          </button>
          <button class="go-Button go-Button--inverted js-toggleTheme" data-value="dark" title="Dark"
              aria-label="Set dark theme">
            <img class="go-Icon" height="24" width="24" alt=""
              src="/static/_icon/brightness_2_gm_grey_24dp.svg">
          </button>
        </div>
      </fieldset>
      <fieldset class="go-Main-headerDetailItem go-Label go-Label--inline MainHeader-toggle">
        <legend>Layout</legend>
        <div class="go-InputGroup">
          <button class="go-Button go-Button--inverted js-toggleLayout" data-value="responsive"
              title="Responsive" aria-label="Set responsive layout">
            <img class="go-Icon" height="24" width="24" src="/static/_icon/responsive_layout_gm_grey_24dp.svg"
                alt="">
          </button>
          <button class="go-Button go-Button--inverted js-toggleLayout" data-value="stacked"
              title="Stacked" aria-label="Set stacked layout">
            <img class="go-Icon" height="24" width="24" src="/static/_icon/table_rows_gm_grey_24dp.svg"
                alt="">
          </button>
          <button class="go-Button go-Button--inverted js-toggleLayout" data-value="compact"
              title="Compact" aria-label="Set compact layout">
            <img class="go-Icon" height="24" width="24" src="/static/_icon/toolbar_gm_grey_24dp.svg"
                alt="">
          </button>
        </div>
      </fieldset>
    </div>
  </div>
{{end}}

{{define "main-nav"}}
  <div class="go-Main-navDesktop">
    {{template "tree-nav" .Outline}}
  </div>
  <div class="go-Main-navMobile js-mainNavMobile">
    <!-- Generated -->
  </div>
{{end}}

{{define "main-content"}}
  <div class="StyleGuide">
    {{range .Sections}}
      <section class="{{.Title}}">
        {{.Content}}
      </section>
    {{end}}
  </div>
{{end}}

{{define "main-aside"}}
  <div class="UnitMeta">
    <h2 class="go-textLabel UnitMeta-detailsTitle">Details</h2>
    <ul class="UnitMeta-details">
      <li>
        <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
          <summary>
            <img class="go-Icon" src="/static/_icon/check_circle_gm_grey_24dp.svg" alt="checked"
                height="24" width="24">
            Valid <a href="https://github.com/example.com/module/tree/v1.0.0/go.mod" target="_blank"
                rel="noreferrer">go.mod</a> file
            <img class="go-Icon" src="/static/_icon/help_gm_grey_24dp.svg" alt="" height="24"
                width="24">
          </summary>
          <p>
            The Go module system was introduced in Go 1.11 and is the official dependency management
            solution for Go.
          </p>
        </details>
      </li>
      <li>
        <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
          <summary>
            <img class="go-Icon" src="/static/_icon/check_circle_gm_grey_24dp.svg" alt="checked"
                height="24" width="24">
            Redistributable license
            <img class="go-Icon" src="/static/_icon/help_gm_grey_24dp.svg" alt="" height="24"
                width="24">
          </summary>
          <p>
            Redistributable licenses place minimal restrictions on how software can be used,
            modified, and redistributed.
          </p>
        </details>
      </li>
      <li>
        <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
          <summary>
            <img class="go-Icon" src="/static/_icon/check_circle_gm_grey_24dp.svg" alt="checked"
                height="24" width="24">
            Tagged version
            <img class="go-Icon" src="/static/_icon/help_gm_grey_24dp.svg" alt="" height="24"
                width="24">
          </summary>
          <p>Modules with tagged versions give importers more predictable builds.</p>
        </details>
      </li>
      <li>
        <details class="go-Tooltip js-tooltip" data-gtmc="tooltip">
          <summary>
            <img class="go-Icon" src="/static/_icon/check_circle_gm_grey_24dp.svg" alt="checked"
                height="24" width="24">
            Stable version
            <img class="go-Icon" src="/static/_icon/help_gm_grey_24dp.svg" alt="" height="24"
                width="24">
          </summary>
          <p>When a project reaches major version v1 it is considered stable.</p>
        </details>
      </li>
    </ul>
    <div class="UnitMeta-learn">
      <a href="https://go.dev/about#best-practices-h2">Learn more</a>
    </div>
    <h2 class="go-textLabel">Repository</h2>
    <div class="UnitMeta-repo">
      <a href="https://github.com/example.com/module" title="https://github.com/example.com/module"
          target="_blank" rel="noopener">
        github.com/example.com/module
      </a>
    </div>
  </div>
{{end}}

{{define "main-footer"}}

{{end}}