feat: add dark mode stats

components/BlogStatBox.vue

@@ -23,10 +23,11 @@ const prettyDate = latestDate.format("DD MMM YYYY");
     <HomeStatBox
       :href="latest._path"
       color="lightblue"
+      darkcolor="#497482"
       title="Latest blog post"
     >
       <h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
-      <p class="text-sm text-gray-500 m-0">
+      <p class="text-sm text-gray-500 dark:text-gray-400 m-0">
         {{ prettyDate }} · {{ latest.readingTime.text }}
       </p>
       <div class="tag-list mt-1">
@@ -51,15 +52,9 @@ const prettyDate = latestDate.format("DD MMM YYYY");
         </template>
       </ContentRenderer>
       -->
-      <p class="excerpt text-gray-600 text-base m-0 mt-5">
+      <p class="excerpt text-gray-600 dark:text-gray-300 text-base m-0 mt-5">
         {{ latest.description }} …
       </p>
     </HomeStatBox>
   </div>
 </template>
-
-<style scoped>
-article p {
-  color: gray;
-}
-</style>

components/CommitStatBox.vue

@@ -24,6 +24,7 @@ const [title, description] = latestCommit.message.split("\n\n");
     <HomeStatBox
       :href="href"
       color="lightgray"
+      darkcolor="slategray"
       title="Latest commit"
       :clearstyles="true"
     >

components/HomeStatBox.vue

@@ -8,12 +8,14 @@ import { unref as _unref } from "vue";
 const {
   href,
   color = "pink",
+  darkcolor = "#c88994",
   title,
   clearstyles = false,
   forceheight,
 } = defineProps<{
   href?: string;
   color?: Color;
+  darkcolor?: Color;
   title?: string;
   clearstyles?: boolean;
   forceheight?: ViewportLength<"rem">;
@@ -46,6 +48,10 @@ const height = forceheight ?? "auto";
   border-radius: 0.5rem;
 }
 
+html.dark .container {
+  border: 0.5rem solid v-bind(darkcolor);
+}
+
 .main-content {
   padding: v-bind(padding);
   padding-top: 0;
@@ -56,6 +62,10 @@ const height = forceheight ?? "auto";
   background: v-bind(color);
 }
 
+html.dark .title {
+  background: v-bind(darkcolor);
+}
+
 @media screen and (max-width: 600px) {
   .container {
     width: 90vw;

components/StoryStatBox.vue

@@ -20,9 +20,14 @@ const prettyDate = latestDate.format("DD MMM YYYY");
 
 <template>
   <div class="prose dark:prose-invert flex">
-    <HomeStatBox :href="latest._path" color="lightgreen" title="Latest story">
+    <HomeStatBox
+      :href="latest._path"
+      color="lightgreen"
+      darkcolor="#2c8a2c"
+      title="Latest story"
+    >
       <h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
-      <p class="text-sm text-gray-500 m-0">
+      <p class="text-sm text-gray-500 dark:text-gray-400 m-0">
         {{ prettyDate }} · {{ latest.readingTime.words }} words
       </p>
       <div class="tag-list mt-1">
@@ -47,7 +52,7 @@ const prettyDate = latestDate.format("DD MMM YYYY");
         </template>
       </ContentRenderer>
       -->
-      <p class="excerpt text-gray-600 text-base m-0 mt-5">
+      <p class="excerpt text-gray-600 dark:text-gray-300 text-base m-0 mt-5">
         {{ latest.description }} …
       </p>
     </HomeStatBox>
@@ -55,10 +60,6 @@ const prettyDate = latestDate.format("DD MMM YYYY");
 </template>
 
 <style scoped>
-article p {
-  color: gray;
-}
-
 h2 {
   word-break: break-all;
 }

components/Tag.vue

@@ -5,7 +5,7 @@ const { dest } = defineProps<{ dest: string }>();
 <template>
   <a :href="dest">
     <div
-      class="inline-block text-xs rounded-full py-1 px-2 mt-1 mr-1 bg-gray-300 dark:bg-gray-500;"
+      class="inline-block text-xs rounded-full py-1 px-2 mt-1 mr-1 bg-gray-300 dark:bg-gray-500"
     >
       <slot />
     </div>

data/projects.ts

@@ -1 +1,9 @@
-export default {};
+export const projects: Record<string, string> = {
+  public: "",
+  primoprod: "",
+  mandown: "",
+  noveldown: "",
+  eifueo: "",
+};
+
+export default projects;