Skip to content

Commit

Permalink
Merge pull request #49 from kaskada-ai/feature/announcement-banner
Browse files Browse the repository at this point in the history
Announcement Banner
  • Loading branch information
EladioGaldamez authored Aug 22, 2023
2 parents fe34e4c + ec1eec6 commit dd7475c
Show file tree
Hide file tree
Showing 8 changed files with 196 additions and 1 deletion.
3 changes: 3 additions & 0 deletions _frontend/entrypoints/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -12,6 +13,8 @@ app.mount("#main");
addEventListener("DOMContentLoaded", function () {
calculateWindowHeight();
loadMarketoForms();
initAnnouncement();
initAnnouncementButton();

window.addEventListener("resize", calculateWindowHeight);
});
68 changes: 68 additions & 0 deletions _frontend/utils/announcement.js
Original file line number Diff line number Diff line change
@@ -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();
}
}
35 changes: 35 additions & 0 deletions _frontend/utils/browser.js
Original file line number Diff line number Diff line change
@@ -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("; ");
}
7 changes: 7 additions & 0 deletions _frontend/utils/str.js
Original file line number Diff line number Diff line change
@@ -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);
}
10 changes: 10 additions & 0 deletions _includes/announcement.html
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 2 additions & 0 deletions _includes/header.html
Original file line number Diff line number Diff line change
@@ -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
Expand Down
12 changes: 12 additions & 0 deletions _includes/icons/close.html
Original file line number Diff line number Diff line change
@@ -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>
60 changes: 59 additions & 1 deletion _sass/components/_navbar.scss
Original file line number Diff line number Diff line change
@@ -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;

Expand Down

0 comments on commit dd7475c

Please sign in to comment.