From 9ccc512533cce410849144d5dfef7a0214e5da80 Mon Sep 17 00:00:00 2001 From: Nathan McCarty Date: Tue, 4 Feb 2025 23:43:42 -0500 Subject: [PATCH] tweaks --- lib/Config.rakumod | 63 ++++++++++++++++++++++++++++++++++++++++++--- lib/DB/Post.rakumod | 6 +++++ resources/code.css | 2 +- resources/main.css | 23 ++++++++++++++--- 4 files changed, 86 insertions(+), 8 deletions(-) diff --git a/lib/Config.rakumod b/lib/Config.rakumod index 31559d6..9dc7b04 100644 --- a/lib/Config.rakumod +++ b/lib/Config.rakumod @@ -22,11 +22,15 @@ method generate-head(Str:D $title, BlogMeta:D $meta, $description?) { link :rel :href; link :rel :href; link :rel :href :crossorigin; - # Load fonts, Iosevka Alie for code, and Open Sans for content + link :rel :href; + # Load fonts, Iosevka for code, Open Sans for content, and boxicons for + # icons link :rel, - :href; + :href; link :rel, :href; + link :rel, + :href; # Inline our style sheets style %?RESOURCES.slurp; style %?RESOURCES.slurp; @@ -48,11 +52,60 @@ method site-header(BlogMeta:D $meta) { ] } +method post-date(Post:D $post) { + my $datetime = $post.posted-at; + my $timestamp = sprintf( + "%s %02d:%02d %s", + $datetime.yyyy-mm-dd, + ($datetime.hour % 12) || 12, + $datetime.minute, + $datetime.hour < 12 ?? 'am' !! 'pm' + ); + + div :class, :title("Posted At $timestamp"), [ + icon 'time'; + ' '; + $timestamp + ] +} + +sub mins-to-string($mins) { + if $mins < 60 { + $mins.Str ~ "m" + } else { + my $h = $mins div 60; + my $m = $mins mod 60; + $h.Str ~ "h" ~ $m.Str ~ "m" + } +} + +method post-read-time(Post:D $post) { + my ($slow, $average, $fast) = $post.readtimes; + div :class, :title, [ + icon 'timer'; + ' '; + mins-to-string $slow; + ' '; + '/'; + ' '; + mins-to-string $average; + ' '; + '/'; + ' '; + mins-to-string $fast; + ] +} + method post-header(Post:D $post) { header :class, [ div :class, [ h1 $post.title; - ] + ]; + div :class, [ + self.post-date: $post; + self.post-read-time: $post; + ]; + # TODO: Add tags once we have support for that ] } @@ -80,3 +133,7 @@ method generate-post(Post:D $post, BlogMeta:D $meta) { "$html" } + +sub icon($icon) { + i(:class("bx bx-$icon")) +} diff --git a/lib/DB/Post.rakumod b/lib/DB/Post.rakumod index 0c43fdb..3e7c377 100644 --- a/lib/DB/Post.rakumod +++ b/lib/DB/Post.rakumod @@ -58,3 +58,9 @@ method render-html(--> Str:D) {...} method description(--> Str) { Nil } + +#| Estimated readtimes at 140/180/220 wpm +method readtimes() { + my $word-count = $!source.slurp.words.elems; + ($word-count / 140, $word-count / 180, $word-count / 220).map(*.ceiling) +} diff --git a/resources/code.css b/resources/code.css index 4635ff2..1ee4316 100644 --- a/resources/code.css +++ b/resources/code.css @@ -1,5 +1,5 @@ code { - font-family: "Iosevka Aile Web", monospace; + font-family: "Iosevka Web", monospace; background-color: light-dark(#fbf3db, #103c48); color: light-dark(#53676d, #adbcbc); min-width: 80ch; diff --git a/resources/main.css b/resources/main.css index 1c2c288..a14b9c1 100644 --- a/resources/main.css +++ b/resources/main.css @@ -14,7 +14,7 @@ body, .post { } .site-header { - width: 60%; + width: 50%; display: block; padding: 1rem; border-radius: 1rem; @@ -53,6 +53,7 @@ body, .post { display: flex; flex-direction: column; align-items: center; + gap: 0.5rem; } .post-title { @@ -65,6 +66,20 @@ body, .post { margin-bottom: 0px; } +.post-info { + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; + color: light-dark(#909995, #777777); + font-size: 0.9rem; + flex-wrap: wrap; +} + +.post-read-time { + text-decoration: underline dotted; +} + .post-body > h2 { text-align: center; color: light-dark(#282828, #dedede); @@ -79,6 +94,6 @@ body, .post { text-align: center; color: light-dark(#282828, #dedede); } -.post-body > p { - text-indent: 2ch; -} +/* .post-body > p { */ +/* text-indent: 2ch; */ +/* } */