run codemod

pnpm dlx codemod@0.18.7 nuxt/4/migration-recipe

docs/app/components/content/Callout.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from '#imports'
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'note' | 'warning'
+    title: string
+  }>(),
+  {
+    type: 'note',
+  },
+)
+
+const styles = computed(() => {
+  return {
+    note: {
+      container:
+        'bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
+      title: 'text-sky-900 dark:text-sky-400',
+      body: 'text-sky-800 [--tw-prose-background:var(--color-sky-50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300',
+    },
+    warning: {
+      container:
+        'bg-amber-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
+      title: 'text-amber-900 dark:text-amber-500',
+      body: 'text-amber-800 [--tw-prose-underline:var(--color-amber-400)] [--tw-prose-background:var(--color-amber-50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:var(--color-sky-700)] dark:prose-code:text-slate-300',
+    },
+  }[props.type]
+})
+</script>
+
+<template>
+  <div :class="['my-8 flex rounded-3xl p-6', styles.container]">
+    <!--    <IconComponent class="h-8 w-8 flex-none" />-->
+    <div class="ml-4 flex-auto">
+      <p :class="['m-0 font-display font-bold text-xl', styles.title]">
+        {{ title }}
+      </p>
+      <div :class="['prose mt-2.5', styles.body]">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

docs/app/components/content/GridPattern.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+defineProps<{
+  width: string
+  height: string
+  x: number
+  y: number
+  squares: boolean
+}>()
+</script>
+
+<template>
+  <svg aria-hidden="true" v-bind="$attrs">
+    <defs>
+      <pattern
+        :id="patternId"
+        :width="width"
+        :height="height"
+        patternUnits="userSpaceOnUse"
+        :x="x"
+        :y="y"
+      >
+        <path :d="`M.5 ${height}V.5H${width}`" fill="none" />
+      </pattern>
+    </defs>
+    <rect
+      width="100%"
+      height="100%"
+      :stroke-width="0"
+      :fill="`url(#${patternId})`"
+    />
+    <svg v-if="squares" :x="x" :y="y" class="overflow-visible">
+      <rect
+        v-for="square in squares"
+        :key="`${square[0]}-${square[1]}`"
+        width="width + 1"
+        height="height + 1"
+        :x="square[0] * width"
+        :y="square[1] * height"
+      />
+    </svg>
+  </svg>
+</template>

docs/app/components/content/Lead.vue

@@ -0,0 +1,3 @@
+<template>
+  <p class="lead"><slot mdc-unwrap="p" /></p>
+</template>

docs/app/components/content/ProseH2.vue

@@ -0,0 +1,7 @@
+<template>
+  <h2 :id="id"><slot /></h2>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>

docs/app/components/content/ProseH3.vue

@@ -0,0 +1,7 @@
+<template>
+  <h3 :id="id"><slot /></h3>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>

docs/app/components/content/ProseH4.vue

@@ -0,0 +1,7 @@
+<template>
+  <h4 :id="id"><slot /></h4>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>

docs/app/components/content/ProseH5.vue

@@ -0,0 +1,7 @@
+<template>
+  <h5 :id="id"><slot /></h5>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>

docs/app/components/content/ProseH6.vue

@@ -0,0 +1,7 @@
+<template>
+  <h6 :id="id"><slot /></h6>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>

docs/app/components/content/QuickLink.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string
+  href: string
+  title: string
+}>()
+</script>
+
+<template>
+  <div
+    class="group relative rounded-xl border border-slate-200 dark:border-slate-800"
+  >
+    <div
+      class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-sky-50)),var(--quick-links-hover-bg,var(--color-sky-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-sky-500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:var(--color-slate-800)]"
+    />
+    <div class="relative overflow-hidden rounded-xl p-6">
+      <slot name="icon" />
+      <h2
+        class="mt-4 font-display font-bold text-base text-slate-900 dark:text-white"
+      >
+        <NuxtLink :to="href">
+          <span class="absolute -inset-px rounded-xl" />
+          {{ title }}
+        </NuxtLink>
+      </h2>
+      <p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
+        <slot mdc-unwrap="p" />
+      </p>
+    </div>
+  </div>
+</template>

docs/app/components/content/QuickLinks.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2">
+    <slot> </slot>
+  </div>
+</template>

docs/app/components/content/VueSelect.vue

@@ -0,0 +1,7 @@
+<script setup>
+import VueSelect from '~/components/VueSelect.vue'
+</script>
+
+<template>
+  <VueSelect v-bind="$attrs" />
+</template>