website/layouts/_default/stats.html

{{ define "main" }}
<!-- Adapted from Luke Harris https://www.lkhrs.com/ -->
{{ partial "header.html" . }}
<main class="container">
  <article class="row justify-content-center">
    {{ $scratch := newScratch }}
    {{ $posts := where site.RegularPages "Type" "blog" }}
    <!-- First Blog post -->
    {{ range last 1 $posts }}
      {{ $numYears := div (sub now.Unix .Date.Unix) 31536000 }}
      {{ $firstDate := .Date.Format "January 2, 2006"}}
      {{ $scratch.Set "firstDate" $firstDate}}
      {{ $scratch.Set "numYears" $numYears }}
    {{ end }}

    <!-- Latest Blog Post -->
    {{ range first 1 $posts }}
      {{ $latestDate := .Date.Format "January 2, 2006"}}
      {{ $scratch.Set "latestDate" $latestDate }}
    {{ end }}

    {{ $postCount := len $posts }}


    <p>
      My most recent blog post was written on <strong>{{ $scratch.Get "latestDate" }}</strong>
      with my first ever one written on <strong>{{ $scratch.Get "firstDate" }}</strong>.
      This means I've been publishing for <strong>{{ $scratch.Get "numYears"}} years</strong>!
      Over which I have written a total of <strong>{{ $postCount }}</strong> posts.
    </p>
    <div class="col-md-8">
      {{ .Content }}
      {{ $tags := .Site.Taxonomies.tags }}


      {{ $scratch.Set "longCount" 0 }}
      {{ range $posts }}
        <!-- Sum words for average calculation later -->
        {{ $scratch.Add "wordcount" .WordCount }}
        <!-- Find longest post -->
        {{ if ge .WordCount ($scratch.Get "longCount") }}
            {{ $scratch.Set "longestPost" . }}
            {{ $scratch.Set "longCount" .WordCount }}
        {{ end }}
      {{ end }}

      <!-- Most Popular tag -->
      {{ $mostPopularTag := index .Site.Taxonomies.tags.ByCount 0 }}


      {{ $wordCount := $scratch.Get "wordcount" }}
      {{ $avgPostLength := div $wordCount $postCount }}
      <table class="table">
        <tr>
          <td width="40%">Total Words Written</td>
          <td width="60%">{{ $wordCount | lang.FormatNumberCustom 0 }}</td>
        </tr>
        <tr>
          <td>Average Words per Post</td>
          <td>{{ $avgPostLength | lang.FormatNumberCustom 0 }}</td>
        </tr>
        <tr>
          <td>Number of Topics</td>
          <td>{{ len $tags | lang.FormatNumberCustom 0 }}</td>
        </tr>
        <tr>
          <td>Most Popular Topic</td>
          <td>
             {{ with $mostPopularTag }}
                <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> with {{ .Count }} posts
             {{ end }}
          </td>
        </tr>
        <tr>
          <td>Longest Post Published</td>
          <td>
            {{ with $scratch.Get "longestPost" }}
            <a href="{{ .Permalink }}">{{ .Title }}</a> with {{ .WordCount }} words
            {{ end }}
          </td>
        </tr>
        <tr>
          <td>Total Wikipedia Edits</td>
          <td>
            {{ $data := getJSON "https://en.wikipedia.org/w/api.php?action=query&list=users&ususers=BrandonRozek&usprop=editcount&format=json" }}
            {{ range first 1 $data.query.users }}
            {{ .editcount }}
            {{ end }}
          </td>
        </tr>
        <tr>
          <td>Total OpenStreetMap Edits</td>
          <td>
            {{ $data := getJSON "https://api.openstreetmap.org/api/0.6/user/16068861.json" }}
            {{ $data.user.changesets.count }}
          </td>
        </tr>

      </table>

      {{ $grouped := $posts.GroupByDate "2006" }}

      <h2 class="post-stats-hd">Posts Per Year</h2>

      <div style="width: 100%;height: 300px;margin: 30px auto">
        <canvas id="yearchart"></canvas>
        <noscript>
            <table class="table">
                <tr>
                  <th width="30%">Year</td>
                  <th width="70%">Number of Posts</td>
                </tr>
                {{ range $grouped.Reverse }}
                {{ $yearPostCount := len (where .Pages "Type" "blog") }}
                <tr>
                  <td>{{ .Key }}</td>
                  <td>{{ $yearPostCount | lang.FormatNumberCustom 0 }}</td>
                </tr>
                {{ $scratch.Add "yearKeys" "'"  }}
                {{ $scratch.Add "yearKeys" .Key  }}
                {{ $scratch.Add "yearKeys" "',"  }}
                {{ $scratch.Add "yearCount" (string $yearPostCount) }}
                {{ $scratch.Add "yearCount" ","  }}
                {{ end }}
              </table>
        </noscript>
      </div>



      {{ $chartPre := "{type: 'line',data: {labels: [" }}
      {{ $chartYearKeys := trim ($scratch.Get "yearKeys") ","}}
      {{ $chartYearCount := trim ($scratch.Get "yearCount") ","}}
      {{ $chartMid := "],datasets: [{label: 'Posts Published',data: [" }}
      {{ $chartPost := "],backgroundColor: 'rgb(54, 128, 56)',borderColor: 'rgb(54, 128, 56)',borderWidth: 3}]},options: {maintainAspectRatio: false, animation: false, scales: {y: {ticks: {beginAtZero: true}}}}}"
      }}


      {{ $chartData := printf "%s" $chartPost | printf "%s%s" $chartYearCount | printf "%s%s" $chartMid | printf "%s%s" $chartYearKeys | printf "%s%s" $chartPre | printf "%s" }}
      <script src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js" type="text/javascript"></script>
      <script>
        var ctx = document.getElementById('yearchart').getContext('2d');
        var options = {{ $chartData | safeJS }};
        new Chart(ctx, options);
      </script>
    </div>
  </article>
</main>
{{ end }}