Welcome to the Serre Lab site repository! This document explains the structure of the site and how to update content like people, research, resources, and publications.
For future editors of the code:
<Title order={1}>is for main page titles<Title order={2}>is for section titles<Title order={3}>is for subsection titles<Text>is for paragraph text
- Framework: React (with Vite)
- UI Library: Mantine UI
- Routing: React Router (Hash Router)
- Styling: CSS Modules + Global CSS
- Animation: Framer Motion
- Icons: React Icons (Font Awesome)
- Data Source: JSON files
- Markdown: React Markdown (for dynamic pages)
src/
├── components/
│ ├── Person/Person.tsx # Person card + modal
│ ├── ResearchProject/ # Research project component
│ ├── LearnMoreAbout/Learn.tsx
│ ├── Header/Header.tsx # Navigation header
│ ├── Footer/Footer.tsx # Site footer
│ └── MarkdownPage/ # Dynamic markdown pages
├── data/
│ ├── people.json # List of lab members
│ ├── alumni.json # List of alumni
│ ├── research.json # Research projects
│ ├── resources.json # Resources and tools
│ ├── scicomm.json # Media and talks
│ ├── publications_by_year.json # Publications grouped by year
│ └── officialPublicationUrls.js # Publication URL mappings
├── pages/
│ ├── Home/Home.tsx # Homepage
│ ├── People/People.tsx # People page
│ ├── Research/Research.tsx # Research page
│ ├── Resources/Resources.tsx # Resources page
│ ├── Publications/Publications.jsx # Publications page
│ ├── SciComm/SciComm.tsx # Media page
│ └── Datasets/ # Dataset pages (HMDB51, Breakfast)
├── markdown-pages/
│ └── resources/ # Dynamic markdown content
└── styles/
├── typography.css # Global typography
└── index.css # Global styles
-
File:
src/data/people.json -
Required fields:
fullName: Person's full nametitle: Job title (see valid options below)university: Either"Brown"or"ANITI"description: Bio or descriptionimagePath: Path to headshot imagewebsite: Personal website URL (optional)
-
Valid title options:
"Principal Investigator""Assistant Professor of Research""PostDoc""Grad student""Research Assistant""Undergraduate student"
-
Format:
{
"people": [
{
"fullName": "First Last",
"title": "Grad student",
"university": "Brown",
"description": "Short bio or research interests.",
"imagePath": "/people/firstlast.jpg",
"website": "https://firstlast.com"
}
]
}- Alumni: Edit
src/data/alumni.jsonfor former lab members - Layout: People are grouped by university and title, sorted alphabetically within groups
- Recommended size: 400x400 to 600x600 pixels (square)
- Aspect ratio: 1:1 (square)
- Resolution: 72–150 dpi (web)
- File size: Under 200 KB for fast loading
- Format: JPG or PNG
- Location: Save in
public/people/directory - Naming: Use lowercase with hyphens (e.g.,
first-last.jpg)
- File:
src/data/research.json - Format:
{
"researchProjects": [
{
"title": "Project Name",
"years": "2021–2024",
"fundingSource": "NSF / NIH",
"description": [
"First paragraph about the project...",
"Second paragraph with more details..."
]
}
]
}- File:
src/data/resources.json - Structure: Organized by category and subcategory
- Format:
{
"Resources": {
"Datasets": [
{
"title": "Dataset Name",
"url": "https://example.com"
}
],
"Demos and Tutorials": [
{
"title": "Demo Name",
"url": "https://demo.com"
}
],
"Tools & Software": [
{
"title": "Tool Name",
"url": "https://tool.com"
}
],
"Videos & Talks": [
{
"title": "Talk Title",
"url": "https://youtube.com/watch?v=..."
}
]
}
}- Categories: Datasets, Demos and Tutorials, Tools & Software, Videos & Talks, Cognitive Benchmark Tests
- Internal links: Use paths like
/hmdb51for internal pages - External links: Use full URLs for external resources
- File:
src/data/publications_by_year.json - Structure: Grouped by year with special categories
- Format:
{
"2024": [
{
"title": "Paper Title",
"authors": "Author1, Author2 & LastAuthor",
"journal": "Journal Name",
"url": "https://doi.org/...",
"pdfPath": "/papers/paper-title-2024.pdf"
}
],
"Work in progress": [
{
"title": "Preprint Title",
"authors": "Author1 & Author2",
"journal": "arXiv",
"url": "https://arxiv.org/abs/...",
"pdfPath": "/papers/preprint-2024.pdf"
}
],
"In press": [
{
"title": "Accepted Paper",
"authors": "Author1 & Author2",
"journal": "Journal Name",
"url": "https://journal.com/..."
}
],
"Before 2010": [
{
"title": "Old Paper",
"authors": "Author1 & Author2",
"journal": "Journal Name",
"url": "https://doi.org/..."
}
]
}- Author formatting: Use "&" before the last author (e.g., "Author1, Author2 & LastAuthor")
- PDF icons: Add
pdfPathfield to show PDF download icon - Special categories:
"Work in progress": Preprints and work in progress"In press": Accepted papers not yet published"Before 2010": All papers from 2009 and earlier
- Search: Publications are searchable by title, author, or journal
- Filtering: Can filter by year or special category
- File:
src/data/scicomm.json - Structure: Similar to resources, organized by category
- Format:
{
"Media": {
"Videos & Talks": [
{
"title": "Talk Title",
"url": "https://youtube.com/watch?v=..."
}
],
"Podcasts": [
{
"title": "Podcast Episode",
"url": "https://podcast.com/episode"
}
]
}
}- Location:
src/pages/Datasets/ - Current pages:
HMDB51.tsx- HMDB51 dataset pageBreakfastDataset.tsx- Breakfast Actions dataset page
- Styling: Use
DatasetPage.cssfor consistent styling - Routing: Add routes in
src/App.tsx
- Location:
src/markdown-pages/resources/ - Format: Create
.mdfiles for new pages - Routing: Automatically added to navigation
- Styling: Uses
MarkdownPage.cssfor consistent formatting
- Add headshot to
public/people/ - Edit
src/data/people.jsonorsrc/data/alumni.json - Follow the JSON format above
- Download PDF to
public/papers/(optional) - Edit
src/data/publications_by_year.json - Add
pdfPathfield if you have a local PDF - Use correct author formatting with "&"
- Edit
src/data/resources.json - Choose appropriate category
- Use internal paths for site pages, full URLs for external
- Edit
src/data/scicomm.json - Use appropriate category
- YouTube URLs work best for video previews
⚠️ Important: Always validate your JSON syntax (check for commas, braces, quotes)
npm install # Install dependencies
npm run dev # Start development server
# Visit http://localhost:5173git add -A
git commit -m "meaningful commit message"
git push
npm run deploy # Deploy to production- Images: Save in
public/directory - PDFs: Save in
public/papers/directory - Data: Edit JSON files in
src/data/ - Styling: Edit CSS files in respective page directories
- Consistent spacing: Use standardized margins and padding
- Typography: Follow the typography hierarchy (Title order 1-3, Text)
- Colors: Use CSS variables defined in
src/index.css - Responsive: All pages should work on mobile and desktop
- Accessibility: Use semantic HTML and proper contrast ratios
- CMS Integration: Consider using a headless CMS for non-technical editing
- Image Upload: Add drag-and-drop image upload functionality
- Publication Sync: Automate publication syncing from BibTeX or ORCID
- Search Enhancement: Add full-text search across all content
- Analytics: Add usage analytics and publication metrics
For questions about editing the website:
- Check this README first
- Look at existing examples in the JSON files
- Contact the development team
Happy editing! 🧠✨