refactor: design and minor changes

.forestry/front_matter/templates/blog-post.yml

----
-label: Blog post
-hide_body: false
-fields:
-- type: text
-  name: title
-  label: title
-- type: text
-  name: author
-  label: author
-- type: text
-  name: type
-  label: type
-- type: datetime
-  name: date
-  label: date
-- type: text
-  name: url
-  label: url
-- type: list
-  name: categories
-  label: categories
-- type: list
-  name: tags
-  label: tags
-pages:
-- content/blog/deep-work-a-summary.md

.forestry/settings.yml

----
-new_page_extension: md
-auto_deploy: false
-admin_path: 
-webhook_url: 
-sections:
-- type: directory
-  path: content
-  label: Pages
-  create: all
-  match: "*"
-- type: directory
-  path: content/blog_list
-  label: Blog list
-  create: all
-  match: "**/*"
-- type: directory
-  path: content/blog
-  label: Blog
-  create: all
-  match: "**/*"
-- type: directory
-  path: content/search
-  label: Search
-  create: all
-  match: "**/*"
-- type: directory
-  path: content/wp-content
-  label: Wp content
-  create: all
-  match: "**/*"
-upload_dir: static/uploads
-public_path: "/uploads"
-front_matter_path: ''
-use_front_matter_path: false
-file_template: ":filename:"
-build:
-  preview_command: hugo -E -F -D -b $DEPLOY_URL -d public
-  publish_command: hugo -d public
-  preview_env:
-  - HUGO_ENV=staging
-  - HUGO_VERSION=0.55.2
-  publish_env:
-  - HUGO_ENV=production
-  - HUGO_VERSION=0.55.2
-  preview_output_directory: public
-  output_directory: public
-  instant_preview_command: hugo server -D -E -F --port 8080 --bind 0.0.0.0 --renderToDisk
-    -d public
-version: 0.55.2

assets/css/custom.css

   --dark-mode-toggle-light-icon: url("/wp-content/moon.png");
 }
 
-body.light {
-  background: #fffcf5;
-}
 
-@media screen and (min-width: 1615px) {
-  #disqus_thread{
-    position: absolute; 
-    top:50px;
-    right: 10px;
-    width: calc(100rem - 75rem);
-  }
+@font-face {
+  font-family: 'Inter';
+  font-display: auto;
+  font-style:  normal;
+  font-weight: 400;
+  src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Regular.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-display: auto;
+  font-style:  normal;
+  font-weight: 500;
+  src: url("https://rsms.me/inter/font-files/Inter-Medium.woff2") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Medium.woff") format("woff");
 }
 
+body.light {
+  background: #ededed;
+}
+body.dark {
+  background: #222;
+}
 
