diff --git a/website/main.js b/website/main.js
index 9f603ea..7aa36d4 100644
--- a/website/main.js
+++ b/website/main.js
@@ -11,7 +11,6 @@ function getRandomRotation() {
return 3 * Math.random() - 1.5;
}
-// Post-it note colors
const postItColors = [
'#E6F3FF', // faded blue
'#FFF9C4', // yellow
@@ -25,87 +24,116 @@ function getRandomPostItColor() {
}
function getPostItColorByDate(dateString) {
- // Create a simple hash from the date string
let hash = 0;
for (let i = 0; i < dateString.length; i++) {
hash = ((hash << 5) - hash) + dateString.charCodeAt(i);
- hash = hash & hash; // Convert to 32-bit integer
+ hash = hash & hash;
}
- // Use absolute value and modulo to get color index
const colorIndex = Math.abs(hash) % postItColors.length;
return postItColors[colorIndex];
}
-// Global variable to track last user-set volume (default to 1)
let lastMediaVolume = 1;
+// Define attachHoverListeners function
+function attachHoverListeners(postElement) {
+ // The base rotation is what was used for the loading animation.
+ // It's stored in the CSS custom property '--post-rotation'.
+ const baseRotation = postElement.style.getPropertyValue('--post-rotation');
+
+ postElement.addEventListener('mouseenter', function () {
+ postElement.style.zIndex = 100;
+ // Apply specific transition for this hover effect
+ postElement.style.transition = "transform 0.22s cubic-bezier(.5,1.5,.5,1), box-shadow 0.22s cubic-bezier(.5,1.5,.5,1)";
+ // Hover transform: new random rotation + scale
+ postElement.style.transform = `rotate(${getRandomRotation()}deg) scale(1.1)`;
+ });
+
+ postElement.addEventListener('mouseleave', function () {
+ // Apply specific transition for unhover
+ postElement.style.transition = "transform 0.18s cubic-bezier(.5,0,.5,1), box-shadow 0.18s cubic-bezier(.5,0,.5,1)";
+ // Return to base rotation + scale(1)
+ postElement.style.transform = `rotate(${baseRotation || '0deg'}) scale(1)`;
+ postElement.style.zIndex = 1;
+ });
+}
+
function createPost(t) {
const post = document.createElement("div");
post.className = "post";
+ // Set initial transform. This will be used by addPostToLayout to set --post-rotation.
post.style.transform = `rotate(${getRandomRotation()}deg)`;
post.style.backgroundColor = getPostItColorByDate(t.createdAt);
- // --- Shrink-then-grow hover effect ---
- post.addEventListener('mouseenter', function () {
- post.style.zIndex = 100;
- post.style.transition = "transform 0.22s cubic-bezier(.5,1.5,.5,1)";
- post.style.transform = `rotate(${getRandomRotation()}deg) scale(1.1)`;
- });
- post.addEventListener('mouseleave', function () {
- post.style.transition = "transform 0.18s cubic-bezier(.5,0,.5,1)";
- post.style.transform = `rotate(${getRandomRotation()}deg)`;
- post.style.zIndex = 1;
- });
- // --- end hover effect ---
+ // Hover listeners are now attached in addPostToLayout after the loading animation.
const link = document.createElement("a");
link.href = t.url;
link.target = "_blank";
link.style.textDecoration = "none";
- // --- EMBED HTML (images and videos) ---
let embedHtml = "";
if (t.embed && t.embed.length > 0) {
embedHtml = t.embed.map((embed, idx) => {
if (embed.type === "image") {
- // Image embed
return `
- 
+
`;
} else if (embed.type === "video") {
- // Video embed
- // Use a data attribute for m3u8 playlist, set src only if not m3u8
const isM3u8 = embed.playlist && embed.playlist.endsWith('.m3u8');
return `
-
+
+
+
`;
}
- // ...other embed types can be handled here...
return "";
}).join("");
}
- const textHtml = t.text.replace(/\n/g, "
");
+ function linkifyText(text, highlightColor) {
+ text = text.replace(/(^|[\s.,;:!?])#([a-zA-Z0-9_]{2,50})\b/g, (m, pre, tag) =>
+ `${pre}#${tag}`
+ );
+ text = text.replace(/(^|[\s.,;:!?])@([a-zA-Z0-9_.-]+\.[a-zA-Z0-9_.-]+)/g, (m, pre, handle) =>
+ `${pre}@${handle}`
+ );
+ return text;
+ }
+
+ function getHighlighterColor(cardColor) {
+ if (cardColor === '#E6F3FF') return '#ffb7ce';
+ if (cardColor === '#FFF9C4') return '#b7e0fd';
+ if (cardColor === '#E8F5E8') return '#fff89a';
+ if (cardColor === '#FFE4B5') return '#b6fcb6';
+ if (cardColor === '#FFE1E6') return '#ffd59e';
+ return '#fff89a';
+ }
+
+ const cardColor = getPostItColorByDate(t.createdAt);
+ const highlightColor = getHighlighterColor(cardColor);
+
+ const textHtml = linkifyText(t.text, highlightColor).replace(/\n/g, "
");
post.innerHTML = `