From abe5c49ecc1a431e13ff28f12d0635c07afd41f5 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Sat, 25 May 2024 20:47:58 +0800
Subject: [PATCH] feat: add landing page

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 app.config.ts                                 |  77 ++++++++
 components/content/Alert.vue                  |   4 +-
 components/content/CodeCopy.vue               |  36 ++++
 components/content/CodeGroup.vue              |  71 +++++++
 components/content/CodeGroupHeader.vue        |  45 +++++
 components/content/Hero.vue                   |  61 ++++++
 components/content/Preview.vue                |  14 ++
 components/content/ProseCode.vue              |  54 +----
 components/layout/Aside.vue                   |   2 +-
 components/layout/AsideTree.vue               |   2 +-
 components/layout/AsideTreeItem.vue           |  15 +-
 components/layout/Header/Nav.vue              |   2 +-
 components/ui/separator/Separator.vue         |  20 ++
 components/ui/separator/index.ts              |   1 +
 components/ui/tabs/Tabs.vue                   |  15 ++
 components/ui/tabs/TabsContent.vue            |  22 +++
 components/ui/tabs/TabsList.vue               |  25 +++
 components/ui/tabs/TabsTrigger.vue            |  27 +++
 components/ui/tabs/index.ts                   |   4 +
 content/1.getting-started/1.Introduction.md   |  17 ++
 content/1.getting-started/1.aaa/1.aaa.md      | 186 ------------------
 .../1.getting-started/1.aaa/1.bbb/_dir.yml    |   2 -
 content/1.getting-started/1.aaa/2.bbb.md      |   7 -
 content/1.getting-started/1.aaa/_dir.yml      |   2 -
 content/1.getting-started/2.installation.md   |   7 +
 .../1.getting-started/3.writing/1.markdown.md |  13 ++
 .../3.writing/2.components.md                 | 185 +++++++++++++++++
 content/1.getting-started/3.writing/_dir.yml  |   3 +
 content/1.getting-started/_dir.yml            |   1 +
 content/1.getting-started/index.md            |   3 -
 content/2.api/1.configuration.md              |   7 +
 content/2.api/2.composables.md                |   7 +
 content/2.api/_dir.yml                        |   3 +
 content/3.folder2/1.ccc.md                    |   3 -
 content/3.folder2/_dir.yml                    |   3 -
 content/index.md                              |  77 ++------
 layouts/default.vue                           |   2 +
 pages/[...slug].vue                           |   2 -
 pages/index.vue                               |  19 ++
 39 files changed, 722 insertions(+), 324 deletions(-)
 create mode 100644 components/content/CodeCopy.vue
 create mode 100644 components/content/CodeGroup.vue
 create mode 100644 components/content/CodeGroupHeader.vue
 create mode 100644 components/content/Hero.vue
 create mode 100644 components/content/Preview.vue
 create mode 100644 components/ui/separator/Separator.vue
 create mode 100644 components/ui/separator/index.ts
 create mode 100644 components/ui/tabs/Tabs.vue
 create mode 100644 components/ui/tabs/TabsContent.vue
 create mode 100644 components/ui/tabs/TabsList.vue
 create mode 100644 components/ui/tabs/TabsTrigger.vue
 create mode 100644 components/ui/tabs/index.ts
 create mode 100644 content/1.getting-started/1.Introduction.md
 delete mode 100644 content/1.getting-started/1.aaa/1.aaa.md
 delete mode 100644 content/1.getting-started/1.aaa/1.bbb/_dir.yml
 delete mode 100644 content/1.getting-started/1.aaa/2.bbb.md
 delete mode 100644 content/1.getting-started/1.aaa/_dir.yml
 create mode 100644 content/1.getting-started/2.installation.md
 create mode 100644 content/1.getting-started/3.writing/1.markdown.md
 create mode 100644 content/1.getting-started/3.writing/2.components.md
 create mode 100644 content/1.getting-started/3.writing/_dir.yml
 delete mode 100644 content/1.getting-started/index.md
 create mode 100644 content/2.api/1.configuration.md
 create mode 100644 content/2.api/2.composables.md
 create mode 100644 content/2.api/_dir.yml
 delete mode 100644 content/3.folder2/1.ccc.md
 delete mode 100644 content/3.folder2/_dir.yml
 create mode 100644 pages/index.vue

