diff --git a/templates/view.html.j2 b/templates/view.html.j2 index 8ffc41f..e329dbb 100644 --- a/templates/view.html.j2 +++ b/templates/view.html.j2 @@ -108,6 +108,11 @@ h3 { color: #ff6b6b; font-size: 16px; margin: 30px 0 15px 0; border-bottom: 1px .post-content { flex: 1; min-width: 0; } .post-header { margin-bottom: 10px; } .post-header strong { color: #ff6b6b; font-size: 14px; } +.post-header .post-link { color: #555; text-decoration: none; margin-left: 8px; font-size: 12px; opacity: 0; transition: opacity 0.2s; } +.post-block:hover .post-link { opacity: 1; } +.post-link:hover { color: #ff6b6b; } +.post-highlighted { animation: highlight-fade 8s ease-out; } +@keyframes highlight-fade { 0% { background: #ff6b6b33; } 100% { background: transparent; } } .post-content p { margin: 8px 0; } .post-content img:not(.post-avatar):not(.emoji) { max-width: 100%; border-radius: 4px; margin: 10px 0; } @media (max-width: 768px) { .hero-grid, .hero-grid.has-hero, .content-grid, .content-grid.has-screenshots { grid-template-columns: 1fr; } } @@ -204,7 +209,7 @@ function toggleScreenshots() { toggle.textContent = collapsed ? '[show]' : '[hide]'; } -// Forum post restructuring +// Forum post restructuring with anchor IDs (function() { const container = document.querySelector('.content-rendered'); if (!container) return; @@ -231,6 +236,7 @@ function toggleScreenshots() { if (p.closest('.post-block')) return; const block = document.createElement('div'); block.className = 'post-block'; + block.id = `post-${idx}`; const avatarCol = document.createElement('div'); avatarCol.className = 'post-avatar-col'; if (img && img.src && !img.src.includes('undefined') && !img.src.endsWith('#') && img.getAttribute('src') !== '#') { @@ -246,7 +252,8 @@ function toggleScreenshots() { } const contentCol = document.createElement('div'); contentCol.className = 'post-content'; - contentCol.innerHTML = `
${username}
`; + const postUrl = `${location.pathname}${location.search}#post-${idx}`; + contentCol.innerHTML = `
${username} #
`; let sib = p.nextElementSibling; const nextP = idx < postStarts.length - 1 ? postStarts[idx + 1].p : null; while (sib && sib !== nextP && sib.tagName !== 'HR') { @@ -257,6 +264,15 @@ function toggleScreenshots() { block.appendChild(avatarCol); block.appendChild(contentCol); p.parentNode.insertBefore(block, p); p.remove(); }); + // Highlight anchored post + if (location.hash && location.hash.startsWith('#post-')) { + const target = document.querySelector(location.hash); + if (target) { + target.scrollIntoView({behavior: 'smooth', block: 'center'}); + target.classList.add('post-highlighted'); + setTimeout(() => target.classList.remove('post-highlighted'), 8000); + } + } })(); {% if not noai %}