From aca2d23d4e5bbb12ae912f09702ac21fe10b6707 Mon Sep 17 00:00:00 2001 From: Cassidy Williams <1454517+cassidoo@users.noreply.github.com> Date: Fri, 10 Apr 2026 09:42:52 -0500 Subject: [PATCH] Add Maintainers in Academia page --- common/academia.js | 73 ++++++ components/academia/academia.scss | 218 ++++++++++++++++++ .../open-biome-maintainer-spotlight.md | 59 +++++ pages/academia.js | 100 ++++++++ pages/academia/[slug].js | 154 +++++++++++++ styles/reset.scss | 1 + styles/styles.scss | 1 + 7 files changed, 606 insertions(+) create mode 100644 common/academia.js create mode 100644 components/academia/academia.scss create mode 100644 content/academia/open-biome-maintainer-spotlight.md create mode 100644 pages/academia.js create mode 100644 pages/academia/[slug].js diff --git a/common/academia.js b/common/academia.js new file mode 100644 index 000000000..c6a7306e0 --- /dev/null +++ b/common/academia.js @@ -0,0 +1,73 @@ +import fs from 'fs' +import path from 'path' +import matter from 'gray-matter' +import { marked } from 'marked' + +const ACADEMIA_DIRECTORY = path.join(process.cwd(), 'content', 'academia') + +const normalizeMaintainerProfiles = (maintainerProfiles = []) => { + if (Array.isArray(maintainerProfiles)) { + return maintainerProfiles.reduce( + (profiles, entry) => ({ ...profiles, ...entry }), + {}, + ) + } + + if (maintainerProfiles && typeof maintainerProfiles === 'object') { + return maintainerProfiles + } + + return {} +} + +const parsePost = ({ slug, data, content }) => ({ + slug, + name: data.name || '', + institution: data.institution || '', + department: data.department || '', + projectName: data.projectName || '', + projectRepo: data.projectRepo || '', + projectWebsite: data.projectWebsite || '', + maintainerProfiles: normalizeMaintainerProfiles(data.maintainerProfiles), + badges: Array.isArray(data.badges) ? data.badges : [], + description: data.description || '', + content, +}) + +export const getAcademiaPosts = () => { + if (!fs.existsSync(ACADEMIA_DIRECTORY)) { + return [] + } + + return fs + .readdirSync(ACADEMIA_DIRECTORY) + .filter((fileName) => fileName.endsWith('.md')) + .map((fileName) => { + const slug = fileName.replace('.md', '') + const markdown = fs.readFileSync( + path.join(ACADEMIA_DIRECTORY, fileName), + 'utf-8', + ) + const { data, content } = matter(markdown) + + return parsePost({ slug, data, content }) + }) + .sort((postA, postB) => postA.projectName.localeCompare(postB.projectName)) +} + +export const getAcademiaPostBySlug = (slug) => { + const filePath = path.join(ACADEMIA_DIRECTORY, `${slug}.md`) + + if (!fs.existsSync(filePath)) { + return null + } + + const markdown = fs.readFileSync(filePath, 'utf-8') + const { data, content } = matter(markdown) + const post = parsePost({ slug, data, content }) + + return { + ...post, + htmlContent: marked(post.content), + } +} diff --git a/components/academia/academia.scss b/components/academia/academia.scss new file mode 100644 index 000000000..2a92d3f32 --- /dev/null +++ b/components/academia/academia.scss @@ -0,0 +1,218 @@ +.academia-list { + padding: spacing(7) spacing(2) 0; + + @media (min-width: $lg) { + padding-left: spacing(3); + padding-right: spacing(3); + } + + &__intro { + padding: spacing(3); + margin-bottom: spacing(2); + + h1 { + @extend %header-2; + margin-bottom: spacing(1.5); + } + + p { + @extend %body-1; + color: $white-80; + max-width: 820px; + } + } + + &__empty { + @extend %body-1; + color: $white-80; + padding: spacing(3); + border-top: 1px solid $white-50; + } + + &__item { + position: relative; + padding: spacing(3); + border-top: 1px solid $white-50; + + @extend %background-filter; + } + + &__main { + text-align: right; + + @media screen and (max-width: $xl) { + text-align: left; + } + } + + &__flex { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + + &__flex div, &__flex p { + max-width: 740px; + } + + &__title { + @extend %header-2; + margin-bottom: spacing(1); + } + + &__subtitle { + @extend %header-5; + margin-bottom: spacing(2); + } + + &__badges { + display: flex; + flex-wrap: wrap; + gap: spacing(1); + margin-bottom: spacing(2); + } + + &__description { + @extend %body-1; + color: $white-80; + margin-bottom: spacing(2.5); + } +} + +.academia-post { + max-width: 920px; + margin: spacing(6) auto; + padding: 0 spacing(2); + + @media (min-width: $md) { + padding: 0 spacing(3); + } + + @media (min-width: $lg) { + margin: spacing(8) auto spacing(10); + padding: 0 spacing(4); + } + + &__back-link { + @extend %subtitle-1; + display: inline-block; + margin-bottom: spacing(3); + + &:hover { + text-decoration: underline; + } + } + + &__title { + @extend %header-1; + margin-bottom: spacing(2); + } + + &__subtitle { + @extend %header-5; + color: $white-80; + margin-bottom: spacing(3); + } + + &__divider { + border: 0; + border-top: 1px solid $white-50; + margin: spacing(3) 0; + } + + &__meta { + margin: 0; + } + + &__meta-row { + display: grid; + grid-template-columns: 1fr; + row-gap: spacing(0.5); + margin-bottom: spacing(2); + + @media (min-width: $md) { + grid-template-columns: 180px 1fr; + column-gap: spacing(1); + align-items: baseline; + } + + dt { + @extend %subtitle-1; + color: $white; + } + + dd { + margin: 0; + @extend %body-1; + color: $white-80; + + a { + text-decoration: underline; + } + } + } + + &__badges { + display: flex; + flex-wrap: wrap; + gap: spacing(1); + } + + &__content { + @extend %markdown; + @extend %body-1; + + color: $white-80; + text-align: justify; + + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: $jetbrains; + font-weight: $regular; + color: $white; + margin: spacing(3) 0 spacing(1.5); + line-height: 1.5; + text-align: left; + } + + h1 { + font-size: 2rem; + } + + h2 { + font-size: 1.75rem; + } + + h3 { + font-size: 1.5rem; + } + + h4, + h5, + h6 { + font-size: 1.25rem; + } + + p, + li { + line-height: 1.8; + } + + a { + text-decoration: underline; + } + } + + &__footer-links { + @extend %body-1; + color: $white-80; + + a { + text-decoration: underline; + } + } +} diff --git a/content/academia/open-biome-maintainer-spotlight.md b/content/academia/open-biome-maintainer-spotlight.md new file mode 100644 index 000000000..8abad3d76 --- /dev/null +++ b/content/academia/open-biome-maintainer-spotlight.md @@ -0,0 +1,59 @@ +--- +name: Dr. Test Tester +institution: University of Test +department: Department of Test +projectName: OpenBiome Test +projectRepo: https://github.com/test +projectWebsite: https://github.com +maintainerProfiles: + - linkedin: https://www.linkedin.com/in/github/ + - github: https://github.com/ + - orcid: https://orcid.org/123456 +badges: ["Academic Maintainer", "Verified GitHub Teacher"] +description: "An open source toolkit that helps research labs standardize and analyze environmental microbiome sequencing workflows." +--- + +(everything below is fake) + +When we started OpenBiome Toolkit, the immediate goal was practical: reduce the time students and researchers spend stitching together fragile scripts for sequencing analysis. + +At first, our lab used separate notebooks and internal utilities that worked for one project, then broke for the next. As collaborators joined from other universities, the friction became obvious. Everyone had slightly different environments, file conventions, and assumptions. + +We decided to build a public, reusable toolkit instead of another private lab pipeline. That shift changed how we think about research software. + +## Why maintain in the open + +Maintaining an academic open source project means balancing publication cycles, teaching schedules, and community support. + +The open model has still been worth it for three reasons: + +1. Reproducibility improves when workflows are versioned and visible. +2. Students learn software engineering practices in real projects. +3. Cross-institution collaboration moves faster when teams share a common baseline. + +## What the project includes + +OpenBiome Toolkit currently provides: + +- Data validation commands for sequencing metadata before pipeline execution. +- Reproducible environment setup with pinned dependencies. +- Starter templates for analysis reports and figure generation. +- CI checks so new contributions do not silently change outputs. + +## Challenges we are still solving + +The hardest part is not the code; it is long-term maintenance planning. + +Academic teams naturally rotate as students graduate, and maintainers need clear handoff processes. We now require: + +- Contributor onboarding docs for every subsystem. +- Monthly triage and issue labeling. +- Release notes that explain breaking changes in plain language. + +## Advice for new academic maintainers + +Start smaller than you think. + +A focused, reliable tool that solves one painful workflow step is easier to sustain than a broad platform with unclear boundaries. Once you have users and contributors, scope can grow with real feedback. + +Open source in academia is not just about sharing code. It is about building durable research infrastructure that outlives a single grant cycle. diff --git a/pages/academia.js b/pages/academia.js new file mode 100644 index 000000000..61c0150b1 --- /dev/null +++ b/pages/academia.js @@ -0,0 +1,100 @@ +import { useEffect } from 'react' +import Head from 'next/head' + +import ButtonLink from '../components/button-link/ButtonLink' +import Chip from '../components/chip/Chip' +import { useBackground } from '../contexts/BackgroundContext' +import { getAcademiaPosts } from '../common/academia' + +export default function Academia({ posts }) { + const { setAnimationStep } = useBackground() + + useEffect(() => { + setAnimationStep(6) + }, [setAnimationStep]) + + return ( +
+ + Maintainers in Academia + + + {/* */} + + + + + {/* */} + + + + + + +
+
+

