Merge pull request #43 from hannahilea/hr/project-table

Feat: Make blog index page a sortable table
hannahilea · Nov 4, 2024 · 61365d7 · 61365d7
2 parents 42f6bd5 + 493ce2b
commit 61365d7
Show file tree

Hide file tree

Showing 8 changed files with 253 additions and 69 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -15,6 +15,10 @@
             "match": "blog/__template/.*$",
             "cmd": "echo 'A __template file has been saved ${file}.'; julia build-blogs/run.jl"
         },
+        {
+            "match": "build-blogs/.*$",
+            "cmd": "echo 'A file in `build-blogs` has been saved ${file}.'; julia build-blogs/run.jl"
+        },
         ]
     }
 }
diff --git a/add_stuff.jl b/add_stuff.jl
@@ -57,7 +57,7 @@ function new_blog_post()
     @info "Creating new blog directory" blog_title dir_name
     cp(joinpath("blog", "__template"), dir)
     for file in readdir(dir; join=true)
-        if endswith(file, ".rss_blob.xml") || endswith(file, ".html.template")
+        if endswith(file, ".rss_blob.xml") || endswith(file, ".template.html")
             rm(file)
             continue
         end

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -63,11 +63,6 @@ body {
   color: #03163f;
 }
 
-.posts {
-  margin-bottom: 2.6em;
-  line-height: 2;
-}
-
 .project-section {
   margin-bottom: 3em;
 }
@@ -77,11 +72,6 @@ body {
   font-family: "Jura Bold";
 }
 
-.blog-date {
-  font-weight: normal;
-  font-family: "Jura Regular";
-}
-
 .blog-url {
   font-weight: bolder;
 }
@@ -403,3 +393,75 @@ img.home-img {
   font-weight: bold;
   font-family: "Jura Bold";
 }
+
+/* For blog, project index pages */ 
+.index-page {
+  .date {
+    font-weight: normal;
+    font-family: "Jura Regular";
+    text-align: right;
+  }
+
+  .sort.asc::after {
+    content: "▼";
+    padding-left: 3px;
+    padding-right: 3px;
+    font-size: small
+  }
+
+  .sort.desc::after {
+    content: "▲";
+    padding-left: 3px;
+    padding-right: 3px;
+    font-size: small;
+  }
+
+  .search {
+    float: top;
+  }
+
+  td th {
+    padding: 6px;
+    text-align: left;
+    vertical-align: top;
+    word-wrap: break-word;
+  }
+
+  tr td:first-child {
+    width: 1%;
+    white-space: nowrap;
+
+    table {
+      border-collapse: collapse;
+      margin-bottom: 10px;
+      width: 100%;
+    }
+
+    thead {
+      border-bottom: 1px solid #dbdbdb;
+      border-bottom: 1px solid var(--border);
+    }
+  }
+
+  td,
+  th {
+    padding: 6px;
+    text-align: left;
+    vertical-align: top;
+    word-wrap: break-word;
+  }
+
+  th {
+    font-weight: normal;
+    margin: 0;
+    font-family: "Jura Bold";
+    padding-bottom: 2px;
+    margin-bottom: 3px;
+    font-size: larger;
+  }
+
+  tbody tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+
+}
diff --git a/assets/scripts/list.min.js b/assets/scripts/list.min.js
diff --git a/blog/__template/blog.html.template → blog/__template/blog.template.html b/blog/__template/blog.html.template → blog/__template/blog.template.html
diff --git a/blog/__template/index.html.template → blog/__template/index.template.html b/blog/__template/index.html.template → blog/__template/index.template.html
@@ -1,4 +1,4 @@
-<!--Auto-generated! Make changes in index.html.template, not this file-->
+<!--Auto-generated! Make changes in index.template.html, not this file-->
 <!DOCTYPE html>
 <html lang="en">
 
@@ -9,11 +9,13 @@
   <meta name="author" content="Hannah Robertson" />
   <link rel="shortcut icon" type="image/png" href="../assets/img/favicon.png" />
   <link rel="stylesheet" type="text/css" href="../assets/css/main.css" />
+  <script src="../assets/scripts/list.min.js"></script>
+
   <title>@hannahilea: blog</title>
 </head>
 
 <body>
-  <div class="main-container">
+  <div class="main-container index-page">
     <nav class="navbar" role="navigation">
       @hannahilea:
       <a href=".." class="nav-link">home</a> |
