103 lines
2.7 KiB
Plaintext
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>
|