Skip to content

Commit 83419d2

Browse files
zephyriezephyrie
authored
Merge pull request #84 from Project-MONAI/banner_system
Add banner system for announcements and remove WOW.js animations
2 parents baf271e + 7f4272f commit 83419d2

File tree

5 files changed

+187
-21
lines changed

5 files changed

+187
-21
lines changed

‎README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,66 @@ The project uses Tailwind CSS with a custom configuration:
102102
- Configure Tailwind in `tailwind.config.js`
103103
- Custom classes can be added to `assets/css/`
104104

105+
### Banner System
106+
107+
The website includes a flexible banner system for announcements and surveys. The banner system is integrated into the header component (`components/header.html`) and automatically appears on all pages.
108+
109+
#### Adding a New Banner
110+
111+
1. Edit `components/header.html` and add your banner to the `banners` array in the `bannerSystem()` function:
112+
```javascript
113+
{
114+
id: 'unique-banner-id', // Unique identifier for localStorage
115+
message: 'Your announcement', // Main banner text
116+
link: 'https://example.com', // Optional link URL
117+
linkText: 'Learn more →', // Link text
118+
bgColor: 'bg-brand-primary', // Tailwind background class
119+
icon: 'check', // Icon type: 'check' or 'megaphone'
120+
priority: 1 // Higher priority shows first
121+
}
122+
```
123+
124+
2. Available background colors:
125+
- `bg-brand-primary` - Teal (default MONAI color)
126+
- `bg-purple-600` - Purple (for surveys/feedback)
127+
- `bg-blue-600` - Blue
128+
- `bg-green-600` - Green
129+
- `bg-red-600` - Red (for urgent announcements)
130+
131+
3. Banner features:
132+
- Only one banner displays at a time (highest priority non-dismissed)
133+
- Users can dismiss banners (stored in localStorage)
134+
- Header automatically adjusts position when banner is visible
135+
- Smooth transitions on dismiss
136+
137+
#### Example Banners
138+
139+
Version announcement:
140+
```javascript
141+
{
142+
id: 'monai-1-6',
143+
message: 'MONAI Core v1.6 is now available!',
144+
link: 'https://docs.monai.io/en/stable/whatsnew_1_6.html',
145+
linkText: 'See what\'s new →',
146+
bgColor: 'bg-brand-primary',
147+
icon: 'check',
148+
priority: 2
149+
}
150+
```
151+
152+
Survey/Feedback request:
153+
```javascript
154+
{
155+
id: 'community-survey-2024',
156+
message: 'Help shape the future of MONAI!',
157+
link: 'https://survey-link.com',
158+
linkText: 'Take our 5-minute survey →',
159+
bgColor: 'bg-purple-600',
160+
icon: 'megaphone',
161+
priority: 1
162+
}
163+
```
164+
105165
## Building for Production
106166

107167
1. Build the site:

‎assets/js/main.js

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,6 @@
33

44
// Performance optimization: Defer non-critical operations
55
function deferNonCriticalOperations() {
6-
// Initialize WOW.js after initial paint
7-
requestIdleCallback(() => {
8-
const wow = new WOW({
9-
mobile: false,
10-
offset: 50
11-
});
12-
wow.init();
13-
});
14-
156
// Initialize particles.js after initial paint
167
const heroArea = document.getElementById("hero-area");
178
if (heroArea) {

‎components/head.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
<link rel="apple-touch-icon" href="./assets/logo/MONAI-logo_favicon.png">
3232

3333
<!-- Stylesheets -->
34-
<link rel="stylesheet" type="text/css" href="./assets/css/animate.css">
3534
<link rel="stylesheet" type="text/css" href="./assets/css/tailwind.css">
3635

3736
<!-- Alpine.js -->

‎components/header.html

Lines changed: 126 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,130 @@
1+
<!-- Banner System -->
2+
<div x-data="bannerSystem()" x-init="init()">
3+
<!-- Banner Container -->
4+
<div x-show="activeBanner"
5+
x-ref="banner"
6+
class="fixed top-0 left-0 right-0 text-white py-2 px-4 text-sm z-50"
7+
:class="activeBanner ? activeBanner.bgColor : ''"
8+
x-transition:leave="transition ease-in duration-200"
9+
x-transition:leave-start="opacity-100"
10+
x-transition:leave-end="opacity-0">
11+
<div class="container flex items-center justify-center gap-2">
12+
<svg x-show="activeBanner && activeBanner.icon === 'check'" class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
13+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
14+
</svg>
15+
<svg x-show="activeBanner && activeBanner.icon === 'megaphone'" class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
16+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path>
17+
</svg>
18+
<span class="font-medium" x-text="activeBanner ? activeBanner.message : ''"></span>
19+
<a x-show="activeBanner && activeBanner.link"
20+
:href="activeBanner ? activeBanner.link : '#'"
21+
target="_blank"
22+
class="underline hover:no-underline ml-1"
23+
x-text="activeBanner ? activeBanner.linkText : ''"></a>
24+
<button @click="dismissBanner()"
25+
class="ml-4 hover:opacity-80 transition-opacity"
26+
aria-label="Dismiss banner">
27+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
28+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
29+
</svg>
30+
</button>
31+
</div>
32+
</div>
33+
</div>
34+
35+
<script>
36+
function bannerSystem() {
37+
return {
38+
banners: [
39+
{
40+
id: 'monai_core_v1.5',
41+
message: 'MONAI Core v1.5 is now available!',
42+
link: 'https://docs.monai.io/en/stable/whatsnew_1_5.html',
43+
linkText: 'See what\'s new →',
44+
bgColor: 'bg-brand-primary',
45+
icon: 'check',
46+
priority: 2
47+
},
48+
{
49+
id: 'community-survey-2025',
50+
message: 'Help shape the future of MONAI!',
51+
link: 'https://forms.gle/tovHc3ch13FwJEqo6',
52+
linkText: 'Take our 5-minute community survey →',
53+
bgColor: 'bg-purple-600',
54+
icon: 'megaphone',
55+
priority: 1
56+
}
57+
],
58+
activeBanner: null,
59+
bannerHeight: 0,
60+
61+
init() {
62+
this.selectActiveBanner();
63+
this.$nextTick(() => {
64+
if (this.activeBanner && this.$refs.banner) {
65+
this.bannerHeight = this.$refs.banner.offsetHeight;
66+
this.updateBodyPadding();
67+
this.updateNavPosition();
68+
}
69+
});
70+
},
71+
72+
selectActiveBanner() {
73+
// Filter out dismissed banners and sort by priority
74+
const availableBanners = this.banners
75+
.filter(banner => localStorage.getItem(`hideBanner_${banner.id}`) !== 'true')
76+
.sort((a, b) => b.priority - a.priority);
77+
78+
this.activeBanner = availableBanners[0] || null;
79+
80+
// Dispatch event for header to know if banner is visible
81+
window.dispatchEvent(new CustomEvent('banner-visibility-changed', {
82+
detail: { visible: !!this.activeBanner }
83+
}));
84+
},
85+
86+
dismissBanner() {
87+
if (this.activeBanner) {
88+
localStorage.setItem(`hideBanner_${this.activeBanner.id}`, 'true');
89+
this.activeBanner = null;
90+
this.bannerHeight = 0;
91+
this.updateBodyPadding();
92+
this.updateNavPosition();
93+
window.dispatchEvent(new CustomEvent('banner-visibility-changed', {
94+
detail: { visible: false, height: 0 }
95+
}));
96+
}
97+
},
98+
99+
updateBodyPadding() {
100+
const mainElement = document.querySelector('main');
101+
if (mainElement) {
102+
if (this.activeBanner) {
103+
mainElement.style.paddingTop = `calc(4rem + ${this.bannerHeight}px)`;
104+
} else {
105+
mainElement.style.paddingTop = '4rem';
106+
}
107+
}
108+
},
109+
110+
updateNavPosition() {
111+
const navElement = document.querySelector('.navigation');
112+
if (navElement) {
113+
if (this.activeBanner && this.bannerHeight) {
114+
navElement.style.top = `${this.bannerHeight}px`;
115+
} else {
116+
navElement.style.top = '0';
117+
}
118+
}
119+
}
120+
}
121+
}
122+
</script>
123+
1124
<!-- Header Area wrapper Starts -->
2125
<header id="header-wrap" class="relative">
3126
<!-- Navbar Start -->
4-
<div class="navigation fixed top-0 left-0 w-full z-30 duration-300 bg-white border-b border-gray-100">
127+
<div class="navigation fixed top-0 left-0 w-full z-40 duration-300 bg-white border-b border-gray-100 transition-all">
5128
<div class="container">
6129
<nav class="navbar flex justify-between items-center relative duration-300 h-16" x-data="{ isOpen: false, frameworksOpen: false, communityOpen: false }">
7130
<a class="navbar-brand" href="index.html">
@@ -58,9 +181,9 @@
58181
x-transition:enter-end="opacity-100 translate-y-0"
59182
x-cloak>
60183
<div class="flex flex-col space-y-2">
184+
<a href="about.html" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">About Us</a>
61185
<a href="https://github.com/Project-MONAI" target="_blank" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">GitHub</a>
62186
<a href="https://join.slack.com/t/projectmonai/shared_invite/zt-2t7z8e9tu-xE5SPw0TC8LUxyPVpl2WVQ" target="_blank" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">Join Slack</a>
63-
<a href="about.html" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">About Us</a>
64187
<div class="border-t border-gray-100 mt-2 pt-2">
65188
<div class="grid grid-cols-2 gap-1">
66189
<a href="https://twitter.com/ProjectMONAI" target="_blank" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">Twitter</a>
@@ -79,4 +202,4 @@
79202
</div>
80203
<!-- Navbar End -->
81204
</header>
82-
<!-- Header Area wrapper End -->
205+
<!-- Header Area wrapper End -->

‎components/scripts.html

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
<!-- Scripts Component -->
22
<!-- Common JavaScript Files -->
3-
<script src="./assets/js/wow.js"></script>
43
<script src="./assets/js/particles.min.js"></script>
54
<script src="./assets/js/countUp.min.js"></script>
65
<script src="./assets/js/main.js"></script>
76

8-
<!-- Initialize WOW.js -->
9-
<script>
10-
new WOW().init();
11-
</script>
12-
137
<!-- Performance Optimizations -->
148
<script>
159
// Defer non-critical images
@@ -37,8 +31,7 @@
3731
// Preload critical resources
3832
const preloadLinks = [
3933
'./assets/css/tailwind.css',
40-
'./assets/css/animate.css',
41-
'./assets/img/MONAI-logo_color.png'
34+
'./assets/img/MONAI-logo_color_full.png'
4235
];
4336

4437
preloadLinks.forEach(link => {

0 commit comments

Comments
 (0)