From ded42e797da834f7c7cf07c9ebd9638c02e9e806 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Mon, 11 Nov 2024 13:50:08 +0800
Subject: [PATCH] feat: edit this page link

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 app.config.ts                                 |   6 +
 components/content/ProseA.vue                 |   2 +-
 components/content/ProseH1.vue                |   2 +-
 components/content/ProseH2.vue                |   2 +-
 components/content/ProseH3.vue                |   2 +-
 components/content/ProseH4.vue                |   2 +-
 components/content/ProseH5.vue                |   2 +-
 components/content/ProseH6.vue                |   2 +-
 components/layout/DocsFooter.vue              |  12 ++
 components/layout/EditLink.vue                |  26 ++++
 components/layout/PrevNext.vue                |   2 +-
 composables/useConfig.ts                      |   6 +
 .../{1.Introduction.md => 1.introduction.md}  |   0
 .../3.api/1.configuration/1.shadcn-docs.md    | 128 +++---------------
 content/3.api/1.configuration/4.carbon-ads.md |  17 +++
 content/3.api/1.configuration/5.edit-link.md  |  45 ++++++
 pages/[...slug].vue                           |   2 +-
 types/index.d.ts                              |   8 +-
 18 files changed, 147 insertions(+), 119 deletions(-)
 create mode 100644 components/layout/DocsFooter.vue
 create mode 100644 components/layout/EditLink.vue
 rename content/1.getting-started/{1.Introduction.md => 1.introduction.md} (100%)
 create mode 100644 content/3.api/1.configuration/5.edit-link.md

