margin.at / margin
Write on the margins of the internet. Powered by the AT Protocol. margin.at
extension web atproto comments
fork atom

lint fixes and donation url

scanash.com 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;