diff --git a/app.config.ts b/app.config.ts
index 88e86bd1..c27cf266 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -12,6 +12,19 @@ export default defineAppConfig({
       },
       darkModeToggle: true,
       nav: [{
+        title: 'Docs',
+        links: [{
+          title: 'Getting Started',
+          to: '/getting-started',
+          description: 'For the beautiful component design & docs design',
+          target: undefined,
+        }, {
+          title: 'API',
+          to: '/api',
+          description: 'For the vue port of shadcn-ui & some docs component source',
+          target: undefined,
+        }],
+      }, {
         title: 'Credits',
         links: [{
           title: 'shadcn-ui',
@@ -91,6 +104,7 @@ export default defineAppConfig({
         'yarn': 'vscode-icons:file-type-yarn',
         'bun': 'vscode-icons:file-type-bun',
         'yml': 'vscode-icons:file-type-yaml',
+        'json': 'vscode-icons:file-type-json',
         'terminal': 'lucide:terminal',
       },
     },
@@ -119,3 +133,66 @@ export default defineAppConfig({
     },
   },
 });
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    shadcnDocs?: {
+      site: {
+        name: string;
+      };
+      header: {
+        title: string;
+        showTitle: true;
+        logo: {
+          light: string;
+          dark: string;
+        };
+        darkModeToggle: true;
+        nav: ({
+          title: string;
+          to?: string;
+          target?: string;
+          links?: ({
+            title: string;
+            to: string;
+            target?: string;
+            description?: string;
+          })[];
+        })[];
+        links: ({
+          icon: string;
+          to: string;
+          target: string;
+        })[];
+      };
+      aside: {
+        useLevel: boolean;
+        collapse: boolean;
+      };
+      main: {
+        breadCrumb: boolean;
+        showTitle: boolean;
+        codeIcon: {
+          [key: string]: string;
+        };
+      };
+      footer: {
+        credits: string;
+        links: ({
+          icon?: string;
+          title?: string;
+          to: string;
+          target?: string;
+        })[];
+      };
+      toc: {
+        enable: boolean;
+        title: string;
+      };
+      search: {
+        enable: boolean;
+        inAside: boolean;
+      };
+    };
+  }
+}
diff --git a/components/content/Alert.vue b/components/content/Alert.vue
index d3ffb8ae..79b3f74d 100644
--- a/components/content/Alert.vue
+++ b/components/content/Alert.vue
@@ -4,13 +4,13 @@
     :class="[typeTwClass[type], to && 'cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-900']"
     @click="alertClick"
   >
-    <Icon v-if="icon && title" :name="icon" />
+    <Icon v-if="icon && title" :name="icon" size="16" />
     <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] min-w-5" />
+        <Icon v-if="icon && !title" :name="icon" size="16" class="self-center mb-[2px] min-w-5" />
         <span :class="[to && 'pr-3']">
           <slot />
         </span>