diff --git a/app.config.ts b/app.config.ts
index dacaf3a9..008e318c 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -75,6 +75,12 @@ export default defineAppConfig({
       breadCrumb: true,
       showTitle: true,
       codeCopyToast: true,
+      editLink: {
+        enable: true,
+        pattern: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt/tree/main/content/:path',
+        text: 'Edit this page on GitHub',
+        icon: 'lucide:square-pen',
+      },
       codeIcon: {
         'package.json': 'vscode-icons:file-type-node',
         'tsconfig.json': 'vscode-icons:file-type-tsconfig',
diff --git a/components/content/ProseA.vue b/components/content/ProseA.vue
index 15c30afd..8c8dbd12 100644
--- a/components/content/ProseA.vue
+++ b/components/content/ProseA.vue
@@ -1,6 +1,6 @@
 <template>
   <NuxtLink
-    :href="href"
+    :to="href"
     :target="target"
     :external="external"
     class="font-semibold underline underline-offset-4"
diff --git a/components/content/ProseH1.vue b/components/content/ProseH1.vue
index a063b416..eaa3943a 100644
--- a/components/content/ProseH1.vue
+++ b/components/content/ProseH1.vue
@@ -2,7 +2,7 @@
   <h1 :id class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
     <NuxtLink
       v-if="generate"
-      :href="`#${id}`"
+      :to="`#${id}`"
     >
       <slot />
     </NuxtLink>
diff --git a/components/content/ProseH2.vue b/components/content/ProseH2.vue
index 9239b608..3cc7cfec 100644
--- a/components/content/ProseH2.vue
+++ b/components/content/ProseH2.vue
@@ -2,7 +2,7 @@
   <h2 :id class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10">
     <NuxtLink
       v-if="id && generate"
-      :href="`#${id}`"
+      :to="`#${id}`"
     >
       <slot />
     </NuxtLink>
diff --git a/components/content/ProseH3.vue b/components/content/ProseH3.vue
index 3091c1ba..4dadb1d2 100644
--- a/components/content/ProseH3.vue
+++ b/components/content/ProseH3.vue
@@ -2,7 +2,7 @@
   <h3 :id class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8">
     <NuxtLink
       v-if="id && generate"
-      :href="`#${id}`"
+      :to="`#${id}`"
     >
       <slot />
     </NuxtLink>
diff --git a/components/content/ProseH4.vue b/components/content/ProseH4.vue
index 45627622..cf17fcca 100644
--- a/components/content/ProseH4.vue
+++ b/components/content/ProseH4.vue
@@ -2,7 +2,7 @@
   <h4 :id class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6">
     <NuxtLink
       v-if="id && generate"
-      :href="`#${id}`"
+      :to="`#${id}`"
     >
       <slot />
     </NuxtLink>
diff --git a/components/content/ProseH5.vue b/components/content/ProseH5.vue
index 4fcd3826..87960a6b 100644
--- a/components/content/ProseH5.vue
+++ b/components/content/ProseH5.vue
@@ -2,7 +2,7 @@
   <h5 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
     <NuxtLink
       v-if="id && generate"
-      :href="`#${id}`"
+      :to="`#${id}`"
     >
       <slot />
     </NuxtLink>
diff --git a/components/content/ProseH6.vue b/components/content/ProseH6.vue
index 2c17175d..07376e74 100644
--- a/components/content/ProseH6.vue
+++ b/components/content/ProseH6.vue
@@ -2,7 +2,7 @@
   <h6 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
     <NuxtLink
       v-if="id && generate"
-      :href="`#${id}`"
+      :to="`#${id}`"
     >
       <slot />
     </NuxtLink>
diff --git a/components/layout/DocsFooter.vue b/components/layout/DocsFooter.vue
new file mode 100644
index 00000000..be7dbb63
--- /dev/null
+++ b/components/layout/DocsFooter.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="mt-16">
+    <div v-if="editLink.enable" class="mb-6 flex justify-between">
+      <LayoutEditLink />
+    </div>
+    <LayoutPrevNext />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { editLink } = useConfig().value.main;
+</script>
diff --git a/components/layout/EditLink.vue b/components/layout/EditLink.vue
new file mode 100644
index 00000000..278fe052
--- /dev/null
+++ b/components/layout/EditLink.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <NuxtLink
+      v-if="enable && page._file && url !== ''"
+      :to="url"
+      target="_blank"
+      class="text-sm font-semibold text-primary"
+    >
+      <div class="flex items-center gap-2">
+        <SmartIcon :name="icon" />
+        <span>
+          {{ text }}
+        </span>
+      </div>
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { page } = useContent();
+const { enable, pattern, text, icon } = useConfig().value.main.editLink;
+
+const url = computed(
+  () => pattern.replace(/:path/g, page.value._file ?? ''),
+);
+</script>
diff --git a/components/layout/PrevNext.vue b/components/layout/PrevNext.vue
index b28d38c2..aeb7cb91 100644
--- a/components/layout/PrevNext.vue
+++ b/components/layout/PrevNext.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-10 border-t pt-8 lg:flex lg:flex-row">
+  <div class="border-t pt-6 lg:flex lg:flex-row">
     <LayoutPrevNextButton :prev-next="prev" side="left" />
     <span class="flex-1" />
     <LayoutPrevNextButton :prev-next="next" side="right" />
diff --git a/composables/useConfig.ts b/composables/useConfig.ts
index 40d2dad3..1d817c0e 100644
--- a/composables/useConfig.ts
+++ b/composables/useConfig.ts
@@ -39,6 +39,12 @@ const defaultConfig: DefaultConfig = {
     codeCopyToastText: 'Copied to clipboard!',
     fieldRequiredText: 'required',
     padded: true,
+    editLink: {
+      enable: false,
+      pattern: '',
+      text: 'Edit this page',
+      icon: 'lucide:square-pen',
+    },
     codeIcon: {
       'package.json': 'vscode-icons:file-type-node',
       'tsconfig.json': 'vscode-icons:file-type-tsconfig',
diff --git a/content/1.getting-started/1.Introduction.md b/content/1.getting-started/1.introduction.md
similarity index 100%
rename from content/1.getting-started/1.Introduction.md
rename to content/1.getting-started/1.introduction.md
diff --git a/content/3.api/1.configuration/1.shadcn-docs.md b/content/3.api/1.configuration/1.shadcn-docs.md
index c7b344e4..4cf4d83e 100644
--- a/content/3.api/1.configuration/1.shadcn-docs.md
+++ b/content/3.api/1.configuration/1.shadcn-docs.md
@@ -153,6 +153,24 @@ All configurable icons can be set to iconify icons, emojis and urls, using [smar
   ::field{name="codeIcon" type="Record<string, string>"}
   The icon mapping for language / filename in the [code group](/getting-started/writing/components#code-group) header.
   ::
+  ::field{name="editLink" type="object"}
+    ::collapsible{title="Details"}
+      ::field-group
+        ::field{name="enable" type="boolean" default-value="false"}
+        Whether to turn on the edit link.
+        ::
+        ::field{name="pattern" type="string"}
+        The link pattern.
+        ::
+        ::field{name="text" type="string" default-value="Edit this page"}
+        Text displayed on the link.
+        ::
+        ::field{name="icon" type="string" default-value="lucide:square-pen"}
+        The icon preceding the link.
+        ::
+      ::
+    ::
+  ::
 ::
 
 ## `footer`
@@ -223,112 +241,4 @@ All configurable icons can be set to iconify icons, emojis and urls, using [smar
 
 ## Default Config
 
-```ts [composables/useConfig.ts]
-const defaultConfig: DefaultConfig = {
-  site: {
-    name: 'shadcn-docs',
-    description: 'Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.',
-    ogImage: '/hero.png',
-    ogImageComponent: 'ShadcnDocs',
-  },
-  theme: {
-    customizable: true,
-    color: 'zinc',
-    radius: 0.5,
-  },
-  header: {
-    showLoadingIndicator: true,
-    title: 'shadcn-docs',
-    showTitle: true,
-    logo: {
-      light: '/logo.svg',
-      dark: '/logo-dark.svg',
-    },
-    showTitleInMobile: false,
-    border: false,
-    darkModeToggle: true,
-    nav: [],
-    links: [],
-  },
-  aside: {
-    useLevel: true,
-    collapse: false,
-    collapseLevel: 1,
-    folderStyle: 'default',
-  },
-  main: {
-    breadCrumb: true,
-    showTitle: true,
-    codeCopyToast: true,
-    codeCopyToastText: 'Copied to clipboard!',
-    fieldRequiredText: 'required',
-    padded: true,
-    codeIcon: {
-      'package.json': 'vscode-icons:file-type-node',
-      'tsconfig.json': 'vscode-icons:file-type-tsconfig',
-      '.npmrc': 'vscode-icons:file-type-npm',
-      '.editorconfig': 'vscode-icons:file-type-editorconfig',
-      '.eslintrc': 'vscode-icons:file-type-eslint',
-      '.eslintrc.cjs': 'vscode-icons:file-type-eslint',
-      '.eslintignore': 'vscode-icons:file-type-eslint',
-      'eslint.config.js': 'vscode-icons:file-type-eslint',
-      'eslint.config.mjs': 'vscode-icons:file-type-eslint',
-      'eslint.config.cjs': 'vscode-icons:file-type-eslint',
-      '.gitignore': 'vscode-icons:file-type-git',
-      'yarn.lock': 'vscode-icons:file-type-yarn',
-      '.env': 'vscode-icons:file-type-dotenv',
-      '.env.example': 'vscode-icons:file-type-dotenv',
-      '.vscode/settings.json': 'vscode-icons:file-type-vscode',
-      'nuxt': 'vscode-icons:file-type-nuxt',
-      '.nuxtrc': 'vscode-icons:file-type-nuxt',
-      '.nuxtignore': 'vscode-icons:file-type-nuxt',
-      'nuxt.config.js': 'vscode-icons:file-type-nuxt',
-      'nuxt.config.ts': 'vscode-icons:file-type-nuxt',
-      'nuxt.schema.ts': 'vscode-icons:file-type-nuxt',
-      'tailwind.config.js': 'vscode-icons:file-type-tailwind',
-      'tailwind.config.ts': 'vscode-icons:file-type-tailwind',
-      'vue': 'vscode-icons:file-type-vue',
-      'ts': 'vscode-icons:file-type-typescript',
-      'tsx': 'vscode-icons:file-type-typescript',
-      'mjs': 'vscode-icons:file-type-js',
-      'cjs': 'vscode-icons:file-type-js',
-      'js': 'vscode-icons:file-type-js',
-      'jsx': 'vscode-icons:file-type-js',
-      'md': 'vscode-icons:file-type-markdown',
-      'mdc': 'vscode-icons:file-type-markdown',
-      'py': 'vscode-icons:file-type-python',
-      'npm': 'vscode-icons:file-type-npm',
-      'pnpm': 'vscode-icons:file-type-pnpm',
-      'npx': 'vscode-icons:file-type-npm',
-      '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',
-    },
-  },
-  footer: {
-    credits: '',
-    links: [],
-  },
-  toc: {
-    enable: true,
-    enableInMobile: false,
-    title: 'On This Page',
-    links: [],
-    carbonAds: {
-      enable: false,
-      code: '',
-      placement: '',
-      format: 'cover',
-    },
-  },
-  search: {
-    enable: true,
-    inAside: false,
-    style: 'input',
-    placeholder: 'Search...',
-    placeholderDetailed: 'Search documentation...',
-  },
-};
-```
+:read-more{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/composables/useConfig.ts" title="source file" icon="lucide:code"}
diff --git a/content/3.api/1.configuration/4.carbon-ads.md b/content/3.api/1.configuration/4.carbon-ads.md
index 574ec2d5..ab8018a5 100644
--- a/content/3.api/1.configuration/4.carbon-ads.md
+++ b/content/3.api/1.configuration/4.carbon-ads.md
@@ -29,3 +29,20 @@ These values are used to call carbon CDN script as shown below.
 ```
 
 :read-more{title="Carbon Ads website" to="https://www.carbonads.net/"}
+
+## Parameters
+
+::field-group
+  ::field{name="enable" type="boolean" default-value="false"}
+  Whether to turn on Carbon Ads.
+  ::
+  ::field{name="code" type="string"}
+  Carbon Ads code.
+  ::
+  ::field{name="placement" type="string"}
+  Carbon Ads placement.
+  ::
+  ::field{name="format" type="'cover' | 'responsive'" default-value="cover"}
+  Carbon Ads format.
+  ::
+::
diff --git a/content/3.api/1.configuration/5.edit-link.md b/content/3.api/1.configuration/5.edit-link.md
new file mode 100644
index 00000000..e72f6e28
--- /dev/null
+++ b/content/3.api/1.configuration/5.edit-link.md
@@ -0,0 +1,45 @@
+---
+title: Edit Link
+icon: lucide:square-pen
+description: A link to the source file.
+---
+
+An edit link allows you to display a link at the end of each page to edit the page on GitHub / GitLab.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  shadcnDocs: {
+    main: {
+      editLink: {
+        enable: true,
+        pattern: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt/tree/main/content/:path',
+        text: 'Edit this page on GitHub',
+        icon: 'lucide:square-pen',
+      },
+    }
+  },
+});
+```
+
+- The `pattern` option defines the URL structure for the link, and `:path` is going to be replaced with the page path.
+
+- The `text` option allows you to customize the link text (default is `Edit this page`)
+
+- The `icon` option allows you to customize the icon (default is `lucide:square-pen`)
+
+## Parameters
+
+::field-group
+  ::field{name="enable" type="boolean" default-value="false"}
+  Whether to turn on the edit link.
+  ::
+  ::field{name="pattern" type="string"}
+  The link pattern.
+  ::
+  ::field{name="text" type="string" default-value="Edit this page"}
+  Text displayed on the link.
+  ::
+  ::field{name="icon" type="string" default-value="lucide:square-pen"}
+  The icon preceding the link.
+  ::
+::
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 1927c6b8..55ae4237 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -40,7 +40,7 @@
         class="docs-content"
       />
 
-      <LayoutPrevNext />
+      <LayoutDocsFooter />
     </div>
     <div v-if="config.toc.enable && (page.toc ?? true)" class="hidden text-sm lg:block">
       <div class="sticky top-[90px] h-[calc(100vh-3.5rem)] overflow-hidden">
diff --git a/types/index.d.ts b/types/index.d.ts
index 834da97a..91d464af 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -50,10 +50,16 @@ interface DefaultConfig {
     codeCopyToast: boolean;
     codeCopyToastText: string;
     fieldRequiredText: string;
+    padded: boolean;
+    editLink: {
+      enable: boolean;
+      pattern: string;
+      text: string;
+      icon: string;
+    };
     codeIcon: {
       [key: string]: string;
     };
-    padded: boolean;
   };
   footer: {
     credits: string;