Add scam banner.

scala · Mar 19, 2024 · d792b9e · d792b9e
1 parent d8e91cd
commit d792b9e
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 2 deletions.
diff --git a/_data/messages.yml 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.html b/_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="alert-warning" data-message_id="{{include.message_id}}">
+    <p>{{include.message|markdownify}}</p>
+    <span class="hide-with-preference"><i class="fa fa-close"></i></span>
+  </div>
+</header>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,6 +5,8 @@
 
   <body>
 
+  {% include alert-banner.html message=site.data.messages.scam-banner message_id='scam-courses-feb-2024' %}
+
   <div id="wrap">
     {% include navbar.html %}
     <div id="main" class="container clear-top">
@@ -17,5 +19,3 @@
   </body>
 
 </html>
-
-
diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html
@@ -4,6 +4,7 @@
   {% include head.html %}
 
   <body class="home">
+  {% include alert-banner.html message=site.data.messages.scam-banner message_id='scam-courses-feb-2024' %}
   <div id="wrap">
     <div id="main">
       <div class="splash">

diff --git a/resources/css/main.scss b/resources/css/main.scss
@@ -34,6 +34,10 @@ $grey-color-light: lighten($grey-color, 40%);
 $grey-color-medium: lighten($grey-color, 7%);
 $grey-color-dark:  darken($grey-color, 25%);
 
+$warning-bg: #ffa500;
+$warning-link: #185eb3;
+$warning-text: #000;
+
 // Width of the content area
 $content-width:    800px;
 
@@ -53,6 +57,57 @@ $fa-font-path: "./../../bower_components/font-awesome/fonts";
 // Import partials from `sass_dir` (defaults to `_sass`)
 @import "base";
 
+#site-header {
+  background: $gray-darker;
+  .alert-warning {
+    text-align: center;
+    padding: 8px 0;
+    /*transition: $base-transition;*/
+    position: relative;
+      /*@include bp(medium) {
+        padding: 10px 40px;
+      }*/
+
+    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;
+      top: 3px;
+      z-index: 1;
+      cursor: pointer;
+      font-size: 1.275rem;
+      opacity: 0.6;
+      /*transition: $base-transition;*/
+      &:hover {
+        opacity: 1;
+      }
+    }
+    a {
+      color: #fff;
+      text-decoration: underline;
+      &:active,
+      &:focus,
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
 .home #main {
   overflow-x: hidden;
 }

diff --git a/resources/js/main.js b/resources/js/main.js
@@ -5,6 +5,20 @@
  * Document initialization
  **************************/
 
+// 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;
+  }
+}
+
 $(document).ready(function(){
     /* SEARCH FUNCTIONALITY */
     var search = $('.search input');
@@ -83,4 +97,54 @@ $(document).ready(function(){
         }
         $('#modal-description').modal('hide');
     });
+
+    // --- Preferences stored in localStorage ---
+
+    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-with-preference').click(function() {
+        alert.hide(), onHide();
+      });
+    }
+
+    function setupAllAlertCancels(storage) {
+      var alertBanners = $(".alert-warning");
+      if (alertBanners.length) {
+        setupAlertCancel(alertBanners, storage);
+      }
+    }
+
+    if (storageAvailable('localStorage')) {
+      console.log("doing something");
+      const PreferenceStorage = Storage('ch.epfl.scala.preferences');
+      setupAllAlertCancels(PreferenceStorage);
+    }
+
 });