diff --git a/components/content/CodeCopy.vue b/components/content/CodeCopy.vue
new file mode 100644
index 00000000..e30a8f95
--- /dev/null
+++ b/components/content/CodeCopy.vue
@@ -0,0 +1,36 @@
+<template>
+  <span>
+    <Transition name="fade" mode="out-in">
+      <Icon
+        v-if="copied === false"
+        name="lucide:copy"
+        class="self-center cursor-pointer text-muted-foreground hover:text-primary"
+        @click="copyCode"
+      />
+      <Icon
+        v-else
+        ref="checkIconRef"
+        name="lucide:check"
+        class="self-center cursor-pointer text-muted-foreground hover:text-primary"
+      />
+    </Transition>
+  </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  code: string;
+}>();
+
+const { copy } = useClipboard({ source: props.code });
+const copied = ref(false);
+function copyCode() {
+  copy(props.code).then(
+    () => { copied.value = true; },
+  );
+}
+const checkIconRef = ref<HTMLElement>();
+onClickOutside(checkIconRef, () => {
+  copied.value = false;
+});
+</script>
diff --git a/components/content/CodeGroup.vue b/components/content/CodeGroup.vue
new file mode 100644
index 00000000..1572dc1a
--- /dev/null
+++ b/components/content/CodeGroup.vue
@@ -0,0 +1,71 @@
+<template>
+  <render class="[&:not(:first-child)]:mt-5" />
+</template>
+
+<script setup lang="ts">
+import CodeGroupHeader from './CodeGroupHeader.vue';
+
+const _slots = useSlots()?.default?.() || [];
+const activeTabIndex = ref(0);
+
+function isTag(slot: any, tag: string) {
+  return slot.type && slot.type.tag && slot.type.tag === tag;
+}
+
+function checkTag(slot: any) {
+  return isTag(slot, 'code-block') || isTag(slot, 'code') || isTag(slot, 'pre') || isTag(slot, 'preview');
+}
+
+function onChangeActiveTab(index: number) {
+  activeTabIndex.value = index;
+}
+
+const tabs = _slots
+  .filter(slot => checkTag(slot))
+  .map((slot, index) => {
+    return {
+      label: slot?.props?.filename || slot?.props?.label || `${index}`,
+      language: slot?.props?.language || null,
+      code: slot?.props?.code || '',
+    };
+  });
+
+function render() {
+  return h(
+    'div',
+    [
+      h(
+        CodeGroupHeader,
+        {
+          'activeTabIndex': activeTabIndex.value,
+          tabs,
+          'onUpdate:activeTabIndex': onChangeActiveTab,
+        },
+      ),
+      h(
+        'div',
+        _slots.map((slot, index) => {
+          if (slot.props && checkTag(slot))
+            slot.props.inGroup = true;
+          return h(
+            'div',
+            {
+              style: {
+                display: index === activeTabIndex.value ? 'block' : 'none',
+              },
+            },
+            [
+              checkTag(slot)
+                ? slot
+                : h(
+                  'div',
+                  [(slot.children as any)?.default?.() || h('div')],
+                ),
+            ],
+          );
+        }),
+      ),
+    ],
+  );
+}
+</script>
diff --git a/components/content/CodeGroupHeader.vue b/components/content/CodeGroupHeader.vue
new file mode 100644
index 00000000..8ddcc123
--- /dev/null
+++ b/components/content/CodeGroupHeader.vue
@@ -0,0 +1,45 @@
+<template>
+  <UiCard class="rounded-b-none border-b-0 p-0.5 flex text-sm">
+    <UiTabs v-if="tabs" :default-value="tabs[0].label">
+      <UiTabsList>
+        <UiTabsTrigger
+          v-for="({ label, language }, i) in tabs"
+          :key="`${i}${label}`"
+          :value="label"
+          class="flex"
+          @click="updateTabs(i)"
+        >
+          <Icon v-if="getIcon(label, language)" :name="getIcon(label, language)!" class="self-center mr-1.5" />
+          {{ label }}
+        </UiTabsTrigger>
+      </UiTabsList>
+    </UiTabs>
+    <CodeCopy v-show="selected.label !== 'Preview'" class="self-center ml-auto mr-3" :code="selected.code" />
+  </UiCard>
+  <slot name="footer" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  tabs: ({
+    label: string;
+    language: string;
+    code: string;
+  })[];
+  activeTabIndex: number;
+}>();
+
+const emit = defineEmits(['update:activeTabIndex']);
+const selected = computed(() => {
+  return props.tabs[props.activeTabIndex];
+});
+
+function updateTabs(index: number) {
+  emit('update:activeTabIndex', index);
+}
+
+const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon));
+function getIcon(label: string, language: string) {
+  return iconMap.get(label?.toLowerCase()) || iconMap.get(language);
+}
+</script>
diff --git a/components/content/Hero.vue b/components/content/Hero.vue
new file mode 100644
index 00000000..cd34ad7e
--- /dev/null
+++ b/components/content/Hero.vue
@@ -0,0 +1,61 @@
+<template>
+  <section class="mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20">
+    <NuxtLink
+      v-if="announcement"
+      :to="announcement.to"
+      :target="announcement.target"
+      class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
+    >
+      <template v-if="announcement.icon">
+        <Icon :name="announcement.icon" size="16" />
+        <UiSeparator class="mx-2 h-4" orientation="vertical" />
+      </template>
+      <span class="sm:hidden">{{ announcement.title }}</span>
+      <span class="hidden sm:inline">
+        {{ announcement.title }}
+      </span>
+      <Icon name="lucide:arrow-right" class="ml-1 h-4 w-4" />
+    </NuxtLink>
+
+    <h1 class="text-center text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]">
+      <ContentSlot :use="$slots.title" unwrap="p" />
+    </h1>
+    <span class="max-w-[750px] text-center text-lg text-muted-foreground sm:text-xl">
+      <ContentSlot :use="$slots.description" unwrap="p" />
+    </span>
+
+    <section class="flex w-full items-center justify-center space-x-4 py-4 md:pb-10">
+      <NuxtLink
+        v-for="(action, i) in actions"
+        :key="i"
+        :to="action.to"
+        :target="action.target"
+      >
+        <UiButton :variant="action.variant">
+          <Icon v-if="action.leftIcon" :name="action.leftIcon" class="mr-1" />
+          {{ action.name }}
+          <Icon v-if="action.rightIcon" :name="action.rightIcon" class="ml-1" />
+        </UiButton>
+      </NuxtLink>
+    </section>
+  </section>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  announcement?: {
+    to?: string;
+    target?: string;
+    icon?: string;
+    title: string;
+  };
+  actions: [{
+    name: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    variant?: 'default' | 'link' | 'destructive' | 'outline' | 'secondary' | 'ghost';
+    to: string;
+    target?: string;
+  }];
+}>();
+</script>
diff --git a/components/content/Preview.vue b/components/content/Preview.vue
new file mode 100644
index 00000000..e9d7301a
--- /dev/null
+++ b/components/content/Preview.vue
@@ -0,0 +1,14 @@
+<template>
+  <UiCard class="rounded-t-none p-3 bg-zinc-50 dark:bg-zinc-900">
+    <slot />
+  </UiCard>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  language?: undefined;
+  code?: undefined;
+  filename?: string;
+  inGroup?: true;
+}>();
+</script>
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
index 32124ea7..6ad2b810 100644
--- a/components/content/ProseCode.vue
+++ b/components/content/ProseCode.vue
@@ -1,47 +1,19 @@
 <template>
-  <UiCard class="[&:not(:first-child)]:mt-5 mb-5 overflow-hidden">
-    <div v-if="filename" class="p-3 border-b flex text-sm font-mono">
+  <UiCard class="[&:not(:first-child)]:mt-5 mb-5 overflow-hidden" :class="[inGroup && 'rounded-t-none']">
+    <div v-if="!inGroup && filename" class="p-3 border-b flex text-sm font-mono">
       <Icon v-if="icon" :name="icon" class="self-center mr-1.5" />
       {{ filename }}
       <span class="ml-auto mr-1">
-        <Transition name="fade" mode="out-in">
-          <Icon
-            v-if="copied === false"
-            name="lucide:copy"
-            class="self-center cursor-pointer text-muted-foreground hover:text-primary"
-            @click="copyCode"
-          />
-          <Icon
-            v-else
-            ref="checkIconRef"
-            name="lucide:check"
-            class="self-center cursor-pointer text-muted-foreground hover:text-primary"
-          />
-        </Transition>
+        <CodeCopy :code="code" />
       </span>
     </div>
     <UiScrollArea>
       <div
         class="p-3 bg-zinc-50 dark:bg-zinc-900 text-sm relative overflow-x-auto "
         :class="[`highlight-${language}`, !filename && 'pr-10']"
