diff --git a/.gitmodules b/.gitmodules index 52af485c..1c4d1121 100644 --- a/.gitmodules +++ b/.gitmodules @@ -7,3 +7,6 @@ [submodule "_events_external"] path = _events url = https://github.com/CHTC/events +[submodule "_presentations"] + path = _presentations + url = https://github.com/CHTC/Presentations.git diff --git a/_config.yml b/_config.yml index ea027f75..ddd15aef 100755 --- a/_config.yml +++ b/_config.yml @@ -60,6 +60,9 @@ collections: redirects: output: true permalink: /:path + presentations: + output: true + permalink: /presentations/:year/:month/:day/:title/ defaults: - scope: @@ -97,6 +100,10 @@ defaults: type: redirects values: layout: redirect + - scope: + type: presentations + values: + layout: presentation diff --git a/_includes/get/presentations.liquid b/_includes/get/presentations.liquid new file mode 100644 index 00000000..1d6edd93 --- /dev/null +++ b/_includes/get/presentations.liquid @@ -0,0 +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 %} diff --git a/_includes/layout/header.html b/_includes/layout/header.html index 573323df..97804680 100644 --- a/_includes/layout/header.html +++ b/_includes/layout/header.html @@ -38,6 +38,7 @@ Spotlights Events News + Presentations
  • diff --git a/_layouts/presentation.html b/_layouts/presentation.html new file mode 100644 index 00000000..cf07ddbf --- /dev/null +++ b/_layouts/presentation.html @@ -0,0 +1,52 @@ +--- +layout: container-default +--- + +{% assign date = page.date | date: "%B %e" %} + +
    +
    +
    +
    +

    + {{ page.title }} +

    +
    + +
    +
    + +
    +
    + +
    +

    {{ page.presenter }} at {{ page.event }}

    +

    {{ date }}

    +
    + +

    + {{ page.description | markdownify }} +

    + +
    + {% for tag in page.keywords %} + {{ tag }} + {% endfor %} +
    + + +

    Associated Links

    + +
    +
    +
    diff --git a/_presentations b/_presentations new file mode 160000 index 00000000..bef530cd --- /dev/null +++ b/_presentations @@ -0,0 +1 @@ +Subproject commit bef530cd3ab365cd7f2e58d1a6ffe8252c71e534 diff --git a/assets/js/scripts.js b/assets/js/scripts.js index e69de29b..0dba20a0 100644 --- a/assets/js/scripts.js +++ b/assets/js/scripts.js @@ -0,0 +1,156 @@ +function generateStringHash(value) { + // Simple hash function to generate a number from the tag string + let hash = 0; + for (let i = 0; i < value.length; i++) { + hash = value.charCodeAt(i) + ((hash << 5) - hash); + } + + return hash; +} + +class PresentationFilterManager { + constructor() { + this.selectedEvent = null; + this.selectedKeywords = new Set(); + } + + initialize() { + this.buttonEventFilter = document.getElementById("button-filter-event"); + this.buttonEventDropdownItems = document.querySelectorAll("a[data-event-selector]"); + this.keywordCheckboxes = document.querySelectorAll("input[data-keyword-selector]"); + this.resetButton = document.getElementById("button-clear-filters"); + this.cards = document.querySelectorAll(".presentation-card"); + + this.originalEventFilterText = this.buttonEventFilter.textContent; + this.noPresentationsFoundText = document.getElementById("no-presentations-found"); + + this.initializeEventButtons(); + this.initializeKeywordCheckboxes(); + this.initializeResetButton(); + } + + initializeEventButtons() { + this.buttonEventDropdownItems.forEach(item => { + item.addEventListener("click", (e) => { + e.preventDefault(); + this.selectedEvent = e.target.dataset.eventSelector; + + // Update button text to show selected event + this.buttonEventFilter.textContent = this.selectedEvent; + + console.log("Selected event:", this.selectedEvent); + + // Apply filters + this.filterPresentations(); + }); + }); + } + + initializeKeywordCheckboxes() { + this.keywordCheckboxes.forEach(checkbox => { + checkbox.addEventListener("change", (e) => { + const keyword = e.target.dataset.keywordSelector; + + if (e.target.checked) { + this.selectedKeywords.add(keyword); + } else { + this.selectedKeywords.delete(keyword); + } + + console.log("Selected keywords:", Array.from(this.selectedKeywords)); + + // Apply filters + this.filterPresentations(); + }); + }); + } + + initializeResetButton() { + this.resetButton.addEventListener("click", () => { + // Reset event filter + this.selectedEvent = null; + this.buttonEventFilter.textContent = this.originalEventFilterText; + + // Reset keyword filters + this.selectedKeywords.clear(); + this.keywordCheckboxes.forEach(checkbox => { + checkbox.checked = false; + }); + + // Show all presentations + this.filterPresentations(); + + // Hide reset button + this.resetButton.style.display = "none"; + }); + } + + filterPresentations() { + let anyVisible = false; + this.cards.forEach(card => { + let showCard = true; + + // Check event filter + if (this.selectedEvent) { + const eventText = card.dataset.event || ""; + if (!eventText.includes(this.selectedEvent)) { + showCard = false; + } + } + + // Check keyword filter + if (this.selectedKeywords.size > 0) { + 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 => + cardKeywords.includes(keyword) + ); + + if (!hasMatchingKeyword) { + showCard = false; + } + } + + anyVisible = anyVisible || showCard; + // Show or hide the card + card.style.display = showCard ? "inline-block" : "none"; + }); + + this.noPresentationsFoundText.style.display = anyVisible ? "none" : "block"; + this.updateResetButtonVisibility(); + } + + updateResetButtonVisibility() { + if (this.selectedEvent || this.selectedKeywords.size > 0) { + this.resetButton.style.display = "inline-block"; + } else { + this.resetButton.style.display = "none"; + } + } +} + +document.addEventListener("DOMContentLoaded", () => { + // -- presentations page -- + + function fillBadgeColors() { + const badges = document.querySelectorAll(".tag-badge"); + badges.forEach(badge => { + const tagText = badge.textContent.trim(); + let hue = generateStringHash(tagText) % 360; + if (hue >= 60 && hue <= 140) { + hue = (hue + 80) % 360; // avoid ugly colors + } + + badge.style.backgroundColor = `hsl(${hue}, 70%, 40%)`; + badge.style.color = "#fff"; + }); + } + + fillBadgeColors(); + // do presentation filtering only if on the presentations page + if (document.querySelector(".presentation-card")) { + const filterManager = new PresentationFilterManager(); + filterManager.initialize(); + } +}); \ No newline at end of file diff --git a/presentations.html b/presentations.html new file mode 100644 index 00000000..10f408bc --- /dev/null +++ b/presentations.html @@ -0,0 +1,78 @@ +--- +layout: sub-page +bodyClass: page-presentations-list +--- + +{% include get/presentations.liquid %} + +

    Presentations

    + +
    + + + + + + + +
    + +
    + {% for presentation in presentations %} +
    +
    +
    + {% if presentation.youtube_video_id %} + {% assign presentation_image_path = "https://img.youtube.com/vi/" | append: presentation.youtube_video_id | append: "/hqdefault.jpg" %} + {% assign presentation_image_alt = presentation.title | append: " presentation thumbnail" %} + {% elsif presentation.image %} + {% assign presentation_image_path = presentation.image.path | relative_url %} + {% assign presentation_image_alt = presentation.image.alt %} + {% endif %} + + {{ presentation_image_alt }} + +

    + {{ presentation.title }} +

    + +
    + {% assign date = presentation.date | date: "%B %e" %} +

    {{ presentation.presenter }} at {{ presentation.event }}

    +

    {{ date }}

    +
    + +
    + {% for tag in presentation.keywords %} + {{ tag }} + {% endfor %} +
    +

    {{ presentation.description }}

    +
    +
    +
    + {% endfor %} +
    + +