margin.at / margin
(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol. margin.at
extension web atproto comments
99
fork

Configure Feed

Select the types of activity you want to include in your feed.

lint fixes and donation url

scanash00 bbb1e693 3ad4cf4a

+75 -12
+41 -1
web/src/components/navigation/RightSidebar.tsx
··· 1 1 import React, { useCallback, useEffect, useRef, useState } from "react"; 2 2 import { useNavigate } from "react-router-dom"; 3 - import { Search } from "lucide-react"; 3 + import { Search, Coffee, Heart, Globe } from "lucide-react"; 4 4 import { 5 5 getTrendingTags, 6 6 searchActors, ··· 229 229 ? "Edge" 230 230 : "Chrome"} 231 231 </a> 232 + </div> 233 + 234 + <div className="rounded-xl p-3 border border-surface-200/60 dark:border-surface-700/60"> 235 + <p className="text-surface-500 dark:text-surface-400 text-xs mb-2"> 236 + Support Margin 237 + </p> 238 + <div className="flex flex-col gap-1.5"> 239 + <div className="flex gap-1.5"> 240 + <a 241 + href="https://ko-fi.com/scan" 242 + target="_blank" 243 + rel="noopener noreferrer" 244 + title="Ko-fi" 245 + className="flex items-center justify-center flex-1 px-2 py-1.5 rounded-lg border border-surface-200/80 dark:border-surface-700/80 text-surface-500 dark:text-surface-400 hover:border-[#FF5E5B] hover:text-[#FF5E5B] dark:hover:border-[#FF5E5B] dark:hover:text-[#FF5E5B] text-xs font-medium transition-colors gap-1.5" 246 + > 247 + <Coffee size={13} className="shrink-0" /> 248 + Ko-fi 249 + </a> 250 + <a 251 + href="https://github.com/sponsors/margin-at" 252 + target="_blank" 253 + rel="noopener noreferrer" 254 + title="GitHub Sponsors" 255 + className="flex items-center justify-center flex-1 px-2 py-1.5 rounded-lg border border-surface-200/80 dark:border-surface-700/80 text-surface-500 dark:text-surface-400 hover:border-[#EA4AAA] hover:text-[#EA4AAA] dark:hover:border-[#EA4AAA] dark:hover:text-[#EA4AAA] text-xs font-medium transition-colors gap-1.5" 256 + > 257 + <Heart size={13} className="shrink-0" /> 258 + GitHub 259 + </a> 260 + </div> 261 + <a 262 + href="https://opencollective.com/margin" 263 + target="_blank" 264 + rel="noopener noreferrer" 265 + title="Open Collective" 266 + className="flex items-center justify-center w-full px-2 py-1.5 rounded-lg border border-surface-200/80 dark:border-surface-700/80 text-surface-500 dark:text-surface-400 hover:border-[#7FADF2] hover:text-[#7FADF2] dark:hover:border-[#7FADF2] dark:hover:text-[#7FADF2] text-xs font-medium transition-colors gap-1.5" 267 + > 268 + <Globe size={13} className="shrink-0" /> 269 + Open Collective 270 + </a> 271 + </div> 232 272 </div> 233 273 234 274 <div>
+31
web/src/views/About.tsx
··· 19 19 ExternalLink, 20 20 Hash, 21 21 Heart, 22 + Coffee, 23 + Globe, 22 24 Eye, 23 25 Sun, 24 26 Moon, ··· 623 625 > 624 626 <TangledIcon size={16} /> 625 627 View on Tangled 628 + </a> 629 + </div> 630 + <div className="mt-10 flex items-center gap-5 flex-wrap justify-center"> 631 + <a 632 + href="https://ko-fi.com/scan" 633 + target="_blank" 634 + rel="noopener noreferrer" 635 + className="inline-flex items-center gap-2 text-surface-500 dark:text-surface-400 hover:text-[#FF5E5B] dark:hover:text-[#FF5E5B] transition-colors font-medium" 636 + > 637 + <Coffee size={16} /> 638 + Ko-fi 639 + </a> 640 + <a 641 + href="https://github.com/sponsors/margin-at" 642 + target="_blank" 643 + rel="noopener noreferrer" 644 + className="inline-flex items-center gap-2 text-surface-500 dark:text-surface-400 hover:text-[#EA4AAA] dark:hover:text-[#EA4AAA] transition-colors font-medium" 645 + > 646 + <Heart size={16} /> 647 + GitHub Sponsors 648 + </a> 649 + <a 650 + href="https://opencollective.com/margin" 651 + target="_blank" 652 + rel="noopener noreferrer" 653 + className="inline-flex items-center gap-2 text-surface-500 dark:text-surface-400 hover:text-[#7FADF2] dark:hover:text-[#7FADF2] transition-colors font-medium" 654 + > 655 + <Globe size={16} /> 656 + Open Collective 626 657 </a> 627 658 </div> 628 659 </div>
+3 -11
web/src/views/core/Discover.tsx
··· 62 62 ); 63 63 64 64 useEffect(() => { 65 - setItems([]); 66 - setOffset(0); 67 - fetchItems(activeTab, 0); 65 + queueMicrotask(() => fetchItems(activeTab, 0)); 68 66 }, [activeTab, fetchItems]); 69 67 70 68 const handleTabChange = (id: string) => { ··· 122 120 layout === "mosaic" ? "break-inside-avoid mb-4" : undefined 123 121 } 124 122 > 125 - <DocumentCard doc={doc} layout={layout} /> 123 + <DocumentCard doc={doc} /> 126 124 </div> 127 125 ))} 128 126 ··· 146 144 ); 147 145 } 148 146 149 - function DocumentCard({ 150 - doc, 151 - layout = "list", 152 - }: { 153 - doc: DocumentItem; 154 - layout?: "list" | "mosaic"; 155 - }) { 147 + function DocumentCard({ doc }: { doc: DocumentItem }) { 156 148 const [ogData, setOgData] = useState<{ 157 149 title?: string; 158 150 description?: string;