published on 18.09.2020

First of all, if you don’t know about data files, you may want to start reading from data files in hugo. This post is about a solution for a very particular problem. How can we use “group by” for the data from data files?

Let me clarify with an example. I was creating a single page Hugo theme for generating my Resume using data files. You can find the project here: Resume A4 or the blog post. So, we have a data file called experience.yaml:

- name: Software Developer
  company: Uber
  date: 2019 - Present

- name: Junior Software Developer
  company: Uber
  date: 10.2018 - Present

- name: Intern
  company: Netflix
  date: 11.2016 - 07.2017

We don’t want to add a new big heading for each position update in the same company. We want to add the company name for once and add positions under the company name. Just like how Linkedin groups “Experience” section in user profile. So, we need to group the first two items since both experiences come from the same company.

Now, this is how you can group data by a key in Hugo. The key in our example is “company”.

First, create a slice that contains all the unique names we need.

{{ $companies := slice }}
{{ range .Site.Data.experience }}
    {{ $companies = $companies | append .company }}
{{ end }}
{{ $companies = uniq $companies }}

Then, we need to create a nested loop. The outer loop should loop through the slice that contains unique names and the inner loop should loop through the data file with a where condition. Where “group-name” = “name-from-the-outer-loop”.

{{ range $companies }}
    {{ $company := . }}

    <h3 class="item-title">{{ $company }}</h3>
    {{ range where $.Site.Data.experience "company" $company }}
       {{ .name }} {{ .date }}
       {{ .details | markdownify }}
    {{ end }}
{{ end }}

Update: Even though the example above is correct and grouping works fine, I’ve found a flaw in my solution. When we group by company, we don’t consider the time. One may work for a company (X) for a while, had different titles, or roles then leave. Work somewhere else for a while. Then again, get a new job in that company X. This case must be very rare but still it might happen. Here is an example:

- company: Uber
  roles:
    - role: Data Scientist
      date: 10.2020 -  Present

- company: Google
  roles: 
    - role: Senior Software Developer
      details: > 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare sollicitudin fringilla.
        Aenean nec volutpat arcu. Maecenas quis tempus risus.
      date: "06.2019 - 10.2020"
    
    - role: Junior Software Developer
      date: 10.2018 - 06.2019

- company: Uber
  roles:
    - role: Driver
      date: 2017 - 10.2018
      details: Lorem ipsum dolor sit amet

When we group by company, we’ll group Uber roles too but we shouldn’t. That’s why I removed the grouping part from my project and entered roles as an array in the YAML file. Everything is simpler and better now. One key learning here, the structure we store the data really matters, even in small weekend projects like this.

You are reading the 16th of 19 episodes in Hugo.
Published on 18.09.2020 by Mert Bakır with commit 4cdd031.
hugo
#data.yml #hugo #static-site
Next episode:
Plotly & Hugo
published on 29.11.2020
edited on 05.12.2020

Plotly is a visualization library that allows us to write code in Python, R, or Julia and generates interactive graphs using Javascript. So, we don’t have to deal with Javascript. You can checkout Plotly gallery, there are interesting works. Anyway, last week, I’ve started learning …

published on 23.01.2021

Image processing may seem complicated at first but it’s actually easy and definitely worth implementing since it’ll help you decrease page load times. As you probably know, we don’t want to load raw images with huge sizes for small thumbnails or blog-posts. We want to load a small …

published on 24.01.2021

Some time ago, I wanted to display image galleries on my Hugo website and searched for Hugo themes for photography and gallery. I can’t say I find much. Then, I met with a javascript library called nanogallery2 which is using another javascript library as an image viewer lightbox2. In this …

published on 17.04.2022
edited on 02.05.2022

Önceki bölümde, markdown formatını LaTeX formatına dönüştürmek için kullanılan Pandoc yazılımından bahsetmiştik. Şimdi konuyu bir adım daha ileri taşıyıp ve bookdown’a geçiyoruz. Bookdown; Rmarkdown kullanarak teknik dökümanlar, kitaplar yazabilmemizi sağlayan, Yihui Xie tarafından yazılmış …

published on 10.04.2022

I’ve been using WSL-2 on Windows for over a year. It’s very useful because some Python packages are just a headache to install on Windows. Also, docker. It’s just better on Linux. Yet, WSL-2 can also be problematic. I remember trying a dual-boot setup when things just went way too …

published on 03.03.2022

In this post, I’ll share how to install geopandas and some other gis related packages on Windows. If you are on Mac or Linux you can probably just pip install those without any issue. I usually had to do a google search every time I wanted to install these packages on Windows environment. Of …

published on 19.02.2022

Önceki yazıda LaTeX kullanmanın avantajlarından ve zorluklarından bahsetmiştim, MS Word gibi WYSIWYG programlar ile karşılaştırıp tavsiyelerimi yazmıştım. Bu yazıda Pandoc yazılımı üzerine konuşacağız. Pandoc’un da yardımıyla LaTeX’in avantajlarını alıp zorluklarını biraz geri de …

published on 12.02.2022

LaTeX bir çeşit döküman hazırlama sistemidir, ancak çoğumuzun alıştığı arayüzlerin aksine bu döküman içerisinde kod yazar gibi bazı komutlar kullanırız. Daha sonra derleyici (compiler) bu dökümanı bizim tanımladığınız kurallara göre PDF’e dönüştürür. […] 1978 yılında, Donald Knuth TeX …

published on 02.01.2022

This post is for fellow students who is studying Operations Research with CPLEX. If you don’t know already, IBM offers free academic license for IBM ILOG CPLEX Optimization Studio. […] First, you have to register IBM Academic Initiative with your academic instituion issued email. (e.g. …