From 93cff7fe5c6d658325de86948b696952b3c72ffd Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 1 Jul 2023 13:21:42 +0200 Subject: [PATCH 1/7] fix broken remote images --- website/pages/en/firehose/[[...slug]].mdx | 30 ++++++++--------- website/pages/en/substreams/[[...slug]].mdx | 36 ++++++++++---------- website/src/remarkReplaceLinks.ts | 37 ++++++++++++++++++--- website/src/replaceGitBookContent.ts | 16 +-------- 4 files changed, 67 insertions(+), 52 deletions(-) diff --git a/website/pages/en/firehose/[[...slug]].mdx b/website/pages/en/firehose/[[...slug]].mdx index 8bcb9cc0e5d8..a66083c25b22 100644 --- a/website/pages/en/firehose/[[...slug]].mdx +++ b/website/pages/en/firehose/[[...slug]].mdx @@ -21,21 +21,21 @@ export async function getStaticProps({ params }) { const baseURL = `https://raw.githubusercontent.com/${user}/${repo}/${branch}/${docsPath}${foundPath}` const response = await fetch(baseURL) const content = await response.text() - const mdx = await buildDynamicMDX( - replaceGitBookContent({ - content, - user, - repo, - branch, - docsPath, - }), - { - mdxOptions: { - remarkPlugins: [[remarkReplaceLinks, { foundPath, basePath: '/firehose/' }]], - }, - codeHighlight: false, - } - ) + const mdx = await buildDynamicMDX(replaceGitBookContent({ content }), { + mdxOptions: { + remarkPlugins: [ + [ + remarkReplaceLinks, + { + foundPath, + basePath: '/firehose/', + assetsBasePath: `${user}/${repo}/${branch}/${docsPath}`, + }, + ], + ], + }, + 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) { diff --git a/website/pages/en/substreams/[[...slug]].mdx b/website/pages/en/substreams/[[...slug]].mdx index d66b73ee2d45..68a5393cd8b4 100644 --- a/website/pages/en/substreams/[[...slug]].mdx +++ b/website/pages/en/substreams/[[...slug]].mdx @@ -21,24 +21,24 @@ export async function getStaticProps({ params }) { const baseURL = `https://raw.githubusercontent.com/${user}/${repo}/${branch}/${docsPath}${foundPath}` const response = await fetch(baseURL) 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, - } - ) + const mdx = await buildDynamicMDX(replaceGitBookContent({ content }), { + 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/', + assetsBasePath: `${user}/${repo}/${branch}/${docsPath}`, + }, + ], + ], + }, + codeHighlight: false, + }) return { props: { ...mdx, diff --git a/website/src/remarkReplaceLinks.ts b/website/src/remarkReplaceLinks.ts index 3e675a7eb766..5831682867b5 100644 --- a/website/src/remarkReplaceLinks.ts +++ b/website/src/remarkReplaceLinks.ts @@ -3,12 +3,19 @@ import path from 'node:path' import { Plugin } from 'unified' import { visit } from 'unist-util-visit' -export const remarkReplaceLinks: Plugin<[{ foundPath: string; basePath: string }], Root> = ({ - foundPath, - basePath, -}) => { +export const remarkReplaceLinks: Plugin< + [ + { + foundPath: string + basePath: string + assetsBasePath: string + } + ], + Root +> = ({ foundPath, basePath, assetsBasePath }) => { if (!foundPath) throw new Error('remarkReplaceLinks: foundPath is required') if (!basePath) throw new Error('remarkReplaceLinks: basePath is required') + if (!assetsBasePath) throw new Error('remarkReplaceLinks: assetsBasePath is required') return (tree, _file, done) => { // enhance links @@ -22,6 +29,28 @@ export const remarkReplaceLinks: Plugin<[{ foundPath: string; basePath: string } node.url = path.join(path.dirname(foundPath), node.url) } }) + visit( + tree, + [ + { type: 'mdxJsxTextElement', name: 'img' }, + { type: 'mdxJsxFlowElement', name: 'img' }, + ], + (node: any) => { + const attrs = node.attributes as { name: string; value: string }[] + const srcAttr = attrs.find((attr) => attr.name === 'src')! + if (srcAttr.value.includes('.gitbook/assets/')) { + srcAttr.value = srcAttr.value.replace( + /.*\.gitbook\/assets\//, + `https://raw.githubusercontent.com/${assetsBasePath}.gitbook/assets/` + ) + } + } + ) + visit(tree, 'image', (node) => { + if (node.url.includes('../assets/')) { + node.url = node.url.replace(/.*\.\.\/assets\//, `https://raw.githubusercontent.com/${assetsBasePath}/assets/`) + } + }) done() } } diff --git a/website/src/replaceGitBookContent.ts b/website/src/replaceGitBookContent.ts index 5ee7238117af..b18844a9e23a 100644 --- a/website/src/replaceGitBookContent.ts +++ b/website/src/replaceGitBookContent.ts @@ -1,12 +1,4 @@ -type ReplaceGitBookContentParams = { - content: string - user: string - repo: string - branch: string - docsPath: string -} - -export function replaceGitBookContent({ content, user, repo, branch, docsPath }: ReplaceGitBookContentParams): string { +export function replaceGitBookContent({ content }: { content: string }): string { return ( content // replace {% embed ... %} with