feat: add configurable footer suggestChanges

Author: onmax

docs/vite.config.ts

@@ -26,6 +26,7 @@ export default defineConfig(() => ({
     ...NimiqVitepressVitePlugin({
       repoURL: 'https://github.com/onmax/nimiq-ui',
       contentPath: 'docs',
+      suggestChanges: ctx => `Edit [${ctx.path}](https://github.com/onmax/nimiq-ui/blob/main/docs/${ctx.path})`,
     }),
   ],
 }))

packages/nimiq-vitepress-theme/src/composables/useFooter.ts

@@ -0,0 +1,41 @@
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+import { useNimiqConfig } from './useNimiqConfig'
+import { useSourceCode } from './useSourceCode'
+
+export function useFooter() {
+  const { page, frontmatter } = useData()
+  const nimiqConfig = useNimiqConfig()
+  const { editUrl } = useSourceCode()
+
+  const suggestChangesText = computed(() => {
+    // Frontmatter takes priority
+    const fmValue = frontmatter.value.suggestChanges
+    if (fmValue === false)
+      return null
+
+    if (typeof fmValue === 'string')
+      return fmValue
+
+    // Check global config
+    const configValue = nimiqConfig.suggestChanges
+    if (configValue === false)
+      return null
+
+    if (typeof configValue === 'string')
+      return configValue
+
+    if (typeof configValue === 'function') {
+      const result = configValue({ path: page.value.filePath })
+      return result || null
+    }
+
+    // Default fallback
+    return 'Suggest changes on this page'
+  })
+
+  return {
+    suggestChangesText,
+    editUrl,
+  }
+}

packages/nimiq-vitepress-theme/src/composables/useNimiqConfig.ts

@@ -1,11 +1,13 @@
 declare const __NIMIQ_VITEPRESS_CONFIG__: {
   repoURL?: string
   contentPath?: string
+  suggestChanges?: false | string | ((options: { path: string }) => string)
 } | undefined
 
 export interface NimiqVitepressConfig {
   repoURL?: string
   contentPath?: string
+  suggestChanges?: false | string | ((options: { path: string }) => string)
 }
 
 export function useNimiqConfig(): NimiqVitepressConfig {
@@ -18,5 +20,6 @@ export function useNimiqConfig(): NimiqVitepressConfig {
   return {
     repoURL: undefined,
     contentPath: '',
+    suggestChanges: undefined,
   }
 }

packages/nimiq-vitepress-theme/src/layout/PageContent.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useBreadcrumbs } from '../composables/useBreadcrumbs'
+import { useFooter } from '../composables/useFooter'
 import { useSecondarySidebar } from '../composables/useSecondarySidebar'
 import { useSourceCode } from '../composables/useSourceCode'
+import { parseInlineMarkdown } from '../utils/markdownUtils'
 import { humanizeText } from '../utils/textUtils'
 import DocNavigation from './DocNavigation.vue'
 import '../assets/code-blocks.css'
@@ -12,7 +15,13 @@ const { breadcrumbs, showBreadcrumbs } = useBreadcrumbs()
 
 const { showSecondarySidebar } = useSecondarySidebar()
 
-const { showSourceCode, editUrl, sourceCodeUrl, sourceCodeLabel } = useSourceCode()
+const { showSourceCode, sourceCodeUrl, sourceCodeLabel } = useSourceCode()
+
+const { suggestChangesText, editUrl } = useFooter()
+
+const parsedSuggestChanges = computed(() =>
+  suggestChangesText.value ? parseInlineMarkdown(suggestChangesText.value) : null,
+)
 </script>
 
 <template>
@@ -58,10 +67,11 @@ const { showSourceCode, editUrl, sourceCodeUrl, sourceCodeLabel } = useSourceCod
       <DocNavigation />
 
       <div flex="~ justify-between items-center" f-mt-lg f-text-xs>
-        <a :href="editUrl" target="_blank" rel="noopener" op-70 hover:opacity-100 transition-opacity flex="~ items-center gap-3">
-          <span>Suggest changes on this page</span>
+        <a v-if="parsedSuggestChanges" :href="editUrl" target="_blank" rel="noopener" op-70 hover:opacity-100 transition-opacity flex="~ items-center gap-3">
+          <span v-html="parsedSuggestChanges" />
           <div i-nimiq:arrow-right text="neutral-700 12" />
         </a>
+        <div v-else />
         <span text-neutral-600 font-normal>Built with the <a href="https://onmax.github.io/nimiq-ui/vitepress-theme/" un-text-neutral-700 target="_blank" rel="noopener" underline hover:text-neutral-800 transition-colors>Nimiq Vitepress Theme</a></span>
       </div>
     </div>

packages/nimiq-vitepress-theme/src/types.ts

@@ -71,6 +71,7 @@ export interface NimiqVitepressFrontmatter {
   copyMarkdown?: boolean
   wide?: boolean
   inlineActions?: boolean
+  suggestChanges?: false | string
 }
 
 export interface DefineThemeNqVpOptions {

packages/nimiq-vitepress-theme/src/utils/markdownUtils.ts

@@ -0,0 +1,11 @@
+export function parseInlineMarkdown(text: string): string {
+  return text
+    // Links: [text](url)
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener" class="underline hover:text-neutral-800 transition-colors">$1</a>')
+    // Bold: **text**
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    // Italic: *text*
+    .replace(/\*([^*]+)\*/g, '<em>$1</em>')
+    // Code: `text`
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+}

packages/nimiq-vitepress-theme/src/vite/index.ts

@@ -20,6 +20,14 @@ export interface NimiqVitepressVitePluginOptions {
    */
   contentPath?: string
 
+  /**
+   * Customize the "Suggest changes" footer text
+   * - false: hide the footer link
+   * - string: use custom text (supports markdown)
+   * - function: dynamic text based on page path
+   */
+  suggestChanges?: false | string | ((options: { path: string }) => string)
+
   /**
    * Git changelog configuration
    * If not provided, will use repoURL as default
@@ -31,6 +39,7 @@ export interface NimiqVitepressVitePluginOptions {
 export function NimiqVitepressVitePlugin({
   repoURL,
   contentPath = '',
+  suggestChanges,
   gitChangelog,
 }: NimiqVitepressVitePluginOptions): Plugin[] {
   const { resolveId, configureServer, load, transform } = groupIconVitePlugin()
@@ -49,6 +58,7 @@ export function NimiqVitepressVitePlugin({
   const nimiqConfig = {
     repoURL,
     contentPath,
+    suggestChanges,
   }
 
   const plugins: Plugin[] = [