Feat: Auto-generate blog index (#39)

* rename templates * wip * wip * clean up * clean up * clean up * adjust format * format more
hannahilea · Oct 21, 2024 · 78de92c · 78de92c
1 parent de845b9
commit 78de92c
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 141 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .DS_Store
 img/.DS_Store
 /McGill/
+Manifest.toml
diff --git a/add_stuff.jl b/add_stuff.jl
@@ -4,7 +4,6 @@ Pkg.add("Dates")
 using Dates
 
 const NEW_PROJ_COMMENT = "<!-- Add new project here -->"
-const NEW_BLOG_COMMENT = "<!-- Add new post here -->"
 
 # Some quick and brittle Julia utilities for adding new projects
 # Doesn't handle nested, only does new js projects
@@ -53,7 +52,6 @@ function new_blog_post()
 
     dir = joinpath("blog", dir_name)
     date = today()
-    date_pretty = Dates.format(today(), dateformat"d u yyyy")
 
     @info "Creating new blog directory" blog_title dir_name
     cp(joinpath("blog", "__template"), dir)
@@ -75,19 +73,7 @@ function new_blog_post()
     end
     mkdir(joinpath(dir, "assets"))
 
-    @info "Adding new project to blog index"
-    let
-        index_path = joinpath("blog", "index.html")
-        new_blob = """\n        <li><strong class="blog-date">$(date_pretty)</strong> <a class="blog-url" href="./$(dir_name)">$(blog_title)</a>        </li>"""
-        str = read(index_path, String)
-        i = findfirst(NEW_BLOG_COMMENT, str)
-        isnothing(i) &&
-            throw(ArgumentError("Oh no, $(NEW_BLOG_COMMENT) not found in $(index_path)"))
-        str = str[1:last(i)] * new_blob * str[(last(i) + 1):end]
-        write(index_path, str)
-    end
-
-    @info "Adding new project to blog index"
+    @info "Adding new project to rss feed"
     let
         new_blob = read(joinpath("blog", "__template", ".rss_blob.xml"), String)
         pub_date = Dates.format(now(Dates.UTC), dateformat"e, d U yyyy HH:MM:SS ") * "GMT"

diff --git a/blog/__template/blog.html.template b/blog/__template/blog.html.template
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <link rel="shortcut icon" type="image/png" href="../../assets/img/favicon.png" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>$if(rawtitle)$$rawtitle$$else$$title$$endif$</title>
+    <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
+    $header$
+  </head>
+
+  <body>
+    <div class="main-container blog">
+      <nav class="navbar" role="navigation">
+        @hannahilea:
+        <a class="nav-link" href="../..">home</a> | 
+        <a class="nav-link" href="../../projects">projects</a> |
+        <a class="nav-link" href="..">blog</a>
+      </nav>
+      <h1>$title$</h1>
+$body$
+      <hr />
+      <ul>
+        <li>created: $created$</li>
+        <li>last updated: $updated$</li>
+        <li>tags: $for(tags)$$tags$$sep$, $endfor$</li>
+      </ul>
+    </div>
+  </body>
+</html>
diff --git a/blog/__template/index.html.template b/blog/__template/index.html.template
@@ -1,30 +1,39 @@
-<!doctype html>
+<!--Auto-generated! Make changes in index.html.template, not this file-->
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <link rel="shortcut icon" type="image/png" href="../../assets/img/favicon.png" />
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>$if(rawtitle)$$rawtitle$$else$$title$$endif$</title>
-    <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
-    $header$
-  </head>
 
-  <body>
-    <div class="main-container blog">
-      <nav class="navbar" role="navigation">
-        @hannahilea:
-        <a class="nav-link" href="../..">home</a> | 
-        <a class="nav-link" href="../../projects">projects</a> |
-        <a class="nav-link" href="..">blog</a>
-      </nav>
-      <h1>$title$</h1>
-$body$
-      <hr />
+<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>
+
+    <div class="posts">
       <ul>
-        <li>created: $created$</li>
-        <li>last updated: $updated$</li>
-        <li>tags: $for(tags)$$tags$$sep$, $endfor$</li>
+<!-- POSTS -->
       </ul>
     </div>
-  </body>
+
+    <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/blog/index.html b/blog/index.html
@@ -1,58 +1,54 @@
-<!DOCTYPE html>
+<!--Auto-generated! Make changes in index.html.template, 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>
 
-<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>
 
-<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>
+      <div class="posts">
+        <ul>
+          <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>
 
-    <div class="posts">
-      <ul>
-        <!-- Add new post here -->
-        <li><strong class="blog-date">18 Oct 2024</strong> <a class="blog-url" href="./clapping-music-2"><em>Clapping
-              Music</em> 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"><em>Clapping Music</em> 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>
+        <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>
-
-    <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>
-
+  </body>
 </html>
diff --git a/build-blogs/Manifest.toml b/build-blogs/Manifest.toml
diff --git a/build-blogs/Project.toml b/build-blogs/Project.toml
@@ -1,2 +1,3 @@
 [deps]
+Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
 pandoc_jll = "c5432543-76ad-5c9d-82bf-db097047a5e2"
diff --git a/build-blogs/run.jl b/build-blogs/run.jl
@@ -1,14 +1,13 @@
 using Pkg
 Pkg.activate(@__DIR__)
 using pandoc_jll
+using Dates
 
 blog_dir = joinpath(@__DIR__, "..", "blog")
-blog_template = joinpath(blog_dir, "__template", "index.html.template")
+blog_template = joinpath(blog_dir, "__template", "blog.html.template")
+blog_index_template = joinpath(blog_dir, "__template", "index.html.template")
 
-function convert_to_html(file,
-                         outfile;
-                         template=blog_template,
-                         overwrite_existing=false,)
+function convert_to_html(file, outfile; template=blog_template, overwrite_existing=false)
     if !overwrite_existing && isfile(outfile)
         @warn "Output file already exists; not overwriting: $outfile"
         return nothing
@@ -100,12 +99,61 @@ function generate_all_blogposts(; overwrite_existing=true)
     return nothing
 end
 
+function get_blog_metadata(md_file)
+    delimiter = "ddddd"
+    template_str = "data:text/plain;utf8,\$title\$$delimiter\$created\$$delimiter\$for(tags)\$\$tags\$\$sep\$,\$endfor\$"
+    str = read(pipeline(`$(pandoc_jll.pandoc()) --template $(template_str) $(md_file)`), String)
+    str = replace(str, r".html$" => "", "\n" => " ")
+    (title, date_str, tags) = split(str, delimiter; limit=3)
+    return (; md_file, date_str, title, tags)
+end
+
+function generate_blog_index(; overwrite_existing=false, template=blog_index_template)
+    outfile = joinpath(blog_dir, "index.html")
+    if !overwrite_existing && isfile(outfile)
+        @warn "Output file already exists; not overwriting: $outfile"
+        return nothing
+    end
+
+    @info "Generating blog index..."
+    metadata = []
+    for dir in readdir(blog_dir; join=true)
+        isfile(dir) && continue
+        isequal(joinpath(blog_dir, "__template"), dir) && continue
+
+        md_file = joinpath(dir, "src.md")
+        m = get_blog_metadata(md_file)
+
+        push!(metadata, (; url="./" * basename(dir), m...))
+    end
+    metadata = sort(metadata; by=(m) -> m.date_str, rev=true)
+
+    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>"""
+    end
+
+    str = read(template, String)
+    str = replace(str, "<!-- POSTS -->" => join(blog_strs, "\n"))
+    write(outfile, str)
+
+    try
+        run(`prettier $(outfile) --write --print-width 360`)
+    catch
+        @warn "Prettier not installed OR current html errors"
+    end
+
+    return nothing
+end
+
 # Run from commandline? 
 if abspath(PROGRAM_FILE) == @__FILE__
     if isempty(ARGS)
         generate_all_blogposts(; overwrite_existing=true)
+        generate_blog_index(; overwrite_existing=true)
     elseif isfile(ARGS[1])
         generate_blog_html(ARGS[1]; overwrite_existing=true)
+        generate_blog_index(; overwrite_existing=true)
     else
         @warn "Unknown argument $(ARGS[1])"
     end