components/BlogStatBox.vue

@@ -7,6 +7,9 @@ import type { BlogParsedContent } from "@/shared/types";
 dayjs.extend(utc);
 dayjs.extend(tz);
 
+// TODO: make queryContent async so it doesn't delay
+// execution of the template
+
 const docs = await queryContent<BlogParsedContent>("/blog")
   .sort({ date: 1 })
   .where({ _draft: false })

components/CommitStatBox.vue

@@ -6,17 +6,19 @@ import type { GithubCommit, GithubPushEvent } from "@/shared/github";
 import type { Ref } from "vue";
 
 const FEED_URL = "https://api.github.com/users/potatoeggy/events";
+const imgUrl = ref("");
+const href = ref("");
 
-const results = (await useFetch(FEED_URL)).data as Ref<GithubPushEvent[]>;
+onMounted(async () => {
-
+  const results = (await useFetch(FEED_URL, { initialCache: false }))
+    .data as Ref<GithubPushEvent[]>;
   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}`;
+  imgUrl.value = `https://opengraph.githubassets.com/hash/${latestEvent.repo.name}/commit/${latestCommit.sha}`;
-const href = `https://github.com/${latestEvent.repo.name}/commit/${latestCommit.sha}`;
+  href.value = `https://github.com/${latestEvent.repo.name}/commit/${latestCommit.sha}`;
-
+});
-const [title, description] = latestCommit.message.split("\n\n");
 </script>
 
 <template>
@@ -35,6 +37,7 @@ const [title, description] = latestCommit.message.split("\n\n");
         <p v-if="description">{{ description }}</p>
       </div>
       -->
+      <noscript> Enable JavaScript to see the latest commit! </noscript>
     </HomeStatBox>
   </div>
 </template>

components/HomeStatBox.vue

@@ -22,12 +22,22 @@ const {
 }>();
 
 const padding = clearstyles ? "0" : "1rem";
-const height = forceheight ?? "auto";
+const height = forceheight ?? "100%";
+
+// v-bind DOES NOT WORK on initial render
+// so unfortunately we have to use the old way
+
+const cssVars = {
+  "--padding": padding,
+  "--height": height,
+  "--color": color,
+  "--darkcolor": darkcolor,
+};
 </script>
 
 <template>
-  <a class="no-underline inline-block flex" :href="href">
+  <a class="no-underline inline-block flex flex-col items-stretch" :href="href">
-    <div class="container box">
+    <div class="container box" :style="cssVars">
       <p class="m-0 w-full title">{{ title }}</p>
       <div class="main-content">
         <slot />
@@ -43,8 +53,8 @@ const height = forceheight ?? "auto";
    * mobile
    */
   width: 28rem;
-  height: v-bind(height);
+  height: var(--height);
-  border: 0.5rem solid v-bind(color);
+  border: 0.5rem solid var(--color);
   border-radius: 0.5rem;
   transition: transform 0.2s ease;
   box-shadow: 0 0.1rem 0.5rem 0 gray;
@@ -61,17 +71,17 @@ html.dark .container {
 }
 
 .main-content {
-  padding: v-bind(padding);
+  padding: var(--padding);
   padding-top: 0;
   overflow-wrap: break-word;
 }
 
 .title {
-  background: v-bind(color);
+  background: var(--color);
 }
 
 html.dark .title {
-  background: v-bind(darkcolor);
+  background: var(--dark-color);
 }
 
 @media screen and (max-width: 600px) {

pages/index.vue

@@ -9,7 +9,9 @@ useTitle("Home");
   <main class="flex flex-col items-center justify-around gap-8">
     <h1>Welcome!</h1>
     <p>What are you here to see?</p>
-    <div class="flex justify-around items-stretch w-full flex-wrap gap-y-10">
+    <div
+      class="flex justify-around items-stretch w-full flex-wrap gap-x-8 gap-y-10"
+    >
       <BlogStatBox />
       <StoryStatBox />
       <CommitStatBox />