2016-10-01 11:54:01 +00:00
<!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" >
2016-10-01 14:30:46 +00:00
< meta name = "generation-date" content = "{{ .Now }}" >
2016-10-01 11:54:01 +00:00
< 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 >
2016-10-01 14:12:06 +00:00
< 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 >
2016-10-01 11:54:01 +00:00
< div class = "container-fluid" >
< div class = "row text-center" >
< h3 style = "color:white;font-family:verdana;" >
2016-10-07 17:26:31 +00:00
< 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 > < 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 > < br >
2016-10-01 11:54:01 +00:00
Design inspired by < a href = "http://bootsnipp.com/snippets/featured/image-tiles-full-width" target = "_new" > Snap TightImage Tiles snippet< / a > < br >
2016-10-01 17:36:03 +00:00
See < a href = "https://ryankes.eu/post/integrating-lastfm-into-your-hugo-site/" > blog post< / a > for more information
2016-10-01 11:54:01 +00:00
< / 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" >
2016-10-01 23:15:57 +00:00
2016-10-01 23:36:09 +00:00
{{ 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 }}
2016-10-01 11:54:01 +00:00
< 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 >
