npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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.