Official MEDomicsLab's Website.
Live site

How To Add Content (User-Friendly)

Tip

This is the simple, no-code way to add or update lab content. Choose the matching form at Issues → New issue, fill it in, and submit it. The automation validates your details and opens a draft pull request for a maintainer to review and merge—no local setup required.

  Add a team member

Use the Add a new team member template.

What you'll need before opening the issue:

• A square portrait photo, at least 512×512 pixels, JPG or PNG. Drag it into the Portrait photo field, or paste a public URL.
• A URL slug like firstname-lastname, lowercase, hyphenated. This becomes /team/<slug> on the site.
• The cohort the person belongs to. Free text, but check src/data/team.json first to keep cohort names consistent (Current, Past members, Lab Principal Investigator, etc.).

The automation will:

1. Download the portrait you uploaded.
2. Generate the 12 responsive avatar variants (80, 128, 160, 256 px in AVIF, WebP, and JPG/PNG fallback).
3. Insert the entry into the right cohort in src/data/team.json.
4. Open a draft PR.

Leave optional fields blank when unknown. Fill every required field with the actual details.

  Add a publication

Use the Add a new publication template.

A publication entry needs:

• A clear title, comma-separated authors, and the year.
• A kind picked from the dropdown (Journal Papers, Conference Papers, Preprints). Submit talks and posters with the event form.
• A DOI or URL. The DOI is preferred when one exists; the site renders both.
• A short abstract. One paragraph is enough; readers click through for the full text.

The automation appends the entry to the matching year bucket in src/data/publications.json and writes a markdown stub under src/content/publications/<slug>.md for any prose you provided.

Important to recall: if the paper has lab member co-authors, write their names exactly as they appear in src/data/team.json so the cross-link to their profile page works.

  Add an event

Use the Add an event template.

Cover at minimum:

• Title (e.g. Thesis Defense: ...).
• Slug, usually prefixed with the date (2026-05-15-msc-defense-x).
• Event kind from the dropdown (thesis defense, symposium, workshop, talk, lab meeting, outreach, other).
• A sourced start date (YYYY-MM-DD), or a listing month (YYYY-MM) when the exact day is unknown. The listing month only sets the timeline group.
• Optional end date for multi-day events, and venue when explicitly known. Keep meeting links in the body.
• Contributors / speakers, comma-separated, lab spelling.

Event details live in src/data/events.json and appear in the right-hand sidebar: date, optional endDate, kind (falling back to category), and venue. The sidebar shows a date only when an exact date is available. News entries can store an exact date, or use an event object with any known date, kind, and venue (plus optional endDate, which requires date) for event recaps. News dates are added only when the source text, title, or imagery states them. Contributors appear underneath. The submission form saves event dates, kind, and location (as venue) automatically. Keep time, registration, links, description, abstract, agenda, and media in src/content/community/events/<slug>.md, which supports HTML and standard Markdown images. Add each photo in its own paragraph to display full-width images with rounded corners, as in the latest Mila news post.

  Add a news post

Use the Add a news post template.

You'll need:

• A one-sentence headline.
• A slug prefixed with the publish date (2026-04-24-symposium-recap).
• The planned website publish date in ISO format. This sets the timeline group only.
• An optional Date to display, supported by the source text, title, or images. Leave unknown dates blank.
• For event news, optional event kind, venue, and end date. These appear in the sidebar.
• Comma-separated contributors. Lab spelling, again.
• A markdown body. The listing card shows the title only, so the opening paragraph here is what readers see first when they click through.

The automation adds the entry to src/data/news.json and writes the body to src/content/community/news/<slug>.md.

Important to recall: drag and drop images straight into the issue form. They become GitHub user attachments; the maintainer can move them under public/images/ during review.

  What if I made a typo?

Edit the issue. The workflow re-runs on every edit and updates (or replaces) the draft PR. If validation fails, the bot leaves a comment listing the schema errors and labels the issue needs-changes. Fix, save, the comment goes away, the PR appears.

  For Developers: Edit Data JSON

This is for maintainers and anyone who has cloned the repository locally. Every page on the site reads from a JSON file (sometimes plus markdown). Edit the JSON, run npm run check, push.

  Team: src/data/team.json

• Schema: src/data/_schemas/team.schema.json
• Page: TeamPage, TeamMemberDetailPage
• Avatars: 12 variants per member under public/images/team/<slug>/avatar-{80,128,160,256}.{avif,webp,jpg|png}. Generate them with sharp or use the issue automation.

Top-level array of cohorts. Each cohort has a year (the cohort label, not a date) and a members array. Each member needs name, slug, position, image (path to the 256 base file). Socials, education, and biography are optional.

