add Graph Client README.md doc + fix network diagram for substreams/README (#408)

Co-authored-by: Benoît Rouleau <benoit.rouleau@icloud.com>

Author: Dimitri POSTOLOV

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

@@ -2,6 +2,7 @@ import { RemoteContent } from 'nextra/data'
 import { buildDynamicMDX } from 'nextra/remote'
 import { getPageMap } from '@/src/getPageMap'
 import { remarkReplaceLinks } from '@/src/remarkReplaceLinks'
+import { replaceGitBookContent } from '@/src/replaceGitBookContent'
 import json from '@/remote-files/firehose.json'
 
 export const getStaticPaths = () => ({
@@ -19,29 +20,22 @@ export async function getStaticProps({ params }) {
   const foundPath = filePaths.find((filePath) => filePath.startsWith(paths))
   const baseURL = `https://raw.githubusercontent.com/${user}/${repo}/${branch}/${docsPath}${foundPath}`
   const response = await fetch(baseURL)
-  const data = (await response.text())
-    // replace {% embed ... %} with <iframe />
-    .replaceAll(
-      /{%\s+embed\s+url="(.*?)"\s+%}/g,
-      (...m) =>
-        `<iframe src="${m[1].replace(
-          // we need enhance YouTube links, otherwise they will be not loaded in iframe
-          'youtube.com/watch?v=',
-          'youtube.com/embed/'
-        )}" style={{aspectRatio: 16/9, width: '100%'}}/>`
-    )
-    // remove gitbook {% ... %} elements
-    .replaceAll(/{%.*?%}/g, '')
-    // Replaces all the relative paths of images to absolute paths to the repo
-    .replaceAll('../assets', `https://raw.githubusercontent.com/${user}/${repo}/${branch}/assets/`)
-    // close img tags only if he doesn't point to .gitbook
-    .replaceAll(/<img(.*?)>/g, (...m) => (m[1].includes('src=".gitbook') ? '' : `<img${m[1]}/>`))
-  const mdx = await buildDynamicMDX(data, {
-    mdxOptions: {
-      remarkPlugins: [[remarkReplaceLinks, { foundPath, basePath: '/firehose/' }]],
-    },
-    codeHighlight: false,
-  })
+  const content = await response.text()
+  const mdx = await buildDynamicMDX(
+    replaceGitBookContent({
+      content,
+      user,
+      repo,
+      branch,
+      docsPath,
+    }),
+    {
+      mdxOptions: {
+        remarkPlugins: [[remarkReplaceLinks, { foundPath, basePath: '/firehose/' }]],
+      },
+      codeHighlight: false,
+    }
+  )
   const parsedData = JSON.parse(mdx.__nextra_dynamic_opts)
   // remove title from frontMatter if it's the same as the title of the page
   if (parsedData.title === parsedData.frontMatter.title) {

website/pages/en/querying/graph-client/[[...slug]].mdx

@@ -1,6 +1,7 @@
 import { RemoteContent } from 'nextra/data'
 import { buildDynamicMDX } from 'nextra/remote'
 import { Mermaid } from 'nextra/components'
+import { visit } from 'unist-util-visit'
 import { getPageMap } from '@/src/getPageMap'
 import json from '@/remote-files/graph-client.json'
 
@@ -22,6 +23,18 @@ export async function getStaticProps({ params }) {
   const data = await response.text()
   const mdx = await buildDynamicMDX(data, {
     codeHighlight: false,
+    mdxOptions: {
+      remarkPlugins: [
+        () => (tree, _file, done) => {
+          visit(tree, 'link', (node) => {
+            if (node.url.startsWith('../')) {
+              node.url = node.url.replace('../', `https://github.com/${user}/${repo}/tree/${branch}/`)
+            }
+          })
+          done()
+        },
+      ],
+    },
   })
   return {
     props: {

website/pages/en/querying/graph-client/_meta.js

@@ -2,4 +2,7 @@ import { createCatchAllMeta } from 'nextra/catch-all'
 
 import json from '../../../../remote-files/graph-client.json' assert { type: 'json' }
 
-export default () => createCatchAllMeta(json.filePaths)
+export default () =>
+  createCatchAllMeta(json.filePaths, {
+    README: 'Introduction',
+  })

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

@@ -2,6 +2,7 @@ import { RemoteContent } from 'nextra/data'
 import { buildDynamicMDX } from 'nextra/remote'
 import { getPageMap } from '@/src/getPageMap'
 import { remarkReplaceLinks } from '@/src/remarkReplaceLinks'
+import { replaceGitBookContent } from '@/src/replaceGitBookContent'
 import json from '@/remote-files/substreams.json'
 
 export const getStaticPaths = () => ({
@@ -19,32 +20,25 @@ export async function getStaticProps({ params }) {
   const foundPath = filePaths.find((filePath) => filePath.startsWith(paths))
   const baseURL = `https://raw.githubusercontent.com/${user}/${repo}/${branch}/${docsPath}${foundPath}`
   const response = await fetch(baseURL)
-  const data = (await response.text())
-    // replace {% embed ... %} with <iframe />
-    .replaceAll(
-      /{%\s+embed\s+url="(.*?)"\s+%}/g,
-      (...m) =>
-        `<iframe src="${m[1].replace(
-          // we need enhance YouTube links, otherwise they will be not loaded in iframe
-          'youtube.com/watch?v=',
-          'youtube.com/embed/'
-        )}" style={{aspectRatio: 16/9, width: '100%'}}/>`
-    )
-    // remove gitbook {% ... %} elements
-    .replaceAll(/{%.*?%}/g, '')
-    // close unclosed img tags
-    .replaceAll(/<img((?:(?!\/>)[^>])*?)>/g, (...m) => `<img${m[1]}/>`)
-    // fix gitbook image srcs
-    .replaceAll(/src="[^>"]*\.gitbook\/(.*)"/g, (...m) => `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 treats
-      // it as variable injection, to fix it we parse chang-log with the Markdown parser
-      format: paths.endsWith('/change-log') ? 'md' : 'mdx',
-      remarkPlugins: [[remarkReplaceLinks, { foundPath, basePath: '/substreams/' }]],
-    },
-    codeHighlight: false,
-  })
+  const content = await response.text()
+  const mdx = await buildDynamicMDX(
+    replaceGitBookContent({
+      content,
+      user,
+      repo,
+      branch,
+      docsPath,
+    }),
+    {
+      mdxOptions: {
+        // change-log contains `{variable}` text that is thrown an error by MDX2 parser since he treats
+        // it as variable injection, to fix it we parse chang-log with the Markdown parser
+        format: paths.endsWith('/change-log') ? 'md' : 'mdx',
+        remarkPlugins: [[remarkReplaceLinks, { foundPath, basePath: '/substreams/' }]],
+      },
+      codeHighlight: false,
+    }
+  )
   return {
     props: {
       ...mdx,

website/remote-files/graph-client.json

@@ -4,6 +4,7 @@
   "branch": "main",
   "docsPath": "docs/",
   "filePaths": [
+    "README.md",
     "architecture.md",
     "live.md"
   ]

website/src/replaceGitBookContent.ts

@@ -0,0 +1,33 @@
+type ReplaceGitBookContentParams = {
+  content: string
+  user: string
+  repo: string
+  branch: string
+  docsPath: string
+}
+
+export function replaceGitBookContent({ content, user, repo, branch, docsPath }: ReplaceGitBookContentParams): string {
+  return (
+    content
+      // replace {% embed ... %} with <iframe />
+      .replaceAll(
+        /{%\s+embed\s+url="(.*?)"\s+%}/g,
+        (...m) =>
+          `<iframe src="${m[1].replace(
+            // we need to enhance YouTube links, otherwise they will be not loaded in iframe
+            'youtube.com/watch?v=',
+            'youtube.com/embed/'
+          )}" style={{ aspectRatio: 16/9, width: '100%' }} />`
+      )
+      // remove gitbook {% ... %} elements
+      .replaceAll(/{%.*?%}/g, '')
+      // close unclosed img tags
+      .replaceAll(/<img((?:(?!\/>)[^>])*?)>/g, (...m) => `<img${m[1]}/>`)
+      // Replaces all the relative paths of images to absolute paths to the repo
+      .replaceAll('../assets', `https://raw.githubusercontent.com/${user}/${repo}/${branch}/assets/`)
+      .replaceAll(
+        '.gitbook/assets/',
+        `https://raw.githubusercontent.com/${user}/${repo}/${branch}/${docsPath}.gitbook/assets/`
+      )
+  )
+}