This is the website for the MacCoss Lab at the University of Washington. It can be viewed at: https://uw-maccosslab.github.io/ and https://maccosslab.org
This website is built using Jekyll with the Minima theme and hosted on GitHub Pages. It features responsive design, tabbed navigation, RSS feeds, and organized content management.
├── _config.yml # Jekyll configuration
├── _layouts/
│ ├── default.html # Custom layout with consistent width
│ └── post.html # Blog post template
├── _posts/ # News/blog posts for RSS feed
│ ├── 2024-XX-XX-title.md # Individual news posts
├── assets/
│ ├── main.scss # Custom styling and responsive design
│ └── images/
│ ├── logos/ # All software/lab logos
│ ├── instruments/ # Mass spectrometer photos
│ ├── people/ # Lab member photos
│ └── *.jpg # General photos (lab photo, etc.)
├── pages/ # Main site pages
│ ├── contact.md
│ ├── funding.md # Tabbed funding sources
│ ├── news.md # News/blog listing with RSS
│ ├── people.md # Lab members with tabs
│ ├── positions.md
│ ├── publications.md
│ └── resources.md # Tabbed resources (instruments, software, etc.)
└── index.md # Homepage
- Main content: 1400px max-width on large screens
- Responsive: Full width on mobile (≤800px)
- Consistent alignment: Header, content, and footer all use same width
- Implementation: Custom
_layouts/default.html+ CSS inassets/main.scss
/* Large screens */
.page-content .wrapper { max-width: 1400px; }
/* Mobile screens (≤768px) */
@media (max-width: 768px) {
.page-content .wrapper { max-width: 100%; padding: 0 15px; }
}Multiple pages use JavaScript-powered tabbed interfaces:
- Resources: Instrumentation, Software, Datasets, Educational, Support
- People: Current Members, Alumni
- Funding: NIH, DOE, IARPA, Foundations
Implementation: CSS classes + JavaScript in each page's <script> section
.tab-container,.tab-navigation,.tab-button,.tab-content- URL hash support (
#tabname) for direct linking - Mobile-responsive (stacked on small screens)
assets/images/
├── logos/ # Software logos, lab logo
│ ├── lab-logo.jpg
│ ├── skyline_logo_h_blue.jpg
│ ├── panorama_logo_h_onwhite_border.png
│ ├── proteowizard-logo.jpg
│ ├── limelight-page-logo.png
│ ├── encyclopedia_logo_small.png
│ ├── cometlogo_1_small.png
│ ├── crux-logo.png
│ └── percolator.png
├── instruments/ # Mass spectrometer photos
│ ├── astral.jpg
│ ├── stellar.jpg
│ ├── eclipse.jpg
│ ├── exploris480.jpg
│ ├── lumos1.jpg # Side-by-side pair
│ ├── lumos2.jpg # Side-by-side pair
│ ├── qe-hf.jpg
│ └── tsqaltis.jpg
├── people/ # Lab member headshots
│ └── mike-maccoss.jpg
└── maccoss-lab-photo-2025.jpg # Group photos
- Instrumentation images: 400px max-width on desktop, 300px on mobile
- Logo images: Varies by logo, responsive
- Fusion Lumos pair: 150px each, side-by-side layout
- People photos: Responsive sizing
/* Instrumentation tab images */
#instrumentation img {
max-width: 400px !important;
width: 75% !important;
}
/* Paired instruments (Fusion Lumos) */
.instrument-pair .instrument-item img {
width: 150px !important;
}The site uses Jekyll-feed plugin to generate RSS at /feed.xml
- Create file in
_posts/directory - Use naming format:
YYYY-MM-DD-title.md - Include front matter:
---
layout: post
title: "Your Post Title"
date: 2024-XX-XX
categories: [category1, category2]
---- Automatically lists all posts from
_posts/ - Shows title, date, excerpt, categories
- Links to RSS feed
- Styled with
.news-item,.post-meta,.category-tagclasses
The publications page is updated using a Python script that fetches data from PubMed and Google Scholar.
Note: This script must be run manually from a local machine. Google Scholar blocks scraping from cloud/CI environments like GitHub Actions.
- All publications from PubMed (searches for MacCoss MJ as author)
- Total citations from Google Scholar profile
- h-index from Google Scholar
- Most cited paper citation count from Google Scholar
- Metrics plot showing publications per year (PubMed) and citations per year (Google Scholar)
-
Set up Python environment (first time only):
cd /path/to/uw-maccosslab.github.io python3 -m venv .venv source .venv/bin/activate pip install requests beautifulsoup4 matplotlib numpy
-
Run the script:
source .venv/bin/activate python3 scripts/fetch_publications.py -
Review and commit changes:
git add -A git commit -m "Update publications" git push
The script requires these Python packages:
requests- HTTP requests for API callsbeautifulsoup4- HTML parsing for Google Scholar scrapingmatplotlib- Generating the publication/citation plotsnumpy- Numerical support for plotting
├── scripts/
│ └── fetch_publications.py # Main update script
├── assets/images/
│ └── publication-metrics.png # Auto-generated metrics plot
└── pages/
└── publications.md # Updated by the script
- Google Scholar metrics not updating: Google may temporarily block requests. Try again later or from a different network.
- No new publications found: The script fetches all publications and regenerates the page.
- "No citation data available" in plot: This happens if Google Scholar blocked the request. Run again from a different machine/network.
All email addresses use obfuscation to reduce spam:
- Replace
@with[at] - Replace
.with[dot] - Example:
maccoss[at]uw[dot]edu - Not sure if this helps at all
- Add logo to
assets/images/logos/ - Update
pages/resources.mdin Software tab - Use format:
### 
**Tool description**
- Bullet points with details
- **Download**: [link](url)- Add photo to
assets/images/instruments/ - Update
pages/resources.mdin Instrumentation tab - Follow existing format with instrument name, description, image
- Add photo to
assets/images/people/(if needed) - Update
pages/people.mdin appropriate tab - Use consistent formatting for names, titles, descriptions
- Edit
pages/funding.md - Add content to appropriate tab (NIH, DOE, IARPA, Foundations)
- Follow existing formatting patterns
.page-content .wrapper- Main content container.site-header .wrapper- Header container.hero-section- Homepage hero area.lab-photo- Lab photo styling
.tab-container- Tab system wrapper.tab-navigation- Tab button container.tab-button- Individual tab buttons.tab-content- Tab content panels
.news-item- News post styling.post-meta- Post metadata (date, categories).category-tag- Category labels.instrument-pair- Side-by-side instrument layout.instrument-item- Individual instrument in pair
@media (max-width: 768px)- Mobile breakpoint@media (max-width: 800px)- Content width breakpoint
bundle exec jekyll serveVerify all image paths after moving files, especially:
- Logo references in
index.mdandpages/resources.md - Instrument photos in
pages/resources.md - People photos in
pages/people.md
- Tested in Chrome, Firefox, Safari, Edge
- Uses modern CSS (flexbox, CSS grid)
- Fallbacks included for older browsers
- Images are optimized for web
- CSS is minified by Jekyll
- Responsive images reduce mobile bandwidth
- Use clear, concise language
- Include relevant links and citations
- Maintain consistent formatting
- Use appropriate headings hierarchy
- Use high-quality images
- Optimize file sizes for web
- Use descriptive alt text
- Maintain consistent aspect ratios where possible
- All images have alt text
- Proper heading structure
- High contrast colors
- Keyboard navigation support
For technical support or questions about the website, contact the lab's web administrator or refer to the Jekyll documentation at jekyllrb.com.