Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

about

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

setup

Download from GitHub directly:

# Add to package.json
npm install thewhodidthis/headlines

usage

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

import "@thewhodidthis/headlines"

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