engineering/pig.py
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add anchor IDs to forum posts with copy-link and 8s highlight on navigation

Browse source
This commit is contained in:
Russell Ballestrini 2026-01-04 08:55:23 -05:00
parent b5497dfe0d
commit f4fb518ad6
1 changed files with 18 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

20
templates/view.html.j2
View file

@ -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 = `<div class="post-header"><strong>${username}</strong></div>`;
const postUrl = `${location.pathname}${location.search}#post-${idx}`;
contentCol.innerHTML = `<div class="post-header"><strong>${username}</strong> <a href="#post-${idx}" class="post-link" title="Link to this post" onclick="navigator.clipboard.writeText('${location.origin}${postUrl}');this.textContent='✓';setTimeout(()=>this.textContent='#',1500);return false;">#</a></div>`;
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);
}
}
})();
</script>
{% if not noai %}