Including the new demos

.env.example

@@ -7,3 +7,4 @@ domain-c=localhost # domain-ccc.com
 domain-c-background=bg-red-100
 port=8080 # port to listen on
 google-client-id= # google client id
+facebook-app-id= # facebook app id

app.js

@@ -34,6 +34,7 @@ app.use((req, res, next) => {
 	res.locals.domainB = process.env['domain-b'];
 	res.locals.domainC = process.env['domain-c'];
 	res.locals.googleClientId = process.env['google-client-id'];
+	res.locals.facebookAppId = process.env['facebook-app-id'];
 	res.locals.port = process.env.port;
 	res.locals.isPortPresent = req.get('host').includes(':');
 	res.locals.currentDomain = req.get( 'host' );
@@ -54,7 +55,7 @@ app.use((req, res, next) => {
 });
 
 // Mount routes for different demo types
-const demoTypes = ['chips', 'related-websites-sets', 'private-state-tokens', 'fedcm'];
+const demoTypes = ['chips', 'related-websites-sets', 'private-state-tokens', 'fedcm', 'storage-access-api'];
 demoTypes.forEach(demoType => {
 	const demoRoutes = require(`./src/demos/${demoType}/routes`);
 	app.use(`/${demoType}`, demoRoutes);  // Mount the routes on a path specific to the demo type
@@ -70,7 +71,8 @@ const scenarios = [
 	'personalization',
 	'personalization-localstorage',
 	'gsi',
-	'social-media'
+	'social-media',
+	'social-media-comments'
 ];
 scenarios.forEach(scenario => {
 	const scenarioRoutes = require(`./src/scenarios/${scenario}/routes`);

public/assets/js/main.js

@@ -4,8 +4,12 @@ document.addEventListener('DOMContentLoaded', function() {
     if (isIframe) {
         const mainHeader = document.querySelector('.main-header');
         const mainFooter = document.querySelector('.main-footer');
+        const internalPageHeader = document.querySelector('.internal-page-header');
+        const themeContainer = document.getElementById('theme-container');
 
         mainHeader?.remove(); 
-        mainFooter?.remove(); 
+        mainFooter?.remove();
+        internalPageHeader?.remove('hidden');
+        themeContainer?.classList.add('h-screen');
     }
 });

public/assets/styles/style.css

@@ -667,14 +667,6 @@ video {
   position: relative;
 }
 
-.right-8 {
-  right: 2rem;
-}
-
-.top-8 {
-  top: 2rem;
-}
-
 .z-50 {
   z-index: 50;
 }
@@ -833,8 +825,8 @@ video {
           appearance: none;
 }
 
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
 .flex-col {
@@ -861,24 +853,12 @@ video {
   gap: 1.5rem;
 }
 
-.space-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1005,11 +985,6 @@ video {
   text-align: center;
 }
 
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -1158,6 +1133,14 @@ video {
 }
 
 @media (min-width: 768px) {
+  .md\:w-\[60rem\] {
+    width: 60rem;
+  }
+
+  .md\:max-w-full {
+    max-width: 100%;
+  }
+
   .md\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }

src/common/index.ejs

@@ -9,17 +9,19 @@
 <% } %>
 
 <div class="container-lg mx-auto py-8">
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8 mt-8 w-[60rem] mx-auto max-w-full">
+    <div class="grid grid-cols-1  md:grid-cols-4 gap-6 mb-8 mt-8 w-full md:w-[60rem] mx-auto max-w-80 md:max-w-full">
         <%= renderCard('Analytics Tracking', '🔎', '/analytics') %>
         <%= renderCard('Embedded Content', '📽️', '/embedded-video') %>
-        <%= renderCard('E-Commerce', '🛒', '/ecommerce') %>
+        <%= renderCard('Shopping Cart', '🛒', '/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') %>
         <%= renderCard('Legacy GSI', '🔐', '/gsi') %>
-        <%= renderCard('Facebook', '👍', '/social-media') %>
+        <%= renderCard('Facebook Like', '👍', '/social-media') %>
+        <%= renderCard('Facebook Comments', '💬', '/social-media-comments') %>
+        <%= renderCard('CHIPS', '🍪', '/chips') %>
+        <%= renderCard('Storage Access API', '🗃️', '/storage-access-api') %>
     </div>
 </div>
 

src/common/internal-page/header.ejs

@@ -7,7 +7,7 @@
     %>
      <div class="container mx-auto pt-8 pb-20">
         <% if (title && displayHeader) { %>
-            <header>
+            <header class="internal-page-header">
                 <h1 class="text-3xl font-bold my-8 text-center text-slate-800"><%= title %></h1>
             </header>
         <% } %>

src/demos/storage-access-api/index.ejs

@@ -0,0 +1,5 @@
+<%- include(commonPath + '/header.ejs') %>
+    <%- include(commonPath + '/internal-page/header.ejs') %>
+        <iframe src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/storage-access-api/theme-selection" class="border-8 rounded w-full h-96 overflow-hidden"></iframe>
+    <%- include(commonPath + '/internal-page/footer.ejs') %>
+<%- include(commonPath + '/footer.ejs') %>

src/demos/storage-access-api/personalization.ejs

@@ -0,0 +1,103 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const baseURL = '<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/personalization';
+    const pageContainer = document.getElementById('theme-container');
+    const themeSwitcher = document.getElementById('dark-mode-switch');
+    const errorMessages = document.getElementById('status-message');
+    const loadButton    = document.getElementById('load-button');
+    const toggleContainer = document.querySelector('.dark-mode-toggle');
+    const isIframe = window.self !== window.top;
+    const containerClass = isIframe ? 'h-screen flex items-center justify-center' : 'flex items-center justify-center';
+    let hasStorageAccess = false;
+
+    document.hasStorageAccess().then(result => {
+        hasStorageAccess = result;
+        if ( hasStorageAccess ) {
+            updateUserPreference();
+        }
+    })
+
+    async function updateUserPreference() {
+        console.log('hasStorageAccess', hasStorageAccess);
+        if ( hasStorageAccess ) {
+            fetchAndApplyTheme();
+        } else {
+            try {
+                await document.requestStorageAccess();
+                toggleContainer.classList.remove('hidden');
+                loadButton.classList.add('hidden');
+                fetchAndApplyTheme();
+            } catch (error) {
+                console.error('There has been a problem with your fetch operation:', error);
+                errorMessages.textContent = `Error: ${error}`;
+            }
+        }   
+    }
+
+    function fetchAndApplyTheme() {
+        fetch(`${baseURL}/get-personalization`, {
+                method: 'GET',
+                credentials: 'include'
+            })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                        errorMessages.textContent = `Network response was not ok ${response.status} - ${response.statusText}`;
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    const theme = data.theme;
+                    pageContainer.className = `${containerClass} ${data.theme}`
+                    console.log('theme', theme);
+                    if (theme === 'dark') {
+                        themeSwitcher.checked = true;
+                    }
+                })
+                .catch(error => {
+                    console.error('There has been a problem with your fetch operation:', error);
+                    errorMessages.textContent = `Error: ${error.message}`;
+                });
+    }
+
+    function fetchSetPersonalization() {
+        fetch( `${baseURL}/set-personalization`, {
+            method: 'POST',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ theme: themeSwitcher?.checked ? 'dark' : 'light' })
+        })
+        .then(response => response.json())
+        .then(data => {
+            pageContainer.className = `${containerClass} ${data.theme}`;
+        });
+    }
+
+    async function toggleTheme() {
+        hasStorageAccess = await document.hasStorageAccess();
+
+        if( hasStorageAccess ) {
+            fetchSetPersonalization();
+        } else {
+            try {
+                await document.requestStorageAccess();
+                if ( await document.hasStorageAccess() ) {
+                    fetchSetPersonalization();
+                } else {
+                    console.error('User denied storage access');
+                    errorMessages.textContent = 'User denied storage access';
+                }
+            } catch (error) {
+                console.error('Error:', error);
+                errorMessages.textContent = `The request to storage access API was denied because the user never interacted with the top-level site context or the permission wasn't grant by the user`;
+            }
+        } 
+    }
+
+    window.toggleTheme = toggleTheme;
+    if (isIframe && !hasStorageAccess) {
+        console.log('In iframe');
+        toggleContainer.classList.add('hidden');
+        loadButton.classList.remove('hidden');
+        loadButton.addEventListener('click', updateUserPreference);
+    }
+});

