local INLINE_IMAGES_ORIGIN support

.github/workflows/build.yml

@@ -44,7 +44,7 @@ jobs:
  MDX: ${{ inputs.mdx }}
  NEXT_PUBLIC_LIBNAME: ${{ inputs.libname }}
  HOME_REDIRECT: ${{ inputs.home_redirect }}
- INLINE_IMAGES_ORIGIN: ${{ inputs.inline_images_origin }}
+ INLINE_IMAGES_ORIGIN: ${{ inputs.inline_images_origin }}/${{ inputs.mdx }}
 
  - uses: actions/upload-pages-artifact@v3
  with:

readme.md

@@ -1,42 +1,55 @@
-| var | description | example | default |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | ------- |
-| `MDX`\* | Path to `*.mdx` folder<br>NB: can be relative or absolute | `docs` or `~/code/myproject/documentation` | none |
-| `NEXT_PUBLIC_LIBNAME`\* | Library name | `React Three Fiber` | none |
-| `BASE_PATH` | Base path for the final URL | `/react-three-fiber` | none |
-| `DIST_DIR` | Path to the output folder ([within project](https://nextjs.org/docs/app/api-reference/next-config-js/distDir#:~:text=should%20not%20leave%20your%20project%20directory)) | `out` or `docs/out/react-three-fiber` | none |
-| `OUTPUT` | Set to `export` for static output | `export` | none |
-| `HOME_REDIRECT` | Where the home should redirect | `/getting-started/introduction` | none |
-| `INLINE_IMAGES_ORIGIN` | [Origin](https://developer.mozilla.org/en-US/docs/Web/API/URL/origin) for inlining relative images | `https://github.com/pmndrs/react-three-fiber/raw/main` | none |
+| var | description | example  | default |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------- |
+| `MDX`\* | Path to `*.mdx` folder<br>NB: can be relative or absolute | `docs` or `~/code/myproject/documentation`  | none |
+| `NEXT_PUBLIC_LIBNAME`\* | Library name | `React Three Fiber`  | none |
+| `BASE_PATH` | Base path for the final URL | `/react-three-fiber`  | none |
+| `DIST_DIR` | Path to the output folder ([within project](https://nextjs.org/docs/app/api-reference/next-config-js/distDir#:~:text=should%20not%20leave%20your%20project%20directory)) | `out` or `docs/out/react-three-fiber`  | none |
+| `OUTPUT` | Set to `export` for static output | `export`  | none |
+| `HOME_REDIRECT` | Where the home should redirect | `/getting-started/introduction`  | none |
+| `INLINE_IMAGES_ORIGIN` | [Origin](https://developer.mozilla.org/en-US/docs/Web/API/URL/origin) for inlining relative images | `http://localhost:60141`or `https://github.com/pmndrs/react-three-fiber/raw/main/docs` | none |
 
 \* Required
 
 Details:
 
 - `INLINE_IMAGES_ORIGIN`:
 
- In mdx `docs` folder, given a `advanced/introduction.mdx` file:
+ Given a `advanced/introduction.mdx` file in the `MDX` folder:
 
  ```mdx
  ![](dog.png)
  ```
 
- becomes
+ becomes (for a `INLINE_IMAGES_ORIGIN=http://localhost:60141` value):
 
  ```mdx
- ![](https://github.com/pmndrs/uikit/raw/main/docs/advanced/dog.png)
+ ![](http://localhost:60141/advanced/dog.png)
  ```
 
+ `http://localhost:60141` is the `MDX` folder served.
+
+ > [!TIP]
+ > When deployed on GitHub Pages, `INLINE_IMAGES_ORIGIN` will typically value something like `https://github.com/pmndrs/uikit/raw/main/docs`, thanks to [`build.yml`](.github/workflows/build.yml) rule.
+
 # dev
 
 ```sh
-$ MDX=~/code/pmndrs/react-three-fiber/docs \
- NEXT_PUBLIC_LIBNAME="React Three Fiber" \
- BASE_PATH= \
- DIST_DIR= \
- OUTPUT=export \
- HOME_REDIRECT=/getting-started/introduction \
- INLINE_IMAGES_ORIGIN= \
- npm run dev
+(
+ trap 'kill -9 0' SIGINT
+
+ export MDX=~/code/pmndrs/react-three-fiber/docs
+ export NEXT_PUBLIC_LIBNAME="React Three Fiber"
+ export BASE_PATH=
+ export DIST_DIR=
+ export OUTPUT=export
+ export HOME_REDIRECT=/getting-started/introduction
+ export INLINE_IMAGES_ORIGIN=http://localhost:60141
+
+ npx serve $MDX -p $(echo $INLINE_IMAGES_ORIGIN | grep -oE '[0-9]+' | tail -1) --no-port-switching --no-clipboard &
+ npm run dev &
+
+ wait
+)
 ```
 
 Then go to: http://localhost:3000

src/utils/docs.tsx

@@ -61,6 +61,10 @@ async function _getDocs(
  const files = await crawl(root, MARKDOWN_REGEX)
  // console.log('files', files)
 
+ const inlineImagesOrigin = process.env.INLINE_IMAGES_ORIGIN
+ if (!inlineImagesOrigin?.startsWith('http'))
+ throw new Error('INLINE_IMAGES_ORIGIN must be a valid origin')
+
  const docs = await Promise.all(
  files.map(async (file) => {
  // Get slug from local path
@@ -119,7 +123,6 @@ async function _getDocs(
  // inline images
  //
 
- const inlineImagesOrigin = process.env.INLINE_IMAGES_ORIGIN
  if (inlineImagesOrigin) {
  content = content.replace(
  /(src="|\()(.+?\.(?:png|jpe?g|gif|webp|avif))("|\))/g, // https://regexper.com/#%2F%28src%3D%22%7C%5C%28%29%28.%2B%3F%5C.%28%3F%3Apng%7Cjpe%3Fg%7Cgif%7Cwebp%7Cavif%29%29%28%22%7C%5C%29%29%2Fg
@@ -130,19 +133,19 @@ async function _getDocs(
  //
  // root: "/Users/abernier/code/pmndrs/uikit/docs"
  // file: "/Users/abernier/code/pmndrs/uikit/docs/advanced/performance.md"
+ // inlineImagesOrigin: "http://localhost:60141"
  //
 
  // Remove trailing slash from root if it exists
  const normalizedRoot = root.endsWith('/') ? root.slice(0, -1) : root
- // Extract the last folder name from the root path
- const lastFolderName = normalizedRoot.split('/').pop() // "docs"
 
  // Calculate the relative path from the file path after the root
  const relativePath = file.substring(normalizedRoot.length) // "/advanced/performance.md"
  // Extract the directory path from the relative path (excluding the file name)
  const directoryPath = relativePath.split('/').slice(0, -1).join('/') // "/advanced"
 
- const url = `${inlineImagesOrigin}/${lastFolderName}${directoryPath}/${src}` // "https://github.com/pmndrs/uikit/raw/main/docs/advanced/./basic-example.gif"
+ let url = `${inlineImagesOrigin}${directoryPath}/${src}` // "http://localhost:60141/advanced/./basic-example.gif"
+ url = `${new URL(url)}` // resolve parts like "main/./docs" => "main/docs"
 
  return `${prefix}${url}${suffix}`
  }