Merge pull request #17 from hannahilea/hr/clapping

add blog post - clapping music
hannahilea · Sep 14, 2024 · f47982d · f47982d
2 parents 9dbc3f5 + de9bf37
commit f47982d
Show file tree

Hide file tree

Showing 19 changed files with 241 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -12,6 +12,11 @@ Personal website; can be viewed at [hannahilea.com](https://hannahilea.com).
 - [ ] Fill out remaining project page links
 - [ ] Update deets on home page
 - [ ] Remove "under construction" flags
+- [ ] Blog niceties:
+    - [ ] footnote support
+    - [ ] better header 
+    - [ ] style update
+    - [ ] works nicely on phone?
 
 ### Use template to add new content
 Run `julia --startup-file=no add_stuff.jl <ARG>` with arg `blog` or `p5`.
diff --git a/add_stuff.jl b/add_stuff.jl
@@ -28,7 +28,7 @@ function new_p5_project()
         str = replace(str, "{{ DIR_NAME }}" => dir_name)
         write(file, str)
     end
-
+    
     @info "Adding new project to project index"
     let
         index_path = joinpath("projects", "index.html")
@@ -58,7 +58,12 @@ 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")
+            rm(file)
+            continue
+        end
         startswith(basename(file), ".") && continue
+
         @info "Updating $file..."
         str = read(file, String)
         str = replace(str, "{{ BLOG_TITLE }}" => blog_title)

diff --git a/blog/__template/.rss_blob.xml b/blog/__template/.rss_blob.xml
@@ -1,4 +1,4 @@
-    <!-- <item>
+<!-- <item>
       <title>{{ BLOG_TITLE }}</title>
       <pubDate>{{ PUB_DATE }}</pubDate>
       <link>https://hannahilea.com/blog/{{ BLOG_DIR }}</link>

diff --git a/blog/__template/index.html b/blog/__template/index.html
@@ -3,14 +3,14 @@
 
 <head>
   <title>Blog: {{ BLOG_TITLE }}</title>
-  <link rel="stylesheet" type="text/css" href="../../css/main.css" />
+  <link rel="stylesheet" type="text/css" href="../../css/blog.css" />
   <script type="module" src="../../scripts/md-block.js"></script>
 </head>
 
 <body>
   <nav class="navbar" role="navigation"></nav>
   <div class="underline">
-    <h4><a href="../..">@hannahilea</a> > <a href="..">Blog</a> > {{ BLOG_DIR }}
+    <h4><a href="../..">@hannahilea</a> > <a href="..">blog</a>
     </h4>
   </div>
   </nav>

diff --git a/blog/__template/src.md b/blog/__template/src.md
@@ -1,8 +1,8 @@
 ### {{ BLOG_TITLE }}
 
-Contents! They will go here.
+TODO: Contents! They will go here.
 
 --- 
-- created at: {{ DATE }}
+- created: {{ DATE }}
 - last updated: {{ DATE }}
 - tags: 
diff --git a/blog/clapping-music-for-flip-disc-displays/assets/bells.jpg b/blog/clapping-music-for-flip-disc-displays/assets/bells.jpg
diff --git a/blog/clapping-music-for-flip-disc-displays/assets/clapping.gif b/blog/clapping-music-for-flip-disc-displays/assets/clapping.gif
diff --git a/blog/clapping-music-for-flip-disc-displays/assets/signal.png b/blog/clapping-music-for-flip-disc-displays/assets/signal.png
diff --git a/blog/clapping-music-for-flip-disc-displays/assets/weather.jpg b/blog/clapping-music-for-flip-disc-displays/assets/weather.jpg
diff --git a/blog/clapping-music-for-flip-disc-displays/index.html b/blog/clapping-music-for-flip-disc-displays/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Blog: Clapping music for two flip-disc displays</title>
+  <link rel="stylesheet" type="text/css" href="../../css/blog.css" />
+  <script type="module" src="../../scripts/md-block.js"></script>
+  <script async src="//www.instagram.com/embed.js"></script>
+</head>
+
+<body>
+  <nav class="navbar" role="navigation"></nav>
+  <div class="underline">
+    <h4><a href="../..">@hannahilea</a> > <a href="..">blog</a> 
+    </h4>
+  </div>
+  </nav>
+  <div class="blogpost">
+    <md-block src="./src.md"></md-block>
+  </div>
+
+</body>
+
+</html>
+
+
diff --git a/blog/clapping-music-for-flip-disc-displays/src.md b/blog/clapping-music-for-flip-disc-displays/src.md
diff --git a/blog/hello-world/index.html b/blog/hello-world/index.html
@@ -3,14 +3,14 @@
 
 <head>
   <title>Blog: Hello world</title>
-  <link rel="stylesheet" type="text/css" href="../../css/main.css" />
+  <link rel="stylesheet" type="text/css" href="../../css/blog.css" />
   <script type="module" src="../../scripts/md-block.js"></script>
 </head>
 
 <body>
   <nav class="navbar" role="navigation"></nav>
   <div class="underline">
-    <h4><a href="../..">@hannahilea</a> > <a href="..">Blog</a> > hello-world
+    <h4><a href="../..">@hannahilea</a> > <a href="..">blog</a>
     </h4>
   </div>
   </nav>

diff --git a/blog/hello-world/src.md b/blog/hello-world/src.md
@@ -4,5 +4,5 @@ This is a blog post! It exists to prove to myself that my under-construction web
 Thanks to [Teresa Ibarra](https://teresaibarra.com), whose site (and assistance!) I used as a starting point here.
 
 ---
-- created at: 2/23/24
+- created: 2/23/24
 - last updated: 3/1/24
diff --git a/blog/index.html b/blog/index.html
@@ -45,11 +45,9 @@ <h1><a href="..">@hannahilea</a>'s blog</h1>
     <div>
       <ul>
         <!-- Add new post here -->
-        <li>17 May 2024: <a href="./site-structure">This website’s structure: a meta post</a>
-          <p><em>In which the structure of this website is motivated and described.</em></p>
+        <li>6 September 2024: <a href="./clapping-music-for-flip-disc-displays">Clapping Music for two flip-disc displays</a>
         </li>
-        <li>23 Feb 2024: <a href="./hello-world">Hello world</a>
-          <p><em>In which I create a boring initial post as a placeholder, while setting up this website.</em></p>
+        <li>17 May 2024: <a href="./site-structure">This website’s structure: a meta post</a>
         </li>
       </ul>
     </div>

diff --git a/blog/site-structure/index.html b/blog/site-structure/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <title>Blog: This website’s structure: a meta post</title>
-  <link rel="stylesheet" type="text/css" href="../../css/main.css" />
+  <link rel="stylesheet" type="text/css" href="../../css/blog.css" />
   <script type="module" src="../../scripts/md-block.js"></script>
   <style type="text/css">
     img {
@@ -19,7 +19,7 @@
 <body>
   <nav class="navbar" role="navigation"></nav>
   <div class="underline">
-    <h4><a href="../..">@hannahilea</a> > <a href="..">Blog</a> > site-structure
+    <h4><a href="../..">@hannahilea</a> > <a href="..">blog</a>
     </h4>
   </div>
   </nav>

diff --git a/blog/site-structure/src.md b/blog/site-structure/src.md
@@ -83,10 +83,12 @@ Why is the script in Julia? Because I like Julia, and I find it easy to read/wri
 
 The structure of this site has evolved slightly since I first set it up, and may evolve further, but for now I'm in a state where both goals (trivially easy to set up, trivially easy to update) are met, as evinced by the fact that I have fairly consistently added [projects](/projects) to the site as I've built them! 🎉 Will this site structure work out longer-term? Time will tell! But at least it exists (!) publicly (!!) right now (!!!).
 
-As I borrowed (with permission!) from [Teresa's site structure](../hello-world/) when first assembling this site, please feel free to borrow from me. It doesn't seem worthwhile to turn the whole site into a template itself (yet?!), but I could be convinced otherwise if you reach out to let me know that you're interested.
+As I borrowed (with permission!) when first assembling this site, please feel free to borrow from me. It doesn't seem worthwhile to turn the whole site into a template itself (yet?!), but I could be convinced otherwise if you reach out to let me know that you're interested.
 
 And finally if you, erstwhile reader, are a Web Person™ who thinks I've made an egregious error in approach or wants to propose some additional tweaks/improvements, do let me know!
 
+***Thanks to [Teresa Ibarra](https://teresaibarra.com), whose site (and assistance!) I used as an initial starting point.***
+
 ---
-- created at: 2024-05-17
+- created: 2024-05-17
 - last updated: 2024-05-17
diff --git a/css/blog.css b/css/blog.css
@@ -0,0 +1,55 @@
+@font-face {
+  font-family: "OpenSans Light";
+  src: url("../fonts/OpenSans-Light.ttf");
+}
+
+@font-face {
+  font-family: "Jura Bold";
+  src: url("../fonts/Jura-Bold.ttf");
+}
+
+body {
+  vertical-align: middle;
+  font-family: "OpenSans Light";
+  color: #03163f;
+}
+
+h1,
+h2,
+h3 {
+  font-weight: normal;
+  margin: 0;
+  font-family: "Jura Bold";
+  /* border-bottom: 2px solid #0843c3; */
+  padding-bottom: 2px;
+  margin-bottom: 3px;
+}
+
+a {
+  color: #0843c3;
+  text-decoration: none;
+}
+
+img {
+  max-width: 550px;
+  align-self: center;
+}
+
+.blogpost {
+  align-self: center;
+  margin: auto;
+  width: 50%;
+} 
+
+.language-, 
+.language-julia {
+  background: #eeeff1;
+  border: 2px solid #ddd;
+  page-break-inside: avoid;
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1em 1.5em;
+}
diff --git a/fonts/OpenSans-Light.ttf b/fonts/OpenSans-Light.ttf
diff --git a/rss.xml b/rss.xml
@@ -19,8 +19,15 @@
       <pubDate>Fri, 17 May 2024 20:22:34 GMT</pubDate>
       <link>https://hannahilea.com/blog/site-structure</link>
       <guid>https://hannahilea.com/blog/site-structure</guid>
-      <description>In which the structure of this website is motivated and described.</description>
+      <description>The structure of this website is motivated and described.</description>
     </item>
-    <!-- Add new post here -->
+    <item>
+      <title>Clapping music for two flip-disc displays</title>
+      <pubDate>Sat, 14 September 2024 16:54:11 GMT</pubDate>
+      <link>https://hannahilea.com/blog/clapping-music-for-flip-disc-displays</link>
+      <guid>https://hannahilea.com/blog/clapping-music-for-flip-disc-displays</guid>
+      <description>Reich's Clapping Music is performed on a pair of electromechanical flip-disc displays.</description>
+    </item>
+<!-- Add new post here -->
   </channel>
 </rss>