feat: edit this page link

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

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',

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"

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>

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>

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>

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>

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>

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>

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>

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>

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" />

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',

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"}

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.
+  ::
+::

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.
+  ::
+::

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">

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;