{{ define "overview" }}
{{ $pinned := where .Site.Pages "Params.pin" true }}
{{ $section := $pinned }}
{{ $section_title := "Pinned" }}

{{ if ne (len $pinned) 0}}
{{ else }}
{{ $section = where .Site.RegularPages "Section" "in" (slice "post") }}
{{ $section_title = "Popular posts" }}
{{ end }}
<div>
  <div class="position-relative">
    {{ with .Site.GetPage "/readme"  }}
    <div class="Box mt-4">
      <div class="Box-body p-4">
        <div class="d-flex flex-justify-between">
          <div class="text-mono text-small mb-3">
            <svg class="octicon octicon-octoface" viewBox="0 0 16 16" version="1.1" width="16" height="16">
              <path fill-rule="evenodd"
                d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z">
              </path>
              <path
                d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z">
              </path>
            </svg>
            README<span class="text-gray-light">.md</span>
          </div>
        </div>
        <article class="markdown-body entry-content container-lg f5">
          {{- .Content -}}
        </article>
      </div>
    </div>
    {{ end }}
    <div class="mt-4">
      <div class="js-pinned-items-reorder-container">
        <h2 class="f4 mb-2 text-normal">
          {{ $section_title }}
        </h2>
        <ol class="d-flex flex-wrap list-style-none gutter-condensed mb-4 js-pinned-items-reorder-list">
          {{ range (first 6 $section) }}
          <li class="col-12 col-md-6 col-lg-6 mb-3 d-flex flex-content-stretch">
            <div
              class="Box pinned-item-list-item d-flex p-3 width-full js-pinned-item-list-item public source reorderable sortable-button-item">
              <div class="pinned-item-list-item-content">
                <div class="d-flex width-full flex-items-center position-relative">
                  <svg class="octicon octicon-repo mr-2 text-gray flex-shrink-0" viewBox="0 0 16 16" version="1.1"
                    width="16" height="16">
                    <path fill-rule="evenodd"
                      d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z">
                    </path>
                  </svg>
                  <a class="text-bold flex-auto min-width-0" href="{{ .Permalink }}">
                    <span class="repo" title="{{ .Title }}">{{ .Title }}</span>
                  </a>
                </div>


                <div name="summary" class="pinned-item-desc text-gray text-small d-block mt-2 mb-3">
                  {{ .Summary | safeHTML }}
                </div>

                <p class="mb-0 f6 text-gray">
                  {{ with .Params.tags }}
                  {{ range $tag := (first 5 .) }}
                  <a href="{{ relURL (print "/tags/" . | urlize) }}" class="pinned-item-meta muted-link ">
                    <svg class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="16" height="16">
                      <path fill-rule="evenodd"
                        d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z">
                      </path>
                    </svg>
                    {{ $tag }}
                  </a>
                  {{ end }}
                  {{ end }}
                </p>
              </div>
            </div>
          </li>
          {{ end }}
        </ol>
      </div>
    </div>

    {{ $section := where .Site.RegularPages "Section" "in" (slice "post") }}
    <div class="mt-4 position-relative" id="contributions" data='[{{ range $index, $elem := $section }}
{
  "title": "{{ .Title }}",
  "link": "{{ .Permalink }}",
  "publishDate": "{{ .PublishDate.Format "2006-01-02 15:04:05" }}"
}{{ if ne $index (sub (len $section) 1) }},{{ end }}
{{ end }}]'>
      <div class="js-yearly-contributions">
        <div class="position-relative">
          <h2 class="f4 text-normal mb-2" id="posts-count"></h2>
          <div class="border py-2 graph-before-activity-overview">
            <div
              class="js-calendar-graph mx-md-2 mx-3 d-flex flex-column flex-items-end flex-xl-items-center overflow-hidden pt-1 is-graph-loading graph-canvas calendar-graph height-full text-center">
              <svg width="828" height="128" class="js-calendar-graph-svg">
                <g transform="translate(10, 20)" id="graph-svg">
                </g>
              </svg>
            </div>
            <div class="contrib-footer clearfix mt-1 mx-3 px-3 pb-1">
              <div class="float-left text-gray">
              </div>
              <div class="contrib-legend text-gray">
                Less
                <ul class="legend">
                  <li style="background-color: var(--color-calendar-graph-day-bg)"></li>
                  <li style="background-color: var(--color-calendar-graph-day-L1-bg)"></li>
                  <li style="background-color: var(--color-calendar-graph-day-L2-bg)"></li>
                  <li style="background-color: var(--color-calendar-graph-day-L3-bg)"></li>
                  <li style="background-color: var(--color-calendar-graph-day-L4-bg)"></li>
                </ul>
                More
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="activity-listing contribution-activity">
        <div class="d-none d-lg-block">
          <div class="js-profile-timeline-year-list bg-white float-right col-2 pl-5 is-placeholder"
            style="visibility: hidden; display: none; height: 210px;"></div>
          <div style="top: 74px; position: static;"
            class="js-profile-timeline-year-list bg-white js-sticky float-right col-2 pl-5">
            <ul class="filter-list small" id="year-list">
            </ul>
          </div>
        </div>

        <h2 class="f4 text-normal mt-4 mb-3">
          Post activity
        </h2>

        <div id="posts-activity">
        </div>
      </div>

    </div>

    <div id="pinned-items-modal-wrapper"></div>

  </div>
</div>


<div id="svg-tip" class="svg-tip svg-tip-one-line" style="pointer-events: none; display: none;">
</div>
{{ end }}