diff options
| author | Vincent Ambo <tazjin@google.com> | 2020-02-09T00·02+0000 |
|---|---|---|
| committer | Vincent Ambo <tazjin@google.com> | 2020-02-09T00·02+0000 |
| commit | 75969d886d9a13035d70e3ee3fc25b706b747081 (patch) | |
| tree | 1b0adde9cd8954ef666298f200e46577e1b8be38 | |
| parent | 39854d71b2afa5e793acb6a76f30b038bf569cca (diff) | |
feat(web/homepage): Add templating for entries on the homepage r/491
Adds the actual insertion of entries into the homepage, subtly colour-coding different types of entries.
| -rw-r--r-- | web/homepage/default.nix | 20 | ||||
| -rw-r--r-- | web/homepage/header.html | 10 | ||||
| -rw-r--r-- | 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: '' <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) ] )); 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 @@ <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"> 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; +} |