Fix issues with links and images in substreams docs (#382)

Author: benface

packages/nextra-theme/src/components/Link.tsx

@@ -9,6 +9,8 @@ export type LinkProps = Pick<NextLinkProps, 'replace' | 'scroll' | 'shallow' | '
     locale?: string
   }
 
+const externalHrefRegex = /^(https?:)?\/\//
+
 export const Link = ({
   href,
   replace,
@@ -33,16 +35,15 @@ export const Link = ({
     )
   }
 
-  const isInternal = finalHref.startsWith('/')
-
-  // If the link is internal, automatically prepend the locale to it
-  if (isInternal) {
+  // If the link is root-relative, automatically prepend the locale to it
+  if (finalHref.startsWith('/')) {
     const { locale: pathLocale, pathWithoutLocale } = extractLocaleFromPath(finalHref)
     finalHref = `/${linkLocale ?? pathLocale ?? currentLocale}${pathWithoutLocale}`
   }
 
   // If the link is external, default the target to `_blank`
-  const finalTarget = target ?? (!isInternal ? '_blank' : undefined)
+  const isExternal = externalHrefRegex.test(finalHref)
+  const finalTarget = target ?? (isExternal ? '_blank' : undefined)
 
   return (
     <NextLink

website/pages/en/substreams/[[...slug]].mdx

@@ -3,6 +3,7 @@ import { RemoteContent } from 'nextra/data'
 import { buildDynamicMDX } from 'nextra/remote'
 import { listFiles } from './_meta.js'
 import { getPageMap } from '@/src/getPageMap'
+import path from 'node:path'
 
 export async function getStaticPaths() {
   const files = await listFiles()
@@ -37,8 +38,13 @@ export async function getStaticProps({ params: { slug = ['README'] } }) {
     )
     // remove gitbook {% ... %} elements
     .replaceAll(/{%.*?%}/g, '')
-    // close img tags only if he doesn't point to .gitbook
-    .replaceAll(/<img(.*?)>/g, (...m) => (m[1].includes('src=".gitbook') ? '' : `<img${m[1]}/>`))
+    // close unclosed img tags
+    .replaceAll(/<img((?:(?!\/>)[^>])*?)>/g, (...m) => `<img${m[1]}/>`)
+    // fix gitbook image srcs
+    .replaceAll(/src="[^>"]*\.gitbook\/(.*)"/g, (...m) => {
+      console.log({ m })
+      return `src="${baseURL}.gitbook/${m[1]}"`
+    })
   const mdx = await buildDynamicMDX(data, {
     mdxOptions: {
       // change-log contains `{variable}` text that is thrown an error by MDX2 parser since he treat it as variable injection, to fix it we parse chang-log with the markdown parser
@@ -47,15 +53,12 @@ export async function getStaticProps({ params: { slug = ['README'] } }) {
         () => (tree, _file, done) => {
           // enhance links
           visit(tree, 'link', (node) => {
-            if (node.url.startsWith('./')) {
-              node.url = node.url.slice(2)
-            }
             if (node.url.startsWith('/')) {
               // (foo)[/foo/bar]
               node.url = node.url.replace('/', '/substreams/')
-            } else if (!node.url.includes('/') && node.url.endsWith('.md')) {
-              // (foo)[foo.md]
-              node.url = [...slug.slice(0, -1), node.url].join('/')
+            } else {
+              // (foo)[foo.md] or (foo)[./foo.md] or (foo)[../foo.md]
+              node.url = path.join(path.dirname(fileURL), node.url)
             }
           })
           done()