docs-v2/layouts/api/list.html

{{/* API Documentation Layout
  Two modes:
  1. Section index (no 'tag' param) - lists tag pages from article data
  2. Tag page (has 'tag' param) - shows operations via Hugo-native templates
  Conceptual pages (isConceptual: true) show content without operations.
*/}}

<!-- USING_API_LIST_HTML_TEMPLATE -->
{{ partial "header.html" . }} {{ partial "topnav.html" . }}

<div class="page-wrapper">
  {{ partial "sidebar.html" . }}

  <div class="content-wrapper api-content">
    <div class="api-main">
      <article class="article article--content api-reference" role="main">
        <header class="article--header">
          <h1 class="article--title">{{ .Title }}</h1>
          {{/* Only show description in header for section index pages */}}
          {{ if not (isset .Params "tag") }}
            {{ with .Description }}
            <p class="article--description">{{ . }}</p>
            {{ end }}
          {{ end }}
        </header>

        {{ $hasTag := isset .Params "tag" }}
        {{ if not $hasTag }}
        {{/* SECTION INDEX - Show intro content then tag-based children */}}

        {{ with .Content }}
        <section class="api-section-content">{{ . }}</section>
        {{ end }}
        {{ partial "api/section-children.html" . }}

        {{ else }}
        {{/* TAG PAGE - Show operations or conceptual content */}}
        {{ $isConceptual := .Params.isConceptual | default false }}
        {{ if $isConceptual }}
        <section class="api-conceptual-content">
          {{ with .Content }} {{ . }} {{ else }}
            {{ with .Params.tagDescription }}{{ . | markdownify }}{{ end }}
          {{ end }}
        </section>

        {{ else }}
        {{/* Operational Page - Show all operations */}}

        {{/* Download OpenAPI spec button — uses specDownloadPath from frontmatter */}}
        {{ with .Params.specDownloadPath }}
        <div class="api-spec-actions">
          <a href="{{ . }}" class="btn api-spec-download" download>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
              <path d="M8 12L3 7h3V2h4v5h3L8 12z"/>
              <path d="M1 14h14v2H1v-2z"/>
            </svg>
            Download OpenAPI Spec
          </a>
        </div>
        {{ end }}

        {{/* Hugo page content if any (for custom intro content) */}}
        {{ with .Content }}
        <section class="api-content-body">{{ . }}</section>
        {{ end }}

        {{/* Render operations using Hugo-native templates */}}
        {{ with .Params.staticFilePath }}
        <section class="api-operations-section">
          {{ partial "api/tag-renderer.html" $ }}
        </section>
        {{ end }} {{ end }} {{ end }} {{ partial "article/related.html" . }}
      </article>
    </div>

    {{/* ON THIS PAGE TOC - Generated from operations array */}} {{ $operations
    := .Params.operations }} {{ $hasTag := isset .Params "tag" }} {{
    $isConceptual := .Params.isConceptual | default false }} {{ if and $hasTag
    (not $isConceptual) }}
    <aside class="api-toc" data-component="api-toc">
      <h4 class="api-toc-header">ON THIS PAGE</h4>
      <nav class="api-toc-nav">
        {{/* Operation links - use Redocly anchor format: operation/{operationId} */}}
        {{ range $operations }} {{
        $anchor := printf "#operation/%s" .operationId }}
        <a
          href="{{ $anchor | safeURL }}"
          class="api-toc-link api-toc-link--operation"
        >
          <span
            class="api-method api-method--{{ lower .method }} api-method--small"
            >{{ upper .method }}</span
          >
          <span class="api-toc-summary"
            >{{ with .summary }}{{ . }}{{ else }}{{ .path }}{{ end }}</span
          >
        </a>
        {{ end }}
      </nav>
    </aside>
    {{ else }}
    <aside class="api-toc" data-component="api-toc">
      <h4 class="api-toc-header">ON THIS PAGE</h4>
      <nav class="api-toc-nav"></nav>
    </aside>
    {{ end }}
  </div>
</div>

{{ partial "footer.html" . }}

<style>
  /* API TOC styling */
  .api-toc {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 1rem;
    width: 280px;
    flex-shrink: 0;
  }

  .api-toc-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #545667;
    margin: 0 0 0.75rem 0;
  }

  .api-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .api-toc-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.85rem;
    color: #545667;
    text-decoration: none;
    border-radius: 4px;
    transition:
      background-color 0.15s,
      color 0.15s;
  }

  .api-toc-link:hover {
    background-color: rgba(0, 163, 255, 0.08);
    color: #00a3ff;
  }

  .api-toc-link--operation {
    /* Use default font for human-readable summaries */
  }

  .api-toc-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
  }

  /* Small method badges for TOC */
  .api-method--small {
    font-size: 0.65rem;
    padding: 0.125rem 0.375rem;
    flex-shrink: 0;
  }

  /* Dark mode */
  [data-theme='dark'] .api-toc-header,
  html:has(link[title='dark-theme']:not([disabled])) .api-toc-header {
    color: #9ea0a6;
  }

  [data-theme='dark'] .api-toc-link,
  html:has(link[title='dark-theme']:not([disabled])) .api-toc-link {
    color: #b4b6bc;
  }

  [data-theme='dark'] .api-toc-link:hover,
  html:has(link[title='dark-theme']:not([disabled])) .api-toc-link:hover {
    background-color: rgba(0, 163, 255, 0.15);
    color: #00a3ff;
  }

  /* Responsive - hide TOC on smaller screens */
  @media (max-width: 1200px) {
    .api-toc {
      display: none;
    }
  }

</style>