backend dev
Published
Edited
Sep 5, 2019
1 star
md`# Reddit Gallery`
html`
${betterResponse.slice(0,10).map(toHtml)}
`
toHtml = (obj, index) => {
return html`
<h2 class="title"> ${index + 1} - ${ obj.title } (${obj.ups} upvotes)</h1>
${handleEmbed(obj)}
`
}
handleEmbed = (obj) => {
if (obj.domain === 'gfycat.com' ) {
const gyfcatId = obj.url.split('https://gfycat.com/')[1];
const url = `https://gfycat.com/ifr/${gyfcatId}`;
return html`
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 57.5%; padding-top: 44px;"><iframe src=${url} style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no" allow="encrypted-media"></iframe></div>
`
}
if (obj.domain === 'i.imgur.com') {
return html`
<div>
<blockquote class="imgur-embed-pub" lang="en" data-id="ybWKjSM"><a href="//imgur.com/ybWKjSM">90% of StackOverflow answers</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
</div>
`
}
if (obj.domain === 'i.redd.it') {
return html`
<div>
<a class="embed" href=https://reddit.com/${obj.permalink} target=_blank><img src=${ obj.url } /></a>
</div>`
}
}
response = {
let subreddit = subredditInput || 'memes';
let response = await fetch(`https://www.reddit.com/r/${subreddit}/top.json?t=week`)
response = await response.json();
return response;
}
betterResponse = response.data.children.map(obj => _.pick(obj.data, fields));
_ = require('lodash');
import {text, checkbox, button, select} from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
