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>

components/HomeStatBox.vue

@@ -1,11 +1,19 @@
 <script setup lang="ts">
 import type { Color } from "csstype";
 
-const { href, color = "pink" } = defineProps<{
+const {
+  href,
+  color = "pink",
+  title,
+  clearstyles = false,
+} = defineProps<{
   href?: string;
   color?: Color;
   title?: string;
+  clearstyles?: boolean;
 }>();
+
+const padding = clearstyles ? "0" : "1rem";
 </script>
 
 <template>
@@ -26,12 +34,13 @@ const { href, color = "pink" } = defineProps<{
    * mobile
    */
   width: 28rem;
+  height: 16.25rem;
   border: 0.5rem solid v-bind(color);
   border-radius: 0.5rem;
 }
 
 .main-content {
-  padding: 1rem;
+  padding: v-bind(padding);
   padding-top: 0;
 }
 

tsconfig.json

@@ -1,5 +1,23 @@
 {
-  // https://v3.nuxtjs.org/concepts/typescript
   "extends": "./.nuxt/tsconfig.json",
-  "compilerOptions": {"esModuleInterop": true}
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "useDefineForClassFields": true,
+    "strictPropertyInitialization": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "alwaysStrict": true
+  }
 }