src/demos/storage-access-api/routes.js

@@ -0,0 +1,49 @@
+const express = require('express');
+const path = require('path');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+    const currentDomain = req.get('host');
+    const template = currentDomain === res.locals.domainC ? 'theme-selection' : 'index';
+    res.render(path.join(__dirname,template), {
+        title: 'Storage Access API'
+    });
+});
+
+router.get('/theme-selection', (req, res) => {
+    res.render(path.join(__dirname,'theme-selection'), {
+        title: 'Storage Access API'
+    });
+});
+
+
+router.get( '/get-personalization', ( req, res ) => {
+    const currentTheme = req.cookies.theme || 'light';
+    res.json( { theme: currentTheme });
+});
+
+router.post( '/set-personalization', ( req, res ) => {
+    const { theme } = req.body;
+
+    if (!theme) {
+        res.status(400).send({ message: 'Invalid request' });
+
+    }
+
+    res.cookie('theme', theme, {
+        domain: res.locals.domainC,
+        maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
+        httpOnly: true,
+        sameSite: "none",
+        secure: true
+    });
+    res.status(200).send({ message: 'Success', theme : theme});
+});
+
+// Serve the personalization.js file to the site
+router.get('/personalization.js', (req, res) => {
+    res.set('Content-Type', 'application/javascript');
+    res.render(path.join(__dirname,'personalization'));
+});
+
+module.exports = router;

