This repo serves as a collection of web components used on the detachedHEAD blog.
This component hosts all of the active links to where you can listen to the detachedHEAD Podcast.
<script src="https://cdn.jsdelivr.net/gh/kyle-west/dh-components@latest/dh-podcast-links.js"></script>
...
<dh-podcast-links></dh-podcast-links>As shown above, the styling applied is minimal. There is no ShadowDOM applied for the intention to have it match the styles of the host website.
Additionally you can add a callback function for when the user clicks on one of the links (for the potential use of metric tracking).
<script>
function someoneClickedOneOfTheLinks (company, data, event) {
// INCOMING DATA IS OF THE FORM:
// company --- "Spotify"
// data --- {url: "https://open.spotify…", icon: "./asset…"}
// event --- MouseEvent {isTrusted: true, screenX: 486, …}
}
</script>
<dh-podcast-links on-link-click="someoneClickedOneOfTheLinks"></dh-podcast-links>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent