Skip to content

Latest commit

 

History

History
238 lines (180 loc) · 7.48 KB

File metadata and controls

238 lines (180 loc) · 7.48 KB

Roberts Lab Website

URLChecker

The official website for the Roberts Lab at the University of Washington School of Aquatic and Fishery Sciences.

🌐 Live site: faculty.washington.edu/sr320


Overview

This website is built with Quarto, a scientific and technical publishing system. Content is written in .qmd (Quarto Markdown) files, rendered to HTML, and served from the docs/ directory via GitHub Pages.


Repository Structure

lab-website/
├── _quarto.yml            # Site-wide configuration (navbar, sidebar, theme)
├── index.qmd              # Home page (front page listings + lab description)
├── people.qmd             # Lab members page
├── projects.qmd           # Research projects listing page
├── publications.qmd       # Publications page (papers, preprints, theses)
├── posts.qmd              # News and updates listing page
├── courses.qmd            # Courses page
├── research.qmd           # Full research overview page
├── dei.qmd                # Outreach and DEI page
├── undergraduate_guide.qmd # Undergraduate guide page
├── calendar.qmd           # Lab calendar page
├── contact.qmd            # Contact page
├── notebooks.qmd          # Lab notebooks page
├── styles.css             # Custom site styles
│
├── posts/                 # News posts and updates
│   ├── _metadata.yml      # Shared metadata for all posts (freeze, banner)
│   ├── frontpage/         # Posts featured on the home page
│   │   └── <post-name>/
│   │       └── index.qmd
│   └── <post-name>/       # Regular news posts
│       └── index.qmd
│
├── research/              # Individual research project pages
│   ├── cod.qmd
│   ├── e5.qmd
│   ├── usda.qmd
│   └── ...
│
├── publications/
│   └── articles/          # One .qmd file per publication
│       └── <paper-slug>.qmd
│
├── img/                   # Images used across the site
├── resources/             # Downloadable resources (e.g., CV template)
├── ejs/                   # EJS templates (e.g., publications listing template)
├── _extensions/           # Quarto extensions
├── _freeze/               # Frozen computation outputs (do not edit manually)
└── docs/                  # Rendered HTML output (deployed via GitHub Pages)

How to Update the Website

Prerequisites

  • Quarto CLI (version 1.3 or later)
  • R with RStudio (recommended) — some .qmd files use R code chunks
  • Git

Building and Previewing Locally

# Preview the site with live reload
quarto preview

# Render the full site to the docs/ directory
quarto render

The rendered output goes to docs/ and is served via GitHub Pages at the site URL.


Adding a News Post

News posts appear on the News and Updates page (posts.qmd). Posts featured on the home page go in posts/frontpage/.

  1. Create a new directory under posts/ (or posts/frontpage/ for home-page features):

    posts/<your-post-name>/
    
  2. Create an index.qmd file inside that directory with this front matter:

    ---
    title: "Your Post Title"
    description: "A short description of the post."
    author:
      - name: Your Name
        url: https://your-website.com
        affiliation: UW - School of Aquatic and Fishery Sciences
        affiliation-url: https://robertslab.info
    date: MM-DD-YYYY
    categories: [keyword1, keyword2]   # used for filtering
    image: /img/your-image.png         # thumbnail image
    draft: false                       # set to true to hide from listing
    ---
  3. Write your post content in Markdown below the front matter.

Note: Posts use freeze: true (set in posts/_metadata.yml), which means code chunks are not re-executed on each render unless you explicitly run quarto render <file> --no-freeze.


Adding a Publication

Publications appear on the Publications page (publications.qmd) rendered via the EJS template in ejs/article.ejs.

  1. Create a new .qmd file in publications/articles/:

    publications/articles/<authoryear>.qmd
    
  2. Use this front matter template:

    ---
    title: "Full Paper Title"
    type: "article"
    author: "Last, F.I., Last, F.I., ..."
    year: "2025"
    publication: "Journal Name"
    preprint: ""
    doi: "10.xxxx/xxxxx"
    materials: ""
    eprint: "https://link-to-full-text"
    toc: FALSE
    categories:
      - keyword1
      - keyword2
    ---
  3. Optionally add a ## Citation and ## Abstract section below the front matter.


Adding or Updating a Research Project

Research projects appear on the Research Projects page (projects.qmd) and are also listed on research.qmd.

  1. Create or edit a .qmd file in research/:

    research/<project-name>.qmd
    
  2. Use this front matter template:

    ---
    title: "Project Title"
    status: "active"       # active or completed
    type: "grant"
    agency: "Funding Agency"
    year: "2023"
    github: "https://github.com/RobertsLab/project-name"
    image: "/img/project-image.png"
    toc: FALSE
    categories:
      - keyword1
      - keyword2
    ---
  3. To feature a project on the home projects grid, add its path to the projects.qmd listing:

    listing:
      contents:
        - "research/your-project.qmd"

Updating the People Page

The People page (people.qmd) uses custom HTML cards defined directly in the file.

  1. Open people.qmd.
  2. To add a new lab member, copy an existing <div class="person-card"> block and update:
    • Name, photo URL, links (notebook, GitHub, ORCID, etc.)
    • Biography text
  3. To move someone to Alumni, find their card and move it to the alumni section at the bottom.
  4. Add a headshot image to the img/ directory and reference it in the card.

Updating Site Navigation

Site navigation (navbar, sidebar) is configured in _quarto.yml.

  • Navbar tools (icons in the top-right): edit the website.navbar.tools section.
  • Sidebar links: edit the website.sidebar.contents section.
  • Site title and URL: edit website.title and website.site-url.

Updating Site Styles and Theme

  • Global theme: configured in _quarto.yml under format.html.theme (currently uses Flatly/Darkly for light/dark mode).
  • Custom CSS: add styles to styles.css. To activate it, uncomment css: styles.css in _quarto.yml under format.html.

Deployment

The site is deployed via GitHub Pages from the docs/ directory on the main branch. After rendering locally with quarto render, commit and push the updated docs/ directory to deploy changes.

quarto render
git add docs/
git commit -m "Render updated site"
git push

The live site updates automatically once changes are pushed to main.


Additional Resources