Den: Custom Additions and Extras


Extra stuff I've bundled on top of the Hermit-V2 theme. Some of it was easy as pie. Some of it was hard as balls. Your mileage may wary. Mine sure did...


What Custom Additions?

The default capabilities of hugo+obsidian pipeline are pretty extensive. Hermit-v21 theme is pretty damn good too, . I wanted to get weird, WEEEEEEIIIIRRRRDDDDD.

Failed or Redundant Additions

If I could give one advice above all else it would be:

CHECK THE FEKING DOCUMENTATION FIRST!!!!!

For example, I’ve spent about a quarter of a day trying to shoe-horn a custom-built footnote system until… I’ve realized Obsidian ALREADY HAS A FOOTNOTE SYSTEM2. Had to scrap that whole kaboose, but at least the .css overrides could be reused.

But then also, Hermit-v2 has it’s own “next post/previous post” navigation mechanic that searches for posts in the same SECTION, sort them by date and find the closest ones to the post you’re on. Next/Previous buttons on THIS site have a few changes:

  • Sorting prioritizes Project before Section, meaning that if the post is associated with any project - Next/Previous buttons would point to other posts of the same project. Only if that fails - the system defaults back to searching in the Section
  • Posts in a Subsection will try to find neighbors in the Subsection first, and only if that fails - then default to Section.
  • Slightly different appearance of the buttons, with hooks for even further changes.

There are also examples of additions that were scrapped just because I… changed my mind. Like…

  • Making blips in Postcards pressable links to the related project/post/category listings. Took me one trip to Reddit to learn that nesting “a” elements in html (which are pressable elements) is a BAD, BAD IDEA, so now blips are only pressable in the post description block, which you can always see at the top of the post. Inside Postcards they are not pressable anymore.
  • …

Postcards

Hermit’s displays lists of posts as simple text-links in a column on the page. Postcards generate a horizontal block representing the post. It has a title, a short description, date of creation, related tags and categories, and a kind-of-a header background picture. Can be invoked in text by a shortcode, and will result in something like this:

All in all this is merely a more graphical way to render a specific post link on a page, convey more information. That shtick.

Sidenotes

At any point in the text I could insert a sidenote. Footnotes2 will also generate a popup textbox, but will not generate a sidenote. I suppose the logic is that footnotes are for references and sources, wheres sidenotes are kinda just for… side… notes… tangents? Something like that.

Custom Inlines

Markdowns classic italics and bolds and other shenanigans are nice but I wanted some more stuff, like a simple accent or maybe something more popping, or maybe something a bit less readable (it hurts eve ME, altho I’M the one adding the feature).
As I’ve said, nothing too wild or extraordinary. Just a bit more options

?????

Maybe pay closer attention to what you’re reading on these pages. Some things may appear to be not what they should be.
Okay I’ve implemented some sneaky text mechanics and will be using them sparingly throughout. Just a little something to add a little juju into this site, or to reinforce the mood.

Ending Ending

All in all, this isn’t exactly a tutorial, some of these features are pretty easy while others are a bit convoluted and just a teeny-tiny bit cursed. I wouldn’t recommend anyone use my code, honestly. I know practically nothing about web development, good practices or proper techniques. This whole thing is held up by spit and glue and I hope I’ve covered all of the edgecases and plugged all of the holes but I also know 100% that I didn’t, but whatevs.

Have fun, OR DON’T!


  1. You can find it on github: https://github.com/1bl4z3r/hermit-V2 ⬏

  2. And Obsidian’s footnotes aren’t that bad, really. ⬏ ⬏