diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index b6342745..0b6bc1a4 100644
--- a/.github/workflows/build.yml
+++ b/.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:
diff --git a/readme.md b/readme.md
index 7c56a2a3..e0a13bd8 100644
--- a/readme.md
+++ b/readme.md
@@ -1,12 +1,12 @@
-| var | description | example | default |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | ------- |
-| `MDX`\* | Path to `*.mdx` folder
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
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
@@ -14,29 +14,42 @@ 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
```
- becomes
+ becomes (for a `INLINE_IMAGES_ORIGIN=http://localhost:60141` value):
```mdx
- 
+ 
```
+ `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
diff --git a/src/utils/docs.tsx b/src/utils/docs.tsx
index c410b6d7..02de750d 100644
--- a/src/utils/docs.tsx
+++ b/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}`
}