Merge branch 'dev'

fix: iframe embed for standalone rApps, all links use rspace.online/r*
Replaced the fetch-and-proxy approach (which caused CORS errors for cross-origin assets, fonts, and service workers) with full-page iframe embedding. Modules with standalone domains are embedded in an iframe below the rSpace header. Modules without get a simple generated landing page. All "Try Demo" and app switcher links now consistently use rspace.online/{moduleId} instead of demo.rspace.online. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-25 23:47:26 -08:00 · 2026-02-25 23:47:15 -08:00
3 changed files with 59 additions and 139 deletions
--- a/server/index.ts
+++ b/server/index.ts
@ -98,29 +98,6 @@ const PORT = Number(process.env.PORT) || 3000;
 const INTERNAL_API_KEY = process.env.INTERNAL_API_KEY || "";
 const DIST_DIR = resolve(import.meta.dir, "../dist");

-// ── Standalone landing page proxy cache ──
-const landingCache = new Map<string, { html: string; at: number }>();
-const LANDING_TTL = 5 * 60 * 1000; // 5 minutes
-
-async function fetchStandaloneLanding(domain: string): Promise<string | null> {
-	const cached = landingCache.get(domain);
-	if (cached && Date.now() - cached.at < LANDING_TTL) return cached.html;
-
-	try {
-		const resp = await fetch(`https://${domain}/`, {
-			headers: { "Accept": "text/html" },
-			redirect: "follow",
-		});
-		if (!resp.ok) return null;
-		let html = await resp.text();
-		// Inject <base> so relative assets (CSS, JS, images) resolve to the standalone domain
-		html = html.replace(/<head([^>]*)>/i, `<head$1>\n<base href="https://${domain}/">`);
-		landingCache.set(domain, { html, at: Date.now() });
-		return html;
-	} catch {
-		return null;
-	}
-}

 // ── Hono app ──
 const app = new Hono();
