feat(components): read more

Signed-off-by: ZTL-UwU <[email protected]>

components/content/Alert.vue

@@ -24,15 +24,16 @@
 const props = withDefaults(defineProps<{
   title?: string;
   icon?: string;
-  type?: 'info' | 'warning' | 'success' | 'danger';
+  type?: 'default' | 'info' | 'warning' | 'success' | 'danger';
   to?: string;
   target?: string;
 }>(), {
-  type: 'info',
+  type: 'default',
 });
 
 const typeTwClass = {
-  info: '',
+  default: '',
+  info: 'border-sky-600 text-sky-600 [&>svg]:text-sky-600',
   warning: 'border-amber-600 text-amber-600 [&>svg]:text-amber-600',
   success: 'border-green-600 text-green-600 [&>svg]:text-green-600',
   danger: 'border-red-600 text-red-600 [&>svg]:text-red-600',

components/content/ReadMore.vue

@@ -0,0 +1,27 @@
+<template>
+  <Alert :to="to" :target="target" icon="lucide:bookmark">
+    Read more in <span class="capitalize font-semibold">{{ computedTitle }}</span>
+  </Alert>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title?: string;
+  to: string;
+  target?: string;
+}>();
+
+function createBreadcrumb(link: string = 'here') {
+  if (link.startsWith('http'))
+    return link.replace(/^https?:\/\//, '');
+
+  return link
+    .split('/')
+    .filter(Boolean)
+    .join(' > ')
+    .replace('Api', 'API');
+}
+
+// Guess title from link!
+const computedTitle = computed<string>(() => props.title || createBreadcrumb(props.to));
+</script>

content/1.getting-started/3.writing/2.components.md

@@ -11,7 +11,11 @@ icon: 'lucide:component'
 ::code-group
   ::preview{filename="Preview"}
     ::alert{icon="lucide:info"}
-      An **info (default)** alert with `code` and a [link](/).
+      An **default** alert with `code` and a [link](/).
+    ::
+
+    ::alert{type="info" icon="lucide:info"}
+      An **info** alert with `code` and a [link](/).
     ::
 
     ::alert{type="success" icon="lucide:lightbulb"}
@@ -37,7 +41,11 @@ icon: 'lucide:component'
 
   ```md [Code]
   ::alert{icon="lucide:info"}
-    An **info (default)** alert with `code` and a [link](/).
+    An **default** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="info" icon="lucide:info"}
+    An **info** alert with `code` and a [link](/).
   ::
 
   ::alert{type="success" icon="lucide:lightbulb"}
@@ -66,6 +74,20 @@ icon: 'lucide:component'
 
 `::callout` is an alias to `::alert`.
 
+### Read More
+
+::code-group
+  ::preview{filename="Preview"}
+    :read-more{to="/getting-started/writing/markdown"}
+    :read-more{title="Nuxt website" to="https://nuxt.com/"}
+  ::
+
+  ```md [Code]
+  :read-more{to="/getting-started/writing/markdown"}
+  :read-more{title="Nuxt website" to="https://nuxt.com/"}
+  ```
+::
+
 ### Code Group
 
 ::code-group

package.json

@@ -60,4 +60,4 @@
     "shiki": "^1.6.0",
     "vue-tsc": "^2.0.19"
   }
-}
+}