Maintainers in Academia

+

+ Maintainer stories from researchers and educators building open + source in universities and institutions around the world. +

+
+ + {posts.length === 0 ? ( +

+ No maintainer stories have been added yet. Check back soon. +

+ ) : ( + posts.map((post) => ( +
+
+
+
+

{post.projectName}

+

{post.name}

+ {post.badges?.length > 0 ? ( +
+ {post.badges.map((badge) => ( + + ))} +
+ ) : null} +
+
+

{post.description}

+ + read their maintainer story + +
+
+
+
+ )) + )} +
+
+ ) +} + +export async function getStaticProps() { + return { + props: { + posts: getAcademiaPosts(), + }, + } +} diff --git a/pages/academia/[slug].js b/pages/academia/[slug].js new file mode 100644 index 000000000..2d4259180 --- /dev/null +++ b/pages/academia/[slug].js @@ -0,0 +1,154 @@ +import Head from 'next/head' +import Link from 'next/link' + +import Chip from '../../components/chip/Chip' +import { getAcademiaPostBySlug, getAcademiaPosts } from '../../common/academia' + +const renderProjectLinks = (projectRepo, projectWebsite) => { + const links = [] + + if (projectRepo) { + links.push( + + Repo + , + ) + } + + if (projectWebsite) { + links.push( + + Website + , + ) + } + + if (links.length === 0) { + return 'N/A' + } + + return links.reduce((accumulator, link, index) => { + if (index === 0) { + return [link] + } + + return [...accumulator, ' - ', link] + }, []) +} + +export default function AcademiaPostPage({ post }) { + const pageTitle = `Maintainer Spotlight: ${post.projectName}` + + return ( + <> + + {pageTitle} + + + {/* */} + + + + + {/* */} + + + + + + +
+ + {'← return to list'} + + +

{pageTitle}

+ +

+ A conversation about building open source in academia +

+ +
+ +
+
+
Maintainer:
+
{post.name || 'N/A'}
+
+
+
Institution:
+
{post.institution || 'N/A'}
+
+
+
Department:
+
{post.department || 'N/A'}
+
+
+
Badges:
+
+ {post.badges.length > 0 ? ( +
+ {post.badges.map((badge) => ( + + ))} +
+ ) : ( + 'N/A' + )} +
+
+
+
Project links:
+
{renderProjectLinks(post.projectRepo, post.projectWebsite)}
+
+
+ +
+ +
+ +
+ +

+ {renderProjectLinks(post.projectRepo, post.projectWebsite)} +

+
+ + ) +} + +export async function getStaticPaths() { + const paths = getAcademiaPosts().map((post) => ({ + params: { slug: post.slug }, + })) + + return { + paths, + fallback: false, + } +} + +export async function getStaticProps({ params: { slug } }) { + const post = getAcademiaPostBySlug(slug) + + if (!post) { + return { + notFound: true, + } + } + + return { + props: { + post, + }, + } +} diff --git a/styles/reset.scss b/styles/reset.scss index 3675e6452..bb3dc1fd4 100644 --- a/styles/reset.scss +++ b/styles/reset.scss @@ -91,6 +91,7 @@ video { font: inherit; vertical-align: baseline; } + /* HTML5 display-role reset for older browsers */ article, aside, diff --git a/styles/styles.scss b/styles/styles.scss index df1bd4685..5c7287470 100644 --- a/styles/styles.scss +++ b/styles/styles.scss @@ -27,6 +27,7 @@ @import '../components/layout/layout'; @import '../components/library-links/library-links'; +@import '../components/academia/academia'; @import '../components/ships/ships';