jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(rdesign): rich landing page, Scribus canvas tool, icon update 

- Replace minimal rDesign landing with full rl-* pattern (hero, features,
  how-it-works, capabilities, open source, data protection, CTA)
- Add Scribus button to Create toolbar group in canvas (folk-design-agent)
- Export FolkDesignAgent from lib/index.ts, register in canvas.html
- Update module icon from 🎯 to 🎨 (matches favicon + MODULE_META)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-25 16:51:31 -07:00
parent 6d20a275ff
commit 4a75c64a18
3 changed files with 176 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/index.ts
View File

@ -49,6 +49,7 @@ export * from "./folk-blender";
export * from "./folk-drawfast"; export * from "./folk-drawfast";
export * from "./folk-freecad"; export * from "./folk-freecad";
export * from "./folk-kicad"; export * from "./folk-kicad";
export * from "./folk-design-agent";
// Advanced Shapes // Advanced Shapes
export * from "./folk-video-chat"; export * from "./folk-video-chat";

180
modules/rdesign/mod.ts
View File

@ -500,19 +500,179 @@ function renderDesignApp(space: string, novncUrl: string): string {
} }
function renderDesignLanding(): string { function renderDesignLanding(): string {
return `<div style="max-width:640px;margin:0 auto;padding:3rem 1rem;text-align:center"> return `
<div style="font-size:3rem;margin-bottom:1rem">&#x1f3af;</div> <!-- Hero -->
<h2 style="font-size:1.5rem;margin-bottom:0.75rem;background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent">rDesign</h2> <div class="rl-hero">
<p style="color:#94a3b8;margin-bottom:1rem;line-height:1.6">AI-powered DTP workspace. Describe what you want and the design agent builds it in Scribus — posters, flyers, brochures, and print-ready documents.</p> <span class="rl-tagline">rDesign</span>
<p style="color:#64748b;font-size:0.85rem;margin-bottom:2rem">Text in, design out. No mouse interaction needed.</p> <h1 class="rl-heading" style="background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;background-clip:text">(You)rDesign, text in &mdash; design out.</h1>
<a href="?" class="rapp-nav__btn--app-toggle" style="display:inline-block;padding:10px 24px;font-size:0.9rem">Open rDesign</a> <p class="rl-subtitle" style="background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;background-clip:text">AI-Powered Desktop Publishing with Scribus</p>
</div>`; <p class="rl-subtext">
Describe what you want and the design agent builds it &mdash; posters, flyers, brochures, zines, and print-ready documents.
No mouse interaction needed. Powered by Gemini tool-calling and Scribus under the hood.
</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rdesign" class="rl-cta-primary">Open rDesign</a>
<a href="#how-it-works" class="rl-cta-secondary">How It Works</a>
</div>
</div>
<!-- What It Handles -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">What rDesign Handles</h2>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128196;</div>
<h3>Posters &amp; Flyers</h3>
<p>Describe your event, campaign, or announcement and get a print-ready poster with proper typography, layout, and image placement.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128218;</div>
<h3>Brochures &amp; Zines</h3>
<p>Multi-page layouts with text flow, columns, and image frames. Perfect for newsletters, pamphlets, and small publications.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#127912;</div>
<h3>Brand Assets</h3>
<p>Business cards, letterheads, social media graphics. Consistent typography and color from a single design brief.</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="rl-section rl-section--alt" id="how-it-works">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
<div class="rl-grid-4" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem">
<div class="rl-step">
<div class="rl-step__num">1</div>
<h3>Describe</h3>
<p>Write a natural-language brief &mdash; &ldquo;A3 poster for a jazz night, deep blue background, gold accents, vintage feel.&rdquo;</p>
</div>
<div class="rl-step">
<div class="rl-step__num">2</div>
<h3>Agent Plans</h3>
<p>The AI agent decomposes your brief into Scribus operations: document size, text frames, image placement, colors, and fonts.</p>
</div>
<div class="rl-step">
<div class="rl-step__num">3</div>
<h3>Live Preview</h3>
<p>Watch the design take shape in real time. Each tool call updates the SVG preview so you see progress as it happens.</p>
</div>
<div class="rl-step">
<div class="rl-step__num">4</div>
<h3>Export</h3>
<p>Open the finished document in Scribus for fine-tuning, or export directly as PDF for print.</p>
</div>
</div>
</div>
</section>
<!-- Capabilities -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Design Agent Capabilities</h2>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128462;</div>
<h3>Text Frames</h3>
<p>Add and position text with control over font, size, color, alignment, and line spacing. The agent handles typography best practices.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128444;</div>
<h3>Image Frames</h3>
<p>Place images from URLs or generate them inline with AI. Automatic scaling and positioning within the layout.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#9632;</div>
<h3>Shapes &amp; Backgrounds</h3>
<p>Rectangles, ellipses, decorative elements, and full-page backgrounds. Set colors, borders, and opacity per element.</p>
</div>
</div>
<div style="display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;margin-top:1.5rem">
<span class="rl-badge" style="background:rgba(124,58,237,0.15);color:#a78bfa">A4/A3/Letter/Custom</span>
<span class="rl-badge" style="background:rgba(124,58,237,0.15);color:#a78bfa">PDF Export</span>
<span class="rl-badge" style="background:rgba(124,58,237,0.15);color:#a78bfa">AI Image Generation</span>
<span class="rl-badge" style="background:rgba(124,58,237,0.15);color:#a78bfa">Multi-page</span>
<span class="rl-badge" style="background:rgba(124,58,237,0.15);color:#a78bfa">Print-ready</span>
</div>
</div>
</section>
<!-- Built on Open Source -->
<section class="rl-section rl-section--alt">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
<p class="rl-subtext" style="text-align:center">The tools that power rDesign.</p>
<div class="rl-grid-4" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem">
<div class="rl-card rl-card--center">
<h3>Scribus</h3>
<p>Professional desktop publishing &mdash; the open-source alternative to InDesign. Runs headless in Docker via Xvfb + noVNC.</p>
</div>
<div class="rl-card rl-card--center">
<h3>Gemini</h3>
<p>Google&rsquo;s multimodal AI with native tool-calling. Powers the design agent&rsquo;s planning and execution loop.</p>
</div>
<div class="rl-card rl-card--center">
<h3>noVNC</h3>
<p>Browser-based VNC client for direct Scribus access. Open the full desktop when you need pixel-perfect manual edits.</p>
</div>
<div class="rl-card rl-card--center">
<h3>Hono</h3>
<p>Ultra-fast API framework powering the bridge between the design agent and Scribus.</p>
</div>
</div>
</div>
</section>
<!-- Your Data, Protected -->
<section class="rl-section">
<div class="rl-container" style="text-align:center">
<h2 class="rl-heading">Your Designs, Protected</h2>
<p class="rl-subtext">All processing happens on your server &mdash; designs never leave your infrastructure.</p>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#127968;</div>
<h3>Self-Hosted</h3>
<p>Scribus runs in a Docker container on your own server. No cloud DTP service, no vendor lock-in.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128190;</div>
<h3>Persistent Storage</h3>
<p>Design files are stored in a Docker volume and persist across container restarts and updates.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128295;</div>
<h3>Full Source Access</h3>
<p>Open the .sla file in Scribus anytime. Native format, no proprietary lock-in. Export to PDF, SVG, or PNG.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="rl-section rl-section--alt">
<div class="rl-container" style="text-align:center">
<h2 class="rl-heading">(You)rDesign, text in &mdash; design out.</h2>
<p class="rl-subtext">Describe it and the agent builds it. Try the demo or create a space to get started.</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rdesign" class="rl-cta-primary">Open rDesign</a>
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
</div>
</div>
</section>
<div class="rl-back">
<a href="/">&larr; Back to rSpace</a>
</div>
`;
} }
export const designModule: RSpaceModule = { export const designModule: RSpaceModule = {
id: "rdesign", id: "rdesign",
name: "rDesign", name: "rDesign",
icon: "\u{1f3af}", icon: "🎨",
description: "AI-powered DTP workspace — text in, design out", description: "AI-powered DTP workspace — text in, design out",
scoping: { defaultScope: 'global', userConfigurable: false }, scoping: { defaultScope: 'global', userConfigurable: false },
publicWrite: true, publicWrite: true,
@ -523,7 +683,7 @@ export const designModule: RSpaceModule = {
], ],
acceptsFeeds: ["data", "resource"], acceptsFeeds: ["data", "resource"],
outputPaths: [ outputPaths: [
{ path: "designs", name: "Designs", icon: "\u{1f3af}", description: "Design files and layouts" }, { path: "designs", name: "Designs", icon: "🎨", description: "Design files and layouts" },
{ path: "templates", name: "Templates", icon: "\u{1f4d0}", description: "Reusable design templates" }, { path: "templates", name: "Templates", icon: "📐", description: "Reusable design templates" },
], ],
}; };

