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 images in a better way on my Hugo website. I searched for existing Hugo themes for photography and gallery tags. Can’t say I find much. Then, I met a javascript library called nanogallery2 which is using another javascript library as an image viewer …

published on 10.07.2022

Previously, I’ve published a blog post about deploying static content on heroku with basic authentication. The main purpose was to get basic auth for a freely hosted static website. In that post, we hosted the source code on GitLab and configured a CI/CD pipeline to render the static content …

published on 28.05.2022

Each git commit has a field called Author which consists ‘user.name’ and ‘user.email’. We usually set these variables once, after installing git, with git config --global so that each repo gets the variables from the global definition. We can also set them locally for a …

published on 25.05.2022

In this post, I’ll first walk through hosting static content with basic authentication. Then, we’ll look into deploying to Heroku using GitLab Pipelines, more specifically deploying a certain sub-directory within the project instead of pushing the whole project. Also, I’ll share …

published on 17.04.2022
edited on 15.07.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 …