this repo has no description
1
fork

Configure Feed

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

fix: Youtube rendering and colors

+101 -25
+91 -3
internal/assets/css/screen.css
··· 18 18 --img-placeholder: #bbb; 19 19 --author-color: #aaa; 20 20 --link-color: #2c6e2f; 21 - --quote-color: #d5b; 21 + --quote-color: #d65a00; 22 22 --header-color: #aaa; 23 23 24 24 /* OG Preview (Cards) */ ··· 64 64 --img-placeholder: #333; 65 65 --author-color: #888; 66 66 --link-color: #66bb6a; 67 - --quote-color: #e6c; 67 + --quote-color: #ffb74d; 68 68 --header-color: #888; 69 69 70 70 /* OG Preview (Cards) */ ··· 377 377 position: relative; 378 378 /* Match OG Card properties */ 379 379 max-width: 600px; 380 + width: 100%; 380 381 margin-top: 8px; 381 382 background: #000; 382 383 ··· 423 424 width: 100%; 424 425 text-align: left; 425 426 padding-bottom: 20px; 427 + } 428 + 429 + #navigation a { 430 + color: var(--text-main); 431 + text-decoration: none; 432 + transition: color 0.2s; 433 + } 434 + 435 + #navigation a:hover { 436 + color: var(--link-color); 426 437 } 427 438 428 439 /* Slack-like Link Preview Styles */ ··· 483 494 484 495 .og-image { 485 496 position: relative; /* For absolute positioning of play button */ 486 - display: inline-block; 497 + display: block; 487 498 } 488 499 489 500 .og-image.is-video { ··· 553 564 text-decoration: underline; 554 565 color: #666; 555 566 } 567 + 568 + /* Material Symbols Sizing */ 569 + .material-symbols-rounded { 570 + font-variation-settings: 571 + 'FILL' 0, 572 + 'wght' 400, 573 + 'GRAD' 0, 574 + 'opsz' 24; 575 + font-size: 20px; /* Default matches previous SVG size */ 576 + } 577 + 578 + /* Mobile Responsiveness */ 579 + @media (max-width: 768px) { 580 + #page { 581 + display: block; /* Stack everything */ 582 + padding: 15px; /* Reduce padding */ 583 + width: 100%; 584 + max-width: 100%; 585 + } 586 + 587 + #masthead { 588 + font-size: 48px; /* Smaller title */ 589 + line-height: 1.1; 590 + flex-direction: column; 591 + align-items: flex-start; 592 + } 593 + 594 + #theme-toggle { 595 + position: absolute; 596 + top: 0; 597 + right: 0; 598 + margin-top: 0; 599 + } 600 + 601 + #sidebar { 602 + margin-bottom: 40px; 603 + } 604 + 605 + /* Date Widget Reset for Mobile */ 606 + .date-icon { 607 + margin-top: 0; 608 + margin-left: 0; 609 + float: none; 610 + width: 100%; 611 + text-align: left; 612 + margin-bottom: 15px; 613 + display: flex; 614 + align-items: center; 615 + gap: 10px; 616 + } 617 + 618 + .date-meta { 619 + position: static; 620 + transform: none; 621 + display: inline-block; 622 + width: auto; 623 + } 624 + 625 + .date-date { 626 + display: inline-block; 627 + font-size: 24px; /* Smaller date number */ 628 + } 629 + 630 + .date-day, .date-month, .date-year { 631 + display: inline-block; 632 + font-size: 14px; 633 + margin-left: 5px; 634 + } 635 + 636 + .quote { 637 + padding-left: 15px; /* Reduce quote padding */ 638 + } 639 + 640 + .youtube-embed-wrapper { 641 + max-width: 100%; 642 + } 643 + }
+3 -3
internal/handler/handlers.go
··· 329 329 } 330 330 331 331 if iParam != "" || i > 1 { 332 - navP = fmt.Sprintf(`<a href="?i=%d%s"><img src="/img/prev.png" border="0" alt="" /></a>`, i+1, posterParam) 333 - navN = fmt.Sprintf(` &nbsp;<a href="?i=%d%s"><img src="/img/next.png" border="0" alt="" /></a>`, i-1, posterParam) 332 + navP = fmt.Sprintf(`<a href="?i=%d%s" style="text-decoration:none;"><span class="material-symbols-rounded" style="font-size: 36px; vertical-align: middle;">chevron_left</span></a>`, i+1, posterParam) 333 + navN = fmt.Sprintf(` &nbsp;<a href="?i=%d%s" style="text-decoration:none;"><span class="material-symbols-rounded" style="font-size: 36px; vertical-align: middle;">chevron_right</span></a>`, i-1, posterParam) 334 334 } else { 335 - navP = fmt.Sprintf(`<a href="?i=2%s"><img src="/img/prev.png" border="0" alt="" /></a>`, posterParam) 335 + navP = fmt.Sprintf(`<a href="?i=2%s" style="text-decoration:none;"><span class="material-symbols-rounded" style="font-size: 36px; vertical-align: middle;">chevron_left</span></a>`, posterParam) 336 336 } 337 337 if i == 1 { 338 338 navN = ""
+2
internal/handler/preview.go
··· 154 154 }) 155 155 return 156 156 } 157 + // Force type to video for YouTube 158 + metadata["type"] = "video" 157 159 } 158 160 159 161 json.NewEncoder(w).Encode(metadata)
+5 -19
internal/templates/views/index.html
··· 5 5 <link 6 6 rel="stylesheet" 7 7 href="/css/screen.css" 8 - type="text/css" 9 8 media="screen" 10 9 /> 10 + <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> 11 11 12 12 <!-- Theme Init --> 13 13 <script> ··· 50 50 return; 51 51 } 52 52 53 - // Skip OG preview for YouTube links (they're embedded directly) 54 - if (url.match(/youtube\.com|youtu\.be/i)) { 55 - return; 56 - } 53 + 57 54 58 55 // Ensure URL has protocol 59 56 if (!url.match(/^https?:\/\//)) { ··· 212 209 <div id="masthead"> 213 210 <a href="/">tumblefish.</a> 214 211 <button id="theme-toggle" aria-label="Toggle Dark Mode"> 215 - <svg 216 - width="20" 217 - height="20" 218 - viewBox="0 0 24 24" 219 - fill="none" 220 - stroke="currentColor" 221 - stroke-width="2" 222 - stroke-linecap="round" 223 - stroke-linejoin="round" 224 - > 225 - <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> 226 - </svg> 212 + <span class="material-symbols-rounded">contrast</span> 227 213 </button> 228 214 </div> 229 215 ··· 285 271 <path 286 272 fill-rule="evenodd" 287 273 d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" 288 - ></path></svg 289 - >. {{if .GitCommit}} Revision: 274 + ></path></svg> 275 + {{if .GitCommit}} Revision: 290 276 <a href="{{.GitCommitURL}}">{{.GitCommit}}</a>{{end}} 291 277 </div> 292 278