From 75969d886d9a13035d70e3ee3fc25b706b747081 Mon Sep 17 00:00:00 2001 From: Vincent Ambo Date: Sun, 9 Feb 2020 00:02:10 +0000 Subject: 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. --- web/homepage/default.nix | 20 ++++++++-- web/homepage/header.html | 10 +++-- web/homepage/static/tazjin.css | 83 ++++++++++++++++++++++++++++++++---------- 3 files changed, 86 insertions(+), 27 deletions(-) diff --git a/web/homepage/default.nix b/web/homepage/default.nix index f6892576f5fe..e7190bbc9d22 100644 --- a/web/homepage/default.nix +++ b/web/homepage/default.nix @@ -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: ''

${escape entry.title}

${ lib.optionalString ((entry ? description) && (entry.description != null)) "

${escape entry.description}

" } +

${formatEntryDate entry}

''); 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) ] )); diff --git a/web/homepage/header.html b/web/homepage/header.html index 832306fae3a4..1f9c262a58e3 100644 --- a/web/homepage/header.html +++ b/web/homepage/header.html @@ -9,7 +9,7 @@

- tazjin's interblag + tazjin's interblag

@@ -25,9 +25,11 @@ internet.

- 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 projects, blog + posts and some random things 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.

diff --git a/web/homepage/static/tazjin.css b/web/homepage/static/tazjin.css index 396c4ecf4a93..36f5c18ba748 100644 --- a/web/homepage/static/tazjin.css +++ b/web/homepage/static/tazjin.css @@ -28,7 +28,6 @@ body { margin: 40px auto; - max-width: 650px; line-height: 1.6; font-size: 18px; padding: 0 10px; @@ -39,50 +38,96 @@ p, a :not(.uncoloured-link) { color: inherit; } +h1, h2, h3 { + line-height: 1.2 +} + +/* Homepage styling */ + +.dark { + max-width: 800px; + background-color: #181818; + color: #e4e4ef; +} + +.dark a { + color: #96a6c8; +} + .entry-container { display: flex; flex-direction: row; flex-wrap: wrap; + justify-content: flex-start; } -.entry { - +.interblag-title { + text-decoration: none; } -/* Light theme (used for the blog) */ +.entry { + width: 42%; + margin: 5px; + padding-left: 5px; + padding-right: 5px; + border: 2px solid; + border-radius: 5px; + flex-grow: 1; +} -.light { - color: #383838; +.blog { + color: #268bd2; + border-color: #268bd2; } -/* Dark theme (used for the homepage) */ +.project { + color: #9e95c7; + border-color: #9e95c7; +} -.dark { - background-color: #181818; - color: #e4e4ef; +.misc { + color: #95a99f; + border-color: #95a99f; } -.dark a { - color: #96a6c8; +.entry-title { + color: inherit !important; + font-weight: bold; + text-decoration: none; } -h1, h2, h3 { - line-height: 1.2 +.entry-date { + font-style: italic; } -.footer { - text-align: right; + +/* Blog styling */ + +.light { + max-width: 650px; + color: #383838; } -.unstyled-link { + +.blog-title { + color: inherit; text-decoration: none; } -.uncoloured-link { - color: inherit; + +.footer { + text-align: right; } + .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; +} -- cgit 1.4.1