Tweaks of presentations page, per Janet's feedback

_includes/get/presentations.liquid

@@ -1,3 +1,3 @@
 {% assign presentations = site.presentations | where_exp: "presentation", "presentation.publish_on contains site.key" | sort: "date" | reverse %}
 {% assign all_presentation_keywords = presentations | map: "keywords" | uniq | sort %}
-{% assign all_presentation_events = presentations | map: "event" | uniq | sort %}
+{% assign all_presentation_events = presentations | where_exp: "presentation", "presentation.event != nil" | map: "event" | uniq | sort %}

_layouts/presentation.html

@@ -2,7 +2,7 @@
 layout: container-default
 ---
 
-{% assign date = page.date | date: "%B %e" %}
+{% assign date = page.date | date: "%B %e, %Y" %}
 
 <div class="row justify-content-center">
     <div class="col-12 col-md-10 col-lg-9 col-xl-8 fs-5 "">
@@ -26,7 +26,9 @@ <h1>
             </div>
 
             <div class="mb-3 d-flex flex-row justify-content-between">
-                <h4 class="text-muted">{{ page.presenter }} at {{ page.event }}</h4>
+                <h4 class="text-muted">
+                    {{ page.presenter }} {% if page.event %} at {{ page.event }}{% endif %}
+                </h4>
                 <h4 class="text-muted">{{ date }}</h4>
             </div>
 
@@ -41,7 +43,7 @@ <h4 class="text-muted">{{ date }}</h4>
             </div>
 
 
-            <h2 class="mt-3 mb-0">Associated Links</h2>
+            <h4 class="h4 mt-3 mb-0">Associated Links</h2>
             <ul>
                 {% for link in page.links %}
                 <li><a href="{{ link.value }}" target="_blank" rel="noopener noreferrer">{{ link.name }}</a></li>

assets/css/style.scss

@@ -306,3 +306,36 @@ main {
     height: 620px;
   }
 }
+
+.presentation-description {
+  color: $text-muted;
+  position: relative;
+}
+
+.presentation-description > p {
+  margin-bottom: 0;
+}
+
+.presentation-description.collapsed {
+  max-height: 4.5rem;
+  overflow: hidden;
+  user-select: none;
+  cursor: pointer;
+}
+
+.presentation-description.collapsed > .gradient-overlay {
+  // must be collapsed to show gradient
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2.2em;
+  pointer-events: none;
+  background: linear-gradient(to bottom, rgba($white, 0), rgba($white, 0.95) 80%);
+}
+
+.presentation-description:not(.collapsed) > .gradient-overlay {
+  // not collapsed, hide gradient
+  display: none;
+}

assets/js/scripts.js

@@ -38,8 +38,6 @@ class PresentationFilterManager {
                 // Update button text to show selected event
                 this.buttonEventFilter.textContent = this.selectedEvent;
 
-                console.log("Selected event:", this.selectedEvent);
-
                 // Apply filters
                 this.filterPresentations();
             });
@@ -57,8 +55,6 @@ class PresentationFilterManager {
                     this.selectedKeywords.delete(keyword);
                 }
 
-                console.log("Selected keywords:", Array.from(this.selectedKeywords));
-
                 // Apply filters
                 this.filterPresentations();
             });
