Configurable list of contacts

2020-10-20T20:38:24+08:00

Most themes offer quick social media links with site configuration. However, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.

To get around this, we’ll make use of data templates. Let’s create a quick game plan how does it work.

The data is a top-level dictionary/object with each key contains an object with the following fields.

url is the… contact link itself and it is required to have it.
name is the text to appear in the output. Also required to have.
weight is an integer similar to how Hugo sorts the pages with the lower weight having high precedence; if this key is absent, it will be interpreted as 0.

And here’s the data example in TOML which is placed in data/contact.toml.

[github]
    name = "GitHub"
    url = "https://github.com/foo-dogsquared"

[gitlab]
    name = "Gitlab"
    url = "https://gitlab.com/foo-dogsquared"

[keybase]
    name = "Keybase"
    url = "https://keybase.io/foo_dogsquared"
    weight = -1

[twitter]
    name = "Twitter"
    url = "https://twitter.com/foo_dogsquared"

I want my Keybase profile to appear first than anything else for whatever reason so the weight key is set to -1.

With this data, we can then create a template out of it. I’ve put the following template in a partial named contacts (i.e., layouts/partials/contacts).

<address>
{{- range (sort $.Site.Data.contacts "weight" "asc") -}}
| <a rel="me" href="{{ .url }}">{{- .name -}}</a> |
{{- end -}}
</address>

A suggestion (and an exercise) for extending this is to create image links. Maybe add another key named image that accepts either URL. The name would now be the image alternative text.

Creating an archive page

2020-10-20T20:36:55+08:00

This will add an archive page similar to archive pages like these.

{{- define "main" -}}

<h1>{{ .Title }}</h1>

{{ .Content }}

<hr>

{{- /* Creating a section that lists out regular pages by year */ -}}
{{ range $.Site.RegularPages.GroupByPublishDate "2006" }}
    {{- /* Skip regular pages with an invalid creation date string. */ -}}
    {{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter. */ -}}
    {{- /* We will also exclude hidden pages. */ -}}
    {{ if ne .Key "0001" }}
        <section data-year="{{ .Key }}">
            <h2 id="{{ .Key }}">{{ .Key }}</h2>
            <ul>
            {{- range where .Pages "Params.hidden" "!=" true -}}
                <li>
                    <date>{{ .Date.Format "2006-01-02" }}</date> -
                    <a aria-label="{{ .Title }}" href="{{ .Permalink }}">{{ .Title }}</a>
                </li>
            {{- end -}}
            </ul>
        </section>
    {{- end }}
{{ end }}

{{- end -}}

We will simply add this as a layout in our customized theme. Let’s call it archives so we have to add a file in layouts/_default/archives.html then set a page of our project with the layout key in the frontmatter.

We want the archives page to be accessed at $.Site.BaseURL/archives so we’ll simply create archives.adoc (any valid content files with certain file extensions can do, I’m using Asciidoctor) with the following example content.

---
title: "Archives"
layout: "archive"
---

= Archives

This is the archives of the century.

Recipes on More Contentful

Configurable list of contacts

Creating an archive page