@ -804,7 +781,7 @@ const server = Bun.serve<WSData>({
 		}

 		// ── Bare-domain module routes: rspace.online/{moduleId} ──
-		// Exact module path → proxy the standalone domain's landing page.
+		// Exact module path → embed standalone domain in iframe (avoids CORS).
 		// Sub-paths (API, assets) → rewrite to /demo/{moduleId}/... for backward compat.
 		if (!subdomain && hostClean.includes("rspace.online")) {
 			const pathSegments = url.pathname.split("/").filter(Boolean);
@ -812,18 +789,8 @@ const server = Bun.serve<WSData>({
 				const firstSegment = pathSegments[0];
 				const knownModuleIds = new Set(getAllModules().map((m) => m.id));
 				if (knownModuleIds.has(firstSegment)) {
-					// Exact module path → proxy from standalone domain
+					// Exact module path → landing page with iframe embed
 					if (pathSegments.length === 1) {
-						const mod = getAllModules().find((m) => m.id === firstSegment);
-						if (mod?.standaloneDomain) {
-							const html = await fetchStandaloneLanding(mod.standaloneDomain);
-							if (html) {
-								return new Response(html, {
-									headers: { "Content-Type": "text/html; charset=utf-8" },
-								});
-							}
-						}
-						// Fallback: generated landing page (no standalone domain or fetch failed)
 						const modInfo = getModuleInfoList().find((m) => m.id === firstSegment);
 						if (modInfo) {
 							return new Response(
--- a/server/shell.ts
+++ b/server/shell.ts
@ -45,10 +45,7 @@ export function renderShell(opts: ShellOptions): string {
 	} = opts;

 	const moduleListJSON = JSON.stringify(modules);
-	const currentMod = modules.find((m) => m.id === moduleId);
-	const shellDemoUrl = currentMod?.standaloneDomain
-		? `https://${escapeAttr(currentMod.standaloneDomain)}`
-		: `https://demo.rspace.online/${escapeAttr(moduleId)}`;
+	const shellDemoUrl = `https://rspace.online/${escapeAttr(moduleId)}`;

 	return `<!DOCTYPE html>
 <html lang="en">
@ -428,35 +425,54 @@ export interface ModuleLandingOptions {
 export function renderModuleLanding(opts: ModuleLandingOptions): string {
 	const { module: mod, modules, theme = "dark" } = opts;
 	const moduleListJSON = JSON.stringify(modules);
-	// Prefer standalone domain for demo (better styling, more updated features)
-	const demoUrl = mod.standaloneDomain
-		? `https://${mod.standaloneDomain}`
-		: `https://demo.rspace.online/${mod.id}`;

-	const standaloneLinkHtml = mod.standaloneDomain
-		? `<a class="ml-standalone" href="https://demo.rspace.online/${escapeAttr(mod.id)}">Also available inside rSpace demo ↗</a>`
-		: "";
-
-	let feedsHtml = "";
-	if (mod.feeds && mod.feeds.length > 0) {
-		feedsHtml = `
-		<div class="ml-feeds">
-			<h3 class="ml-feeds-title">Capabilities</h3>
-			<div class="ml-feeds-grid">
-				${mod.feeds
-					.map(
-						(f) => `
-					<div class="ml-feed-card">
-						<div class="ml-feed-name">${escapeHtml(f.name)}</div>
-						<div class="ml-feed-desc">${escapeHtml(f.description)}</div>
-						<span class="ml-feed-kind">${escapeHtml(f.kind)}</span>
-					</div>`,
-					)
-					.join("")}
-			</div>
-		</div>`;
+	// Modules with a standalone domain: embed it in a full-page iframe
+	if (mod.standaloneDomain) {
+		const embedUrl = `https://${escapeAttr(mod.standaloneDomain)}`;
+		return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>${mod.icon}</text></svg>">
+  <title>${escapeHtml(mod.name)} — rSpace</title>
+  <link rel="stylesheet" href="/shell.css">
+  <style>
+    body { margin: 0; overflow: hidden; }
+    .ml-frame-wrap {
+      position: fixed; top: 48px; left: 0; right: 0; bottom: 0;
+    }
+    .ml-frame-wrap iframe {
+      width: 100%; height: 100%; border: none;
+    }
+  </style>
+  <script defer src="https://rdata.online/collect.js" data-website-id="6ee7917b-0ed7-44cb-a4c8-91037638526b"></script>
+</head>
+<body data-theme="${theme}">
+  <header class="rstack-header" data-theme="${theme}">
+    <div class="rstack-header__left">
+      <rstack-app-switcher current="${escapeAttr(mod.id)}"></rstack-app-switcher>
+    </div>
+    <div class="rstack-header__center"></div>
+    <div class="rstack-header__right">
+      <a class="rstack-header__demo-btn" href="${embedUrl}" target="_blank">Open ${escapeHtml(mod.standaloneDomain)}</a>
+      <rstack-identity></rstack-identity>
+    </div>
+  </header>
+  <div class="ml-frame-wrap">
+    <iframe src="${embedUrl}" allow="clipboard-write; fullscreen"></iframe>
+  </div>
+  <script type="module">
+    import '/shell.js';
+    document.querySelector('rstack-app-switcher')?.setModules(${moduleListJSON});
+  </script>
+</body>
+</html>`;
 	}

+	// Modules without a standalone domain: simple generated landing page
+	const demoUrl = `https://demo.rspace.online/${mod.id}`;
+
 	return `<!DOCTYPE html>
 <html lang="en">
 <head>
@ -479,7 +495,6 @@ export function renderModuleLanding(opts: ModuleLandingOptions): string {
      <rstack-identity></rstack-identity>
    </div>
  </header>
-
  <div class="ml-hero">
    <div class="ml-container">
      <span class="ml-icon">${mod.icon}</span>
@ -489,21 +504,14 @@ export function renderModuleLanding(opts: ModuleLandingOptions): string {
        <a href="${demoUrl}" class="ml-cta-primary" id="ml-primary">Try Demo</a>
        <a href="/create-space" class="ml-cta-secondary">Create a Space</a>
      </div>
-      ${standaloneLinkHtml}
    </div>
  </div>
-
-  ${feedsHtml}
-
  <div class="ml-back">
    <a href="/">← Back to rSpace</a>
  </div>
-
  <script type="module">
    import '/shell.js';
    document.querySelector('rstack-app-switcher')?.setModules(${moduleListJSON});
-
-    // If logged in, update CTA to personal space
    try {
      var raw = localStorage.getItem('encryptid_session');
      if (raw) {
@ -535,88 +543,33 @@ body {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: calc(80vh - 56px); width: 100%;
 }
-.ml-container {
-  text-align: center; max-width: 560px; padding: 40px 20px;
-}
-.ml-icon {
-  font-size: 4rem; display: block; margin-bottom: 1rem;
-}
+.ml-container { text-align: center; max-width: 560px; padding: 40px 20px; }
+.ml-icon { font-size: 4rem; display: block; margin-bottom: 1rem; }
 .ml-name {
  font-size: 2.5rem; margin-bottom: 0.75rem;
  background: linear-gradient(135deg, #14b8a6, #22d3ee);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
 }
-.ml-desc {
-  font-size: 1.15rem; color: #94a3b8; margin-bottom: 2.5rem; line-height: 1.6;
-}
-.ml-ctas {
-  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
-}
+.ml-desc { font-size: 1.15rem; color: #94a3b8; margin-bottom: 2.5rem; line-height: 1.6; }
+.ml-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
 .ml-cta-primary {
  display: inline-block; padding: 14px 32px; border-radius: 8px;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: white; font-size: 1rem; font-weight: 600;
  text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
 }
-.ml-cta-primary:hover {
-  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,184,166,0.3);
-}
+.ml-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,184,166,0.3); }
 .ml-cta-secondary {
  display: inline-block; padding: 14px 32px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2);
  color: #94a3b8; font-size: 1rem; font-weight: 600;
  text-decoration: none; transition: transform 0.2s, border-color 0.2s, color 0.2s;
 }
-.ml-cta-secondary:hover {
-  transform: translateY(-2px); border-color: rgba(255,255,255,0.4); color: white;
-}
-.ml-standalone {
-  display: inline-block; margin-top: 1.5rem;
-  font-size: 0.85rem; color: #64748b; text-decoration: none;
-  transition: color 0.2s;
-}
-.ml-standalone:hover { color: #22d3ee; }
-.ml-feeds {
-  width: 100%; max-width: 640px; padding: 0 20px 3rem;
-  margin: 0 auto;
-}
-.ml-feeds-title {
-  font-size: 1rem; font-weight: 600; color: #94a3b8;
-  text-transform: uppercase; letter-spacing: 0.05em;
-  margin-bottom: 1rem; text-align: center;
-}
-.ml-feeds-grid {
-  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 0.75rem;
-}
-.ml-feed-card {
-  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 10px; padding: 1rem;
-}
-.ml-feed-name {
-  font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3rem; color: #e2e8f0;
-}
-.ml-feed-desc {
-  font-size: 0.8rem; color: #94a3b8; line-height: 1.5; margin-bottom: 0.5rem;
-}
-.ml-feed-kind {
-  display: inline-block; font-size: 0.65rem; font-weight: 600;
-  text-transform: uppercase; letter-spacing: 0.05em;
-  padding: 2px 8px; border-radius: 4px;
-  background: rgba(20,184,166,0.15); color: #14b8a6;
-}
-.ml-back {
-  padding: 2rem 0 3rem; text-align: center;
-}
-.ml-back a {
-  font-size: 0.85rem; color: #64748b; text-decoration: none; transition: color 0.2s;
-}
+.ml-cta-secondary:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.4); color: white; }
+.ml-back { padding: 2rem 0 3rem; text-align: center; }
+.ml-back a { font-size: 0.85rem; color: #64748b; text-decoration: none; transition: color 0.2s; }
 .ml-back a:hover { color: #e2e8f0; }
-@media (max-width: 600px) {
-  .ml-name { font-size: 2rem; }
-  .ml-icon { font-size: 3rem; }
-  .ml-feeds-grid { grid-template-columns: 1fr; }
-}
+@media (max-width: 600px) { .ml-name { font-size: 2rem; } .ml-icon { font-size: 3rem; } }
 `;

 function escapeHtml(s: string): string {
--- a/website/index.html
+++ b/website/index.html
@ -369,7 +369,7 @@
 				<rstack-mi></rstack-mi>
 			</div>
 			<div class="rstack-header__right">
-				<a class="rstack-header__demo-btn" href="https://demo.rspace.online/rspace">Try Demo</a>
+				<a class="rstack-header__demo-btn" href="https://rspace.online/rspace">Try Demo</a>
 				<rstack-identity></rstack-identity>
 			</div>
 		</header>
@ -380,7 +380,7 @@

 				<div class="cta-buttons">
 					<a href="/create-space" class="cta-primary" id="cta-primary">Create a Space</a>
-					<a href="https://demo.rspace.online/rspace" class="cta-secondary" id="cta-demo">Try the Demo</a>
+					<a href="https://rspace.online/rspace" class="cta-secondary" id="cta-demo">Try the Demo</a>
 				</div>

 				<div class="features">