Skip to content

Commit cfa013d

Browse files
neural-loopneural-loop
committed
chore: Update OG image cache key and deploy action
1 parent be66a78 commit cfa013d

File tree

1 file changed

+90
-84
lines changed

1 file changed

+90
-84
lines changed

‎assets/js/main.js

Lines changed: 90 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
if (navCloseBtn) {
2222
navCloseBtn.addEventListener("click", toggleNav);
2323
}
24-
24+
2525
// Close on Escape key
2626
document.addEventListener('keydown', (e) => {
2727
if (e.key === 'Escape' && body.classList.contains('is-mobile-nav-open')) {
@@ -44,75 +44,75 @@
4444

4545
let bubblePool = [];
4646
for (let i = 0; i < MAX_BUBBLES; i++) {
47-
let bubble = document.createElement('div');
48-
bubble.className = 'contribution-bubble';
49-
bubble.dataset.busy = 'false';
50-
bubbleContainer.appendChild(bubble);
51-
bubblePool.push(bubble);
47+
let bubble = document.createElement('div');
48+
bubble.className = 'contribution-bubble';
49+
bubble.dataset.busy = 'false';
50+
bubbleContainer.appendChild(bubble);
51+
bubblePool.push(bubble);
5252
}
53-
53+
5454
let activeBubbles = new Map();
5555

5656
const updateBubblePositions = () => {
5757
activeBubbles.forEach((bubble, partner) => {
5858
const partnerRect = partner.getBoundingClientRect();
5959
const containerRect = bubbleContainer.getBoundingClientRect();
60-
60+
6161
const left = partnerRect.left - containerRect.left + (partnerRect.width / 2) - (bubble.offsetWidth / 2);
6262
const top = partnerRect.top - containerRect.top - bubble.offsetHeight - 10;
6363

6464
bubble.style.transform = `translate(${left}px, ${top}px)`;
6565
});
6666
requestAnimationFrame(updateBubblePositions);
6767
};
68-
68+
6969
requestAnimationFrame(updateBubblePositions);
7070

7171
const showBubble = (partner) => {
72-
const bubble = bubblePool.find(b => b.dataset.busy === 'false');
73-
if (!bubble) return;
74-
75-
bubble.dataset.busy = 'true';
76-
activeBubbles.set(partner, bubble);
77-
78-
bubble.innerHTML = partner.dataset.contributions;
79-
bubble.classList.add('visible');
80-
81-
setTimeout(() => {
82-
hideBubble(partner, bubble);
83-
}, BUBBLE_LIFETIME);
72+
const bubble = bubblePool.find(b => b.dataset.busy === 'false');
73+
if (!bubble) return;
74+
75+
bubble.dataset.busy = 'true';
76+
activeBubbles.set(partner, bubble);
77+
78+
bubble.innerHTML = partner.dataset.contributions;
79+
bubble.classList.add('visible');
80+
81+
setTimeout(() => {
82+
hideBubble(partner, bubble);
83+
}, BUBBLE_LIFETIME);
8484
};
8585

8686
const hideBubble = (partner, bubble) => {
87-
bubble.classList.remove('visible');
88-
activeBubbles.delete(partner);
89-
90-
setTimeout(() => {
91-
bubble.dataset.busy = 'false';
92-
}, 300);
87+
bubble.classList.remove('visible');
88+
activeBubbles.delete(partner);
89+
90+
setTimeout(() => {
91+
bubble.dataset.busy = 'false';
92+
}, 300);
9393
};
9494

9595
setInterval(() => {
96-
if (activeBubbles.size >= MAX_BUBBLES) return;
96+
if (activeBubbles.size >= MAX_BUBBLES) return;
9797

98-
const rect = section.getBoundingClientRect();
99-
const isInView = rect.top < window.innerHeight && rect.bottom >= 0;
98+
const rect = section.getBoundingClientRect();
99+
const isInView = rect.top < window.innerHeight && rect.bottom >= 0;
100100

101-
if (isInView) {
102-
const availablePartners = partnersWithContributions.filter(p => {
103-
if (activeBubbles.has(p)) return false;
104-
const r = p.getBoundingClientRect();
105-
return r.left > 50 && r.right < window.innerWidth - 50;
106-
});
101+
if (isInView) {
102+
const availablePartners = partnersWithContributions.filter(p => {
103+
if (activeBubbles.has(p)) return false;
104+
const r = p.getBoundingClientRect();
105+
return r.left > 50 && r.right < window.innerWidth - 50;
106+
});
107107

108-
if (availablePartners.length > 0) {
109-
const randomIndex = Math.floor(Math.random() * availablePartners.length);
110-
showBubble(availablePartners[randomIndex]);
111-
}
108+
if (availablePartners.length > 0) {
109+
const randomIndex = Math.floor(Math.random() * availablePartners.length);
110+
showBubble(availablePartners[randomIndex]);
112111
}
113-
}, BUBBLE_INTERVAL);
112+
}
113+
}, BUBBLE_INTERVAL);
114114
};
115-
115+
116116
// --- Copy Code Block ---
117117
const initCopyCodeButtons = () => {
118118
const codeBlocks = document.querySelectorAll('.code-block-wrapper');
@@ -148,17 +148,17 @@
148148
const modalContent = document.getElementById('og-modal-content');
149149
const closeBtn = document.getElementById('og-modal-close');
150150
if (!modal || !modalContent || !closeBtn) return;
151-
151+
152152
const showModal = () => {
153153
modal.classList.remove('hidden');
154154
modal.classList.add('flex');
155155
};
156-
156+
157157
const hideModal = () => {
158158
modal.classList.add('hidden');
159159
modal.classList.remove('flex');
160160
};
161-
161+
162162
closeBtn.addEventListener('click', hideModal);
163163
modal.addEventListener('click', (e) => {
164164
if (e.target === modal) {
@@ -170,10 +170,10 @@
170170
hideModal();
171171
}
172172
});
173-
173+
174174
window.openOgModal = (imageUrls) => {
175175
modalContent.innerHTML = ''; // Clear previous content
176-
176+
177177
if (!imageUrls || imageUrls.length === 0) {
178178
modalContent.innerHTML = '<p class="text-center col-span-full">No social media assets found for this page.</p>';
179179
} else {
@@ -185,8 +185,8 @@
185185
<img src="${img.url}" alt="OG Image Preview for ${img.label}" class="w-full rounded-md border border-border dark:border-darkmode-border shadow-md hover:shadow-lg transition-shadow">
186186
</a>
187187
<div class="mt-3">
188-
<button class="copy-og-url-btn btn btn-sm btn-outline-primary" data-url="${img.url}">
189-
<span class="copy-text">Copy URL</span>
188+
<button class="copy-og-image-btn btn btn-sm btn-outline-primary" data-url="${img.url}">
189+
<span class="copy-text">Copy Image</span>
190190
<span class="copied-text hidden">Copied!</span>
191191
</button>
192192
</div>
@@ -195,59 +195,65 @@
195195
modalContent.insertAdjacentHTML('beforeend', cardHTML);
196196
});
197197
}
198-
199-
modalContent.querySelectorAll('.copy-og-url-btn').forEach(button => {
198+
199+
modalContent.querySelectorAll('.copy-og-image-btn').forEach(button => {
200200
button.addEventListener('click', () => {
201201
const urlToCopy = button.dataset.url;
202-
navigator.clipboard.writeText(urlToCopy).then(() => {
203-
button.classList.add('copied');
204-
button.querySelector('.copy-text').classList.add('hidden');
205-
button.querySelector('.copied-text').classList.remove('hidden');
206-
207-
setTimeout(() => {
208-
button.classList.remove('copied');
209-
button.querySelector('.copy-text').classList.remove('hidden');
210-
button.querySelector('.copied-text').classList.add('hidden');
211-
}, 2000);
212-
}).catch(err => {
213-
console.error('Failed to copy URL: ', err);
214-
alert('Failed to copy URL to clipboard.');
215-
});
202+
fetch(urlToCopy)
203+
.then(response => response.blob())
204+
.then(blob => {
205+
const item = new ClipboardItem({ [blob.type]: blob });
206+
return navigator.clipboard.write([item]);
207+
})
208+
.then(() => {
209+
button.classList.add('copied');
210+
button.querySelector('.copy-text').classList.add('hidden');
211+
button.querySelector('.copied-text').classList.remove('hidden');
212+
setTimeout(() => {
213+
button.classList.remove('copied');
214+
button.querySelector('.copy-text').classList.remove('hidden');
215+
button.querySelector('.copied-text').classList.add('hidden');
216+
}, 2000);
217+
})
218+
.catch(err => {
219+
console.error('Failed to copy image: ', err);
220+
alert('Failed to copy image to clipboard. This feature requires a secure connection (HTTPS) and may need browser permissions.');
221+
});
216222
});
217223
});
218-
224+
219225
showModal();
220226
};
221-
227+
222228
document.querySelectorAll('[data-og-assets]').forEach(trigger => {
223-
trigger.addEventListener('click', (e) => {
224-
e.preventDefault();
225-
const assetsJson = trigger.dataset.ogAssets;
226-
try {
227-
const assets = JSON.parse(assetsJson);
228-
window.openOgModal(assets);
229-
} catch (error) {
230-
console.error("Could not parse OG assets JSON:", error);
231-
window.openOgModal([]);
232-
}
233-
});
229+
trigger.addEventListener('click', (e) => {
230+
e.preventDefault();
231+
const assetsJson = trigger.dataset.ogAssets;
232+
try {
233+
const assets = JSON.parse(assetsJson);
234+
window.openOgModal(assets);
235+
} catch (error) {
236+
console.error("Could not parse OG assets JSON:", error);
237+
window.openOgModal([]);
238+
}
239+
});
234240
});
235241
};
236242

237243
// Wait for the DOM to be fully loaded to initialize
238244
if (document.readyState === 'loading') {
239245
document.addEventListener('DOMContentLoaded', () => {
240-
initCopyCodeButtons();
241-
initOgImageModal();
242-
if (window.innerWidth > 768) { // Only run on larger screens
243-
initContributionBubbles();
244-
}
246+
initCopyCodeButtons();
247+
initOgImageModal();
248+
if (window.innerWidth > 768) { // Only run on larger screens
249+
initContributionBubbles();
250+
}
245251
});
246252
} else {
247253
initCopyCodeButtons();
248254
initOgImageModal();
249255
if (window.innerWidth > 768) { // Only run on larger screens
250-
initContributionBubbles();
256+
initContributionBubbles();
251257
}
252258
}
253259

0 commit comments

Comments
 (0)