Migrate to lit-html

Krever · Nov 8, 2024 · 3207383 · 3207383
1 parent 84dd18e
commit 3207383
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 93 deletions.
diff --git a/assets/build-presentation-list.js b/assets/build-presentation-list.js
@@ -212,98 +212,47 @@ const presentationsData = [
         ]
     }
 ];
+import { html, render } from 'https://unpkg.com/[email protected]/lit-html.js';
 
-function createCards(data) {
-    const container = document.getElementById("cardContainer");
+const createCard = (presentation) => html`
+    <div class="column">
+        <div class="ui fluid card">
+            <div class="content">
+                <div class="header">${presentation.title}</div>
+            </div>
+            <div class="content">
+                <div class="description">
+                    <div class="ui list">
+                        ${presentation.conferences.map(conference => html`
+                            <div class="item">
+                                <a class="conference-name" href="${conference.link}">${conference.name}</a>
+                                ${conference.slides ? html`
+                                    <a href="${conference.slides}" target="_blank" class="ui right floated icon" title="Slides">
+                                        <i class="file powerpoint outline icon"></i>
+                                    </a>
+                                ` : ''}
+                                ${conference.video ? html`
+                                    <a href="${conference.video}" target="_blank" class="ui right floated icon" title="Video">
+                                        <i class="video icon"></i>
+                                    </a>
+                                ` : ''}
+                            </div>
+                        `)}
+                    </div>
+                </div>
+            </div>
+            <div class="extra content">
+                <div class="ui tiny label">${presentation.meta}</div>
+            </div>
+        </div>
+    </div>
+`;
 
-    data.forEach(presentation => {
-        // Card
-        const columnDiv = document.createElement("div");
-        columnDiv.className = "column";
+const renderCards = () => {
+    const cardsTemplate = html`
+            ${presentationsData.map(presentation => createCard(presentation))}
+        `;
+    render(cardsTemplate, document.getElementById('cardContainer'));
+};
 
-        const cardDiv = document.createElement("div");
-        cardDiv.className = "ui fluid card";
-
-        // Card Content
-        const cardContent = document.createElement("div");
-        cardContent.className = "content";
-        cardDiv.appendChild(cardContent);
-
-        // Card Header (Presentation Title)
-        const headerDiv = document.createElement("div");
-        headerDiv.className = "header";
-        headerDiv.textContent = presentation.title;
-        cardContent.appendChild(headerDiv);
-
-        const descContent = document.createElement("div");
-        descContent.className = "content";
-        cardDiv.appendChild(descContent);
-
-        const descriptionDiv = document.createElement("div");
-        descriptionDiv.className = "description";
-        descContent.appendChild(descriptionDiv);
-
-        // Card Content
-        const cardExtraContent = document.createElement("div");
-        cardExtraContent.className = "extra content";
-        cardDiv.appendChild(cardExtraContent)
-
-        const metaDiv = document.createElement("div")
-        metaDiv.className = "ui tiny label";
-        metaDiv.textContent = presentation.meta;
-        cardExtraContent.appendChild(metaDiv);
-
-        // Conference List
-        const conferenceList = document.createElement("div");
-        conferenceList.className = "ui list";
-
-        presentation.conferences.forEach(conference => {
-            const conferenceItem = document.createElement("div");
-            conferenceItem.className = "item";
-
-            const conferenceHeader = document.createElement("div");
-            conferenceHeader.className = "header";
-            conferenceItem.appendChild(conferenceHeader);
-
-            // Conference Name
-            const conferenceName = document.createElement("a");
-            conferenceName.href = conference.url;
-            conferenceName.className = "conference-name"
-            conferenceName.textContent = conference.name;
-            conferenceHeader.prepend(conferenceName);
-
-            // Slides Icon Link
-            if (conference.slides) {
-                const slidesLink = document.createElement("a");
-                slidesLink.href = conference.slides;
-                slidesLink.target = "_blank";
-                slidesLink.className = "ui right floated icon";
-                slidesLink.style.marginLeft = "8px";
-                slidesLink.title = "Slides";
-                slidesLink.innerHTML = `<i class="file powerpoint outline icon"></i>`;
-                conferenceHeader.appendChild(slidesLink);
-            }
-
-            // Video Icon Link
-            if (conference.video) {
-                const videoLink = document.createElement("a");
-                videoLink.href = conference.video;
-                videoLink.target = "_blank";
-                videoLink.className = "ui right floated icon";
-                videoLink.style.marginLeft = "8px";
-                videoLink.title = "Video";
-                videoLink.innerHTML = `<i class="video icon"></i>`;
-                conferenceHeader.appendChild(videoLink);
-            }
-
-            conferenceList.appendChild(conferenceItem);
-        });
-
-        descriptionDiv.appendChild(conferenceList)
-        columnDiv.appendChild(cardDiv);
-        container.appendChild(columnDiv);
-    });
-}
-
-// Initialize the cards with data
-createCards(presentationsData);
+renderCards();
diff --git a/index.html b/index.html
@@ -6,6 +6,8 @@
     <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/[email protected]/dist/semantic.min.css">
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
+    <script type="module" src="https://unpkg.com/[email protected]/lit-html.js"></script>
+
 
 
     <style>
@@ -30,7 +32,7 @@ <h1 class="ui left floated header" style="padding-bottom: 0">My Talks</h1>
         <div id="cardContainer" class="ui three column grid"></div>
     </div>
 
-    <script src="assets/build-presentation-list.js"></script>
+    <script type="module" src="assets/build-presentation-list.js"></script>
 
 </div>
 </body>