opml-reader
v0.1.2
Published
A minimally-styled RSS reader Web Component.
Downloads
3
Readme
<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.