@@ -22,12 +24,30 @@
     </nav>
     <h1 class="title">Blog</h1>
 
-    <div class="posts">
-      <ul>
-<!-- POSTS -->
-      </ul>
+    <div id="post-list">
+      <table>
+        <thead>
+          <tr>
+            <!-- <th class="sort desc" data-sort="date-pretty">Date pretty</th> -->
+            <th class="sort desc" data-sort="date-raw" data-default-order='desc'>Date</th>
+            <th class="sort" data-sort="title-raw">Title</th>
+          </tr>
+        </thead>
+        <!-- IMPORTANT, class="list" have to be at tbody -->
+        <tbody class="list">
+          <!-- POSTS -->
+        </tbody>
+      </table>
     </div>
+    <script>
+      var options = {
+        valueNames: ['date-raw', 'date-pretty', 'title', 'title-raw', 'tags']
+      };
+
+      var blogList = new List('post-list', options);
+    </script>
 
+  <br/>
     <div>
       <a href="/rss.xml" rel="subscribe-rss">
         <!-- Source: https://img.shields.io/badge/rss-F88900?style=for-the-badge&logo=rss&logoColor=white -->

diff --git a/blog/index.html b/blog/index.html
@@ -1,55 +1,139 @@
-<!--Auto-generated! Make changes in index.html.template, not this file-->
-<!doctype html>
+<!--Auto-generated! Make changes in index.template.html, not this file-->
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="Hannah Robertson's blog" />
-    <meta name="author" content="Hannah Robertson" />
-    <link rel="shortcut icon" type="image/png" href="../assets/img/favicon.png" />
-    <link rel="stylesheet" type="text/css" href="../assets/css/main.css" />
-    <title>@hannahilea: blog</title>
-  </head>
 
-  <body>
-    <div class="main-container">
-      <nav class="navbar" role="navigation">
-        @hannahilea:
-        <a href=".." class="nav-link">home</a> | <a href="../projects" class="nav-link">projects</a> |
-        <a href="../blog" class="nav-link">blog</a>
-      </nav>
-      <h1 class="title">Blog</h1>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Hannah Robertson's blog" />
+  <meta name="author" content="Hannah Robertson" />
+  <link rel="shortcut icon" type="image/png" href="../assets/img/favicon.png" />
+  <link rel="stylesheet" type="text/css" href="../assets/css/main.css" />
+  <script src="../assets/scripts/list.min.js"></script>
 
-      <div class="posts">
-        <ul>
-          <li><strong class="blog-date">31 Oct 2024</strong> <a class="blog-url" href="./seagull-fliposcope-animation-with-cuttle"> Scurrying seagull: CAD-assisted Fliposcope animation </a></li>
-          <li>
-            <strong class="blog-date">18 Oct 2024</strong>
-            <a class="blog-url" href="./clapping-music-2">
-              <strong><em>Clapping Music</em></strong> for one flip-disc display: Byte and variations
-            </a>
-          </li>
-          <li><strong class="blog-date">11 Oct 2024</strong> <a class="blog-url" href="./meme-making"> Quick ’n hacky meme making, for fun and no profit </a></li>
-          <li><strong class="blog-date">27 Sep 2024</strong> <a class="blog-url" href="./cuttle-obsession"> Obsessed with Cuttle: Parametric CAD for prototyping, producing, and procrastinating </a></li>
-          <li><strong class="blog-date">21 Sep 2024</strong> <a class="blog-url" href="./make-a-list"> First things first: Make a list </a></li>
-          <li><strong class="blog-date">20 Sep 2024</strong> <a class="blog-url" href="./driven-developments"> Dopamine-driven development (DDD), spite-driven development (SDD), and other DDs </a></li>
-          <li><strong class="blog-date">18 Sep 2024</strong> <a class="blog-url" href="./future-blog-posts"> Titles of blog posts I might never write </a></li>
-          <li>
-            <strong class="blog-date">14 Sep 2024</strong>
-            <a class="blog-url" href="./clapping-music-for-flip-disc-displays">
-              <strong><em>Clapping Music</em></strong> for two flip-disc displays
-            </a>
-          </li>
-          <li><strong class="blog-date">17 May 2024</strong> <a class="blog-url" href="./site-structure"> This website’s structure: A meta post </a></li>
-        </ul>
-      </div>
+  <title>@hannahilea: blog</title>
+</head>
 
