EDIT_ORIGIN

pmndrs · Aug 12, 2024 · 7699441 · 7699441
1 parent ed6b3fe
commit 7699441
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 24 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -38,13 +38,15 @@ jobs:
  -e OUTPUT=export \
  -e HOME_REDIRECT \
  -e INLINE_IMAGES_ORIGIN \
+ -e EDIT_ORIGIN \
  ghcr.io/pmndrs/docs:app-router npm run build
  env:
  BASE_PATH: ${{ steps.configurepages.outputs.base_path }}
  MDX: ${{ inputs.mdx }}
  NEXT_PUBLIC_LIBNAME: ${{ inputs.libname }}
  HOME_REDIRECT: ${{ inputs.home_redirect }}
  INLINE_IMAGES_ORIGIN: ${{ inputs.inline_images_origin }}/${{ inputs.mdx }}
+ EDIT_ORIGIN: 'https://github.com/${{ github.repository }}/edit/${{ github.ref_name }}/${{ inputs.mdx }}'
 
  - uses: actions/upload-pages-artifact@v3
  with:

diff --git a/README.md b/README.md
@@ -1,12 +1,15 @@
-| 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 |
+# Configuration
+
+| 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/master/docs` | none |
+| `EDIT_ORIGIN` | [Origin](https://developer.mozilla.org/en-US/docs/Web/API/URL/origin) for displaying "Edit this page" URLs | `https://github.com/pmndrs/react-three-fiber/edit/master/docs` | none |
 
 \* Required
 
@@ -37,15 +40,20 @@ Details:
 $ (
  trap 'kill -9 0' SIGINT
 
+ export _PORT=60141
+
+ # [Config](https://github.com/pmndrs/docs#configuration)
  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
+ export INLINE_IMAGES_ORIGIN=http://localhost:$_PORT
+ export EDIT_ORIGIN="vscode://file/$MDX"
 
- npx serve $MDX -p $(echo $INLINE_IMAGES_ORIGIN | grep -oE '[0-9]+' | tail -1) --no-port-switching --no-clipboard &
+ kill $(lsof -ti:"$_PORT")
+ npx serve $MDX -p $_PORT --no-port-switching --no-clipboard &
  npm run dev &
 
  wait
@@ -65,17 +73,22 @@ $ (
 
  rm -rf out
 
+ export _PORT=60141
+
+ # [Config](https://github.com/pmndrs/docs#configuration)
  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
+ export INLINE_IMAGES_ORIGIN=http://localhost:$_PORT
+ export EDIT_ORIGIN=
 
  npm run build
 
- npx serve $MDX -p $(echo $INLINE_IMAGES_ORIGIN | grep -oE '[0-9]+' | tail -1) --no-port-switching --no-clipboard &
+ kill $(lsof -ti:"$_PORT")
+ npx serve $MDX -p $_PORT --no-port-switching --no-clipboard &
  npx serve out &
 
  wait
@@ -95,26 +108,33 @@ $ cd ~/code/pmndrs/react-three-fiber
 $ (
  trap 'kill -9 0' SIGINT
 
+ export _PORT=60141
+
+ # [Config](https://github.com/pmndrs/docs#configuration)
  export MDX=./docs
  export NEXT_PUBLIC_LIBNAME="React Three Fiber"
+ export BASE_PATH=
  export OUTPUT=export
  export HOME_REDIRECT=/getting-started/introduction
- export INLINE_IMAGES_ORIGIN=http://localhost:60141
+ export INLINE_IMAGES_ORIGIN=http://localhost:$_PORT
+ export EDIT_ORIGIN=
 
  rm -rf "$MDX/out"
 
  docker run --rm --init -it \
  -v "$MDX":/app/docs \
- -e BASE_PATH \
- -e DIST_DIR="$MDX/out$BASE_PATH" \
  -e MDX \
  -e NEXT_PUBLIC_LIBNAME \
+ -e BASE_PATH \
+ -e DIST_DIR="$MDX/out$BASE_PATH" \
  -e OUTPUT \
  -e HOME_REDIRECT \
  -e INLINE_IMAGES_ORIGIN \
+ -e EDIT_ORIGIN \
  pmndrs-docs npm run build
 
- npx serve $MDX -p $(echo $INLINE_IMAGES_ORIGIN | grep -oE '[0-9]+' | tail -1) --no-port-switching --no-clipboard &
+ kill $(lsof -ti:"$_PORT")
+ npx serve $MDX -p $_PORT --no-port-switching --no-clipboard &
  npx -y serve "$MDX/out" &
 
  wait

diff --git a/src/app/[...slug]/DocsContext.tsx b/src/app/[...slug]/DocsContext.tsx
@@ -17,7 +17,7 @@ export type DocToC = {
 export type Doc = {
  slug: string[]
  url: string
- // editURL: string
+ editURL?: string
  nav: number
  title: string
  description: string

diff --git a/src/app/[...slug]/layout.tsx b/src/app/[...slug]/layout.tsx
@@ -66,10 +66,9 @@ export default async function Layout({ params, children }: Props) {
  target="_blank"
  rel="noopener noreferrer"
  className="mb-2 text-base text-gray-500 hover:underline"
- // href={currentPage.editURL}
- href="#TODO"
+ href={currentPage.editURL || '#no-edit-url'}
  >
- Edit this page on GitHub
+ Edit this page
  </a>
  </div>
  )}

diff --git a/src/utils/docs.tsx b/src/utils/docs.tsx
@@ -84,7 +84,10 @@ async function _getDocs(
  //
 
  const url = `/${slug.join('/')}`
- // const editURL = file.replace(root, `https://github.com/pmndrs/${lib}`)
+
+ // editURL
+ const EDIT_ORIGIN = process.env.EDIT_ORIGIN
+ const editURL = EDIT_ORIGIN?.length ? file.replace(root, EDIT_ORIGIN) : undefined
 
  // Read & parse doc
  const compiled = matter(await fs.promises.readFile(file))
@@ -104,7 +107,7 @@ async function _getDocs(
  // return {
  // slug,
  // url,
- // // editURL,
+ // editURL,
  // title,
  // description,
  // nav,
@@ -192,7 +195,7 @@ async function _getDocs(
  return {
  slug,
  url,
- // editURL,
+ editURL,
  title,
  description,
  nav,