From 47204de0819897d82cf5f5ce793d4adad6da86c9 Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Sun, 11 Aug 2024 12:33:07 +0200 Subject: [PATCH] feat: INLINE_IMAGES_ORIGIN --- .github/workflows/build.yml | 4 ++++ readme.md | 15 ++++++++------- src/utils/docs.tsx | 25 ++++++++++++++++++++++++- 3 files changed, 36 insertions(+), 8 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 52ee50ab..04e528ac 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -9,6 +9,10 @@ on: libname: required: true type: string + INLINE_IMAGES_ORIGIN: + required: false + type: string + default: 'https://github.com/${{ github.repository }}/raw/${{ github.ref_name }}' jobs: build-job: diff --git a/readme.md b/readme.md index 32400ab6..b0d08771 100644 --- a/readme.md +++ b/readme.md @@ -22,13 +22,14 @@ $ rm -rf out; \ http://localhost:3000/getting-started/introduction -| var | description | default | -| ----------------------- | --------------------------------------------------------- | ------- | -| `MDX`\* | Path to `*.mdx` folder
NB: can be relative or absolute | none | -| `NEXT_PUBLIC_LIBNAME`\* | Library name | none | -| `BASE_PATH` | base path for the final URL | none | -| `DIST_DIR` | Path to the output folder | none | -| `OUTPUT` | Set to `export` for static `out`put | none | +| var | description | default | +| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | +| `MDX`\* | Path to `*.mdx` folder
NB: can be relative or absolute | none | +| `NEXT_PUBLIC_LIBNAME`\* | Library name | none | +| `BASE_PATH` | base path for the final URL | none | +| `DIST_DIR` | Path to the output folder | none | +| `OUTPUT` | Set to `export` for static `out`put | none | +| `INLINE_IMAGES_ORIGIN` | [Origin](https://developer.mozilla.org/en-US/docs/Web/API/URL/origin) for inlining relative images
Eg: in a `/advanced/introduction.mdx` file, `` becomes ``
NB: if none, don't use relative images | none | \* Required diff --git a/src/utils/docs.tsx b/src/utils/docs.tsx index aaf10a48..06c76180 100644 --- a/src/utils/docs.tsx +++ b/src/utils/docs.tsx @@ -107,7 +107,7 @@ async function _getDocs( // // Sanitize markdown - const content = compiled.content + let content = compiled.content // Remove comments from frontMatter .replace(FRONTMATTER_REGEX, '') // Remove extraneous comments from post @@ -115,6 +115,29 @@ async function _getDocs( // Remove inline link syntax .replace(INLINE_LINK_REGEX, '$1') + // Require inline images + const inlineImagesOrigin = process.env.INLINE_IMAGES_ORIGIN + if (inlineImagesOrigin) { + content = content.replace( + /(src="|\()(.+?\.(?:png|jpe?g|gif|webp|avif))("|\))/g, + (_input, prefix, src, suffix) => { + if (src.includes('://')) return `${prefix}${src}${suffix}` + + // Eg: + // + // root: "/Users/abernier/code/pmndrs/uikit/docs" + // file: "/Users/abernier/code/pmndrs/uikit/docs/advanced/performance.md" + // + const relativePath = file.substring(root.length) // "/advanced/performance.md" + const folderPath = relativePath.split('/').slice(0, -1).join('/') // "/advanced" + + const url = `${inlineImagesOrigin}${folderPath}/${src}` // "https://github.com/pmndrs/uikit/raw/main/advanced/./basic-example.gif" + + return `${prefix}${url}${suffix}` + } + ) + } + const boxes: string[] = [] const tableOfContents: DocToC[] = []