Skip to content

Latest commit

 

History

History
131 lines (96 loc) · 3.47 KB

README.md

File metadata and controls

131 lines (96 loc) · 3.47 KB

Project MONAI Website

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

Features

  • Modern, responsive design using Tailwind CSS
  • Component-based architecture for better maintainability
  • Optimized build process for production
  • Development server with hot reloading
  • SEO optimizations and meta tag management
  • Automated asset optimization

Prerequisites

  • Node.js (v14 or higher)
  • npm (v6 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 development server:

    npm run dev

The site will be available at http://localhost:3000 with hot reloading enabled.

Project Structure

project-monai.github.io/
├── components/          # Reusable HTML components
├── assets/             # Static assets (images, CSS, JS)
├── scripts/           # Build and optimization scripts
├── src/               # Source files
└── dist/              # Production build output

Components

The website uses a component-based architecture. Common elements like headers, footers, and navigation are stored in the components/ directory and included in pages using the include syntax:

<!-- #include file="components/head.html" -->
<!-- #include file="components/header.html" -->
<!-- #include file="components/footer.html" -->
<!-- #include file="components/scripts.html" -->

Development

Adding New Pages

  1. Create a new HTML file in the root directory
  2. Use the component includes for common elements
  3. Add your page-specific content
  4. Update meta tags using the head component variables: 
    <script>
    document.head.innerHTML = document.head.innerHTML
        .replace('${title}', 'Your Page Title')
        .replace('${description}', 'Your page description')
        .replace('${canonical_url}', 'https://monai.io/your-page.html');
</script>

Modifying Components

Components are located in the components/ directory. When modifying a component:

  1. The change will automatically affect all pages using that component
  2. Test the changes across multiple pages to ensure consistency
  3. Run the development server to see changes in real-time

CSS Development

The project uses Tailwind CSS with a custom configuration:

  1. Development:

    npm run watch

    This will watch for changes and rebuild the CSS automatically.

  2. Adding new styles:

    • Add custom styles in src/css/
    • Configure Tailwind in tailwind.config.js
    • Custom classes can be added to assets/css/

Building for Production

  1. Build the site: 
    npm run build

This will:

  • Process and include all components
  • Optimize images and assets
  • Minify CSS and JavaScript
  • Generate the production build in dist/

Deployment

The site is automatically deployed to GitHub Pages when changes are pushed to the main branch.

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