3 min read

Introducing the OMSF Directory

Written by: Ethan Holz

Over the last few months, the Ecosystem Infrastructure team built the OMSF Directory, a repository for software and workflows for the computational chemistry community. This site aims to highlight projects that exist in the OMSF and the broader community in an easily navigable way. We were deeply inspired by Awesome lists that exist on GitHub, but we wanted a few more features.

What we built

The Ecosystem Infrastructure spends a lot of time looking into the state of software in computational chemistry and we often run across lots of tools and workflows. However, we noticed that these awesome projects can be hard to find, so we wanted a simpler way for users to browse and find projects.
We also wanted it to be easy for developers to contribute their projects to the directory.

The directory holds cards with information like programming language, license, and links to the repo and docs. When we set out to build this tool, we wanted to make it very easy to filter the kinds of tools that fits the need for both academia and industry. With that in mind, license filtering is a must: making it easy for people to find permissively licensed code. In addition, we wanted to capture the programming languages used by projects to highlight the state of the ecosystem over time.

Contribution was huge part of this project from the start. We want people to contribute their projects to share with the community!

In order to achieve this, we leveraged modern web development to develop a card creation tool so that you can see how your card will look in real time. This tool generates a preview and handles validation of fields to generate a compliant YAML file that can be used for contribution. We also wanted to publish the JSON schema document used for YAML validation. This enables developers to integrate this into tools such as the yaml-language-server to provide validation right in your text editor!

Adopting a new stack

If you take a look at the repository for this site, you will find that it uses tools not currently being used by other OMSF projects. This is because we wanted to leverage modern web development tooling for theming and interactivity. We choose to use Astro, Svelte, and TailwindCSS to develop this project.

Astro is built for structured content sites, enabling us to leverage YAML to generate cards while also being simple to use for static sites. One of the defining features of Astro is its island architecture. The islands architecture basically allows for us to leverage static content for static parts and inject JavaScript frameworks for the more interactive parts. This means that you can use something like React or Svelte to handle interactive content, and we did just that.

We used Svelte to actually build the cards to be dynamic, enabling functionality like the card creation tool. While we could have done this using a tool like Hugo or Jekyll, Astro and Svelte provide lots of tooling to make development fast.

TailwindCSS enables us easily implement responsive design making mobile a first class citizen for this site. Tailwind also enabled us to codify OMSF brand guidelines into code making it easy for us to adapt this site to future branding if needed.

How Ecosystem Infrastructure could deliver

All of these changes enabled a website that is the first of its kind at the OMSF.
One of the strengths of the Ecosystem Infrastructure team is that we are able to test and adopt newer tooling to help modernize processes for OMSF-hosted projects. This website is a demonstration of this, we were able to step outside of what we might normally leverage and create something new. In doing so, we were able to highlight and extend a tool we built for OMSF projects: static-site-tools.

This repository is a set of workflows that we provided to our projects to modernize the publishing and preview of their websites. We created a standard set of ways to build popular static site tools and leverage Cloudflare for deployment and preview of these sites. These tools help us to ensure a similar (if not identical), workflow between OMSF projects when it comes to deploying and previewing websites.

It is important to highlight that an initiative like this might not have been done by any of the projects individually, but is something that the Ecosystem Infrastructure team could rapidly implement and provide immediate value to our projects. This team aims to fill the gaps that happen for all of our projects and while static-site-tools was developed with them in mind. It is the commitment to reusability that we were able to leverage this tool for our own needs in this project.

Where do we go from here?

As of today, this site is ready for you to browse and contribute! Take a look at what we already have and if something is missing, feel freed to add it. We would love for you to open a pull request and share your tool, library, or workflow with us! For students who might not have submitted a pull request before, this is an excellent way to learn the process.

Have any thoughts on how we can improve? Please let us know on social media or in our GitHub issues and we look forward to seeing what you add!