Update UI

404.html

@@ -0,0 +1,8 @@
+---
+layout: default
+permalink: /404.html
+---
+
+<div class="flex justify-center p-10">
+  <img src="{{ '/assets/images/404.svg' | asset_path }}" alt="Page Not Found" class="h-96" />
+</div>

_assets/stylesheets/application.css

@@ -2,6 +2,23 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --font-serif: "Merriweather", serif;
+  --font-sans: "Mulish", sans-serif;
+}
+
+body {
+  background-attachment: fixed;
+  background: rgb(246, 245, 241);
+  background: linear-gradient(212deg, rgba(246, 245, 241, 1) 0%, rgba(245, 245, 245, 1) 100%);
+  color: #353534;
+  font-family: var(--font-sans), sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-serif), serif;
+}
+
 .boundary {
-  @apply max-w-3xl mx-auto py-10 px-5;
+  @apply w-full p-10;
 }

_config.yml

@@ -5,10 +5,10 @@ url: ""
 baseurl: ""
 
 # use /posts/post-name/ as permalink
-permalink: /posts/:title/
+permalink: /:title/
 
 # the name of your site, e.g. ACME Corp.
-title: "def app"
+title: "Yaodong Zhao"
 
 plugins:
   - jekyll-feed

_includes/fonts.html

@@ -0,0 +1,3 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">

_includes/header.html

@@ -0,0 +1,13 @@
+<div class="flex justify-between">
+  <div class="py-3 font-mono flex items-center space-x-1">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         class="h-6 w-auto stroke-stone-700 stroke-2" width="44" height="44"
+         viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
+         stroke-linecap="round" stroke-linejoin="round">
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M9 6l6 6l-6 6" />
+    </svg>
+    <a href="/" class="text-stone-800 font-light">{{ site.title }}</a>
+  </div>
+  <div class="py-3"><a href="/about">About</a></div>
+</div>

_includes/post-icon.html

@@ -0,0 +1,40 @@
+{% if include.stage == "seedlings" %}
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="h-6 w-auto stroke-stone-800" width="44" height="44"
+     viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
+     stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M12 10a6 6 0 0 0 -6 -6h-3v2a6 6 0 0 0 6 6h3" />
+  <path d="M12 14a6 6 0 0 1 6 -6h3v1a6 6 0 0 1 -6 6h-3" />
+  <path d="M12 20l0 -10" />
+</svg>
+{% elsif include.stage == "budding" %}
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="h-6 w-auto" width="44" height="44"
+     viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
+     stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M7 15h10v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2v-4z" />
+  <path d="M12 9a6 6 0 0 0 -6 -6h-3v2a6 6 0 0 0 6 6h3" />
+  <path d="M12 11a6 6 0 0 1 6 -6h3v1a6 6 0 0 1 -6 6h-3" />
+  <path d="M12 15l0 -6" />
+</svg>
+{% elsif include.stage == "evergreen" %}
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="h-6 w-auto stroke-stone-800" width="44" height="44"
+     viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
+     stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M12 3l4 4l-2 1l4 4l-3 1l4 4h-14l4 -4l-3 -1l4 -4l-2 -1z" />
+  <path d="M14 17v3a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-3" />
+</svg>
+{% else %}
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="h-6 w-auto stroke-stone-800" width="44" height="44"
+     viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
+     stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M5 21c.5 -4.5 2.5 -8 7 -10" />
+  <path d="M9 18c6.218 0 10.5 -3.288 11 -12v-2h-4.014c-9 0 -11.986 4 -12 9c0 1 0 3 2 5h3z" />
+</svg>
+{% endif %}

_layouts/default.html

@@ -3,10 +3,14 @@
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf-8">
-    <title>{{ page.title }} - {{ site.title }}</title>
+    <title>{{ page.title }}</title>
+    {% include fonts.html %}
     <link rel="stylesheet" href="{{ "/assets/stylesheets/application.css" | relative_url }}">
   </head>
   <body>
