Posts by month, again

    Just over a year ago, I strung together a bit of Hugo 'code' to display all my posts as a sparkline. Somewhere in the mists of time, I stopped doing that, but yesterday I decided I wanted to show all the types of content (sections) I had, and thought I'd add in sparklines. Going back to my code, which used partials, I couldn't get it to work so I did a bit of rewriting.

    After a bit of faffing around with the old code, I finally got it working the way I wanted it (more or less)

    Some sparklines

    Example of my sparklines

    I collapsed all the code into the file I use to display the contents of my Sections.

    First, I range over the .Site.Sections and do it .ByTitle. It took me a bit of time/trial-and-error to get that working, as I thought I could just use .Alphabetical — but I was wrong.

    Then, range over the posts by year, and in a dictionary, note how many entries there are (i.e., by month and year).

    Next, I build up a string of entries for the 20 + years * 12 months of the number of posts I have, and use some magic to display it as an .svg image.

    I have a file called sections.html which has this in it.

      {{ define "main" }}
        <div class="article-header"><h1>{{ humanize .Data.Plural }}</h1></div>
        <div class="article-content">
          <ul class="sparklines">
          {{ range $section, $taxonomy := .Site.Sections.ByTitle }}
              {{ $ThisSection := $taxonomy.Title }}
              {{ $master_list := dict "2021 10" 0 }}
              {{ range (($taxonomy.Pages).GroupByDate "y2006_01").Reverse  }}
                  {{ $my_year := .Key }} {{ $my_entries := len (.Pages.Reverse) }}
                  {{ $temp := dict $my_year $my_entries }}
                  {{ $master_list = merge  $temp $master_list}}
               {{ end }}
               {{ $StartYear := 2000 }}
               {{ $EndYear := now.Format "2006" }}
               {{ $MyList := "0" }}
               {{ $NewOne := "" }}
               {{ range $index, $year := (seq $StartYear $EndYear ) }}
                  {{ range $month := (seq 1 12) }}
                     {{ $key := (printf "y%d_%02d" $year $month) }}
                     {{ $entries := index $master_list $key }}
                     {{ if $entries }}
                        {{ $NewOne = $entries }}
                     {{ else }}
                        {{ $NewOne = "0" }}
                     {{ end }}
                     {{ $MyList = print $MyList ", " $NewOne }}
                   {{ end }}
                {{ end }}
              {{- $MyList = print "/images/sparkline.svg?" $MyList -}}
              <embed {{ printf "src=%q" ( replaceRE "(\\s)" "" $MyList ) | safeHTMLAttr }}  width="300" height="30">
                {{ len .Pages }} <a href="{{ .Permalink }}">{{ .Title }}</a> 
          {{ end }}
        <div class="article-nav"></div>
        <div class="article-meta"></div>
      {{ end }}

    Job done.

    Or maybe not. I feel I should make the code more flexible, reliable, and re-usable. But it's working right now.

    One thing I would like to do, if figure out the CSS I need so that the content, the white bit in the middle of the screenshot, was automagically big enough so that when I only had a little bit of content—as in this case—it would expand to fill the whole screen. That'll take some time to work out, so I'll put that on my to-do list too :)

    If you webmention this page, please let me know the URL of your page.

    BTW: Your webmention won't show up until I next "build" my site.

    Word count: 600 (about 3 minutes)


    Updated: 12 Dec '22 19:28

    Author: Peter Smith


    Section: blog

    Kind: page

    Bundle type: leaf

    Source: blog/2022/12/12/posts-by-month-again/