Merge pull request #43 from rtCamp/feature/social-media

Social media demo

app.js

@@ -67,8 +67,9 @@ const scenarios = [
 	'analytics',
 	'embedded-video',
 	'payment-gateway',
-	'user-preferences',
-	'gsi'
+	'personalization',
+	'gsi',
+	'social-media'
 ];
 scenarios.forEach(scenario => {
 	const scenarioRoutes = require(`./src/scenarios/${scenario}/routes`);

src/common/index.ejs

@@ -13,12 +13,14 @@
         <%= renderCard('Analytics Tracking', '🔎', '/analytics') %>
         <%= renderCard('Embedded Content', '📽️', '/embedded-video') %>
         <%= renderCard('E-Commerce', '🛒', '/ecommerce') %>
-        <%= renderCard('User preferences', '🎨', '/user-preferences') %>
+        <%= renderCard('Personalization', '🎨', '/personalization') %>
         <%= renderCard('Single Sign-On', '🔐', '/single-sign-on') %>
         <%= renderCard('Payment Gateway', '💳', '/payment-gateway') %>
         <%= renderCard('CHIPS', '🍪', '/chips') %>
-        <%= renderCard('Legacy GSI', '🔐', '/gsi','Testing the Legacy GSI') %>
+        <%= renderCard('Legacy GSI', '🔐', '/gsi') %>
+        <%= renderCard('Social Media', '👍', '/social-media') %>
     </div>
 </div>
 
 <%- include(commonPath + '/footer.ejs') %>
+👍

src/scenarios/user-preferences/index.ejs → src/scenarios/personalization/index.ejs

@@ -15,6 +15,6 @@
     <%- include(commonPath + '/internal-page/footer.ejs') %>
     </div>
 
-<script src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/user-preferences/user-preference.js"></script>
+<script src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/personalization/personalization.js"></script>
 
 <%- include(commonPath + '/footer.ejs') %>

src/scenarios/user-preferences/user-preference.ejs → src/scenarios/personalization/personalization.ejs

@@ -1,10 +1,10 @@
 document.addEventListener('DOMContentLoaded', () => {
-    const baseURL = '<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/user-preferences';
+    const baseURL = '<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/personalization';
     const pageContainer = document.getElementById('theme-container');
     const themeSwitcher = document.getElementById('dark-mode-switch');
 
     function updateUserPreference() {
-        fetch(`${baseURL}/get-user-preference`)
+        fetch(`${baseURL}/get-personalization`)
             .then(response => {
                 if (!response.ok) {
                     throw new Error('Network response was not ok');
@@ -23,7 +23,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function toggleTheme() {
-        fetch( `${baseURL}/set-user-preference`, {
+        fetch( `${baseURL}/set-personalization`, {
             method: 'POST',
             credentials: 'include',
             headers: { 'Content-Type': 'application/json' },

src/scenarios/user-preferences/routes.js → src/scenarios/personalization/routes.js

@@ -4,16 +4,16 @@ const router = express.Router();
 
 router.get('/', (req, res) => {
     res.render(path.join(__dirname,'index'), {
-        title: 'User Preferences'
+        title: 'Personalization'
     });
 });
 
-router.get( '/get-user-preference', ( req, res ) => {
+router.get( '/get-personalization', ( req, res ) => {
     const currentTheme = req.cookies.theme || 'light';
     res.json( { theme: currentTheme });
 });
 
-router.post( '/set-user-preference', ( req, res ) => {
+router.post( '/set-personalization', ( req, res ) => {
     const { theme } = req.body;
 
     if (!theme) {
@@ -31,10 +31,10 @@ router.post( '/set-user-preference', ( req, res ) => {
     res.status(200).send({ message: 'Success', theme : theme});
 });
 
-// Serve the user-preference.js file to the site
-router.get('/user-preference.js', (req, res) => {
+// 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,'user-preference'));
+    res.render(path.join(__dirname,'personalization'));
 });
 
 module.exports = router;

src/scenarios/social-media/index.ejs

@@ -0,0 +1,25 @@
+<%- include(commonPath + '/header.ejs') %>
+
+    <%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>
+        <div id="fb-root"></div>
+        <script
+            async
+            defer
+            crossorigin="anonymous"
+            src="https://connect.facebook.net/en_EN/sdk.js#xfbml=1&version=v19.0&appId=222635294526394"
+            nonce="T4XgOzUp"
+        ></script>
+        <div id="status" class="text-center font-bold text-lg my-4"></div>
+        <div class="flex justify-center">
+            <div
+                class="fb-like"
+                data-href="https://third-party-social-button.glitch.me/"
+                data-width=""
+                data-layout=""
+                data-action=""
+                data-size=""
+                data-share="true"
+            ></div>
+        </div>
+    <%- include(commonPath + '/internal-page/footer.ejs') %>
+<%- include(commonPath + '/footer.ejs') %>

src/scenarios/social-media/routes.js

@@ -0,0 +1,12 @@
+const express = require('express');
+const path = require('path');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+    // Send the default page
+    res.render(path.join(__dirname,'index'), {
+        title: 'Social media Like Button'
+    });
+});
+
+module.exports = router;