add react tweet embed and tweet data (#266)

* [wip] add react tweet embed and tweet data * add key * add smooth scroll, better embed performance * update header * update slider settings * add css slider for smooth scroll * add key
pythonindia · Oct 8, 2023 · de3778d · de3778d
1 parent fb11bb5
commit de3778d
Show file tree

Hide file tree

Showing 8 changed files with 362 additions and 3 deletions.
diff --git a/components/tweetCarousel.js b/components/tweetCarousel.js
@@ -0,0 +1,122 @@
+import React from "react";
+// import TweetEmbed from "react-tweet-embed";
+import { Tweet } from "react-tweet";
+
+import tweets from "../data/tweets.yml";
+
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+// import fetchSheetData from "utils/googleSheets";
+
+const sliderSettings = {
+  slidesToShow: 4,
+  slidesToScroll: 1,
+  autoplay: true,
+  autoplaySpeed: 0,
+  speed: 6000,
+  cssEase: "linear",
+  accessibility: true,
+  draggable: true,
+  centerMode: true,
+  lazyLoad: true,
+  responsive: [
+    {
+      breakpoint: 480,
+      settings: {
+        slidesToShow: 1,
+        slidesToScroll: 1,
+      },
+    },
+  ],
+};
+
+const TweetCarousel = () => {
+  // const [tweets, setTweets] = useState([]);
+  // useEffect(() => {
+  //   async function fetchData() {
+  //     const response = await fetchTweets();
+  //     setTweets(response);
+  //   }
+  //   fetchData();
+
+  //   return () => {}
+
+  // }, []);
+
+  return (
+    <section className="bg-tweetCarousel home-section">
+      <div className="container">
+        <div className="row pt-4 pb-2 justify-center">
+          <div className="col-12">
+            <h2
+              className="com-head"
+              data-aos="fade-down"
+              data-aos-duration="1000"
+            >
+              Twitter wall of 💛
+            </h2>
+            {/* <Slider {...sliderSettings}>
+              {tweets.map((tweet) => (
+                <div className="light m-2 p-2" key={tweet.tweetID}>
+                  <Tweet
+                    id={tweet.tweetID}
+                    // tweetId={tweet.tweetID}
+                    // options={{
+                    //   cards: "hidden",
+                    //   dnt: true,
+                    //   conversation: "none",
+                    //   width: 300,
+                    // }}
+                  />
+                </div>
+              ))}
+            </Slider> */}
+            <SliderCSS />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// const fetchTweets = async () => {
+//   try {
+//     const sheetId = "1mbY29Kdl9GiH-X0tixz6OzTxJxgU3bF_U13EWxDfxCw";
+//     const sheetIndex = 0;
+//     let tweetsData = await fetchSheetData(sheetId, sheetIndex);
+//     tweetsData = tweetsData
+//       .filter((tweet) => tweet.Approved === "TRUE")
+//       .map((row) => ({
+//         tweetLink: row["Tweet link"],
+//         tweetID: row["Tweet ID"],
+//       }));
+//     return tweetsData;
+//   } catch (error) {
+//     console.error("Error fetching tweets", error);
+//     return [
+//       "1709248566903058482",
+//       "1708792976850436375",
+//       "1708786747465973986",
+//     ];
+//   }
+// };
+
+function SliderCSS() {
+  return (
+    <div class="slider">
+      <div class="slide-track">
+        {tweets.map((tweet) => (
+          <div class="slide" key={tweet.tweetID}>
+            <div className="light m-2 p-2" key={tweet.tweetID}>
+              <Tweet id={tweet.tweetID} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default TweetCarousel;
diff --git a/data/tweets.yml b/data/tweets.yml
@@ -0,0 +1,84 @@
+- tweetLink: https://x.com/kranirudha/status/1709248566903058482?s=20
+  tweetID: "1709248566903058482"
+- tweetLink: https://x.com/bobbasairohith/status/1708792976850436375?s=20
+  tweetID: "1708792976850436375"
+- tweetLink: https://x.com/navinpai/status/1708786747465973986?s=20
+  tweetID: "1708786747465973986"
+- tweetLink: https://x.com/bobbasairohith/status/1708682797345628167?s=20
+  tweetID: "1708682797345628167"
+- tweetLink: https://x.com/shobin23/status/1708549630504697932?s=20
+  tweetID: "1708549630504697932"
+- tweetLink: https://x.com/mukeshmahendran/status/1708514724554678350?s=20
+  tweetID: "1708514724554678350"
+- tweetLink: https://x.com/sravyaysk/status/1708500029269545411?s=20
+  tweetID: "1708500029269545411"
+- tweetLink: https://x.com/rajanikaruturi/status/1708493463740973178?s=20
+  tweetID: "1708493463740973178"
+- tweetLink: https://x.com/theOnlyMaDDogx/status/1708476003805470805?s=20
+  tweetID: "1708476003805470805"
+- tweetLink: https://x.com/Anupkkasi/status/1708383918125363687?s=20
+  tweetID: "1708383918125363687"
+- tweetLink: https://x.com/_guptarohit/status/1708195863032676856?s=20
+  tweetID: "1708195863032676856"
+- tweetLink: https://x.com/_JatinGoel/status/1708187021800513566?s=20
+  tweetID: "1708187021800513566"
+- tweetLink: https://x.com/ravigadila_/status/1708135100297478611?s=20
+  tweetID: "1708135100297478611"
+- tweetLink: https://x.com/cvam0000/status/1708122781093929374?s=20
+  tweetID: "1708122781093929374"
+- tweetLink: https://x.com/Chinmayee_Bd/status/1708092022391816591?s=20
+  tweetID: "1708092022391816591"
+- tweetLink: https://x.com/chinmaydas96/status/1708090546160546251?s=20
+  tweetID: "1708090546160546251"
+- tweetLink: https://x.com/SubinSiby/status/1708087785012486624?s=20
+  tweetID: "1708087785012486624"
+- tweetLink: https://x.com/sreekeshiyer/status/1708075012245348706?s=20
+  tweetID: "1708075012245348706"
+- tweetLink: https://x.com/mukeshmahendran/status/1708048696968098205?s=20
+  tweetID: "1708048696968098205"
+- tweetLink: https://x.com/rantsbyyudocaa/status/1708038353260884332?s=20
+  tweetID: "1708038353260884332"
+- tweetLink: https://x.com/praneethr86/status/1708015931383812597?s=20
+  tweetID: "1708015931383812597"
+- tweetLink: https://x.com/suroorhussainkv/status/1708014473989284295?s=20
+  tweetID: "1708014473989284295"
+- tweetLink: https://x.com/ProfSathish/status/1707808926446793037?s=20
+  tweetID: "1707808926446793037"
+- tweetLink: https://x.com/laishawadhwa/status/1707800779514589538?s=20
+  tweetID: "1707800779514589538"
+- tweetLink: https://x.com/amoghak17/status/1708546731183579241?s=20
+  tweetID: "1708546731183579241"
+- tweetLink: https://x.com/_guptarohit/status/1708468041993081156?s=20
+  tweetID: "1708468041993081156"
+- tweetLink: https://x.com/rushabh_mehta/status/1708053227852181668?s=20
+  tweetID: "1708053227852181668"
+- tweetLink: https://x.com/cheukting_ho/status/1708038561197339103?s=20
+  tweetID: "1708038561197339103"
+- tweetLink: https://x.com/mukeshmahendran/status/1707618923393487283?s=20
+  tweetID: "1707618923393487283"
+- tweetLink: https://x.com/KabirTheNomad/status/1708981111232328150?s=20
+  tweetID: "1708981111232328150"
+- tweetLink: https://x.com/YusharthSingh/status/1708830433772015990?s=20
+  tweetID: "1708830433772015990"
+- tweetLink: https://x.com/ConnectBhawna/status/1708705706881544530?s=20
+  tweetID: "1708705706881544530"
+- tweetLink: https://x.com/SubinSiby/status/1708548327657373882?s=20
+  tweetID: "1708548327657373882"
+- tweetLink: https://x.com/astromanhas/status/1708455230621319506?s=20
+  tweetID: "1708455230621319506"
+- tweetLink: https://x.com/astromanhas/status/1708442111656247740?s=20
+  tweetID: "1708442111656247740"
+- tweetLink: https://x.com/srijanshetty/status/1708357954829795528?s=20
+  tweetID: "1708357954829795528"
+- tweetLink: https://x.com/ROHITSHENDE1/status/1708035732848431461?s=20
+  tweetID: "1708035732848431461"
+- tweetLink: https://x.com/mihird9/status/1708030385136029712?s=20
+  tweetID: "1708030385136029712"
+- tweetLink: https://x.com/SOMANI__NIKHIL/status/1708021830588715054?s=20
+  tweetID: "1708021830588715054"
+- tweetLink: https://x.com/AdeebKhaja/status/1708018718905979249?s=20
+  tweetID: "1708018718905979249"
+- tweetLink: https://x.com/bhupeshimself/status/1707811911491084510?s=20
+  tweetID: "1707811911491084510"
+- tweetLink: https://x.com/amoghak17/status/1709618430670946750?s=20
+  tweetID: "1709618430670946750"
diff --git a/next.config.js b/next.config.js
@@ -13,7 +13,8 @@ module.exports = {
   images: {
     unoptimized: true,
   },
-  assetPrefix: '',
-  basePath: '/2023',
+  assetPrefix: "",
+  basePath: "/2023",
   trailingSlash: true,
+  transpilePackages: ['react-tweet']
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "react-icons": "^4.10.1",
     "react-markdown": "^8.0.7",
     "react-slick": "^0.29.0",
+    "react-tweet": "^3.1.1",
     "remark": "^14.0.3",
     "remark-html": "^15.0.2",
     "slick-carousel": "^1.8.1"

diff --git a/pages/pycon-landing.tsx b/pages/pycon-landing.tsx
@@ -8,6 +8,7 @@ import JourneyComponent from "components/journey";
 import SponsorComponent from "components/sponsor";
 import CommunityPartners from "components/communityPartners";
 import SubscribeSection from "components/subscribe";
+import TweetCarousel from "components/tweetCarousel";
 import RegistrationSection from "components/registration";
 import Partners from "components/partners";
 import LocalUserGroupsChapters from "components/localUserGroups";
@@ -34,6 +35,7 @@ export default function PyConIndiaWeb() {
     <div>
       <Header />
       <HeroBanner />
+      <TweetCarousel />
       <JourneyComponent />
       <Speakers
         speakers={speakers["keynoteSpeakers"]}
@@ -133,4 +135,4 @@ export default function PyConIndiaWeb() {
       <Footer />
     </div>
   );
-}
+}