chore: switch away from reactivity transform

also use a released version of nuxt

components/HomeStatBox.vue

@@ -1,30 +1,21 @@
 <script setup lang="ts">
 import type { Color, ViewportLength } from "csstype";
 
-// fix ReferenceError: _unref is not defined
-// https://github.com/nuxt/framework/issues/5546
-import { unref as _unref } from "vue";
+const props = withDefaults(
+  defineProps<{
+    href?: string;
+    id?: string;
+    color?: Color;
+    darkcolor?: Color;
+    title?: string;
+    clearstyles?: boolean;
+    forceheight?: ViewportLength<"rem">;
+  }>(),
+  { color: "pink", darkcolor: "#c88994", clearstyles: false }
+);
 
-const {
-  href,
-  id,
-  color = "pink",
-  darkcolor = "#c88994",
-  title,
-  clearstyles = false,
-  forceheight,
-} = defineProps<{
-  href?: string;
-  id?: string;
-  color?: Color;
-  darkcolor?: Color;
-  title?: string;
-  clearstyles?: boolean;
-  forceheight?: ViewportLength<"rem">;
-}>();
-
-const padding = clearstyles ? "0" : "1rem";
-const height = forceheight ?? "100%";
+const padding = props.clearstyles ? "0" : "1rem";
+const height = props.forceheight ?? "100%";
 
 // v-bind DOES NOT WORK on initial render
 // so unfortunately we have to use the old way
@@ -32,8 +23,8 @@ const height = forceheight ?? "100%";
 const cssVars = {
   "--padding": padding,
   "--height": height,
-  "--color": color,
-  "--darkcolor": darkcolor,
+  "--color": props.color,
+  "--darkcolor": props.darkcolor,
 };
 </script>
 

components/PostPreviewCard.vue

@@ -2,15 +2,15 @@
 import type { StoryParsedContent, BlogParsedContent } from "@/shared/types";
 import { calcReadingTime } from "@/shared/metadata";
 
-const { post, type, highlighttags } = defineProps<{
+const props = defineProps<{
   post: StoryParsedContent | BlogParsedContent;
   type: "stories" | "blog";
   highlighttags?: string[];
 }>();
 
-const readingTime = calcReadingTime(post);
+const readingTime = calcReadingTime(props.post);
 const descText =
-  type === "stories"
+  props.type === "stories"
     ? `${readingTime.words.total} words`
     : `${readingTime.minutes} min read`;
 </script>

components/ProjectCard.vue

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

components/Tag.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { dest, highlight = false } = defineProps<{
+const props = defineProps<{
   dest: string;
   highlight?: boolean;
 }>();

components/content/image.vue

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