feat: add site box

also make mobile easier to see

components/BlogStatBox.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc.js";
+import tz from "dayjs/plugin/timezone.js";
+import type { BlogParsedContent } from "@/shared/types";
+
+dayjs.extend(utc);
+dayjs.extend(tz);
+
+const docs = await queryContent<BlogParsedContent>("/blog")
+  .sort({ date: 1 })
+  .where({ _draft: false })
+  .find();
+
+const latest = docs.at(-1);
+
+const latestDate = dayjs(latest.date).utc();
+const prettyDate = latestDate.format("DD MMM YYYY");
+</script>
+
+<template>
+  <div class="prose dark:prose-invert">
+    <HomeStatBox
+      :href="latest._path"
+      color="lightblue"
+      title="Latest blog post"
+    >
+      <h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
+      <p class="text-sm text-gray-500 m-0">
+        {{ prettyDate }} · {{ latest.readingTime.text }}
+      </p>
+      <div class="tag-list mt-1">
+        <Tag v-for="(tag, index) in latest.tags" :key="index">{{ tag }}</Tag>
+      </div>
+      <!--
+      <ContentRenderer
+        tag="article"
+        :value="latest"
+        :excerpt="true"
+        class="pt-0 w-full"
+      >
+        <ContentRendererMarkdown :value="latest" :excerpt="true" />
+        <template #empty>
+          <p>No description found.</p>
+        </template>
+      </ContentRenderer>
+      -->
+      <p class="excerpt text-gray-600 text-base m-0 mt-5">
+        {{ latest.description }} …
+      </p>
+    </HomeStatBox>
+  </div>
+</template>
+
+<style scoped>
+article p {
+  color: gray;
+}
+</style>

components/CommitStatBox.vue

@@ -0,0 +1,5 @@
+<template>
+  <HomeStatBox color="lightgray">
+    <h2>Latest commit</h2>
+  </HomeStatBox>
+</template>

components/HomeStatBox.vue

@@ -1,15 +1,45 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { Color } from "csstype";
+
+const { href, color = "pink" } = defineProps<{
+  href?: string;
+  color?: Color;
+  title?: string;
+}>();
+</script>
 
 <template>
-  <div class="container">
-    <slot />
-  </div>
+  <a class="no-underline" :href="href">
+    <div class="container box">
+      <p class="m-0 w-full title">{{ title }}</p>
+      <div class="main-content"><slot /></div>
+    </div>
+  </a>
 </template>
 
 <style scoped>
 .container {
-  width: 10rem;
-  height: 5rem;
-  border: 0.5rem solid pink;
+  /* make sure width is good for fullscreen 1080p,
+   * fullscreen 1080p at 1.25 scaling,
+   * mobile
+   */
+  width: 28rem;
+  border: 0.5rem solid v-bind(color);
+  border-radius: 0.5rem;
+}
+
+.main-content {
+  padding: 1rem;
+  padding-top: 0;
+}
+
+.title {
+  background: v-bind(color);
+}
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 100%;
+  }
 }
 </style>

components/Navbar.vue

@@ -106,6 +106,11 @@ li.home-text {
   ul {
     gap: 0rem;
   }
+
+  nav {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 html.dark svg {

components/StoryStatBox.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+//const latest = await queryContent("stories").findOne();
+</script>
+
+<template>
+  <HomeStatBox color="lightgreen" title="Latest story"> </HomeStatBox>
+</template>

components/Tag.vue

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="inline-block text-xs rounded-full py-1 px-2 mt-1 mr-1 bg-gray-300 dark:bg-gray-500;"
+  >
+    <slot />
+  </div>
+</template>