feat: edit link placement option

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

app.config.ts

@@ -78,8 +78,9 @@ export default defineAppConfig({
       editLink: {
         enable: true,
         pattern: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt/tree/main/content/:path',
-        text: 'Edit this page on GitHub',
+        text: 'Edit this page',
         icon: 'lucide:square-pen',
+        placement: ['docsFooter', 'toc'],
       },
       codeIcon: {
         'package.json': 'vscode-icons:file-type-node',

components/layout/EditLink.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="enable && page.editLink !== false && page._file && url !== ''"
-    class="mb-6 w-fit"
-  >
+  <div v-if="enabledDocsFooter" class="mb-6 w-fit">
     <NuxtLink
       :to="url"
       target="_blank"
@@ -19,10 +16,5 @@
 </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 ?? ''),
-);
+const { url, enabledDocsFooter, text, icon } = useEditLink();
 </script>

components/layout/Toc.vue

@@ -61,7 +61,23 @@
 defineProps<{ isSmall: boolean }>();
 
 const { toc } = useContent();
-const { title, links, carbonAds } = useConfig().value.toc;
+const { title, links: configLinks, carbonAds } = useConfig().value.toc;
 const { border } = useConfig().value.header;
 const isOpen = ref(false);
+
+const { url, enabledToc, text, icon } = useEditLink();
+
+const links = computed(
+  () => {
+    if (enabledToc.value) {
+      return configLinks.concat([{
+        title: text,
+        icon,
+        to: url.value,
+        target: '_blank',
+      }]);
+    }
+    return configLinks;
+  },
+);
 </script>

composables/useConfig.ts

@@ -44,6 +44,7 @@ const defaultConfig: DefaultConfig = {
       pattern: '',
       text: 'Edit this page',
       icon: 'lucide:square-pen',
+      placement: ['docsFooter'],
     },
     codeIcon: {
       'package.json': 'vscode-icons:file-type-node',

composables/useEditLink.ts

@@ -0,0 +1,27 @@
+export function useEditLink() {
+  const { page } = useContent();
+  const { enable, pattern, text, icon, placement } = useConfig().value.main.editLink;
+
+  const url = computed(
+    () => pattern.replace(/:path/g, page.value._file ?? ''),
+  );
+
+  const enabled = computed(
+    () => enable && page.value.editLink !== false && page.value._file && url.value !== '',
+  );
+
+  const enabledToc = computed(
+    () => enabled.value && placement.includes('toc'),
+  );
+  const enabledDocsFooter = computed(
+    () => enabled.value && placement.includes('docsFooter'),
+  );
+
+  return {
+    url,
+    text,
+    icon,
+    enabledToc,
+    enabledDocsFooter,
+  };
+}

content/3.api/1.configuration/1.shadcn-docs.md

@@ -1,5 +1,5 @@
 ---
-title: shadcn-docs
+title: Overview
 description: Customizing shadcn-docs-nuxt.
 icon: lucide:settings-2
 ---
@@ -10,15 +10,15 @@ shadcn-docs-nuxt is configured through `app.config.ts`.
 export default defineAppConfig({
   shadcnDocs: {
     header: {
-      xxx
+      // ...
     },
     aside: {
-      xxx
+      // ...
     },
     main: {
-      xxx
+      // ...
     },
-    xxx
+    // ...
   },
 });
 ```
@@ -168,6 +168,9 @@ All configurable icons can be set to iconify icons, emojis and urls, using [smar
         ::field{name="icon" type="string" default-value="lucide:square-pen"}
         The icon preceding the link.
         ::
+        ::field{name="placement" type="('docsFooter' | 'toc')[]" default-value="['docsFooter']"}
+        Where to place the edit link.
+        ::
       ::
     ::
   ::

content/3.api/1.configuration/2.nuxt-content.md

@@ -21,7 +21,7 @@ export default defineNuxtConfig({
 
   // Here
   content: {
-    xxx
+    // ...
   },
 
   compatibilityDate: '2024-07-06',

content/3.api/1.configuration/5.edit-link.md

@@ -15,6 +15,7 @@ export default defineAppConfig({
         pattern: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt/tree/main/content/:path',
         text: 'Edit this page on GitHub',
         icon: 'lucide:square-pen',
+        placement: ['docsFooter', 'toc'],
       },
     }
   },
@@ -27,6 +28,10 @@ export default defineAppConfig({
 
 - The `icon` option allows you to customize the icon (default is `lucide:square-pen`)
 
+- The `placement` option controls the places to put the edit link.
+  - `docsFooter`: at the end of the page.
+  - `toc`: in the TOC links section.
+
 ### Front Matter
 
 The edit link can be disabled per-page using the `editLink` option in front matter.
@@ -52,4 +57,7 @@ editLink: false
   ::field{name="icon" type="string" default-value="lucide:square-pen"}
   The icon preceding the link.
   ::
+  ::field{name="placement" type="('docsFooter' | 'toc')[]" default-value="['docsFooter']"}
+  Where to place the edit link.
+  ::
 ::

types/index.d.ts

@@ -56,6 +56,7 @@ interface DefaultConfig {
       pattern: string;
       text: string;
       icon: string;
+      placement: ('docsFooter' | 'toc')[];
     };
     codeIcon: {
       [key: string]: string;
@@ -75,8 +76,8 @@ interface DefaultConfig {
     enableInMobile: boolean;
     title: string;
     links: ({
-      icon: string;
       title: string;
+      icon: string;
       to: string;
       target: string;
     })[];