Skip to content

Commit a2c9da7

Browse files
zephyriezephyrie
committed
MONAI Redesign
1 parent 8a2d446 commit a2c9da7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+17487
-3918
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-react"]
3+
}

‎.cursorrules

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
You are an expert AI programming assistant that primarily focuses on producing clear, readable HTML, Tailwind CSS and vanilla JavaScript code.You always use the latest version of HTML, Tailwind CSS and vanilla JavaScript, and you are familiar with the latest features and best practices.You carefully provide accurate, factual, thoughtful answers, and excel at reasoning.- Follow the user’s requirements carefully & to the letter.- Confirm, then write code!- Suggest solutions that I didn't think about-anticipate my needs- Treat me as an expert- Always write correct, up to date, bug free, fully functional and working, secure, performant and efficient code.- Focus on readability over being performant.- Fully implement all requested functionality.- Leave NO todo’s, placeholders or missing pieces.- Be concise. Minimize any other prose.- Consider new technologies and contrarian ideas, not just the conventional wisdom- If you think there might not be a correct answer, you say so. If you do not know the answer, say so instead of guessing.- If I ask for adjustments to code, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make.

‎.github/workflows/deploy.yml

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
name: Build and Deploy
2+
3+
on:
4+
workflow_dispatch: # Allows manual trigger from GitHub UI
5+
push:
6+
branches:
7+
- main
8+
9+
# Add permissions to allow deployment
10+
permissions:
11+
contents: write
12+
13+
jobs:
14+
build-and-deploy:
15+
runs-on: ubuntu-latest
16+
steps:
17+
- name: Checkout Website
18+
uses: actions/checkout@v3
19+
20+
- name: Checkout Model Zoo
21+
uses: actions/checkout@v3
22+
with:
23+
repository: Project-MONAI/model-zoo
24+
path: scripts/model-zoo
25+
26+
- name: Setup Python and Node
27+
uses: actions/setup-python@v4
28+
with:
29+
python-version: '3.x'
30+
- uses: actions/setup-node@v3
31+
with:
32+
node-version: '18'
33+
cache: 'npm'
34+
35+
- name: Install Dependencies
36+
run: |
37+
pip install requests beautifulsoup4 markdown
38+
npm install
39+
40+
- name: Build Site
41+
run: |
42+
# Clean dist directory
43+
rm -rf dist
44+
mkdir -p dist
45+
mkdir -p dist/assets/css
46+
47+
# Process model data
48+
python scripts/fetch.py
49+
50+
# Build files
51+
npm run build
52+
npx babel src/model-zoo.js --out-file dist/model-zoo.js --presets=@babel/preset-env,@babel/preset-react --plugins=@babel/plugin-transform-react-jsx
53+
54+
# Build Tailwind CSS explicitly
55+
npx tailwindcss -i ./assets/css/style.css -o ./dist/assets/css/tailwind.css --minify
56+
57+
# Copy necessary files
58+
cp scripts/model_data.json dist/
59+
60+
# Debug Tailwind CSS
61+
echo "Checking tailwind.css:"
62+
ls -la dist/assets/css/tailwind.css || true
63+
echo "Contents of dist/assets/css:"
64+
ls -la dist/assets/css || true
65+
66+
- name: Deploy to GitHub Pages
67+
uses: JamesIves/github-pages-deploy-action@v4
68+
with:
69+
folder: dist
70+
branch: gh-pages
71+
clean: true # Automatically remove deleted files from the deployment

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules/
22
.ipynb_checkpoints
3+
dist/

‎404.html

