add sorting by the supervisor

Author: co-dan

_includes/project-list.html

@@ -15,13 +15,18 @@
       {% if availability_value == false or availability_value == 0 or availability_value == nil %}
         {% assign is_unavailable = true %}
       {% endif %}
-      <li class="project-card{% if is_unavailable %} is-unavailable{% endif %}" id="{{ project_id }}" data-tags="{{ normalized_tags }}"{% if is_unavailable %} aria-disabled="true"{% endif %}>
+      {% assign supervisor_name = '' %}
+      {% if project.supervisor and project.supervisor.name %}
+        {% assign supervisor_name = project.supervisor.name | strip %}
+      {% endif %}
+      {% assign normalized_supervisor = supervisor_name | downcase %}
+      <li class="project-card{% if is_unavailable %} is-unavailable{% endif %}" id="{{ project_id }}" data-tags="{{ normalized_tags }}" data-supervisor="{{ normalized_supervisor }}"{% if is_unavailable %} aria-disabled="true"{% endif %}>
         <div class="project-card__header">
           <h2>{{ project.title }}</h2>
           {% if project.supervisor %}
             <p class="project-card__supervisor">
               <strong>Supervisor:</strong>
-              {{ project.supervisor.name }}
+              <a href="#" class="project-card__supervisor-link" data-supervisor="{{ normalized_supervisor }}" data-supervisor-control data-scroll-to-filter="true">{{ project.supervisor.name }}</a>
               {% if project.supervisor.email %}
                 · <a href="mailto:{{ project.supervisor.email }}">{{ project.supervisor.email }}</a>
               {% endif %}

_includes/project-section.html

@@ -19,17 +19,34 @@
   {% assign tag_list = normalized_tags | split: ',' | uniq | sort %}
 {% endif %}
 
+{% assign flattened_supervisors = projects | map: 'supervisor' | compact %}
+{% assign supervisor_names = '' %}
+{% for supervisor in flattened_supervisors %}
+  {% assign supervisor_name = supervisor.name | strip %}
+  {% if supervisor_name != '' %}
+    {% if supervisor_names == '' %}
+      {% assign supervisor_names = supervisor_name %}
+    {% else %}
+      {% assign supervisor_names = supervisor_names | append: ',' | append: supervisor_name %}
+    {% endif %}
+  {% endif %}
+{% endfor %}
+{% assign supervisor_list = '' %}
+{% if supervisor_names != '' %}
+  {% assign supervisor_list = supervisor_names | split: ',' | uniq | sort_natural %}
+{% endif %}
+
 <section class="project-section" data-project-section>
   <div class="project-section__header">
     {% if include.heading %}
       <h2 class="project-section__title">{{ include.heading }}</h2>
     {% endif %}
-    <p class="muted project-section__intro">Narrow the projects down using the tags below.</p>
+    <p class="muted project-section__intro">Narrow the projects down by supervisor or tag.</p>
   </div>
 
 {% if tag_list != '' and tag_list != empty %}
     <div class="tag-filter" data-tag-filter>
-      <button type="button" class="tag-filter__btn is-active" data-tag="all" data-filter-control>All</button>
+      <button type="button" class="tag-filter__btn is-active" data-tag="all" data-filter-control>All tags</button>
       {% for tag in tag_list %}
         {% if tag != '' %}
           <button type="button" class="tag-filter__btn" data-tag="{{ tag }}" data-filter-control>{{ tag }}</button>
@@ -38,9 +55,20 @@ <h2 class="project-section__title">{{ include.heading }}</h2>
     </div>
 {% endif %}
 
-  {% if has_projects %}
-    {% include project-list.html projects=projects %}
-  {% else %}
-    <p>No projects are listed yet. Check back soon!</p>
-  {% endif %}
+{% if supervisor_list != '' and supervisor_list != empty %}
+    <div class="tag-filter" data-supervisor-filter>
+      <a href="#" class="tag-filter__btn is-active" data-supervisor="all" data-supervisor-control>All supervisors</a>
+      {% for supervisor in supervisor_list %}
+        {% if supervisor != '' %}
+          <a href="#" class="tag-filter__btn" data-supervisor="{{ supervisor | downcase }}" data-supervisor-control>{{ supervisor }}</a>
+        {% endif %}
+      {% endfor %}
+    </div>
+{% endif %}
+
+{% if has_projects %}
+  {% include project-list.html projects=projects %}
+{% else %}
+  <p>No projects are listed yet. Check back soon!</p>
+{% endif %}
 </section>

assets/css/projects.css

@@ -209,6 +209,9 @@ main {
   border-radius: 999px;
   cursor: pointer;
   font-size: 0.95rem;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
   transition: all 0.2s ease;
 }
 
