Purpose and Goal
The original proposal for the site was developed by software engineers at the Howard Hughes Medical Institute’s Janelia Research Campus (referred to here as "Janelia") who wanted to make open source software developed at Janelia more easily discoverable for both internal and external scientific audiences.
Core requirements
1. Open source the site content - any Janelia software developer or collaborator should be able to edit the site via a GitHub pull request.
2. Support exploration of the software catalogue – include functionality for filtering by one or more tags and a keyword search that can be optionally combined with filters.
3. Convey Janelia’s technical excellence with a modern website design.
Spotlight: Filtering the project card display by one or more tags
Implementing this core feature required overcoming several technical hurdles:
Astro islands and state management
AstroJS strips the JavaScript out of all components of the site except for “island” components. This means the parent of React island components, like my interactive filter menu and project cards, does not have access to the React framework library to use state management hooks. To overcome this, I initially made the project cards and filter menu both children of one giant React component rendered on the projects route layout. This allowed me to manage state with the familiar useState hook. However, it also resulted in a prop-drilling and hid the specifics of the route layout behind one component. I ultimately refactored the layout to make the filter menu and project cards direct children components of the static projects route. This meant implementing the Nano Stores library, recommended by Astro, for state management.
Linting of tags via GitHub actions
Due to the site being open source, I needed to add a means of ensuring all the tags added by contributors matched those allowed on the site. I decided to add a GitHub action to automate this process and ensure higher accuracy than human review. When a pull request is opened against the main branch of the site, the action checks for any modified Markdown files and then lints the tag categories included in the file frontmatter. If invalid tags are found, the action returns a message to the pull request with the invalid tags and in which files they were found. The developer can then push changes to the pull request prior to it being accepted for merging.
I accessed the Recipe Schema Markup through two steps: first, using Axios to fetch the HTML document
for the URL provided by the user. Then, I used a package called Cheerio to parse the document,
returning only the Recipe Schema Markup, which is contaned within a script tag of
type="application/ld+json". JSON-LD is the format for schema markup preferred by
Google.
Once I extracted the Recipe Schema Markup from the HTML document, since the format is JSON-LD, I could parse it with JSON.parse() and then access the data as I would for any other JSON data. I first found the object that contained the recipe data I was interested in, and then used key names to access the values of different properties (e.g., ingredients, instructions) in the object. These data could then be added to the app database as a recipe, just like the manually inputted recipe data.
Current status
The site is currently deployed as the home page for the Janelia Open Source Science Initiative (OSSI) Users have shared positive feedback, for example stating that the site "is both beautiful and so useful."
