Merge pull request #49 from kaskada-ai/feature/announcement-banner

Announcement Banner

_frontend/entrypoints/application.js

@@ -3,6 +3,7 @@ import SearchResults from "~/components/search/SearchResults.vue";
 import SearchForm from "~/components/search/SearchForm.vue";
 import { calculateWindowHeight } from "~/utils/styles";
 import { loadMarketoForms } from "../utils/marketo";
+import { initAnnouncement, initAnnouncementButton } from "../utils/announcement";
 
 const app = createApp({});
 app.component("searchForm", SearchForm);
@@ -12,6 +13,8 @@ app.mount("#main");
 addEventListener("DOMContentLoaded", function () {
   calculateWindowHeight();
   loadMarketoForms();
+  initAnnouncement();
+  initAnnouncementButton();
 
   window.addEventListener("resize", calculateWindowHeight);
 });

_frontend/utils/announcement.js

@@ -0,0 +1,68 @@
+import { getCookie, setCookie } from "./browser";
+import { hash } from "./str";
+
+function getAnnouncementHash() {
+  const announcement = document.querySelector(".announcement");
+  const content = announcement ? announcement.textContent || "" : "";
+  const hashedContent = hash(content.trim().replace(/\n\t/, ""));
+
+  return hashedContent;
+}
+
+function hideAnnouncement() {
+  const announcement = document.querySelector(".announcement");
+
+  if (announcement) {
+    const content = getAnnouncementHash();
+    setCookie("dismissed_announcement", content);
+    announcement.classList.add("d-none");
+  }
+}
+
+function showAnnouncement() {
+  const announcement = document.querySelector(".announcement");
+
+  if (announcement) {
+    announcement.classList.remove("d-none");
+  }
+}
+
+export function checkAnnounementStatus() {
+  const dismissedAnnouncement = getCookie("dismissed_announcement");
+  const content = getAnnouncementHash();
+  let isDismissed = false;
+
+  if (dismissedAnnouncement === content) {
+    isDismissed = true;
+  }
+
+  if (!isDismissed) {
+    showAnnouncement();
+  }
+
+  if (isDismissed) {
+    hideAnnouncement();
+  }
+}
+
+export function initAnnouncementButton() {
+  const button = document.querySelector(".announcement .close");
+
+  if (button) {
+    button.addEventListener("click", hideAnnouncement);
+  }
+}
+
+export function initAnnouncement() {
+  const dismissedAnnouncement = getCookie("dismissed_announcement");
+  const content = getAnnouncementHash();
+  let isDismissed = false;
+
+  if (dismissedAnnouncement === content) {
+    isDismissed = true;
+  }
+
+  if (!isDismissed) {
+    showAnnouncement();
+  }
+}

_frontend/utils/browser.js

@@ -0,0 +1,35 @@
+/**
+ * Get Cookie
+ * Get a cookie from the browser
+ *
+ * @param {string} name
+ * @return {string | null}
+ */
+export function getCookie(name) {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const match = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
+  if (match && match[2]) return decodeURIComponent(match[2]);
+  return null;
+}
+
+/**
+ * Set a cookie
+ * Set a cookie in browser
+ * @param {string} name
+ * @param {string} value
+ * @param {Date} expires
+ * @return {void}
+ */
+export function setCookie(name, value, expires) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const cookie = [`${name}=${value}`];
+  if (expires) {
+    cookie.push(`expires=${expires.toUTCString()}`);
+  }
+  cookie.push(`path=/`);
+  document.cookie = cookie.join("; ");
+}

_frontend/utils/str.js

@@ -0,0 +1,7 @@
+export function hash(s) {
+  let h = 9;
+  for (let i = 0; i < s.length; i++) {
+    h = Math.imul(h ^ s.charCodeAt(i), 9 ** 9);
+  }
+  return (h ^ (h >>> 9)).toString(16);
+}

_includes/announcement.html

@@ -0,0 +1,10 @@
+<div class="announcement d-none">
+  <p>
+    Preview the new Kaskada, embedded in Python. Easily build real-time AI applications in minutes.
+    <a href="https://kaskada.io/kaskada/">Read more</a>
+  </p>
+
+  <button class="close" title="Hide">
+    {% include icons/close.html %}
+  </button>
+</div>

_includes/header.html

@@ -1,4 +1,6 @@
+
 <nav class="navbar fixed-top navbar-expand-lg">
+  {% include announcement.html %}
   <div class="container">
     <a class="navbar-brand" href="{{ "/" | relative_url }}"> {%- include logos/kaskada.html -%} </a>
     <button

_includes/icons/close.html

@@ -0,0 +1,12 @@
+<svg
+  width="1em"
+  height="1em"
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M18.8343 7.115C19.2237 6.72564 19.2237 6.09436 18.8343 5.705C18.4449 5.31564 17.8137 5.31564 17.4243 5.705L12.5393 10.59L7.65431 5.705C7.26495 5.31564 6.63367 5.31564 6.24431 5.705C5.85495 6.09436 5.85495 6.72564 6.24431 7.115L11.1293 12L6.24431 16.885C5.85495 17.2744 5.85495 17.9056 6.24431 18.295C6.63367 18.6844 7.26495 18.6844 7.65431 18.295L12.5393 13.41L17.4243 18.295C17.8137 18.6844 18.4449 18.6844 18.8343 18.295C19.2237 17.9056 19.2237 17.2744 18.8343 16.885L13.9493 12L18.8343 7.115Z"
+    fill="currentColor"
+  />
+</svg>

_sass/components/_navbar.scss

@@ -1,8 +1,66 @@
 .navbar {
   background: #ffffff;
+  padding: 0;
+
+  &.navbar-expand-lg {
+    flex-flow: column;
+  }
+
+  > .container {
+    padding: 21px 1rem;
+  }
+
+  .announcement {
+    background: #26364a;
+    font-family: "Noto Sans", sans-serif;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.4em;
+    color: #ffffff;
+    width: 100%;
+    padding: 1rem;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    text-align: center;
+    gap: 2rem;
+
+    @include media-breakpoint-up(md) {
+      padding: 1rem 3rem;
+    }
+
+    > p {
+      flex: 2;
+      margin: 0;
+    }
+
+    a {
+      font: inherit;
+      color: #ffffff;
+      text-decoration: underline;
+
+      &:hover {
+        color: #ffffff;
+      }
+    }
+
+    button {
+      color: #ffffff;
+      opacity: 1;
+      text-shadow: none;
+
+      &:not(:disabled):hover,
+      &:not(:disabled):focus {
+        opacity: 1;
+      }
+    }
+  }
 
   .navbar-nav {
-    height: calc(var(--window-height, 100%) - 90px); // navbar height without padding
+    height: calc(
+      var(--window-height, 100%) - 90px
+    ); // navbar height without padding
     padding-top: 3rem;
     align-items: stretch;