Add standalone AI/ML RSS feed viewer to custom public pages

Created a new file at /custom/public/rss.html that displays RSS feeds from major AI/ML sources, including OpenAI, DeepMind, Google AI Blog, AI Weekly, and Machine Learning Mastery.

This viewer uses JavaScript with the rss2json.com API to fetch and render the latest five articles per feed. Styling matches CodexScrolls’ dark aesthetic, with responsive layout and clean separation per source.

This page is accessible via https://codexscrolls.io/rss and can be expanded in the future to support feed filtering, tag-based navigation, or a self-hosted parser to remove reliance on third-party services.
This commit is contained in:
hira 2025-07-26 17:14:26 +00:00
parent 53a17e6820
commit 3aff306893
1 changed files with 98 additions and 0 deletions

98
custom/public/rss.html Normal file
View File

@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI/ML Feeds CodexScrolls</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background: #0d0d0d;
color: #e0e0e0;
font-family: "Inter", sans-serif;
margin: 2em;
}
h1 {
color: #4c6fff;
font-size: 2em;
margin-bottom: 0.2em;
}
.feed-section {
margin-top: 2em;
}
h2 {
color: #76a8ff;
margin-bottom: 0.5em;
border-bottom: 1px solid #222;
padding-bottom: 0.3em;
}
ul.feed-list {
list-style: none;
padding-left: 0;
}
ul.feed-list li {
margin: 0.4em 0;
}
a {
color: #a2c5ff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.error {
color: #ff4c4c;
}
</style>
</head>
<body>
<h1>AI/ML News Feeds</h1>
<div id="feeds-container"></div>
<script>
const feeds = [
{ title: "OpenAI", url: "https://openai.com/blog/rss" },
{ title: "Google AI Blog", url: "https://ai.googleblog.com/feeds/posts/default" },
{ title: "DeepMind", url: "https://www.deepmind.com/blog/rss.xml" },
{ title: "AI Weekly", url: "https://aiweekly.co/feed" },
{ title: "Machine Learning Mastery", url: "https://machinelearningmastery.com/blog/feed/" }
];
const container = document.getElementById('feeds-container');
feeds.forEach(feed => {
const section = document.createElement('div');
section.className = 'feed-section';
section.innerHTML = `<h2>${feed.title}</h2><ul class="feed-list" id="list-${feed.title.replace(/\s+/g, '')}"><li>Loading...</li></ul>`;
container.appendChild(section);
fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(feed.url)}`)
.then(res => res.json())
.then(data => {
const list = document.getElementById(`list-${feed.title.replace(/\s+/g, '')}`);
list.innerHTML = '';
data.items.slice(0, 5).forEach(item => {
const li = document.createElement('li');
li.innerHTML = `<a href="${item.link}" target="_blank">${item.title}</a>`;
list.appendChild(li);
});
})
.catch(error => {
console.error(error);
const list = document.getElementById(`list-${feed.title.replace(/\s+/g, '')}`);
list.innerHTML = `<li class="error">Failed to load feed.</li>`;
});
});
</script>
</body>
</html>