thatonelutenist/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tweaks

Browse source
This commit is contained in:
Nathan McCarty 2025-02-04 23:43:42 -05:00
parent e7fdf59618
commit 9ccc512533
4 changed files with 86 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
lib/Config.rakumod
View file

@ -22,11 +22,15 @@ method generate-head(Str:D $title, BlogMeta:D $meta, $description?) {
link :rel<preconnect> :href<https://static.stranger.systems>; link :rel<preconnect> :href<https://static.stranger.systems>;
link :rel<preconnect> :href<https://fonts.googleapis.com>; link :rel<preconnect> :href<https://fonts.googleapis.com>;
link :rel<preconnect> :href<https://fonts.gstatic.com> :crossorigin; link :rel<preconnect> :href<https://fonts.gstatic.com> :crossorigin;
# Load fonts, Iosevka Alie for code, and Open Sans for content link :rel<preconnect> :href<https://unpkg.com>;
# Load fonts, Iosevka for code, Open Sans for content, and boxicons for
# icons
link :rel<stylesheet>, link :rel<stylesheet>,
:href<https://static.stranger.systems/fonts/IosevkaAlie/IosevkaAile.css>; :href<https://static.stranger.systems/fonts/Iosevka/Iosevka.css>;
link :rel<stylesheet>, link :rel<stylesheet>,
:href<https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap>; :href<https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap>;
link :rel<stylesheet>,
:href<https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css>;
# Inline our style sheets # Inline our style sheets
style %?RESOURCES<main.css>.slurp; style %?RESOURCES<main.css>.slurp;
style %?RESOURCES<code.css>.slurp; style %?RESOURCES<code.css>.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<post-time>, :title("Posted At $timestamp"), [
icon 'time';
'&nbsp;';
$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<post-read-time>, :title<Estimated read time at 140/180/220 WPM>, [
icon 'timer';
'&nbsp;';
mins-to-string $slow;
'&nbsp;';
'/';
'&nbsp;';
mins-to-string $average;
'&nbsp;';
'/';
'&nbsp;';
mins-to-string $fast;
]
}
method post-header(Post:D $post) { method post-header(Post:D $post) {
header :class<post-header>, [ header :class<post-header>, [
div :class<post-title>, [ div :class<post-title>, [
h1 $post.title; h1 $post.title;
] ];
div :class<post-info>, [
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) {
"<!doctype html>$html" "<!doctype html>$html"
} }
sub icon($icon) {
i(:class("bx bx-$icon"))
}

6
lib/DB/Post.rakumod
View file

@ -58,3 +58,9 @@ method render-html(--> Str:D) {...}
method description(--> Str) { method description(--> Str) {
Nil 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)
}

2
resources/code.css
View file

@ -1,5 +1,5 @@
code { code {
font-family: "Iosevka Aile Web", monospace; font-family: "Iosevka Web", monospace;
background-color: light-dark(#fbf3db, #103c48); background-color: light-dark(#fbf3db, #103c48);
color: light-dark(#53676d, #adbcbc); color: light-dark(#53676d, #adbcbc);
min-width: 80ch; min-width: 80ch;

23
resources/main.css
View file

@ -14,7 +14,7 @@ body, .post {
} }
.site-header { .site-header {
width: 60%; width: 50%;
display: block; display: block;
padding: 1rem; padding: 1rem;
border-radius: 1rem; border-radius: 1rem;
@ -53,6 +53,7 @@ body, .post {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.5rem;
} }
.post-title { .post-title {
@ -65,6 +66,20 @@ body, .post {
margin-bottom: 0px; 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 { .post-body > h2 {
text-align: center; text-align: center;
color: light-dark(#282828, #dedede); color: light-dark(#282828, #dedede);
@ -79,6 +94,6 @@ body, .post {
text-align: center; text-align: center;
color: light-dark(#282828, #dedede); color: light-dark(#282828, #dedede);
} }
.post-body > p { /* .post-body > p { */
text-indent: 2ch; /* text-indent: 2ch; */
} /* } */