<% // This is a Quarto EJS template: it turns each person's profile (every people//index.qmd) into the HTML cards shown on the "Meet the group" page, grouped under the right heading. Quarto gives it a ready-made "items" array, one entry per person found via the "contents:" setting in people/index.qmd, with whatever fields that person's YAML header defines (item.title, item.image, item.people_group...). // Three kinds of tags are used below: a code tag that runs JavaScript and prints nothing (loops, ifs, variables), a safe-print tag that prints a value as escaped text, and a raw-print tag that prints a value as-is, unescaped (used for links, image paths, or text that already contains HTML). Their real symbols can't be written here in a comment, because the template engine looks for those symbols everywhere, even inside comments — see the real tags just below for what they look like. // The groups, in the exact order they should appear. "key" must match the "people_group" value written in each person's YAML header exactly. "label" is the heading text shown on the page. "cols" is how many cards should fit per row for that group on a normal-width screen (see the ".person-card-cols-*" rules in styles.css) — groups with a lot of members (like alumni) look better with more, smaller cards. To add a new group, add a line here. const groups = [ { key: "pi", label: "Principal Investigator", cols: 3 }, { key: "research_scientist", label: "Research Scientists", cols: 3 }, { key: "postdoc", label: "Postdoctoral Fellows", cols: 3 }, { key: "phd", label: "PhD Students", cols: 3 }, { key: "visitor", label: "Visiting Researchers", cols: 3 }, { key: "student", label: "Students", cols: 3 }, { key: "alumni", label: "Alumni", cols: 5 }, ]; %>

<% for (const group of groups) { %> <% const groupItems = items.filter((item) => item.people_group === group.key); %> <% if (groupItems.length > 0) { %>

<%= group.label %>

<% for (const item of groupItems) { %> > <% if (item.image) { %> <% } %> <% // "description" often has two parts separated by a literal "
", e.g. "PhD Student
Sparse regression for genomics". // On the card we only want the first part (the role); the full text is still used elsewhere (e.g. as this page's meta description). const role = (item.description || "").split("
")[0].trim(); %>

<%= item.title %>

<%= role %>

<% if (item.education_card) { %>

<%= item.education_card %>

<% } %>

<% } %> <% } %> <% } %>