fix page, add podcasts

Author: Krever

assets/build-podcasts-list.js

@@ -0,0 +1,48 @@
+// Sample data in JSON format
+const podcastsData = [
+    {
+        title: "Modelling the Business Domain",
+        description: "Scala Space",
+        meta: "Nov 22, 2024",
+        link: "https://www.youtube.com/watch?v=-8k3WfXVHkc&t=291s",
+    },
+    {
+        title: "Discover SwissBorg",
+        description: "Scala for Fun & Profit",
+        meta: "Mar 5, 2024",
+        link: "https://www.youtube.com/watch?v=NfU0NJRvrfE",
+    },
+];
+
+import {html, render} from 'https://cdn.jsdelivr.net/npm/lit-html@3.2.1';
+
+const createCard = (podcast) => html`
+    <div class="column">
+        <div class="ui fluid card">
+            <div class="content">
+                <div class="header">${podcast.title}
+                    <a href="${podcast.link}" target="_blank" class="ui right floated icon" title="Video">
+                        <i class="video icon"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="content">
+                <div class="description">
+                    <span class="conference-name">
+                        ${podcast.description}
+                        <span class="right floated">${podcast.meta}</span>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+`;
+
+const renderCards = () => {
+    const cardsTemplate = html`
+        ${podcastsData.map(podcast => createCard(podcast))}
+    `;
+    render(cardsTemplate, document.getElementById('podcastsContainer'));
+};
+
+renderCards();

assets/build-presentation-list.js

@@ -212,7 +212,7 @@ const presentationsData = [
         ]
     }
 ];
-import { html, render } from 'https://unpkg.com/lit-html@2.0.2/lit-html.js';
+import { html, render } from 'https://cdn.jsdelivr.net/npm/lit-html@3.2.1';
 
 const createCard = (presentation) => html`
     <div class="column">

index.html

@@ -7,7 +7,6 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css">
     <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.js"></script>
-    <script type="module" src="https://unpkg.com/lit-html@2.0.2/lit-html.js"></script>
 
 
 
@@ -33,7 +32,18 @@ <h1 class="ui left floated header" style="padding-bottom: 0">My Talks</h1>
         <div id="cardContainer" class="ui three column stackable grid container"></div>
     </div>
 
+    <div class="ui basic clearing segment">
+        <h2 class="ui left floated header" style="padding-bottom: 0">Podcasts</h2>
+    </div>
+
+    <hr/>
+
+    <div class="ui basic segment">
+        <div id="podcastsContainer" class="ui three column stackable grid container"></div>
+    </div>
+
     <script type="module" src="assets/build-presentation-list.js"></script>
+    <script type="module" src="assets/build-podcasts-list.js"></script>
 
 </div>
 </body>