Retro Bulletin Board Systems on atproto. Web app and TUI. lazy mirror of alyraffauf/atbbs atbbs.xyz
forums python tui atproto bbs
3
fork

Configure Feed

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

web: add light mode

+87 -59
+2 -1
web/index.html
··· 5 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 6 <title>atbbs</title> 7 7 <meta name="description" content="Bulletin boards on the Atmosphere." /> 8 - <meta name="theme-color" content="#0a0a0a" /> 8 + <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" /> 9 + <meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)" /> 9 10 <meta name="mobile-web-app-capable" content="yes" /> 10 11 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 11 12 <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+49 -45
web/public/hero.svg
··· 1 1 <svg xmlns="http://www.w3.org/2000/svg" width="276" height="96" viewBox="0 0 276 96"> 2 + <style> 3 + .t { fill: #262626; } 4 + @media (prefers-color-scheme: dark) { .t { fill: #e5e5e5; } } 5 + </style> 2 6 <rect x="12" y="0" width="12" height="12" fill="#d97706"/> 3 7 <rect x="24" y="0" width="12" height="12" fill="#d97706"/> 4 8 <rect x="36" y="0" width="12" height="12" fill="#d97706"/> 5 - <rect x="72" y="0" width="12" height="12" fill="#e5e5e5"/> 6 - <rect x="144" y="0" width="12" height="12" fill="#e5e5e5"/> 9 + <rect x="72" y="0" width="12" height="12" class="t"/> 10 + <rect x="144" y="0" width="12" height="12" class="t"/> 7 11 <rect x="0" y="12" width="12" height="12" fill="#d97706"/> 8 12 <rect x="48" y="12" width="12" height="12" fill="#d97706"/> 9 - <rect x="72" y="12" width="12" height="12" fill="#e5e5e5"/> 10 - <rect x="144" y="12" width="12" height="12" fill="#e5e5e5"/> 13 + <rect x="72" y="12" width="12" height="12" class="t"/> 14 + <rect x="144" y="12" width="12" height="12" class="t"/> 11 15 <rect x="0" y="24" width="12" height="12" fill="#d97706"/> 12 16 <rect x="24" y="24" width="12" height="12" fill="#d97706"/> 13 17 <rect x="48" y="24" width="12" height="12" fill="#d97706"/> 14 - <rect x="72" y="24" width="12" height="12" fill="#e5e5e5"/> 15 - <rect x="84" y="24" width="12" height="12" fill="#e5e5e5"/> 16 - <rect x="96" y="24" width="12" height="12" fill="#e5e5e5"/> 17 - <rect x="108" y="24" width="12" height="12" fill="#e5e5e5"/> 18 - <rect x="144" y="24" width="12" height="12" fill="#e5e5e5"/> 19 - <rect x="156" y="24" width="12" height="12" fill="#e5e5e5"/> 20 - <rect x="168" y="24" width="12" height="12" fill="#e5e5e5"/> 21 - <rect x="180" y="24" width="12" height="12" fill="#e5e5e5"/> 22 - <rect x="228" y="24" width="12" height="12" fill="#e5e5e5"/> 23 - <rect x="240" y="24" width="12" height="12" fill="#e5e5e5"/> 24 - <rect x="252" y="24" width="12" height="12" fill="#e5e5e5"/> 25 - <rect x="264" y="24" width="12" height="12" fill="#e5e5e5"/> 18 + <rect x="72" y="24" width="12" height="12" class="t"/> 19 + <rect x="84" y="24" width="12" height="12" class="t"/> 20 + <rect x="96" y="24" width="12" height="12" class="t"/> 21 + <rect x="108" y="24" width="12" height="12" class="t"/> 22 + <rect x="144" y="24" width="12" height="12" class="t"/> 23 + <rect x="156" y="24" width="12" height="12" class="t"/> 24 + <rect x="168" y="24" width="12" height="12" class="t"/> 25 + <rect x="180" y="24" width="12" height="12" class="t"/> 26 + <rect x="228" y="24" width="12" height="12" class="t"/> 27 + <rect x="240" y="24" width="12" height="12" class="t"/> 28 + <rect x="252" y="24" width="12" height="12" class="t"/> 29 + <rect x="264" y="24" width="12" height="12" class="t"/> 26 30 <rect x="0" y="36" width="12" height="12" fill="#d97706"/> 27 31 <rect x="24" y="36" width="12" height="12" fill="#d97706"/> 28 32 <rect x="36" y="36" width="12" height="12" fill="#d97706"/> 29 33 <rect x="48" y="36" width="12" height="12" fill="#d97706"/> 30 - <rect x="72" y="36" width="12" height="12" fill="#e5e5e5"/> 31 - <rect x="120" y="36" width="12" height="12" fill="#e5e5e5"/> 32 - <rect x="144" y="36" width="12" height="12" fill="#e5e5e5"/> 33 - <rect x="192" y="36" width="12" height="12" fill="#e5e5e5"/> 34 - <rect x="216" y="36" width="12" height="12" fill="#e5e5e5"/> 34 + <rect x="72" y="36" width="12" height="12" class="t"/> 35 + <rect x="120" y="36" width="12" height="12" class="t"/> 36 + <rect x="144" y="36" width="12" height="12" class="t"/> 37 + <rect x="192" y="36" width="12" height="12" class="t"/> 38 + <rect x="216" y="36" width="12" height="12" class="t"/> 35 39 <rect x="0" y="48" width="12" height="12" fill="#d97706"/> 36 40 <rect x="24" y="48" width="12" height="12" fill="#d97706"/> 37 41 <rect x="36" y="48" width="12" height="12" fill="#d97706"/> 38 - <rect x="72" y="48" width="12" height="12" fill="#e5e5e5"/> 39 - <rect x="120" y="48" width="12" height="12" fill="#e5e5e5"/> 40 - <rect x="144" y="48" width="12" height="12" fill="#e5e5e5"/> 41 - <rect x="192" y="48" width="12" height="12" fill="#e5e5e5"/> 42 - <rect x="228" y="48" width="12" height="12" fill="#e5e5e5"/> 43 - <rect x="240" y="48" width="12" height="12" fill="#e5e5e5"/> 44 - <rect x="252" y="48" width="12" height="12" fill="#e5e5e5"/> 42 + <rect x="72" y="48" width="12" height="12" class="t"/> 43 + <rect x="120" y="48" width="12" height="12" class="t"/> 44 + <rect x="144" y="48" width="12" height="12" class="t"/> 45 + <rect x="192" y="48" width="12" height="12" class="t"/> 46 + <rect x="228" y="48" width="12" height="12" class="t"/> 47 + <rect x="240" y="48" width="12" height="12" class="t"/> 48 + <rect x="252" y="48" width="12" height="12" class="t"/> 45 49 <rect x="0" y="60" width="12" height="12" fill="#d97706"/> 46 - <rect x="72" y="60" width="12" height="12" fill="#e5e5e5"/> 47 - <rect x="120" y="60" width="12" height="12" fill="#e5e5e5"/> 48 - <rect x="144" y="60" width="12" height="12" fill="#e5e5e5"/> 49 - <rect x="192" y="60" width="12" height="12" fill="#e5e5e5"/> 50 - <rect x="264" y="60" width="12" height="12" fill="#e5e5e5"/> 50 + <rect x="72" y="60" width="12" height="12" class="t"/> 51 + <rect x="120" y="60" width="12" height="12" class="t"/> 52 + <rect x="144" y="60" width="12" height="12" class="t"/> 53 + <rect x="192" y="60" width="12" height="12" class="t"/> 54 + <rect x="264" y="60" width="12" height="12" class="t"/> 51 55 <rect x="12" y="72" width="12" height="12" fill="#d97706"/> 52 56 <rect x="24" y="72" width="12" height="12" fill="#d97706"/> 53 57 <rect x="36" y="72" width="12" height="12" fill="#d97706"/> 54 - <rect x="72" y="72" width="12" height="12" fill="#e5e5e5"/> 55 - <rect x="84" y="72" width="12" height="12" fill="#e5e5e5"/> 56 - <rect x="96" y="72" width="12" height="12" fill="#e5e5e5"/> 57 - <rect x="108" y="72" width="12" height="12" fill="#e5e5e5"/> 58 - <rect x="144" y="72" width="12" height="12" fill="#e5e5e5"/> 59 - <rect x="156" y="72" width="12" height="12" fill="#e5e5e5"/> 60 - <rect x="168" y="72" width="12" height="12" fill="#e5e5e5"/> 61 - <rect x="180" y="72" width="12" height="12" fill="#e5e5e5"/> 62 - <rect x="216" y="72" width="12" height="12" fill="#e5e5e5"/> 63 - <rect x="228" y="72" width="12" height="12" fill="#e5e5e5"/> 64 - <rect x="240" y="72" width="12" height="12" fill="#e5e5e5"/> 65 - <rect x="252" y="72" width="12" height="12" fill="#e5e5e5"/> 58 + <rect x="72" y="72" width="12" height="12" class="t"/> 59 + <rect x="84" y="72" width="12" height="12" class="t"/> 60 + <rect x="96" y="72" width="12" height="12" class="t"/> 61 + <rect x="108" y="72" width="12" height="12" class="t"/> 62 + <rect x="144" y="72" width="12" height="12" class="t"/> 63 + <rect x="156" y="72" width="12" height="12" class="t"/> 64 + <rect x="168" y="72" width="12" height="12" class="t"/> 65 + <rect x="180" y="72" width="12" height="12" class="t"/> 66 + <rect x="216" y="72" width="12" height="12" class="t"/> 67 + <rect x="228" y="72" width="12" height="12" class="t"/> 68 + <rect x="240" y="72" width="12" height="12" class="t"/> 69 + <rect x="252" y="72" width="12" height="12" class="t"/> 66 70 </svg>
+1 -1
web/src/components/Layout.tsx
··· 75 75 <Outlet /> 76 76 </main> 77 77 <footer className="border-t border-neutral-800 mt-auto"> 78 - <div className="max-w-2xl mx-auto px-4 py-6 flex items-center justify-between text-xs text-neutral-500"> 78 + <div className="max-w-2xl mx-auto px-4 py-4 flex items-center justify-between text-xs text-neutral-500"> 79 79 <span> 80 80 made by{" "} 81 81 <a
+2 -2
web/src/components/ListLink.tsx
··· 10 10 return ( 11 11 <Link 12 12 to={to} 13 - className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-900 group" 13 + className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-800 group" 14 14 > 15 - <span className="text-neutral-200 group-hover:text-white">{name}</span> 15 + <span className="text-neutral-200">{name}</span> 16 16 {description && ( 17 17 <span className="text-neutral-500 text-xs sm:text-sm"> 18 18 {description}
+2 -2
web/src/components/ThreadLink.tsx
··· 16 16 return ( 17 17 <Link 18 18 to={to} 19 - className="block px-3 py-4 -mx-3 rounded hover:bg-neutral-900 group" 19 + className="block px-3 py-4 -mx-3 rounded hover:bg-neutral-800 group" 20 20 > 21 21 <div className="flex items-baseline justify-between gap-4"> 22 - <span className="text-neutral-300 group-hover:text-white truncate"> 22 + <span className="text-neutral-300 truncate"> 23 23 {title} 24 24 </span> 25 25 <span className="shrink-0 text-xs text-neutral-500">{meta}</span>
+23
web/src/index.css
··· 2 2 @plugin "@tailwindcss/typography"; 3 3 @source "./"; 4 4 5 + @media (prefers-color-scheme: light) { 6 + :root { 7 + color-scheme: light; 8 + --color-neutral-950: #fafafa; 9 + --color-neutral-900: #f5f5f5; 10 + --color-neutral-800: #e5e5e5; 11 + --color-neutral-700: #d4d4d4; 12 + --color-neutral-600: #a3a3a3; 13 + --color-neutral-500: #737373; 14 + --color-neutral-400: #525252; 15 + --color-neutral-300: #404040; 16 + --color-neutral-200: #171717; 17 + --color-red-400: #dc2626; 18 + --color-red-500: #b91c1c; 19 + } 20 + } 21 + 22 + @media (prefers-color-scheme: dark) { 23 + :root { 24 + color-scheme: dark; 25 + } 26 + } 27 + 5 28 @media screen and (max-width: 768px) { 6 29 input, 7 30 textarea,
+4 -4
web/src/pages/Account.tsx
··· 111 111 <div className="grid grid-cols-2 gap-3 max-w-md"> 112 112 <Link 113 113 to={`/bbs/${user.handle}`} 114 - className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-white hover:border-neutral-700" 114 + className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-neutral-200 hover:border-neutral-700" 115 115 > 116 116 <div className="text-neutral-200 mb-1">Browse</div> 117 117 <div className="text-xs text-neutral-500">View your BBS.</div> 118 118 </Link> 119 119 <Link 120 120 to="/account/edit" 121 - className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-white hover:border-neutral-700" 121 + className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-neutral-200 hover:border-neutral-700" 122 122 > 123 123 <div className="text-neutral-200 mb-1">Edit</div> 124 124 <div className="text-xs text-neutral-500"> ··· 127 127 </Link> 128 128 <Link 129 129 to="/account/moderate" 130 - className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-white hover:border-neutral-700" 130 + className="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-neutral-200 hover:border-neutral-700" 131 131 > 132 132 <div className="text-neutral-200 mb-1">Moderate</div> 133 133 <div className="text-xs text-neutral-500"> ··· 181 181 <Link 182 182 key={m.replyUri} 183 183 to={url} 184 - className="block border border-neutral-800/50 rounded p-4 mb-2 hover:bg-neutral-900" 184 + className="block border border-neutral-800/50 rounded p-4 mb-2 hover:bg-neutral-800" 185 185 > 186 186 <div className="flex items-baseline justify-between mb-1"> 187 187 <span className="text-neutral-300">{m.handle}</span>
+4 -4
web/src/pages/SysopModerate.tsx
··· 86 86 <div 87 87 key={did} 88 88 title={did} 89 - className="flex items-center justify-between gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-900" 89 + className="flex items-center justify-between gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-800" 90 90 > 91 91 <a 92 92 href={`https://pdsls.dev/at/${did}`} 93 93 target="_blank" 94 94 rel="noreferrer" 95 - className="truncate text-neutral-300 hover:text-white" 95 + className="truncate text-neutral-300 hover:text-neutral-200" 96 96 > 97 97 {bannedHandles[did] ?? did} 98 98 </a> ··· 129 129 <div 130 130 key={p.uri} 131 131 title={p.uri} 132 - className="flex items-center justify-between gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-900" 132 + className="flex items-center justify-between gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-800" 133 133 > 134 134 <a 135 135 href={`https://pdsls.dev/${p.uri}`} 136 136 target="_blank" 137 137 rel="noreferrer" 138 - className="truncate text-neutral-300 hover:text-white" 138 + className="truncate text-neutral-300 hover:text-neutral-200" 139 139 > 140 140 {p.handle} — {p.title || p.body} 141 141 </a>