feat: Add app details and basic documentation

Author: coderomm

apps/collabydraw/app/(site)/details/CodeBlock.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import React from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+type CodeBlockProps = {
+    language: string;
+    value: string;
+};
+
+const CodeBlock = ({ language, value }: CodeBlockProps) => {
+    return (
+        <SyntaxHighlighter
+            style={oneLight}
+            language={language}
+            PreTag="div"
+            wrapLongLines
+        >
+            {value}
+        </SyntaxHighlighter>
+    );
+};
+
+export default CodeBlock;

apps/collabydraw/app/(site)/details/page.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import markdown from '@/content/detailsContent';
+import ClientTweet from '@/components/ClientTweet';
+// import dynamic from 'next/dynamic';
+import { type Components } from 'react-markdown';
+import CodeBlock from './CodeBlock';
+
+// const CodeBlock = dynamic(() => import('./CodeBlock'), { ssr: false }); // 💡 Important: no SSR
+
+export default function DetailsPage() {
+    return (
+        <div className="px-4 py-10 md:px-8 max-w-4xl mx-auto prose prose-lg">
+            <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeRaw]}
+                components={{
+                    code({ node, inline, className, children, ...props }) {
+                        const match = /language-(\w+)/.exec(className || '');
+                        return !inline && match ? (
+                            <CodeBlock language={match[1]} value={String(children).replace(/\n$/, '')} />
+                        ) : (
+                            <code className="bg-gray-100 px-1 py-0.5 rounded" {...props}>{children}</code>
+                        );
+                    },
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    iframe({ node, ...props }) {
+                        return (
+                            <div className="aspect-video w-full my-6">
+                                <iframe {...props} className="w-full h-full rounded-md" />
+                            </div>
+                        );
+                    },
+                }}
+            >
+                {markdown}
+            </ReactMarkdown>
+
+            <ClientTweet />
+        </div>
+    );
+}

apps/collabydraw/components/ClientTweet.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import React from 'react';
+import TweetEmbed from 'react-tweet-embed';
+
+export default function ClientTweet() {
+    return (
+        <div className="my-6">
+            <TweetEmbed tweetId="1711737824058880576" options={{ width: '100%' }} />
+        </div>
+    );
+}

apps/collabydraw/content/detailsContent.ts

@@ -0,0 +1,109 @@
+const detailsContent = String.raw`
+---
+
+**CollabyDraw** is a web-based collaborative whiteboard where multiple users can draw, edit, and brainstorm together in real time. Whether solo or in a group session, the app offers a smooth, intuitive canvas experience with real-time sync, shape tools, editable text, and privacy-focused end-to-end encryption — all without needing an account.
+
+---
+
+### ✅ Core Features
+
+- **Canvas Drawing**: Freehand, shapes, and editable text  
+- **Rough.js Support**: Optional sketch-style drawing  
+- **Perfect-freehand Support**: Hand drawn feel  
+- **Eraser Tool**: Remove individual shapes  
+- **Editable Text**: Double-click to edit on canvas  
+
+---
+
+### 🔗 Collaboration
+
+- **Real-time Sync**: WebSocket-powered live drawing  
+- **Multi-Tab Awareness**: No duplicate join/leave events  
+- **Optimistic Updates**: Instant feedback before server response  
+
+---
+
+### 🔐 Privacy & End-to-End Encryption (E2EE) in CollabyDraw
+
+CollabyDraw is built with **privacy by design** to ensure that no sensitive drawing data can be accessed by anyone other than the intended participants.
+
+#### 🔑 How It Works
+
+When a user creates or joins a room, the app generates a link like:
+
+\`\`\`
+https://collabydraw.app/#room=abc123,xyz456
+\`\`\`
+
+- \`abc123\`: Unique room ID (used by the server)  
+- \`xyz456\`: Encryption key (used **only** on the client)
+
+---
+
+#### 🧠 Key Never Touches the Server
+
+- The **encryption key** after the comma (\`xyz456\`) is part of the URL fragment (\`#...\`)  
+- This fragment is **never sent** in HTTP requests, meaning:
+
+> The server cannot see or store the encryption key.
+
+---
+
+#### 🔒 Client-Side Only Decryption
+
+- All encrypted drawing data is transmitted over WebSocket  
+- The **decryption and rendering** happen completely on the client-side using the \`key\` from the URL  
+- Even if someone intercepts the WebSocket traffic, they cannot decrypt the data without the key
+
+---
+
+#### 🛡️ Benefits
+
+- No one — not even the server — can read what’s drawn in a room without the key  
+- Ensures **confidentiality** for private brainstorming, teaching, or design sessions  
+- Works like **Excalidraw's E2EE rooms**, but tailored for your collaborative drawing logic
+
+---
+
+### 🧠 Reliability
+
+- **Message Queue**: Stores unsent messages in memory/localStorage  
+- **Auto Retry**: Flushes queued messages on reconnect  
+
+---
+
+### 🧭 Modes
+
+- **Standalone Mode**: Offline/local drawing  
+- **Room Mode**: Collaborative sessions  
+
+---
+
+### ⚙️ Tech Stack
+
+- **Frontend**: React (Vite), TypeScript, Tailwind CSS  
+- **Canvas**: HTML Canvas API + Custom Engine  
+- **Realtime**: Native WebSocket (\`useWebSocket\` hook)  
+- **Security**: Hash-based E2EE  
+
+---
+
+### 📂 Github Repo
+
+[github.com/coderomm/CollabyDraw](https://github.com/coderomm/CollabyDraw)
+
+---
+
+### 📽️ YouTube Demo
+
+<iframe width="100%" height="400" src="https://www.youtube.com/embed/NNVdRCoFnK0" frameborder="0" allowfullscreen></iframe>
+
+---
+
+### 🐦 Tweet Embed
+
+<Tweet id="1711737824058880576" />
+
+`;
+
+export default detailsContent;

apps/collabydraw/package.json

@@ -42,6 +42,11 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "react-tweet-embed": "^2.0.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
     "roughjs": "^4.6.6",
     "sonner": "^1.7.4",
     "tailwind-merge": "^3.0.1",
@@ -57,6 +62,7 @@
     "@types/node": "^20",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "^9",
     "eslint-config-next": "15.1.7",
     "postcss": "^8",