feat: callout

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

components/content/Alert.vue

@@ -1,25 +1,32 @@
 <template>
-  <UiAlert class="[&:not(:first-child)]:mt-5" :class="[typeTwClass[type]]">
+  <UiAlert
+    class="[&:not(:first-child)]:mt-5 transition-all"
+    :class="[typeTwClass[type], to && 'cursor-pointer hover:bg-muted']"
+    @click="alertClick"
+  >
     <Icon v-if="icon && title" :name="icon" />
     <UiAlertTitle v-if="title" class="font-semibold">
       {{ title }}
     </UiAlertTitle>
     <UiAlertDescription>
       <div class="flex flex-row space-x-2">
-        <Icon v-if="icon && !title" :name="icon" class="self-center mb-[2px]" />
-        <span>
+        <Icon v-if="icon && !title" :name="icon" class="self-center mb-[2px] min-w-5" />
+        <span :class="[to && 'pr-3']">
           <slot />
         </span>
       </div>
+      <Icon v-if="to" name="lucide:arrow-up-right" class="absolute right-4 top-4" />
     </UiAlertDescription>
   </UiAlert>
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   title?: string;
   icon?: string;
   type?: 'info' | 'warning' | 'success' | 'danger';
+  to?: string;
+  target?: string;
 }>(), {
   type: 'info',
 });
@@ -30,4 +37,17 @@ const typeTwClass = {
   success: 'border-green-600 text-green-600 [&>svg]:text-green-600',
   danger: 'border-red-600 text-red-600 [&>svg]:text-red-600',
 };
+
+function alertClick() {
+  if (props.to) {
+    if (props.target) {
+      navigateTo(props.to, {
+        external: true,
+        open: { target: props.target },
+      });
+    } else {
+      navigateTo(props.to, { external: true });
+    }
+  }
+}
 </script>

components/content/Callout.vue

@@ -0,0 +1,13 @@
+<template>
+  <Alert :icon="icon" :to="to" :target="target">
+    <slot />
+  </Alert>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  icon?: string;
+  to?: string;
+  target?: string;
+}>();
+</script>

components/content/ProseCode.vue

@@ -50,8 +50,6 @@
 </template>
 
 <script setup lang="ts">
-import type { PropType } from 'vue';
-import { ref } from 'vue';
 import type { BuiltinLanguage } from 'shiki';
 
 const props = defineProps({

content/1.getting-started/1.aaa.md

@@ -18,6 +18,7 @@ This is only a **basic** *example* of what you can achieve with [Nuxt UI Pro](ht
 ---
 icon: i-heroicons-light-bulb
 title: Title
+to: https://ui.nuxt.com/pro/prose/callout
 ---
 Learn more on how to customize and structure a Nuxt UI Pro app!
 ::
@@ -34,8 +35,8 @@ Learn more on how to customize and structure a Nuxt UI Pro app!
 You can just start writing `.md` or `.yml` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated.
 The navigation will be automatically generated in the left aside and in the mobile menu. You will also be able to go through your content with full-text search.
 
-::callout{icon="i-heroicons-light-bulb"}
-This template relies on a [catch-all route](https://nuxt.com/docs/guide/directory-structure/pages#catch-all-route) but you can achieve the same thing with the [document-driven mode](https://content.nuxt.com/document-driven/introduction).
+::alert{icon="i-heroicons-light-bulb" to="https://nuxt.com/docs/guide/directory-structure/pages#catch-all-route" target="_blank" type="danger"}
+This template relies on a [catch-all route](https://nuxt.com/docs/guide/directory-structure/pages#catch-all-route) but you can achieve the same thing with the [docu me n t driven mode](https://content.nuxt.com/document-driven/introduction).
 ::
 
 ## App Configuration

package.json

@@ -8,6 +8,7 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
+    "typecheck": "nuxt typecheck",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
@@ -32,7 +33,8 @@
     "@vueuse/core": "^10.9.0",
     "@vueuse/nuxt": "^10.9.0",
     "eslint": "9.2.0",
+    "lucide-vue-next": "^0.379.0",
     "shiki": "^1.6.0",
     "vue-tsc": "^2.0.19"
   }
-}
+}