-      <div>
-        <a href="/rss.xml" rel="subscribe-rss">
-          <!-- Source: https://img.shields.io/badge/rss-F88900?style=for-the-badge&logo=rss&logoColor=white -->
-          <img class="badge" src="../assets/img/rss-logo-styled.svg" alt="Subscribe to @hannahilea RSS feed"
-        /></a>
-      </div>
+<body>
+  <div class="main-container index-page">
+    <nav class="navbar" role="navigation">
+      @hannahilea:
+      <a href=".." class="nav-link">home</a> |
+      <a href="../projects" class="nav-link">projects</a> |
+      <a href="../blog" class="nav-link">blog</a>
+    </nav>
+    <h1 class="title">Blog</h1>
+
+    <div id="post-list">
+      <table>
+        <thead>
+          <tr>
+            <!-- <th class="sort desc" data-sort="date-pretty">Date pretty</th> -->
+            <th class="sort desc" data-sort="date-raw" data-default-order='desc'>Date</th>
+            <th class="sort" data-sort="title-raw">Title</th>
+          </tr>
+        </thead>
+        <!-- IMPORTANT, class="list" have to be at tbody -->
+        <tbody class="list">
+          <tr>
+    <td class="date date-pretty">31 Oct 2024</td>
+    <td class="date-raw" hidden>2024-10-31</td>
+    <td class="title-raw" hidden>Scurrying seagull: CAD-assisted Fliposcope animation</a></td>
+    <td class="title"><a class="blog-url" href="./seagull-fliposcope-animation-with-cuttle">Scurrying seagull: CAD-assisted Fliposcope animation</a>
+        <!-- <p class="blog-tags">Tags: project-writeup, art, cuttle, cad, programming, split-flap </p> -->
+    </td>
+  </tr>
+
+<tr>
+    <td class="date date-pretty">18 Oct 2024</td>
+    <td class="date-raw" hidden>2024-10-18</td>
+    <td class="title-raw" hidden><strong><em>Clapping Music</em></strong> for one flip-disc display: Byte and variations</a></td>
+    <td class="title"><a class="blog-url" href="./clapping-music-2"><strong><em>Clapping Music</em></strong> for one flip-disc display: Byte and variations</a>
+        <!-- <p class="blog-tags">Tags: project-writeup, electromechanical-display, raspberry-pi, music, programming, hardware, software, julia </p> -->
+    </td>
+  </tr>
+
+<tr>
+    <td class="date date-pretty">11 Oct 2024</td>
+    <td class="date-raw" hidden>2024-10-11</td>
+    <td class="title-raw" hidden>Quick ’n hacky meme making, for fun and no profit</a></td>
+    <td class="title"><a class="blog-url" href="./meme-making">Quick ’n hacky meme making, for fun and no profit</a>
+        <!-- <p class="blog-tags">Tags: tutorial, joy </p> -->
+    </td>
+  </tr>
+
+<tr>
+    <td class="date date-pretty">27 Sep 2024</td>
+    <td class="date-raw" hidden>2024-09-27</td>
+    <td class="title-raw" hidden>Obsessed with Cuttle: Parametric CAD for prototyping, producing, and procrastinating</a></td>
+    <td class="title"><a class="blog-url" href="./cuttle-obsession">Obsessed with Cuttle: Parametric CAD for prototyping, producing, and procrastinating</a>
+        <!-- <p class="blog-tags">Tags: project-writeup, cuttle, cad, programming, prototyping, javascript, creative-coding, makerspace </p> -->
+    </td>
+  </tr>
+
+<tr>
+    <td class="date date-pretty">21 Sep 2024</td>
+    <td class="date-raw" hidden>2024-09-21</td>
+    <td class="title-raw" hidden>First things first: Make a list</a></td>
+    <td class="title"><a class="blog-url" href="./make-a-list">First things first: Make a list</a>
+        <!-- <p class="blog-tags">Tags: musings, devtips, DDD </p> -->
+    </td>
+  </tr>
+
+<tr>
+    <td class="date date-pretty">20 Sep 2024</td>
+    <td class="date-raw" hidden>2024-09-20</td>
+    <td class="title-raw" hidden>Dopamine-driven development (DDD), spite-driven development (SDD), and other DDs</a></td>
+    <td class="title"><a class="blog-url" href="./driven-developments">Dopamine-driven development (DDD), spite-driven development (SDD), and other DDs</a>
+        <!-- <p class="blog-tags">Tags: musings,  brainstorm,  techspeak </p> -->
+    </td>
+  </tr>
+
+<tr>
+    <td class="date date-pretty">18 Sep 2024</td>
+    <td class="date-raw" hidden>2024-09-18</td>
+    <td class="title-raw" hidden>Titles of blog posts I might never write</a></td>
+    <td class="title"><a class="blog-url" href="./future-blog-posts">Titles of blog posts I might never write</a>
+        <!-- <p class="blog-tags">Tags: brainstorm, metawriting </p> -->
+    </td>
+  </tr>
+
+<tr>
+    <td class="date date-pretty">14 Sep 2024</td>
+    <td class="date-raw" hidden>2024-09-14</td>
+    <td class="title-raw" hidden><strong><em>Clapping Music</em></strong> for two flip-disc displays</a></td>
+    <td class="title"><a class="blog-url" href="./clapping-music-for-flip-disc-displays"><strong><em>Clapping Music</em></strong> for two flip-disc displays</a>
+        <!-- <p class="blog-tags">Tags: project-writeup, electromechanical-display, raspberry-pi, music, programming, hardware, software, julia </p> -->
+    </td>
+  </tr>
+
+<tr>
+    <td class="date date-pretty">17 May 2024</td>
+    <td class="date-raw" hidden>2024-05-17</td>
+    <td class="title-raw" hidden>This website’s structure: A meta post</a></td>
+    <td class="title"><a class="blog-url" href="./site-structure">This website’s structure: A meta post</a>
+        <!-- <p class="blog-tags">Tags: project-writeup,  webdev,  programming,  metawriting </p> -->
+    </td>
+  </tr>
+
+        </tbody>
+      </table>
     </div>
