Setup footer
This commit is contained in:
parent
63e581ac03
commit
3069e480a4
7 changed files with 163 additions and 9 deletions
|
@ -5,6 +5,7 @@ use HTML::Functional;
|
||||||
use Render::Util;
|
use Render::Util;
|
||||||
use Render::Head;
|
use Render::Head;
|
||||||
use Render::Post;
|
use Render::Post;
|
||||||
|
use Render::Foot;
|
||||||
use DB::BlogMeta;
|
use DB::BlogMeta;
|
||||||
use DB::Post;
|
use DB::Post;
|
||||||
|
|
||||||
|
@ -57,10 +58,8 @@ initComments(\{
|
||||||
];
|
];
|
||||||
# Only actually have the comment section if the post isn't hidden
|
# Only actually have the comment section if the post isn't hidden
|
||||||
optl !$post.hidden, -> {div :id<comment-section>, :class<comments>};
|
optl !$post.hidden, -> {div :id<comment-section>, :class<comments>};
|
||||||
|
generate-footer;
|
||||||
];
|
];
|
||||||
# TODO: Setup Comments
|
|
||||||
# TODO: Setup footer
|
|
||||||
# my $footer;
|
|
||||||
|
|
||||||
my $html = html :lang<en>, [
|
my $html = html :lang<en>, [
|
||||||
$head,
|
$head,
|
||||||
|
@ -85,6 +84,7 @@ method generate-index($db) {
|
||||||
div :class<post-blurbs>, [
|
div :class<post-blurbs>, [
|
||||||
h1 "Recent Posts"
|
h1 "Recent Posts"
|
||||||
], @most-recent;
|
], @most-recent;
|
||||||
|
generate-footer;
|
||||||
];
|
];
|
||||||
|
|
||||||
my $html =
|
my $html =
|
||||||
|
@ -110,6 +110,7 @@ method generate-archive($db) {
|
||||||
div :class<post-blurbs>, [
|
div :class<post-blurbs>, [
|
||||||
h1 "All Posts"
|
h1 "All Posts"
|
||||||
], @most-recent;
|
], @most-recent;
|
||||||
|
generate-footer;
|
||||||
];
|
];
|
||||||
|
|
||||||
my $html =
|
my $html =
|
||||||
|
@ -168,6 +169,7 @@ method generate-tags-page($db, @tags) {
|
||||||
div :class<tags>, [
|
div :class<tags>, [
|
||||||
h1 "Tags";
|
h1 "Tags";
|
||||||
], @tags.map(-> $tag {self.generate-tag-blurb($db, $tag, 4)});
|
], @tags.map(-> $tag {self.generate-tag-blurb($db, $tag, 4)});
|
||||||
|
generate-footer;
|
||||||
];
|
];
|
||||||
|
|
||||||
my $html =
|
my $html =
|
||||||
|
@ -184,6 +186,7 @@ method generate-tag-page($db, $tag) {
|
||||||
my $body = body [
|
my $body = body [
|
||||||
site-header $db.meta;
|
site-header $db.meta;
|
||||||
self.generate-tag-blurb($db, $tag, 4);
|
self.generate-tag-blurb($db, $tag, 4);
|
||||||
|
generate-footer;
|
||||||
];
|
];
|
||||||
|
|
||||||
my $html =
|
my $html =
|
||||||
|
|
69
lib/Render/Foot.rakumod
Normal file
69
lib/Render/Foot.rakumod
Normal file
|
@ -0,0 +1,69 @@
|
||||||
|
use v6.e.PREVIEW;
|
||||||
|
unit module Render::Foot;
|
||||||
|
|
||||||
|
use HTML::Functional;
|
||||||
|
|
||||||
|
use Render::Util;
|
||||||
|
use DB::BlogMeta;
|
||||||
|
|
||||||
|
sub footer-link($name, $title, $path, $icon) {
|
||||||
|
div :class<footer-link>, [
|
||||||
|
$icon;
|
||||||
|
a :href($path), :title($title), [
|
||||||
|
$name;
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
sub generate-footer() is export {
|
||||||
|
footer [
|
||||||
|
div :class<contact>, [
|
||||||
|
div :class<footer-title>, span "Contact Me";
|
||||||
|
div :class<footer-links>, [
|
||||||
|
footer-link (^ "@thatonelutenist"),
|
||||||
|
"Discord",
|
||||||
|
"https://discordapp.com/users/thatonelutenist",
|
||||||
|
simple-icon "discord";
|
||||||
|
footer-link (^ "@thatonelutenist:stranger.systems"),
|
||||||
|
"Matrix",
|
||||||
|
"https://matrix.to/#/@thatonelutenist:stranger.systems",
|
||||||
|
simple-icon "matrix";
|
||||||
|
footer-link (^ "~thatonelutenist/public-inbox@lists.sr.ht"),
|
||||||
|
"Email",
|
||||||
|
"mailto:~thatonelutenist/public-inbox@lists.sr.ht",
|
||||||
|
icon-solid "envelope";
|
||||||
|
];
|
||||||
|
];
|
||||||
|
div :class<code>, [
|
||||||
|
div :class<footer-title>, span "Find My Code";
|
||||||
|
div :class<footer-links>, [
|
||||||
|
footer-link "git.stranger.systems",
|
||||||
|
"Stranger Systems Forgejo",
|
||||||
|
"https://git.stranger.systems/explore/repos",
|
||||||
|
simple-icon "forgejo";
|
||||||
|
footer-link (^ "~thatonelutenist"),
|
||||||
|
"sr.ht",
|
||||||
|
"https://sr.ht/~thatonelutenist/",
|
||||||
|
simple-icon "sourcehut";
|
||||||
|
footer-link (^ "@nmccarty"),
|
||||||
|
"Github",
|
||||||
|
"https://github.com/nmccarty",
|
||||||
|
simple-icon "github";
|
||||||
|
footer-link (^ "@thatonelutenist"),
|
||||||
|
"Gitlab",
|
||||||
|
"https://gitlab.com/thatonelutenist",
|
||||||
|
simple-icon "gitlab";
|
||||||
|
];
|
||||||
|
];
|
||||||
|
div :class<socials>, [
|
||||||
|
div :class<footer-title>, span "Social Media";
|
||||||
|
div :class<footer-links>, [
|
||||||
|
footer-link "@thatonelutenist@hachyderm.io",
|
||||||
|
"Mastodon",
|
||||||
|
"https://hachyderm.io/@thatonelutenist",
|
||||||
|
simple-icon "mastodon";
|
||||||
|
];
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
|
@ -41,11 +41,14 @@ sub generate-head(BlogMeta:D $meta, $title?, $description?) is export {
|
||||||
:href</resources/code.css>;
|
:href</resources/code.css>;
|
||||||
link :rel<stylesheet>,
|
link :rel<stylesheet>,
|
||||||
:href</resources/admonitions.css>;
|
:href</resources/admonitions.css>;
|
||||||
|
|
||||||
|
# Verify mastodon
|
||||||
|
link :rel<me>, :href<https://hachyderm.io/@thatonelutenist>;
|
||||||
# Tell dark reader that we'll behave
|
# Tell dark reader that we'll behave
|
||||||
meta :name<color-scheme>, :content<light dark>;
|
meta :name<color-scheme>, :content<light dark>;
|
||||||
# Tell feed readers about our feed
|
# Tell feed readers about our feed
|
||||||
link :rel<alternate>, :type<application/atom+xml>, :title($meta.title),
|
link :rel<alternate>, :type<application/atom+xml>, :title($meta.title),
|
||||||
:href</feed.xml>;
|
:href</atom.xml>;
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,6 +3,7 @@ unit module Render::Series;
|
||||||
|
|
||||||
use Render::Util;
|
use Render::Util;
|
||||||
use Render::Head;
|
use Render::Head;
|
||||||
|
use Render::Foot;
|
||||||
use Render::Post;
|
use Render::Post;
|
||||||
use DB::Post;
|
use DB::Post;
|
||||||
use DB::Series;
|
use DB::Series;
|
||||||
|
@ -93,7 +94,8 @@ sub series-page(Int:D $series-id, $db) is export {
|
||||||
series-header $series, $db;
|
series-header $series, $db;
|
||||||
div :class<series-blurbs>,
|
div :class<series-blurbs>,
|
||||||
$series.post-ids.map(*.&generate-blurb($db));
|
$series.post-ids.map(*.&generate-blurb($db));
|
||||||
]
|
];
|
||||||
|
generate-footer;
|
||||||
];
|
];
|
||||||
|
|
||||||
my $html = html :lang<en>, [
|
my $html = html :lang<en>, [
|
||||||
|
|
|
@ -49,10 +49,18 @@ sub icon($icon) is export {
|
||||||
i(:class("bx bx-$icon"))
|
i(:class("bx bx-$icon"))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
sub icon-solid($icon) is export {
|
||||||
|
i(:class("bx bxs-$icon"))
|
||||||
|
}
|
||||||
|
|
||||||
sub logo($logo) is export {
|
sub logo($logo) is export {
|
||||||
i(:class("bx bxl-$logo"))
|
i(:class("bx bxl-$logo"))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
sub simple-icon($icon) is export {
|
||||||
|
img :src("https://cdn.simpleicons.org/$icon/474747/b9b9b9")
|
||||||
|
}
|
||||||
|
|
||||||
sub mins-to-string($mins) is export {
|
sub mins-to-string($mins) is export {
|
||||||
if $mins < 60 {
|
if $mins < 60 {
|
||||||
$mins.Str ~ "m"
|
$mins.Str ~ "m"
|
||||||
|
|
|
@ -91,6 +91,15 @@ blockquote {
|
||||||
.unit-test .bx-info-circle {
|
.unit-test .bx-info-circle {
|
||||||
color: var(--yellow);
|
color: var(--yellow);
|
||||||
}
|
}
|
||||||
|
footer {
|
||||||
|
background-color: var(--bg-0);
|
||||||
|
}
|
||||||
|
footer > div {
|
||||||
|
background-color: var(--bg-1);
|
||||||
|
}
|
||||||
|
.footer-link {
|
||||||
|
background-color: var(--bg-2);
|
||||||
|
}
|
||||||
|
|
||||||
/* Colorization for idris code blocks */
|
/* Colorization for idris code blocks */
|
||||||
code {
|
code {
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
--box-padding-horz: 1rem;
|
--box-padding-horz: 1rem;
|
||||||
--box-margin-vert: 0.5rem;
|
--box-margin-vert: 0.5rem;
|
||||||
--box-margin-horz: 0.5rem;
|
--box-margin-horz: 0.5rem;
|
||||||
|
--footer-padding: 0.25rem;
|
||||||
--box-gap: 0.5rem;
|
--box-gap: 0.5rem;
|
||||||
--box-radius: 1rem;
|
--box-radius: 1rem;
|
||||||
}
|
}
|
||||||
|
@ -79,10 +80,16 @@ body, .post, .series {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-top: var(--box-margin-vert);
|
margin-top: var(--box-margin-vert);
|
||||||
}
|
}
|
||||||
.header-links > a > span, .post-series-tag > a > span, .post-tag > a > span {
|
.header-links > a > span,
|
||||||
|
.post-series-tag > a > span,
|
||||||
|
.post-tag > a > span,
|
||||||
|
.footer-link > a > div {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.header-links > a, .post-series-tag > a, .post-tag > a {
|
.header-links > a,
|
||||||
|
.post-series-tag > a,
|
||||||
|
.post-tag > a,
|
||||||
|
.footer-link > a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -174,7 +181,6 @@ blockquote {
|
||||||
.tag-blurb-links {
|
.tag-blurb-links {
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: var(--box-radius);
|
border-radius: var(--box-radius);
|
||||||
border-radius: var(--box-radius);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
gap: var(--box-gap);
|
gap: var(--box-gap);
|
||||||
|
@ -197,6 +203,60 @@ blockquote {
|
||||||
.tag-blurb-title {
|
.tag-blurb-title {
|
||||||
margin-top: var(--box-margin-vert);
|
margin-top: var(--box-margin-vert);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-size: 1.5em;
|
font-size: 1.5rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Style the footer */
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: var(--box-gap);
|
||||||
|
max-width: var(--content-width);
|
||||||
|
width: 100%;
|
||||||
|
border-radius: var(--box-radius);
|
||||||
|
padding: var(--box-padding-vert) var(--box-padding-horz);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
footer > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex: 1;
|
||||||
|
gap: var(--box-gap);
|
||||||
|
border-radius: var(--box-radius);
|
||||||
|
padding: var(--footer-padding);
|
||||||
|
}
|
||||||
|
.footer-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
footer i {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 0.8rem;
|
||||||
|
}
|
||||||
|
.footer-link > a {
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
}
|
||||||
|
.footer-link > img {
|
||||||
|
height: 1rem;
|
||||||
|
width: 1rem;
|
||||||
|
margin: 0.1rem;
|
||||||
|
}
|
||||||
|
.footer-links {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
/* align-items: center; */
|
||||||
|
gap: var(--box-gap);
|
||||||
|
border-radius: var(--box-radius);
|
||||||
|
padding: var(--footer-padding);
|
||||||
|
}
|
||||||
|
.footer-link {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
align-content: center;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
padding: var(--footer-padding);
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue