fix: DocsActions buttons not working on monitoring pages

Author: Maya P

src/components/DocsActions/index.tsx

@@ -1,25 +1,33 @@
-import React, { useEffect, useState } from 'react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import React from 'react';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
 import ContentActions from '@site/src/components/ContentActions';
 
 export default function DocsActions(): JSX.Element | null {
-  const { siteConfig } = useDocusaurusContext();
-  const [pathname, setPathname] = useState<string>('');
-
-  useEffect(() => {
-    setPathname(window.location.pathname);
-  }, []);
-
-  // Compute values unconditionally to keep hooks order stable
-  const isDocsPage = pathname.startsWith('/docs/') && pathname !== '/docs/' && !pathname.includes('/index');
-
-  const relativePath = pathname.replace('/docs/', '');
-  const editUrl = `https://gitlab.com/postgres-ai/docs/-/edit/master/docs/${relativePath}.md`;
-  const rawUrl = `/raw/docs/${relativePath}.md`;
-
-  if (!isDocsPage) {
+  const {metadata} = useDoc();
+  
+  // metadata.editUrl is correctly generated by Docusaurus with the actual filename
+  // e.g., "https://gitlab.com/postgres-ai/docs/-/edit/master/docs/monitoring/dashboards/04-wait-events.md"
+  const editUrl = metadata.editUrl;
+  
+  if (!editUrl) {
+    return null;
+  }
+  
+  // Extract the relative path from the editUrl to construct the raw URL
+  // editUrl format: https://gitlab.com/postgres-ai/docs/-/edit/master/docs/path/to/file.md
+  // We need to extract "path/to/file.md" from after "/master/docs/"
+  const match = editUrl.match(/\/master\/docs\/(.+\.md)$/);
+  if (!match) {
     return null;
   }
+  
+  const relativePath = match[1];
+  const rawUrl = `/raw/docs/${relativePath}`;
+  
+  // Intentionally use blob (view) URL instead of edit URL.
+  // This lets users see the file first and choose their preferred editing method:
+  // Web IDE, single file editor, clone & edit locally, etc.
+  const viewUrl = editUrl.replace('/-/edit/', '/-/blob/');
 
-  return <ContentActions rawUrl={rawUrl} editUrl={editUrl} />;
-} 
+  return <ContentActions rawUrl={rawUrl} editUrl={viewUrl} />;
+}