From 47204de0819897d82cf5f5ce793d4adad6da86c9 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
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<br>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<br>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<br>Eg: in a `/advanced/introduction.mdx` file, `<img src="./dog.png" />` becomes `<img src="https://github.com/pmndrs/uikit/raw/main/advanced/dog.png" />`<br> 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[] = []