feat: lots of things

components/CommitStatBox.vue

@@ -2,25 +2,21 @@
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc.js";
 import tz from "dayjs/plugin/timezone.js";
-import type { GithubPushEvent } from "@/shared/github";
+import type { GithubCommit, GithubPushEvent } from "@/shared/github";
 import type { Ref } from "vue";
 
 const FEED_URL = "https://api.github.com/users/potatoeggy/events";
 
 const results = (await useFetch(FEED_URL)).data as Ref<GithubPushEvent[]>;
 
-const imgUrl = ref("");
-const href = ref("");
-for (const r of results.value) {
-  if (r.type === "PushEvent") {
-    {
-      const latest = r.payload.commits[0];
-      imgUrl.value = `https://opengraph.githubassets.com/hash/${r.repo.name}/commit/${latest.sha}`;
-      href.value = `https://github.com/${r.repo.name}/commit/${latest.sha}`;
-    }
-    break;
-  }
-}
+const latestEvent = results.value.find(
+  (event) => event.type === "PushEvent"
+) as GithubPushEvent;
+const latestCommit = latestEvent.payload.commits[0];
+const imgUrl = `https://opengraph.githubassets.com/hash/${latestEvent.repo.name}/commit/${latestCommit.sha}`;
+const href = `https://github.com/${latestEvent.repo.name}/commit/${latestCommit.sha}`;
+
+const [title, description] = latestCommit.message.split("\n\n");
 </script>
 
 <template>
@@ -31,7 +27,13 @@ for (const r of results.value) {
       title="Latest commit"
       :clearstyles="true"
     >
-      <img class="m-0 w-full h-full" :src="imgUrl" v-if="imgUrl !== ''" />
+      <img class="m-0 w-full h-full" :src="imgUrl" />
+      <!--
+        <div>
+        <h2>{{ title }}</h2>
+        <p v-if="description">{{ description }}</p>
+      </div>
+      -->
     </HomeStatBox>
   </div>
 </template>