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

Generate tags page

Browse source
This commit is contained in:
Nathan McCarty 2025-02-07 01:43:52 -05:00
parent f1515aab06
commit 20ecef3b3f
4 changed files with 138 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
lib/Config.rakumod
View file

@ -69,6 +69,13 @@ method site-header(BlogMeta:D $meta) {
'Archive'; 'Archive';
]; ];
]; ];
a :href</tags.html>, [
icon 'purchase-tag-alt';
' ';
span [
'Tags';
];
];
a :href</about.html>, [ a :href</about.html>, [
icon 'info-circle'; icon 'info-circle';
' '; ' ';
@ -169,7 +176,7 @@ method post-tags(Post:D $post){
if @tags { if @tags {
@tags.=map(-> $tag {self.post-tag($tag)}); @tags.=map(-> $tag {self.post-tag($tag)});
div :class<post-tags>, [ div :class<post-tags>, [
icon 'purchase-tag'; icon 'purchase-tag-alt';
'&nbsp;'; '&nbsp;';
intersperse(', ', @tags); intersperse(', ', @tags);
] ]
@ -299,6 +306,70 @@ method generate-archive($db) {
"<!doctype html>$html" "<!doctype html>$html"
} }
method generate-tag-blurb($db, $tag, $limit?) {
sub post-to-link($id, $post) {
my $desc = $post.description;
my @slugs = $post.all-slugs;
# Use the primary slug if there is one, the id if there isn't
my $link = do if @slugs.elems {
"/posts/by-slug/{@slugs[*-1]}.html"
} else {
"/posts/by-id/$id.html"
}
div :class<tag-blurb-post>, [
div :class<tag-blurb-post-title>, [
a :href($link), span [
h3 $post.title;
];
self.post-info: $post;
if $desc ~~ Str:D {
div :class<tag-blurb-post-description>, [
p $post.description;
];
} else {
[]
}
];
]
}
my @posts = $db.sorted-posts.grep(-> $a { $tag (elem) $a.value.tags });
if $limit {
@posts.=head($limit);
}
if @posts {
div :class<tag-blurb>, [
span :class<tag-blurb-title>, [
a :href("/tags/$tag.html"), [
icon 'hash';
$tag;
];
];
div :class<tag-blurb-links>,
@posts.map(-> $a {post-to-link $a.key, $a.value});
]
} else {
[]
}
}
method generate-tags-page($db, @tags) {
my $head = self.generate-head(Nil, $db.meta);
my $body = body [
self.site-header: $db.meta;
div :class<tags>, [
h1 "Tags";
], @tags.map(-> $tag {self.generate-tag-blurb($db, $tag, 4)});
];
my $html =
html :lang<en>, [
$head,
$body
];
"<!doctype html>$html"
}
sub icon($icon) { sub icon($icon) {
i(:class("bx bx-$icon")) i(:class("bx bx-$icon"))
} }

3
lib/DB.rakumod
View file

@ -105,6 +105,9 @@ class PostDB {
my $about-path = $out-dir.add('about.html'); my $about-path = $out-dir.add('about.html');
$about-path.unlink if $about-path.l; $about-path.unlink if $about-path.l;
$by-id.add("{$!meta.about-id}.html").symlink: $about-path; $by-id.add("{$!meta.about-id}.html").symlink: $about-path;
# Generate the tags pages
my @tags = %!posts.values.map(*.tags).flat.unique;
$out-dir.add('tags.html').spurt: $config.generate-tags-page(self, @tags);
# Render the rss/atom feed # Render the rss/atom feed
my $atom-path = $out-dir.add('atom.xml'); my $atom-path = $out-dir.add('atom.xml');
my $atom = posts-to-atom self; my $atom = posts-to-atom self;

4
resources/colors.css
View file

@ -53,10 +53,10 @@ a:visited {
.site-tagline { .site-tagline {
color: var(--dim-0); color: var(--dim-0);
} }
.post-body, .post-header, .post-blurbs { .post-body, .post-header, .post-blurbs, .tags, .tag-blurb-post {
background-color: var(--bg-0); background-color: var(--bg-0);
} }
.post-blurb { .post-blurb, .tag-blurb {
background-color: var(--bg-1); background-color: var(--bg-1);
} }
.post-title, .post-blurbs > h1 { .post-title, .post-blurbs > h1 {

61
resources/main.css
View file

@ -2,6 +2,7 @@
font-family: "Open Sans", sans-serif, serif; font-family: "Open Sans", sans-serif, serif;
/* Variables */ /* Variables */
--content-width: 60rem; --content-width: 60rem;
--blurb-width: 45%;
--header-width: 35rem; --header-width: 35rem;
--box-padding-vert: 1rem; --box-padding-vert: 1rem;
--box-padding-horz: 1rem; --box-padding-horz: 1rem;
@ -18,6 +19,13 @@
} }
} }
/* slightly larger than blurb-width to account for padding/margins */
@media screen and (max-width: 40rem) {
:root {
--blurb-width: 100%;
}
}
/* Main Body and Post Flexboxs */ /* Main Body and Post Flexboxs */
body, .post { body, .post {
display: flex; display: flex;
@ -124,3 +132,56 @@ blockquote {
border-radius: var(--box-radius); border-radius: var(--box-radius);
padding: var(--box-padding-vert) var(--box-padding-horz); padding: var(--box-padding-vert) var(--box-padding-horz);
} }
/* Style the tags blurbs and page */
.tags {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--box-gap);
max-width: var(--content-width);
/* min-width: var(--blurb-width); */
padding: var(--box-padding-vert) var(--box-padding-horz);
border-radius: var(--box-radius);
box-sizing: border-box;
}
.tag-blurb {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--box-gap);
border-radius: var(--box-radius);
box-sizing: border-box;
}
.tag-blurb-links {
display: block;
border-radius: var(--box-radius);
border-radius: var(--box-radius);
display: flex;
flex-flow: row wrap;
gap: var(--box-gap);
align-items: stretch;
box-sizing: border-box;
gap: var(--box-gap);
padding: var(--box-padding-vert) var(--box-padding-horz);
}
.tag-blurb-post {
font-size: 0.8rem;
width: var(--blurb-width);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--box-gap);
box-sizing: border-box;
flex-shrink: 1;
flex-grow: 1;
border-radius: var(--box-radius);
padding: var(--box-padding-vert) var(--box-padding-horz);
}
.tag-blurb-title {
margin-top: var(--box-margin-vert);
margin-bottom: 0;
font-size: 1.5em;
font-weight: bold;
}