Website Improvement — Pull Request Roadmap

Background

The flagship “Our Research Programs” section on the homepage (index.qmd:49–52) is a single paragraph of inline links. It is the most important section on the site for conveying research breadth, yet it reads as an afterthought and gives no visual weight to any program. The IDEAS page (groups/ideas.qmd) already defines a clean .product-grid/.product-card pattern we can lift.

Scope

Replace the paragraph with a responsive card grid — one card per research program, each with a short label, a one-line description, and a link to the program page. Programs (from the navbar): Vaccines, Antimicrobial Resistance, Pathogens/Transmission & Emerging Diseases, Clinical Trials, HIV, STIs / Center of Excellence for Gonorrhea, Substance Use-Associated Infections, Infection Control, Modeling & Data Science (IDEAS).

Files

• index.qmd (replace the section)
• styles.css (promote/reuse card grid styles so they’re available site-wide)
• Optionally fragments/_research-cards.qmd (new include, for reuse on other pages)

Acceptance criteria

• Grid is responsive (auto-fit, min ~260px), keyboard-focusable links, visible hover state, meets WCAG AA contrast.
• Each card links to the correct existing program page.
• No regression to the existing publications/events includes below it.

Prompt

On the Wake Forest ID Quarto site, replace the “Our Research Programs” paragraph in index.qmd with a responsive card grid. Reuse the .product-grid/.product-card styling from groups/ideas.qmd by moving those rules into styles.css so they are available site-wide, then build one card per research program (Vaccines, Antimicrobial Resistance, Pathogens & Emerging Diseases, Clinical Trials, HIV, STIs/Gonorrhea, Substance Use-Associated Infections, Infection Control, IDEAS/Data Science). Each card gets a heading, a one-sentence description, and a link to the matching groups/*.qmd page. Keep it accessible (focusable links, AA contrast) and verify with quarto render.

Background

Nothing on the homepage quantifies the section’s scale, so “vigor” is asserted in prose rather than shown. A compact stat strip is the single most effective way to convey momentum in research, training, and care at a glance.

Scope

Add a horizontal stat band near the top of index.qmd (below the hero) with 4–6 metrics. Candidate metrics (confirm real numbers with the section before publishing — do not invent figures): active clinical trials, faculty, trainees/fellows, annual peer-reviewed publications, surveillance sites, grant funding. Each stat = a large number + a short label.

Files

• index.qmd
• styles.css (new .stat-band / .stat rules)

Acceptance criteria

• Numbers are placeholders clearly marked TODO: confirm until the section provides real figures; no fabricated statistics ship.
• Responsive (wraps to 2 columns on mobile), AA contrast, semantic markup (each stat readable by screen readers as “N — label”).

Prompt

Add a “By the numbers” impact band to index.qmd directly under the hero, styled in styles.css as a responsive flex/grid strip of 4–6 stat tiles (big number + label). Use placeholder values marked TODO: confirm with section — do not fabricate statistics. Metrics: active clinical trials, faculty, fellows/trainees, annual publications, surveillance sites, grant funding. Ensure it wraps gracefully on mobile and meets AA contrast.

Background

publications.qmd fetches a PubMed RSS feed client-side via OJS/d3 and renders it with hard-coded width = 400 and 12px fonts. Two problems: (1) search engines never see the publication list (it’s built in the browser), so a large body of authoritative, keyword-rich content is unindexed; (2) it looks inconsistent with the polished .publication-card styling used elsewhere.

Scope

Replace the OJS block with server-side rendering using the existing _R/get_publications.R + render_publications_md() helpers (already used in fragments/_publications.qmd and person pages), emitting .publication-card markup. Keep the “see full list on PubMed” link.

Files

• publications.qmd (swap OJS for an R chunk)
• Possibly minor helper reuse from _R/get_publications.R

Acceptance criteria

• Publications render at build time (visible in page source without JS).
• Uses the shared .publication-card styling; consistent with homepage.
• Graceful fallback if the feed is unavailable at build time.

Prompt

In publications.qmd, remove the client-side OJS/d3 rendering and instead render publications server-side using _R/get_publications.R and render_publications_md() (see fragments/_publications.qmd for the pattern), outputting the shared .publication-card markup. Ensure the list is present in the static HTML (no JS required) for SEO, keep a link to the full PubMed list, and handle the feed being unavailable at build time without failing the render.

Background

The fellowship page (fellowship.qmd) reads well but omits the concrete facts prospective applicants search for and compare on. Adding them deepens the training story and creates keyword-rich, structured content.

Scope

Add two things to fellowship.qmd: 1. A “Program at a glance” facts block: duration (2 yr + optional research year), number of positions, ACGME accreditation status, application pathway (ERAS/NRMP) and timeline, board pass rate (if available), core rotations. 2. An “Where our fellows go” / alumni outcomes section naming the kinds of roles and, where permitted, institutions alumni have joined (currently only “academic, community, private practice” in prose).

All specific facts must be confirmed with the program — mark unknowns TODO: confirm.

Files

• fellowship.qmd
• fragments/fellowship-jsonld.html (feed the new facts into schema — see PR 7)

Acceptance criteria

• Facts block is scannable (definition list or small card grid), mobile-friendly.
• No unverified specifics published; placeholders clearly flagged.

Prompt

Enhance fellowship.qmd with (1) a “Program at a glance” facts block (duration, positions/year, ACGME status, ERAS/NRMP pathway + timeline, board pass rate, core rotations) rendered as a definition list or small card grid, and (2) a “Where our fellows go” alumni-outcomes section. Use TODO: confirm placeholders for any specific number/claim not already on the site — do not invent facts. Keep it responsive and accessible.

Background

theme.scss sets $primary: #000000 (black) while $primary-rgb: 140,109,44 (gold) — so computed tints/borders derive from gold but the navbar, footer, and headings render black. The result is a flat, monochrome site that underuses the Wake gold (#8C6D2C) and the Atrium accent colors already defined but unused. A coherent gold-or-navy primary with disciplined accents will read as far more professional and energetic. (Note: current gold link color #8C6D2C on white measures ~4.85:1 — it passes AA, so link contrast itself is fine; the issue is the overall monochrome feel.)

Scope

Introduce an intentional primary (recommend Wake navy #002B49 or gold #8C6D2C) and a small, consistent accent set; reconcile $primary with $primary-rgb; apply to navbar, footer, headings, links, and section rules. Ship a before/after screenshot set. This is design-sensitive — pair with the site owner and iterate.

Files

• theme.scss (primary/emphasis, navbar, footer, headings, links, h2 rule)
• Spot-check styles.css, .donation-card, .events-pagination-btn, IDEAS inline styles for color consistency

Acceptance criteria

• $primary and $primary-rgb describe the same color.
• All text/interactive elements meet WCAG AA.
• Navbar, footer, headings, links share one coherent brand system.
• Before/after screenshots attached to the PR.

Prompt

Rework the color system in theme.scss so the brand color actually drives the design. Today $primary is black but $primary-rgb is gold — reconcile them to a single intentional primary (propose Wake navy #002B49 and Wake gold #8C6D2C as primary/accent) and apply it consistently to navbar, footer, headings, links, and h2 borders. Keep everything WCAG AA. Audit styles.css (donation card, pagination buttons) and the IDEAS inline styles for consistency. Attach before/after screenshots of the home, fellowship, and a group page.

Background

The homepage hero is a group photo (assets/id-section.png) with a baked-in rounded border and drop shadow in the raster file itself, which reads as dated. There’s no headline overlay and no calls to action. The page then opens into long full-width paragraphs.

Scope

1. Re-export id-section.png without the baked-in frame/shadow (clean edges), or source a higher-impact full-bleed hero image.
2. Build a proper hero: image + concise headline + 2–3 CTA buttons (“Explore our research”, “Meet our team”, “Apply to the fellowship”). Let CSS own any framing.
3. Tighten the intro copy that follows so the page has clear visual hierarchy.

Files

• index.qmd, styles.css, assets/id-section.png (re-exported), possibly a new hero asset

Acceptance criteria

• No baked-in borders/shadows in the hero image; framing via CSS only.
• Hero has a headline and working CTA buttons with visible focus states.
• Responsive; image has descriptive alt text and explicit dimensions (_R/add_image_dimensions.R already runs post-render — keep it working).

Prompt

Redesign the homepage hero in index.qmd + styles.css. Replace the framed-in-raster group photo with a clean full-bleed image (re-export assets/id-section.png without its baked-in border/shadow, or use a new hero), overlay a concise headline, and add 2–3 CTA buttons (research, team, fellowship). CSS owns all framing. Keep it responsive, accessible (alt text, focus states), and don’t break the post-render image-dimensions step.

Background

The site already ships good JSON-LD (MedicalOrganization/ResearchOrganization in fragments/org-jsonld.html, EducationalOccupationalProgram in fragments/fellowship-jsonld.html). We can capture richer SERP features.

Scope

1. Expand fellowship-jsonld.html: applicationStartDate/applicationDeadline, educationalProgramMode, occupationalCategory, trainingSalary, educationalCredentialAwarded (populate from PR 4’s facts).
2. Add a FAQPage block for common fellowship-applicant questions.
3. Add BreadcrumbList sitewide (a small post-render step in _R/, mirroring add_canonical_links.R).
4. Add MedicalWebPage/Article schema to blog posts.

Files

• fragments/fellowship-jsonld.html, new fragment(s) for FAQ
• New _R/add_breadcrumbs.R + register in _quarto.yml post-render
• Post template or _R/ step for article schema on posts/

Acceptance criteria

• All JSON-LD validates (Schema.org / Rich Results Test).
• No duplicate/conflicting @ids; breadcrumbs reflect real nav hierarchy.
• Facts in fellowship schema match the visible page (PR 4).

Prompt

Enrich the site’s structured data. Expand fragments/fellowship-jsonld.html with application dates, program mode, occupational category, training salary, and credential awarded (values from the fellowship facts block). Add a FAQPage JSON-LD fragment for common applicant questions. Add a sitewide BreadcrumbList via a new post-render script _R/add_breadcrumbs.R registered in _quarto.yml (model it on _R/add_canonical_links.R). Add Article/MedicalWebPage schema to posts/. Validate everything against the Rich Results Test and avoid duplicate @ids.

Background

_quarto.yml sets both open-graph.image and twitter-card.image to assets/logo.png — a black icon that renders as an empty/broken-looking card in link previews on social and chat. A proper branded card materially improves click-through from shared links.

Scope

Design a 1200×630 social card (photo or brand field + wordmark + short tagline), add it to assets/, and point open-graph.image, twitter-card.image, and og:image:width/height at it. Consider per-section override images for the fellowship and research pages.

Files

• assets/og-card.png (new, 1200×630)
• _quarto.yml

Acceptance criteria

• Card is 1200×630, legible at small sizes, on-brand (align with PR 5 palette).
• Validates in a link-preview / card debugger.
• Optional: fellowship/research pages set their own image: in front matter.

Prompt

Create a 1200×630 branded Open Graph/Twitter card at assets/og-card.png (on-brand background + wordmark + short tagline) and update _quarto.yml so open-graph.image and twitter-card.image point to it, adding og:image:width/height. Optionally give the fellowship and research pages their own image: front-matter overrides. Verify it renders correctly in a card debugger.