Fixing Edit on GitHub Links (#627)

Author: TechHutTV

.gitignore

@@ -31,3 +31,6 @@ package-lock.json
 # LLM documentation (generated)
 /public/llms/
 /public/llms.txt
+
+# Edit on GitHub index routes (generated by scripts/generate-github-routes.mjs)
+/src/lib/edit-on-github-routes.js

package.json

@@ -3,8 +3,9 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "npm run gen:llm && next dev --webpack",
-    "build": "npm run gen:llm && next build --webpack",
+    "dev": "npm run gen:llm && npm run gen:edit-routes && next dev --webpack",
+    "build": "npm run gen:llm && npm run gen:edit-routes && next build --webpack",
+    "gen:edit-routes": "node scripts/generate-github-routes.mjs",
     "gen": "swagger-codegen generate -i https://raw.githubusercontent.com/netbirdio/netbird/main/management/server/http/api/openapi.yml -l openapi -o generator/openapi && npx ts-node generator/index.ts gen --input generator/openapi/openapi.json --output src/pages/ipa/resources",
     "gen:llm": "node scripts/generate-llm-docs.mjs",
     "start": "next start",

scripts/generate-github-routes.mjs

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+/**
+ * Generates src/lib/edit-on-github-routes.js by scanning src/pages for index.mdx.
+ * Used by Layout.jsx so "Edit on GitHub" links point to .../index.mdx for those routes.
+ * Run automatically with dev and build.
+ */
+
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const ROOT = path.join(__dirname, '..')
+const PAGES_DIR = path.join(ROOT, 'src/pages')
+const OUT_PATH = path.join(ROOT, 'src/lib/edit-on-github-routes.js')
+
+function findIndexMdxRoutes(dir, basePath = '') {
+  const entries = fs.readdirSync(dir, { withFileTypes: true })
+  const routes = []
+  for (const e of entries) {
+    const rel = basePath ? `${basePath}/${e.name}` : e.name
+    if (e.isDirectory()) {
+      routes.push(...findIndexMdxRoutes(path.join(dir, e.name), rel))
+    } else if (e.name === 'index.mdx') {
+      routes.push('/' + basePath)
+    }
+  }
+  return routes
+}
+
+const routes = findIndexMdxRoutes(PAGES_DIR)
+  .filter((r) => r !== '') // ignore root index if any
+  .sort()
+
+const content = `// Auto-generated by scripts/generate-github-routes.mjs – do not edit
+/** Pathnames served by src/pages/.../index.mdx (Edit on GitHub must link to /index.mdx). */
+export const EDIT_ON_GITHUB_INDEX_ROUTES = new Set(${JSON.stringify(routes)});
+`
+
+fs.mkdirSync(path.dirname(OUT_PATH), { recursive: true })
+fs.writeFileSync(OUT_PATH, content, 'utf8')
+console.log('Generated', OUT_PATH, 'with', routes.length, 'index routes')

src/components/Layout.jsx

@@ -17,6 +17,7 @@ import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import {toast} from "react-toastify";
 import {AnnouncementBanner} from "@/components/announcement-banner/AnnouncementBanner";
 import {useAnnouncements} from "@/components/announcement-banner/AnnouncementBannerProvider";
+import { EDIT_ON_GITHUB_INDEX_ROUTES } from '@/lib/edit-on-github-routes'
 
 const navigation = [
   {
@@ -228,7 +229,7 @@ export function Layout({ children, title, tableOfContents }) {
             </li>
             <li key="edit-on-github">
               <Link
-                  href={"https://github.com/netbirdio/docs/tree/main/src/pages" + router.pathname + ".mdx"}
+                  href={"https://github.com/netbirdio/docs/tree/main/src/pages" + (EDIT_ON_GITHUB_INDEX_ROUTES.has(router.pathname) ? router.pathname + "/index.mdx" : router.pathname + ".mdx")}
                   className="dark:hover:text-slate-300 dark:text-slate-400 text-slate-500 hover:text-slate-700 font-normal'"
                   style={{display: "flex", alignItems: 'center'}}
               >