Skip to content

Commit 2675822

Browse files
AnujaKalahara99AnujaKalahara99
committed
updated documentation
1 parent 2301b49 commit 2675822

File tree

20 files changed

+3031
-143
lines changed

20 files changed

+3031
-143
lines changed

‎Frontend/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import CodespaceInvitation from "./App/Dashboard/AcceptInvite";
1010
import ProfilePage from "./App/Dashboard/profile";
1111
import SettingsPage from "./App/Dashboard/ProfileSetting";
1212
import Homepage from "./App/Home/Homepage";
13+
import Docs from "./App/Docs/Docs";
1314
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router";
1415
import { supabase } from "./database/superbase";
1516
import { type Session, type User } from "@supabase/supabase-js";
@@ -72,6 +73,7 @@ function App() {
7273
<Route path="/login" element={<Login />} />
7374
<Route path="/signup" element={<Signup />} />
7475
<Route path="/homepage" element={<Homepage />} />
76+
<Route path="/docs/*" element={<Docs />} />
7577

7678
<Route
7779
path="/dashboard"

‎Frontend/src/App/Dashboard/TitleBar.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { supabase } from "../../database/superbase";
2-
import { LogOut } from "lucide-react";
2+
import { Code2, LogOut } from "lucide-react";
33
import { useTheme } from "../../Contexts/ThemeProvider";
44
import { useNavigate } from "react-router";
55
import { type Session } from "@supabase/supabase-js";
@@ -30,6 +30,13 @@ const TitleBar = ({ Session }: { Session: Session }) => {
3030
>
3131
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
3232
<div className="flex items-center justify-between h-16">
33+
<a href="/" className="flex items-center">
34+
<Code2 className="w-6 h-6 text-blue-500 mr-2" />
35+
<span className={`text-xl font-semibold ${theme.text}`}>
36+
RTC-Editor
37+
</span>
38+
</a>
39+
3340
<div className="flex items-center space-x-4">
3441
<h1 className={`text-2xl font-medium ${theme.text}`}>Codespaces</h1>
3542
</div>

‎Frontend/src/App/Docs/Docs.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { Routes, Route, Navigate } from "react-router";
2+
import DocsLayout from "./DocsLayout";
3+
4+
import Introduction from "./pages/GettingStarted/Introduction";
5+
import QuickStart from "./pages/GettingStarted/QuickStart";
6+
import Installation from "./pages/GettingStarted/Installation";
7+
import FirstCodespace from "./pages/GettingStarted/FirstCodespace";
8+
import BasicConcepts from "./pages/GettingStarted/BasicConcepts";
9+
import {
10+
RealTimeCollaboration,
11+
CodeEditorFeature,
12+
VersionControl,
13+
ProjectManagement,
14+
AIAssistant,
15+
LiveChat,
16+
ManagingCodespaces,
17+
CollaboratingWithTeam,
18+
UsingGitFeatures,
19+
WorkingWithFiles,
20+
RoleBasedAccess,
21+
ArchitectureOverview,
22+
RealTimeSync,
23+
VirtualFileSystem,
24+
InBrowserBundling,
25+
} from "./pages/PlaceholderPages";
26+
27+
export default function Docs() {
28+
return (
29+
<DocsLayout>
30+
<Routes>
31+
<Route
32+
path="/"
33+
element={<Navigate to="/docs/getting-started/introduction" replace />}
34+
/>
35+
36+
{/* Getting Started */}
37+
<Route
38+
path="/getting-started/introduction"
39+
element={<Introduction />}
40+
/>
41+
<Route path="/getting-started/quick-start" element={<QuickStart />} />
42+
<Route
43+
path="/getting-started/installation"
44+
element={<Installation />}
45+
/>
46+
<Route
47+
path="/getting-started/first-codespace"
48+
element={<FirstCodespace />}
49+
/>
50+
<Route
51+
path="/getting-started/basic-concepts"
52+
element={<BasicConcepts />}
53+
/>
54+
55+
{/* Features */}
56+
<Route
57+
path="/features/real-time-collaboration"
58+
element={<RealTimeCollaboration />}
59+
/>
60+
<Route path="/features/code-editor" element={<CodeEditorFeature />} />
61+
<Route path="/features/version-control" element={<VersionControl />} />
62+
<Route
63+
path="/features/project-management"
64+
element={<ProjectManagement />}
65+
/>
66+
<Route path="/features/ai-assistant" element={<AIAssistant />} />
67+
<Route path="/features/live-chat" element={<LiveChat />} />
68+
69+
{/* User Guides */}
70+
<Route
71+
path="/guides/managing-codespaces"
72+
element={<ManagingCodespaces />}
73+
/>
74+
<Route
75+
path="/guides/collaborating-with-team"
76+
element={<CollaboratingWithTeam />}
77+
/>
78+
<Route
79+
path="/guides/using-git-features"
80+
element={<UsingGitFeatures />}
81+
/>
82+
<Route
83+
path="/guides/working-with-files"
84+
element={<WorkingWithFiles />}
85+
/>
86+
<Route path="/guides/role-based-access" element={<RoleBasedAccess />} />
87+
88+
{/* Advanced Topics */}
89+
<Route
90+
path="/advanced/architecture"
91+
element={<ArchitectureOverview />}
92+
/>
93+
<Route path="/advanced/real-time-sync" element={<RealTimeSync />} />
94+
<Route
95+
path="/advanced/virtual-file-system"
96+
element={<VirtualFileSystem />}
97+
/>
98+
<Route
99+
path="/advanced/in-browser-bundling"
100+
element={<InBrowserBundling />}
101+
/>
102+
</Routes>
103+
</DocsLayout>
104+
);
105+
}

‎Frontend/src/App/Docs/DocsLayout.tsx‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
import { useState } from "react";
2+
import { Link, useLocation } from "react-router";
3+
import { useTheme } from "../../Contexts/ThemeProvider";
4+
import {
5+
Menu,
6+
X,
7+
ChevronDown,
8+
ChevronRight,
9+
Home,
10+
Book,
11+
Zap,
12+
Code,
13+
} from "lucide-react";
14+
15+
interface NavSection {
16+
title: string;
17+
icon: React.ReactNode;
18+
items: NavItem[];
19+
}
20+
21+
interface NavItem {
22+
title: string;
23+
path: string;
24+
}
25+
26+
const navigationSections: NavSection[] = [
27+
{
28+
title: "Getting Started",
29+
icon: <Home className="w-4 h-4" />,
30+
items: [
31+
{ title: "Introduction", path: "/docs/getting-started/introduction" },
32+
{ title: "Quick Start", path: "/docs/getting-started/quick-start" },
33+
{ title: "Installation", path: "/docs/getting-started/installation" },
34+
{
35+
title: "First Codespace",
36+
path: "/docs/getting-started/first-codespace",
37+
},
38+
{ title: "Basic Concepts", path: "/docs/getting-started/basic-concepts" },
39+
],
40+
},
41+
{
42+
title: "Features",
43+
icon: <Zap className="w-4 h-4" />,
44+
items: [
45+
{
46+
title: "Real-time Collaboration",
47+
path: "/docs/features/real-time-collaboration",
48+
},
49+
{ title: "Code Editor", path: "/docs/features/code-editor" },
50+
{ title: "Version Control", path: "/docs/features/version-control" },
51+
{
52+
title: "Project Management",
53+
path: "/docs/features/project-management",
54+
},
55+
{ title: "AI Assistant", path: "/docs/features/ai-assistant" },
56+
{ title: "Live Chat", path: "/docs/features/live-chat" },
57+
],
58+
},
59+
{
60+
title: "User Guides",
61+
icon: <Book className="w-4 h-4" />,
62+
items: [
63+
{
64+
title: "Managing Codespaces",
65+
path: "/docs/guides/managing-codespaces",
66+
},
67+
{
68+
title: "Collaborating with Team",
69+
path: "/docs/guides/collaborating-with-team",
70+
},
71+
{ title: "Using Git Features", path: "/docs/guides/using-git-features" },
72+
{ title: "Working with Files", path: "/docs/guides/working-with-files" },
73+
{ title: "Role-based Access", path: "/docs/guides/role-based-access" },
74+
],
75+
},
76+
{
77+
title: "Advanced Topics",
78+
icon: <Code className="w-4 h-4" />,
79+
items: [
80+
{ title: "Architecture Overview", path: "/docs/advanced/architecture" },
81+
{ title: "Real-time Sync", path: "/docs/advanced/real-time-sync" },
82+
{
83+
title: "Virtual File System",
84+
path: "/docs/advanced/virtual-file-system",
85+
},
86+
{
87+
title: "In-browser Bundling",
88+
path: "/docs/advanced/in-browser-bundling",
89+
},
90+
],
91+
},
92+
];
93+
94+
export default function DocsLayout({
95+
children,
96+
}: {
97+
children: React.ReactNode;
98+
}) {
99+
const { theme } = useTheme();
100+
const location = useLocation();
101+
const [sidebarOpen, setSidebarOpen] = useState(false);
102+
const [expandedSections, setExpandedSections] = useState<string[]>(
103+
navigationSections.map((section) => section.title)
104+
);
105+
106+
const toggleSection = (title: string) => {
107+
setExpandedSections((prev) =>
108+
prev.includes(title) ? prev.filter((t) => t !== title) : [...prev, title]
109+
);
110+
};
111+
112+
return (
113+
<div className={`min-h-screen ${theme.background}`}>
114+
{/* Header */}
115+
<header
116+
className={`${theme.surface} ${theme.border} border-b sticky top-0 z-50`}
117+
>
118+
<div className="container mx-auto px-4 h-16 flex items-center justify-between">
119+
<div className="flex items-center gap-4">
120+
<button
121+
onClick={() => setSidebarOpen(!sidebarOpen)}
122+
className={`lg:hidden ${theme.text} ${theme.hover} p-2 rounded-md`}
123+
>
124+
{sidebarOpen ? (
125+
<X className="w-6 h-6" />
126+
) : (
127+
<Menu className="w-6 h-6" />
128+
)}
129+
</button>
130+
<Link to="/" className="flex items-center gap-2">
131+
<Code
132+
className={`w-6 h-6 ${theme.statusBar.replace("bg-", "text-")}`}
133+
/>
134+
<span className={`text-xl font-bold ${theme.text}`}>
135+
RTC Editor
136+
</span>
137+
</Link>
138+
</div>
139+
<nav className="hidden md:flex items-center gap-6">
140+
<Link
141+
to="/"
142+
className={`${theme.textSecondary} ${theme.hover} px-3 py-2 rounded-md`}
143+
>
144+
Home
145+
</Link>
146+
<Link
147+
to="/dashboard"
148+
className={`${theme.textSecondary} ${theme.hover} px-3 py-2 rounded-md`}
149+
>
150+
Dashboard
151+
</Link>
152+
<Link
153+
to="/docs"
154+
className={`${theme.text} ${theme.hover} px-3 py-2 rounded-md`}
155+
>
156+
Documentation
157+
</Link>
158+
<a
159+
href="https://github.com/AnujaKalahara99/Realtime-Collaborative-Code-Editor"
160+
target="_blank"
161+
rel="noopener noreferrer"
162+
className={`${theme.textSecondary} ${theme.hover} px-3 py-2 rounded-md`}
163+
>
164+
GitHub
165+
</a>
166+
</nav>
167+
</div>
168+
</header>
169+
170+
<div className="container mx-auto px-4 py-6 flex gap-6">
171+
{/* Sidebar */}
172+
<aside
173+
className={`
174+
${theme.surface} ${theme.border} border rounded-lg
175+
fixed lg:sticky top-20 bottom-4 left-4 right-4
176+
lg:left-auto lg:right-auto lg:w-64
177+
z-40 overflow-y-auto Simple-Scrollbar
178+
transition-transform duration-300
179+
${
180+
sidebarOpen
181+
? "translate-x-0"
182+
: "-translate-x-[calc(100%+2rem)] lg:translate-x-0"
183+
}
184+
`}
185+
style={{ maxHeight: "calc(100vh - 6rem)" }}
186+
>
187+
<nav className="p-4 space-y-2">
188+
{navigationSections.map((section) => (
189+
<div key={section.title} className="space-y-1">
190+
<button
191+
onClick={() => toggleSection(section.title)}
192+
className={`
193+
w-full flex items-center justify-between gap-2
194+
${theme.text} ${theme.hover} px-3 py-2 rounded-md
195+
font-semibold text-sm
196+
`}
197+
>
198+
<span className="flex items-center gap-2">
199+
{section.icon}
200+
{section.title}
201+
</span>
202+
{expandedSections.includes(section.title) ? (
203+
<ChevronDown className="w-4 h-4" />
204+
) : (
205+
<ChevronRight className="w-4 h-4" />
206+
)}
207+
</button>
208+
{expandedSections.includes(section.title) && (
209+
<div className="ml-6 space-y-1">
210+
{section.items.map((item) => {
211+
const isActive = location.pathname === item.path;
212+
return (
213+
<Link
214+
key={item.path}
215+
to={item.path}
216+
onClick={() => setSidebarOpen(false)}
217+
className={`
218+
block px-3 py-2 rounded-md text-sm
219+
${
220+
isActive
221+
? `${theme.active} ${theme.text} font-medium`
222+
: `${theme.textSecondary} ${theme.hover}`
223+
}
224+
`}
225+
>
226+
{item.title}
227+
</Link>
228+
);
229+
})}
230+
</div>
231+
)}
232+
</div>
233+
))}
234+
</nav>
235+
</aside>
236+
237+
{/* Main Content */}
238+
<main className="flex-1 min-w-0">
239+
<div
240+
className={`${theme.surface} ${theme.border} border rounded-lg p-6 lg:p-8`}
241+
>
242+
{children}
243+
</div>
244+
</main>
245+
</div>
246+
247+
{/* Mobile Overlay */}
248+
{sidebarOpen && (
249+
<div
250+
className="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden"
251+
onClick={() => setSidebarOpen(false)}
252+
/>
253+
)}
254+
</div>
255+
);
256+
}

0 commit comments

Comments
 (0)