stevedylan.dev / docs.surf
A fullstack app for indexing standard.site documents
8
fork

Configure Feed

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

chore: style updates

Steve 8f4d3520 532e2e3e

+114 -91
+112 -91
packages/client/src/App.tsx
··· 56 56 setLoading(true); 57 57 setError(null); 58 58 try { 59 - const response = await fetch(`${API_URL}/feed`); 59 + const response = await fetch(`${API_URL}/feed?limit=100`); 60 60 if (!response.ok) { 61 61 throw new Error("Failed to fetch feed"); 62 62 } ··· 107 107 return ( 108 108 <div className="window" style={{ width: "100%", maxWidth: "900px" }}> 109 109 <div className="title-bar"> 110 - <div className="title-bar-text">ATFeeds - Microsoft Internet Explorer</div> 110 + <div className="title-bar-text"> 111 + Docs.surf - Microsoft Internet Explorer 112 + </div> 111 113 <div className="title-bar-controls"> 112 114 <button aria-label="Minimize" /> 113 115 <button aria-label="Maximize" /> ··· 121 123 <div 122 124 style={{ 123 125 display: "flex", 124 - gap: "0", 125 - padding: "1px 2px", 126 + justifyContent: "flex-start", 127 + padding: "2px 0", 126 128 backgroundColor: "#ece9d8", 127 129 borderBottom: "1px solid #aca899", 128 - fontSize: "12px", 130 + fontSize: "11px", 129 131 }} 130 132 > 131 - {["File", "Edit", "View", "Favorites", "Tools", "Help"].map((item) => ( 132 - <button 133 - key={item} 134 - style={{ 135 - background: "none", 136 - border: "none", 137 - padding: "1px 6px", 138 - cursor: "pointer", 139 - fontFamily: "inherit", 140 - fontSize: "inherit", 141 - }} 142 - > 143 - {item} 144 - </button> 145 - ))} 133 + {["File", "Edit", "View", "Favorites", "Tools", "Help"].map( 134 + (item) => ( 135 + <span 136 + key={item} 137 + style={{ 138 + padding: "2px 8px", 139 + cursor: "pointer", 140 + }} 141 + > 142 + {item} 143 + </span> 144 + ), 145 + )} 146 146 </div> 147 147 148 148 {/* Toolbar */} ··· 150 150 style={{ 151 151 display: "flex", 152 152 alignItems: "center", 153 - gap: "2px", 154 - padding: "2px 4px", 153 + gap: "0", 154 + padding: "3px 2px", 155 155 backgroundColor: "#ece9d8", 156 156 borderBottom: "1px solid #aca899", 157 157 }} 158 158 > 159 159 {/* Back button */} 160 - <button 160 + <div 161 161 style={{ 162 162 display: "flex", 163 163 alignItems: "center", 164 164 gap: "2px", 165 - padding: "1px 4px", 166 - background: "none", 167 - border: "none", 165 + padding: "0 6px", 168 166 cursor: "pointer", 169 167 }} 170 168 > 171 169 <img 172 170 src="/windows-icons/Back.png" 173 171 alt="Back" 174 - style={{ width: "20px", height: "20px" }} 172 + style={{ width: "22px", height: "22px" }} 175 173 /> 176 174 <span style={{ fontSize: "11px" }}>Back</span> 177 - </button> 175 + <span style={{ fontSize: "8px", marginLeft: "2px" }}>▼</span> 176 + </div> 178 177 179 178 {/* Forward button */} 180 - <button 179 + <div 181 180 style={{ 182 181 display: "flex", 183 182 alignItems: "center", 184 - padding: "1px 2px", 185 - background: "none", 186 - border: "none", 183 + padding: "0 4px", 187 184 cursor: "pointer", 188 185 }} 189 186 > 190 187 <img 191 188 src="/windows-icons/Forward.png" 192 189 alt="Forward" 193 - style={{ width: "20px", height: "20px" }} 190 + style={{ width: "22px", height: "22px" }} 194 191 /> 195 - </button> 192 + </div> 196 193 197 - <div style={{ width: "1px", height: "20px", backgroundColor: "#aca899", margin: "0 2px" }} /> 194 + <div 195 + style={{ 196 + width: "1px", 197 + height: "22px", 198 + backgroundColor: "#aca899", 199 + margin: "0 4px", 200 + }} 201 + /> 198 202 199 203 {/* Stop */} 200 - <button 204 + <div 201 205 style={{ 202 - padding: "1px 2px", 203 - background: "none", 204 - border: "none", 206 + padding: "0 4px", 205 207 cursor: "pointer", 206 208 }} 207 209 > 208 210 <img 209 211 src="/windows-icons/Stop.png" 210 212 alt="Stop" 211 - style={{ width: "20px", height: "20px" }} 213 + style={{ width: "22px", height: "22px" }} 212 214 /> 213 - </button> 215 + </div> 214 216 215 217 {/* Refresh */} 216 - <button 218 + <div 217 219 onClick={fetchFeed} 218 220 style={{ 219 - padding: "1px 2px", 220 - background: "none", 221 - border: "none", 221 + padding: "0 4px", 222 222 cursor: "pointer", 223 223 }} 224 224 > 225 225 <img 226 226 src="/windows-icons/IE Refresh.png" 227 227 alt="Refresh" 228 - style={{ width: "20px", height: "20px" }} 228 + style={{ width: "22px", height: "22px" }} 229 229 /> 230 - </button> 230 + </div> 231 231 232 232 {/* Home */} 233 - <button 234 - onClick={() => window.open("https://standard.site", "_blank")} 233 + <a 234 + href="https://stevedylan.dev" 235 + target="_blank" 236 + rel="noreferrer" 235 237 style={{ 236 - padding: "1px 2px", 237 - background: "none", 238 - border: "none", 238 + padding: "0 4px", 239 239 cursor: "pointer", 240 240 }} 241 241 > 242 242 <img 243 243 src="/windows-icons/IE Home.png" 244 244 alt="Home" 245 - style={{ width: "20px", height: "20px" }} 245 + style={{ width: "22px", height: "22px" }} 246 246 /> 247 - </button> 247 + </a> 248 248 249 - <div style={{ width: "1px", height: "20px", backgroundColor: "#aca899", margin: "0 2px" }} /> 249 + <div 250 + style={{ 251 + width: "1px", 252 + height: "22px", 253 + backgroundColor: "#aca899", 254 + margin: "0 4px", 255 + }} 256 + /> 250 257 251 258 {/* Search */} 252 - <button 259 + <div 253 260 style={{ 254 261 display: "flex", 255 262 alignItems: "center", 256 - gap: "2px", 257 - padding: "1px 4px", 258 - background: "none", 259 - border: "none", 263 + gap: "3px", 264 + padding: "0 6px", 260 265 cursor: "pointer", 261 266 }} 262 267 > 263 268 <img 264 269 src="/windows-icons/Search.png" 265 270 alt="Search" 266 - style={{ width: "20px", height: "20px" }} 271 + style={{ width: "22px", height: "22px" }} 267 272 /> 268 273 <span style={{ fontSize: "11px" }}>Search</span> 269 - </button> 274 + </div> 270 275 271 276 {/* Favorites */} 272 - <button 277 + <div 273 278 style={{ 274 279 display: "flex", 275 280 alignItems: "center", 276 - gap: "2px", 277 - padding: "1px 4px", 278 - background: "none", 279 - border: "none", 281 + gap: "3px", 282 + padding: "0 6px", 280 283 cursor: "pointer", 281 284 }} 282 285 > 283 286 <img 284 287 src="/windows-icons/Favorites.png" 285 288 alt="Favorites" 286 - style={{ width: "20px", height: "20px" }} 289 + style={{ width: "22px", height: "22px" }} 287 290 /> 288 291 <span style={{ fontSize: "11px" }}>Favorites</span> 289 - </button> 292 + </div> 290 293 291 - <div style={{ width: "1px", height: "20px", backgroundColor: "#aca899", margin: "0 2px" }} /> 294 + <div 295 + style={{ 296 + width: "1px", 297 + height: "22px", 298 + backgroundColor: "#aca899", 299 + margin: "0 4px", 300 + }} 301 + /> 292 302 293 303 {/* Mail */} 294 - <button 304 + <div 295 305 style={{ 296 - padding: "1px 2px", 297 - background: "none", 298 - border: "none", 306 + display: "flex", 307 + alignItems: "center", 308 + padding: "0 4px", 299 309 cursor: "pointer", 300 310 }} 301 311 > 302 312 <img 303 313 src="/windows-icons/Email.png" 304 314 alt="Mail" 305 - style={{ width: "20px", height: "20px" }} 315 + style={{ width: "22px", height: "22px" }} 306 316 /> 307 - </button> 317 + <span style={{ fontSize: "8px", marginLeft: "1px" }}>▼</span> 318 + </div> 308 319 309 320 {/* Print */} 310 - <button 321 + <div 311 322 style={{ 312 - padding: "1px 2px", 313 - background: "none", 314 - border: "none", 323 + padding: "0 4px", 315 324 cursor: "pointer", 316 325 }} 317 326 > 318 327 <img 319 328 src="/windows-icons/Printer.png" 320 329 alt="Print" 321 - style={{ width: "20px", height: "20px" }} 330 + style={{ width: "22px", height: "22px" }} 322 331 /> 323 - </button> 332 + </div> 324 333 </div> 325 334 326 335 {/* Address Bar */} ··· 334 343 borderBottom: "1px solid #aca899", 335 344 }} 336 345 > 337 - <span style={{ fontSize: "11px", fontWeight: "normal" }}>Address</span> 346 + <span style={{ fontSize: "11px" }}>Address</span> 338 347 <div 339 348 style={{ 340 349 flex: 1, ··· 342 351 alignItems: "center", 343 352 backgroundColor: "white", 344 353 border: "1px solid #7f9db9", 345 - padding: "1px 3px", 354 + padding: "2px 4px", 346 355 }} 347 356 > 348 357 <img 349 358 src="/windows-icons/Internet Explorer 6.png" 350 359 alt="" 351 - style={{ width: "14px", height: "14px", marginRight: "3px" }} 360 + style={{ width: "16px", height: "16px", marginRight: "4px" }} 352 361 /> 353 - <span style={{ fontSize: "11px", color: "#000" }}> 354 - https://atfeeds.stevedsimkins.workers.dev/feed 362 + <span style={{ flex: 1, fontSize: "12px", color: "#000" }}> 363 + https://docs.surf 364 + </span> 365 + <span 366 + style={{ 367 + fontSize: "10px", 368 + color: "#666", 369 + padding: "0 4px", 370 + cursor: "pointer", 371 + }} 372 + > 373 + ▼ 355 374 </span> 356 375 </div> 357 376 <button 358 377 style={{ 359 378 display: "flex", 360 379 alignItems: "center", 361 - gap: "2px", 362 - padding: "1px 6px", 380 + gap: "3px", 381 + padding: "2px 12px", 363 382 fontSize: "11px", 383 + minWidth: "50px", 364 384 }} 365 385 > 366 386 <img 367 387 src="/windows-icons/Go.png" 368 388 alt="" 369 - style={{ width: "14px", height: "14px" }} 389 + style={{ width: "16px", height: "16px" }} 370 390 /> 371 391 Go 372 392 </button> 373 - <span style={{ fontSize: "11px" }}>Links</span> 393 + <span style={{ fontSize: "11px", marginLeft: "4px" }}>Links</span> 394 + <span style={{ fontSize: "10px" }}>»</span> 374 395 </div> 375 396 </div> 376 397
+2
packages/client/src/index.css
··· 7 7 justify-content: center; 8 8 margin: 0; 9 9 padding: 20px; 10 + overflow: hidden; 11 + box-sizing: border-box; 10 12 } 11 13 12 14 #root {