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 */} -