@directory-builder/core 0.1.0

package/webapp/src/styles.css

@@ -0,0 +1,23 @@
+/* App-wide styles (extracted from the former inline <style> in index.html
+   so they ship with the app source, not with each shell's index.html). */
+
+* { font-family: Arial, sans-serif; }
+body { margin: 0 }
+nav { padding: 0.5rem 0.75rem; background: #f5f5f5; border-bottom: 1px solid #ddd; font-size: 14px; display: flex; align-items: center; justify-content: space-between }
+nav a { color: #666; text-decoration: none }
+nav a:hover { color: #000 }
+nav a.active { font-weight: bold; color: #000 }
+main { flex: 1; min-height: 0 }
+.page { padding: 1rem }
+.org-card { margin: 0 0 1rem 0; padding: 0.6rem 0.9rem; border: 1px solid #ddd; border-radius: 4px; background: #fff }
+.org-card-header { font-size: 14px; margin-bottom: 0.4rem; color: #444 }
+.org-card-header code { background: #f5f5f5; padding: 2px 4px; border-radius: 2px; font-size: 12px }
+.org-card table { border-collapse: collapse; font-size: 13px }
+.org-card td { padding: 3px 8px 3px 0; vertical-align: middle }
+.org-card td:first-child { color: #666; white-space: nowrap; padding-right: 1rem }
+.value-text { display: inline-block; max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle }
+.source-tag { display: inline-block; padding: 1px 6px; margin-left: 4px; border-radius: 3px; background: #eee; color: #666; font-size: 11px; vertical-align: middle }
+.flip { margin-right: 8px; white-space: nowrap }
+.flip-btn { background: none; border: none; cursor: pointer; padding: 0 2px; color: #bbb; font-size: 12px }
+.flip-btn:hover { color: #666 }
+.flip-counter { font-size: 11px; color: #aaa; margin: 0 2px }

package/webapp/vite.config.js

@@ -0,0 +1,14 @@
+import { serveInstanceData } from "./vite.js"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+import path from "path"
+
+// Core's own dev shell: serves the webapp against an instance directory —
+// example/ by default, any other via INSTANCE (path relative to cwd):
+//   INSTANCE=../sosuse-directory-builder npm run webapp
+const instance = path.resolve(process.env.INSTANCE ?? path.join(import.meta.dirname, "../example"))
+
+export default defineConfig({
+    plugins: [react(), serveInstanceData({ root: instance })],
+    build: { target: "es2022" },  // top-level await in instanceData.js
+})

package/webapp/vite.js

@@ -0,0 +1,28 @@
+import { existsSync, readFileSync } from "fs"
+import path from "path"
+
+// instanceData.js fetches config/ and data/ at runtime relative to BASE_URL,
+// and Download.jsx dynamic-imports declared exporters/ the same way. A deploy
+// publishes them next to the bundle; in dev (and preview) this middleware
+// serves them from the instance directory instead. `root` is the instance dir
+// holding config/, data/ and (optionally) webapp/{content,exporters}/.
+export function serveInstanceData({ root = process.cwd() } = {}) {
+    let base = "/"
+    const middleware = (req, res, next) => {
+        const url = req.url.split("?")[0]
+        const rel = url.startsWith(base) ? url.slice(base.length) : null
+        if (!rel || !/^(config|data|webapp\/(content|exporters))\//.test(rel)) return next()
+        const file = path.join(root, rel)
+        // Own the 404: falling through would hit the SPA fallback, which
+        // serves index.html with 200 — instanceData would parse HTML as TTL.
+        if (!existsSync(file)) { res.statusCode = 404; return res.end() }
+        res.setHeader("Content-Type", { js: "text/javascript", md: "text/markdown" }[rel.split(".").pop()] ?? "text/turtle")
+        res.end(readFileSync(file))
+    }
+    return {
+        name: "serve-instance-data",
+        configResolved(c) { base = c.base },
+        configureServer(server) { server.middlewares.use(middleware) },
+        configurePreviewServer(server) { server.middlewares.use(middleware) },
+    }
+}