feat: INLINE_IMAGES_ORIGIN

.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:

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
 

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