From 3ced4c68855bb5f07a533ea4819093178e9bab23 Mon Sep 17 00:00:00 2001
From: Alex Selimov <alex@alexselimov.com>
Date: Mon, 15 Jun 2026 15:49:01 -0400
Subject: [PATCH] Add top posts functionality

---
 assets/herman.css   |  4 ++--
 layouts/index.html  | 10 +++++++++-
 static/top_posts.js | 40 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 static/top_posts.js

diff --git a/assets/herman.css b/assets/herman.css
index 9bf7f0c..1eeafdf 100644
--- a/assets/herman.css
+++ b/assets/herman.css
@@ -121,11 +121,11 @@ blockquote {
 }
 
 ul.blog-posts {
-  list-style-type: none;
+  list-style-type: disc;
   padding: unset;
 }
 ul.blog-posts li {
-  display: flex;
+  display: list-item;
   flex-direction: column;
 }
 ul.blog-posts li span {
diff --git a/layouts/index.html b/layouts/index.html
index 8d7b9b0..6f4a8b1 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -15,8 +15,16 @@
 
   <p><a href="/posts/">All posts →</a></p>
 
+  <h2>My top posts</h2>
+  <ul class="blog-posts" id="top-posts">
+  </ul>
   <h2> Activity map</h2>
   {{ partial "git-heatmap.html" . }}
-
 </content>
+
+<script>
+  window.UPVOTE_API = "{{ .Site.Params.upvoteApi }}";
+  window.NUM_BEST = "{{ .Site.Params.numBest }}"
+</script>
+<script src="/top_posts.js"></script>
 {{ end }}
diff --git a/static/top_posts.js b/static/top_posts.js
new file mode 100644
index 0000000..f534657
--- /dev/null
+++ b/static/top_posts.js
@@ -0,0 +1,40 @@
+(async function () {
+  console.log("Starting top_posts");
+  const API = window.UPVOTE_API;
+  const NUM_BEST = window.NUM_BEST;
+
+  const res = await fetch(`${API}/posts/best?top=${NUM_BEST}`, {
+    credentials: "include",
+  });
+
+  const data = await res.json();
+
+  const URL = window.location.origin;
+  const ul = document.getElementById("top-posts");
+  for (post of data) {
+    const postUrl = post.slug.replace("post-", "");
+    const pageUrl = `/posts/${postUrl}`;
+
+    try {
+      const pageResponse = await fetch(pageUrl);
+      const html = await pageResponse.text();
+      const doc = new DOMParser().parseFromString(html, "text/html");
+      const title =
+        doc.querySelector('meta[property="og:title"]')?.content ||
+        doc.title ||
+        slug;
+
+      const li = document.createElement("li");
+
+      li.innerHTML = `
+        <a href="/posts/${postUrl}">
+            ${title}
+
+        </a>
+      `;
+      ul.appendChild(li);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+})();