This is now a standalone Micro.blog Plugin called Sidebar For Tiny Theme which adds support for this out of the box. The method documented below no longer works, but I'm keeping it here for posterity reason.

I’d though I’d write a little about how I added a sidebar with recommendations to my Tiny Theme’ed Micro.blog, for anyone else interested in doing likewise. For an example on how this looks, please see this post, or just go to the home page of this site.

I should say that I wrote this in the form of a Micro.blog plugin, just so that I can use a proper text editor. It’s not published at the time of this post, but you can find all the code on Github, and although the steps here are slightly different, they should still work using Micro.blog’s template designer.

I started by defining a new Hugo partial for the sidebar. This means that I can choose which page I want it to appear on without any copy-and-paste. You can do so by adding a new template with the name layouts/partials/sidebar.html, and pasting the following template:

<div class="sidebar">
    <div class="sidebar-cell">
        <header>
            <h1>Recommendations</h1>
        </header>
        <ul class="blogroll">
            {{ range .Site.Data.blogrolls.recommendations }}
                <li><a href="{{ .url }}">{{ .name }}: <span>{{ (urls.Parse .url).Hostname }}</span></a></li>
            {{ else }}
                <p>No recommendations yet.</p>
            {{ end }}
        </ul>
    </div>
</div>

This creates a sidebar with a single cell containing your Micro.blog recommendations. Down the line I’m hoping to add additional cells with things like shoutouts, etc. The styling is not defined for this yet though.

The sidebar is added to the page using Tiny Theme’s microhooks customisation feature. I set the microhook-after-post-list.html hook to the following HTML to include the sidebar on the post list:

{{ partial "sidebar.html" . }}

In theory it should be possible to add it to the other pages just by adding the same HTML snippet to the other microhooks (go for the “after” ones). I haven’t tried it myself though so I’m not sure how this will look.

Finally, there’s the styling. I added the following CSS which will make the page slightly wider and place the sidebar to the right side of the page:

@media (min-width: 776px) {
    body:has(div.sidebar) {
        max-width: 50em;
    }

    div.wrapper:has(div.sidebar) {
        display: grid;
        grid-template-columns: minmax(20em,35em) 15em;
        column-gap: 60px;
    }
}

div.sidebar {
    font-size: 0.9em;
    line-height: 1.8;
}

@media (max-width: 775px) {
    div.sidebar {
        display: none;
    }
}

div.sidebar header {
    margin-bottom: 0;
}

div.sidebar header h1 {
    font-size: 1.0em;
    color: var(--accent1);
}

ul.blogroll {
  padding-inline: 0;
}

ul.blogroll li {  
  list-style-type: none !important;
}

ul.blogroll li a {
  text-decoration: none;
  color: var(--text);
}

ul.blogroll li a span {
  color: var(--accent2);
}

This CSS uses the style variables defined by Tiny Theme so they should match the colour scheme of your blog. A page with a sidebar is also wider than one without it. It doesn’t change with width of pages that don’t have the sidebar (if this isn’t your cup of tea, you can remove the :has(div.sidebar) selector off the body tag) and the sidebar will not appear on small screens, like a phone in portrait orientation. I’m not entirely sure if I like this, and I may eventually make changes. But it’s fine for now.

So that’s how the sidebar was added. More to come as I tinker with this down the line.