Hugo

Essential tools: Hugo PaperMod theme Visual Studio Code Obsidian DigitalOcean App Platform AI is used as an assistant. I’m doing the writing, but with help (usually in the form of proof reading or helping with structure). I bounce around between a variety of tools. Claude - Often integrated with other tools like vscode, Obsidian, AnythingLLM. AnythingLLM Ollama Open WebUI ChatGPT - Largely Claude is replacing this. But I still use it some.

Premise Most sites have an “about” page that doesn’t change much. It’s usually not very interesting, especially for a personal blog like magnus919.com. A “now” page reminds me a bit of the old .plan file back in the paleo-internet days where finger was everyone’s favorite command-line federated social network platform. The basic premise of the now page is that it’s very fresh, very current, and it’s more about what is going on in your life right now. ...

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: ...