A feed reading, nestable custom HTMLElement
using the Fetch
and DOMParser
APIs.
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
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>