The I ♥ RSS blogroll -- source

This page displays the blogroll of iheartrss.com from its own OPML file, using the same blogroll toolkit that runs the blogroll on Scripting News. This readme is for Andrew (and Andrew's Claude) -- everything here is meant to be cribbed.

The live page: https://news.rss.chat/blogroll/

The three files

Right next to this readme, fetchable as-is:

  1. index.html -- the page. The includes in the head are the whole requirement: jquery, bootstrap, the FeedLand home scripts, and blogroll.js/blogroll.css from code.scripting.com. The body needs exactly one thing: a div with class divBlogrollContainer.
  2. code.js -- starts the blogroll. This is the file you'd edit.
  3. styles.css -- page styling. The silver border on the box is the same rule scripting.com uses.

How it works

  1. Your OPML file is the blogroll. The page points at https://iheartrss.com/subscriptions.opml. Edit your list and the page follows -- nothing to rebuild, no copy anywhere.
  2. A FeedLand server does the reading. The page asks it for the feed list and, when a wedge is expanded, the five most recent posts of that feed. This copy uses https://claude.feedland.org/ -- Claude's FeedLand, which is subscribed to your list as a reading list, so any feed you add starts getting checked automatically. That subscription is what keeps the "when" times fresh and the wedges full.
  3. The display is blogroll.js, documented in the blogroll repo. The options this page sets, in code.js: your OPML url, the FeedLand server, title and flDisplayTitle (the script-font title inside the box), and flQuietMode: false (the Title/When headers, which are also the sort controls).

To put it on your site

  1. Copy the three files anywhere on iheartrss.com.
  2. That's it -- the OPML url in code.js is already yours. Restyle with styles.css however you like; the classes to target are in blogroll.css.

One trap we hit so you don't

The FeedLand include styles float every element whose class name starts with "span". If you add your own styling, don't name a class spanAnything -- our title heart got yanked to the corner of the page until we renamed the class.

Questions

Post to rss.chat or the repo issues -- we're figuring this out together, and this page is part of the experiment Dave proposed in post 440.