-        @mouseenter="hovered = true"
-        @mouseleave="hovered = false"
       >
         <span v-if="!filename" class="absolute right-4">
-          <Transition name="fade" mode="out-in">
-            <Icon
-              v-if="copied === false"
-              name="lucide:copy"
-              class="self-center cursor-pointer text-muted-foreground hover:text-primary"
-              @click="copyCode"
-            />
-            <Icon
-              v-else
-              ref="checkIconRef"
-              name="lucide:check"
-              class="self-center cursor-pointer text-muted-foreground hover:text-primary"
-            />
-          </Transition>
+          <CodeCopy :code="code" />
         </span>
         <slot />
       </div>
@@ -66,25 +38,15 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  inGroup: {
+    type: Boolean,
+    default: false,
+  },
   highlights: {
     type: Array as () => number[],
     default: () => [],
   },
 });
-const hovered = ref(false);
-
-const { copy } = useClipboard({ source: props.code });
-const copied = ref(false);
-function copyCode() {
-  copy(props.code)
-    .then(
-      () => { copied.value = true; },
-    );
-}
-const checkIconRef = ref<HTMLElement>();
-onClickOutside(checkIconRef, () => {
-  copied.value = false;
-});
 
 const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon));
 const icon = iconMap.get(props.filename?.toLowerCase()) || iconMap.get(props.language);
diff --git a/components/layout/Aside.vue b/components/layout/Aside.vue
index c93ddf9e..8a6ea0d6 100644
--- a/components/layout/Aside.vue
+++ b/components/layout/Aside.vue
@@ -21,7 +21,7 @@
         </NuxtLink>
       </li>
     </ul>
-    <LayoutAsideTree :links="tree" :level="0" class="pl-2" />
+    <LayoutAsideTree :links="tree" :level="0" class="pl-3 pt-4" />
   </UiScrollArea>
 </template>
 
diff --git a/components/layout/AsideTree.vue b/components/layout/AsideTree.vue
index 644d27cf..2a71ad1f 100644
--- a/components/layout/AsideTree.vue
+++ b/components/layout/AsideTree.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul :class="[level > 0 ? 'border-l' : '[&:not(:first-child)]:py-2']">
+  <ul class="py-2.5" :class="[level > 0 && 'border-l']">
     <template v-for="link in links" :key="link._id">
       <LayoutAsideTreeItem
         :link="link"
diff --git a/components/layout/AsideTreeItem.vue b/components/layout/AsideTreeItem.vue
index f4b038a3..a93b031b 100644
--- a/components/layout/AsideTreeItem.vue
+++ b/components/layout/AsideTreeItem.vue
@@ -1,15 +1,16 @@
 <template>
   <li
-    class="rounded-md transition-all underline-offset-4"
+    class="rounded-md transition-all underline-offset-4 [&:not(:first-child)]:pt-3"
     :class="[level > 0 && 'pl-4']"
   >
     <UiCollapsible v-if="link.children" v-model:open="isOpen">
-      <UiCollapsibleTrigger class="w-full text-left py-1.5">
+      <UiCollapsibleTrigger class="w-full text-left">
         <div class="w-full flex gap-1">
           <Icon
             v-if="link.icon"
             :name="link.icon"
-            class="self-center"
+            class="self-center mr-1"
+            size="15"
           />
           {{ link.title }}
           <Icon
@@ -27,15 +28,13 @@
       v-else
       :to="link._path"
       class="w-full flex hover:underline text-muted-foreground gap-1"
-      :class="[
-        isActive && 'font-semibold text-primary',
-        level > 0 ? 'py-1.5' : 'pt-2',
-      ]"
+      :class="[isActive && 'font-medium text-primary']"
     >
       <Icon
         v-if="link.icon"
         :name="link.icon"
-        class="self-center"
+        class="self-center mr-1"
+        size="15"
       />
       {{ link.title }}
     </NuxtLink>
diff --git a/components/layout/Header/Nav.vue b/components/layout/Header/Nav.vue
index 79f0571f..d0626646 100644
--- a/components/layout/Header/Nav.vue
+++ b/components/layout/Header/Nav.vue
@@ -11,7 +11,7 @@
               <li v-for="link in item.links" :key="link.title">
                 <NuxtLink
                   :to="link.to"
-                  :target="link.to"
+                  :target="link.target"
                   class="px-3 py-2 mb-1 hover:bg-muted rounded-md w-full block gap-2 transition-all"
                 >
                   <div class="font-semibold">
