Fix "Edit page" link pointing to wrong URL in some cases (graphprotocol#52)

benface · web-flow · commit 082bb20f3668 · 2022-02-02T14:54:45.000-05:00
diff --git a/components/EditPageLink.tsx b/components/EditPageLink.tsx
@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react'
+import { HTMLAttributes, useContext } from 'react'
 import {
   Text,
   Flex,
@@ -11,6 +11,7 @@ import {
   useUniqueId,
 } from '@edgeandnode/components'
 
+import { NavContext } from '@/layout'
 import { Link } from '@/components'
 import { useI18n } from '@/hooks'
 
@@ -19,15 +20,14 @@ export type EditPageLinkProps = {
 } & Omit<HTMLAttributes<HTMLElement>, 'children'>
 
 export const EditPageLink = ({ mobile = false, ...props }: EditPageLinkProps) => {
-  const { currentLocale, currentPathWithoutLocale, translations } = useI18n()
+  const { pagePath } = useContext(NavContext)!
+  const { translations } = useI18n()
   const linkClass = useUniqueId('class')
 
   return (
     <Link
       className={linkClass}
-      href={`https://github.com/graphprotocol/docs/blob/main/pages/${currentLocale}${currentPathWithoutLocale}${
-        currentPathWithoutLocale.endsWith('/') ? 'index' : ''
-      }.mdx`}
+      href={`https://github.com/graphprotocol/docs/blob/main/pages/${pagePath}`}
       target="_blank"
       sx={{
         display: 'block',
diff --git a/layout/MDXLayout.tsx b/layout/MDXLayout.tsx
@@ -61,6 +61,7 @@ const mdxStyles = {
 } as ThemeUIStyleObject
 
 export type NavContextProps = {
+  pagePath: string
   navItems: NavItem[]
   pageNavItems: NavItemPage[]
   previousPage: NavItemPage | null
@@ -90,10 +91,10 @@ export type DocumentContextProps = {
 export const DocumentContext = createContext(null) as Context<DocumentContextProps | null>
 
 export type MDXLayoutProps = PropsWithChildren<
-  Pick<NavContextProps, 'navItems'> & Pick<DocumentContextProps, 'frontmatter' | 'outline'>
+  Pick<NavContextProps, 'pagePath' | 'navItems'> & Pick<DocumentContextProps, 'frontmatter' | 'outline'>
 >
 
-export const MDXLayout = ({ navItems, frontmatter, outline, children }: MDXLayoutProps) => {
+export const MDXLayout = ({ pagePath, navItems, frontmatter, outline, children }: MDXLayoutProps) => {
   const { currentPathWithoutLocale } = useI18n()
 
   // Compute some values for the `NavContext`
@@ -151,7 +152,7 @@ export const MDXLayout = ({ navItems, frontmatter, outline, children }: MDXLayou
   }, [outline, outlineItemIsInOrAboveView])
 
   return (
-    <NavContext.Provider value={{ navItems, pageNavItems, previousPage, currentPage, nextPage }}>
+    <NavContext.Provider value={{ pagePath, navItems, pageNavItems, previousPage, currentPage, nextPage }}>
       <DocumentContext.Provider value={{ frontmatter, outline, markOutlineItem, highlightedOutlineItemId }}>
         <Head>
           <title>{frontmatter?.title ? `${frontmatter.title} - ` : ''}The Graph Docs</title>
diff --git a/lib/remarkMdxLayout.mjs b/lib/remarkMdxLayout.mjs
@@ -9,31 +9,61 @@ import path from 'path'
 
 const JSXParser = Parser.extend(acornJsx())
 
-const getAstToInject = function (locale, outline) {
+const getAstToInject = function (pagePath, outline) {
+  const isDynamic = pagePath.includes('[locale]')
+  const locale = isDynamic ? null : pagePath.substring(0, 2)
+
   return {
     type: 'mdxjsEsm',
     value: '',
     data: {
       estree: JSXParser.parse(
         `
         import { MDXLayout as _MDXLayout } from '@/layout'
+        import { Locale } from '@/i18n'
         import { getNavItems } from '@/navigation'
 
-        export const getStaticProps = async () => {
-          const navItems = await getNavItems('${locale}')
+        const outline = ${Serializer.run(outline)}
 
-          return {
-            props: {
-              navItems,
-            },
+        ${
+          isDynamic
+            ? `
+          export const getStaticPaths = async () => {
+            return {
+              paths: Object.values(Locale).map((locale) => ({
+                params: { locale },
+              })),
+              fallback: false,
+            }
           }
+
+          export const getStaticProps = async (context) => {
+            const navItems = await getNavItems(context.params?.locale)
+
+            return {
+              props: {
+                navItems,
+              },
+            }
+          }
+        `
+            : `
+          export const getStaticProps = async () => {
+            const navItems = await getNavItems('${locale}')
+
+            return {
+              props: {
+                navItems,
+              },
+            }
+          }
+        `
         }
 
         export default function ({ navItems, children }) {
-          const outline = ${Serializer.run(outline)}
-
           return (
             <_MDXLayout
+              pagePath="${pagePath}"
               navItems={navItems}
               frontmatter={typeof frontmatter !== 'undefined' ? frontmatter : undefined}
               outline={outline}
@@ -82,9 +112,8 @@ export const remarkMdxLayout = () => {
       })
     })
 
-    const relativePath = path.relative(path.join(process.cwd(), 'pages'), file.path)
-    const locale = relativePath.substring(0, 2)
-    const astToInject = getAstToInject(locale, outline)
+    const pagePath = path.relative(path.join(process.cwd(), 'pages'), file.path)
+    const astToInject = getAstToInject(pagePath, outline)
 
     ast.children.push(astToInject)
   }
diff --git a/pages/[locale]/index.tsx b/pages/[locale]/index.tsx
@@ -52,7 +52,12 @@ const Index = ({ navItems }: { navItems: NavItem[] }) => {
   const { currentLocale, translations } = useI18n()
 
   return (
-    <MDXLayout navItems={navItems} frontmatter={frontmatter(currentLocale)} outline={outline}>
+    <MDXLayout
+      pagePath="[locale]/index.tsx"
+      navItems={navItems}
+      frontmatter={frontmatter(currentLocale)}
+      outline={outline}
+    >
       <Paragraph>{translations.index.intro}</Paragraph>
       <ul
         sx={{
