thewhodidthis / headlines

Helps read the news

about

A feed reading, nestable custom HTMLElement using the Fetch and DOMParser APIs.

setup

Load via script tag:

<!-- Just an IIFE namespaced `headlines` -->
<script src="https://thewhodidthis.github.io/headlines/headlines.js"></script>

Source from an import map:

{
  "imports": {
    "@thewhodidthis/headlines": "https://thewhodidthis.github.io/headlines/main.js"
  }
}

Download from GitHub directly if using a package manager:

# Add to package.json
npm install thewhodidthis/headlines

usage

Decoding happens client side, need proxy CORS protected resources therefore. For example:

import "@thewhodidthis/headlines"

self.customElements.whenDefined("just-headlines").then(() => {
  // Constructor available once tag added to custom element registry.
  const reader = new Headlines()

  // Override 10s fetch default cutoff.
  reader.timeout = 5000

  // Set feed url.
  reader.src =
    "https://cors-anywhere.herokuapp.com/http://blog.kenperlin.com/?feed=rss"

  // Fetch and display.
  document.body.appendChild(reader)
})

The following are equivalent producing exactly the same output:

<!-- mix items sorted by date -->
<just-headlines src="#">
  <just-headlines src="##">
    <just-headlines src="###"></just-headlines>
  </just-headlines>
</just-headlines>

<!-- same -->
<just-headlines>
  <just-headlines src="###"></just-headlines>
  <just-headlines src="##"></just-headlines>
  <just-headlines src="#"></just-headlines>
</just-headlines>

Each feed on a separate host element:

<just-headlines src="###"></just-headlines>
<just-headlines src="##"></just-headlines>
<just-headlines src="#"></just-headlines>

Duplicate requests and content:

<just-headlines>
  <just-headlines src="#"></just-headlines>
  <just-headlines src="#"></just-headlines>
</just-headlines>

see also

• The rise and demise of RSS
• It's time for an RSS revival