Merge pull request #50 from rtCamp/feature/split-facebook-demo

Split facebook demo into comments and like
rtCamp · Feb 16, 2024 · 69003c1 · 69003c1
2 parents e047bcc + 84579b5
commit 69003c1
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 17 deletions.
diff --git a/app.js b/app.js
@@ -71,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`);

diff --git a/public/assets/styles/style.css b/public/assets/styles/style.css
@@ -825,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 {
@@ -1133,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));
   }

diff --git a/src/common/index.ejs b/src/common/index.ejs
@@ -12,13 +12,14 @@
     <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('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>

diff --git a/src/scenarios/ecommerce/routes.js b/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'
     });
 });
 

diff --git a/src/scenarios/social-media-comments/index.ejs b/src/scenarios/social-media-comments/index.ejs
@@ -0,0 +1,12 @@
+<%- 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_US/sdk.js#xfbml=1&version=v19.0&appId=<%= facebookAppId %>" nonce="GKOY1kp9"></script>
+
+        <div id="status" class="text-center font-bold text-lg mb-4"></div>
+        <div class="mb-6">
+            <div class="fb-comments" data-href="<%= currentDomain %>" data-width="320" data-numposts="5"></div>
+        </div>
+    <%- include(commonPath + '/internal-page/footer.ejs') %>
+<%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/social-media-comments/routes.js b/src/scenarios/social-media-comments/routes.js
@@ -0,0 +1,13 @@
+const express = require('express');
+const path = require('path');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+    // Send the default page
+    const currentDomain = req.get('host');
+    res.render(path.join(__dirname,'index'), {
+        title: 'Facebook Comments'
+    });
+});
+
+module.exports = router;
diff --git a/src/scenarios/social-media/index.ejs b/src/scenarios/social-media/index.ejs
@@ -6,7 +6,6 @@
 
         <div id="status" class="text-center font-bold text-lg mb-4"></div>
         <div class="mb-6">
-            <h2 class="block text-xl font-bold text-center mb-4">Like Button</h2>
             <!-- Your like button code -->
             <div class="fb-like" 
                 data-href="<%= currentDomain %>" 
@@ -17,14 +16,5 @@
                 data-share="false">
             </div>
         </div>
-
-        <div class="mb-6"> 
-            <h2 class="block text-xl font-bold text-center mb-4">Share Button</h2>
-            <div class="fb-share-button" data-href="<%= currentDomain %>" data-layout="button" data-size="large"></div>
-        </div>
-        <div class="mb-6">
-            <h2 class="text-xl font-bold text-center mb-4">Comments</h2>
-            <div class="fb-comments" data-href="<%= currentDomain %>" data-width="" data-numposts="5"></div>
-        </div>
     <%- include(commonPath + '/internal-page/footer.ejs') %>
 <%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/social-media/routes.js b/src/scenarios/social-media/routes.js
@@ -6,7 +6,7 @@ router.get('/', (req, res) => {
     // Send the default page
     const currentDomain = req.get('host');
     res.render(path.join(__dirname,'index'), {
-        title: 'Facebook'
+        title: 'Facebook Like Button'
     });
 });