···
font-family: 'JetBrains Mono', monospace;
color: var(--text-muted);
311
+
position: absolute;
314
+
font-family: 'JetBrains Mono', monospace;
315
+
color: var(--text-muted);
318
+
padding-left: 15px;
321
+
.month-year-header {
323
+
top: var(--header-height);
324
+
background-color: var(--bg-color);
327
+
margin-left: -110px;
328
+
padding-left: 110px;
332
+
.month-year-label {
334
+
color: var(--accent-alt);
338
+
position: relative;
339
+
padding-left: 110px; /* Make room for date column */
···
355
+
word-break: break-word;
···
373
+
padding-right: 10px;
···
font-family: 'JetBrains Mono', monospace;
color: var(--text-muted);
···
<div class="loading-spinner"></div>
<p class="loading-text">Growing Content...</p>
958
-
<div id="feed-items" class="tab-content active" data-tab="posts"></div>
959
-
<div id="link-items" class="tab-content" data-tab="links"></div>
994
+
<div id="feed-items" class="tab-content active feed-container" data-tab="posts"></div>
995
+
<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({
1082
-
rootMargin: '0px',
1118
+
rootMargin: '-80px 0px',
// Observe all items in the active tab
···
// Create a copy of entriesArray to process strictly by date
const entriesByDate = [...entriesArray];
1393
+
// Track current month/year for date headers
1394
+
let currentYear = null;
1395
+
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);
1363
-
const dateAttr = `data-year="${date.getFullYear()}" data-month="${date.getMonth()}"`;
1403
+
const year = date.getFullYear();
1404
+
const month = date.getMonth();
1405
+
const dateAttr = `data-year="${year}" data-month="${month}"`;
1407
+
// Check if we need to add a new month/year header
1408
+
if (currentYear !== year || currentMonth !== month) {
1409
+
currentYear = year;
1410
+
currentMonth = month;
1413
+
<div class="month-year-header" ${dateAttr}>
1414
+
<div class="date-column">
1415
+
<div class="month-year-label">${monthNames[month]} ${year}</div>
1420
+
// Function to get day with ordinal suffix
1421
+
function getDayWithOrdinal(date) {
1422
+
const day = date.getDate();
1423
+
let suffix = "th";
1424
+
if (day % 10 === 1 && day !== 11) {
1426
+
} else if (day % 10 === 2 && day !== 12) {
1428
+
} else if (day % 10 === 3 && day !== 13) {
1431
+
return day + suffix;
<article id="${entry.articleId}" class="feed-item" ${dateAttr}>
<div class="feed-item-row">
1369
-
<div class="feed-item-date">${formatDate(entry.published)}</div>
1438
+
<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 = {
1572
-
rootMargin: '0px',
1641
+
rootMargin: '-80px 0px',
// Skip adding data attributes - we've already done this during HTML generation
···
// Generate HTML for links view
1743
+
// Track current month/year for date headers in links view
1744
+
let currentLinkYear = null;
1745
+
let currentLinkMonth = null;
dedupedLinks.forEach(link => {
1749
+
const year = date.getFullYear();
1750
+
const month = date.getMonth();
const dateFormatted = formatDate(date);
const url = new URL(link.url);
let displayText = url.hostname.replace('www.', '');
1756
+
// Check if we need to add a new month/year header
1757
+
if (currentLinkYear !== year || currentLinkMonth !== month) {
1758
+
currentLinkYear = year;
1759
+
currentLinkMonth = month;
1762
+
<div class="month-year-header" data-year="${year}" data-month="${month}">
1763
+
<div class="date-column">
1764
+
<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') {
···
1856
+
// Function to get day with ordinal suffix (reused)
1857
+
function getLinkDayWithOrdinal(date) {
1858
+
const day = date.getDate();
1859
+
let suffix = "th";
1860
+
if (day % 10 === 1 && day !== 11) {
1862
+
} else if (day % 10 === 2 && day !== 12) {
1864
+
} else if (day % 10 === 3 && day !== 13) {
1867
+
return day + suffix;
<div class="link-item" data-year="${date.getFullYear()}" data-month="${date.getMonth()}">
1770
-
<div class="link-item-date">${dateFormatted}</div>
1873
+
<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