about summary refs log tree commit diff
diff options
context:
space:
mode:
authorVincent Ambo <tazjin@google.com>2020-02-09T00·02+0000
committerVincent Ambo <tazjin@google.com>2020-02-09T00·02+0000
commit75969d886d9a13035d70e3ee3fc25b706b747081 (patch)
tree1b0adde9cd8954ef666298f200e46577e1b8be38
parent39854d71b2afa5e793acb6a76f30b038bf569cca (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.nix20
-rw-r--r--web/homepage/header.html10
-rw-r--r--web/homepage/static/tazjin.css83
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&#39;s interblag</a>
+      <a class="interblag-title" href="/">tazjin&#39;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;
+}