DEV Community

uni928
uni928

Posted on

Adding a Simple News Feed to a Custom Start Page with RSS.app

#javascript #html #rss #webdev

I recently added a simple news section to a custom browser start page that I am building.

Demo:

https://uni928.github.io/Uni928PublicHTMLs2/index4BEnglish.html

The page already works as a lightweight start page where shortcuts can be saved and organized into folders.

This time, I wanted to add one more feature:

A news feed that can be opened only when needed.

Why I used an RSS widget

At first, I considered retrieving news data myself and building the entire news UI manually.

However, for a small personal web tool, maintaining news sources, parsing feeds, and creating the display logic adds quite a lot of unnecessary code.

Instead, I used an RSS.app widget.

RSS.app provides embeddable widgets for RSS feeds, including list-style news feeds.

The basic implementation can be very small:

<iframe
  src="https://rss.app/embed/v1/list/YOUR_WIDGET_ID"
  title="News feed">
</iframe>
Enter fullscreen mode Exit fullscreen mode

The widget handles the actual feed display, while my page only needs to provide the surrounding UI.

Load the news only when the panel is opened

I did not want the news widget to load every time the start page was opened.

So the iframe is created only when the user opens the News panel for the first time.

let newsLoaded = false;

function loadNewsOnce() {
  if (newsLoaded) return;

  newsLoaded = true;

  const frame = document.createElement('iframe');

  frame.className = 'newsFrame';
  frame.title = 'News feed';
  frame.loading = 'eager';
  frame.referrerPolicy = 'strict-origin-when-cross-origin';
  frame.src = 'https://rss.app/embed/v1/list/YOUR_WIDGET_ID';

  newsFrameWrap.appendChild(frame);
}
Enter fullscreen mode Exit fullscreen mode

This keeps the start page lightweight when I only want to use the search box or shortcuts.

Remember whether the news panel was open

The page already uses IndexedDB for its saved data.

I also store the open/closed state of the news panel.

Conceptually, it works like this:

await setSetting('newsPanelOpen', true);
Enter fullscreen mode Exit fullscreen mode

When the page is opened again, the previous state can be restored.

const wasOpen = await getSetting('newsPanelOpen', false);

await setNewsOpen(Boolean(wasOpen), false);
Enter fullscreen mode Exit fullscreen mode

This is a very small detail, but it makes the page feel more like a persistent browser tool rather than a normal temporary web page.

The resulting layout

The final page has three main areas:

  1. Search
  2. Saved shortcuts and folders
  3. An expandable news section

The news feed is placed at the bottom so it does not interfere with the main purpose of the page.

It is also displayed as a vertical list rather than a large dashboard.

For this type of start page, I found a simple list easier to scan.

A note about third-party content

The news items displayed inside the widget come from third-party sources.

The widget is therefore used as an external feed display rather than copying or republishing the full news articles inside the page.

If you build something similar, it is worth checking the terms of the RSS/widget provider and the rights associated with the feeds you choose to display.

Conclusion

Embedding an RSS widget turned out to be a convenient way to add news to a small static HTML application.

The main advantage for me was that I could keep the implementation simple:

Static HTML
    ↓
Expandable news panel
    ↓
RSS.app widget
    ↓
External news sources
Enter fullscreen mode Exit fullscreen mode

There is no need to build a complete news reader just to add a small news section to a start page.

For small personal tools and prototypes, this approach can be a useful option.

Top comments (0)