reduce complexity!
This commit is contained in:
parent
4113a4e6b1
commit
d221b7ddc5
|
|
@ -0,0 +1,85 @@
|
|||
---
|
||||
title: Reducing Workflow Load Facilitates Writing
|
||||
date: 2021-07-03T08:20:00
|
||||
categories:
|
||||
- webdesign
|
||||
tags:
|
||||
- hugo
|
||||
- writing
|
||||
---
|
||||
|
||||
Metadata stashed in Frontmatter, isn't it great. A neat and simple way to add some context to your writing, be it tags, categories, or whatever. Don't forget an appropriate subtitle. Or perhaps a _featured image_, akin to my fancy looking [sound blaster posts](/post/2020/11/win98-upgrade-sound-blaster-audigy/). What I didn't immediately realize, however, was that all that useless stuff that in my mind pleasures the reader does not pleasure me at all. Every time I have an idea for a blog post, I jot it down into my journal, but most of the time, it stays there.
|
||||
|
||||
Why? Because creating a new `.md` file where the text will live involves having to make up a subtitle or chasing after a fitting image. By then, my golden egg also known as the very fleeting thought will have lost its appeal. Still, I reasoned, a _featured image_ is important, right? For the Twitter card and [Open Graph](https://ogp.me/) metadata and all. Just look at how gorgeous a link share looks using the [Twitter Card preview tool](https://www.bannerbear.com/tools/twitter-card-preview-tool/).
|
||||
|
||||
Automation to the rescue:
|
||||
|
||||
- If there's no subtitle (`.Params.subtitle`), take the summary an truncate it: `{{ .Summary | truncate 50 }}`
|
||||
- If there's no featuerd image (`.Params.image`), take the first embedded image and treat it as such.
|
||||
|
||||
The first one was dead easy. RSS items do not have subtitles anyway. The second one turned out to be a bit more involving in [Hugo](/tags/hugo):
|
||||
|
||||
```go
|
||||
{{ $thumb := "some-default-logo.png" }}
|
||||
{{ if .Params.bigimg }}
|
||||
{{ $thumb = .Params.bigimg | absURL }}
|
||||
{{ else }}
|
||||
{{ $match := findRE `!\[(.*)\]\((.+).(jpg|png|gif)` .RawContent 1 }}
|
||||
{{ range $match }}
|
||||
{{ $relthumb := replaceRE `!\[(.*)\]\(` "" . }}
|
||||
{{ if hasPrefix $relthumb "/" }}
|
||||
{{ $thumb = printf "%s%s" .Site.BaseURL $relthumb }}
|
||||
{{ else }}
|
||||
{{ $thumb = printf "%s%s" .Permalink $relthumb }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<meta name="twitter:image" property="og:image" content="{{ $thumb }}" />
|
||||
```
|
||||
|
||||
These tiny steps greatly reduce the hurdle I have to take every time I want to write something. In the same vein, I have removed the `/notes` section all together. Those few sentences, albeit also automatically generated via Mastodon, brought little new to the table, and I had to constantly watch out as to not overburden readers using RSS. It was also responsible for a convoluted [subscribe page](/subscribe/) where visitors had to choose which feed to follow. Out it goes. I feel much relieved now.
|
||||
|
||||
### Auto-generating game cards
|
||||
|
||||
Over at the sister blog [Jefklak's Retro Codex](https://jefklakscodex.com), the problem was even worse. For every game I wanted to write about, I had to fill in the following metadata:
|
||||
|
||||
- Platform
|
||||
- Genre
|
||||
- Release year
|
||||
- Developer
|
||||
- How long to beat it
|
||||
- The box art image
|
||||
|
||||
This felt like driving around with your foot firmly placed on the break pedal. Genres were inconsistent and visitors could not click through to see other related games. But fetching the box art was the worst: going to DuckDuckGo/Google Images, deciding on a "good one", converting, yaddayadda... I have written before on how I leverage the Npm package [howlongtobeat](https://www.npmjs.com/package/howlongtobeat) to automatically grab the hours and howlong-ID. This metadata gets injected into the Frontmatter of the relevant posts: see [jam-my-stack source](https://github.com/wgroeneveld/jam-my-stack) on GitHubs. I simply extended that: it apparently came with an URL pointing to the box art! So, this was easy:
|
||||
|
||||
```javascript
|
||||
async function downloadThumbnail(url, id, dir) {
|
||||
if(url.startsWith('/')) {
|
||||
url = `https://howlongtobeat.com${url}`
|
||||
}
|
||||
console.log(` --- downloading thumbnail ${url} of id ${id}...`)
|
||||
await pipeline(
|
||||
got.stream(url),
|
||||
createWriteStream(`${dir}/${id}.jpg`)
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
I'm not exactly stealing anything from Howlongtobeat here: the copyright holders are the game developers. Not all URLs are `.jpg` files though, but they're all images, and for the moment I'm too lazy to check the extension, as now all I have to do in Hugo is:
|
||||
|
||||
```go
|
||||
{{ if .Params.howlongtobeat_id }}
|
||||
{{ $thumb = printf "%s%d%s" "img/hltb/" .Params.howlongtobeat_id ".jpg" }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
Filling in the platform does not require a big cognitive load: I think I can manage to remember on which console I played the game. I used that metadata to generate a ribbon in the sidebar. Other metadata such as the release year and developer could be lifted from the [Moby Games](https://www.mobygames.com/) API, although for the moment it's still manual labor. [The end result doesn't look too shabby](https://jefklakscodex.com/articles/animalcrossing-newhorizons/):
|
||||
|
||||
|
||||
|
||||
Now that I am writing this, another obvious one I almost missed becomes visible: including images. The above image is included using the following Markdown syntax: ``. It might not be immediate apparent, but the relative file path to a current blog post is Always And Forever `../`. That is because I keep my directory structure in `content` and the `static` dir in sync. This blog post is committed under `brainbaking/content/post/2021/07/`. The image is committed under `brainbaking/static/post/2021/07/`. Having to fill in the date reminds one of the current year and month, so no problem there.
|
||||
|
||||
I also terminated my [Gemini server](/post/2021/04/using-hugo-to-launch-a-gemini-capsule/) and threw out all related source code. It was good fun---until the added complexity to the site code base started to get on my nerves. I now fully understand why many people get rid of IndieWeb stuff. [K.I.S.S.](https://en.wikipedia.org/wiki/KISS_principle)!
|
||||
|
||||
**Reduce Complexity. Write more.** That's the message I want you to take away!
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
|
|
@ -70,7 +70,11 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
<meta name="twitter:image" property="og:image" content="{{ $thumb }}" />
|
||||
<meta name="twitter:image:alt" content="{{ .Params.subtitle }}">
|
||||
{{ if .Params.subtitle }}
|
||||
<meta name="twitter:image:alt" content="{{ .Params.subtitle }}">
|
||||
{{ else }}
|
||||
<meta name="twitter:image:alt" content="{{ .Summary | truncate 50 }}">
|
||||
{{ end }}
|
||||
|
||||
<!-- zie sidebar.html, zelfde logica gebruikt -->
|
||||
{{ $related := first 3 (where (where (where .Site.Pages.ByDate.Reverse ".Type" "==" "post") ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" $perm) }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue