[codex] Add homepage post and category lists

_includes/category-links.html

@@ -0,0 +1,29 @@
+{% assign show_count = include.show_count | default: true %}
+{% assign categories = site.data.navigation.sidebar-category %}
+
+<section class="homepage-section homepage-section--categories" aria-labelledby="categories-heading">
+  <div class="homepage-section-heading">
+    <h2 id="categories-heading">Categories</h2>
+    <a class="homepage-section-link" href="{{ '/categories/' | relative_url }}">View all</a>
+  </div>
+
+  {% if categories %}
+    <div class="homepage-category-grid">
+      {% for category in categories %}
+        {% assign category_slug = category.url | replace: "/", "" %}
+        {% assign category_posts = site.categories[category_slug] %}
+        {% assign category_count = category_posts | size %}
+
+        <a class="homepage-category-link" href="{{ category.url | relative_url }}">
+          <span class="homepage-category-title">{{ category.title }}</span>
+
+          {% if show_count %}
+            <span class="homepage-category-count">{{ category_count }} {% if category_count == 1 %}post{% else %}posts{% endif %}</span>
+          {% endif %}
+        </a>
+      {% endfor %}
+    </div>
+  {% else %}
+    <p class="homepage-empty">No categories configured.</p>
+  {% endif %}
+</section>

_includes/recent-posts.html

@@ -0,0 +1,52 @@
+{% assign posts_limit = include.limit | default: 5 %}
+{% assign visible_posts = site.posts | where_exp: "post", "post.hidden != true" %}
+
+<section class="homepage-section homepage-section--recent-posts" aria-labelledby="recent-posts-heading">
+  <div class="homepage-section-heading">
+    <h2 id="recent-posts-heading">Recent Posts</h2>
+  </div>
+
+  {% if visible_posts.size > 0 %}
+    <div class="homepage-post-list">
+      {% for post in visible_posts limit: posts_limit %}
+        {% assign title = post.title | markdownify | remove: "<p>" | remove: "</p>" | strip %}
+        {% assign excerpt = post.excerpt | markdownify | strip_html | strip | truncate: 140 %}
+        {% assign post_category = post.categories | first %}
+        {% assign category_title = post_category %}
+        {% assign category_url = post_category | prepend: "/" | append: "/" %}
+
+        {% if post_category %}
+          {% for nav_item in site.data.navigation.sidebar-category %}
+            {% assign nav_slug = nav_item.url | replace: "/", "" %}
+            {% if nav_slug == post_category %}
+              {% assign category_title = nav_item.title %}
+              {% assign category_url = nav_item.url %}
+            {% endif %}
+          {% endfor %}
+        {% endif %}
+
+        <article class="homepage-post-row">
+          <div class="homepage-post-main">
+            <h3 class="homepage-post-title">
+              <a href="{{ post.url | relative_url }}">{{ title }}</a>
+            </h3>
+
+            {% if excerpt != "" %}
+              <p class="homepage-post-excerpt">{{ excerpt }}</p>
+            {% endif %}
+          </div>
+
+          <div class="homepage-post-meta">
+            <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%Y.%m.%d" }}</time>
+
+            {% if post_category %}
+              <a href="{{ category_url | relative_url }}">{{ category_title }}</a>
+            {% endif %}
+          </div>
+        </article>
+      {% endfor %}
+    </div>
+  {% else %}
+    <p class="homepage-empty">No posts yet.</p>
+  {% endif %}
+</section>

assets/css/homepage.scss

@@ -134,6 +134,126 @@ body.layout--homepage {
   margin: 0 0 20px;
 }
 
