Add tag listings

blog-dev-1.rockspec

@@ -9,11 +9,12 @@ description = {
 }
 dependencies = {
 	"arrr ~> 2.2",
-	"glass ~> 1.3",
 	"cmark ~> 0.29",
 	"fun ~> 0.1",
+	"glass ~> 1.3",
 	"lua-cjson ~> 2.1",
 	"restia",
+	"rgbstr",
 	"scaffold ~> 1.1",
 	"shapeshift ~> 1.1",
 	"skooma",

javascript/BlogPost.js

@@ -0,0 +1,18 @@
+import element from 'https://cdn.jsdelivr.net/gh/darkwiiplayer/js@3724b3e/element.js'
+
+element(class BlogPost extends HTMLElement {
+	connectedCallback() {
+		this.filter()
+	}
+
+	get tags() {
+		return new Set(Array.from(this.querySelectorAll("post-tag")).map(e => e.innerText))
+	}
+
+	filter() {
+		const search = new URL(document.location).searchParams
+		if (search.has("tag")) {
+			this.hidden = !this.tags.has(search.get("tag"))
+		}
+	}
+})

pages/index.html.skooma.yue

@@ -1,16 +1,29 @@
 slots, json = select 1, ...
 posts = require 'posts'
+rgbstr = require 'rgbstr'
+
+tag = (name) ->
+	colour = { rgbstr.bytes name, 16, .6 }
+	postTag a name, href: "/?tag=#{name}", style: "--color: rgb(#{table.concat(colour, ', ')})"
+
+tags ==>
+	if @tags
+		return
+			* flexRow [tag name for name in *@tags], gap: 1, style: 'justify-content: flex-start'
+			* verticalSpacer
 
 post = =>
-	a href: @head.uri,
-		* flexColumn
-			* h2 @head.title, style: "view-transition-name: #{@head.slug}"
+	flexColumn
+		* h2 a(@head.title, href: @head.uri), style: "view-transition-name: #{@head.slug}"
+		* tags(@head)
 		* time is: 'local-date', datetime: @head.date, @head.date
 		* @head.description
 
 slots.head title "Index"
 slots.head script type: 'module', src: "/javascript/LocalDate.js"
+slots.head script type: 'module', src: "/javascript/BlogPost.js"
+
 
 return main
 	* h1 "Blog Posts"
-	* nav ul [li post p for p in *posts]
+	* [blogPost post p for p in *posts]

templates/post.html.skooma.yue

@@ -1,3 +1,4 @@
+rgbstr = require 'rgbstr'
 import output from require 'params'
 slots, post = select 1, ...
 
@@ -47,13 +48,25 @@ slots.banner aside class: { 'box' }
 	]]
 	* p i "Thank you."
 
+tag = (name) ->
+	colour = { rgbstr.bytes name, 16, .6 }
+	a name, href: "/?tag=#{name}", style: "--color: rgb(#{table.concat(colour, ', ')})"
+
+tags ==>
+	if @tags
+		return
+			* flexRow [tag name for name in *@tags], gap: 1, style: 'justify-content: flex-start'
+			* verticalSpacer
+
 return (=>@)
-	* slots.banner
 	* article
 		* slots.title
+		* tags(post.head)
 		* nav { class: "breadcrumbs" }
 			* ul
 				* li a "Blog", href: url "/"
 				* [ breadcrumb post.head.uri\sub(1, number-1) for number in positions(post.head.uri, "/") ]
 				* li post.head.title, class: 'active'
+		* verticalSpacer
+		* slots.banner
 		* raw post.body