Add album tracks

.eleventy.js

@@ -20,8 +20,9 @@ function isFullUrl(url) {
 
 // Only one module.exports per configuration file, please!
 module.exports = function (eleventyConfig) {
-	eleventyConfig.addShortcode("image", async function (src, alt, sizes) {
+  eleventyConfig.addPassthroughCopy("content/albums/**/*.mp3");
 
+	eleventyConfig.addShortcode("image", async function (src, alt, sizes) {
     let input;
 		if(isFullUrl(src)) {
 			input = src;
@@ -29,8 +30,6 @@ module.exports = function (eleventyConfig) {
 			input = relativeToInputPath(this.page.inputPath, src);
 		}
     
-    console.log("SEARCH IMAGE IN", input);
-    
 		let metadata = await Image(input, {
 			widths: [300, 600],
 			formats: ["avif", "jpeg"],

_includes/albumslist.njk

@@ -6,6 +6,12 @@
         <h3 itemprop="name">{{ album.data.title }}</h3>
         <p itemprop="description">{{ album.data.description }}</p>
         {% image album.data.cover, "photo of my tabby cat", "(min-width: 30em) 50vw, 100vw" %}
+        <figure>
+          {% for track in album.data.tracklist %}
+            <figcaption>{{ track.title }}</figcaption>
+            <audio controls src="{{ track.audio }}"></audio>
+          {% endfor %}
+        </figure>
       </li>
     </ol>
   {% endfor %}

content/albums/cheburek/about.njk

@@ -1,7 +1,16 @@
 ---
 tags:
 - albums
+
 title: Cheburek
+
 description: In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
+
 cover: ./albums/cheburek/cover.jpg
+
+tracklist:
+  - title: Track One
+    audio: ./albums/cheburek/tracklist/trackone.mp3
+  - title: Track Two
+    audio: ./albums/cheburek/tracklist/tracktwo.mp3
 ---