(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import { Routes, Route } from "react-router-dom";
2import { useEffect } from "react";
3import { AuthProvider, useAuth } from "./context/AuthContext";
4import TopNav from "./components/TopNav";
5import MobileNav from "./components/MobileNav";
6import Feed from "./pages/Feed";
7import Url from "./pages/Url";
8import UserUrl from "./pages/UserUrl";
9import Profile from "./pages/Profile";
10import Login from "./pages/Login";
11import New from "./pages/New";
12import Bookmarks from "./pages/Bookmarks";
13import Highlights from "./pages/Highlights";
14import Notifications from "./pages/Notifications";
15import AnnotationDetail from "./pages/AnnotationDetail";
16import Collections from "./pages/Collections";
17import CollectionDetail from "./pages/CollectionDetail";
18import Privacy from "./pages/Privacy";
19import Terms from "./pages/Terms";
20import Landing from "./pages/Landing";
21import ScrollToTop from "./components/ScrollToTop";
22import { ThemeProvider } from "./context/ThemeContext";
23
24function AppContent() {
25 const { user } = useAuth();
26
27 useEffect(() => {
28 if (user) {
29 fetch("/api/sync", { method: "POST" }).catch(console.error);
30 }
31 }, [user]);
32
33 return (
34 <div className="app">
35 <ScrollToTop />
36 <TopNav />
37 <main className="main-content">
38 <Routes>
39 <Route path="/home" element={<Feed />} />
40 <Route path="/url" element={<Url />} />
41 <Route path="/new" element={<New />} />
42 <Route path="/bookmarks" element={<Bookmarks />} />
43 <Route path="/highlights" element={<Highlights />} />
44 <Route path="/notifications" element={<Notifications />} />
45 <Route path="/profile" element={<Profile />} />
46 <Route path="/profile/:handle" element={<Profile />} />
47 <Route path="/login" element={<Login />} />
48 <Route path="/at/:did/:rkey" element={<AnnotationDetail />} />
49 <Route path="/annotation/:uri" element={<AnnotationDetail />} />
50 <Route path="/collections" element={<Collections />} />
51 <Route path="/collections/:rkey" element={<CollectionDetail />} />
52 <Route
53 path="/:handle/collection/:rkey"
54 element={<CollectionDetail />}
55 />
56 <Route
57 path="/:handle/annotation/:rkey"
58 element={<AnnotationDetail />}
59 />
60 <Route
61 path="/:handle/highlight/:rkey"
62 element={<AnnotationDetail />}
63 />
64 <Route
65 path="/:handle/bookmark/:rkey"
66 element={<AnnotationDetail />}
67 />
68 <Route path="/:handle/url/*" element={<UserUrl />} />
69 <Route path="/collection/*" element={<CollectionDetail />} />
70 <Route path="/privacy" element={<Privacy />} />
71 <Route path="/terms" element={<Terms />} />
72 </Routes>
73 </main>
74 <MobileNav />
75 </div>
76 );
77}
78
79export default function App() {
80 return (
81 <ThemeProvider>
82 <AuthProvider>
83 <Routes>
84 <Route path="/" element={<Landing />} />
85 <Route path="/*" element={<AppContent />} />
86 </Routes>
87 </AuthProvider>
88 </ThemeProvider>
89 );
90}