Merge pull request #44 from rtCamp/feature/personalization-with-local…

…-storage Personalization demo with local storage
rtCamp · Feb 12, 2024 · a67b812 · a67b812
2 parents b5f9732 + 88aa59c
commit a67b812
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 7 deletions.
diff --git a/app.js b/app.js
@@ -68,6 +68,7 @@ const scenarios = [
 	'embedded-video',
 	'payment-gateway',
 	'personalization',
+	'personalization-localstorage',
 	'gsi',
 	'social-media'
 ];

diff --git a/public/assets/styles/style.css b/public/assets/styles/style.css
@@ -779,6 +779,10 @@ video {
   height: 24rem;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }

diff --git a/src/common/index.ejs b/src/common/index.ejs
@@ -4,7 +4,7 @@
     <a href="<%= link %>"
         class="flex flex-col justify-center items-center border border-blue p-4 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-md hover:bg-blue-500 hover:text-white aspect-square transition duration-300 size-40">
         <span class="block text-5xl mb-4"><%= emoji %></span>
-        <h3 class="font-bold mb-1"><%= title %></h3>
+        <h3 class="font-bold mb-1 text-center"><%= title %></h3>
     </a>
 <% } %>
 
@@ -14,6 +14,7 @@
         <%= renderCard('Embedded Content', '📽️', '/embedded-video') %>
         <%= renderCard('E-Commerce', '🛒', '/ecommerce') %>
         <%= renderCard('Personalization', '🎨', '/personalization') %>
+        <%= renderCard('Personalization with localStorage', '🖼️', '/personalization-localstorage') %>
         <%= renderCard('Single Sign-On', '🔐', '/single-sign-on') %>
         <%= renderCard('Payment Gateway', '💳', '/payment-gateway') %>
         <%= renderCard('CHIPS', '🍪', '/chips') %>

diff --git a/src/common/internal-page/header.ejs b/src/common/internal-page/header.ejs
@@ -3,9 +3,10 @@
             { 'sm'  : '30rem',
                 'md'  : '60rem',
                 'lg'  : '90rem' }[containerType] : '60rem';
+        const displayHeader = typeof showHeader !== 'undefined' ? showHeader : true;
     %>
      <div class="container mx-auto pt-8 pb-20">
-        <% if (title) { %>
+        <% if (title && displayHeader) { %>
             <header>
                 <h1 class="text-3xl font-bold my-8 text-center text-slate-800"><%= title %></h1>
             </header>

diff --git a/src/scenarios/personalization-localstorage/index.ejs b/src/scenarios/personalization-localstorage/index.ejs
@@ -0,0 +1,7 @@
+<%- include(commonPath + '/header.ejs') %>
+    <div id="theme-container">
+        <%- include(commonPath + '/internal-page/header.ejs') %>
+            <iframe src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/personalization-localstorage/theme-selection" class="border-8 rounded w-full h-96 overflow-hidden"></iframe>
+        <%- include(commonPath + '/internal-page/footer.ejs') %>
+    </div>
+<%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/personalization-localstorage/routes.js b/src/scenarios/personalization-localstorage/routes.js
@@ -0,0 +1,17 @@
+const express = require('express');
+const path = require('path');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+    res.render(path.join(__dirname,'index'), {
+        title: 'Personalization with localStorage'
+    });
+});
+
+router.get('/theme-selection', (req, res) => {
+    res.render(path.join(__dirname,'theme-selection'), {
+        title: 'Personalization'
+    });
+});
+
+module.exports = router;
diff --git a/src/scenarios/personalization-localstorage/theme-selection.ejs b/src/scenarios/personalization-localstorage/theme-selection.ejs
@@ -0,0 +1,41 @@
+<%- include(commonPath + '/header.ejs') %>
+    <div id="theme-container" class="h-screen flex items-center justify-center">
+    <%- include(commonPath + '/internal-page/header.ejs', {showHeader: false, containerType: 'sm'}) %>
+        <div class="dark-mode-toggle">
+            <input type="checkbox" id="dark-mode-switch" />
+            <label for="dark-mode-switch">
+                <span class="bullet">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="sun" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="moon" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/></svg>
+                </span>
+            </label>
+        </div>
+    <%- include(commonPath + '/internal-page/footer.ejs') %>
+    </div>
+
+<script>
+    const themeSwitcher = document.getElementById('dark-mode-switch');
+    const themeContainer = document.getElementById('theme-container');
+
+    // Check for saved theme preference in localStorage
+    const currentTheme = localStorage.getItem('theme');
+    console.log(currentTheme)
+    if (currentTheme === 'dark') {
+        themeContainer.classList.add(currentTheme);
+        themeSwitcher.checked = true;
+    }
+
+    // Theme toggle event listener
+    themeSwitcher.addEventListener('click', () => {
+        themeContainer.classList.toggle('dark');
+
+        // Update localStorage
+        if (themeContainer.classList.contains('dark')) {
+            localStorage.setItem('theme', 'dark');
+        } else {
+            localStorage.setItem('theme', 'light');
+        }
+    });
+</script>
+
+<%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/personalization/index.ejs b/src/scenarios/personalization/index.ejs
@@ -1,8 +1,6 @@
 <%- include(commonPath + '/header.ejs') %>
     <div id="theme-container">
-    <%- include(commonPath + '/internal-page/header.ejs') %>
-        <p class="text-lg mb-4 text-center">Here you can set you prefered theme.</p>
-
+    <%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>
         <div class="dark-mode-toggle">
             <input type="checkbox" id="dark-mode-switch" onclick="toggleTheme()" />
             <label for="dark-mode-switch">

diff --git a/src/scenarios/social-media/index.ejs b/src/scenarios/social-media/index.ejs
@@ -13,7 +13,7 @@
         <div class="flex justify-center">
             <div
                 class="fb-like"
-                data-href="https://third-party-social-button.glitch.me/"
+                data-href="<%= currentDomain %>"
                 data-width=""
                 data-layout=""
                 data-action=""

diff --git a/src/scenarios/social-media/routes.js b/src/scenarios/social-media/routes.js
@@ -4,8 +4,9 @@ const router = express.Router();
 
 router.get('/', (req, res) => {
     // Send the default page
+    const currentDomain = req.get('host');
     res.render(path.join(__dirname,'index'), {
-        title: 'Social media Like Button'
+        title: 'Social Media'
     });
 });