https://petersmith.org/blog/2022/01/10/third-steps-to-indieweb/

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 webmention.io using webmention.io-backup. 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 webmention.io into the directory of the relevant page bundle. So, I tweaked the script I used to call webmention.io-backup to look like this.

#!/bin/sh

FILENAME="responses.json"

webmention.io-backup -t ${WEBMENTION_KEY=} -d petersmith.org -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_/' {} \;

https://petersmith.org/blog/2022/01/12/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 index.org 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/index.org. I wrote a quick and dirty shell script to move all the posts.

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.

[permalinks]
    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.

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:

  
  petersmith.org
          archetypes
          config.toml
          content
             blog
               ...
               ...
               20041208-anzam-strategising-activity-and-practice
                   index.org
               20041208-professional-doctorates
                   index.org
               20041209-comments-on-supervision
                   index.org
               20041210-teaching-excellence-award
                   index.org
               20110227-yale-on-writing
                   index.org
               20110303-boots-and-all
                   index.org
               20110305-how-to-write-an-article
                   index.org
               20110305-the-paragraph
                   index.org
               20220104-responsive-grids
                   index.org
               20220106-second-second-steps-in-indieweb
                   index.org
               20220110-third-steps-to-indieweb
                   index.org
             mentions
             notes
             pages
             resources
          data
             mentions.json
          i18n
          layouts
          public
          resources
          static
          themes

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 webmention.io 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.

I have now completed step 2 in building the new theme for this site; The IndieWeb tags to support the h-entry, and h-card entities are working again, as is the bits to get rel="me" going.

At the same time, I have made the 'mobile' version of the site, a little less clunky. So, far so very good.

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.

The first phase creating a new theme is complete. The site renders "ok", and I am pretty pleased with how it looks. It feels clean and elegant.