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[] = []