feat(web/homepage): Add templating for entries on the homepage
Adds the actual insertion of entries into the homepage, subtly colour-coding different types of entries.
This commit is contained in:
Vincent Ambo
parent
39854d71b2
commit
75969d886d
3 changed files with 91 additions and 32 deletions
|
|
@ -30,25 +30,37 @@ let
|
|||
|
||||
postToEntry = defun [ web.blog.post entry ] (post: {
|
||||
class = "blog";
|
||||
title = "Blog: " + post.title;
|
||||
title = post.title;
|
||||
url = "/blog/${post.key}";
|
||||
date = post.date;
|
||||
});
|
||||
|
||||
# TODO(tazjin): add date formatting function
|
||||
formatDate = defun [ int string ] (date: readFile (runCommandNoCC "date" {} ''
|
||||
date --date='@${toString date}' '+%Y-%m-%d' > $out
|
||||
''));
|
||||
|
||||
formatEntryDate = defun [ entry string ] (entry: entryClass.match entry.class {
|
||||
blog = "Blog post from ${formatDate entry.date}";
|
||||
project = "Project from ${formatDate entry.date}";
|
||||
misc = "Posted on ${formatDate entry.date}";
|
||||
});
|
||||
|
||||
entryToDiv = defun [ entry string ] (entry: ''
|
||||
<div class="entry ${entry.class}">
|
||||
<p class="entry-title">${escape entry.title}</p>
|
||||
<p>
|
||||
<a class="entry-title" href="${entry.url}">${escape entry.title}</a>
|
||||
</p>
|
||||
${
|
||||
lib.optionalString ((entry ? description) && (entry.description != null))
|
||||
"<p class=\"entry-description\">${escape entry.description}</p>"
|
||||
}
|
||||
<p class="entry-date">${formatEntryDate entry}</p>
|
||||
</div>
|
||||
'');
|
||||
|
||||
index = entries: third_party.writeText "index.html" (lib.concatStrings (
|
||||
[ (builtins.readFile ./header.html) ]
|
||||
++ (map entryToDiv (sort (a: b: a.date < b.date) entries))
|
||||
++ (map entryToDiv (sort (a: b: a.date > b.date) entries))
|
||||
++ [ (builtins.readFile ./footer.html) ]
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<body class="dark">
|
||||
<header>
|
||||
<h1>
|
||||
<a class="unstyled-link" href="/">tazjin's interblag</a>
|
||||
<a class="interblag-title" href="/">tazjin's interblag</a>
|
||||
</h1>
|
||||
<hr>
|
||||
</header>
|
||||
|
|
@ -25,9 +25,11 @@
|
|||
internet</a>.
|
||||
</p>
|
||||
<p>
|
||||
Below you can find a collection of my projects and blog posts.
|
||||
If you'd like to get in touch about anything, send me a mail at
|
||||
mail@[this domain] or ping me on IRC or Twitter.
|
||||
Below is a collection of
|
||||
my <span class="project">projects</span>, <span class="blog">blog
|
||||
posts</span> and some <span class="misc">random things</span> by
|
||||
me or others. If you'd like to get in touch about anything, send
|
||||
me a mail at mail@[this domain] or ping me on IRC or Twitter.
|
||||
</p>
|
||||
</div>
|
||||
<div class="entry-container">
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@
|
|||
|
||||
body {
|
||||
margin: 40px auto;
|
||||
max-width: 650px;
|
||||
line-height: 1.6;
|
||||
font-size: 18px;
|
||||
padding: 0 10px;
|
||||
|
|
@ -39,25 +38,14 @@ p, a :not(.uncoloured-link) {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
.entry-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
h1, h2, h3 {
|
||||
line-height: 1.2
|
||||
}
|
||||
|
||||
.entry {
|
||||
|
||||
}
|
||||
|
||||
/* Light theme (used for the blog) */
|
||||
|
||||
.light {
|
||||
color: #383838;
|
||||
}
|
||||
|
||||
/* Dark theme (used for the homepage) */
|
||||
/* Homepage styling */
|
||||
|
||||
.dark {
|
||||
max-width: 800px;
|
||||
background-color: #181818;
|
||||
color: #e4e4ef;
|
||||
}
|
||||
|
|
@ -66,23 +54,80 @@ p, a :not(.uncoloured-link) {
|
|||
color: #96a6c8;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
line-height: 1.2
|
||||
.entry-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.interblag-title {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.entry {
|
||||
width: 42%;
|
||||
margin: 5px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
border: 2px solid;
|
||||
border-radius: 5px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.blog {
|
||||
color: #268bd2;
|
||||
border-color: #268bd2;
|
||||
}
|
||||
|
||||
.project {
|
||||
color: #9e95c7;
|
||||
border-color: #9e95c7;
|
||||
}
|
||||
|
||||
.misc {
|
||||
color: #95a99f;
|
||||
border-color: #95a99f;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
color: inherit !important;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.entry-date {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Blog styling */
|
||||
|
||||
.light {
|
||||
max-width: 650px;
|
||||
color: #383838;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: right;
|
||||
}
|
||||
.unstyled-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
.uncoloured-link {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.date {
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
pre {
|
||||
min-width: 100%;
|
||||
/* some code snippets escape to the side, but I don't want to wrap them */
|
||||
width: max-content;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue