docs/themes/geekboot/layouts/partials/single-list.html

  <div class="bd-layout docs-container">
    <aside class="bd-sidebar">
      <div class="offcanvas-lg offcanvas-start bd-sidebar-container" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
        <div class="offcanvas-header pb-4 border-bottom">
          <div class="d-flex offcanvas-title fw-bold" id="bdNavbarOffcanvasLabel">
            Crossplane Documentation -
            {{- if $.Param "docs" -}}
            {{ if ne .Page.Params.version "master" }} v{{ end}}{{.Page.Params.version}}
            {{- else }}
             {{.Page.Params.product }}
            {{ end }}
          </div>
          <div class="d-flex"><button type="button" class="btn-close bi align-self-center p-0" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button></div>
        </div>
        {{ partial "left-nav" . }}
    </aside>

    <main class="bd-main order-1">
      <div class="bd-intro pt-2 ps-lg-2">
        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
          <div class="mb-3 mb-md-0 d-flex">
            {{ if $.Param "docs" }}
              {{ partial "version-dropdown-menu" . }}
            {{ end }}
          </div>
          <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}
            {{ if eq .Page.Title "Release Notes" }}
              {{ with .OutputFormats.Get "rss" -}}
                <a href="{{.Permalink}}"><svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" class="rss-icon" viewBox="0 0 448 512"><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg></a>
              {{ end }}
            {{ end }}
          </h1>
        </div>
        {{ if .Page.Params.state }}
          {{ partial "feature-state-alert" . }}
        {{ end }}
        {{ if .Page.Params.ga }}
          {{ partial "ga-tag" . }}
        {{ end }}
      </div>


        <div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5">
          {{ if (ne .Page.Params.toc false) }}
          {{ if gt (len .TableOfContents) 40 }}
            <button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
              On this page
              <svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
            </button>
            <strong class="d-none d-md-block h6 my-2">On this page</strong>
            <hr class="d-none d-md-block my-2">
            <div class="collapse bd-toc-collapse" id="tocContents">
              {{ .TableOfContents }}
              <nav class="pt-3">
                <div class="pb-2">
                  <svg class="bi" width="1em" height="1em"><use xlink:href="#pencil-square"/></svg>
                  <span class="ps-1"><a target="_blank" href="{{printf "https://github.com/crossplane/docs/issues/new?title=[Web Bug] - %s&body=<!-- What's the problem? -->\n\n\nURL: %s" .Page.Title .Permalink}}">Report a problem</a></span>
                </div>
                <div>
                  <svg class="bi" width="1em" height="1em"><use xlink:href="#github"/></svg>
                  <span class="ps-1"><a href="{{printf "https://github.com/crossplane/docs/tree/master/content/%s" .Page.File}}">View page source</a></span>
                </div>
              </div>
            </nav>
          {{ end }}

        </div>
      {{ end }}

        <div class="bd-content ps-lg-2 DocSearch-content">
          {{ if $.Param "docs" }}
            {{ $pageVer := .Page.Params.version | default .Site.Params.latest }}

            {{- if eq .Page.Params.version "master" -}}
              {{ partialCached "master-version-alert" . }}
            {{- else if ne $pageVer .Site.Params.latest -}}
              {{ partialCached "old-version-alert" . .Section }}
            {{ end }}
          {{ end }}

          {{ if eq $.Params.Product "Release Notes" }}
            {{ range .Pages.Reverse }}
              {{ if ne .Title "Docs Changelog" }}
                {{ if not .Page.Params.released }}
                  {{ errorf (printf "Release Notes Page %q requires 'released' Front Matter." .Page.File.Path ) }}
                {{ end }}
                {{ if not .Title }}
                  {{ errorf (printf "Release Notes Page %q requires 'title' Front Matter." .Page.File.Path ) }}
                {{ end }}
              <div class="rn-container pb-3">
                <h2 class="rn-title">{{ .Title}}</h2>

                <div class="rn-summary-meta">
                  Released: {{ .Page.Params.released }} -
                  <a href="https://github.com/crossplane/crossplane/releases/tag/{{.Title}}">GitHub</a>
                </div>

                <div class="rn-body ps-3">
                {{ .Summary | markdownify }}
                <a href="{{.Permalink}}">Full {{.Title}} release notes</a>
                </div>
              </div>
              {{ end }}
            {{ end }}
          {{ else }}
            {{ .Content }}
          {{ end }}
        </div>
    </main>
  </div>

  {{ if .Page.Store.Get "hasMermaid" }}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="module">

  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
  document.addEventListener("DOMContentLoaded", setMermaidStyle());
  document.addEventListener("DOMContentLoaded", colorModeListener());

  function getMermaidConfig(){
    var style = getComputedStyle(document.body)
    var font = style.getPropertyValue("font-family")
    var fontColor = style.getPropertyValue('--body-font-color')
    var backgroundColor = style.getPropertyValue('--body-background')

    var config = {
      "theme": "base",
      "fontFamily": font,
      "themeVariables": {
        "background": backgroundColor,
        "textColor": fontColor,
        }
    }

    return config
  }

  function setMermaidStyle(){
    var config = getMermaidConfig()
    mermaid.initialize( config )
  }

  function colorModeListener(){
    darkSwitch.addEventListener("click", resetMermaidStyle())
  }

  function resetMermaidStyle(){
    console.log("resetting")

    var config = getMermaidConfig()
    console.log(config)
    mermaid.mermaidAPI.setConfig( config )
    mermaid.mermaidAPI.reset()

  }

</script>
{{ end }}