[orga-build] handle image and relative link properly

Author: xiaoxinghu

.changeset/public-stars-search.md

@@ -0,0 +1,5 @@
+---
+'orga-build': patch
+---
+
+handle image and relative links

docs/guides/next.org

@@ -3,7 +3,7 @@
 #+type: document
 #+position: 4
 
-Use the next plugin for orga.
+Use the next plugin for orga. Or better, use [[file:orga-build.org][orga-build]] instead.
 
 * Installation
 

docs/guides/webpack.org

@@ -4,6 +4,7 @@
 #+position: 3
 
 =@orgajs/loader= is a webpack loader taht can be used natrually with webpack setup.
+For hassle free experience, use [[file:orga-build.org][orga-build]].
 
 * Installation
 

packages/orga-build/lib/build.js

@@ -1,14 +1,13 @@
 import path from 'node:path'
 import { createRequire } from 'node:module'
 import { build as viteBuild } from 'vite'
-import orga from '@orgajs/rollup'
+import { setupOrga } from './orga.js'
 import react from '@vitejs/plugin-react'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 import { copy, emptyDir, ensureDir } from './fs.js'
 import { pluginFactory } from './vite.js'
 import fs from 'fs/promises'
 import assert from 'node:assert'
-import { rehypeWrap } from './plugins.js'
 
 const require = createRequire(import.meta.url)
 
@@ -33,9 +32,7 @@ export async function build({
 	const clientOutDir = path.join(outDir, '.client')
 
 	const plugins = [
-		orga({
-			rehypePlugins: [[rehypeWrap, { className: containerClass }]]
-		}),
+		setupOrga({ containerClass }),
 		react(),
 		pluginFactory({ dir: root }),
 		...vitePlugins

packages/orga-build/lib/orga.js

@@ -0,0 +1,91 @@
+/**
+ * @import {Root as HastTree} from 'hast'
+ */
+import _orga from '@orgajs/rollup'
+import { visitParents } from 'unist-util-visit-parents'
+
+/**
+ * @param {Object} options
+ * @param {string|string[]} options.containerClass - CSS class name(s) to wrap the rendered content
+ */
+export function setupOrga({ containerClass }) {
+	return _orga({
+		rehypePlugins: [[rehypeWrap, { className: containerClass }], image],
+		reorgRehypeOptions: {
+			linkHref: (link) => {
+				console.log({ link })
+				if (link.path.protocol === 'file') {
+					return link.path.value.replace(/\.org$/, '')
+				}
+				return link.path.value
+			}
+		}
+	})
+}
+
+// --- plugins ---
+
+/**
+ * @param {Object} options
+ * @param {string[]} options.className
+ */
+function rehypeWrap({ className = [] }) {
+	/**
+	 * Transform.
+	 *
+	 * @param {HastTree} tree
+	 *   Tree.
+	 * @returns {HastTree}
+	 *   Nothing.
+	 */
+	return (tree) => {
+		return {
+			...tree,
+			children: [
+				{
+					type: 'element',
+					tagName: 'div',
+					properties: {
+						className
+					},
+					// @ts-ignore
+					children: tree.children
+				}
+			]
+		}
+	}
+}
+
+function image() {
+	/**
+	 * @param {any} tree
+	 */
+	return function (tree) {
+		/** @type {Record<string, string>} */
+		const imports = {}
+		visitParents(tree, { tagName: 'img' }, (node) => {
+			node.type = 'jsx'
+			const { src, target } = node.properties
+			if (typeof src !== 'string') return
+			if (src.startsWith('http')) {
+				return
+			}
+			const name = (imports[src] ??= `asset_${genId()}`)
+			node.value = `<img src={${name}} target='${target}'/>`
+		})
+
+		for (const [src, name] of Object.entries(imports)) {
+			tree.children.unshift({
+				type: 'jsx',
+				value: `import ${name} from '${src}'`,
+				children: []
+			})
+		}
+	}
+}
+
+function genId(length = 8) {
+	const array = new Uint8Array(length)
+	crypto.getRandomValues(array)
+	return Array.from(array, (byte) => (byte % 36).toString(36)).join('')
+}

packages/orga-build/lib/plugins.js

@@ -1,11 +1,10 @@
 import express from 'express'
 import { createServer } from 'vite'
 import fs from 'node:fs/promises'
-import orga from '@orgajs/rollup'
 import react from '@vitejs/plugin-react'
 import { pluginFactory } from './vite.js'
-import { rehypeWrap } from './plugins.js'
 import { alias } from './build.js'
+import { setupOrga } from './orga.js'
 
 /**
  * @param {import('./config.js').Config} config
@@ -15,9 +14,7 @@ export async function serve(config, port = 3000) {
 	const app = express()
 	const vite = await createServer({
 		plugins: [
-			orga({
-				rehypePlugins: [[rehypeWrap, { className: config.containerClass }]]
-			}),
+			setupOrga({ containerClass: config.containerClass }),
 			react(),
 			pluginFactory({ dir: config.root }),
 			...config.vitePlugins

packages/orga-build/lib/serve.js

@@ -6,7 +6,9 @@
 	"bin": {
 		"orga-build": "./cli.js"
 	},
-	"scripts": {},
+	"scripts": {
+		"clean": "fd . -e d.ts -e d.ts.map -I -x rm {}"
+	},
 	"files": [
 		"lib/",
 		"cli.js",
@@ -48,6 +50,7 @@
 		"@types/hast": "^3.0.4",
 		"@types/node": "^22.13.1",
 		"@types/react": "^19.0.8",
-		"@types/react-dom": "^19.0.3"
+		"@types/react-dom": "^19.0.3",
+		"orga": "^4.5.1"
 	}
 }