From 871f271a1d74f2d3aaa82da5226a79cedc5731ad Mon Sep 17 00:00:00 2001
From: ranjanmangla1 <ranjanmangla1@gmail.com>
Date: Mon, 3 Jul 2023 21:29:15 +0530
Subject: [PATCH 1/2] added support for dark mode in twitter timeline widget

Signed-off-by: ranjanmangla1 <ranjanmangla1@gmail.com>
---
 Gemfile.lock          |  1 -
 _includes/footer.html | 26 +++++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index cc3576249d..59bad84cd3 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -11,7 +11,6 @@ GEM
     eventmachine (1.2.7)
     eventmachine (1.2.7-x64-mingw32)
     ffi (1.15.5)
-    ffi (1.15.5-x64-mingw32)
     forwardable-extended (2.6.0)
     google-protobuf (3.21.12)
     http_parser.rb (0.8.0)
diff --git a/_includes/footer.html b/_includes/footer.html
index afaef7cf63..1eddb65b53 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -40,7 +40,7 @@ <h2><a {% if column.new_window %}target="_blank" {% endif %}
 
 			<ul class="feed">
 				<!-- <div class="col l4"> -->
-				<a class="twitter-timeline" data-width="320" data-height="320" data-theme="light"
+				<a class="twitter-timeline" id="twitter-timeline" data-width="320" data-height="320" data-theme="light"
 					data-link-color="#62ACCD" href="https://twitter.com/mesheryio"
 					data-chrome="nofooter circularborders noscrollbar">Tweets by Meshery</a>
 				<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
@@ -141,14 +141,38 @@ <h2><a {% if column.new_window %}target="_blank" {% endif %}
 		document.body.classList.toggle("dark-mode")
 		let layer5Logos = document.querySelectorAll("#layer5-logo");
 		let allLogos = document.querySelectorAll("#logo-dark-light");
+		let twitterTimeline = document.querySelector(".twitter-timeline");
+  		let parentTwitterTimeline = twitterTimeline.parentNode;
 		// console.log(allLogos)
 		if (document.body.classList.contains("dark-mode")) {
 			layer5Logos.forEach(e => e.src = '../assets/images/company-logo/layer5-dark-mode-logo.svg')
 			allLogos.forEach(e => e.src = e.dataset.logoForDark)
+		    twitterTimeline.dataset.theme = "dark";
 		} else {
 			layer5Logos.forEach(e => e.src = '../assets/images/company-logo/layer5-no-trim.svg')
 			allLogos.forEach(e => e.src = e.dataset.logoForLight)
+		    twitterTimeline.dataset.theme = "light";
 		}
+
+		parentTwitterTimeline.removeChild(twitterTimeline);
+
+		// Create a new Twitter timeline element
+		let newTimeline = document.createElement('a');
+		newTimeline.innerHTML = 'Tweets by Meshery';
+		newTimeline.setAttribute('class', 'twitter-timeline');
+		newTimeline.setAttribute('data-width', '320');
+		newTimeline.setAttribute('data-height', '320');
+		newTimeline.setAttribute('data-theme', twitterTimeline.dataset.theme);
+		newTimeline.setAttribute('data-link-color', '#62ACCD');
+		newTimeline.setAttribute('data-chrome', 'nofooter circularborders noscrollbar');
+		newTimeline.setAttribute('href', 'https://twitter.com/mesheryio');
+
+		// Append the new Twitter timeline element to the parent
+		parentTwitterTimeline.appendChild(newTimeline);
+
+		// Load the Twitter widget for the new timeline
+		window.twttr.widgets.load();
+
 		if (document.body.classList.contains("dark-mode")) {
 			localStorage.setItem("mode", "dark-mode")
 		} else {

From e4435d2b49391ffc850b00e99d00936bf8d471bc Mon Sep 17 00:00:00 2001
From: Ranjan Mangla <ranjanmangla1@gmail.com>
Date: Sun, 30 Jul 2023 00:12:00 +0530
Subject: [PATCH 2/2] Update footer.html

Signed-off-by: Ranjan Mangla <ranjanmangla1@gmail.com>
---
 _includes/footer.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_includes/footer.html b/_includes/footer.html
index 1eddb65b53..ede4f2c929 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -40,7 +40,7 @@ <h2><a {% if column.new_window %}target="_blank" {% endif %}
 
 			<ul class="feed">
 				<!-- <div class="col l4"> -->
-				<a class="twitter-timeline" id="twitter-timeline" data-width="320" data-height="320" data-theme="light"
+				<a class="twitter-timeline" data-width="320" data-height="320" data-theme="light"
 					data-link-color="#62ACCD" href="https://twitter.com/mesheryio"
 					data-chrome="nofooter circularborders noscrollbar">Tweets by Meshery</a>
 				<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
@@ -268,4 +268,4 @@ <h2><a {% if column.new_window %}target="_blank" {% endif %}
 </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>