feat: INLINE_IMAGES_ORIGIN

pmndrs · Aug 11, 2024 · 47204de · 47204de
1 parent fdb958e
commit 47204de
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
diff --git 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
@@ -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
@@ -107,14 +107,37 @@ 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
         .replace(COMMENT_REGEX, '')
         // 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[] = []