From e33a1e7f05a615e1bc087f6963e66e78281cba21 Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer <darkwiiplayer@hotmail.com>
Date: Wed, 30 Aug 2023 16:50:08 +0200
Subject: [PATCH] Refactor tags and add new styles

---
 css/site.css                   | 56 ++++++++++++++++++++++++++++++++++
 lib/tags.lua                   | 24 +++++++++++++++
 pages/index.html.skooma.yue    | 15 ++-------
 templates/main.html.skooma.yue |  1 +
 templates/post.html.skooma.yue | 14 ++-------
 5 files changed, 85 insertions(+), 25 deletions(-)
 create mode 100644 css/site.css
 create mode 100644 lib/tags.lua

diff --git a/css/site.css b/css/site.css
new file mode 100644
index 0000000..be21839
--- /dev/null
+++ b/css/site.css
@@ -0,0 +1,56 @@
+blog-post[hidden] {
+	display: none;
+}
+
+blog-post {
+	display: block;
+}
+
+blog-post + blog-post {
+	margin-top: 2em;
+}
+
+@layer post-tags {
+	post-tag > a {
+		position: relative;
+		text-decoration: none;
+		color: inherit;
+		padding: .2em;
+		padding-left: 1.2em;
+		transition: all .3s;
+	}
+
+	post-tag > a::before, post-tag > a::after {
+		z-index: -1;
+		display: block;
+		content: '';
+		border-radius: .2em;
+		top: .4em;
+		left: .2em;
+		width: .6em;
+		height: .6em;
+		position: absolute;
+		background: var(--color);
+		transition: all .3s;
+	}
+
+	post-tag > a:hover {
+		color: white;
+	}
+
+	post-tag > a:hover::before {
+		display: block;
+		content: '';
+		border-radius: .2em;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		background: var(--color);
+	}
+
+	post-tag > a:hover::after {
+		background: color-mix(in srgb, var(--color) 60%, white);
+	}
+}
diff --git a/lib/tags.lua b/lib/tags.lua
new file mode 100644
index 0000000..683169a
--- /dev/null
+++ b/lib/tags.lua
@@ -0,0 +1,24 @@
+local html = require 'skooma.html'
+local rgbstr = require 'rgbstr'
+
+local function tag(name)
+	local colour = { rgbstr.bytes(name, 16, .3, .5) }
+	return html.postTag(html.a {
+		name;
+		href = "/?tag="..name;
+		style = "--color: rgb("..table.concat(colour, ', ')..")";
+	})
+end
+
+return function(tags)
+	if tags then
+		local list = { gap=".4", style="justify-content: flex-start" }
+		for _, name in ipairs(tags) do
+			table.insert(list, tag(name))
+		end
+		return {
+			html.flexRow(list);
+			html.verticalSpacer();
+		}
+	end
+end
diff --git a/pages/index.html.skooma.yue b/pages/index.html.skooma.yue
index bd3cc9d..be157a7 100644
--- a/pages/index.html.skooma.yue
+++ b/pages/index.html.skooma.yue
@@ -1,21 +1,11 @@
 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
+tags = require 'tags'
 
 post = =>
 	flexColumn
 		* h2 a(@head.title, href: @head.uri), style: "view-transition-name: #{@head.slug}"
-		* tags(@head)
+		* tags(@head.tags)
 		* time is: 'local-date', datetime: @head.date, @head.date
 		* @head.description
 
@@ -23,7 +13,6 @@ 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"
 	* [blogPost post p for p in *posts]
diff --git a/templates/main.html.skooma.yue b/templates/main.html.skooma.yue
index 3c3f43b..84df929 100644
--- a/templates/main.html.skooma.yue
+++ b/templates/main.html.skooma.yue
@@ -27,6 +27,7 @@ html
 		* meta name: "viewport", content: "width=device-width"
 		* css 'https://darkwiiplayer.github.io/css/all.css'
 		* css 'https://darkwiiplayer.github.io/css/schemes/talia.css'
+		* css "/css/site.css"
 		* style styles
 		* slots.head
 		* [ link rel: "modulepreload", href: module.url for module in *config.modules when module.preload ]
diff --git a/templates/post.html.skooma.yue b/templates/post.html.skooma.yue
index 8c3b4a3..73b5b4a 100644
--- a/templates/post.html.skooma.yue
+++ b/templates/post.html.skooma.yue
@@ -1,4 +1,4 @@
-rgbstr = require 'rgbstr'
+tags = require 'tags'
 import output from require 'params'
 slots, post = select 1, ...
 
@@ -48,20 +48,10 @@ 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 (=>@)
 	* article
 		* slots.title
-		* tags(post.head)
+		* tags(post.head.tags)
 		* nav { class: "breadcrumbs" }
 			* ul
 				* li a "Blog", href: url "/"