Generate tags page
This commit is contained in:
parent
f1515aab06
commit
20ecef3b3f
4 changed files with 138 additions and 3 deletions
|
|
@ -69,6 +69,13 @@ method site-header(BlogMeta:D $meta) {
|
|||
'Archive';
|
||||
];
|
||||
];
|
||||
a :href</tags.html>, [
|
||||
icon 'purchase-tag-alt';
|
||||
' ';
|
||||
span [
|
||||
'Tags';
|
||||
];
|
||||
];
|
||||
a :href</about.html>, [
|
||||
icon 'info-circle';
|
||||
' ';
|
||||
|
|
@ -169,7 +176,7 @@ method post-tags(Post:D $post){
|
|||
if @tags {
|
||||
@tags.=map(-> $tag {self.post-tag($tag)});
|
||||
div :class<post-tags>, [
|
||||
icon 'purchase-tag';
|
||||
icon 'purchase-tag-alt';
|
||||
' ';
|
||||
intersperse(', ', @tags);
|
||||
]
|
||||
|
|
@ -299,6 +306,70 @@ method generate-archive($db) {
|
|||
"<!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) {
|
||||
i(:class("bx bx-$icon"))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -105,6 +105,9 @@ class PostDB {
|
|||
my $about-path = $out-dir.add('about.html');
|
||||
$about-path.unlink if $about-path.l;
|
||||
$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
|
||||
my $atom-path = $out-dir.add('atom.xml');
|
||||
my $atom = posts-to-atom self;
|
||||
|
|
|
|||
|
|
@ -53,10 +53,10 @@ a:visited {
|
|||
.site-tagline {
|
||||
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);
|
||||
}
|
||||
.post-blurb {
|
||||
.post-blurb, .tag-blurb {
|
||||
background-color: var(--bg-1);
|
||||
}
|
||||
.post-title, .post-blurbs > h1 {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
font-family: "Open Sans", sans-serif, serif;
|
||||
/* Variables */
|
||||
--content-width: 60rem;
|
||||
--blurb-width: 45%;
|
||||
--header-width: 35rem;
|
||||
--box-padding-vert: 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 */
|
||||
body, .post {
|
||||
display: flex;
|
||||
|
|
@ -124,3 +132,56 @@ blockquote {
|
|||
border-radius: var(--box-radius);
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue