From 5cc4447b1df891be0d067d3e57faa5c3609beffa Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Sun, 26 May 2024 22:06:34 +0800
Subject: [PATCH] feat(components): read more

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 components/content/Alert.vue                  |  7 ++---
 components/content/ReadMore.vue               | 27 +++++++++++++++++++
 .../3.writing/2.components.md                 | 26 ++++++++++++++++--
 package.json                                  |  2 +-
 4 files changed, 56 insertions(+), 6 deletions(-)
 create mode 100644 components/content/ReadMore.vue

diff --git a/components/content/Alert.vue b/components/content/Alert.vue
index eff83445..dc156a87 100644
--- a/components/content/Alert.vue
+++ b/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',
diff --git a/components/content/ReadMore.vue b/components/content/ReadMore.vue
new file mode 100644
index 00000000..df89e38c
--- /dev/null
+++ b/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>
diff --git a/content/1.getting-started/3.writing/2.components.md b/content/1.getting-started/3.writing/2.components.md
index c835438f..2a5358c2 100644
--- a/content/1.getting-started/3.writing/2.components.md
+++ b/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
diff --git a/package.json b/package.json
index 6b0bd89d..c3f71a30 100644
--- a/package.json
+++ b/package.json
@@ -60,4 +60,4 @@
     "shiki": "^1.6.0",
     "vue-tsc": "^2.0.19"
   }
-}
\ No newline at end of file
+}