I’ve been feeling like my home page wasn’t what I really wanted people’s first experience with my blog to be. I want people to be able to get a high-level overview of what I write about and what my interests are. I admire other blogs that just have a list of long-form articles, so I decided to update my home page to work similarly.

Check out my new home page at weidok.al

For anyone else using the Micro.blog Tiny Theme that wants to do the same, here is how I did it:

Instructions

Warning: Keep in mind that this is one of the more power microhooks in the Tiny Theme, so it may override other microhooks you have already set up

  • Make sure Tiny Theme is installed on the Plug-ins page
  • create a custom theme (or edit your existing custom theme if you already have one)
  • add the following page to your theme: layouts/partials/microhook-post-list.html
  • in that page, add the code below:
<div class="home h-feed">
  {{ $posts := where .Site.RegularPages "Type" "post" }}
  {{ $articles := where $posts "Title" "!=" "" }}
  
  {{ range $articles.GroupByDate "2006" }}
    <h2>{{ .Key }}</h2>
    <ul class="post-list">
      {{ range .Pages }}
        <li class="h-entry" style="padding: 0.5em 0;">
            <div style="display: flex;">
                <div class="post-meta" style="flex-shrink: 0; width: 60px; margin-right: 10px;">
                    <time class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
                        {{ .Date.Format "Jan 02" }}
                    </time>
                </div>
                <div style="flex-grow: 1; min-width: 0;">
                    <a href="{{ .Permalink }}" style="word-wrap: break-word; overflow-wrap: break-word;">{{ .Title }}</a>
                </div>
            </div>
        </li>
      {{ end }}
    </ul>
  {{ end }}
</div>
  • save the template

And voila! Just like that, you’ve updated your homepage to show a list of reverse chronological posts, but only showing long-form articles grouped by the year.