Rct225 search fellows (#2495)

* Search functionality for fellows page

* updating head.html to allow fellow page to include javascript for search

* Javascript to provide search on fellows pages

* Adding search box and frontmatter to include search functionality

* Small tweak to old fellows project to add a project_title

* style: pre-commit fixes

* drop the ".json" suffix, add permalink to have json in proper spot and layout: null to avoid layout from jekyll

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: rct225

_fellows/2019/RaghavKansal.md

@@ -12,6 +12,7 @@ photo: /assets/images/team/fellows-2019/Raghav-Kansal.jpg
 institution: University of California, San Diego
 e-mail: NoEmailYet
 focus-area: ia
+project_title: Fast HGCAL Simulation with Graph Network
 project_goal: >
   High granular calorimeters will be the biggest novelty of the CMS Phase II upgrade
   and, in general, for the next generation of collider experiments. This kind of detectors

_includes/head.html

@@ -27,6 +27,10 @@
     {% if page.layout == "focus-area" or page.mermaid %}
       <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js" integrity="sha384-6qzFcd+IG/OgXej451KTI/pbrex++8tdIfKsNF+gDVx1gfkmIG7z+uIIspvxAP7u" crossorigin="anonymous"></script>
     {% endif %}
+    {% if page.minisearch %}
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/index.min.js" integrity="sha384-IniM+QBDckT3t/xRvZUiUyns2i4VQ1OFdqa5l/YN7RBCzb/BtLOoN6PDsAuACzRP" crossorigin="anonymous"></script>
+      <script src="{{ '/assets/js/search_fellows.js' | append: site.github.build_revision | relative_url }}" integrity="sha384-W3Rovhs48ZFf1GPh9ckF2J9PRIljwtbrsnmxSwkjRWlItwFfpdLpRPtGOW/9eJ0+"></script>
+    {% endif %}
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-127196353-1"></script>

assets/js/search_fellows.js

@@ -0,0 +1,90 @@
+const ERROR_ELEMENT_ID = "error-message";
+
+function displayErrorMessage(message) {
+  const errorElement = document.getElementById(ERROR_ELEMENT_ID);
+  if (errorElement) {
+    errorElement.textContent = message;
+    errorElement.style.display = "block";
+  }
+}
+
+async function getLiveData() {
+  try {
+    const response = await fetch("../../fellows_search.json", { mode: "cors" });
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    return await response.json();
+  } catch (error) {
+    console.error("Error fetching or processing data:", error);
+    displayErrorMessage("Failed to load data. Please try again later.");
+    return null;
+  }
+}
+
+async function main() {
+  const data = await getLiveData();
+  if (!data) return;
+
+  const input = document.querySelector("input[type=search]");
+  const container = document.createElement("div");
+  container.id = "search-results";
+  input.after(container);
+
+  const miniSearch = new MiniSearch({
+    fields: ["name", "projects"],
+    extractField: (doc, field) =>
+      field === "projects"
+        ? doc.projects.map((p) => p.name).join(" ")
+        : doc[field],
+  });
+  miniSearch.addAll(data);
+
+  input.addEventListener("input", (event) => {
+    const query = event.target.value;
+    const results = miniSearch.search(query);
+    const findings = results.map((result) => {
+      const entry = data.find((e) => e.id === result.id);
+      return {
+        id: entry.id,
+        name: entry.name,
+        url: entry.url,
+        projects: entry.projects,
+      };
+    });
+
+    const list = document.createElement("ul");
+    findings.forEach((finding) => {
+      const item = document.createElement("li");
+      const link = document.createElement("a");
+      const dl = document.createElement("dl");
+      finding.projects.forEach((project) => {
+        const projectNameDt = document.createElement("dt");
+        projectNameDt.appendChild(document.createTextNode("Project:"));
+        const projectNameDd = document.createElement("dd");
+        projectNameDd.appendChild(document.createTextNode(project.name));
+        const projectMentorDt = document.createElement("dt");
+        projectMentorDt.appendChild(document.createTextNode("Mentor(s):"));
+        const projectMentorDd = document.createElement("dd");
+        projectMentorDd.appendChild(
+          document.createTextNode(project.mentors.join(", ")),
+        );
+        dl.appendChild(projectNameDt);
+        dl.appendChild(projectNameDd);
+        dl.appendChild(projectMentorDt);
+        dl.appendChild(projectMentorDd);
+      });
+
+      link.setAttribute("href", finding.url);
+      link.appendChild(document.createTextNode(finding.name));
+      item.appendChild(link);
+      item.appendChild(dl);
+      list.append(item);
+    });
+
+    container.replaceChildren(list);
+  });
+}
+
+main().catch((error) => {
+  console.error("Error loading data:", error);
+  displayErrorMessage("Failed to load data. Please try again later.");
+});

fellows_search

@@ -0,0 +1,39 @@
+---
+permalink: /fellows_search.json
+layout: null
+---
+[
+  {% assign id = 0 %}
+  {% for post in site.fellows %}
+    {% assign id = id | plus: 1 %}
+    {
+      "id"      : {{ id }},
+      "name"    : "{{ post.fellow-name }}",
+      "url"      : "{{ site.url }}{{ post.permalink }}",
+      "projects" : [
+        {% if post.projects.size > 0 %}
+            {% for project in post.projects %}
+                {
+                    "name" : "{{ project.project_title | strip }}",
+                    "mentors"  : [
+                    {% for mentor in project.mentors %}
+                        "{{ mentor }}"{% unless forloop.last %},{% endunless %}
+                    {% endfor %}
+                    ]
+                } {% unless forloop.last %},{% endunless %}
+            {% endfor %}
+        {% else %}
+            {
+                "name" : "{{ post.project_title | strip }}",
+                "mentors"  : [
+                    {% for mentor in post.mentors %}
+                        "{{ mentor }}"{% unless forloop.last %},{% endunless %}
+                    {% endfor %}
+                ]
+            }
+        {% endif %}
+      ]
+    } {% unless forloop.last %},{% endunless %}
+
+  {% endfor %}
+]

pages/fellows.md

@@ -2,6 +2,7 @@
 permalink: /fellows.html
 layout: default
 title: IRIS/HEP Fellows Program
+minisearch: true
 ---
 
 # IRIS-HEP Fellows Program
@@ -27,6 +28,10 @@ We are preparing to announce the opening for the [2025 Fellows program](/fellows
 
  The directions for adding a project can be found in the repository.
 
+## Search for Fellows or Projects:
+<!-- <label for="site-search">Search for Fellows or Projects:</label> -->
+<input type="search" id="site-search" name="q" />
+
 {% assign fellows = site.fellows | last_name_sort: "fellow-name"
                                  | reverse
                                  | iris_hep_fellow_sort