-    {{ content }}
+    <div class="container mx-auto">
+      {% include header.html %}
+      {{ content }}
+    </div>
   </body>
 </html>

_layouts/post.html

@@ -2,17 +2,18 @@
 layout: default
 ---
 
-<div class="boundary">
+<div class="container mx-auto">
 
-  <div>
-    <div class="mb-5">
-      <h1 class="text-3xl font-bold mb-1 text-gray-800">{{ page.title }}</h1>
-      <small class="text-gray-600">{{ page.date | date: "%-d %B %Y" }}</small>
-    </div>
-
-    <div class="prose">
-      {{content}}
+  <div class="flex flex-col items-center mb-5 mt-10 space-y-2">
+    <h1 class="text-3xl font-bold text-gray-800">{{ page.title }}</h1>
+    <div class="flex space-x-3 text-gray-600 text-sm">
+      Planted on {{ page.created_date | date_to_string }}{% if page.updated_date %}, Last tended on {{ page.updated_date | date_to_string }}{% endif %}
     </div>
+  </div>
 
+  <div class="prose mx-auto">
+    {{content}}
   </div>
+
+  <div class="mt-20"></div>
 </div>

_posts/2024-01-28-revisiting-the-self-and-singleton-class-in-ruby.md → _posts/2024-01-28-the-self-and-singleton-class-in-ruby.md

@@ -1,7 +1,10 @@
 ---
 layout: post
-title: Revisiting the self and singleton class in Ruby
-date: 2024-01-28 23:10:18 UTC
+category: notes
+stage: seedlings
+title: The self and singleton class in Ruby
+created_date: 2024-01-28
+updated_date: 2024-08-06
 ---
 
 In Ruby, everything is an object, and every object has an anonymous class, which defines the methods the object can respond to. This anonymous class is called the _singleton class_.

about.html

@@ -0,0 +1,8 @@
+---
+layout: default
+title: About
+---
+
+<div class="py-12 px-3">
+  This page is a work in progress.
+</div>

index.html

@@ -1,26 +1,29 @@
 ---
 layout: default
-title: Home
+title: Yaodong Zhao
 ---
 
-<div class="boundary">
-    <div class="flex flex-col items-center">
-        {% for post in site.posts %}
-            <div class="bg-white shadow rounded-lg border p-6 max-w-2xl w-full">
-                <p class="text-gray-500 text-sm mb-2 text-center">{{ post.date | date_to_string }}</p>
-                <a href="{{ post.url }}">
-                    <h1 class="text-3xl font-bold mb-4 text-gray-800 text-center">
-                        {{ post.title }}
-                    </h1>
-                </a>
-                <div class="text-gray-800 mb-5">
+<div class="py-12 px-3">
+    <div class="mb-5 px-2">
+        <h1 class="flex space-x-1 items-center mb-2">
+            <span class="font-bold text-lg">Notes</span>
+            <img src="{{ '/assets/images/arrow-right.svg' | asset_path }}" class="h-6 w-auto">
+        </h1>
+        <p class="text-stone-500">Loose, unopinionated notes on things.</p>
+    </div>
+    <div class="grid grid-cols-2 gap-4">
+        {% assign posts = site.posts | where: "category", "notes" | sort: "updated_date" | reverse | slice: 0, 10 %}
+        {% for post in posts %}
+            <div class="flex flex-col space-y-1 bg-white border px-3 pb-3 pt-5 rounded-lg">
+                <div class="flex space-x-1 items-center">
+                    <span>{% include post-icon.html stage=post.stage %}</span>
+                    <a class="text-xl font-semibold" href="{{ post.url }}">{{ post.title }}</a>
+                </div>
+                <div class="text-stone-500 px-2">
                     {{ post.excerpt }}
                 </div>
-                <div class="text-center">
-                    <a href="{{ post.url }}"
-                       class="bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm hover:bg-gray-300 transition duration-300">
-                        Read more
-                    </a>
+                <div class="text-right mb-5 px-2">
+                    <a href="{{ post.url }}" class="text-sm text-stone-500">Read more</a>
                 </div>
             </div>
         {% endfor %}