diff --git a/components/ui/separator/Separator.vue b/components/ui/separator/Separator.vue
new file mode 100644
index 00000000..57e55bc3
--- /dev/null
+++ b/components/ui/separator/Separator.vue
@@ -0,0 +1,20 @@
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
+  />
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import { Separator, type SeparatorProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
diff --git a/components/ui/separator/index.ts b/components/ui/separator/index.ts
new file mode 100644
index 00000000..3cb07b01
--- /dev/null
+++ b/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue';
diff --git a/components/ui/tabs/Tabs.vue b/components/ui/tabs/Tabs.vue
new file mode 100644
index 00000000..20822b12
--- /dev/null
+++ b/components/ui/tabs/Tabs.vue
@@ -0,0 +1,15 @@
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>
+
+<script setup lang="ts">
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue';
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue';
+
+const props = defineProps<TabsRootProps>();
+const emits = defineEmits<TabsRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
diff --git a/components/ui/tabs/TabsContent.vue b/components/ui/tabs/TabsContent.vue
new file mode 100644
index 00000000..65ec1091
--- /dev/null
+++ b/components/ui/tabs/TabsContent.vue
@@ -0,0 +1,22 @@
+<template>
+  <TabsContent
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import { TabsContent, type TabsContentProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
diff --git a/components/ui/tabs/TabsList.vue b/components/ui/tabs/TabsList.vue
new file mode 100644
index 00000000..5862caf0
--- /dev/null
+++ b/components/ui/tabs/TabsList.vue
@@ -0,0 +1,25 @@
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex h-10 items-center justify-center rounded-md  p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import { TabsList, type TabsListProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
diff --git a/components/ui/tabs/TabsTrigger.vue b/components/ui/tabs/TabsTrigger.vue
new file mode 100644
index 00000000..03d8f753
--- /dev/null
+++ b/components/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,27 @@
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-muted data-[state=active]:text-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsTrigger>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
diff --git a/components/ui/tabs/index.ts b/components/ui/tabs/index.ts
new file mode 100644
index 00000000..f90d5fe7
--- /dev/null
+++ b/components/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue';
+export { default as TabsTrigger } from './TabsTrigger.vue';
+export { default as TabsList } from './TabsList.vue';
+export { default as TabsContent } from './TabsContent.vue';
diff --git a/content/1.getting-started/1.Introduction.md b/content/1.getting-started/1.Introduction.md
new file mode 100644
index 00000000..15cfafde
--- /dev/null
+++ b/content/1.getting-started/1.Introduction.md
@@ -0,0 +1,17 @@
+---
+title: Introduction
+description: shadcn-docs-nuxt is a Nuxt documentation template built with Nuxt Content and shadcn-vue.
+icon: 'lucide:info'
+---
+
+## Features
+
+- Fully open source.
+
+## Credits
+
+- [Nuxt Content](https://content.nuxt.com/): Content made easy for Vue Developers.
+- [shadcn-ui](https://ui.shadcn.com/): For the beautiful component & docs design.
+- [shadcn-vue](https://www.shadcn-vue.com/): For the vue port of shadcn-ui & some docs component source.
+- [Docus](https://docus.dev/): For inspiration & some docs component source.
+- [Nuxt UI Pro Docs](https://docs-template.nuxt.dev/): For inspiration.
diff --git a/content/1.getting-started/1.aaa/1.aaa.md b/content/1.getting-started/1.aaa/1.aaa.md
deleted file mode 100644
index ee41e882..00000000
--- a/content/1.getting-started/1.aaa/1.aaa.md
+++ /dev/null
@@ -1,186 +0,0 @@
----
-title: Usage
-description: Learn how to write and customize your documentation.
-icon: i-heroicons-light-bulb
----
-
-This is only a **basic** *example* of what you can achieve with [Nuxt UI Pro](https://ui.nuxt.com/pro/guide), you can tweak it to match your needs. The template uses several Nuxt modules underneath like [`@nuxt/content`](https://content.nuxt.com) for the content, [`@nuxtjs/fontaine`](https://github.com/nuxt-modules/fontaine) and [`@nuxtjs/google-fonts`](https://github.com/nuxt-modules/google-fonts) to change the font and [`nuxt-og-image`](https://nuxtseo.com/og-image/getting-started/installation) for social previews.
-
-`asas`
-
-|   A   | B    |
-| :---: | :--- |
-|  sas  | asa  |
-|  sas  | asa  |
-|  sas  | asa  |
-|  sas  | asa  |
-
-::alert
----
-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!
-::
-
-::alert
----
-icon: i-heroicons-light-bulb
----
-Learn more on how to customize and structure a Nuxt UI Pro app!
-::
-
-## Writing content
-
-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.
-
-::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
-
-In addition to `@nuxt/ui-pro` configuration through the `app.config.ts`, this template lets you customize the `Header`, `Footer` and the `Table of contents` components.
-
-### Header
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  header: {
-    // Logo configuration
-    logo: {
-      // Light mode
-      light: {
-        src: '',
-        alt: '',
-        class: ''
-      },
-      // Dark mode
-      dark: {
-        src: '',
-        alt: '',
-        class: ''
-      }
-    },
-    // Show or hide the search bar
-    search: true,
-    // Show or hide the color mode button
-    colorMode: true,
-    // Customize links
-    links: [{
-      'icon': 'i-simple-icons-github',
-      'to': 'https://github.com/nuxt-ui-pro/docs',
-      'target': '_blank',
-      'aria-label': 'Docs template on GitHub'
-    }]
-  }
-});
-```
-
-```[as]
-sdadsa
-```
-
-### Footer
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  footer: {
-    // Update bottom left credits
-    credits: 'Copyright © 2023',
-    // Show or hide the color mode button
-    colorMode: false,
-    // Customize links
-    links: [{
-      'icon': 'i-simple-icons-nuxtdotjs',
-      'to': 'https://nuxt.com',
-      'target': '_blank',
-      'aria-label': 'Nuxt Website'
-    }, {
-      'icon': 'i-simple-icons-discord',
-      'to': 'https://discord.com/invite/ps2h6QT',
-      'target': '_blank',
-      'aria-label': 'Nuxt UI on Discord'
-    }, {
-      'icon': 'i-simple-icons-x',
-      'to': 'https://x.com/nuxt_js',
-      'target': '_blank',
-      'aria-label': 'Nuxt on X'
-    }, {
-      'icon': 'i-simple-icons-github',
-      'to': 'https://github.com/nuxt/ui',
-      'target': '_blank',
-      'aria-label': 'Nuxt UI on GitHub'
-    }]
-  }
-});
-```
-
-### Table of contents
-
-```ts
-export default defineAppConfig({
-  toc: {
-    // Title of the main table of contents
-    title: 'Table of Contents',
-    // Bottom TOC configuration
-    bottom: {
-      // Title of the bottom table of contents
-      title: 'Community',
-      // URL of your repository content folder
-      edit: '',
-      // Customize links
-      links: [{
-        icon: 'i-heroicons-star',
-        label: 'Star on GitHub',
-        to: 'https://github.com/nuxt/ui',
-        target: '_blank',
-      }, {
-        icon: 'i-heroicons-book-open',
-        label: 'Nuxt UI Pro docs',
-        to: 'https://ui.nuxt.com/pro/guide',
-        target: '_blank',
-      }, {
-        icon: 'i-simple-icons-nuxtdotjs',
-        label: 'Purchase a license',
-        to: 'https://ui.nuxt.com/pro/purchase',
-        target: '_blank',
-      }]
-    }
-  }
-});
-```
-
-::callout
----
-icon: i-heroicons-light-bulb
-target: _blank
-to: https://nuxt.studio/docs/developers/app-config
----
-A dedicated interface is provided to edit those configurations on Nuxt Studio.
-::
-
-## `Quick Start`
-
-You can start a fresh new project with:
-
-```bash [Terminal]
-npx nuxi init -t github:nuxt-ui-pro/docs
-```
-
-```bash
-npx nuxi init -t github:nuxt-ui-pro/docs
-```
-
-or create a new repository from GitHub:
-
-1. Open <https://github.com/nuxt-ui-pro/docs>
-2. Click on `Use this template` button
-3. Enter repository name and click on `Create repository from template` button
-4. Clone your new repository
-5. Install dependencies with your favorite package manager
-6. Start development server
-
-That's it! You can now start writing your documentation in the [`content/`](https://content.nuxt.com/usage/content-directory) directory 🚀
diff --git a/content/1.getting-started/1.aaa/1.bbb/_dir.yml b/content/1.getting-started/1.aaa/1.bbb/_dir.yml
deleted file mode 100644
index 2402e934..00000000
--- a/content/1.getting-started/1.aaa/1.bbb/_dir.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-title: bb
-icon: i-heroicons-folder
diff --git a/content/1.getting-started/1.aaa/2.bbb.md b/content/1.getting-started/1.aaa/2.bbb.md
deleted file mode 100644
index 4c523bc1..00000000
--- a/content/1.getting-started/1.aaa/2.bbb.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Bbb
----
-
-## asas
-
-this text is special
diff --git a/content/1.getting-started/1.aaa/_dir.yml b/content/1.getting-started/1.aaa/_dir.yml
deleted file mode 100644
index ab2ceb9f..00000000
--- a/content/1.getting-started/1.aaa/_dir.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-title: aa
-icon: i-heroicons-folder
diff --git a/content/1.getting-started/2.installation.md b/content/1.getting-started/2.installation.md
new file mode 100644
index 00000000..7a6f73ac
--- /dev/null
+++ b/content/1.getting-started/2.installation.md
@@ -0,0 +1,7 @@
+---
+title: Installation
+description: How to install shadcn-docs-nuxt in your app.
+icon: 'lucide:play'
+---
+
+TODO
diff --git a/content/1.getting-started/3.writing/1.markdown.md b/content/1.getting-started/3.writing/1.markdown.md
new file mode 100644
index 00000000..27cd0f1c
--- /dev/null
+++ b/content/1.getting-started/3.writing/1.markdown.md
@@ -0,0 +1,13 @@
+---
+title: Markdown
+description: How to write docs with the MDC syntax.
+icon: 'lucide:arrow-big-down'
+---
+
+::Alert
+---
+to: https://content.nuxt.com/usage/markdown
+target: _blank
+---
+Read the detailed MDC usage guide in the **Nuxt Content** Docs.
+::
diff --git a/content/1.getting-started/3.writing/2.components.md b/content/1.getting-started/3.writing/2.components.md
new file mode 100644
index 00000000..c835438f
--- /dev/null
+++ b/content/1.getting-started/3.writing/2.components.md
@@ -0,0 +1,185 @@
+---
+title: Components
+description: Components in shadcn-docs-nuxt you can use.
+icon: 'lucide:component'
+---
+
+## Docs Components
+
+### Alert
+
+::code-group
+  ::preview{filename="Preview"}
+    ::alert{icon="lucide:info"}
+      An **info (default)** alert with `code` and a [link](/).
+    ::
+
+    ::alert{type="success" icon="lucide:lightbulb"}
+      A **success** alert with `code` and a [link](/).
+    ::
+
+    ::alert{type="warning" icon="lucide:triangle-alert"}
+      A **warning** alert with `code` and a [link](/).
+    ::
+
+    ::alert{type="danger" icon="lucide:circle-x"}
+      A **danger** alert with `code` and a [link](/).
+    ::
+
+    ::alert{title="Title" icon="lucide:layout-list"}
+      An alert with a title.
+    ::
+
+    ::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
+      A **link** alert.
+    ::
+  ::
+
+  ```md [Code]
+  ::alert{icon="lucide:info"}
+    An **info (default)** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="success" icon="lucide:lightbulb"}
+    A **success** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="warning" icon="lucide:triangle-alert"}
+    A **warning** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="danger" icon="lucide:circle-x"}
+    A **danger** alert with `code` and a [link](/).
+  ::
+
+  ::alert{title="Title" icon="lucide:layout-list"}
+    An alert with a title.
+  ::
+
+  ::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
+    A **link** alert.
+  ::
+  ```
+::
+
+### Callout
+
+`::callout` is an alias to `::alert`.
+
+### Code Group
+
+::code-group
+  ::preview{filename="Preview"}
+    ::code-group
+      ```bash [npm]
+      npm run dev
+      ```
+
+      ```bash [pnpm]
+      pnpm dev
+      ```
+
+      ```bash [yarn]
+      yarn dev
+      ```
+
+      ```bash [bun]
+      bun run dev
+      ```
+    ::
+
+    ::code-group
+      ::preview{filename="Preview"}
+        ### This is a header
+      ::
+
+      ```md [Code]
+      ### This is a header
+      ```
+    ::
+  ::
+
+  ```md [Code]
+  ::code-group
+    ```bash [npm]
+    npm run dev
+    ```
+
+    ```bash [pnpm]
+    pnpm dev
+    ```
+
+    ```bash [yarn]
+    yarn dev
+    ```
+
+    ```bash [bun]
+    bun run dev
+    ```
+  ::
+
+  ::code-group
+    ::preview{filename="Preview"}
+      ### This is a header
+    ::
+
+    ```md [Code]
+    ### This is a header
+    ```
+  ::
+  ```
+::
+
+## Landing Page Components
+
+### Hero
+
+::code-group
+  ::preview{filename="Preview"}
+    ::hero
+    ---
+    announcement:
+      title: 'Release v1.0.0'
+      icon: 'noto:party-popper'
+      to: /getting-started
+    actions:
+      - name: Get Started
+        to: /getting-started
+      - name: GitHub
+        variant: outline
+        to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+        leftIcon: 'lucide:github'
+    ---
+
+    #title
+    Effortless and Beautiful<br>Docs Template.
+
+    #description
+    Beautifully designed Nuxt Content template with shadcn-vue.<br>Customizable. Compatible. Open Source.
+    ::
+  ::
+
+  ```md [Code]
+  ::hero
+  ---
+  announcement:
+    title: 'Release v1.0.0'
+    icon: 'noto:party-popper'
+    to: /getting-started
+  actions:
+    - name: Get Started
+      to: /getting-started
+    - name: GitHub
+      variant: outline
+      to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+      leftIcon: 'lucide:github'
+  ---
+
+  #title
+  Effortless and Beautiful<br>Docs Template.
+
+  #description
+  Beautifully designed Nuxt Content template with shadcn-vue.<br>Customizable. Compatible. Open Source.
+  ::
+  ```
+::
diff --git a/content/1.getting-started/3.writing/_dir.yml b/content/1.getting-started/3.writing/_dir.yml
new file mode 100644
index 00000000..e28c46d3
--- /dev/null
+++ b/content/1.getting-started/3.writing/_dir.yml
@@ -0,0 +1,3 @@
+title: Writing
+icon: lucide:edit
+navigation.redirect: /getting-started/writing/markdown
diff --git a/content/1.getting-started/_dir.yml b/content/1.getting-started/_dir.yml
index a2257924..bb9ea2aa 100644
--- a/content/1.getting-started/_dir.yml
+++ b/content/1.getting-started/_dir.yml
@@ -1,2 +1,3 @@
 title: Getting started
 icon: lucide:rocket
+navigation.redirect: /getting-started/introduction
diff --git a/content/1.getting-started/index.md b/content/1.getting-started/index.md
deleted file mode 100644
index a4c8acb0..00000000
--- a/content/1.getting-started/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: hias
----
diff --git a/content/2.api/1.configuration.md b/content/2.api/1.configuration.md
new file mode 100644
index 00000000..e014ee70
--- /dev/null
+++ b/content/2.api/1.configuration.md
@@ -0,0 +1,7 @@
+---
+title: Configuration
+description: Customizing shadcn-docs-nuxt.
+icon: 'lucide:settings'
+---
+
+TODO
diff --git a/content/2.api/2.composables.md b/content/2.api/2.composables.md
new file mode 100644
index 00000000..a8578577
--- /dev/null
+++ b/content/2.api/2.composables.md
@@ -0,0 +1,7 @@
+---
+title: Composables
+description: Composable functions exported by shadcn-docs-nuxt.
+icon: 'lucide:square-function'
+---
+
+TODO
diff --git a/content/2.api/_dir.yml b/content/2.api/_dir.yml
new file mode 100644
index 00000000..6fbedd12
--- /dev/null
+++ b/content/2.api/_dir.yml
@@ -0,0 +1,3 @@
+title: API
+icon: lucide:book-open
+navigation.redirect: /api/configuration
diff --git a/content/3.folder2/1.ccc.md b/content/3.folder2/1.ccc.md
deleted file mode 100644
index f7935c03..00000000
--- a/content/3.folder2/1.ccc.md
+++ /dev/null
@@ -1,3 +0,0 @@
-## Folder2 content
-
-sa
diff --git a/content/3.folder2/_dir.yml b/content/3.folder2/_dir.yml
deleted file mode 100644
index e7b4e9dc..00000000
--- a/content/3.folder2/_dir.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-title: Folder 2
-icon: lucide:activity
-navigation.redirect: /folder2/ccc
diff --git a/content/index.md b/content/index.md
index 0996acd6..dff811f8 100644
--- a/content/index.md
+++ b/content/index.md
@@ -1,67 +1,30 @@
 ---
-title: Installation
-description: Get started with Nuxt UI Pro documentation template.
+title: Home
 navigation: false
 ---
 
-::callout
+::hero
 ---
-icon: i-heroicons-light-bulb
-target: _blank
-to: https://nuxt.studio/themes/docs
+announcement:
+  title: 'Release v1.0.0'
+  icon: 'noto:party-popper'
+  to: /getting-started
+actions:
+  - name: Get Started
+    to: /getting-started
+  - name: GitHub
+    variant: outline
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+    leftIcon: 'lucide:github'
 ---
-Use this template on Nuxt Studio and start your documentation in seconds.
-::
 
-::alert{type="success"}
-关于 Composables 的更多信息，请参阅 [Vue 官方文档](https://cn.vuejs.org/guide/reusability/composables.html)、[Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/composables)
-::
+#title
+Effortless and Beautiful<br>Docs Template.
 
-::alert{type="info"}
-关于 Composables 的更多信息，请参阅 [Vue 官方文档](https://cn.vuejs.org/guide/reusability/composables.html)、[Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/composables)
+#description
+Beautifully designed Nuxt Content template with shadcn-vue.<br>Customizable. Compatible. Open Source.
 ::
 
-::alert{type="danger"}
-关于 Composables 的更多信息，请参阅 [Vue 官方文档](https://cn.vuejs.org/guide/reusability/composables.html)、[Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/composables)
-::
-
-::alert{type="danger" icon="tabler:check"}
-关于 Composables 的更多信息，请参阅 [Vue 官方文档](https://cn.vuejs.org/guide/reusability/composables.html)、[Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/composables)
-::
-
-::alert{type="danger" icon="tabler:check" title="asd"}
-关于 Composables 的更多信息，请参阅 [Vue 官方文档](https://cn.vuejs.org/guide/reusability/composables.html)、[Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/composables)
-::
-
-::alert{type="warning"}
-关于 Composables 的更多信息，请参阅 [Vue 官方文档](https://cn.vuejs.org/guide/reusability/composables.html)、[Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/composables)
-::
-
-## Quick Start
-
-You can start a fresh new project with:
-
-```bash [Terminal]
-npx nuxi init -t github:nuxt-ui-pro/docs
-```
-
-```bash
-npx nuxi init -t github:nuxt-ui-pro/docs dasjnasdhashdishdiashduiashdsuahdiashdsaihduiashdashdusahdauhaishdishdadsaddasdasdasdsad
-```
-
-```bash
-npx nuxi init -t github:nuxt-ui-pro/docs dasjnasdhashdishdia
-shduiashdsuahdiashdsaihduiash
-dashdusahdauhaishdishdadsaddasdasdasdsad
-```
-
-or create a new repository from GitHub:
-
-1. Open <https://github.com/nuxt-ui-pro/docs>
-2. Click on `Use this template` button
-3. Enter repository name and click on `Create repository from template` button
-4. Clone your new repository
-5. Install dependencies with your favorite package manager
-6. Start development server
-
-That's it! You can now start writing your documentation in the [`content/`](https://content.nuxt.com/usage/content-directory) directory 🚀
+<div class="border rounded-lg shadow-md">
+  <iframe src="/getting-started/writing/components" height="700" width="100%" class="rounded-lg" scrolling="no" frameborder="0">
+</div>
diff --git a/layouts/default.vue b/layouts/default.vue
index 8a750e41..7f590253 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,7 @@
 <template>
+  <LayoutHeader />
   <div class="min-h-screen">
     <slot />
   </div>
+  <LayoutFooter />
 </template>
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 4e875a93..150ff0f0 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -1,5 +1,4 @@
 <template>
-  <LayoutHeader />
   <div class="border-b">
     <div class="container px-4 md:px-8 flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
       <aside class="fixed top-[102px] lg:top-[60px] z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto">
@@ -43,7 +42,6 @@
       </main>
     </div>
   </div>
-  <LayoutFooter />
 </template>
 
 <script setup lang="ts">
diff --git a/pages/index.vue b/pages/index.vue
new file mode 100644
index 00000000..0b7594a0
--- /dev/null
+++ b/pages/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="container px-4 md:px-8 py-6">
+    <ContentRenderer
+      :key="page._id"
+      :value="page"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { page } = useContent();
+const config = useConfig();
+
+useSeoMeta({
+  title: `${page.value?.title ?? '404'} - ${config.value.site.name}`,
+  ogTitle: page.value?.title,
+  description: page.value?.description,
+});
+</script>