···
font-family: 'JetBrains Mono', monospace;
color: var(--text-muted);
+
font-family: 'JetBrains Mono', monospace;
+
color: var(--text-muted);
+
top: var(--header-height);
+
background-color: var(--bg-color);
+
color: var(--accent-alt);
+
padding-left: 110px; /* Make room for date column */
···
+
word-break: break-word;
···
···
font-family: 'JetBrains Mono', monospace;
color: var(--text-muted);
···
<div class="loading-spinner"></div>
<p class="loading-text">Growing Content...</p>
+
<div id="feed-items" class="tab-content active feed-container" data-tab="posts"></div>
+
<div id="link-items" class="tab-content feed-container" data-tab="links"></div>
<div id="people-items" class="tab-content" data-tab="people">
<h2 class="people-header">EEG Contributors</h2>
<div class="people-container"></div>
···
globalFeedObserver = setupObserver({
+
rootMargin: '-80px 0px',
// Observe all items in the active tab
···
// Create a copy of entriesArray to process strictly by date
const entriesByDate = [...entriesArray];
+
// Track current month/year for date headers
+
let currentYear = null;
+
let currentMonth = null;
// Process each entry in date order
for (const entry of entriesByDate) {
// Skip entries already processed
if (processedArticleIds.has(entry.articleId)) continue;
const date = new Date(entry.published);
+
const year = date.getFullYear();
+
const month = date.getMonth();
+
const dateAttr = `data-year="${year}" data-month="${month}"`;
+
// Check if we need to add a new month/year header
+
if (currentYear !== year || currentMonth !== month) {
+
<div class="month-year-header" ${dateAttr}>
+
<div class="date-column">
+
<div class="month-year-label">${monthNames[month]} ${year}</div>
+
// Function to get day with ordinal suffix
+
function getDayWithOrdinal(date) {
+
const day = date.getDate();
+
if (day % 10 === 1 && day !== 11) {
+
} else if (day % 10 === 2 && day !== 12) {
+
} else if (day % 10 === 3 && day !== 13) {
<article id="${entry.articleId}" class="feed-item" ${dateAttr}>
<div class="feed-item-row">
+
<div class="feed-item-date">${getDayWithOrdinal(date)}</div>
<div class="feed-item-author">${entry.author}</div>
<div class="feed-item-content-wrapper">
<div class="feed-item-title"><a href="${entry.link}" target="_blank">${entry.title}</a></div><div class="feed-item-preview">${entry.textPreview}</div>
···
// Set up scroll observer to highlight timeline items
const observerOptions = {
+
rootMargin: '-80px 0px',
// Skip adding data attributes - we've already done this during HTML generation
···
// Generate HTML for links view
+
// Track current month/year for date headers in links view
+
let currentLinkYear = null;
+
let currentLinkMonth = null;
dedupedLinks.forEach(link => {
+
const year = date.getFullYear();
+
const month = date.getMonth();
const dateFormatted = formatDate(date);
const url = new URL(link.url);
let displayText = url.hostname.replace('www.', '');
+
// Check if we need to add a new month/year header
+
if (currentLinkYear !== year || currentLinkMonth !== month) {
+
currentLinkYear = year;
+
currentLinkMonth = month;
+
<div class="month-year-header" data-year="${year}" data-month="${month}">
+
<div class="date-column">
+
<div class="month-year-label">${monthNames[month]} ${year}</div>
// Platform-specific display logic (same as in the main feed)
if (url.hostname === 'github.com' || url.hostname === 'gist.github.com') {
···
+
// Function to get day with ordinal suffix (reused)
+
function getLinkDayWithOrdinal(date) {
+
const day = date.getDate();
+
if (day % 10 === 1 && day !== 11) {
+
} else if (day % 10 === 2 && day !== 12) {
+
} else if (day % 10 === 3 && day !== 13) {
<div class="link-item" data-year="${date.getFullYear()}" data-month="${date.getMonth()}">
+
<div class="link-item-date">${getLinkDayWithOrdinal(date)}</div>
<div class="link-item-source" title="From: ${link.sourceTitle}">
<a href="${link.sourceLink}" target="_blank" style="color: inherit; text-decoration: none;">
anil.recoil.org