published on 18.09.2020
edited on 13.02.2021

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
- 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.

1
2
3
4
5
{{ $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”.

1
2
3
4
5
6
7
8
9
{{ 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
- 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.

You are reading the 16th of 19 episodes in Hugo.
Published on 18.09.2020 by Mert Bakır. Last update on 13.02.2021 with commit 7185dcc.
hugo
#data.yml #hugo #web-dev
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
edited on 11.06.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
edited on 11.06.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 29.08.2020

In Hugo and generally other static website generators, we are using data files to store data. These files can be in YAML, TOML, or JSON formats. You can always read more about data template in the original documentation. Yet, I want to give some examples from my blog. First of all, converting dates …

published on 22.08.2020

We talked about rendering dates and the last modification date in the last post. Now, we’ll look into how can we convert month names into another language? I’ve had a similar experience last year with jekyll. The idea is the same, we need to map each month to their version of the …

published on 31.12.2020
edited on 26.06.2021

I’ve, recently, published a blog post called Perfect Workflow for Publishing Python Notebooks. I talked about some of the benefits of using Rmarkdown and reticulate. In this post, I’ll try HTML widgets and explain how we can embed those in our blog post using nothing but R. […] 1 …

published on 05.12.2020

Resume A4 is a side project of mine. It’s one page Hugo Theme that allows you to write your resume in YAML format and keep track of it using git. Also, you can publish it online as a static site using GitLab, GitHub Pages, Netlify, or some other service you are familiar with. A few months …

published on 30.11.2020

I’ve been searching for a good workflow for publishing Jupyter or RMarkdown Notebooks as static blog posts. I think I’ve found the optimal solution for my use case. In this post, I’ll explain my workflow and why chose this way with examples. […] In reality my main purpose to …