Accessing URL keywords from HTML

[miltondp]

Hi all! I'm a happy lab-website-template user. I have a question: this is my Research section on the lab's webpage: https://pivlab.org/research/. It has three sections, the first one is "Integration of genetic studies with gene co-expression patterns" and then two more, and a list of papers at the bottom. If I click on one lab's member button to search for his/her articles (link at the end of a member's profile page), those sections obviously still appear. This is an example of what you see if you click on that link in a member's profile page.

My question is: is there a way to capture in the HTML whether the "search" argument is present in the URL? If so, I would use that to hide those sections when a search query is present.

[vincerubinetti]

There's a few things you could do for this:

In _layouts/member.html, modify the search parameter to end with #all. That way, clicking the "Show Marc's Papers" button will not only filter by that name, it will jump the user down to that section automatically. This might even be the preferred solution here, since maybe someone would want to read those top sections after looking at the filtered citations.

In _layouts/member.html, instead of linking to the research page with the filter, just display all of that person's citations right their on their own bio page. For the Greene lab, we actually did this for Casey's bio specifically, but you could do it generically for every member if you wanted. If you want to do it this way, let me know and I can help. The best way to do it would probably be to loop through the aliases passed into each member.html, and construct a set of list component filters like authors: Marc Subirana, authors: M. Subirana, authors: M. S..

In your research.md page, you could add this following simple script to hide the first 2 sections whenever a ?search=something param is in the url. I haven't tested this but I think it should work:

<script>
  if (new URL(window.location).searchParams.get("search")) {
    Array.from(document.querySelectorAll("main > section"))
      .slice(0, 2)
      .forEach((section) => (section.style.display = "none"));
  }
</script>

[vincerubinetti]

For a while, I've been considering moving the template away from Jekyll and towards a more modern web framework like Astro (well, more like making a replacement/successor for it than moving to it). This is an example of where something like Astro would be way more flexible and readable than the kludgy way you have to do it with Jekyll, above.

[miltondp]

Thank you so much, Vince. I used the first approach and it seems to work.