-  </body>
+    <script>
+      var options = {
+        valueNames: ['date-raw', 'date-pretty', 'title', 'title-raw', 'tags']
+      };
+
+      var blogList = new List('post-list', options);
+    </script>
+
+  <br/>
+    <div>
+      <a href="/rss.xml" rel="subscribe-rss">
+        <!-- Source: https://img.shields.io/badge/rss-F88900?style=for-the-badge&logo=rss&logoColor=white -->
+        <img class="badge" src="../assets/img/rss-logo-styled.svg" alt="Subscribe to @hannahilea RSS feed" /></a>
+    </div>
+  </div>
+</body>
+
 </html>
diff --git a/build-blogs/run.jl b/build-blogs/run.jl
@@ -4,8 +4,8 @@ using pandoc_jll
 using Dates
 
 blog_dir = joinpath(@__DIR__, "..", "blog")
-blog_template = joinpath(blog_dir, "__template", "blog.html.template")
-blog_index_template = joinpath(blog_dir, "__template", "index.html.template")
+blog_template = joinpath(blog_dir, "__template", "blog.template.html")
+blog_index_template = joinpath(blog_dir, "__template", "index.template.html")
 
 function convert_to_html(file, outfile; template=blog_template, overwrite_existing=false)
     if !overwrite_existing && isfile(outfile)
@@ -128,9 +128,21 @@ function generate_blog_index(; overwrite_existing=false, template=blog_index_tem
     end
     metadata = sort(metadata; by=(m) -> m.date_str, rev=true)
 
+    # See blog/__template/index.template.html for how this 
+    # fits into table
     blog_strs = map(metadata) do m
         date_pretty = Dates.format(Date(m.date_str), dateformat"d u yyyy")
-        return """<li><strong class="blog-date">$(date_pretty)</strong> <a class="blog-url" href="$(m.url)">\n$(m.title)\n</a>\n</li>"""
+        tags = replace(m.tags, "," => ", ")
+        return """
+        <tr>
+            <td class="date date-pretty">$(date_pretty)</td>
+            <td class="date-raw" hidden>$(m.date_str)</td>
+            <td class="title-raw" hidden>$(m.title)</a></td>
+            <td class="title"><a class="blog-url" href="$(m.url)">$(m.title)</a>
+                <!-- <p class="blog-tags">Tags: $tags </p> -->
+            </td>
+          </tr>
+          """
     end
 
     str = read(template, String)