Indieweb Likes With Hugo and Xray

I first created a Hugo archetype for a like:

---
title: '{{ replace .File.ContentBaseName `-` ` ` | title }}'
description: ""
publishdate: {{ .Date }}
categories: [like]
tags: []
---

<div class="h-entry">
  <div class="h-cite u-like-of">
    Liked "<a class="u-url" href="{{ getenv "HUGO_ARTICLE_URL" }}">{{ getenv "HUGO_ARTICLE_TITLE" }}</a>" by
    <span class="p-author h-card">
      <a class="u-url p-name" href="{{ getenv "HUGO_AUTHOR_URL" }}">{{ getenv "HUGO_AUTHOR_NAME" }}</a>.
    </span>
  </div>
</div>

We can see that Hugo looks at environment variables to populate some of the values. I already had a wrapper script to call the hugo binary, so I added a bit of code to accept those values. Here is the “usage” message for likes:

chimo@xps:~$ hugo.sh like --help
Usage: hugo.sh like -f FILENAME -u ARTICLE_URL [-a AUTHOR_URL] [-h] [-n AUTHOR_NAME] [-t ARTICLE_TITLE]

options:
-a      author URL (i.e.: homepage)
-f      filename (ex: foo.md)
-h      help (show this message)
-n      author name
-t      article title
-u      article URL.

The script take those values from the CLI and sets them to the appropriate environment variables which Hugo then uses to populate the like.

At first, all flags were mandatory, but I thought: “wouldn’t it be neat if we could extract some of that info from the target URL?”. Then I remembered about this XRay application by Aaron Parecki. It “[…]returns structured data from any URL”. I had an instance running some years ago and thought it might be time to revive it for this purpose.

And thus I created a Alpine Linux package for it and spun-up a container at https://xray.chromic.org/.

Now I can do “hugo.sh like -u https://xkcd.com/303/ -f compiling.md”. XRay will fetch the other values and the script will use those to set the proper environment variables:

---
title: 'Compiling'
description: ""
publishdate: 2025-03-18T21:18:27Z
categories: [like]
tags: []
---

<div class="h-entry">
  <div class="h-cite u-like-of">
    Liked "<a class="u-url" href="https://xkcd.com/303/">Compiling</a>" by
    <span class="p-author h-card">
      <a class="u-url p-name" href="https://xkcd.com/">XKCD</a>.
    </span>
  </div>
</div>

If XRay can’t find the information from the provided page, there just won’t be any values for those properties and I’ll fill them out manually.