chore: use reactive props

components/Date.vue

@@ -2,10 +2,10 @@
 import { getPrettyDate, getUtcDate } from "~~/shared/metadata";
 import type { AnyParsedContent } from "~~/shared/types";
 
-const props = defineProps<{ doc: AnyParsedContent }>();
+const { doc } = defineProps<{ doc: AnyParsedContent }>();
 
-const prettyDate = getPrettyDate(props.doc);
+const prettyDate = getPrettyDate(doc);
-const utcDate = getUtcDate(props.doc);
+const utcDate = getUtcDate(doc);
 </script>
 
 <template>

components/HomeStatBox.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
 import type { Color, ViewportLength } from "csstype";
 
-const props = withDefaults(
+const {
-  defineProps<{
+  color = "pink",
-    href?: string;
+  darkcolor = "#c88994",
-    id?: string;
+  clearstyles = false,
-    color?: Color;
+  ...props
-    darkcolor?: Color;
+} = defineProps<{
-    title?: string;
+  href?: string;
-    clearstyles?: boolean;
+  id?: string;
-    forceheight?: ViewportLength<"rem">;
+  color?: Color;
-  }>(),
+  darkcolor?: Color;
-  { color: "pink", darkcolor: "#c88994", clearstyles: false }
+  title?: string;
-);
+  clearstyles?: boolean;
+  forceheight?: ViewportLength<"rem">;
+}>();
 
-const padding = props.clearstyles ? "0" : "1rem";
+const padding = clearstyles ? "0" : "1rem";
 const height = props.forceheight ?? "100%";
 
 // v-bind DOES NOT WORK on initial render
@@ -23,8 +25,8 @@ const height = props.forceheight ?? "100%";
 const cssVars = {
   "--padding": padding,
   "--height": height,
-  "--color": props.color,
+  "--color": color,
-  "--darkcolor": props.darkcolor,
+  "--darkcolor": darkcolor,
 };
 </script>
 

components/Navbar.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import ColourPicker from "./ColourPicker.vue";
 import { navItems } from "@/data/navItems";
-
-const props = defineProps<{ activeItem?: string }>();
 </script>
 
 <template>
@@ -85,9 +83,15 @@ li.home-text {
 * {
   --trans: 0.2s ease;
   --box-trans-time: 0.4s;
-  transition: opacity var(--trans), transform var(--trans), gap var(--trans),
+  transition:
-    width var(--trans), box-shadow var(--box-trans-time) ease,
+    opacity var(--trans),
-    filter var(--trans), padding-left var(--trans), padding-right var(--trans);
+    transform var(--trans),
+    gap var(--trans),
+    width var(--trans),
+    box-shadow var(--box-trans-time) ease,
+    filter var(--trans),
+    padding-left var(--trans),
+    padding-right var(--trans);
 }
 
 @media screen and (max-width: 600px) {

components/PostPreviewCard.vue

@@ -4,15 +4,15 @@ import { calcReadingTime } from "@/shared/metadata";
 import { SpecialTags } from "@/data/specialTags";
 import IconStar from "@/assets/images/star.svg?component";
 
-const props = defineProps<{
+const { post, type } = defineProps<{
   post: AnyParsedContent;
   type: "stories" | "blog";
   highlighttags?: string[];
 }>();
 
-const readingTime = calcReadingTime(props.post);
+const readingTime = calcReadingTime(post);
 const descText =
-  props.type === "stories"
+  type === "stories"
     ? `${readingTime.words.total} words`
     : `${readingTime.minutes} min read`;
 </script>
@@ -22,10 +22,7 @@ const descText =
     class="break-words max-w-full rounded-lg p-4 shadow-md border border-2 border-gray-300 dark:border-gray-600"
   >
     <h3 class="m-0 flex items-center gap-1.5">
-      <a
+      <a :href="`/tags/${type}/featured`" v-if="post.tags.includes('featured')">
-        :href="`/tags/${props.type}/featured`"
-        v-if="post.tags.includes('featured')"
-      >
         <IconStar class="fill-yellow-500 outline-none" />
       </a>
       <a

components/ProjectCard.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import type { Project } from "@/data/projects";
 import { unref as _unref } from "vue";
-const props = defineProps<{
+const { project } = defineProps<{
   project: Project;
   reverse?: boolean;
 }>();
 
-const imgUrl = props.project.img
+const imgUrl = project.img ? `url(/images/projects/${project.img})` : "none";
-  ? `url(/images/projects/${props.project.img})`
-  : "none";
 </script>
 
 <template>

components/ServiceCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
+const { img } = defineProps<{
   name: string;
   href: string;
   img: string;
@@ -7,7 +7,7 @@ const props = defineProps<{
   broken?: boolean;
 }>();
 
-const imgUrl = `/images/services/${props.img}`;
+const imgUrl = `/images/services/${img}`;
 </script>
 
 <template>
@@ -17,7 +17,7 @@ const imgUrl = `/images/services/${props.img}`;
   >
     <div class="card flex flex-col items-center justify-around">
       <img class="m-0" :src="imgUrl" :alt="`${name} logo`" />
-      <h3 class="m-0">{{ props.name }}</h3>
+      <h3 class="m-0">{{ name }}</h3>
       <p class="desc-text text-gray-600 dark:text-gray-200"><slot /></p>
     </div>
   </a>

components/Tag.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
+const { highlight } = defineProps<{
   name: string;
   dest: string;
   highlight?: boolean;
@@ -9,7 +9,7 @@ const props = defineProps<{
 const isLinkableTag = true;
 const tagClass = [
   "inline-block text-xs rounded-lg py-1 px-2 mt-1 mr-1 transition border border-pink-200 dark:border-pink-900 border-2 font-medium no-underline",
-  { "bg-pink-200 dark:bg-pink-900": props.highlight },
+  { "bg-pink-200 dark:bg-pink-900": highlight },
   { "shadow-md": isLinkableTag },
 ];
 </script>

components/content/ProseImg.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{ src: string; alt?: string }>(), {
+const { src, alt = "" } = defineProps<{ src: string; alt?: string }>();
-  alt: "",
-});
 
-const src = props.src;
 const imgSrc =
   src.startsWith("http://") || src.startsWith("https://")
     ? src