From 4323a5e8e4e1a6ee32b32e8e7882121dfd007dad Mon Sep 17 00:00:00 2001
From: Jamie Thompson <bishbashboshjt@gmail.com>
Date: Tue, 5 Mar 2024 15:25:28 +0100
Subject: [PATCH] Add banner to warn about scams

---
 _data/messages.yml                |  1 +
 _includes/alert-banner-inner.html |  6 +++
 _includes/alert-banner.html       |  5 +++
 _includes/navbar-inner.html       |  1 +
 _layouts/frontpage.html           |  1 +
 _sass/layout/header.scss          | 17 ++++++++
 _sass/utils/_variables.scss       |  4 ++
 resources/js/functions.js         | 67 ++++++++++++++++++++++++++++++-
 8 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 _data/messages.yml
 create mode 100644 _includes/alert-banner-inner.html
 create mode 100644 _includes/alert-banner.html

diff --git a/_data/messages.yml b/_data/messages.yml
new file mode 100644
index 000000000..642a7ac55
--- /dev/null
+++ b/_data/messages.yml
@@ -0,0 +1 @@
+scam-banner: "**⚠️ Beware of Scams**: since Feb 2024, scammers are using [fake Scala websites to sell courses](https://www.scala-lang.org/blog/2024/03/01/fake-scala-courses.html), please check you are using an official source."
diff --git a/_includes/alert-banner-inner.html b/_includes/alert-banner-inner.html
new file mode 100644
index 000000000..135cf0bda
--- /dev/null
+++ b/_includes/alert-banner-inner.html
@@ -0,0 +1,6 @@
+{% comment %}use the variable 'message' to include markdown text to display in the alert.{% endcomment %}
+
+<div class="new-on-the-blog alert-warning" data-message_id="{{include.message_id}}">
+  <p>{{include.message|markdownify}}</p>
+  <span class="hide-alert"><i class="fa fa-close"></i></span>
+</div>
diff --git a/_includes/alert-banner.html b/_includes/alert-banner.html
new file mode 100644
index 000000000..7e25ff90d
--- /dev/null
+++ b/_includes/alert-banner.html
@@ -0,0 +1,5 @@
+{% comment %}use the variable 'message' to include markdown text to display in the alert.{% endcomment %}
+
+<header id="site-header" class="header-home">
+  {% include alert-banner-inner.html message=include.message message_id=include.message_id %}
+</header>
diff --git a/_includes/navbar-inner.html b/_includes/navbar-inner.html
index 879d6d391..771018af3 100644
--- a/_includes/navbar-inner.html
+++ b/_includes/navbar-inner.html
@@ -1,4 +1,5 @@
 <header id="site-header">
+	{% include alert-banner.html message=site.data.messages.scam-banner message_id='scam-courses-feb-2024' %}
 	<div class="wrap">
 		<nav class="navigation" role="menu">
 			<a href="/" class="navigation-bdand">
diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html
index 896d79a78..3daba46a9 100644
--- a/_layouts/frontpage.html
+++ b/_layouts/frontpage.html
@@ -8,6 +8,7 @@
 <!-- Header -->
   <header id="site-header" class="header-home">
     <div class="header-background">
+      {% include alert-banner-inner.html message=site.data.messages.scam-banner message_id='scam-courses-feb-2024' %}
       <div class="new-on-the-blog">
         <p>New on the blog:
           {% assign newPost = site.posts.first %}
diff --git a/_sass/layout/header.scss b/_sass/layout/header.scss
index 1e224a433..ff76e57cf 100755
--- a/_sass/layout/header.scss
+++ b/_sass/layout/header.scss
@@ -18,6 +18,23 @@
           padding: 10px 40px;
         }
 
+      &.alert-warning {
+        background: $warning-bg;
+        color: $warning-text;
+
+        a {
+          color: $warning-link;
+          font-weight: bold;
+          text-decoration: underline;
+
+          &:active,
+          &:focus,
+          &:hover {
+            text-decoration: none;
+          }
+        }
+      }
+
       span {
         position: absolute;
         right: 20px;
diff --git a/_sass/utils/_variables.scss b/_sass/utils/_variables.scss
index f8d6492c5..c77effa91 100755
--- a/_sass/utils/_variables.scss
+++ b/_sass/utils/_variables.scss
@@ -22,6 +22,10 @@ $apple-blue: #6dccf5;
 $std-link: #23aad1;
 $gray-heading: rgb(134, 161, 166);
 
+$warning-bg: #FFA500;
+$warning-link: #185eb3;
+$warning-text: #000;
+
 // $header-bg: #266270;
 $header-bg: #22525e;
 $banner-notice-bg: $gray-darkest;
diff --git a/resources/js/functions.js b/resources/js/functions.js
index 2a25bfedb..21b24315c 100644
--- a/resources/js/functions.js
+++ b/resources/js/functions.js
@@ -43,7 +43,7 @@ $(document).ready(function() {
 
 // Show Blog
 $(".hide").click(function() {
-    $(".new-on-the-blog").hide();
+    $(this).parent().hide(); // hide only the parent element of this button
     updatePointer();
 });
 
@@ -219,6 +219,71 @@ $(document).ready(function() {
   }
 });
 
+// Browser Storage Support (https://stackoverflow.com/a/41462752/2538602)
+function storageAvailable(type) {
+  try {
+    var storage = window[type],
+      x = '__storage_test__';
+    storage.setItem(x, x);
+    storage.removeItem(x);
+    return true;
+  }
+  catch (e) {
+    return false;
+  }
+}
+
+// Store preferences in local storage and use them
+$(document).ready(function () {
+
+  const Storage = (namespace) => {
+    return ({
+      getPreference(key, defaultValue) {
+        const res = localStorage.getItem(`${namespace}.${key}`);
+        return res === null ? defaultValue : res;
+      },
+      setPreference(key, value, onChange) {
+        const old = this.getPreference(key, null);
+        if (old !== value) { // activate effect only if value changed.
+          localStorage.setItem(`${namespace}.${key}`, value);
+          onChange(old);
+        }
+      }
+    });
+  };
+
+  function setupAlertCancel(alert, storage) {
+    const messageId = alert.data('message_id');
+    let onHide = () => { };
+    if (messageId) {
+      const key = `alert.${messageId}`;
+      const isHidden = storage.getPreference(key, 'show') === 'hidden';
+      if (isHidden) {
+        alert.hide();
+      }
+      onHide = () => storage.setPreference(key, 'hidden', _ => { });
+    }
+
+
+    alert.find('.hide-alert').click(function () {
+      alert.hide(), onHide();
+    });
+  }
+
+  function setupAllAlertCancels(storage) {
+    var alertBanners = $(".new-on-the-blog.alert-warning");
+    if (alertBanners.length) {
+      setupAlertCancel(alertBanners, storage);
+    }
+  }
+
+  if (storageAvailable('localStorage')) {
+    const PreferenceStorage = Storage('org.scala-lang.preferences');
+    setupAllAlertCancels(PreferenceStorage);
+  }
+
+});
+
 // OS detection
 function getOS() {
   var osname = "linux";