Add top posts functionality

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 {

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 }}

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);
+    }
+  }
+})();