feat: add commit box

components/CommitStatBox.vue

@@ -2,40 +2,36 @@
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc.js";
 import tz from "dayjs/plugin/timezone.js";
-import type { BlogParsedContent } from "@/shared/types";
+import type { 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("");
-
-dayjs.extend(utc);
-dayjs.extend(tz);
-
-const { pending, data: results } = useLazyFetch(FEED_URL);
-
-watch(results, (newResults) => {
-  for (const event of newResults) {
+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;
   }
-});
+}
 </script>
 
 <template>
   <div class="prose dark:prose-invert">
     <HomeStatBox
-      href="https://github.com"
+      :href="href"
       color="lightgray"
       title="Latest commit"
+      :clearstyles="true"
     >
-      <h2 class="m-0 mt-4 mb-1">Commit name</h2>
-      <p class="text-sm text-gray-500 m-0">date · project</p>
-      <p class="excerpt text-gray-600 text-base m-0 mt-5">description</p>
-      <img :src="imgUrl" v-if="imgUrl !== ''" />
+      <img class="m-0 w-full h-full" :src="imgUrl" v-if="imgUrl !== ''" />
     </HomeStatBox>
   </div>
 </template>
-
-<style scoped>
-article p {
-  color: gray;
-}
-</style>