Modelpublic

lvwerra/science-timeline

sourceHugging Faceupdated 1y agoView on Hugging Face

0likes

Model Card

Science Timeline

The org card can't display JS HTML embedded in the markdown. So the workaround is to render it in a model card (here) and export the rendered HTML. Steps:

—Edit the const releases section in embedded HTML here with the new release data
—Export the static HTML with the buttons below
—If you are nice, prettify the resulting HTML
—Copy-paste the result into the Org README
—Tada!

<div style="margin: 20px 0;"> <button onclick="exportStaticHTML()" style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; margin-right: 10px;">📋 Export Static HTML</button> <button onclick="copyToClipboard()" style="background: #28a745; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer;">📋 Copy to Clipboard</button> </div>

<div id="snake-timeline-container" style="max-width: 1000px; margin: 20px auto; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);"> Loading timeline... </div>

function createSnakeTimeline() { // Group by month const grouped = {}; releases.forEach(item => { if (!grouped[item.month]) grouped[item.month] = []; grouped[item.month].push(item); });

const months = Object.keys(grouped).sort().reverse(); // Reverse to show latest first

// Create rows of 4 months each const rows = []; for (let i = 0; i < months.length; i += 4) { rows.push(months.slice(i, i + 4)); }

let html = '<div style="font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif; position: relative;">';

rows.forEach((row, rowIndex) => { const isReverse = rowIndex % 2 === 1; // For reverse rows, we need to reverse the month order, not the display order const displayRow = isReverse ? [...row].reverse() : row; const isLastRow = rowIndex === rows.length - 1;

// Row container - the flex direction should always be normal html += <div style="display: flex; margin-bottom: 32px; min-height: 140px; position: relative;">;

// Horizontal connecting line (aligned with arrows) html += <div style="position: absolute; top: 8px; left: 0; right: 0; height: 1px; background: #e0e0e0; z-index: 1;"></div>;

displayRow.forEach((monthKey, monthIndex) => { const [year, month] = monthKey.split('-'); const monthName = new Date(year, month - 1).toLocaleString('en', { month: 'short' }).toUpperCase(); const events = grouped[monthKey] || []; const isYearMarker = month === '01';

// Month container html += <div style="flex: 1; padding: 0 15px; text-align: center; position: relative; z-index: 2;">;

// Arrow (positioned to align with horizontal line) - flipped for reverse chronological order const arrowStyle = isReverse ? 'width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #666; margin: 2px auto 12px;' : 'width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid #666; margin: 2px auto 12px;';

html += <div style="${arrowStyle}"></div>;

// Month title const titleStyle = isYearMarker ? 'font-weight: 600; font-size: 14px; color: #1a1a1a; background: #f0f0f0; padding: 4px 12px; border-radius: 12px; margin-bottom: 16px; display: inline-block;' : 'font-weight: 500; font-size: 13px; color: #666; text-transform: uppercase; margin-bottom: 16px; letter-spacing: 0.5px;';

const titleText = isYearMarker ? ${monthName} ${year} : monthName; html += <div style="${titleStyle}">${titleText}</div>;

// Events html += <div style="font-size: 12px; color: #4a4a4a; max-width: 180px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px;">; events.forEach(event => { if (event.link && event.link !== '#') { // Clickable event with link html += <a href="${event.link}" target="_blank" style="text-decoration: none; color: inherit;"> <div style="padding: 6px 8px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; line-height: 1.4; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer;" onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.background='#e3f2fd'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 1px 2px rgba(0,0,0,0.05)'; this.style.background='#f8f9fa'">${event.name}</div> </a>; } else { // Non-clickable event html += <div style="padding: 6px 8px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; line-height: 1.4; color: #6c757d;">${event.name}</div>; } }); html += </div>;

html += </div>; // Close month container });

// Add vertical connector if not the last row if (!isLastRow) { const connectorStyle = isReverse ? 'position: absolute; width: 1px; height: calc(100% + 32px); background: #e0e0e0; top: 8px; left: 0; z-index: 1;' : 'position: absolute; width: 1px; height: calc(100% + 32px); background: #e0e0e0; top: 8px; right: 0; z-index: 1;';

html += <div style="${connectorStyle}"></div>; }

html += </div>; // Close row });

html += '</div>';

// Insert the timeline const container = document.getElementById('snake-timeline-container'); if (container) { container.innerHTML = html; } return html; }

// Export functions - ADD THESE TO YOUR EXISTING SCRIPT function exportStaticHTML() { const staticHTML = createSnakeTimeline(); const output = document.getElementById('static-output'); if (!output) { // Create output div if it doesn't exist const outputDiv = document.createElement('div'); outputDiv.id = 'static-output'; outputDiv.style.cssText = 'background: #f8f9fa; border: 1px solid #ddd; padding: 15px; border-radius: 6px; font-family: monospace; font-size: 12px; max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; margin-top: 15px;'; document.body.appendChild(outputDiv); } output.style.display = 'block'; output.textContent = <div id="snake-timeline-container" style="max-width: 1000px; margin: 20px auto; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);"> ${staticHTML} </div>; }

// Run with multiple fallbacks setTimeout(createSnakeTimeline, 100); setTimeout(createSnakeTimeline, 500); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', createSnakeTimeline); } else { createSnakeTimeline(); } </script>