add minutes and query params for the home

src/components/ResponsiveTimeUntil.vue

@@ -2,13 +2,16 @@
 import { onUnmounted, ref } from "vue"
 import { timeUntil } from "../services/time-until"
 
-const timeUntilTarget = timeUntil("2024-03-13T09:00:00.000Z")
+const props = defineProps<{ project?: string; target?: string }>()
 
-const yearsUntil = ref(timeUntilTarget.years)
+const timeUntilTarget = props.target ? timeUntil(props.target) : null
-const monthsUntil = ref(timeUntilTarget.months)
+
-const daysUntil = ref(timeUntilTarget.days)
+const yearsUntil = ref(timeUntilTarget?.years ?? 0)
-const hoursUntil = ref(timeUntilTarget.hours)
+const monthsUntil = ref(timeUntilTarget?.months ?? 0)
-const secondsUntil = ref(timeUntilTarget.seconds)
+const daysUntil = ref(timeUntilTarget?.days ?? 0)
+const hoursUntil = ref(timeUntilTarget?.hours ?? 0)
+const minutesUntil = ref(timeUntilTarget?.minutes ?? 0)
+const secondsUntil = ref(timeUntilTarget?.seconds ?? 0)
 
 const id = setInterval(() => {
   const timeUntilTarget = timeUntil("2024-03-13T09:00:00.000Z")
@@ -17,6 +20,7 @@ const id = setInterval(() => {
   monthsUntil.value = timeUntilTarget.months
   daysUntil.value = timeUntilTarget.days
   hoursUntil.value = timeUntilTarget.hours
+  minutesUntil.value = timeUntilTarget.minutes
   secondsUntil.value = timeUntilTarget.seconds
 }, 1000)
 
@@ -24,13 +28,16 @@ onUnmounted(() => clearInterval(id))
 </script>
 
 <template>
-  <section>
+  <h1 v-if="props.project">{{ props.project }}</h1>
-    <div>{{ yearsUntil }} years</div>
+  <section v-if="timeUntilTarget">
-    <div>{{ monthsUntil }} months</div>
+    <div v-if="yearsUntil > 0" class="count">{{ yearsUntil }} years</div>
-    <div>{{ daysUntil }} days</div>
+    <div v-if="monthsUntil > 0" class="count">{{ monthsUntil }} months</div>
-    <div>{{ hoursUntil }} hours</div>
+    <div v-if="daysUntil > 0" class="count">{{ daysUntil }} days</div>
-    <div>{{ secondsUntil }} seconds</div>
+    <div v-if="hoursUntil > 0" class="count">{{ hoursUntil }} hours</div>
+    <div v-if="minutesUntil > 0" class="count">{{ minutesUntil }} minutes</div>
+    <div v-if="secondsUntil > 0" class="count">{{ secondsUntil }} seconds</div>
   </section>
+  <section v-else>No target</section>
 </template>
 
 <style scoped>

src/router/router.ts

@@ -3,5 +3,15 @@ import { createRouter, createWebHashHistory } from "vue-router"
 
 export const router = createRouter({
   history: createWebHashHistory(),
-  routes: [{ path: "/", component: Home }],
+  routes: [
+    {
+      path: "/",
+      component: Home,
+      name: "Home",
+      props: (route) => ({
+        project: route.query.project,
+        target: route.query.target,
+      }),
+    },
+  ],
 })