Skip to content
Feed reading, nestable custom element
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.npmignore
LICENSE
index.js
index.mjs
package.json
readme.md
test.js

readme.md

Helps read the news

Setup

# Fetch latest from github
npm i thewhodidthis/headlines

Usage

Decoding happens client side, need proxy CORS protected resources therefore

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 exact 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,

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

This would result in duplicate requests + content,

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

Related reading

You can’t perform that action at this time.