-.hack, .hack blockquote, .hack code, .hack em, .hack h1, .hack h2, .hack h3, .hack h4, .hack h5, .hack h6, .hack strong {
+.hack code {
   font-family: 'Roboto Mono', monospace;
 }
+.hack, .hack blockquote, .hack em, .hack h1, .hack h2, .hack h3, .hack h4, .hack h5, .hack h6, .hack strong {
+  font-family: 'Inter', monospace;
+}
 
 .hack {
-  font-family: "Roboto Slab", serif;
+  font-family: "Inter", serif;
+  font-weight: 400;
+  text-align: justify;
 }
 
 a[rel*="external"]::after {
   color: #422eff;
   border-bottom: 1px solid #00ff9c;
 }
+.light pre {
+  border: none;
+  background: #222;
+  padding: 1rem;
+}
+.light pre code {
+  color: #00bcd4;
+}
 .dark a {
   color: rgb(82, 174, 255);
-  border-bottom: 1px solid rgb(0, 204, 125);
+  border-bottom: 1px solid rgb(15, 143, 94);
 }
 .light a:hover {
   color: #000;
 }
 .dark a:hover {
   color: #333;
-  background-color: #00ff9c;
+  background-color: rgb(15, 143, 94);
+}
+.dark pre {
+  background-color: #222;
+  padding: 1rem;
+}
+.dark table tbody td:first-child {
+  color: #ccc;
 }
 .muted, .help-block {
   opacity: 0.70;
 
 small {
   font-weight: 400;
+}
+
+a.no-underline {
+border: none;
+}
+
+.archive h1 {
+  display: grid;
+  grid-template-columns: 1fr minmax(min-content, auto);
+  column-gap: 20px;
+  grid-template-areas: "div div";
 }

config.toml

 
 [params.layout.menu.main]
   hidden = false # Optional, set false or remove to show section menu
-  exclude = ["search", "blog_list", "project_list"] # exclude homepage and blog postings
+  exclude = ["search", "archive", "project_list"] # exclude homepage and blog postings
 
 [[menu.main]]
   name = "Home"

content/about.md

-## About
+---
+title: "About"
+---
 
-### Work
+## Work
 I’m currently working as a Software Developer at
-<a class="no-underline text-grey-dark" href="https://zerodha.com/products">Zerodha Tech</a>
+[Zerodha Tech](https://zerodha.com/products)
 where I am writing Golang, Python and a bit of Javascript to
 build fintech products used at scale everyday. 
 
 via last mile automation. 
 
 I have 
-also worked remotely during my participation in Google Summer
-of Code in 2016 and contributed to the Open Source Apache 
+also worked remotely during my participation in [Google Summer
+of Code](/blog/2016/08/09/apache-allura-gsoc-2016-summary/) in 2016 and contributed to the Open Source Apache 
 Allura Project that powers SourceForge.com.
 
 Out of interest and curiosity, I have (little) experience with
 Nanodegree which I earned through a MOOC curated by Udacity
 which I undertook in the summer of 2017. 
 
-### Personal
+## Personal
 I am from New Delhi, India and am currently 
 based in Bengaluru, India. I write code for a living, 
 and often write code as a hobby, or to automate the 

content/archive/_index.md

++++
+title= "Blog Archive"
++++

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

 author = "Rohan Verma"
 +++
 
-I was on the hunt to find out how to organize my [blog](/blog_list) and 
+I was on the hunt to find out how to organize my [blog](/archive) 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
       {{end}}
       <tr>
         <td>{{.Date.Format "02 Jan"}}</td>
-        <td><a href="{{.Permalink}}">{{.Title}}</a></td>
+        <td><a class="no-underline" href="{{.Permalink}}">{{.Title}}</a></td>
       </tr>
       {{ $prev = .Date.Format "2006"}}
       {{end}}

content/blog/_index.md

 ---
 title: "Blogs"
-listing: "/blog_list"
+listing: "/archive"
 ---

content/blog_list/_index.md

-+++
-title= "Blog List"
-+++

content/project_list/_index.md

-+++
-title= "Project List"
-+++

layouts/_default/list.html

   {{ partial "masthead.html" . }}
 {{ end }}
 {{ define "main" }}
-  <header>
-    <h1>{{ .Title }} <small><a href="{{ .Params.listing  }}">Full Listing</a></small></h1>
+  <header class="archive">
+    <h1>
+    <div>{{ .Title }}</div>
+    <div>
+    <small>
+      <a href="{{ .Params.listing  }}">Archive</a>
+      <a href="/categories">Categories</a>
+      <a href="/tags">Tags</a>
+    </small>
+    </div>
+    </h1>
   </header>
   {{ range .Paginator.Pages }}
     {{ partial "page-summary.html" . }}

layouts/_default/terms.html

   <header>
     <h1>{{ .Title }}</h1>
   </header>
-  <ul>
-    {{ range $key, $value := .Data.Terms }}
-      <li><a href="{{ $key | urlize }}">{{ $key }}</a> ({{ len $value }})
-    {{ end }}
-  </ul>
+  <div style="text-align: justify;">
+  {{ range $key, $value := .Data.Terms }}
+    <a class="no-underline" style="margin-right:0.5rem;" href="{{ $key | urlize }}">{{ $key }}<sup>{{ len $value }}</sup></a>
+  {{ end }}
+  </div>
 {{ end }}
 {{ define "footer" }}
   {{ partial "powered-by.html" . }}

layouts/index.html

   </td></tr>
   </table>
 
-  <h2>Projects</h2>
+  <h2><a href="/blog">Blog</a></h2>
 
-  My latest sideproject is <a class="no-underline text-grey-dark" href="https://upi.link/">upi.link</a>, a small and nifty
-  programmable UPI shortlink generator. 
-  
-  <br><br>
-
-  Here is a list of my most recent projects:
-
-  <br><br>
-
-  {{ range first 10 .Site.Taxonomies.categories.projects }}
-      <li>
-        <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a>
-      </li>
-  {{ end }}
-
-  <br>
-
-  You can find all my projects at the <a href="project_list">project listing page</a>.
-
-  <br><br>
-
-  <h2>Blog</h2>
-
-  My blog is also available via <a href="/blog/index.xml">[RSS]</a>
-
-  <br><br>
-
-  You can read my <a class="no-underline text-grey-dark" href="/blog">blog</a> where 
-  I try to write about what I am doing and things I find interesting. 
-  I have organized my blog using categories
-  and tags. You can navigate the blog by using them, 
-  or if you prefer to view by date, you can visit
-  <a href="blog_list">the blog listing page</a>.
-  <br><br>
-
-  Here are the most recent blogs I wrote, 
-
-  <br><br>
+  I write about what I am doing and things I find interesting. 
 
+  <ul>
   {{ range first 10 .Site.RegularPages }}
     <li>
       <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a>
     </li>
   {{ end }}
+    <li>
+      <a href="/archive">more...</a>
+    </li>
+  </ul>
+
+  This blog is also available via <a href="/blog/index.xml">[RSS]</a>
 
   <br><br>
 
   <section>
-    <b><a href="/categories">categories</a></b>: <br>
+    <h3><a href="/categories">Categories</a></h3>
     {{range ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
-      <a href="{{.Permalink}}">{{lower .Title}}</a>
+      <a class="no-underline" style="margin-right:0.5rem;" href="{{.Permalink}}">{{lower .Title}}</a>
     {{end}}
     <br><br>
-    <b><a href="/tags">tags</a></b>: <br>
+    <h3><a href="/tags">Tags</a></h3>
     {{range ($.Site.GetPage "taxonomyTerm" "tags").Pages }}
-      <a href="{{.Permalink}}">{{lower .Title}}</a>
+      <a class="no-underline" style="margin-right:0.5rem;" href="{{.Permalink}}">{{lower .Title}}</a>
     {{end}}
   </section>
 
   <br>
+  <br>
+  <h2>Recent Projects</h2>
 
+  <ul>  
+  {{ range first 10 .Site.Taxonomies.categories.projects }}
+    <li>
+      <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a>
+    </li>
+  {{ end }}
+    <li>
+      <a href="/categories/projects">more...</a>
+    </li>
+  </ul>
 
 
 {{ end }}

layouts/partials/head/custom.html

-<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto+Slab:400,700" rel="stylesheet"> 
+<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet"> 
 <link rel="authorization_endpoint" href="https://indieauth.com/auth">
 <link rel="webmention" href="https://webmention.io/rohanverma.net/webmention" />
 <link rel="pingback" href="https://webmention.io/rohanverma.net/xmlrpc" />

layouts/partials/post/meta.html

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */ -}}
-<a style="margin-right:2px;" class="u-url" href="{{ .Permalink }}">
+<a style="margin-right:2px;" class="u-url no-underline" href="{{ .Permalink }}">
 <svg style="margin-bottom: -3px" class="i-external" viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
   <path d="M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18"></path>
 </svg>

layouts/section/blog_list.html → layouts/section/archive.html

       {{if .Date}}
       {{if gt $prev (.Date.Format "2006")}}
       {{ if ne $prev 3000}}
+        </tbody>
         </table>
       {{ end }}
-      <h2>{{ .Date.Format "2006" }}</h2>
       <table class="all-posts">
+      <col width="15%">
+      <col width="85%">
+      <thead>
+      <tr><td></td><td>{{ .Date.Format "2006" }}</td></tr>
+      </thead>
+      <tbody>
       {{end}}
       <tr>
-        <td>{{.Date.Format "02 Jan"}}</td>
+        <th>{{.Date.Format "02 Jan"}}</th>
         <td><a href="{{.Permalink}}">{{.Title}}</a></td>
       </tr>
       {{ $prev = .Date.Format "2006"}}

layouts/section/project_list.html

-{{ define "title" -}}
-  Project List | {{ .Site.Title }}
-{{- end }}
-{{ define "header" }}
-  {{ partial "masthead.html" . }}
-{{ end }}
-{{ define "main" }}
-  <header>
-    <h1>{{ .Title }}</h1>
-  </header>
-  
-  <section>
-    {{ $prev := 3000}}
-    {{range .Site.Taxonomies.categories.projects}} 
-      {{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 }}

netlify.toml

-[build]
-publish = "public"
-command = "hugo --gc --minify"
-
-[context.production.environment]
-HUGO_VERSION = "0.56.0"
-HUGO_ENV = "production"
-HUGO_ENABLEGITINFO = "true"
-
-[context.split1]
-command = "hugo --gc --minify --enableGitInfo"
-
-[context.split1.environment]
-HUGO_VERSION = "0.56.0"
-HUGO_ENV = "production"
-
-[context.deploy-preview]
-command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
-
-[context.deploy-preview.environment]
-HUGO_VERSION = "0.56.0"
-
-[context.branch-deploy]
-command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
-
-[context.branch-deploy.environment]
-HUGO_VERSION = "0.56.0"
-
-[context.next.environment]
-HUGO_ENABLEGITINFO = "true"
-