consump/templates/html.mustache

103 lines
2.7 KiB
Plaintext

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<link rel="alternate" type="application/rss+xml" href="https://tilde.town/~dozens/consume/feed.xml" title="dozens consumes" />
<title>consump</title>
<style>
body {
max-width: 80ch;
margin: 3rem auto;
line-height: 1.8;
font-size: 20px;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
h1, h2 {
font-family: sans-serif;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
nav a {
color: red;
}
</style>
</head>
<body>
<header>
<nav>
<p>
Filter by:
<a id="filterAll" href="#">All</a> |
<a id="filterWatching" href="#">Watching</a> |
<a id="filterListening" href="#">Listening</a> |
<a id="filterPlaying" href="#">Playing</a> |
<a id="filterPodcast" href="#">Podcast</a>
</p>
</nav>
<h1>All The Media I Consume</h1>
<p><a href="https://www.goodreads.com/user/show/409485-chrisman">except for books</a></p>
<header>
<main>
{{#data}}
<article class={{type}}>
<h2 id="{{id}}">{{title}}</h2>
<p>
<small>
<date>
{{created}}
</date>
{{#episode}}
<span> | Episode: {{.}}</span>
{{/episode}}
</small>
</p>
{{{body}}}
</article>
{{/data}}
</main>
</body>
</html>
<script>
// clicky links
const filterAll = document.querySelector('#filterAll');
const filterWatching = document.querySelector('#filterWatching');
const filterListening = document.querySelector('#filterListening');
const filterPlaying = document.querySelector('#filterPlaying');
const filterPodcast = document.querySelector('#filterPodcast');
// dom nodes
const watching = document.querySelectorAll('.watching')
const listening = document.querySelectorAll('.listening')
const playing = document.querySelectorAll('.playing')
const podcast = document.querySelectorAll('.podcast')
const all = document.querySelectorAll('.watching, .listening, .playing, .podcast')
// event listeners
function hideandshow(fn) {
return function(e) {
e.preventDefault()
all.forEach(x => {
x.style.display = 'none';
})
fn.forEach(x => {
x.style.display = 'block';
})
}
}
filterAll.addEventListener('click', hideandshow(all))
filterWatching.addEventListener('click', hideandshow(watching))
filterListening.addEventListener('click', hideandshow(listening))
filterPlaying.addEventListener('click', hideandshow(playing))
filterPodcast.addEventListener('click', hideandshow(podcast))
</script>