+32-65
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,35 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<!-- Global site tag (gtag.js) - Google Analytics -->
5-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QVGBCPFPJ6"></script>
6-
<script>
7-
window.dataLayer = window.dataLayer || [];
8-
function gtag(){dataLayer.push(arguments);}
9-
gtag('js', new Date());
10-
gtag('config', 'G-QVGBCPFPJ6');
11-
</script>
12-
<meta charset="utf-8">
13-
<title>Page Not Found</title>
14-
<meta name="viewport" content="width=device-width, initial-scale=1">
15-
<style>
16-
17-
* {
18-
line-height: 1.2;
19-
margin: 0;
20-
}
21-
22-
html {
23-
color: #888;
24-
display: table;
25-
font-family: sans-serif;
26-
height: 100%;
27-
text-align: center;
28-
width: 100%;
29-
}
30-
31-
body {
32-
display: table-cell;
33-
vertical-align: middle;
34-
margin: 2em auto;
35-
}
36-
37-
h1 {
38-
color: #555;
39-
font-size: 2em;
40-
font-weight: 400;
41-
}
42-
43-
p {
44-
margin: 0 auto;
45-
width: 280px;
46-
}
47-
48-
@media only screen and (max-width: 280px) {
49-
50-
body, p {
51-
width: 95%;
52-
}
53-
54-
h1 {
55-
font-size: 1.5em;
56-
margin: 0 0 0.3em;
57-
}
58-
59-
}
60-
61-
</style>
62-
</head>
63-
<body>
64-
<h1>Page Not Found</h1>
65-
<p>Sorry, but the page you were trying to view does not exist.</p>
3+
<!-- Include Head Component with SEO parameters -->
4+
<!-- #include file="components/head.html" -->
5+
<!-- Replace with actual values -->
6+
<script>
7+
document.head.innerHTML = document.head.innerHTML
8+
.replace('${title}', '404 - Page Not Found')
9+
.replace('${description}', 'The page you were looking for could not be found. Please check the URL or navigate back to the homepage.')
10+
.replace('${canonical_url}', 'https://monai.io/404.html');
11+
</script>
12+
13+
<body class="bg-neutral-lightgray">
14+
<!-- Include Header Component -->
15+
<!-- #include file="components/header.html" -->
16+
17+
<main class="flex-grow">
18+
<div class="min-h-[calc(100vh-200px)] flex items-center justify-center">
19+
<div class="text-center px-4">
20+
<h1 class="text-4xl font-bold text-gray-800 mb-4">Page Not Found</h1>
21+
<p class="text-gray-600 mb-8">Sorry, but the page you were trying to view does not exist.</p>
22+
<a href="index.html" class="brand-btn inline-block">
23+
Return to Homepage
24+
</a>
25+
</div>
26+
</div>
27+
</main>
28+
29+
<!-- Include Footer Component -->
30+
<!-- #include file="components/footer.html" -->
31+
32+
<!-- Include Scripts Component -->
33+
<!-- #include file="components/scripts.html" -->
6634
</body>
6735
</html>
68-
<!-- IE needs 512+ bytes: https://blogs.msdn.microsoft.com/ieinternals/2010/08/18/friendly-http-error-pages/ -->

‎README.md