5
website/canvas.html
View File

@ -2076,6 +2076,7 @@
<button id="new-drawfast" title="Drawfast">✏️ Drawfast</button> <button id="new-drawfast" title="Drawfast">✏️ Drawfast</button>
<button id="new-freecad" title="FreeCAD">📐 FreeCAD</button> <button id="new-freecad" title="FreeCAD">📐 FreeCAD</button>
<button id="new-kicad" title="KiCAD PCB">🔌 KiCAD</button> <button id="new-kicad" title="KiCAD PCB">🔌 KiCAD</button>
<button id="new-scribus" title="Scribus DTP" data-requires-module="rdesign">🎨 Scribus</button>
<button id="embed-swag" title="Embed rSwag" data-requires-module="rswag">🎨 rSwag</button> <button id="embed-swag" title="Embed rSwag" data-requires-module="rswag">🎨 rSwag</button>
<button id="embed-pubs" title="Embed rPubs" data-requires-module="rpubs">📖 rPubs</button> <button id="embed-pubs" title="Embed rPubs" data-requires-module="rpubs">📖 rPubs</button>
</div> </div>
@ -2460,6 +2461,7 @@
FolkDrawfast, FolkDrawfast,
FolkFreeCAD, FolkFreeCAD,
FolkKiCAD, FolkKiCAD,
FolkDesignAgent,
FolkCanvas, FolkCanvas,
FolkRApp, FolkRApp,
FolkFeed, FolkFeed,
@ -2707,6 +2709,7 @@
FolkDrawfast.define(); FolkDrawfast.define();
FolkFreeCAD.define(); FolkFreeCAD.define();
FolkKiCAD.define(); FolkKiCAD.define();
FolkDesignAgent.define();
FolkCanvas.define(); FolkCanvas.define();
FolkRApp.define(); FolkRApp.define();
FolkFeed.define(); FolkFeed.define();
@ -2753,6 +2756,7 @@
shapeRegistry.register("folk-drawfast", FolkDrawfast); shapeRegistry.register("folk-drawfast", FolkDrawfast);
shapeRegistry.register("folk-freecad", FolkFreeCAD); shapeRegistry.register("folk-freecad", FolkFreeCAD);
shapeRegistry.register("folk-kicad", FolkKiCAD); shapeRegistry.register("folk-kicad", FolkKiCAD);
shapeRegistry.register("folk-design-agent", FolkDesignAgent);
shapeRegistry.register("folk-canvas", FolkCanvas); shapeRegistry.register("folk-canvas", FolkCanvas);
shapeRegistry.register("folk-rapp", FolkRApp); shapeRegistry.register("folk-rapp", FolkRApp);
shapeRegistry.register("folk-feed", FolkFeed); shapeRegistry.register("folk-feed", FolkFeed);
@ -4464,6 +4468,7 @@ Use real coordinates, YYYY-MM-DD dates, ISO currency codes. Ask clarifying quest
document.getElementById("new-drawfast").addEventListener("click", () => setPendingTool("folk-drawfast")); document.getElementById("new-drawfast").addEventListener("click", () => setPendingTool("folk-drawfast"));
document.getElementById("new-freecad").addEventListener("click", () => setPendingTool("folk-freecad")); document.getElementById("new-freecad").addEventListener("click", () => setPendingTool("folk-freecad"));
document.getElementById("new-kicad").addEventListener("click", () => setPendingTool("folk-kicad")); document.getElementById("new-kicad").addEventListener("click", () => setPendingTool("folk-kicad"));
document.getElementById("new-scribus").addEventListener("click", () => setPendingTool("folk-design-agent"));
document.getElementById("new-tx-builder").addEventListener("click", () => setPendingTool("folk-transaction-builder")); document.getElementById("new-tx-builder").addEventListener("click", () => setPendingTool("folk-transaction-builder"));
document.getElementById("new-google-item").addEventListener("click", () => { document.getElementById("new-google-item").addEventListener("click", () => {
setPendingTool("folk-google-item", { service: "drive", title: "New Google Item" }); setPendingTool("folk-google-item", { service: "drive", title: "New Google Item" });