Add banner to warn about scams

Author: bishabosha

Diff for: _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 for: _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 for: _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 for: _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 for: _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 for: _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 for: _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 for: 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";