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:

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>

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>

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}"

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.

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

npm init
npm start

/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 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.