Skip to content

Add left sidebar navigation to news page #205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pgleeson merged 1 commit into from
Apr 16, 2026
Merged

Add left sidebar navigation to news page #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 29 additions & 11 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,8 +169,8 @@ function refreshNews() {
}

function loadFullNewsFeed() {
// Load full news feed with descriptions for news.html page
console.log('Loading full news feed...');
// Load full news feed with sidebar navigation for news.html page
console.log('Loading full news feed with sidebar...');

$.ajax({
url: 'https://api.allorigins.win/get?url=' + encodeURIComponent('https://openworm.tumblr.com/rss'),
Expand All @@ -186,7 +186,8 @@ function loadFullNewsFeed() {

console.log('Found ' + items.length + ' items');

var html = '';
var mainHtml = '';
var navHtml = '<li class="nav-header">News Archive</li>';
var count = 0;

for (var i = 0; i < items.length && count < 25; i++) {
Expand All @@ -196,25 +197,37 @@ function loadFullNewsFeed() {
var link = item.querySelector('link').textContent;
var pubDate = new Date(item.querySelector('pubDate').textContent);
var dateStr = pubDate.toLocaleDateString('en-US', {
month: 'long',
month: 'short',
day: 'numeric',
year: 'numeric'
});

var descNode = item.querySelector('description');
var description = descNode ? descNode.textContent : '';

var borderStyle = (count < 24) ? 'border-bottom: 1px solid #eee;' : '';
// Create anchor ID from index
var anchorId = 'news-' + count;

html += '<li style="margin-bottom: 30px; padding-bottom: 20px; ' + borderStyle + '">';
html += '<h3 style="margin-top: 0;"><a href="' + link + '" target="_blank">' + title + '</a></h3>';
html += '<p class="muted" style="font-size: 14px; margin-bottom: 10px;">' + dateStr + '</p>';
html += '<div style="line-height: 1.6;">' + description + '</div>';
html += '</li>';
// Add to sidebar nav (if nav element exists)
navHtml += '<li><a href="#' + anchorId + '"><i class="fa fa-chevron-right"></i>' + dateStr + '</a></li>';

// Add to main content
var borderStyle = (count < 24) ? 'border-bottom: 1px solid #eee;' : '';
mainHtml += '<li id="' + anchorId + '" style="margin-bottom: 30px; padding-bottom: 20px; ' + borderStyle + '">';
mainHtml += '<h3 style="margin-top: 0;"><a href="' + link + '" target="_blank">' + title + '</a></h3>';
mainHtml += '<p class="muted" style="font-size: 14px; margin-bottom: 10px;">' + dateStr + '</p>';
mainHtml += '<div style="line-height: 1.6;">' + description + '</div>';
mainHtml += '</li>';
count++;
}

$("#news-feed-full").html(html);
$("#news-feed-full").html(mainHtml);

// Update sidebar nav if it exists
if ($("#news-nav").length) {
$("#news-nav").html(navHtml);
}

console.log('Rendered ' + count + ' items');

// Make images responsive
Expand All @@ -238,6 +251,11 @@ function loadFullNewsFeed() {
}

$("#news-feed-full").html('<li class="muted" style="text-align: center; padding: 40px;">' + errorMsg + ' <a href="https://openworm.tumblr.com" target="_blank">View blog directly &raquo;</a></li>');

// Update sidebar nav with fallback if it exists
if ($("#news-nav").length) {
$("#news-nav").html('<li class="nav-header">News Archive</li><li><a href="https://openworm.tumblr.com" target="_blank"><i class="fa fa-external-link"></i> View on Tumblr</a></li>');
}
}
});
}
Expand Down
14 changes: 12 additions & 2 deletions news.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,18 @@ <h1>OpenWorm News</h1>
<div class="container">

<div class="row">
<div class="span12">
<!-- Left sidebar with news index -->
<div class="span3 bs-docs-sidebar">
<ul id="news-nav" class="nav nav-list bs-docs-sidenav">
<li class="nav-header">News Archive</li>
<li style="text-align: center; padding: 20px;">
<i class="fa fa-spinner fa-spin"></i>
</li>
</ul>
</div>

<!-- Main content area -->
<div class="span9">
<div class="page-header">
<h2>Latest News</h2>
<p class="muted">News items are pulled from our <a href="https://openworm.tumblr.com" target="_blank">Tumblr blog</a>.</p>
Expand All @@ -73,7 +83,6 @@ <h2>Latest News</h2>
<p class="muted">Loading news from Tumblr...</p>
</li>
</ul>

</div>
</div>

Expand All @@ -89,6 +98,7 @@ <h2>Latest News</h2>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.pjax.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>
<script>
Expand Down