components/BlogStatBox.vue

@@ -12,18 +12,19 @@ const docs = await queryContent<BlogParsedContent>("/blog")
   .where({ _draft: false })
   .find();
 
-const latest = docs.at(-1);
+const latest = docs.at(-1) as BlogParsedContent;
 
 const latestDate = dayjs(latest.date).utc();
 const prettyDate = latestDate.format("DD MMM YYYY");
 </script>
 
 <template>
-  <div class="prose dark:prose-invert">
+  <div class="prose dark:prose-invert flex">
     <HomeStatBox
       :href="latest._path"
       color="lightblue"
       title="Latest blog post"
+      :clearstyles="false"
     >
       <h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
       <p class="text-sm text-gray-500 m-0">

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 latestEvent = results.value.find(
-const href = ref("");
+  (event) => event.type === "PushEvent"
-for (const r of results.value) {
+) as GithubPushEvent;
-  if (r.type === "PushEvent") {
+const latestCommit = latestEvent.payload.commits[0];
-    {
+const imgUrl = `https://opengraph.githubassets.com/hash/${latestEvent.repo.name}/commit/${latestCommit.sha}`;
-      const latest = r.payload.commits[0];
+const href = `https://github.com/${latestEvent.repo.name}/commit/${latestCommit.sha}`;
-      imgUrl.value = `https://opengraph.githubassets.com/hash/${r.repo.name}/commit/${latest.sha}`;
+
-      href.value = `https://github.com/${r.repo.name}/commit/${latest.sha}`;
+const [title, description] = latestCommit.message.split("\n\n");
-    }
-    break;
-  }
-}
 </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>

components/HomeStatBox.vue

@@ -1,23 +1,30 @@
 <script setup lang="ts">
-import type { Color } from "csstype";
+import type { Color, ViewportLength } from "csstype";
+
+// fix ReferenceError: _unref is not defined
+// https://github.com/nuxt/framework/issues/5546
+import { unref as _unref } from "vue";
 
 const {
   href,
   color = "pink",
   title,
   clearstyles = false,
+  forceheight,
 } = defineProps<{
   href?: string;
   color?: Color;
   title?: string;
   clearstyles?: boolean;
+  forceheight?: ViewportLength<"rem">;
 }>();
 
 const padding = clearstyles ? "0" : "1rem";
+const height = forceheight ?? "auto";
 </script>
 
 <template>
-  <a class="no-underline" :href="href">
+  <a class="no-underline inline-block flex" :href="href">
     <div class="container box">
       <p class="m-0 w-full title">{{ title }}</p>
       <div class="main-content">
@@ -34,7 +41,7 @@ const padding = clearstyles ? "0" : "1rem";
    * mobile
    */
   width: 28rem;
-  height: 16.25rem;
+  height: v-bind(height);
   border: 0.5rem solid v-bind(color);
   border-radius: 0.5rem;
 }

components/StoryStatBox.vue

@@ -2,24 +2,24 @@
 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 { BlogParsedContent, StoryParsedContent } from "@/shared/types";
 
 dayjs.extend(utc);
 dayjs.extend(tz);
 
-const docs = await queryContent<BlogParsedContent>("/stories")
+const docs = await queryContent<StoryParsedContent>("/stories")
   .sort({ date: 1 })
   .where({ _draft: false })
   .find();
 
-const latest = docs.at(-1);
+const latest = docs.at(-1) as StoryParsedContent;
 
 const latestDate = dayjs(latest.date).utc();
 const prettyDate = latestDate.format("DD MMM YYYY");
 </script>
 
 <template>
-  <div class="prose dark:prose-invert">
+  <div class="prose dark:prose-invert flex">
     <HomeStatBox :href="latest._path" color="lightgreen" title="Latest story">
       <h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
       <p class="text-sm text-gray-500 m-0">

nuxt.config.ts

@@ -44,4 +44,6 @@ export default defineNuxtConfig({
   experimental: {
     reactivityTransform: true,
   },
+  target: "static",
+  ssr: true,
 });

pages/[...slug].vue

@@ -1,21 +1,40 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { BlogParsedContent, StoryParsedContent } from "@/shared/types";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc.js";
+import tz from "dayjs/plugin/timezone.js";
+
+dayjs.extend(utc);
+dayjs.extend(tz);
+
+type GeneralParsedContent = BlogParsedContent | StoryParsedContent;
+
+const route = useRoute();
+
+// we're not using ContentDoc because i need control
+const doc = await queryContent<GeneralParsedContent>(route.path).findOne();
+</script>
 
 <template>
-  <ContentDoc tag="article" class="prose dark:prose-invert">
+  <div class="container prose dark:prose-invert w-full">
-    <template #not-found>
+    <h1>{{ doc.title }}</h1>
-      <!-- 404 -->
+    <ContentRenderer tag="article" :value="doc" class="pt-0 w-full">
-      <main class="prose dark:prose-invert h-full">
+      <ContentRendererMarkdown :value="doc" />
-        <h1>404 - Not Found</h1>
+
-        <p>Maybe you can find somewhere else?</p>
+      <template #empty>
-      </main>
+        <p>No description found.</p>
       </template>
-  </ContentDoc>
+      <template #not-found>
+        <h1>404 - Not Found</h1>
+      </template>
+    </ContentRenderer>
+  </div>
 </template>
 
-<style>
+<style scoped>
-article {
+.container {
   width: 80%;
-  height: 100%;
+  max-width: 72ch;
   padding-top: 2rem;
 }
 

pages/index.vue

@@ -9,7 +9,7 @@ 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-center w-full flex-wrap gap-y-10">
+    <div class="flex justify-around items-stretch w-full flex-wrap gap-y-10">
       <BlogStatBox />
       <StoryStatBox />
       <CommitStatBox />