Shortcode

The Problem Embed Mastodon posts (toots) into Hugo content for context. The Solution Bryce Wray provides the code. But this didn’t look right on my PaperMod theme. So I tried something different. Put this into layouts/shortcodes/toot.html: And invoke like this: The Example Magnus Hedemark @[email protected] I haven’t been posting a lot on #Mastodon since diving into #Bluesky. One of the things I’ve been enjoying recently is getting more hands-on with #ESP32 & #ESPhome. I’m learning how to pull data from sensors and use attached displays. Also integrating with #HomeAssistant. This prototype is building up towards hacking a Big Mouth Billy Bass novelty toy. But I’d also like to build a really anachronistic digital instrument display for my vintage Harley-Davidson project motorcycle. #makers ...

Introduction Since I’m using AI to help me more quickly brain dump my non-linear thoughts into a more readable format, I thought it would sometimes be handy to display Open WebUI chats in Hugo sites. This is where the renderchat shortcode comes in. Installation To use the renderchat shortcode, you can do this by creating a file in your site, layouts/shortcodes/renderchat.html, and adding the following code: {{/* renderchat.html */}} {{ $file := .Get "file" }} {{ if eq $file "" }} <p>No chat log file specified.</p> {{ return }} {{ end }} {{ $jsonResource := .Page.Resources.GetMatch $file }} {{ if not $jsonResource }} <p>Could not find the chat log file: {{ $file }}</p> {{ return }} {{ end }} {{ $json := $jsonResource | transform.Unmarshal }} {{ if not $json }} <p>Failed to parse the chat log JSON file.</p> {{ return }} {{ end }} {{ range $json }} <div class="chat-log"> <h2 class="chat-title">{{ .title }}</h2> <div class="chat-messages"> {{ $messages := slice }} {{ range .chat.history.messages }} {{ $messages = $messages | append . }} {{ end }} <!-- Create a map of messages by ID --> {{ $messageMap := dict }} {{ range $messages }} {{ $messageMap = merge $messageMap (dict (printf "%s" .id) .) }} {{ end }} <!-- Render root messages --> {{ range (where $messages "parentId" "==" nil) }} {{ template "renderMessageWithChildren" dict "message" . "map" $messageMap }} {{ end }} </div> </div> {{ end }} {{/* Recursive template to render messages */}} {{ define "renderMessageWithChildren" }} {{ $message := .message }} {{ $map := .map }} <!-- Render current message --> <div class="chat-message {{ $message.role }}"> <strong>{{ if eq $message.role "user" }}User{{ else }}{{ $message.model }}{{ end }}:</strong> <div style="white-space: pre-wrap;">{{ $message.content }}</div> </div> <!-- Render children recursively --> {{ range $message.childrenIds }} {{ $child := index $map . }} {{ template "renderMessageWithChildren" dict "message" $child "map" $map }} {{ end }} {{ end }} Now we’ll need CSS code. My theme will load any CSS that I put in assets/css/extended/ so I added a file in there called renderchat.css. Here’s the CSS code for the chat log: ...