After editing run:

npm run lint:schemas    # validates JSON
npm run lint:avatars    # checks the 12-file matrix per slug

  Publications: src/data/publications.json

• Schema: src/data/_schemas/publications.schema.json
• Template: src/content/_templates/publication.md
• Pages: PublicationsPage, PublicationDetailPage, HomePage (recent papers section).

Top-level array grouped by year (string). Each item has a stable slug that owns the /publications/<slug> URL, a contributors array (matches the shape used by news/events), and a type enum.

  News: src/data/news.json

• Schema: src/data/_schemas/news.schema.json
• Template: src/content/_templates/news.md
• Pages: CommunityListPage (/community/news), CommunityItemDetailPage.

Year → months → items. Each item references a markdown file under src/content/community/news/.

  Events: src/data/events.json

• Schema: src/data/_schemas/events.schema.json
• Template: src/content/_templates/event.md
• Pages: CommunityListPage (/community/events), CommunityItemDetailPage.

Same year/month grouping as news. Store event logistics in JSON using the optional date, endDate, kind, and venue fields. The detail page displays them above the researchers; Markdown holds times, links, and the event's main content.

  Research projects & tracks

• Projects: src/data/research-projects.json (schema)
• Tracks: src/data/research-tracks.json (schema)

A research project belongs to one or more tracks. Tracks are defined as a flat object keyed by track name; projects reference tracks by that key.

  Courses: src/data/courses.json

• Schema: src/data/_schemas/courses.schema.json
• Template: src/content/_templates/course.md
• Page: CoursesPage, CourseDetailPage.

Each course has a slug, title, summary, instructor list, and optional links to syllabus / official course page.

  Homepage: src/data/home.json

• Schema: src/data/_schemas/home.schema.json
• Page: HomePage.

The hero block (label, title, subtitle, CTA), the "What we do" cards, the "Open-source" featured projects, and the "Latest news / Recent papers" feed configuration. To change the homepage copy or the featured project list, edit this file. The recent papers and news sections automatically pull from publications.json and news.json (most recent N).

  Visions: src/data/visions.json

• Schema: src/data/_schemas/visions.schema.json
• Page: VisionsPage.

The hero, the narrative blocks (each a heading, body, optional image), and the embedded gallery references. Image paths are relative to public/.

  Layout & navigation: src/data/layout.json

• Schema: src/data/_schemas/layout.schema.json

Navbar items, footer columns, contact block, social links. Adding or reordering a top-level page only needs an edit here plus a route registration in src/App.jsx.

  Theme: src/data/theme.json

• Schema: src/data/_schemas/theme.schema.json

CSS custom properties consumed by Tailwind v4 and the design tokens. The brand orange used throughout the site (and on these badges) is oklch(0.7505 0.1791 58.28) ≈ #FF8C00. Change --primary here to retheme the entire site.

Running the Site Locally

node --version       # Node 20.x is the target. Anything older is unsupported.
git clone git@github.com:simonprovost/medomicslab.git
cd medomicslab
npm install
npm run dev          # vite dev server, http://localhost:5173
npm run build        # production build to dist/
npm run preview      # serve built dist/

  Quality gates

npm run check        # ESLint, Prettier, markdownlint, knip, schemas, internal links, licences
npm run check:full   # everything in `check` plus production build, size-limit, and full link crawl
npm run lhci         # Lighthouse CI audit of performance, accessibility, best practices, and SEO

  Tests

npm run test:scripts     # Node test runner over `.github/scripts/__tests__/` (issue-to-PR handlers)
npm run test:e2e         # Full Playwright suite: smoke checks and SEO metadata regression tests
npm run test:seo         # Playwright check for titles, descriptions, canonical URLs, social tags, and JSON-LD
npm run test:a11y        # axe-core accessibility checks on every top-level route
npm run test:e2e:install # one-off: install the Chromium browser Playwright needs

  SEO & discovery

The site uses react-helmet-async to set a unique title, description, canonical URL, Open Graph / Twitter metadata, and JSON-LD structured data for every route. Metadata for research projects, publications, team profiles, news, events, and courses is derived from the corresponding data file.

Every production build uses vite-plugin-sitemap to generate dist/sitemap.xml and dist/robots.txt. The sitemap includes static routes and every content-detail route discovered from the JSON data. The canonical production hostname is configured in vite.config.js; update it if the domain changes.

Run npm run test:seo after changing routing, SEO metadata, or content URL structures. Run npm run build to inspect the generated sitemap and robots files locally.

License

medomicslab is released under the MIT License. Maintained by the MEDomicsLab at McGill University and the Université de Sherbrooke.