The official website for the Make Programming Simple (MPS) Lab at Arizona State University. Built with Astro, React, and Tailwind CSS.
Live Website: https://mpslab-asu.github.io
| Layer | Technology |
|---|---|
| Framework | Astro 5 (static output) |
| UI Components | Astro (.astro) + React Islands |
| Styling | Tailwind CSS + SCSS (light/dark themes) |
| Icons | Lucide React |
| Search | Fuse.js (fuzzy search for publications) |
| Publications | BibTeX → bibtex-parse-js |
| Markdown | marked (for FAQ) + Custom rehype-figure-caption plugin |
src/
├── components/
│ ├── astro/ # Navbar, Footer, MemberGrid
│ └── react/ # PublicationSearch, GalleryGrid, ImageLightbox, ThemeToggle
├── content/ # Astro Content Collections
│ ├── members/ # Lab member profiles
│ ├── news/ # News & announcements
│ ├── research/ # Research area pages
│ ├── resources/ # Reading lists per research area
│ ├── faq/ # Categorized FAQs (Markdown files)
│ └── gallery/ # Lab event galleries
├── data/
│ ├── publications.bib # BibTeX publication database
│ ├── software.json # Scraped software projects
│ └── sponsors.json # Scraped sponsor data
├── layouts/
│ └── Layout.astro # Base HTML layout
├── pages/
│ ├── index.astro # Home page (includes Sponsors)
│ ├── people.astro # People directory (tabbed by role)
│ ├── publications.astro # Searchable publications & Software tabs
│ ├── gallery/index.astro # Lab Gallery archive
│ ├── gallery/[...slug].astro # Event-specific photo grids (React Lightbox)
│ ├── faq.astro # Categorized accordion FAQ
│ ├── contact.astro # Contact page
│ ├── members/[...slug].astro # Individual member profiles
│ ├── research/index.astro # Research overview
│ ├── research/[...slug].astro # Individual research pages
│ ├── teaching.astro # Teaching homepage (list of courses)
│ └── teaching/ # Individual course pages (e.g. mla.astro)
└── plugins/
└── rehype-figure-caption.mjs # Image caption plugin
public/
├── images/ # Member photos, research, gallery assets, sponsor logos
├── assets/ # PDFs, manuals, and syllabi for teaching/software
└── docs/ # Resumes, documents
- Node.js v20+ (or Docker)
npm install
npm run devOpen http://localhost:4321.
docker compose upOpen http://localhost:4321. Stop with docker compose down.
npm run build # Type-check + static build → dist/
npm run preview # Preview the built site locallyThe site deploys as a static site to GitHub Pages.
Each .md file represents a lab member.
---
name: "Jane Doe"
role: "Ph.D." # Faculty | Ph.D. | Masters | Undergraduate | Postdoc | Alumni | Visiting Student | Visiting Faculty
joinDate: "2023"
image: "/images/members/jane-doe.jpg"
email: "jdoe@asu.edu" # optional
website: "https://..." # optional
github: "https://github.com/..." # optional
linkedin: "https://..." # optional
resume: "/docs/resumes/..." # optional
researchInterests: ["Topic A", "Topic B"] # optional
isAlumni: false # optional
currentPosition: "..." # optional (for alumni)
---
Bio text goes here (markdown supported).Create a new .md file in src/content/news/.
---
date: "2024" # Can be a full date (YYYY-MM-DD) or just the year
type: "Publication" # Award | Publication | Event | Announcement | General
description: "A concise description of the news. Supports **Markdown**."
---Run the scraper to fetch updates from the legacy site:
python scrape_news.py---
title: "Research Area Name"
status: "Active" # Active | Extended
description: "One-line summary."
image: "/images/research/hero.jpg" # optional banner
icon: "Cpu" # Lucide icon name
order: 1 # display order
---
Markdown content. Supports images with captions:
This text becomes a styled caption under the image (no blank line above).---
researchArea: "Intelligent Transportation Systems" # must match research title exactly
resources:
- title: "Paper Title"
type: "Paper" # Paper | Book | Video | Tutorial | Tool | Publication
url: "https://..."
authors: "Authors"
description: "..."
---FAQs are managed via markdown files in the faq collection.
---
category: "General" # Group name
icon: "💡" # Category emoji
order: 1 # Display order
items:
- question: "How do I X?"
answer: "Full answer supporting **markdown**."
externalLink: "" # Optional direct link
- question: "Link to service"
answer: ""
externalLink: "https://..."
---Showcases photos from lab events.
---
title: "Lab Social 2024"
description: "Brief summary of the event."
date: 2024-03-20
coverImage: "/images/gallery/lab-social-2024/social_1.png"
images:
- "/images/gallery/lab-social-2024/social_1.png"
- "/images/gallery/lab-social-2024/social_2.png"
location: "Tempe, AZ"
---
Optional detailed description of the event.Teaching courses are maintained as distinct Astro pages rather than a content collection, to allow completely custom layouts and styling per course syllabus.
To add a new course:
- Create a new
.astrofile insidesrc/pages/teaching/(e.g.cse101.astro). - Use the standard layout component:
<Layout title="Course Title"> ... </Layout>. - Add the course link to the master list inside
src/pages/teaching.astro. - Any course documents (e.g., syllabi PDF files) should be uploaded to
public/assets/teaching/and linked via/assets/teaching/filename.pdf.
Managed in a BibTeX file. Key fields:
research— Comma-separated tags matching research titles.category— Conference, Article, Patent, etc.website/code— Optional deep links.url— Paper/Slides links. Format:http://link.com/p.pdf, pdf http://link.com/s.ppt, slides.
Powered by src/data/software.json:
{
"name": "Project Name",
"url": "https://github.com/...",
"description": "...",
"researchGroup": "AI Compilers",
"image": "/images/software/logo.png"
}Displayed on the homepage. Scraped using scrape_sponsors.py.
{
"name": "Agency Name",
"logo": "/images/sponsors/logo.png",
"url": "https://..."
}- Light/Dark Mode: Persisted theme switch via
ThemeToggle. - Interactive Gallery: Immersive lightbox experience powered by
ImageLightbox.tsx(React). - Markdown Rendering: Answers in FAQ use
marked. Research pages use Astro dynamic rendering.