mirror of
https://github.com/alrayyes/lastfm-hugo-demo-theme
synced 2023-11-13 18:16:42 +00:00
61 lines
3.3 KiB
HTML
61 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="author" content="Ryan Kes">
|
|
<meta name="generator" content="Hugo 0.16" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="A page that demonstrates Hugo working with the Last.fm api">
|
|
<meta name="keywords" content="Last.fm, Hugo, api, tutorial, demo">
|
|
<meta name="generation-date" content="{{ .Now }}">
|
|
|
|
<title>Last.fm Hugo Demo</title>
|
|
<link href="/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
|
|
<link rel="stylesheet" href="/css/style.css" type="text/css"/>
|
|
{{ template "_internal/google_analytics_async.html" . }}
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<a href="https://github.com/alrayyes/lastfm-hugo-demo-theme"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
|
|
<div class="container-fluid">
|
|
<div class="row text-center">
|
|
<h3 style="color:white;font-family:verdana;">
|
|
<a href="http://www.last.fm" target="_new">Last.fm</a> <a href="https://gohugo.io/" target="_new">Hugo</a> Demo<br><small><a href="http://ryankes.eu">Ryan Kes</a></small><br>
|
|
<a href="https://app.wercker.com/project/byKey/66ec21eac3d13a824ffad55138a17e4a"><img alt="Wercker status" src="https://app.wercker.com/status/66ec21eac3d13a824ffad55138a17e4a/m/master"></a><br>
|
|
Design inspired by <a href="http://bootsnipp.com/snippets/featured/image-tiles-full-width" target="_new">Snap TightImage Tiles snippet</a><br>
|
|
See <a href="https://ryankes.eu/post/integrating-lastfm-into-your-hugo-site/">blog post</a> for more information
|
|
</h3>
|
|
</div>
|
|
<div class="row">
|
|
{{ $dataJ := getJSON (printf "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=%s&api_key=%s&format=json&limit=%s" .Site.Params.username .Site.Params.apikey (.Site.Params.limit) ) }}
|
|
{{ range $dataJ.recenttracks.track }}
|
|
<a href="{{ .url }}" target="_new">
|
|
|
|
{{ range last 1 .image }}<div class="cover-card col-sm-4" style="background: url({{ if index . "#text" }}{{ index . "#text" }}{{ else }}http://img2-ak.lst.fm/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.png{{ end }}) no-repeat center top;background-size:cover;">{{ end }}
|
|
<p>
|
|
{{ printf "%s - %s" (index .artist "#text") .name }}<br>
|
|
-<br>
|
|
{{ if isset .date "#text" }}<span class="play-date" data-date="{{ (index .date "uts") }}">{{ index .date "#text" }}</span>{{ else }}<span class="play-date" data-date="">Now playing...</span>{{ end }}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/jquery-1.10.2.min.js"></script>
|
|
<script src="/js/bootstrap.min.js"></script>
|
|
<script src="/js/moment.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('span.play-date').each(function(i, e) {
|
|
var date = moment.unix($(e).data('date'));
|
|
$(e).html(date.fromNow());
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|