Hello, I am Trevor Fox, the wiki team lead for the 2023 UBC-Okanagan iGEM team. Having previously participated in the 2022 iGEM competition (as the wet lab team lead), part of my job was not only to contribute content to the wiki, but to build a large part of it as well. During this experience, I learned a lot about how to navigate the iGEM wiki ecosystem. As I acted as an interface between scientists and web developers, I came away with some key learnings:
I knew that there had to be a better way to make wiki development easier for people who do not have the time in their busy schedule to learn the intricacies of HTML, and to keep bad scripting out of the hair of the wiki team at the same time. Looking at web frameworks, a lot of them are highly complex - React, Preact, and Vue, to name a few. Then I discovered Astro, an almost-brand-new framework coming from the creator of Snowpack.
This is my pitch to you, the wiki writer: use Astro, Tailwind, and a bit of React to build a beautiful wiki experience.
As important as it has ever been, scientific communication is a burgeoning topic on the internet. Whether it is beautifully crafted YouTube videos about your favourite scientific topic, or wonderful graphical abstracts, the ability to clearly describe science and engage the audience is paramount. This is why I believe that beautiful iGEM wikis do more for the field of synthetic biology than you think.
For many of us, the venture of an iGEM project means doing something that means something to the world around you. When people want to know more about how you are making their lives better, presentation plays a large role! Poorly documented code is never used, poorly written papers are seldom accepted, genetic libraries with old UIs are frustratedly navigated.
Directly from the Astro documentation:
I would like to focus on #1 and #4. Astro is designed to be able to quickly build blogs - static websites full of content. Sound familiar? That’s a wiki! Not only that, as is the blog you are reading right now, content can easily be authored in Markdown. Markdown is a much more human-readable and understandable syntax for writing documents while keeping the ability to write styles - much like Microsoft Word or Google Docs. Alongside this, Markdown can be transpiled. A transpiler is a type of translator that takes source code written in one programming language and produces an equivalent source code in the same or different programming language) directly into HTML; Astro does this by default. With the introduction of a system called “Content Collections” in Astro 3.0.0, compiling multiple Markdown files into one well-composed web page is extremely simple. Now, for an iGEMer to change the wiki, they don’t have to look at a single HTML <tag />. They just need to get a markdown editor such as this one and edit away.
For the web developer, Astro as a static site generator (the primary requirement of an iGEM wiki web framework) is very simple and well documented. For those in the know, it boasts features such as file-based routing, dynamic routing, image optimization, and other forms of Markdown such as MDX and ReMark. I highly suggest reading the documentation to learn more. It also supports TypeScript, if that’s up your alley. You can read my post here to learn more about how Astro works at the code level, and what you need to do to make it work with iGEM’s GitLab Pages hosting.
Astro has integrations created by both the community and the Astro maintainers. One such integration is Tailwind. While this post isn’t about Tailwind, I think that it is a much easier way for CSS management due to its bundling tactic. However, scoped CSS or global CSS are both supported very well in Astro - same with scripting in JS. Furthermore, CSS pre-processors such as PostCSS and SCSS/SASS are also supported natively as integrations.
Wiki writing is already a stressful activity for iGEMers across the world. I would assume that the number of teams with an efficient, robust wiki writing agenda are slim to none. However, lots of teams in the past have demonstrated that an exceptionally beautiful wiki is possible! Astro has helped our team in its content creation by providing greater ease of access to the codebase for every member of the team. This spreads the load of wiki development a bit more around the members. It also spawns the opportunity to innovate using that newfound free time. For example, I implemented an automatic ACS citation machine - something I longed for in 2022.
Moreover, as Astro works by “Island Architecture”, developers who develop in other UI frameworks such as React or Vue can also use their skills in application. For example, the top navigation bar was originally written by me in pure Tailwind/HTML. When we recruited a computer science student to help us, he applied his knowledge in React to make the current one.
Last, as it integrates well with React, it is very easy to incorporate games or tools built on the React ecosystem. One such example of this is the DNA CALCULATOR which is available on our wiki as a tool for other iGEMers to use in a pinch. This tool is built and can be ported as a standalone React application as it manages 100% of its own state and context.
Astro as a static site generator, templating and HTML rendering engine, and dynamic content delivery framework is perfect for the production of an iGEM wiki. It has greatly improved my experience as a wiki developer, and expanded my horizons. I believe that, at least for my team, Astro as a wiki tool will continue to be the go-to SSG.
Please feel free to contact me via email at trevfox14 [at] gmail [dot] com where I will provide you with my other social platforms for further discussion.