Hugo and JSON

Diving into IndieWeb (in general) and into to webmention's 'likes' (in particular), I have had to get to grips with how to work with JSON under Hugo.

Having restructured my content layout on disk, I turned my attention to what to do with the webmentions.json file that I downloaded from using Originally, I had been downloading a single monolithic file with all the responses folk had done to my website. I put the file in my Data directory and accessed from within Hugo using data templates.

All well and good. But one of the great thing about Evgeny's tool is that it can store the response from into the directory of the relevant page bundle. So, I tweaked the script I used to call to look like this.


FILENAME="responses.json" -t ${WEBMENTION_KEY=} -d -cd content -f ${FILENAME}  -jf2 -tlo=false -p -ts

# Now fix the pesy hypens in the poperty names
find . -name ${FILENAME} -exec sed -i  '
s/\(^ *\)"like-of":/\1"like_of":/
s/\(^ *\)"mention-of":/\1"mention_of":/
s/\(^ *\)"in-reply-to":/\1"in_reply_to":/
s/\(^ *\)"wm-/\1"wm_/' {} \;
Full entry …

Content structure

Following on the comments from Evgeny to my post, I have changed the directory structure for my posts.

Up until now, I had a directory blog which was full of directories, such 20220112-content-structure, where the first six digits represented the date. In that directory I then had an file with the content of my post.

Now I have moved to a hierarchical date structure, where the content for that post is now in blog/2022/01/12/content-structure/ I wrote a quick and dirty shell script to move all the posts.

Full entry …

Evgeny, yes, I thought that would be the problem. I have been using permalinks like that ever since I started using Hugo back in 2016. It's messier than it might first appear, because as you can see from this 'snip' of my config.toml only some content is laid out that way.

    blog = "/blog/:year/:month/:day/:slug/"
    notes = "/notes/:year/:month:/:day/:slug/"
    mentions = "/mentions/:year/:month:/:day/:slug/"
    resources = "/resources/:slug/"
    pages = "/pages/:slug/"

I suppose, it would be easy enough for me, bash, and sed to move to a directory structure like yours (fixing up any relref on the way). Then, the structure 'on-disk' of all my content would be consistent across all the sections (blog, notes, mentions, etc.) with how it is presented on the web.

Full entry …

Oh joy. I got a response from Evgeny. Now I need to sort out my workflow for responding to responses.

To answer your questions, my directory structure is using page bundeles with each section (blog, notes, pages, etc) having all my posts, like this:
Full entry …

Third steps to IndieWeb

My new theme, is working well enough that I have now republished my website using it. It also means that I have webmentions working as well. I have some rough edges to sort out but its definitely a MVP (minimum viable product).

It feels as if a cast of thousands have been involved in the this new theme. I have so many people to thank.

First there is Aaron Parecki. I had been watching his videos to help me get into doing my video production (for the BusDev@Auckland seminar series) but then I stumbled into his website, and was introduced to the world of IndieWeb and webmentions. Aaron's site also provided the glue to get webmentions working here.

Soon after my first foray into webmentions, I got a mention by Robbi Nespu. That was important not just because of the excellent advice Robbi gave me, but it also gave me the impetus to charge ahead with trying to fully implement webmentions. Looking at Robbi's site, I still need to do more work to get things like 'bookmarks', 'rsvps', and other IndieWeb things working here.

That all prompted me to start (re)theme-ing this site to better accommodate webmentions. As I say, it works, but there is still more to be done.

Full entry …

Responsive grids

As I continue to develop my new template I tackled the issue of responsive design; that is, displaying nicely regardless of the device viewing the site. In my previous themes I made no attempt at making them responsive. They were built to be displayed on a computer screen, and that was about it.

This time, however, I done a little work to make it 'somewhat' responsive.

The modern doctrine around site/web design is that one should do mobile first, and then do whatever magic is needed to make the theme work on other screen sizes. Not so for me. My initial design was for a full-size computer screen, which I then modified to work on a mobile screen.

In 'laying out' the page to be displayed, I have used a variety of techniques. When I first started designing web pages I used tables; that tells you how long ago that was. Then, with the advent of stylesheets (and CSS). CSS saw me starting to use 'floats' to position things on the page. That soon got messy so I started to use other people's framework, and for a sometime I used Foundation.

However, such frameworks (be it Foundation or Bootstrap) seemed to be something of an over kill, and pretty heavyweight. That together with the steep learning curve saw me abandoning other people's frameworks and using my own based on flexboxes.

But things have moved on since flexboxes became popular, and now we have CSS grids. So, I've bitten the bullet and have spent some time learning how to use them.

Full entry …