Todos and stuff

Since I’m trying to make my own static site generator, I thought I’d configure Hugo to match what I want first, because I’m actually not sure exactly what I want the SSG to achieve. Then I’d go on and torture myself trying to port all this to BusyBox shell. And the first thing I thought of is to implement the planner / todo thing.

First thing I thought of is to just write them as a GFM task list in a separate page, like so;

- [x] first task
- [ ] second task
  - [ ] first sub task
  - [x] second sub task
- [x] first task
- [ ] first task

and they’d look like so;

  • first task
  • second task
    • first sub task
    • second sub task
  • first task
  • first task

But there were a couple of things I didn’t like about this; First is the bullets in the list items, I know I can just list-style: None; them, but I didn’t want to mess with the CSS. And I wanted the todo items to be recognized as instances of a class of some sort. Which brings me to the second point, is that I didn’t like how loose the structure is. I wanted a way to make the list as structured as possible.

Then I remembered the Projects section in the homepage. The template parses a JSON file in data directory and populates a list with the projects` names and urls. I looked for a way to do the same with a template file to generate a page from just the JSON file, but I was shocked to learn that Hugo doesn’t support that. The only quick and dirty options I had is to make a layout template and a page that calls that layout. Or to just make the tasks as another section, with the list layout and each task would have it’s own content file. I went with the first option since it’d give me at least a little amount of structure in the task items.

So here’s what I did, first I wrote a basic task list in the JSON data file data/todos.json;

{
  "list": [
    { "task": "New SSH key", "done": true },
    { "task": "New GPG key", "done": true },
    { "task": "Publish GPG key", "done": false },
    { "task": "Basic todo list implementation", "done": true },
    { "task": "Implement sub items in todo", "done": false },
    { "task": "Customize `todo-list` and `todo-item` styles", "done": false },
    { "task": "Implement todo urls", "done": false },
    { "task": "Start working on my static site generator", "done": false },
    { "task": "Document todo list implementation", "done": false }
  ]
}

Then I created layouts/_default/todos.html template file and copied a slightly modified version of projects section from the layouts/index.html template file;

{{ define "main" }}
  <section id="content">
  {{ .Content }}
  </section>

  <section id="todos">
    <span class="h1">Todos</span>
    <ul class="project-list">
    {{ range .Site.Data.todos.list }}
      <li class="project-item">
      {{ if .done }}
        <input checked="" disabled="" type="checkbox">
      {{else}}
        <input disabled="" type="checkbox">
      {{ end }}
        {{ .task | markdownify}}
      </li>
    {{end}}
    </ul>
  </section>
{{ end }}

This simply wraps the contents of the page that calls this layout with <section id="content"> and </section>, after rendering of course. And then it lists the todo list items and put a disabled checkbox with it’s state defined by the value of the key done. Finally, the markdown content file itself in content/todos.md;

---
title: "Todos"
layout: "todos"
---

Markdown content

Results of this modifications can be viewed in the Todos page. And the complete source code of this site is still available on GitLab

That’s it for now. Thanks and goodbye!