Leon Mika

Trying out the new audio narration feature for Micro.blog that Manton just announced. If you’re hearing me read these words out aloud, then I guess you could say that it’s working. I doubt that I’d do this for many of the posts I write here, even the long form ones. It’s not really conducive to how I write here: I’m hardly Ben Thompson. And I usually find myself having to take several takes just to record something decent (I’m already up to take seven or something).

But who knows? Maybe I’ll do it more often than I expect. And in either case, it’s nice to have the option.

Anyway, I suppose Matt will eventually release an update to Tiny Theme to support this properly. But to tide me over until then, I’ve added the following microhook to include a play button on the post byline:

<!-- layouts/partials/microhook-post-byline.html -->

<a href="{{ .Permalink }}" class="post-date u-url">
  <time class="dt-published" datetime="{{ .Date.Format "2006-01-02 15:04:05 -0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time> ∞
</a>
{{ if .Params.audio -}}
  {{ with .Params.audio -}}
   <span class="byline-separator"></span>
   <script type="text/javascript" src="https://micro.blog/narration.js?url={{ . }}"></script>
  {{ end }}
{{ end }}

I also add a bit of styling to add a nice bullet separator between that and the date:

span.byline-separator {
  display: inline-block;
}

span.byline-separator::after {
  content: "•";
  padding-left: 7px;
  padding-right: 3px;
  color: var(--accent2);
}

div.microblog_narration_button {
  color: var(--link);
}

(Oh, it looks like Manton has updated the Markdown parser to support code fences in the posts screens. That’s great.)

I will admit that it’s a bit of a rush job: I wanted to add this as quickly as possible. But I guess it’ll do until someone with better design skills improves on this.