Feat: Add blog metadata to show preview panes (#49)

* add basics * add metadata to support previews * update non-blog headers
hannahilea · Nov 8, 2024 · 573b9f1 · 573b9f1
1 parent 1e6120e
commit 573b9f1
Show file tree

Hide file tree

Showing 22 changed files with 261 additions and 34 deletions.
diff --git a/blog/__template/blog.template.html b/blog/__template/blog.template.html
@@ -4,6 +4,16 @@
     <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" />
+
+    <meta property="og:title" content="$if(rawtitle)$$rawtitle$$else$$title$$endif$"/>
+    <meta property="og:description" content="$description$"/>
+    <meta property="og:url" content="https://www.hannahilea.com/blog/{{ BLOG_DIR }}"/>
+    <meta property="og:image" content="https://www.hannahilea.com/blog/{{ BLOG_DIR }}/assets/thumbnail.png">
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="300" />
+    <meta property="og:image:height" content="300" />
+    <meta property="og:type" content="website" />
+
     <title>$if(rawtitle)$$rawtitle$$else$$title$$endif$</title>
     <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
     $header$

diff --git a/blog/__template/index.template.html b/blog/__template/index.template.html
@@ -10,6 +10,14 @@
   <link rel="stylesheet" type="text/css" href="../assets/css/main.css" />
   <script src="../assets/scripts/list.min.js"></script>
 
+  <meta property="og:title" content="@hannahilea: blog"/>
+  <meta property="og:url" content="https://www.hannahilea.com/blog"/>
+  <meta property="og:image" content="https://www.hannahilea.com/assets/img/avatar.jpeg">
+  <meta property="og:image:type" content="image/jpeg" />
+  <meta property="og:image:width" content="300" />
+  <meta property="og:image:height" content="300" />
+  <meta property="og:type" content="website" />
+
   <title>@hannahilea: blog</title>
 </head>
 

diff --git a/blog/clapping-music-2/index.html b/blog/clapping-music-2/index.html
@@ -4,6 +4,24 @@
     <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" />
+
+    <meta
+      property="og:title"
+      content="Clapping Music for one flip-disc
+display: Byte and variations"
+    />
+    <meta
+      property="og:description"
+      content="Reich’s Clapping Music
+performed on a single electromechanical flip-disc display."
+    />
+    <meta property="og:url" content="https://www.hannahilea.com/blog/clapping-music-2" />
+    <meta property="og:image" content="https://www.hannahilea.com/blog/clapping-music-2/assets/thumbnail.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="300" />
+    <meta property="og:image:height" content="300" />
+    <meta property="og:type" content="website" />
+
     <title>Clapping Music for one flip-disc display: Byte and variations</title>
     <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
 

diff --git a/blog/clapping-music-for-flip-disc-displays/index.html b/blog/clapping-music-for-flip-disc-displays/index.html
@@ -4,6 +4,24 @@
     <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" />
+
+    <meta
+      property="og:title"
+      content="Clapping Music for two flip-disc
+displays"
+    />
+    <meta
+      property="og:description"
+      content="Reich’s Clapping Music
+performed on a pair of electromechanical flip-disc displays."
+    />
+    <meta property="og:url" content="https://www.hannahilea.com/blog/clapping-music-for-flip-disc-displays" />
+    <meta property="og:image" content="https://www.hannahilea.com/blog/clapping-music-for-flip-disc-displays/assets/thumbnail.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="300" />
+    <meta property="og:image:height" content="300" />
+    <meta property="og:type" content="website" />
+
     <title>Clapping Music for two flip-disc displays</title>
     <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
     <script async src="https://www.instagram.com/embed.js"></script>

diff --git a/blog/cuttle-obsession/index.html b/blog/cuttle-obsession/index.html
@@ -4,6 +4,24 @@
     <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" />
+
+    <meta
+      property="og:title"
+      content="Obsessed with Cuttle: Parametric
+CAD for prototyping, producing, and procrastinating"
+    />
+    <meta
+      property="og:description"
+      content="Write-up of a bunch of
+laser-cut projects designed with Cuttle."
+    />
+    <meta property="og:url" content="https://www.hannahilea.com/blog/cuttle-obsession" />
+    <meta property="og:image" content="https://www.hannahilea.com/blog/cuttle-obsession/assets/thumbnail.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="300" />
+    <meta property="og:image:height" content="300" />
+    <meta property="og:type" content="website" />
+
     <title>Obsessed with Cuttle: Parametric CAD for prototyping, producing, and procrastinating</title>
     <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
   </head>

diff --git a/blog/driven-developments/index.html b/blog/driven-developments/index.html
@@ -4,6 +4,24 @@
     <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" />
+
+    <meta
+      property="og:title"
+      content="Dopamine-driven development
+(DDD), spite-driven development (SDD), and other DDs"
+    />
+    <meta
+      property="og:description"
+      content="Tongue-in-cheek definitions
+and description of various X-driven development techniques."
+    />
+    <meta property="og:url" content="https://www.hannahilea.com/blog/driven-developments" />
+    <meta property="og:image" content="https://www.hannahilea.com/blog/driven-developments/assets/thumbnail.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="300" />
+    <meta property="og:image:height" content="300" />
+    <meta property="og:type" content="website" />
+
     <title>Dopamine-driven development (DDD), spite-driven development (SDD), and other DDs</title>
     <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
   </head>

diff --git a/blog/future-blog-posts/index.html b/blog/future-blog-posts/index.html
@@ -4,6 +4,24 @@
     <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" />
+
+    <meta
+      property="og:title"
+      content="Titles of blog posts I might
+never write"
+    />
+    <meta
+      property="og:description"
+      content="Braindump of potential blog
+post titles for as-yet-unwritten pieces."
+    />
+    <meta property="og:url" content="https://www.hannahilea.com/blog/future-blog-posts" />
+    <meta property="og:image" content="https://www.hannahilea.com/blog/future-blog-posts/assets/thumbnail.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="300" />
+    <meta property="og:image:height" content="300" />
+    <meta property="og:type" content="website" />
+
     <title>Titles of blog posts I might never write</title>
     <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
   </head>

diff --git a/blog/index.html b/blog/index.html
@@ -10,6 +10,14 @@
     <link rel="stylesheet" type="text/css" href="../assets/css/main.css" />
     <script src="../assets/scripts/list.min.js"></script>
 
+    <meta property="og:title" content="@hannahilea: blog" />
+    <meta property="og:url" content="https://www.hannahilea.com/blog" />
+    <meta property="og:image" content="https://www.hannahilea.com/assets/img/avatar.jpeg" />
+    <meta property="og:image:type" content="image/jpeg" />
+    <meta property="og:image:width" content="300" />
+    <meta property="og:image:height" content="300" />
+    <meta property="og:type" content="website" />
+
     <title>@hannahilea: blog</title>
   </head>
 

diff --git a/blog/make-a-list/index.html b/blog/make-a-list/index.html
@@ -4,6 +4,24 @@
     <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" />
+
+    <meta
+      property="og:title"
+      content="First things first: Make a
+list"
+    />
+    <meta
+      property="og:description"
+      content="The most important rule
+when making a list."
+    />
+    <meta property="og:url" content="https://www.hannahilea.com/blog/make-a-list" />
+    <meta property="og:image" content="https://www.hannahilea.com/blog/make-a-list/assets/thumbnail.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="300" />
+    <meta property="og:image:height" content="300" />
+    <meta property="og:type" content="website" />
+
     <title>First things first: Make a list</title>
     <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
   </head>

diff --git a/blog/make-a-list/index2.html b/blog/make-a-list/index2.html
diff --git a/blog/meme-making/index.html b/blog/meme-making/index.html
@@ -4,6 +4,24 @@
     <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" />
+
+    <meta
+      property="og:title"
+      content="Quick ’n hacky meme making, for
+fun and no profit"
+    />
+    <meta
+      property="og:description"
+      content="Tutorial on turning
+screenshots into goofy shareable images."
+    />
+    <meta property="og:url" content="https://www.hannahilea.com/blog/meme-making" />
+    <meta property="og:image" content="https://www.hannahilea.com/blog/meme-making/assets/thumbnail.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="300" />
+    <meta property="og:image:height" content="300" />
+    <meta property="og:type" content="website" />
+
     <title>Quick ’n hacky meme making, for fun and no profit</title>
     <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
   </head>

diff --git a/blog/seagull-fliposcope-animation-with-cuttle/index.html b/blog/seagull-fliposcope-animation-with-cuttle/index.html
@@ -4,6 +4,25 @@
     <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" />
+
+    <meta
+      property="og:title"
+      content="Scurrying seagull: CAD-assisted
+Fliposcope animation"
+    />
+    <meta
+      property="og:description"
+      content="Write-up of a Fliposcope
+animation created via hand-drawn, watercolored images and animation in
+Cuttle."
+    />
+    <meta property="og:url" content="https://www.hannahilea.com/blog/seagull-fliposcope-animation-with-cuttle" />
+    <meta property="og:image" content="https://www.hannahilea.com/blog/seagull-fliposcope-animation-with-cuttle/assets/thumbnail.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="300" />
+    <meta property="og:image:height" content="300" />
+    <meta property="og:type" content="website" />
+
     <title>Scurrying seagull: CAD-assisted Fliposcope animation</title>
     <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
     <script async src="https://www.instagram.com/embed.js"></script>

diff --git a/blog/site-structure/index.html b/blog/site-structure/index.html
@@ -4,6 +4,24 @@
     <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" />
+
+    <meta
+      property="og:title"
+      content="This website’s structure: A meta
+post"
+    />
+    <meta
+      property="og:description"
+      content="The structure of this
+website motivated and described."
+    />
+    <meta property="og:url" content="https://www.hannahilea.com/blog/site-structure" />
+    <meta property="og:image" content="https://www.hannahilea.com/blog/site-structure/assets/thumbnail.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="300" />
+    <meta property="og:image:height" content="300" />
+    <meta property="og:type" content="website" />
+
     <title>This website’s structure: A meta post</title>
     <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
 

diff --git a/blog/yellow-scream-2024/index.html b/blog/yellow-scream-2024/index.html
@@ -4,6 +4,20 @@
     <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" />
+
+    <meta property="og:title" content="Yellow Scream (2024)" />
+    <meta
+      property="og:description"
+      content="Interactive homage to Kim
+Beom’s Yellow Scream (2012)."
+    />
+    <meta property="og:url" content="https://www.hannahilea.com/blog/yellow-scream-2024" />
+    <meta property="og:image" content="https://www.hannahilea.com/blog/yellow-scream-2024/assets/thumbnail.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="300" />
+    <meta property="og:image:height" content="300" />
+    <meta property="og:type" content="website" />
+
     <title>Yellow Scream (2024)</title>
     <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
   </head>

diff --git a/build-site/run.jl b/build-site/run.jl
@@ -28,6 +28,7 @@ function convert_to_html(file, outfile; template=BLOG_TEMPLATE, overwrite_existi
     # For now, do a very brittle tuning of properties!
     # In future, turn this into a pandoc plugin 
     str = read(outfile, String)
+    str = replace(str, "{{ BLOG_DIR }}" => basename(dirname(file)))
     str = tweak_html!!(str)
     write(outfile, str)
 

diff --git a/index.html b/index.html
@@ -10,6 +10,14 @@
   <link rel="stylesheet" type="text/css" href="assets/css/main.css" />
   <link rel=”alternate” type=”application/rss+xml” href=”rss.xml” title="@hannahilea">
 
+  <meta property="og:title" content="@hannahilea"/>
+  <meta property="og:url" content="https://www.hannahilea.com"/>
+  <meta property="og:image" content="https://www.hannahilea.com/assets/img/avatar.jpeg">
+  <meta property="og:image:type" content="image/jpeg" />
+  <meta property="og:image:width" content="300" />
+  <meta property="og:image:height" content="300" />
+  <meta property="og:type" content="website" />
+
   <title>@hannahilea</title>
 </head>
 

diff --git a/projects/__template/index.html b/projects/__template/index.html
@@ -7,6 +7,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
 
+  <meta property="og:title" content="Sketch: {{ PROJECT_NAME }}"/>
+  <meta property="og:url" content="https://www.hannahilea.com/projects/{{ DIR_NAME }}"/>
+  <meta property="og:image" content="https://www.hannahilea.com/projects/thumbnails/TODO.png">
+  <meta property="og:image:type" content="image/png" />
+  <meta property="og:image:width" content="300" />
+  <meta property="og:image:height" content="300" />
+  <meta property="og:type" content="website" />
+
   <!-- Project-specific details -->
   <title>Sketch: {{ PROJECT_NAME }}</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>

diff --git a/projects/flock-chorus/index.html b/projects/flock-chorus/index.html
@@ -7,6 +7,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
 
+  <meta property="og:title" content="Flock chorus"/>
+  <meta property="og:url" content="https://www.hannahilea.com/projects/flock-chorus"/>
+  <meta property="og:image" content="https://www.hannahilea.com/projects/thumbnails/flock.png">
+  <meta property="og:image:type" content="image/png" />
+  <meta property="og:image:width" content="300" />
+  <meta property="og:image:height" content="300" />
+  <meta property="og:type" content="website" />
+
   <!-- Project-specific details -->
   <title>Flock chorus</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>