From 3c7d81fd36d5b2f32644dbb12965f18e9556a21c Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Tue, 9 Aug 2022 16:25:23 -0400
Subject: [PATCH] feat: add dark mode stats

---
 components/BlogStatBox.vue   | 11 +++--------
 components/CommitStatBox.vue |  1 +
 components/HomeStatBox.vue   | 10 ++++++++++
 components/StoryStatBox.vue  | 15 ++++++++-------
 components/Tag.vue           |  2 +-
 data/projects.ts             | 10 +++++++++-
 6 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/components/BlogStatBox.vue b/components/BlogStatBox.vue
index 27c6cde..688428c 100644
--- a/components/BlogStatBox.vue
+++ b/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>
diff --git a/components/CommitStatBox.vue b/components/CommitStatBox.vue
index 6746b43..b89f0ef 100644
--- a/components/CommitStatBox.vue
+++ b/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"
     >
diff --git a/components/HomeStatBox.vue b/components/HomeStatBox.vue
index 8c535e1..34263de 100644
--- a/components/HomeStatBox.vue
+++ b/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;
diff --git a/components/StoryStatBox.vue b/components/StoryStatBox.vue
index 2c92fd3..e7bc6c2 100644
--- a/components/StoryStatBox.vue
+++ b/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;
 }
diff --git a/components/Tag.vue b/components/Tag.vue
index ab54322..ce4e61b 100644
--- a/components/Tag.vue
+++ b/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>
diff --git a/data/projects.ts b/data/projects.ts
index ff8b4c5..5f4aa34 100644
--- a/data/projects.ts
+++ b/data/projects.ts
@@ -1 +1,9 @@
-export default {};
+export const projects: Record<string, string> = {
+  public: "",
+  primoprod: "",
+  mandown: "",
+  noveldown: "",
+  eifueo: "",
+};
+
+export default projects;