+.homepage-section {
+  margin-top: 40px;
+}
+
+.homepage-section-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.homepage-section-heading h2 {
+  margin: 0;
+}
+
+.homepage-section-link {
+  flex: 0 0 auto;
+  font-size: 15px;
+  line-height: 1.4;
+}
+
+.homepage-post-list {
+  border-top: 1px solid #dde5ea;
+}
+
+.homepage-post-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 132px;
+  gap: 24px;
+  padding: 20px 0;
+  border-bottom: 1px solid #dde5ea;
+}
+
+.homepage-post-title {
+  margin: 0 0 8px;
+  font-size: 18px;
+  line-height: 1.35;
+}
+
+.homepage-post-title a {
+  color: #043361;
+  text-decoration: none;
+}
+
+.homepage-post-title a:hover {
+  color: #2476a8;
+  text-decoration: underline;
+}
+
+.homepage-post-excerpt {
+  margin: 0;
+  color: #4f5d67;
+  font-size: 15px;
+  line-height: 1.55;
+}
+
+.homepage-post-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-end;
+  color: #667985;
+  font-size: 14px;
+  line-height: 1.35;
+  text-align: right;
+}
+
+.homepage-post-meta a {
+  color: #2476a8;
+}
+
+.homepage-category-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  border-top: 1px solid #dde5ea;
+}
+
+.homepage-category-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 48px;
+  padding: 12px 0;
+  border-bottom: 1px solid #dde5ea;
+  color: #043361;
+  text-decoration: none;
+}
+
+.homepage-category-link:nth-child(odd) {
+  padding-right: 18px;
+}
+
+.homepage-category-link:nth-child(even) {
+  padding-left: 18px;
+}
+
+.homepage-category-link:hover {
+  color: #2476a8;
+  text-decoration: none;
+}
+
+.homepage-category-title {
+  font-size: 16px;
+  line-height: 1.35;
+}
+
+.homepage-category-count {
+  flex: 0 0 auto;
+  color: #667985;
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.homepage-empty {
+  color: #667985;
+  font-size: 15px;
+}
+
 @media (prefers-color-scheme: dark) {
   body.layout--homepage {
     background: #20212b;
@@ -173,6 +293,30 @@ body.layout--homepage {
     border-color: #93d8f7;
     color: #93d8f7;
   }
+
+  .homepage-post-list,
+  .homepage-post-row,
+  .homepage-category-grid,
+  .homepage-category-link {
+    border-color: #3b4650;
+  }
+
+  .homepage-post-title a,
+  .homepage-category-link {
+    color: #dce9ef;
+  }
+
+  .homepage-post-title a:hover,
+  .homepage-category-link:hover {
+    color: #93d8f7;
+  }
+
+  .homepage-post-excerpt,
+  .homepage-post-meta,
+  .homepage-category-count,
+  .homepage-empty {
+    color: #aebac3;
+  }
 }
 
 @media print, screen and (max-width: 960px) {
@@ -192,6 +336,18 @@ body.layout--homepage {
     max-width: none;
     padding: 28px 0 40px;
   }
+
+  .homepage-post-row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 10px;
+  }
+
+  .homepage-post-meta {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: left;
+  }
 }
 
 @media print, screen and (max-width: 480px) {
@@ -211,4 +367,23 @@ body.layout--homepage {
   .homepage-content {
     font-size: 16px;
   }
+
+  .homepage-section-heading {
+    display: block;
+  }
+
+  .homepage-section-link {
+    display: inline-block;
+    margin-top: 6px;
+  }
+
+  .homepage-category-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .homepage-category-link:nth-child(odd),
+  .homepage-category-link:nth-child(even) {
+    padding-right: 0;
+    padding-left: 0;
+  }
 }

index.html

@@ -34,3 +34,7 @@ <h2>Learning Topics</h2>
 <h2>Research Interests</h2>
 
 <p>I am interested in the intersection of learning sciences, educational technology, and human-centered AI. More specifically, I want to study how learners interact with intelligent tools, how those tools shape learning processes, and how design decisions can make AI systems more explainable, useful, and accountable in educational contexts.</p>
+
+{% include recent-posts.html limit=5 %}
+
+{% include category-links.html show_count=true %}