A little late, but I did finally get the Links and Buttons page up and running! And, as promised, I’ll explain how I did it.
Of course, it starts with YAML
I build this site using Jekyll. One of the things you can do with Jekyll is have a _data
folder with YAML files in it that hold information that you can grab from elsewhere in the site, e.g. author names, titles, bio blurbs, etc. YAML is typically structured like this:
nav:
- name: Links
link: /links.html
- name: Credits
link: /credits.html
In that example, from my site’s navigation data file, nav
is the name for the section of code - this can be omitted if you’ve only got one kind of info being stored in the file - the dashes denote new entries, and name
and link
are fields you can fill in.
For the links page, I went with this:
- name: Midnight Reading
link: https://renkotsuban.com/
button: /assets/img_web/buttons/renkonbutton.gif
button-static:
alt:
name
and link
are self-explanatory - the name and URL for the site. button
is the default image link. button-static
is for reduced motion support - currently empty, as I’ll explain in a bit. alt
is for alt text, but I’m not entirely sure how I want to approach this, so it’s empty for now, with name
being used in its place. (That’s how I see some folks doing the alt text for buttons, so I figured it’s probably an acceptable way to do it, for now at least. If you have any insight please poke me on Mastodon)!
Now for the Liquid
The Liquid code for this ended up being a lot more simple than I thought it would be. Probably because I’m used to dealing with the behemoth that is the Liquid code for the index and category / tag archives pages on here (that I still gotta make a post about sometime). It ended up coming out to this:
<p class="buttonwall">
{% assign sorted_links = site.data.links | sort_natural: "name" %}
{% for link in sorted_links %}
<a href="{{ link.link }}">
<img src="{{ link.button }}"
width="88" height="31"
alt="{{ link.name }}">
</a>
{% endfor %}
</p>
First, the wrapping p
tag is so I can containerize and style the entire button area; right now I’m just using it to control how big or small it can get.
{% assign sorted_links = site.data.links | sort_natural: "name" %}
is something else to look at. This line of code sorts the entries alphabetically, so it doesn’t matter what order they are in my YAML file. Let’s break it down:
assign sorted_links = site.data.links
is telling the code that the information in the file links
under _data
belongs to the variable sorted_links
after we sort it. sort_natural: "name"
tells it to take those entries and sort them alphabetically by the Name field. sort_natural
specifically ignores capitalization; regular sort
will put lower-case after upper-case.
{% for link in sorted_links %}
is the start of a for
loop. It basically means “for every item, now named link
, in the list of items named sorted_links
, do the following”. The loop stops at the {% endfor %}
tag, so everything between these two loops is run for each item in the list.
The a
tag’s link target is {{ link.link }}
, which looks very silly, but it’s filling in the href
with the current item’s link
field from earlier. Similarly, img src
is pulling from the button
field, and alt
is pulling from the name
field (for now). The width
and height
are telling the browser that the image is specifically this size, don’t resize it.
As mentioned earlier, I want to utilize button-static
for reduced motion support. That’s the one thing I need to add to this code. I also need to modify some of the buttons to be single-frame. I’ll update this post once I’ve done that.
That wasn’t so heck
I was putting this off honestly because I thought it was going to be much more annoying to implement than it was. I’m glad it wasn’t anywhere near as complicated as I thought it was going to be!
I’ve replaced the Furrcard and Ko-fi links with the Links page, as I’ve included some of my personal links at the top. I’ve also got my blog’s buttons at the bottom, underneath the button wall.
I’ll be adding more to the wall as time goes on, and there are a few non-website buttons I want to add, but haven’t quite decided where to do so yet.
I’ve also done a few miscellaneous updates alongside this:
- Code outlines are now semi-transparent; the full blast lime green was hurting my eyes with a lot of code blocks on screen
- Code blocks are now centered and should word-wrap on smaller screens.
- Code blocks now have syntax highlighting! I’m not 100% sold on the current color set, but it’s at least active now
- I figured out how to add line numbers to code blocks, but I need to fuss with the styling so they don’t look like butts, so that’s not active until I can do that. I also noticed a small margin error that I’ll fix with that as well
- Tweaked a few tags on some posts to be more uniform