@@ -100,7 +96,7 @@ class PresentationFilterManager {
 
             // Check keyword filter
             if (this.selectedKeywords.size > 0) {
-                const cardKeywords = card.dataset.keywords ? card.dataset.keywords.split(' ') : [];
+                const cardKeywords = card.dataset.keywords ? card.dataset.keywords.split(',') : [];
 
                 // Check if any selected keyword matches card keywords
                 const hasMatchingKeyword = Array.from(this.selectedKeywords).some(keyword => 
@@ -133,6 +129,45 @@ class PresentationFilterManager {
 document.addEventListener("DOMContentLoaded", () => {
     // -- presentations page --
 
+    /**
+     * Setup click-to-expand for presentation descriptions that overflow
+     * their container.
+     */
+    function setupDescriptionExpansion() {
+        const descriptions = document.querySelectorAll(".presentation-description");
+
+        descriptions.forEach((description) => {
+            // individual to each description
+            const onDescriptionClick = () => {
+                description.classList.toggle("collapsed");
+                // if expanded, remove click listener to prevent further toggling
+                description.removeEventListener("click", onDescriptionClick);
+            };
+
+            // setup function that runs for each description, as well as on window resize
+            const setup = (desc) => {
+                desc.removeEventListener("click", onDescriptionClick);
+                desc.classList.add("collapsed"); // start collapsed
+
+                if (desc.scrollHeight <= desc.clientHeight) {
+                    // content fits, disable expansion
+                    desc.classList.remove("collapsed");
+                } else {
+                    // content overflows, enable expansion
+                    desc.addEventListener("click", onDescriptionClick);
+                }
+            }
+
+            // Initial setup
+            setup(description);
+            // Re-setup on window resize
+            window.addEventListener("resize", () => setup(description));
+        });
+    }
+
+    /**
+     * Fill in badge colors based on tag text.
+     */
     function fillBadgeColors() {
         const badges = document.querySelectorAll(".tag-badge");
         badges.forEach(badge => {
@@ -148,7 +183,9 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     fillBadgeColors();
-    // do presentation filtering only if on the presentations page
+    setupDescriptionExpansion();
+
+    // Initialize filter manager if on presentations page
     if (document.querySelector(".presentation-card")) {
         const filterManager = new PresentationFilterManager();
         filterManager.initialize();

presentations.html

@@ -15,6 +15,8 @@ <h1>Presentations</h1>
         {% for event in all_presentation_events %}
         <li><a class="button-filter-event-dropdown dropdown-item" href="#" data-event-selector="{{event}}">{{event}}</a></li>
         {% endfor %}
+
+        <!-- <li><a class="button-filter-event-dropdown dropdown-item" href="#" data-event-selector="Other">Other</a></li> -->
     </ul>
 
     <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -38,7 +40,7 @@ <h1>Presentations</h1>
 
 <div class="row mb-3">
     {% for presentation in presentations %}
-    <div class="presentation-card col-12 col-md-6 mb-3" data-event="{{ presentation.event }}" data-keywords="{{ presentation.keywords | join: ' ' }}">
+    <div class="presentation-card col-12 col-md-6 mb-3" data-event="{{ presentation.event }}" data-keywords="{{ presentation.keywords | join: ',' }}">
         <div class="news news-summary">
             <div class="article-content">
                 {% if presentation.youtube_video_id %}
@@ -55,18 +57,27 @@ <h2 class="article-title">
                     <a href="{{ presentation.url | relative_url }}">{{ presentation.title }}</a>
                 </h2>
 
-                <div class="d-flex flex-row justify-content-between">
-                    {% assign date = presentation.date | date: "%B %e" %}
-                    <h4 class="text-muted mb-0">{{ presentation.presenter }} at {{ presentation.event }}</h4>
-                    <h4 class="text-muted mb-0" style="flex-grow: 0; flex-shrink: 0;">{{ date }}</h4>
-                </div>
+                <h4 class="text-muted mb-0">
+                    {{ presentation.presenter }}
+                    {% if presentation.event %}
+                        at {{ presentation.event }}
+                    {% endif %}
+                </h4>
 
                 <div class="mb-3">
                 {% for tag in presentation.keywords %}
                     <span class="tag-badge badge">{{ tag }}</span>
                 {% endfor %}
                 </div>
-                <p>{{ presentation.description }}</p>
+
+                <div class="presentation-description collapsed">
+                    {{ presentation.description | markdownify }}
+
+                    <div class="gradient-overlay"></div>
+                </div>
+
+                {% assign date = presentation.date | date: "%B %e, %Y" %}
+                <small class="text-muted mb-0" style="flex-grow: 0; flex-shrink: 0;">{{ date }}</small>
             </div>
         </div>
     </div>