show CTA notification based on build config

Author: svennam92

hack/publish-content.sh

@@ -8,6 +8,7 @@ cd $SCRIPT_DIR/..
 
 export ENABLE_INDEX="1"
 export MANIFESTS_REF="$BRANCH"
+export SHOW_NOTIFICATION="1"
 
 yarn install
 yarn workspace website clear

website/docusaurus.config.js

@@ -37,6 +37,9 @@ const config = {
   onBrokenMarkdownLinks: "warn",
   favicon: "img/favicon.png",
   noIndex: process.env.ENABLE_INDEX !== "1",
+  customFields: {
+    showNotification: process.env.SHOW_NOTIFICATION === "1",
+  },
 
   organizationName: "aws-samples",
   projectName: "eks-workshop-v2",

website/src/components/GlobalNotification/index.js

@@ -2,18 +2,47 @@ import React, { useState, useEffect } from 'react';
 import styles from './styles.module.css';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowUpRightFromSquare, faTimes } from "@fortawesome/free-solid-svg-icons";
-import notificationConfig from '../../config/notification.json';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+const notificationConfig = {
+  prefix: "Live:",
+  text: "Hands-on EKS Workshop Series -",
+  linkText: "Register",
+  linkUrl: "https://aws-experience.com/emea/smb/events/series/get-hands-on-with-amazon-eks?trk=d42ffbaa-d60a-4513-8a79-0bf36b9f33ce&sc_channel=el"
+};
 
 const GlobalNotification = () => {
   const [isVisible, setIsVisible] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
+  const { siteConfig } = useDocusaurusContext();
 
-  // Don't render if notification is disabled in config
-  if (!notificationConfig.enabled) return null;
+  // Don't render if notification is disabled via customFields
+  if (!siteConfig.customFields.showNotification) return null;
 
   useEffect(() => {
-    const dismissed = localStorage.getItem('eks-workshop-notification-dismissed');
-    if (!dismissed) {
+    const dismissedData = localStorage.getItem('eks-workshop-notification-dismissed');
+    
+    if (!dismissedData) {
+      // Not dismissed yet
+      setIsVisible(true);
+      setTimeout(() => setIsAnimating(true), 100);
+      return;
+    }
+    
+    try {
+      const { timestamp } = JSON.parse(dismissedData);
+      const now = new Date().getTime();
+      const daysSinceDismissed = (now - timestamp) / (1000 * 60 * 60 * 24);
+      
+      if (daysSinceDismissed > 7) {
+        // Expired, show notification again
+        localStorage.removeItem('eks-workshop-notification-dismissed');
+        setIsVisible(true);
+        setTimeout(() => setIsAnimating(true), 100);
+      }
+    } catch (e) {
+      // If there's any error parsing (old format), show notification
+      localStorage.removeItem('eks-workshop-notification-dismissed');
       setIsVisible(true);
       setTimeout(() => setIsAnimating(true), 100);
     }
@@ -23,7 +52,13 @@ const GlobalNotification = () => {
     setIsAnimating(false);
     setTimeout(() => {
       setIsVisible(false);
-      localStorage.setItem('eks-workshop-notification-dismissed', 'true');
+      
+      // Store dismissal with timestamp
+      const dismissalData = {
+        timestamp: new Date().getTime()
+      };
+      
+      localStorage.setItem('eks-workshop-notification-dismissed', JSON.stringify(dismissalData));
     }, 300);
   };