🐞 fix: edit page link on wrapper broken 404 (#18700)

* 🐞 fix: edit page link on wrapper broken 404

* Update apps/docs/layouts/guides/index.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

---------

Co-authored-by: Chris Gwilliams <517923+encima@users.noreply.github.com>
Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

apps/docs/layouts/DefaultGuideLayout.tsx

@@ -13,6 +13,7 @@ interface Props {
   children: any
   toc?: any
   currentPage?: string
+  editLink?: string
 }
 
 const Layout: FC<Props> = (props) => {

apps/docs/layouts/guides/index.tsx

@@ -23,6 +23,7 @@ interface Props {
     tocVideo?: string
     canonical?: string
   }
+  editLink?: string
   children: any
   toc?: any
   currentPage?: string
@@ -136,8 +137,12 @@ const Layout: FC<Props> = (props) => {
                 <div className="mt-16 not-prose">
                   <div>
                     <a
-                      href={`https://github.com/supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`}
-                      className="text-sm transition flex items-center gap-1 text-foreground-lighter hover:text-foreground w-fit"
+                      href={`https://github.com/${
+                        props.editLink ||
+                        `supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`
+                      }
+                    `}
+                      className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200 w-fit"
                     >
                       Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
                     </a>

apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx

@@ -80,11 +80,12 @@ interface WrappersDocsProps {
     title: string
     description?: string
   }
+  editLink?: string
 }
 
-export default function WrappersDocs({ source, meta }: WrappersDocsProps) {
+export default function WrappersDocs({ source, meta, editLink }: WrappersDocsProps) {
   return (
-    <Layout meta={meta}>
+    <Layout meta={meta} editLink={editLink}>
       <MDXRemote {...source} components={components} />
     </Layout>
   )
@@ -101,10 +102,9 @@ export const getStaticProps: GetStaticProps<WrappersDocsProps> = async ({ params
   }
 
   const { remoteFile, meta } = page
-
-  const response = await fetch(
-    `https://raw.githubusercontent.com/${org}/${repo}/${branch}/${docsDir}/${remoteFile}`
-  )
+  const repoPath = `${org}/${repo}/${branch}/${docsDir}/${remoteFile}`
+  const repoEditPath = `${org}/${repo}/blob/${branch}/${docsDir}/${remoteFile}`
+  const response = await fetch(`https://raw.githubusercontent.com/${repoPath}`)
 
   const source = await response.text()
 
@@ -119,7 +119,6 @@ export const getStaticProps: GetStaticProps<WrappersDocsProps> = async ({ params
       if (hostname !== placeholderHostname || pathname === '/') {
         return url
       }
-
       const relativePage = (
         pathname.endsWith('.md')
           ? pathname.replace(/\.md$/, '')
@@ -166,7 +165,7 @@ export const getStaticProps: GetStaticProps<WrappersDocsProps> = async ({ params
     },
   })
 
-  return { props: { source: mdxSource, meta } }
+  return { props: { source: mdxSource, meta, editLink: repoEditPath } }
 }
 
 export const getStaticPaths: GetStaticPaths = async () => {