Project MONAI Website

This repository contains the source code and content for the Project MONAI website found at project-monai.github.io. For more information about MONAI, visit the Project-MONAI GitHub.

Features

• Astro 5 static-site build (one .html per route) with Tailwind CSS
• Model Zoo as a self-contained Vue 3 SPA (public/src/model-zoo-vue.js)
• LLM enablement: .md twin per page, llms.txt / llms-full.txt, sitemap-llms.xml, agent-aware GA4 analytics (see docs/ANALYTICS.md)
• Generated sitemaps and crawler-friendly robots.txt
• LAN-accessible dev server with HMR

Prerequisites

• Node.js (v20 or higher)
• npm (v10 or higher)

Getting Started

1. Clone the repository:

   git clone https://github.com/Project-MONAI/project-monai.github.io.git
   cd project-monai.github.io

2. Install dependencies:

   npm install

3. Start the dev server (LAN-accessible on port 3000):

   npm run dev

   The site will be available at http://localhost:3000 and on your LAN IP.

Project Structure

project-monai.github.io/
├── astro.config.mjs # Astro config (Tailwind, MDX, sitemap, md-twins, llms-txt)
├── public/ # Static assets served as-is
│ └── src/ # Vue UMD app (model-zoo)
├── src/
│ ├── pages/ # Routes (.astro files emit *.html)
│ ├── layouts/ # BaseLayout.astro
│ ├── components/ # Header, Footer, BaseHead
│ ├── integrations/ # md-twins + llms-txt build hooks
│ └── styles/global.css # Tailwind entry
├── scripts/ # Visual snapshot/diff tooling, model-data generator
└── docs/ # Design, architecture, and analytics reference docs

Development

Adding New Pages

1. Create a new file in src/pages/<name>.astro (or under a subdirectory).
2. Use the BaseLayout pattern:

   ---importBaseLayoutfrom'../layouts/BaseLayout.astro';const frontmatter = { title: 'Page Title | MONAI', description: 'Page description', canonical: 'https://project-monai.github.io/<name>.html',};---
   <BaseLayout {...frontmatter}>
   <!-- Page content -->
   </BaseLayout>

3. Follow docs/DESIGN.md (direction, alignment and color rules) and docs/STYLEGUIDE.md (component recipes); see AGENTS.md for repo conventions and load-bearing invariants.

Model Zoo Development

The Model Zoo page requires model data to display. During CI/CD, this data is generated from the model-zoo repository. For local development:

1. Fetch model data:

   npm run fetch-models

   This downloads the latest model data from production, or falls back to sample data if unavailable.

2. The sample data file model_data.sample.json provides a small set of representative models for development.

3. For full model data generation (optional):

   pip install requests beautifulsoup4 markdown
   python scripts/process_models.py

Banner System

The website includes a flexible banner system for announcements and surveys. The banner system lives in the Astro Header component (src/components/Header.astro) and automatically appears on all pages.

Adding a New Banner

1. Edit src/components/Header.astro and add your banner to the banners array in the bannerSystem() function:

   {id: 'unique-banner-id',// Unique identifier for localStoragemessage: 'Your announcement',// Main banner textlink: 'https://example.com',// Optional link URLlinkText: 'Learn more →',// Link textbgColor: 'bg-brand-primary',// Tailwind background classicon: 'check',// Icon type: 'check' or 'megaphone'priority: 1// Higher priority shows first}

2. Available background colors:

   • bg-brand-primary - Teal (default MONAI color)
   • bg-purple-600 - Purple (for surveys/feedback)
   • bg-blue-600 - Blue
   • bg-green-600 - Green
   • bg-red-600 - Red (for urgent announcements)

3. Banner features:

   • Only one banner displays at a time (highest priority non-dismissed)
   • Users can dismiss banners (stored in localStorage)
   • Header automatically adjusts position when banner is visible
   • Smooth transitions on dismiss

Example Banners

Version announcement:

{id: 'monai-1-6',message: 'MONAI Core v1.6 is now available!',link: 'https://monai.readthedocs.io/en/stable/whatsnew_1_6.html',linkText: 'See what\'s new →',bgColor: 'bg-brand-primary',icon: 'check',priority: 2}

Survey/Feedback request:

{id: 'community-survey-2024',message: 'Help shape the future of MONAI!',link: 'https://survey-link.com',linkText: 'Take our 5-minute survey →',bgColor: 'bg-purple-600',icon: 'megaphone',priority: 1}

Building for Production

1. Build the site:

   npm run build

   This runs npm run fetch-models (to populate public/model_data.json) and then astro build, producing the production output in dist/.

Deployment

The site is automatically deployed to GitHub Pages via the .github/workflows/deploy.yml workflow when changes are pushed to master or main. The workflow runs npm ci && npm run build and uploads dist/ as the GitHub Pages artifact.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

Support

If you need help or have questions:

1. Open an issue in this repository