Create a gist now

Instantly share code, notes, and snippets.

@ile /card.mustache
Last active Feb 11, 2017

What would you like to do?
<index:>
{{if item}}
<div class="card{{if big}} card-big{{/}}{{if (item.videos.length || allowOembed())}} card-video{{/}}{{if (item.type == 'audio')}} card-audio{{/}}">
{{if preferOembed()}}
<oembed></oembed>
{{else if (item.type == 'photo' && item.images.length) }}
<single-image image="//safe.chttr.co/{{item.images[0].safe}}"></single-image>
{{else if (item.oembed.type == 'photo' && item.oembed.images.length) }}
<single-image image="//safe.chttr.co/{{item.oembed.images[0].safe}}"></single-image>
{{else if (item.images.length && !play)}}
<with-image></with-image>
{{else if play}}
<viewer></viewer>
{{else if html5Video()}}
<video-html5 small="{{if !big}}true{{/}}" big="{{if big}}true{{/}}"></video-html5>
{{else if item.type == 'audio'}}
<aud></aud>
{{else if hasText()}}
<a target="_blank" href="{{item.url}}">
<text></text>
</a>
{{else if allowOembed()}}
<oembed></oembed>
{{/}}
</div>
{{/}}
<btn: tag="btn">
<span class="fa fa-play-circle"></span>
<with-image: tag="with-image">
{{if (item.videos.length || allowOembed())}}
<span class="vplay" on-click="play()">
<im></im>
<btn></btn>
</span>
<a target="_blank" href="{{item.url}}">
<text></text>
</a>
{{else}}
<a target="_blank" href="{{item.url}}">
<im></im>
<text></text>
</a>
{{/}}
<oembed: tag="oembed">
<iframe src="/oembed/{{encodeURIComponent(item.url)}}"></iframe>
<oembed2: tag="oembed2">
<iframe src="https://api.embed.rocks/oembed/?url={{encodeURIComponent(item.url)}}&key=4ed843c5-5ed4-4201-9e68-a227c314aae8"></iframe>
<text: tag="text">
{{if !play}}
<div class="card-text">
<h3>{{item.title}}</h3>
<p>{{item.description}}</p>
{{if item.favicon.safe || item.site}}
<p class="fav">{{if item.favicon.safe}}<img onerror="this.src='/img/broken.jpg'" class="favicon" src="//safe.chttr.co/{{item.favicon.safe}}">{{/}}{{item.site}}</p>
{{/}}
</div>
{{/}}
<video-iframe: tag="video-iframe">
<iframe style="{{videoSize()}}" src="{{item.videos[0].secureUrl || item.videos[0].url}}"></iframe>
<text></text>
<oembed-player: tag="oembed-player">
<iframe src="http://embed.rocks:3001/oembed/?url={{encodeURIComponent(item.secureUrl || item.url)}}"></iframe>
<aud: tag="aud">
<audio controls loop>
<source type="{{item.audios[0].type}}" src="{{item.audios[0].secureUrl || item.audios[0].url}}">
</audio>
<video-html5: tag="video-html5">
{{if play}}
<video controls loop autoplay>
<source type="{{item.videos[0].type}}" src="{{item.videos[0].secureUrl || item.videos[0].url}}">
</video>
{{else if small || big}}
<span class="vplay" on-click="play()">
<video class="{{if small}}small{{else if big}}big{{/}}">
<source type="{{item.videos[0].type}}" src="{{item.videos[0].secureUrl || item.videos[0].url}}">
</video>
<btn></btn>
</span>
{{else}}
<video controls loop>
<source type="{{item.videos[0].type}}" src="{{item.videos[0].secureUrl || item.videos[0].url}}">
</video>
{{/}}
<text></text>
<single-image: tag="single-image">
<section class="photos-list photos-list-1">
<img src="{{@image}}">
</section>
<im: tag="im">
{{if item.images}}
{{if item.images[0].safe}}
<img onerror="this.src='/img/broken.jpg'" class="card-image" src="//safe.chttr.co/{{item.images[0].safe}}">
{{else}}
<img onerror="this.src='/img/broken.jpg'" class="card-image" src="{{item.images[0].url}}">
{{/}}
{{/}}
<viewer: tag="viewer">
<div on-click="stop()" class="dl-container">
{{if html5Video()}}
<video-html5></video-html5>
{{else if iframeVideo()}}
<video-iframe></video-iframe>
{{else if allowOembed()}}
<oembed-player></oembed-player>
{{/}}
<i on-click="stop()" class="viewer-close fa fa-times-circle"></i>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment