postgresml · chillenberger · Dec 7, 2023 · Dec 7, 2023 · Dec 7, 2023 · Dec 7, 2023
diff --git a/pgml-dashboard/src/api/cms.rs b/pgml-dashboard/src/api/cms.rs
@@ -268,7 +268,7 @@ impl Collection {
             Some(cluster.context.user.clone())
         };
 
-        let mut layout = crate::templates::Layout::new(&title, Some(cluster.clone()));
+        let mut layout = crate::templates::Layout::new(&title, Some(cluster));
         if let Some(image) = image {
             // translate relative url into absolute for head social sharing
             let parts = image.split(".gitbook/assets/").collect::<Vec<&str>>();

diff --git a/pgml-dashboard/src/components/notifications/banner/banner_controller.js b/pgml-dashboard/src/components/notifications/banner/banner_controller.js
diff --git a/pgml-dashboard/src/components/notifications/banner/mod.rs b/pgml-dashboard/src/components/notifications/banner/mod.rs
diff --git a/...mponents/notifications/banner/banner.scss → .../marketing/alert_banner/alert_banner.scss b/...mponents/notifications/banner/banner.scss → .../marketing/alert_banner/alert_banner.scss
@@ -3,32 +3,10 @@
     margin-right: calc(var(--bs-gutter-x) * -0.5);
 }
 
-div[data-controller="notifications-banner"] {
+div[data-controller="notifications-marketing-alert-banner"] {
     .btn-tertiary {
         border: 0px;
     }
-    .news {
-        background-color: #{$gray-100};
-        color: #{$gray-900};
-        .btn-tertiary:hover {
-            filter: brightness(0.9);
-        }
-    }
-    .blog {
-        background-color: #{$neon-shade-100};
-        .btn-tertiary {
-            filter: brightness(1.5);
-        }
-    }
-    .launch {
-        background-color: #{$magenta-shade-200};
-        .btn-tertiary {
-            filter: brightness(1.5);
-        }
-    }
-    .tip {
-        background-color: #{$gray-900};
-    }
     .level1 {
         background-color: #FFFF00;
         color: #{$gray-900};
@@ -42,7 +20,7 @@ div[data-controller="notifications-banner"] {
     }
 
     .close-dark {
-        color: #{$gray-900};
+        color: #{$gray-300};
     }
     .close-light {
         color: #{$gray-100};

diff --git a/pgml-dashboard/src/components/notifications/marketing/alert_banner/mod.rs b/pgml-dashboard/src/components/notifications/marketing/alert_banner/mod.rs
@@ -0,0 +1,28 @@
+use crate::Notification;
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default, Clone)]
+#[template(path = "notifications/marketing/alert_banner/template.html")]
+pub struct AlertBanner {
+    pub notification: Option<Notification>,
+}
+
+impl AlertBanner {
+    pub fn new() -> AlertBanner {
+        AlertBanner { notification: None }
+    }
+
+    pub fn from_notification(notification: Option<&Notification>) -> AlertBanner {
+        match notification {
+            Some(notification) => {
+                return AlertBanner {
+                    notification: Some(notification.clone()),
+                }
+            }
+            None => return AlertBanner { notification: None },
+        }
+    }
+}
+
+component!(AlertBanner);
diff --git a/...onents/notifications/banner/template.html → ...ions/marketing/alert_banner/template.html b/...onents/notifications/banner/template.html → ...ions/marketing/alert_banner/template.html
@@ -1,23 +1,19 @@
 <% use crate::NotificationLevel; %>
 <turbo-frame id="notifications-banner" class="position-relative d-block">
-  <% if !remove_banner {%>
-  <div data-controller="notifications-banner">
+  <% if notification.is_some() {%>
+    <% let notification = notification.unwrap(); %>
+  <div data-controller="notifications-marketing-alert-banner">
     <div class="<%- notification.level.to_string() %> W-100">
       <div class="banner d-flex container p-1">
         <div class="flex-grow-1 d-flex flex-column flex-md-row justify-content-center align-items-center row-gap-0 column-gap-3 fw-semibold overflow-hidden">
           <div class="mx-3 overflow-hidden" style="max-width: 80%;">
             <p class="m-0 text-center"><%- notification.message %></p>
           </div>
-          <% if notification.link.is_some() {%>
-          <a class="btn btn-tertiary fw-semibold p-0" href="<%- notification.link.unwrap() %>" data-turbo="false">
-            Learn More 
-            <span class="material-symbols-outlined">arrow_forward</span>
-          </a>
-          <% } %>
         </div>
-        <% if notification.dismissible {%>
-        <a class="w-0 overflow-visible d-flex align-items-center" style="right: 4vw" href="/dashboard/notifications/remove_banner?id=<%- notification.id%>">
-          <span class="material-symbols-outlined <% if notification.level == NotificationLevel::Tip {%>close-light<% } else {%>close-dark<% } %>">
+
+        <% if notification.dismissible && notification.level != NotificationLevel::Level3 {%>
+        <a class="w-0 overflow-visible d-flex align-items-center" style="right: 4vw" href="/dashboard/notifications/remove_banner?id=<%- notification.id%>&alert=true">
+          <span class="material-symbols-outlined <% if notification.level == NotificationLevel::Level2 {%>close-light<% } else {%>close-dark<% } %>">
             close
           </span></a>
         <% } %>

diff --git a/pgml-dashboard/src/components/notifications/marketing/feature_banner/feature_banner.scss b/pgml-dashboard/src/components/notifications/marketing/feature_banner/feature_banner.scss
@@ -0,0 +1,65 @@
+div[data-controller="notifications-marketing-feature-banner"] {
+    .btn-tertiary {
+        border: 0px;
+        &:hover {
+            .more-info {
+                left: 0.5rem;
+            }
+        }
+        .more-info {
+            transition-duration: 0.5s;
+            transition-property: left;
+            left: 0rem;
+        }
+    }
+    .feature1 {
+        background-color: #{$slate-shade-100};
+        margin: 2px 0px; 
+        .btn-tertiary {
+            color: #{$gray-900};
+            --bs-btn-color: #{$gray-900};
+        }
+        .close {
+            color: #{$slate-shade-600};
+        }
+        .more-info {
+            color: #{$gray-100}
+        }
+    }
+    .feature2 {
+        background-color: #{$violet-shade-100};
+        margin: 2px 0px;
+        .btn-tertiary {
+            color: #{$gray-100};
+        }
+        .close {
+            color: #{$gray-200};
+        }
+        .more-info {
+            color: #{$gray-100}
+        }
+    }
+    .feature3 {
+        background-color: #{$gray-900};
+        .btn-tertiary {
+            color: #{$gray-100};
+        }
+        .close {
+            color: #{$gray-300};
+        }
+        .more-info {
+            color: #{$slate-shade-100}
+        }
+    }
+
+    .feature1, .feature2, .feature3 {
+        border-radius: $border-radius-xl;
+    }
+
+    .message-area {
+        max-width: 75vw;
+    }
+    .banner {
+        min-height: 2rem;
+    }
+}
diff --git a/pgml-dashboard/src/components/notifications/marketing/feature_banner/mod.rs b/pgml-dashboard/src/components/notifications/marketing/feature_banner/mod.rs
@@ -0,0 +1,28 @@
+use crate::Notification;
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default, Clone)]
+#[template(path = "notifications/marketing/feature_banner/template.html")]
+pub struct FeatureBanner {
+    pub notification: Option<Notification>,
+}
+
+impl FeatureBanner {
+    pub fn new() -> FeatureBanner {
+        FeatureBanner { notification: None }
+    }
+
+    pub fn from_notification(notification: Option<&Notification>) -> FeatureBanner {
+        match notification {
+            Some(notification) => {
+                return FeatureBanner {
+                    notification: Some(notification.clone()),
+                }
+            }
+            None => return FeatureBanner { notification: None },
+        }
+    }
+}
+
+component!(FeatureBanner);
diff --git a/pgml-dashboard/src/components/notifications/marketing/feature_banner/template.html b/pgml-dashboard/src/components/notifications/marketing/feature_banner/template.html
@@ -0,0 +1,37 @@
+<% use crate::NotificationLevel; %>
+<turbo-frame id="marketing-notifications-banner-feature" class="position-relative z-1">
+  <% if notification.is_some() {%>
+    <% let notification = notification.unwrap(); %>
+  <div data-controller="notifications-marketing-feature-banner">
+
+    <div class="<%- notification.level.to_string() %> <% if notification.level == NotificationLevel::Feature3 {%>main-gradient-border-card<% } %> rounded-3 W-100">
+      <div class="banner d-flex container">
+
+        <% let content = format!(
+          r#"
+          <{} class="{} flex-grow-1 d-flex flex-column flex-md-row justify-content-center align-items-center row-gap-0 column-gap-3 fw-semibold overflow-hidden">
+            <div class="px-3 py-3 py-sm-0 overflow-hidden">
+              <p class="m-0 text-center">{} {}</p>
+            </div>
+          </{}>
+          "#,
+          if notification.link.is_some() { "a" } else { "div" },
+          if notification.link.is_some() { "btn btn-tertiary p-0" } else { "" },
+          notification.message,
+          if notification.link.is_some() { r#"<span class="material-symbols-outlined more-info position-relative" style="top: 2px;">arrow_forward</span>"# } else { "" },
+          if notification.link.is_some() { "a" } else { "div" },
+        ); %>
+
+        <%- content %>
+
+        <% if notification.dismissible {%>
+        <a class="w-0 btn btn-tertiary overflow-visible d-flex align-items-start p-2" style="height: fit-content" href="/dashboard/notifications/remove_banner?id=<%- notification.id%>&alert=false">
+          <span class="material-symbols-outlined close">
+            close
+          </span></a>
+        <% } %>
+      </div>
+    </div>
+  </div>
+  <% } %>
+</turbo-frame>
diff --git a/pgml-dashboard/src/components/notifications/marketing/mod.rs b/pgml-dashboard/src/components/notifications/marketing/mod.rs
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/notifications/marketing/alert_banner
+pub mod alert_banner;
+pub use alert_banner::AlertBanner;
+
+// src/components/notifications/marketing/feature_banner
+pub mod feature_banner;
+pub use feature_banner::FeatureBanner;
diff --git a/pgml-dashboard/src/components/notifications/mod.rs b/pgml-dashboard/src/components/notifications/mod.rs
@@ -1,6 +1,5 @@
 // This file is automatically generated.
 // You shouldn't modify it manually.
 
-// src/components/notifications/banner
-pub mod banner;
-pub use banner::Banner;
+// src/components/notifications/marketing
+pub mod marketing;