Intro

I’ve been putting in some time “Indiewebifying” my Hugo theme, which started as a fork of the Solar theme by Bake. It’s slowly becoming more and more of my own. I’m not much of a front end developer so I’ve keep most of the basic CSS, removing only small bits and adding things where needed to fit my needs. This little post is just to remind me of what I’ve been doing, if you would like to know more just ask.

An IndieWeb Post

The first portion of getting the theme updated for the IndieWeb involved adding to the HTML markup to include h-entry. This adds a nice structure to the posts that is machine readable. This is really just adding specific classes to your HTML elements. So your post template might look something like the following:

<article class="post h-entry">
  <h1 class="post-title p-name" itemprop="name headline">
    <a class="u-url" href="{{ .Permalink }}">{{ .Title }}</a> {{ if .Draft
    }}(Draft){{ end }}
  </h1>

  {{ if .Params.cover_image }}
  <div class="image">
    <img src="{{ .Params.cover_image }}" />
  </div>
  {{ end }}
  <div class="post-content e-content" itemprop="articleBody">
    {{ .Content | safeHTML }}
  </div>

  <p class="meta">
    Posted on
    <span class="postdate"
      ><time class="dt-published"
        >{{ .Site.Params.DateForm | default "Jan 2, 2006" | .Date.Format
        }}</time
      ></span
    >
    {{ if .Params.author }} {{ with index .Site.Data.authors .Params.author }}
    by
    <span class="p-author h-card"
      ><a href="{{ .link }}">{{ .name }}</a>
      <img class="u-photo avatar" style="display: none;" src="{{ .photo }}" />
    </span>
    {{ end }} {{ end }}
  </p>
</article>

Alright maybe it’s not adding too much to the page. If I were to add full Schema.org JSON-LD as well we’d worry more about the page size.

Syndication

One other aspect of the IndieWeb is the idea that you are posting your content in multiple locations. This syndication is include in the post with a relatively straight forward partial.

{{ if isset $.Params "syndication" }}
    {{ $synLen := len $.Params.syndication }}
    {{ if gt $synLen 0 }}
        <p>Syndicated to:</p>
        <div class="syndication">
        {{ range $k, $v := $.Params.syndication }}<a class="post__syn btn u-syndication syn-link" rel="syndication" href="{{ . }}">{{ . }}</a></br>
    {{ end }}
        </div>
    {{ end }}
{{ end }}

This will loop through any syndicated links found in the posts frontmatter and write the link to the page under the current post.

Webmentions

I’ve already written a bit about adding webmentions to sites and this advice works for Hugo. I didn’t happen to note who wrote the JavaScript that takes care of fetching mentions sadly. I did track down a similar script in a gist from Nooshu so maybe that’s that.

Post Types

One of the departures from Solar is that I’m working on having different post types, either microblog style notes or full on blog posts. I need to break out the code a little bit though as right now the code is just rendered slightly differently depending on post type. I want to take each and move them into individual partials. I’ve just updated the code to implement a proper h-feed. An example of how the feed might look can be found on Monocle

{{ define "main" }}
<main class="h-feed">
  {{ range .Paginator.Pages }} {{ if eq .Type "posts" }}
  <article class="post h-entry">
    {{ if .Params.cover_image }}
    <a href="{{ .Permalink }}"><img src="{{ .Params.cover_image }}" /></a>
    {{ end }}
    <h1 class="p-name">
      <a class="u-url" href="{{ .Permalink }}">{{ .Title }}</a> {{ if .Draft
      }}(Draft){{ end }}
    </h1>

    <div class="post-content">
      <p class="e-content">
        {{ .Summary | plainify | safeHTML }} {{ if .Truncated }} … {{ end }}
      </p>
    </div>

    <p class="meta">
      Posted on
      <span class="postdate"
        >{{ .Site.Params.DateForm | default "Jan 2, 2006 " | .Date.Format
        }}</span
      >
    </p>
  </article>
  {{ end }} {{ if eq .Type "notes" }}
  <article class="note h-entry">
    {{ if .Params.cover_image }}
    <a href="{{ .Permalink }}"><img src="{{ .Params.cover_image }}" /></a>
    {{ end }}

    <div class="note-content">
      <p class="p-content">
        {{ .Summary | plainify | safeHTML }} {{ if .Truncated }} … {{ end }}
      </p>
    </div>

    <p class="meta">
      Posted on
      <a href="{{ .Permalink }}"
        ><span class="postdate dt-published"
          >{{ .Site.Params.DateForm | default "Jan 2, 2006 " | .Date.Format
          }}</span
        ></a
      >
    </p>
  </article>
  {{ end }} {{ end }} {{ partial "pagination.html" . }}
</main>
{{ end }}

Meanwhile, the core single.html partial is currently used for both post types, I will want to change that too so I can style the posts slightly differently.

CSS

As I mentioned I have been staying away from the CSS with the exception of removing styling and setting some defaults that fit what I’d like more. I need to go through the SCSS and make sure that each of the class names follow a similar pattern as I’ve borrowed some CSS from various sources with wildly different name styles. For instance I have post-content and post__tags. I’ll probably stick with kebab-case.

The Future

I have a bunch more work to do on the theme to tidy it up then I might release it publicly. I suppose the world could use another IndieWeb compatible theme.

Enjoy this post?
How about buying me a coffee?