@@ -292,11 +295,16 @@ main {
   font-size: 0.95rem;
 }
 
+.project-card__supervisor-link a {
+  color: var(--text);
+}
+
 .project-card__supervisor a {
-  color: var(--accent);
+  color: var(--text);
   text-decoration: none;
 }
 
+
 .project-card__supervisor a:hover,
 .project-card__supervisor a:focus-visible {
   text-decoration: underline;

assets/js/tag-filter.js

@@ -3,21 +3,29 @@ const initTagFilter = () => {
 
   sections.forEach((section) => {
     const filterContainer = section.querySelector("[data-tag-filter]");
+    const supervisorFilterContainer = section.querySelector("[data-supervisor-filter]");
     const cards = Array.from(section.querySelectorAll(".project-card"));
 
     if (!cards.length) return;
 
     let activeTag = "all";
+    let activeSupervisor = "all";
 
-    const captureButtons = () =>
+    const captureTagButtons = () =>
       Array.from(section.querySelectorAll("[data-tag][data-filter-control]"));
+    const captureSupervisorButtons = () =>
+      Array.from(section.querySelectorAll("[data-supervisor][data-supervisor-control]"));
 
-    const setActiveButtonState = (tag) => {
-      captureButtons().forEach((btn) => {
-        const isFilterButton = !!btn.closest("[data-tag-filter]");
+    const setActiveButtonState = (type, value) => {
+      const buttons = type === "supervisor" ? captureSupervisorButtons() : captureTagButtons();
+      const containerSelector = type === "supervisor" ? "[data-supervisor-filter]" : "[data-tag-filter]";
+      const dataKey = type === "supervisor" ? "supervisor" : "tag";
+
+      buttons.forEach((btn) => {
+        const isFilterButton = !!btn.closest(containerSelector);
         if (!isFilterButton) return;
 
-        if (btn.dataset.tag === tag) {
+        if (btn.dataset[dataKey] === value) {
           btn.classList.add("is-active");
           btn.setAttribute("aria-pressed", "true");
         } else {
@@ -27,13 +35,17 @@ const initTagFilter = () => {
       });
     };
 
-    const applyFilter = (tag) => {
+    const applyFilter = () => {
       cards.forEach((card) => {
         const datasetTags = (card.dataset.tags || "")
           .split(",")
           .map((t) => t.trim())
           .filter(Boolean);
-        const matches = tag === "all" ? true : datasetTags.includes(tag);
+        const datasetSupervisor = (card.dataset.supervisor || "").trim();
+        const matchesTag = activeTag === "all" ? true : datasetTags.includes(activeTag);
+        const matchesSupervisor =
+          activeSupervisor === "all" ? true : datasetSupervisor === activeSupervisor;
+        const matches = matchesTag && matchesSupervisor;
         card.classList.toggle("is-hidden", !matches);
         card.setAttribute("aria-hidden", String(!matches));
       });
@@ -42,24 +54,46 @@ const initTagFilter = () => {
     const handleTagSelection = (tag, options = {}) => {
       if (!tag || tag === activeTag) return;
       activeTag = tag;
-      setActiveButtonState(tag);
-      applyFilter(tag);
+      setActiveButtonState("tag", tag);
+      applyFilter();
 
       if (filterContainer && options.scrollToFilter) {
         filterContainer.scrollIntoView({ behavior: "smooth", block: "start" });
       }
     };
 
-    captureButtons().forEach((button) => {
-      button.addEventListener("click", () => {
+    const handleSupervisorSelection = (supervisor, options = {}) => {
+      if (!supervisor || supervisor === activeSupervisor) return;
+      activeSupervisor = supervisor;
+      setActiveButtonState("supervisor", supervisor);
+      applyFilter();
+
+      if (supervisorFilterContainer && options.scrollToFilter) {
+        supervisorFilterContainer.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    };
+
+    captureTagButtons().forEach((button) => {
+      button.addEventListener("click", (event) => {
+        event.preventDefault();
         handleTagSelection(button.dataset.tag, {
           scrollToFilter: button.dataset.scrollToFilter === "true",
         });
       });
     });
 
-    setActiveButtonState(activeTag);
-    applyFilter(activeTag);
+    captureSupervisorButtons().forEach((button) => {
+      button.addEventListener("click", (event) => {
+        event.preventDefault();
+        handleSupervisorSelection(button.dataset.supervisor, {
+          scrollToFilter: button.dataset.scrollToFilter === "true",
+        });
+      });
+    });
+
+    setActiveButtonState("tag", activeTag);
+    setActiveButtonState("supervisor", activeSupervisor);
+    applyFilter();
   });
 };