Deth

I’ve been considering adding more links to my website here. Almost like a sort of directory to things that I like or have found useful. Remember when that was a common practice? We’ve gotten spoiled by Google being good, but lately that and even other search engines are more SEO spam than anything else.

Until now, I have been just adding the links to links.md using Markdown. I got to thinking yesterday when wanting to add one and delete one that there must be an easier way to do that. Hugo allows pulling information from data files. Data files would have the data in a nicer and easier to maintain format. It would allow me to just change the way it’s sorted programmatically.

I thought about how I wanted to set up the data files to be as future-proof as I could imagine. I settled on a field for the Name, URL, Title and description. Of the options Hugo can read, I thought that YAML makes the most sense to me. With my poor vision, it seems to be best to quickly see the layout. Here’s an example record. There’s also no messing with quotes unless I have a colon

links:
 - name: Windy
 url: https://www.windy.com
 title: Windy
 description: Windy has really awesome maps visualizing wind and other things. It's really interesting to get a broader view of storm systems.
 - name: Tropical Tidbits
 url: https://www.tropicaltidbits.com/
 title: Tropical Tidbits
 description: This guy is certainly knowledgeable on tropical weather. I've been following him. He's got some really useful stuff on there for tracking storms too.

I wanted it to make it be as much of a write it once and use wherever I need it, and not have to tweak it in the foreseeable future to do something else. That’s one of the reasons I have the title field. If there’s a situation, I want the link title to be different from the anchor text or want to change it in the future.

I have it setup so that each file contains only the links that I want to be in that category. I thought that seemed to be the easiest way to keep things manageable and easiest to maintain for me. The only import to the short code is file which is just the sub directory and name of the file I want in that section of links. I wanted to organize the small data files by sub directory in case it grows. I had to split the file name to call it in the short code

I call it with

{{</* links file="Websites/Weather" */>}}

Below is the source to the actual short code. Feel free to use it directly or base your own off of it if you find it could be useful for your needs.

1
{{- $dataFile := .Get "file" -}}
2

3
{{- $Data := index .Site.Data (split $dataFile "/") -}}
4
{{- with $Data -}}
5
<ul class="links">
6

7
{{ range sort $Data.links "name" -}}
8
 <li class="links"><a href="{{- .url -}}" {{ with .title -}} title="{{- . -}}"{{- else -}} title="{{- .name -}}" {{- end -}}>{{- .name -}} </a>{{- with .description }} - {{ . -}} {{- end -}}</li>
9
{{ end }}
10
</ul>
11
{{- else -}}
12
Data file {{ $dataFile }} Not Found
13
{{- end -}}

I have some other short codes I have written, but I’m not ready to share them just yet. I want to make sure I am done tweaking them first.