Add banner to warn about scams (#2993)

Author: bishabosha

_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."

_includes/alert-banner.html

@@ -0,0 +1,8 @@
+{% comment %}use the variable 'message' to include markdown text to display in the alert.{% endcomment %}
+
+<header id="site-header" class="header-home">
+  <div class="new-on-the-blog alert-warning" data-message_id="{{include.message_id}}">
+    <p>{{include.message|markdownify}}</p>
+    <span class="hide"><i class="fa fa-close"></i></span>
+  </div>
+</header>

_layouts/root-content-layout.html

@@ -3,6 +3,8 @@
 
 <div class="navigation-fade-screen"></div>
 
+{% include alert-banner.html message=site.data.messages.scam-banner message_id='scam-courses-feb-2024' %}
+
 {% include navbar-inner.html %}
 
 <main id="inner-main">

_layouts/root-index-layout.html

@@ -2,28 +2,30 @@
 
 <div class="navigation-fade-screen"></div>
 
+{% include alert-banner.html message=site.data.messages.scam-banner message_id='scam-courses-feb-2024' %}
+
 {% include navbar-inner.html %}
 
 <main id="inner-main">
 
-	<!-- Title -->
-	<section class="title-page">
-		<div class="wrap">
-			<div class="content-title-documentation">
-
-				<h1>{{page.title}}</h1>
-				<div class="search-container">
-					<div class="icon-search">
-						<i class="fa fa-search"></i>
-					</div>
-					<input type="text" class="doc-search" id="doc-search-bar" placeholder="Search in doc...">
-					<ul class="result-container" id="result-container" style="display: none;"></ul>
-				</div>
-			</div>
-		</div>
-	</section>
-
-	{% comment %}Specific content from child layouts{% endcomment %} {{content}}
+  <!-- Title -->
+  <section class="title-page">
+    <div class="wrap">
+      <div class="content-title-documentation">
+
+        <h1>{{page.title}}</h1>
+        <div class="search-container">
+          <div class="icon-search">
+            <i class="fa fa-search"></i>
+          </div>
+          <input type="text" class="doc-search" id="doc-search-bar" placeholder="Search in doc...">
+          <ul class="result-container" id="result-container" style="display: none;"></ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  {% comment %}Specific content from child layouts{% endcomment %} {{content}}
 
 </main>
 

_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;

_sass/utils/_variables.scss

@@ -18,6 +18,10 @@ $gray-light: #E5EAEA;
 $gray-lighter: #F0F3F3;
 $apple-blue: #6dccf5;
 
+$warning-bg: #FFA500;
+$warning-link: #185eb3;
+$warning-text: #000;
+
 //-------------------------------------------------
 $headings-font-color: $gray-dark;
 $base-font-color: #4A5659;

resources/js/functions.js

@@ -72,11 +72,6 @@ $(document).ready(function() {
   hljs.highlightAll();
 });
 
-// Show Blog
-$(".hide").click(function() {
-  $(".new-on-the-blog").hide();
-});
-
 // Documentation menu dropdown toggle
 $(document).ready(function() { // DOM ready
   // If a link has a dropdown, add sub menu toggle.
@@ -435,9 +430,8 @@ $(document).ready(function() {
    *  that when the page is refreshed, the same tab will be selected.
    *  On page load, selects the tab corresponding to stored value.
    */
-  function setupTabs(tabs, namespace, defaultValue) {
-    const PreferenceStorage = Storage('org.scala-lang.docs.preferences');
-    const preferredValue = PreferenceStorage.getPreference(namespace, defaultValue);
+  function setupTabs(tabs, namespace, defaultValue, storage) {
+    const preferredValue = storage.getPreference(namespace, defaultValue);
 
     activateTab(tabs, preferredValue)
 
@@ -448,7 +442,7 @@ $(document).ready(function() {
         const parent = $(this).parent();
         const newValue = $(this).data('target');
 
-        PreferenceStorage.setPreference(namespace, newValue, oldValue => {
+        storage.setPreference(namespace, newValue, _ => {
           // when we set a new scalaVersion, find scalaVersionTabs except current one
           // and activate those tabs.
           activateTab(tabs.not(parent), newValue);
@@ -459,17 +453,48 @@ $(document).ready(function() {
     });
   }
 
-  if (storageAvailable('localStorage')) {
+  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').click(function() {
+      alert.hide(), onHide();
+    });
+  }
+
+  function setupAllTabs(storage) {
     var scalaVersionTabs = $(".tabsection.tabs-scala-version");
     if (scalaVersionTabs.length) {
-      setupTabs(scalaVersionTabs, "scalaVersion", "scala-3");
+      setupTabs(scalaVersionTabs, "scalaVersion", "scala-3", storage);
     }
     var buildToolTabs = $(".tabsection.tabs-build-tool");
     if (buildToolTabs.length) {
-      setupTabs(buildToolTabs, "buildTool", "scala-cli");
+      setupTabs(buildToolTabs, "buildTool", "scala-cli", storage);
+    }
+  }
+
+  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.docs.preferences');
+    setupAllTabs(PreferenceStorage);
+    setupAllAlertCancels(PreferenceStorage);
+  }
+
 });
 
 // OS detection