opml-reader

<opml-reader>

Turn a link to an OPML file into an RSS reader that showcases the content of the feeds in the OPML file. The reader is responsive and minimally-styled to fit in the surrounding page.

<opml-reader>
  <a type="text/x-opml" href="blog-roll.opml">OPML file of my blog roll</a>
</opml-reader>

Becomes:

Usage

Wrap the component around fallback content that will be displayed where JavaScript is not available. Make sure the fallback content contains a link to an OPML file with type="text/x-opml".

<opml-reader>
  <p>
    Download <a type="text/x-opml" href="blog-roll.opml">an OPML of my fav blogs</a>.
  </p>
</opml-reader>
<script type="module" src="https://cdn.jsdelivr.net/npm/opml-reader/opml-reader.js"></script>

You'll likely need to proxy the feeds

Due to CORS restrictions in the browser, it's unlikely that all the RSS feeds will be available to load directly from their source servers. To overcome this restriction, you could setup a proxy on your own server and pass the URL, using ${url} in place of the URL to be proxied.

<opml-reader proxy-url="/proxy?url=${url}">
  <!-- ... -->
</opml-reader>

There are some free CORS proxies available

If you're not able to setup your own proxy server, there are some others available for free. There may be some restrictions, such as rate-limiting, so do check out the information on their sites first.

• corsproxy.io proxy-url="https://corsproxy.io/?${url}"

• thingproxy proxy-url="https://thingproxy.freeboard.io/fetch/${url}"

Styling

You can style most of the elements of the reader directly, as they reside in the light DOM. There are, however, a few custom properties used in the reader that may be useful.

--opml-avatar-background-color The colour used to fill avatars, when no avatar image is set in a feed.

--opml-background-color The colour used as the background when parts of the UI overlap in narrow viewports.

--opml-focus-color The colour used to highlight keyboard focus.

--opml-highlight-color The background colour used to highlight selected items.

--opml-link-color The colour used to denote links (and buttons styled as links).

--opml-progress-color The colour used to in the loading indicator bar.

Contributing

Enhance is used as the development environment. You should be able to run this locally with:

npm init
npm start

Interesting files

/app/api/proxy.mjs The proxy script used in development.

/app/browser/* All the commponents used in the reader.

/public/demo.opml The OPML file used in development.

/test/* Tests (run with npm test).

/opml-reader.js The location where the shipped component is built.

Build

Build the component scripts into a single shippable file with:

npm run build

---

Written by @paulcuth as part of an initial exploration into developing Web Components.