blog: hugo group by year

.gitignore

 $RECYCLE.BIN/
 
 # OSX
-.DS_Store
+.DS_Store
+
+.vscode

content/blog/2019/2019-11-15-hugo-group-by-year.md

++++
+title = "Creating archive pages grouped by year in Hugo"
+date = 2019-11-15T15:30:03+05:30
+draft = false
+tags = ["hugo", "blog", "golang"]
+categories = ["tutorials"]
+type = "post"
+url = "blog/2019/11/15/archive-pages-group-by-year-hugo"
+author = "Rohan Verma"
++++
+
+I was on the hunt to find out how to organize my [blog](/blog_list) and 
+[project](/project) archive pages by year in Hugo. After being unable to find 
+any easy solutions I decided I would sit down and write the go template to 
+render these pages myself. The idea was simple, iterate over the list divided
+by year into sub lists and render tables, but it turned out to be a bit tricky.
+
+Here is the template, hope it is useful for someone who wants to have a similar
+page.
+
+```html
+{{ define "title" -}}
+  Blog List | {{ .Site.Title }}
+{{- end }}
+{{ define "header" }}
+  {{ partial "masthead.html" . }}
+{{ end }}
+{{ define "main" }}
+  <header>
+    <h1>{{ .Title }}</h1>
+  </header>
+  
+  <section>
+    {{ $prev := 3000}}
+    {{range .Site.RegularPages}}
+      {{if .Date}}
+      {{if gt $prev (.Date.Format "2006")}}
+      {{ if ne $prev 3000}}
+        </table>
+      {{ end }}
+      <h2>{{ .Date.Format "2006" }}</h2>
+      <table class="all-posts">
+      {{end}}
+      <tr>
+        <td>{{.Date.Format "02 Jan"}}</td>
+        <td><a href="{{.Permalink}}">{{.Title}}</a></td>
+      </tr>
+      {{ $prev = .Date.Format "2006"}}
+      {{end}}
+    {{end}}
+  </table>    
+  </section>
+
+{{ end }}
+{{ define "footer" }}
+  {{ partial "powered-by.html" . }}
+{{ end }}
+```
+
+The above template loops through all the blogs (having a date) and renders 
+multiple tables
+which are grouped by the year. We render `h2` tags with the year if the previous
+year is greater than the current year. Followed 
+by a `<table>` tag having each next blog rendered as a row in the table. The 
+previous seen date is updated for the next iteration. In each iteration, before 
+rendering the table tag we check if the previous date was greater than the date 
+or`3000` (an arbitrarily high year) which we set as the previous seen year 
+before starting the loop, to decide if we want to close the table tag. In the
+next iteration, the previous year will be the same as the current year, and so
+we can continue to render rows.