visualizing blog post links with obsidian: finished + rework tags
This commit is contained in:
parent
2a619de7f3
commit
7969d45f28
|
|
@ -5,6 +5,7 @@ bigimg: gtacrash.jpg
|
|||
date: 2020-09-26
|
||||
tags:
|
||||
- am486
|
||||
- pc hardware
|
||||
categories:
|
||||
- retro
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ date: '2020-09-23'
|
|||
subtitle: "Getting tired of loud hard drives? Here's a flash solution."
|
||||
tags:
|
||||
- am486
|
||||
- pc hardware
|
||||
categories:
|
||||
- retro
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,9 +3,8 @@ title: "486 Upgrade 1: Sound Blaster 16"
|
|||
date: '2020-09-18'
|
||||
subtitle: "A Classic ISA sound card, including MIDI daughter board!"
|
||||
tags:
|
||||
- expansion card
|
||||
- soundblaster
|
||||
- am486
|
||||
- pc hardware
|
||||
categories:
|
||||
- retro
|
||||
bigimg: sndblaster.jpg
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ date: '2020-09-03'
|
|||
subtitle: "27 years later, does it still work?"
|
||||
tags:
|
||||
- am486
|
||||
- pc hardware
|
||||
- dos
|
||||
categories:
|
||||
- retro
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ title: "Win98 Upgrade: Sound Blaster Audigy"
|
|||
date: '2020-11-24'
|
||||
subtitle: "From a Cheap PCI128 To EAX Advanced HD"
|
||||
tags:
|
||||
- expansion card
|
||||
- soundblaster
|
||||
- win98
|
||||
- pc hardware
|
||||
categories:
|
||||
- retro
|
||||
bigimg: audigy.jpg
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ title: "WinXP Upgrade: Sound Blaster X-Fi"
|
|||
date: '2020-11-08'
|
||||
subtitle: "From Embedded Realtek To EAX 5 Blasting Sound"
|
||||
tags:
|
||||
- expansion card
|
||||
- soundblaster
|
||||
- winxp
|
||||
- pc hardware
|
||||
categories:
|
||||
- retro
|
||||
bigimg: xfi.jpg
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ title: "Win98 Upgrade: GeForce 3 Ti200 vs Riva TNT2"
|
|||
date: '2021-01-28'
|
||||
subtitle: "Get more out of that AGPx4 slot!"
|
||||
tags:
|
||||
- expansion card
|
||||
- geforce
|
||||
- win98
|
||||
- pc hardware
|
||||
categories:
|
||||
- retro
|
||||
bigimg: geforce3.jpg
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ date: 2021-10-22T13:42:00+02:00
|
|||
categories:
|
||||
- programming
|
||||
tags:
|
||||
- software engineering
|
||||
- agile
|
||||
- scrum
|
||||
---
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@
|
|||
title: "Capturing VGA Output From DOS On Windows XP"
|
||||
date: 2022-11-30T10:00:00+01:00
|
||||
tags:
|
||||
- expansion card
|
||||
- screenshots
|
||||
- winxp
|
||||
- dos
|
||||
- am486
|
||||
- pc hardware
|
||||
categories:
|
||||
- retro
|
||||
---
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ categories:
|
|||
- retro
|
||||
tags:
|
||||
- games
|
||||
- dos
|
||||
- engines
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,64 @@
|
|||
---
|
||||
title: Visualizing Blog Post Links With Obsidian
|
||||
date: 2024-06-11T09:00:00+02:00
|
||||
draft: true
|
||||
date: 2024-06-10T13:40:00+02:00
|
||||
tags:
|
||||
- obsidian
|
||||
- backlinks
|
||||
- hugo
|
||||
categories:
|
||||
- braindump
|
||||
- software
|
||||
---
|
||||
|
||||
TODO
|
||||
Brain Baking has been powered by the static site generator Hugo for a good decade now. Everything I've written and published here has come to fruition with the help of Sublime Text and Hugo. Yet in 2021 I started using another Markdown-powered editor called Obsidian to edit my digital notes before they make it to this blog. The inevitable question then becomes: why not write articles directly into your Obsidian Vault and publish from there?
|
||||
|
||||
Links in form of `[description](/post/year/month/file-name/)` should become `[[file-name]]`.
|
||||
There are ample articles from others exploring that thought but they all start in reverse: they build a Vault with notes in Obsidian and want to see it published with Hugo. Brain Baking already contains 427 articles and I am not looking forward to converting these to an Obsidian-compatible syntax, only to be using another tool to convert it back to HMTL. But wait, why wouldn't Hugo files living in `/content` be compatible?
|
||||
|
||||
Regex `\[(.*)\]\(/post/[0-9]+/[0-9]+/(.+)/\)` replace with `[[$2]]`
|
||||
Because of one big stinker: links. Default Markdown-style links I use to link this article with others in the form of `[blah](/post/yyyy/mm/other-article/)` include a lot of problematic substrings for Obsidian:
|
||||
|
||||
- The leading slash `/post` points to the root. This [isn't compatible with sub-vault inclusion](https://forum.obsidian.md/t/start-absolute-path-with-a-leading-slash/32501) systems in Obsidian, so root slashes aren't supported.
|
||||
- The path itself starts at `post` but lives in `content` in the root of my Brain Baking repository. At what level are you creating an Obsidian Vault then?
|
||||
- The trailing slash `other-article/` confuses Obsidian into thinking it's a different file. The graph view points to a non-existing file.
|
||||
|
||||
Even though you were to disable `[[wikilinks]]` in Obsidian, you'll have to apply a bunch of fancy regexes before Obsidian is able to process and link the documents correctly. I came up with a quick and dirty regex `\[(.*)\]\(/post/[0-9]+/[0-9]+/(.+)/\)` to replace Markdown-links with `[[$2]]`, getting rid of the path entirely. I've seen others like [this hugo-wikilinks repository](https://github.com/milafrerichs/hugo-wikilinks) and [Quinn Casey](https://quinncasey.com/hugo-wikilink-support/) relying on the same dumb trick. Of course, that breaks the Hugo rendering pipeline, resulting in `<a/>` HTML tags that point to nowhere.
|
||||
|
||||
An even bigger problem I won't go into is the way I organize my `static` files: images are included using `` because I do not want to create a directory for each post: they live in `/static/post/yyyy/mm`---but get copied over by Hugo, so the static folder doesn't really exist. Confused yet?
|
||||
|
||||
In sum, it is not possible to simply import a Hugo content or post directory into an Obsidian Vault and call it a day. The most compelling reason to write directly in Obsidian isn't the better Markdown support but (1) the graph view with (implicit) backlink support and (2) the fuzzy search and auto-include while typing `[[` to link to an existing article. I guess I'll have to try and find similar plug-ins for Sublime Text for that. Another option would be to write a tool that converts from A to B so that Hugo can convert to C. but that sounds like an unhealthy case of over-engineering to me.
|
||||
|
||||
Still, using the above dirty regex, I was able to extract a partial graph view of connected blog posts:
|
||||
|
||||
|
||||
|
||||
- spider form: monthly overview posts linking to previous
|
||||
- nut?
|
||||
- separate indexes in `/archives` replacing the "by year" list
|
||||
This does not include tags or categories which should appear as heavily linked nodes in the graph. In Obsidian, concepts and tables of contents are usually Markdown files as well, making these links explicit.
|
||||
|
||||
I found the above graph very interesting, especially its spider-like form thanks to my more recent habit of writing monthly overview posts that are form a heavily linked web. The edge links pointing up and down are mostly these kinds of posts.
|
||||
|
||||
What stood out the most, however, was that almost all posts are written **within context**: they're always linked to at least one other relevant post. I love providing the reader (and thus, mostly myself) options to discover similar articles, hence the _You Might Also Like..._ footer beyond every post, listing five related posts using tag intersections and [true backlinks](/post/2022/04/true-backlink-support-in-hugo).
|
||||
|
||||
Even though that messy graph is meaningless on its own, I wondered if introducing an explicit layer would be a good idea to easier find stuff. In Hugo terms, that means adding another taxonomy next to the global _category_ and micro _tag_ levels. What if I could separate indexes in `/archives` into clusters called _series_---clusters I would identify using Obsidian's graph?
|
||||
|
||||
After a few evenings of messing around, I came up with a couple of series belonging to a specific category:
|
||||
|
||||
```
|
||||
webdesign
|
||||
- blogging about blogging
|
||||
- hugo static site generation
|
||||
software
|
||||
- self-hosted adventures
|
||||
retro
|
||||
- physical game collecting
|
||||
- game boy hacking
|
||||
- retro pc hardware
|
||||
education
|
||||
- creativity in software engineering
|
||||
- computing education
|
||||
...
|
||||
```
|
||||
|
||||
Articles belonging to a series could simply be added to the chain by a `series:` key in the front matter. But. Once I got all that working, the overview bugged me: the differences between categories, series, and tags began fading away. For instance, I had a Hugo series, but I also had a Hugo tag. Delete the tag? Broaden the series? More than half of the series seemed to perfectly map to an existing tag. By introducing the taxonomy _series_, I made things worse, not better.
|
||||
|
||||
After a painful `git reset`, I came up with a good-enough alternative: clean up some of the tags and display a curated selection related to each category [in the Archives section](/archives) to highlight the central themes on Brain Baking. I also added a list of tags in the RSS layout in case feed reader folks might want to start spelunking.
|
||||
|
||||
The whole linking system isn't as complex as [how I display series of posts](/post/2024/01/displaying-series-of-posts-in-hugo/) on my gaming blog that's also powered by Hugo---where admittedly the whole "series" system was introduced because tags started getting messy. Game platforms replace categories there which makes more sense. That blog is also much more focused while on Brain Baking I like to write about anything that comes to mind.
|
||||
|
||||
Obsidian visualized that I like linking articles together, even though while browsing the archives that perhaps doesn't come across as obvious. I'm still not too convinced. If you have a better idea about handling the big ball of mud called taxonomies, please drop me a line.
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ aliases:
|
|||
icontag: tag
|
||||
---
|
||||
|
||||
The preservation of [once freshly baked](/post) but now perhaps stale thoughts.<br/> Not finding what you're looking for? Try browsing the archives:
|
||||
The preservation of [once freshly baked](/post) but now perhaps stale thoughts.<br/> Not finding what you're looking for? Try searching for a specific term:
|
||||
|
||||
## By Search
|
||||
|
||||
|
|
@ -54,11 +54,10 @@ Each article belongs to one or more of the following _categories_. Similar posts
|
|||
<a href="/categories/retro">Retro</a>
|
||||
</span>
|
||||
<span>
|
||||
<a href="/tags/am486"><kbd class="item-tag">am486</kbd></a>
|
||||
<a href="/tags/pc-hardware"><kbd class="item-tag">pc hardware</kbd></a>
|
||||
<a href="/tags/dos"><kbd class="item-tag">dos</kbd></a>
|
||||
<a href="/tags/gameboy"><kbd class="item-tag">gameboy</kbd></a>
|
||||
<a href="/tags/collecting"><kbd class="item-tag">collecting</kbd></a>
|
||||
<a href="/tags/expansion-card"><kbd class="item-tag">expansion card</kbd></a>
|
||||
</span>
|
||||
</li>
|
||||
<li class="flexgrid flexgrid-3070">
|
||||
|
|
|
|||
|
|
@ -59,14 +59,17 @@
|
|||
{{ $content = replaceRE `a href="/(.*?)"` (printf "%s%s%s" "a href=\"" $baseurl "$1\"") $content }}
|
||||
<description>
|
||||
{{ `<![CDATA[ ` | safeHTML }}
|
||||
{{ if .Params.bigimg }}
|
||||
<p>
|
||||
<img align="left" hspace="5" src="{{ $baseurl }}bigimg/{{ .Params.bigimg }}"/>
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
{{ $content | safeHTML }}
|
||||
|
||||
{{ if isset .Params "tags" }}
|
||||
<p>
|
||||
Related topics: /
|
||||
{{- range .Params.tags }}
|
||||
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">{{ . }}</a> /
|
||||
{{- end -}}
|
||||
</span>
|
||||
</p>
|
||||
{{ end }}
|
||||
<p>
|
||||
By <a href="/about">{{ .Site.Author.name }}</a> on {{ .Date.Format "2 January 2006" }}.
|
||||
<a href="mailto:{{ .Site.Author.rssmail }}?subject=Re: {{ .Title }}">Reply via email</a>.
|
||||
|
|
|
|||
Loading…
Reference in New Issue