+125-10
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,131 @@
11
# Project MONAI Website
2-
This repo contains source code and content for the project MONAI website found at [monai.io](https://monai.io/). You can find out more on the [Project-MONAI github](https://github.com/Project-MONAI).
32

4-
## Local Development
5-
Git clone this repo, run 'python -m http.server' and navigate to localhost:8000 or your indicated port.
3+
This repository contains the source code and content for the Project MONAI website found at [monai.io](https://monai.io/). For more information about MONAI, visit the [Project-MONAI GitHub](https://github.com/Project-MONAI).
64

7-
The CSS is minimized to use only the included classes required throughout all the pages. If you're looking to add classes that aren't currently used, make sure to use npm to install the relevant packages and build the tailwind CSS after updating the .html files. Alternatively, after installing npm dependencies, run the 'npm run watch' command to automatically re-build the CSS file everytime you modify an .html file.
5+
## Features
86

9-
## Adding / Removing Navigation Items
10-
Currently Nav/Footer bars aren't abstracted so you'll need to individually update each page for an update.
7+
- Modern, responsive design using Tailwind CSS
8+
- Component-based architecture for better maintainability
9+
- Optimized build process for production
10+
- Development server with hot reloading
11+
- SEO optimizations and meta tag management
12+
- Automated asset optimization
1113

12-
## Adding Pages
13-
To add a page, copy an existing page, like 'community.html' and use that as a reference for the overall layout. The pages are using TailWind CSS (https://tailwindcss.com/docs) as the implementation framework, so make sure to use utility-first primitives.
14+
## Prerequisites
1415

15-
## Adding Page Content
16-
If simple updates are required, update the pages directly and use any utility-style CSS classes for your changes. If you need additional help, contact Michael Zephyr.
16+
- Node.js (v14 or higher)
17+
- npm (v6 or higher)
18+
19+
## Getting Started
20+
21+
1. Clone the repository:
22+
```bash
23+
git clone https://github.com/Project-MONAI/project-monai.github.io.git
24+
cd project-monai.github.io
25+
```
26+
27+
2. Install dependencies:
28+
```bash
29+
npm install
30+
```
31+
32+
3. Start the development server:
33+
```bash
34+
npm run dev
35+
```
36+
37+
The site will be available at `http://localhost:3000` with hot reloading enabled.
38+
39+
## Project Structure
40+
41+
```
42+
project-monai.github.io/
43+
├── components/ # Reusable HTML components
44+
├── assets/ # Static assets (images, CSS, JS)
45+
├── scripts/ # Build and optimization scripts
46+
├── src/ # Source files
47+
└── dist/ # Production build output
48+
```
49+
50+
## Components
51+
52+
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:
53+
54+
```html
55+
<!-- #include file="components/head.html" -->
56+
<!-- #include file="components/header.html" -->
57+
<!-- #include file="components/footer.html" -->
58+
<!-- #include file="components/scripts.html" -->
59+
```
60+
61+
## Development
62+
63+
### Adding New Pages
64+
65+
1. Create a new HTML file in the root directory
66+
2. Use the component includes for common elements
67+
3. Add your page-specific content
68+
4. Update meta tags using the head component variables:
69+
```html
70+
<script>
71+
document.head.innerHTML = document.head.innerHTML
72+
.replace('${title}', 'Your Page Title')
73+
.replace('${description}', 'Your page description')
74+
.replace('${canonical_url}', 'https://monai.io/your-page.html');
75+
</script>
76+
```
77+
78+
### Modifying Components
79+
80+
Components are located in the `components/` directory. When modifying a component:
81+
1. The change will automatically affect all pages using that component
82+
2. Test the changes across multiple pages to ensure consistency
83+
3. Run the development server to see changes in real-time
84+
85+
### CSS Development
86+
87+
The project uses Tailwind CSS with a custom configuration:
88+
89+
1. Development:
90+
```bash
91+
npm run watch
92+
```
93+
This will watch for changes and rebuild the CSS automatically.
94+
95+
2. Adding new styles:
96+
- Add custom styles in `src/css/`
97+
- Configure Tailwind in `tailwind.config.js`
98+
- Custom classes can be added to `assets/css/`
99+
100+
## Building for Production
101+
102+
1. Build the site:
103+
```bash
104+
npm run build
105+
```
106+
107+
This will:
108+
- Process and include all components
109+
- Optimize images and assets
110+
- Minify CSS and JavaScript
111+
- Generate the production build in `dist/`
112+
113+
## Deployment
114+
115+
The site is automatically deployed to GitHub Pages when changes are pushed to the main branch.
116+
117+
## Contributing
118+
119+
1. Fork the repository
120+
2. Create a feature branch
121+
3. Make your changes
122+
4. Submit a pull request
123+
124+
## License
125+
126+
This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details.
127+
128+
## Support
129+
130+
If you need help or have questions:
131+
1. Open an issue in this repository

0 commit comments

Comments
 (0)