add page-tags post
This commit is contained in:
parent
152ee8ed0f
commit
6f449f82ab
1 changed files with 141 additions and 0 deletions
141
content/page-tags.dj
Normal file
141
content/page-tags.dj
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
title = "A tagging system for pages"
|
||||
id = "doc?20250826-page-tags"
|
||||
tags = ["all", "treehouse"]
|
||||
updated = "2025-08-26T19:20:00+02:00"
|
||||
|
||||
+++
|
||||
|
||||
The vision of the [freehouse][page:design/freehouse] has been fulfilled.
|
||||
Hobby corners are no more, welcome to... tags!
|
||||
|
||||
Public pages on the website are now _tagged_, meaning that each page has a set of categories assigned to it.
|
||||
|
||||
I've been working on it for the past few days, and I really like the result!
|
||||
|
||||
---
|
||||
|
||||
You might say to me, "But riki, isn't this what blogs do _by default_?
|
||||
Why did it take considerable engineering effort to get to this?"
|
||||
|
||||
To which I can respond that sometimes, learning something valuable takes a few failed attempts.
|
||||
|
||||
I originally set out with the goal of this blog being a bit non-standard.
|
||||
This is what the whole nesting tree format was about.
|
||||
I thought it would be super cool and ultra flexible any time I wanted to make some major changes to the website's structure.
|
||||
|
||||
Originally, I set out with a design for "hobby corners," where each of my hobbies was a foldable section in the tree.
|
||||
|
||||
- Programming
|
||||
|
||||
- Article 1
|
||||
- Article 2
|
||||
|
||||
- Design
|
||||
|
||||
- Article 1
|
||||
- Article 2
|
||||
|
||||
- Music
|
||||
|
||||
- ...
|
||||
|
||||
- Philosophy (shower thoughts)
|
||||
|
||||
The reality is, that design never underwent any changes.
|
||||
The website has largely stayed the same, and the supposedly flexible structure of the tree has resulted in me _falling into one obvious spot_ rather than experimenting.
|
||||
|
||||
And when I _was_ seeing the design's deficiencies, I could never alter them, because turns out laying out your webpage like that actually makes it _very rigid_!
|
||||
|
||||
Trust me, there's nothing more flexible than blocks of text.
|
||||
|
||||
{style="max-width: 90%; text-align: right; padding-top: 4lh"}
|
||||
I mean, look at this.\
|
||||
Would you be able to do something like this with a tree?
|
||||
|
||||
{style="text-align: center; padding-bottom: 4lh"}
|
||||
I fear not.
|
||||
|
||||
So I settled on a more standard blog-like structure for the 2nd iteration.
|
||||
But the old system remained, including [the old `new` page][page:treehouse/new.tree], which already implemented an idea of _feeds_ for transforming the tree into [an Atom feed](/feed/all.atom).
|
||||
|
||||
When I transitioned the blog to its 2nd iteration, I used that old feed system to show a post list on the home page.
|
||||
That system supported assigning tags to entries, which were available as `<category>` tags in the generated Atom feed.
|
||||
I showed those tags in the home page feed too, so that you could see what categories a post belongs to.
|
||||
There was no way to filter through tags, though.
|
||||
|
||||
By my own stupidity, I also made it impossible to Ctrl+F for `#tagname` by inserting the hash tag `#` via `::before` in CSS.
|
||||
|
||||
---
|
||||
|
||||
After the 2nd iteration, which got rid of hobby corners, I really wanted to bring them back.
|
||||
I really liked the idea of having a "front page" for each subcategory of posts, where I could give further context on a hobby, opinions on a technology, or an overview of a project.
|
||||
|
||||
So with today's update, I revamped the tags a bit.
|
||||
|
||||
I made each tag have [its][page:tag/programming] [own][page:tag/design] [home][page:tag/music] [page][page:tag/shower].
|
||||
You can browse them all [here][page:tag].
|
||||
There's also a special tag `#all`, for posts listed on the [home page][page:index].
|
||||
|
||||
Doing this required reworking the feed system a bit.
|
||||
|
||||
I abandoned the idea of generating a feed from a tree file.
|
||||
Each page now defines tags and an ID for the Atom feed on its own.
|
||||
|
||||
```djot
|
||||
title = "A tagging system for pages"
|
||||
id = "doc?20250826-page-tags"
|
||||
tags = ["all", "treehouse"]
|
||||
updated = "2025-08-26T19:20:00+02:00"
|
||||
|
||||
+++
|
||||
|
||||
The vision of the [freehouse][page:design/freehouse] has been fulfilled.
|
||||
Hobby corners are no more, welcome to... tags!
|
||||
```
|
||||
|
||||
The `tags` field is used to assign the page to different tags.
|
||||
There's also `updated` for sorting pages in a tag chronologically.
|
||||
|
||||
Then, each document is allowed to display a feed next to itself.
|
||||
This is my replacement for a special-case system for generating a list of posts.
|
||||
|
||||
```djot
|
||||
title = "#programming"
|
||||
include_feed = { tag = "programming", title = "Pages" }
|
||||
|
||||
+++
|
||||
|
||||
Honestly my favourite thing to do.
|
||||
I've been programming for over 10 years now, and there's no sign of it stopping.
|
||||
```
|
||||
|
||||
The feed is generated by listing all pages under a tag, and sorting them from newest to oldest.
|
||||
|
||||
Each page in the feed lists all the (other) tags it belongs to.
|
||||
Clicking on a tag will take you to its corresponding `tag/{tagname}` page, which in all cases is literally just an ordinary document reusing that `include_feed` mechanism.
|
||||
|
||||
(I actually devised this `include_feed` mechanism for the home page, just now it's rewritten to use tags instead of feed pages.)
|
||||
|
||||
On wide enough displays, that feed is shown as a [sidebar][page:design/sidebars], which is why I only ever inflict it upon you on main pages for tags.
|
||||
I wouldn't want you to get distracted with it while reading a full post.
|
||||
|
||||
But having those main pages serving as descriptions for tags honestly feels great.
|
||||
It feels to me like it will make the whole system more interesting for the readers of the blog.
|
||||
Combine this with the fact that I intend to follow the [Lobsters philosophy](https://lobste.rs/about#tagging) of not adding too many tags, to make them feel _really meaningful_, rather than "just another blogger's meaningless attempt at grouping their posts."
|
||||
|
||||
I've seen lots of bloggers fall into the trap of defining tags too soon ahead of time, and ending up with lots of tags that only ever have one post in them.
|
||||
I'd like to avoid that by only adding tags once there are a few posts which can't be better categorised into something else.
|
||||
|
||||
---
|
||||
|
||||
I know this post is a bit all over the place.
|
||||
But I really wanted to share it, because I think it's a cool lesson in humility.
|
||||
|
||||
I wanted to create a brilliant system with an infinitely nesting tree.
|
||||
It turned out too complicated, so I reverted to something more ordinary: a blog with tags.
|
||||
|
||||
But at the same time, I saw space for improvement in that ordinary system: making tags feel more meaningful through a small set with long descriptions.
|
||||
|
||||
Sometimes the simplest systems are, in fact, the coolest.
|
||||
|
||||
There's a reason why so many people implement them, after all.
|
||||
Loading…
Add table
Add a link
Reference in a new issue