Skip to content

README.md

Latest commit

 

History

History
265 lines (208 loc) · 7.75 KB

README.md

File metadata and controls

265 lines (208 loc) · 7.75 KB

MPS Lab @ ASU — Website

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

Tech Stack

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

Project Structure

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

Prerequisites

  • Node.js v20+ (or Docker)

Local Development

Node.js

npm install
npm run dev

Open http://localhost:4321.

Docker

docker compose up

Open http://localhost:4321. Stop with docker compose down.

Build & Deploy

npm run build    # Type-check + static build → dist/
npm run preview  # Preview the built site locally

The site deploys as a static site to GitHub Pages.

Content Management

Members (src/content/members/)

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).

News and Awards (src/content/news/)

Manual Addition

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**."
---

Automated Scraping

Run the scraper to fetch updates from the legacy site:

python scrape_news.py

Research Areas (src/content/research/)

---
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:

![Alt Text](/images/research/figure.png)
This text becomes a styled caption under the image (no blank line above).

Resources / Reading Lists (src/content/resources/)

---
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: "..."
---

FAQ (src/content/faq/)

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://..."
---

Lab Gallery (src/content/gallery/)

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 (src/pages/teaching/)

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:

  1. Create a new .astro file inside src/pages/teaching/ (e.g. cse101.astro).
  2. Use the standard layout component: <Layout title="Course Title"> ... </Layout>.
  3. Add the course link to the master list inside src/pages/teaching.astro.
  4. Any course documents (e.g., syllabi PDF files) should be uploaded to public/assets/teaching/ and linked via /assets/teaching/filename.pdf.

Publications (src/data/publications.bib)

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.

Software Tab

Powered by src/data/software.json:

{
  "name": "Project Name",
  "url": "https://github.com/...",
  "description": "...",
  "researchGroup": "AI Compilers",
  "image": "/images/software/logo.png"
}

Sponsors (src/data/sponsors.json)

Displayed on the homepage. Scraped using scrape_sponsors.py.

{
  "name": "Agency Name",
  "logo": "/images/sponsors/logo.png",
  "url": "https://..."
}

Theming & UI

  • 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.