{{/* Group word counts per month */}}
{{ $monthly := dict }}
{{ range .Site.RegularPages }}
  {{ $month := .Date.Format "2006-01" }}
  {{ $count := .WordCount }}
  {{ with index $monthly $month }}
    {{ $monthly = merge $monthly (dict $month (add . $count)) }}
  {{ else }}
    {{ $monthly = merge $monthly (dict $month $count) }}
  {{ end }}
{{ end }}

{{/* Sort months */}}
{{ $months := slice }}
{{ range $month, $_ := $monthly }}
  {{ $months = $months | append $month }}
{{ end }}
{{ $months = sort $months }}

{{/* Find max value */}}
{{ $max := 0 }}
{{ range $month := $months }}
  {{ $val := index $monthly $month }}
  {{ if gt $val $max }}{{ $max = $val }}{{ end }}
{{ end }}

<div class="flex items-end justify-end h-[300px] gap-2 px-4
    text-size-xs w-full overflow-x-auto box-border">
  {{ range $month := $months }}
    {{ $val := index $monthly $month }}
    {{ $height := mul (div (float $val) (float $max)) 100 }}
    {{ $opacity := add 0.5 (div $height 200) }}
    <div class="flex flex-col justify-center">
        <div class="flex flex-col items-center justify-end
            w-4 gap-1 h-[200px] relative">
          <div class="text-size-[0.65rem]"
              style="writing-mode: vertical-rl;">{{ $val }}</div>
          <div class="w-full bg-gray-900 flex-shrink-0 transition dark:invert"
               style="height: {{ printf "%.1f" $height }}%;
                      background-color: rgba(20,20,20,{{ printf "%.2f" $opacity }});"></div>
        </div>
        <div class="h-12 text-center flex-shrink"
            style="writing-mode: vertical-rl;">{{ $month }}</div>
    </div>
  {{ end }}
</div>