From 2c329d7ca40fee541c440c76a4619d739706bf86 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Sun, 15 Feb 2026 08:58:52 -0700 Subject: [PATCH] feat: add demo page and ecosystem footer Add interactive demo page showing Team Knowledge Base with notebooks, rich notes, tags, code blocks, and canvas sync indicators. Update landing page footer with all 10 r* ecosystem apps. Co-Authored-By: Claude Opus 4.6 --- src/app/demo/page.tsx | 580 ++++++++++++++++++++++++++++++++++++++++++ src/app/page.tsx | 24 +- 2 files changed, 598 insertions(+), 6 deletions(-) create mode 100644 src/app/demo/page.tsx diff --git a/src/app/demo/page.tsx b/src/app/demo/page.tsx new file mode 100644 index 0000000..30b3aa0 --- /dev/null +++ b/src/app/demo/page.tsx @@ -0,0 +1,580 @@ +import Link from 'next/link' +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'rNotes Demo - Team Knowledge Base', + description: 'See how rNotes powers collaborative note-taking and knowledge management. A demo showcasing notebooks, rich notes, tags, canvas sync, and the full r* ecosystem.', + openGraph: { + title: 'rNotes Demo - Team Knowledge Base', + description: 'See how rNotes powers collaborative note-taking and knowledge management with notebooks, rich notes, tags, and canvas sync.', + type: 'website', + url: 'https://rnotes.online/demo', + }, +} + +/* --- Mock Data --------------------------------------------------------- */ + +const notebook = { + name: 'Project Alpha', + description: 'Engineering knowledge base for the Alpha product launch', + color: 'from-amber-400 to-orange-500', + noteCount: 12, + collaborators: ['Maya', 'Liam', 'Priya', 'Omar'], +} + +const sidebarCategories = [ + { + name: 'Project Alpha', + icon: 'πŸ““', + active: true, + children: [ + { name: 'Architecture', count: 4, active: true }, + { name: 'Meeting Notes', count: 3, active: false }, + { name: 'API Reference', count: 2, active: false }, + { name: 'Launch Checklist', count: 3, active: false }, + ], + }, + { + name: 'Design System', + icon: '🎨', + active: false, + children: [ + { name: 'Components', count: 8, active: false }, + { name: 'Tokens', count: 2, active: false }, + ], + }, + { + name: 'Personal', + icon: 'πŸ“', + active: false, + children: [ + { name: 'Ideas', count: 5, active: false }, + { name: 'Reading List', count: 7, active: false }, + ], + }, +] + +const notes = [ + { + id: 1, + title: 'System Architecture Overview', + preview: 'High-level architecture for Project Alpha including service boundaries, data flow, and deployment topology...', + tags: ['architecture', 'backend', 'infrastructure'], + editedAt: '2 hours ago', + editor: 'Maya', + editorColor: 'bg-teal-500', + synced: true, + expanded: true, + }, + { + id: 2, + title: 'API Rate Limiting Strategy', + preview: 'Token bucket algorithm with sliding window fallback. 100 req/min for free tier, 1000 req/min for pro...', + tags: ['api', 'backend', 'security'], + editedAt: '5 hours ago', + editor: 'Liam', + editorColor: 'bg-cyan-500', + synced: false, + expanded: false, + }, + { + id: 3, + title: 'Sprint 14 Retro Notes', + preview: 'What went well: deployment pipeline improvements, faster CI. What to improve: test coverage on auth module...', + tags: ['meeting', 'retro', 'sprint-14'], + editedAt: 'Yesterday', + editor: 'Priya', + editorColor: 'bg-violet-500', + synced: false, + expanded: false, + }, + { + id: 4, + title: 'Database Migration Plan', + preview: 'Step-by-step plan for migrating from PostgreSQL 14 to 16 with zero downtime. Includes rollback procedures...', + tags: ['database', 'migration', 'ops'], + editedAt: '2 days ago', + editor: 'Omar', + editorColor: 'bg-rose-500', + synced: false, + expanded: false, + }, + { + id: 5, + title: 'Feature Flag Conventions', + preview: 'Naming: feature... Lifecycle: dev -> staging -> canary -> GA. Cleanup policy: remove after 30 days GA...', + tags: ['conventions', 'feature-flags', 'dx'], + editedAt: '3 days ago', + editor: 'Maya', + editorColor: 'bg-teal-500', + synced: false, + expanded: false, + }, +] + +/* --- Expanded Note Content ---------------------------------------------- */ + +function ExpandedNoteContent() { + return ( +
+ {/* Heading 1 */} +
+

System Architecture Overview

+

+ Last updated by Maya on Feb 15, 2026 +

+
+ + {/* Highlight block */} +
+

+ Key Decision: We are adopting an event-driven microservices architecture with a shared message bus (NATS) for inter-service communication. +

+
+ + {/* Heading 2 */} +
+

Service Boundaries

+
    +
  • + • + Auth Service -- JWT issuance, OAuth2 providers, session management +
    • +
  • + • + Content Service -- CRUD for notebooks, notes, attachments, and tags +
    • +
  • + • + Search Service -- Full-text indexing via Meilisearch, faceted filters +
    • +
  • + • + Canvas Sync -- WebSocket bridge to rSpace for real-time collaboration +
    • +
+
+ + {/* Heading 2 */} +
+

Deployment Topology

+

+ All services are containerized and orchestrated via Docker Compose in development, with Kubernetes for production. +

+
+ + {/* Code block */} +
+
+ docker-compose.yml + yaml +
+ 
+{`services:
+  api-gateway:
+    image: alpha/gateway:latest
+    ports: ["8080:8080"]
+    depends_on: [auth, content, search]
+
+  auth:
+    image: alpha/auth:latest
+    environment:
+      JWT_SECRET: \${JWT_SECRET}
+      OAUTH_GITHUB_ID: \${GITHUB_ID}
+
+  content:
+    image: alpha/content:latest
+    volumes: ["./data:/app/data"]
+
+  search:
+    image: meilisearch/meilisearch:v1.6
+    environment:
+      MEILI_MASTER_KEY: \${SEARCH_KEY}`}
+
+
+ + {/* Another heading */} +
+

Data Flow

+

+ Client requests hit the API gateway, which routes to the appropriate service. All mutations publish events to NATS, which the search service consumes for real-time index updates. +

+
+
+ ) +} + +/* --- Note Card Component ------------------------------------------------ */ + +function NoteCard({ + note, +}: { + note: (typeof notes)[0] +}) { + return ( +
+
+ {/* Header row */} +
+

+ {note.title} +

+ {note.synced && ( + + + + + + Synced to rSpace canvas + + )} +
+ + {/* Preview text (only for collapsed notes) */} + {!note.expanded && ( +

{note.preview}

+ )} + + {/* Expanded content */} + {note.expanded && } + + {/* Tags */} +
+ {note.tags.map((tag) => ( + + #{tag} + + ))} +
+ + {/* Footer: editor info */} +
+
+
+ {note.editor[0]} +
+ {note.editor} +
+ {note.editedAt} +
+
+
+ ) +} + +/* --- Sidebar Component -------------------------------------------------- */ + +function Sidebar() { + return ( +
+ {/* Sidebar header */} +
+
+ Notebooks + 3 notebooks +
+
+ + {/* Notebook tree */} +
+ {sidebarCategories.map((cat) => ( +
+ {/* Notebook name */} +
+ {cat.icon} + {cat.name} +
+ + {/* Children / categories */} + {cat.active && ( +
+ {cat.children.map((child) => ( +
+ {child.name} + {child.count} +
+ ))} +
+ )} + + {/* Collapsed children indicator */} + {!cat.active && ( +
+ + {cat.children.length} sections + +
+ )} +
+ ))} +
+ + {/* Quick actions */} +
+
+ + + + Search notes... +
+
+ + + + Browse tags +
+
+ + + + Recent edits +
+
+
+ ) +} + +/* --- Page --------------------------------------------------------------- */ + +export default function DemoPage() { + return ( +
+ {/* Nav */} + + + {/* Hero Section */} +
+
+ {/* Badge */} +
+ + Interactive Demo +
+ +

+ See how rNotes works +

+

+ A collaborative knowledge base for your team +

+
+ πŸ““ Organized notebooks + 🏷️ Flexible tagging + πŸ”— Canvas sync + πŸ‘₯ Real-time collaboration +
+ + {/* Collaborator avatars */} +
+ {notebook.collaborators.map((name, i) => { + const colors = ['bg-teal-500', 'bg-cyan-500', 'bg-violet-500', 'bg-rose-500'] + return ( +
+ {name[0]} +
+ ) + })} + 4 collaborators +
+
+
+ + {/* Context line */} +
+

+ This demo shows a Team Knowledge Base scenario + with notebooks, rich notes, tags, and canvas sync -- all powered by the{' '} + r* ecosystem. +

+
+ + {/* Demo Content: Sidebar + Notes */} +
+ {/* Notebook header card */} +
+
+
+ πŸ““ + {notebook.name} + {notebook.noteCount} notes +
+ + Open in rNotes β†— + +
+
+

{notebook.description}

+
+
+ + {/* Main layout: sidebar + notes grid */} +
+ {/* Sidebar */} +
+ +
+ + {/* Notes list */} +
+ {/* Section header */} +
+
+

Architecture

+ 4 notes +
+
+ Sort: Recently edited +
+
+ + {/* Note cards */} + {notes.map((note) => ( + + ))} +
+
+
+ + {/* Features showcase */} +
+

Everything you need to capture knowledge

+
+ {[ + { + icon: 'πŸ“', + title: 'Rich Editing', + desc: 'Headings, lists, code blocks, highlights, images, and file attachments in every note.', + }, + { + icon: 'πŸ““', + title: 'Notebooks', + desc: 'Organize notes into notebooks with sections. Nest as deep as you need.', + }, + { + icon: '🏷️', + title: 'Flexible Tags', + desc: 'Cross-cutting tags let you find notes across all notebooks instantly.', + }, + { + icon: 'πŸ”—', + title: 'Canvas Sync', + desc: 'Pin any note to your rSpace canvas for visual collaboration with your team.', + }, + ].map((feature) => ( +
+ {feature.icon} +

{feature.title}

+

{feature.desc}

+
+ ))} +
+
+ + {/* CTA Section */} +
+
+

Ready to capture everything?

+

+ rNotes gives your team a shared knowledge base with rich editing, flexible organization, + and deep integration with the r* ecosystem -- all on a collaborative canvas. +

+ + Start Taking Notes + +
+
+ + {/* Footer */} + +
+ ) +} diff --git a/src/app/page.tsx b/src/app/page.tsx index b28bceb..8b8e961 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -160,12 +160,24 @@ export default function HomePage() { )} {/* Footer */} -