rgbstr = require 'rgbstr'
slots, json = select 1, ...
posts = require 'posts'
tags = require 'tags'

post = =>
	color = table.concat({rgbstr.bytes(@head.tags[1], 16, .3, .5)}, " ")
	flexColumn class: "info box", style: "--color: rgb(#{color})"
		* h2 a(@head.title, href: @head.uri), style: "view-transition-name: #{@head.slug}"
		* tags(@head.tags)
		* 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"
	* [blogPost post p for p in *posts]