Replace homepage player by featured releases section

src/content/_index.en.md

@@ -23,6 +23,7 @@ playfair:
       href: "/stream2own"
   cta: "Become a member"
   link: "Login to the player"
+featured_title: "Featured releases"
 features:
   - id: stream2own
     title: "Stream2own"

src/content/_index.es.md

@@ -23,6 +23,7 @@ playfair:
       href: "/stream2own"
   cta: "Become a member"
   link: "Login to the player"
+featured_title: "Featured releases"
 features:
   - id: stream2own
     title: "Stream2own"

src/content/_index.fr.md

@@ -23,6 +23,7 @@ playfair:
       href: "/stream2own"
   cta: "Become a member"
   link: "Login to the player"
+featured_title: "Featured releases"
 features:
   - id: stream2own
     title: "Stream2own"

src/layouts/index.html

@@ -57,12 +57,31 @@ <h1 class="f1 f1-vw-m lh-solid tracked-tight normal black ma0 mb3 ph1 ph2-m" sty
 </section>
 {{ end }}
 
+<section id="featured" class="ph2 ph3-ns">
+  <h2 class="f4 normal near-black ph2 ph3-ns">Featured releases</h2>
+  {{ $featured := getJSON "https://stream.resonate.coop/api/v2/trackgroups?limit=20&page=1&featured=true" }}
+  <div class="cf flex flex-wrap">
+    {{ range first 5 $featured.data }}
+    <div class="fl w-100 w-33-m w-20-l pa3 mb3">
+    {{ partial "components/release" ( dict "release" . ) }}
+    </div>
+    {{ end }}
+    {{ range first 1 (after 5 $featured.data) }}
+    <div class="fl w-100 w-33-m w-20-l pa3 mb3 dn-l">
+    {{ partial "components/release" ( dict "release" . ) }}
+    </div>
+    {{ end }}
+  </div>
+</section>
+
+<!--
 <section id="player" class="w-100 ph2 ph3-ns">
   <div class="ph2 ph3-ns">
     {{ $release := .Site.Data.featured.release }}
     {{ partial "components/player" ( dict "release" $release "hash" $hash ) }}
   </div>
 </section>
+-->
 
 {{ with .Params.features }}
 <section id="features" class="w-100 pa2 pa3-ns">

src/layouts/partials/components/release.html

@@ -0,0 +1,23 @@
+<article id="{{ .release.id }}">
+  <a href="https://stream.resonate.coop/artist/{{ .release.creator_id }}/release/{{ .release.slug }}" title="{{ .release.display_artist }} – {{ .release.title }}" class="db link">
+    <figure class="ma0">
+      <picture>
+        <img src="{{ .release.cover }}" class="w-100 h-auto" width="160" height="160" alt="{{ .release.title }} cover" loading="lazy">
+      </picture>
+      <figcaption class="">
+        <h3 class="f4 normal truncate mv1">{{ .release.title }}</h3>
+        <p class="truncate f5 mt0 mb1 dark-gray">{{ .release.display_artist }}</p>
+        <dl class="ma0">
+          <dt class="sr-only">Tags</dt>
+          <dd class="ma0">
+            <ul class="list ma0 pa0 flex flex-wrap">
+              {{ range .release.tags }}
+              <li class="mr1 f6 f5-ns">#{{ . }}</li>
+              {{ end }}
+            </ul>
+          </dd>
+        </dl>
+      </figcaption>
+    </figure>
+  </a>
+</article>