src/demos/storage-access-api/theme-selection.ejs

@@ -0,0 +1,22 @@
+<%- include(commonPath + '/header.ejs') %>
+    <div id="theme-container" class="flex items-center justify-center">
+    <%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>
+        <div class="text-red-500 p-4 text-sm" id="status-message"></div>
+        <button id="load-button" class="hidden px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300" onclick="toggleTheme()">
+            Load user preferences
+        </button>
+        <div class="dark-mode-toggle">
+            <input type="checkbox" id="dark-mode-switch" onclick="toggleTheme()" />
+            <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 src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/storage-access-api/personalization.js"></script>
+
+<%- include(commonPath + '/footer.ejs') %>

src/scenarios/ecommerce/routes.js

@@ -14,7 +14,7 @@ router.use((req, res, next) => {
 router.get('/', (req, res) => {
 	// Render the index view (homepage)
 	res.render(path.join(__dirname,'index'), {
-        title: 'E-commerce'
+        title: 'Shopping Cart'
     });
 });
 

src/scenarios/personalization-localstorage/routes.js

@@ -3,7 +3,9 @@ const path = require('path');
 const router = express.Router();
 
 router.get('/', (req, res) => {
-    res.render(path.join(__dirname,'index'), {
+    const currentDomain = req.get('host');
+    const pageTemplate = currentDomain === res.locals.domainC ? 'theme-selection' : 'index';
+    res.render(path.join(__dirname, pageTemplate), {
         title: 'Personalization with localStorage'
     });
 });

src/scenarios/personalization-localstorage/theme-selection.ejs

@@ -1,6 +1,6 @@
 <%- 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 id="theme-container" class="flex items-center justify-center">
+    <%- include(commonPath + '/internal-page/header.ejs', { containerType: 'sm'}) %>
         <div class="dark-mode-toggle">
             <input type="checkbox" id="dark-mode-switch" />
             <label for="dark-mode-switch">
@@ -19,7 +19,7 @@
 
     // 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;

src/scenarios/personalization/index.ejs

@@ -2,6 +2,7 @@
     <div id="theme-container">
     <%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>
         <div class="dark-mode-toggle">
+            <div class="text-red-500 p-4 text-sm" id="status-message"></div>
             <input type="checkbox" id="dark-mode-switch" onclick="toggleTheme()" />
             <label for="dark-mode-switch">
                 <span class="bullet">