Merge pull request #24 from LoveYourself999/main

Adding video summaries for each conferences

Author: rootfs

src/component/Sidebar.js

@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
 import Papa from 'papaparse';
 import { useRouter } from 'next/router';
+import Link from 'next/link';
+
 
 const Sidebar = () => {
   const router = useRouter();
   // State to track the selected button, conference data, and dropdown visibility
   const [selectedButton, setSelectedButton] = useState(null);
   const [conferences, setConferences] = useState([]);
+  const [selectedDropDownButton, setSelectedDropDownButton] = useState(null);
   const [dropdownVisible, setDropdownVisible] = useState(false);
 
   // Function to handle button click and update selectedButton state
@@ -26,43 +29,43 @@ const Sidebar = () => {
     }
   };
 
-  // Function to fetch conference data from CSV file
-  const fetchConferences = () => {
-    fetch('https://raw.githubusercontent.com/cncf-tags/cloud-native-ai/main/cncf-youtube-channel-summarizer/data/sample_cncf_video_summary.csv')
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        return response.text();
-      })
-      .then((text) => {
-        // Parse CSV data using PapaParse and extract 'conference_name' column
-        Papa.parse(text, {
-          header: true,
-          skipEmptyLines: true,
-          complete: (result) => {
-            const uniqueConferences = new Set();
-            const conferencesData = result.data.reduce((acc, row) => {
-              const name = row['conference_name'].trim();
-              if (!uniqueConferences.has(name)) {
-                uniqueConferences.add(name);
-                acc.push({ name });
-              }
-              return acc;
-            }, []);
-            setConferences(conferencesData);
-          },
-        });
-      })
-      .catch((error) => {
-        console.error('Error fetching conference data:', error);
+// Function to fetch conference data from CSV file
+const fetchConferences = () => {
+  fetch('https://raw.githubusercontent.com/cncf-tags/cloud-native-ai/main/cncf-youtube-channel-summarizer/data/cncf_video_summary_29.csv')
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      return response.text();
+    })
+    .then((text) => {
+      // Parse CSV data using PapaParse and extract 'video_id' and 'conference_name' columns
+      Papa.parse(text, {
+        header: true,
+        skipEmptyLines: true,
+        complete: (result) => {
+          const uniqueConferences = new Set();
+          const conferencesData = result.data.reduce((acc, row) => {
+            const name = row['conference_name'].trim();
+            const videoId = row['video_id'].trim();
+            if (!uniqueConferences.has(name)) {
+              uniqueConferences.add(name);
+              acc.push({ video_id: videoId, conference_name: name });
+            }
+            return acc;
+          }, []);
+          setConferences(conferencesData);
+        },
       });
-  };
+    })
+    .catch((error) => {
+      console.error('Error fetching conference data:', error);
+    });
+};
 
   // Function to handle click on dropdown button
-  const handleDropdownButtonClick = () => {
-    // Navigate to the new page when dropdown button is clicked
-    router.push('/conferences/NewPage');
+  const handleDropdownButtonClick = (name) => {
+    setSelectedDropDownButton(name);
   };
 
   return (
@@ -86,9 +89,11 @@ const Sidebar = () => {
                   {/* Render conference items */}
                   {conferences.map((conference, index) => (
                     <li key={index} className="py-1">
-                      <button type="button" className="text-left text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 w-full p-1 rounded-lg transition" onClick={handleDropdownButtonClick}>
-                        {conference.name}
-                      </button>
+                      <Link href={'/conferences/'+ conference.video_id}>
+                        <button type="button" className={`flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 ${selectedDropDownButton === conference.video_id ? 'bg-blue-500 text-black' : ''}`} onClick={() => handleDropdownButtonClick(conference.video_id)}>
+                         {conference.conference_name}
+                        </button>
+                      </Link>
                     </li>
                   ))}
                 </ul>

src/pages/conferences/[id].js

@@ -0,0 +1,82 @@
+// pages/conferences/[conference_name].js
+
+import { useRouter } from 'next/router';
+import Papa from 'papaparse';
+
+export default function Conference({ conferences, allVideos }) {
+    const router = useRouter();
+
+    if (router.isFallback) {
+        return <div>Loading...</div>;
+    }
+
+    const sameConferences = allVideos.filter((video) => video.conference_name === conferences[0].conference_name);
+
+    return (
+        <div className="container">
+            <h1>{conferences[0].conference_name}</h1>
+            {sameConferences.map((conference, index) => (
+                <div key={index} className="conference">
+                    <p><strong>Video ID:</strong> {conference.video_id}</p>
+                    <p><strong>Video Summary:</strong> {conference.summary}</p>
+                    <p>-------------------------</p>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export async function getStaticPaths() {
+    try {
+        const response = await fetch('https://raw.githubusercontent.com/cncf-tags/cloud-native-ai/main/cncf-youtube-channel-summarizer/data/cncf_video_summary_29.csv');
+        if (!response.ok) {
+            throw new Error('Failed to fetch CSV');
+        }
+        const csvText = await response.text();
+        const { data: videos } = Papa.parse(csvText, { header: true });
+
+        const paths = videos.map((video) => ({
+            params: { id: video.video_id },
+        }));
+
+        return {
+            paths,
+            fallback: false, // or 'blocking' or true
+        };
+    } catch (error) {
+        console.error('Error fetching or parsing CSV:', error);
+        return {
+            paths: [],
+            fallback: false, // or 'blocking' or true
+        };
+    }
+}
+
+export async function getStaticProps({ params }) {
+    try {
+        const response = await fetch('https://raw.githubusercontent.com/cncf-tags/cloud-native-ai/main/cncf-youtube-channel-summarizer/data/cncf_video_summary_29.csv');
+        if (!response.ok) {
+            throw new Error('Failed to fetch CSV');
+        }
+        const csvText = await response.text();
+        const { data: videos } = Papa.parse(csvText, { header: true });
+        const conferences = videos.filter((video) => video.video_id === params.id);
+        if (conferences.length === 0) {
+            return {
+                notFound: true,
+            };
+        }
+
+        return {
+            props: {
+                conferences,
+                allVideos: videos,
+            },
+        };
+    } catch (error) {
+        console.error('Error fetching or parsing CSV:', error);
+        return {
+            notFound: true,
+        };
+    }
+}

src/pages/index.js

@@ -4,7 +4,7 @@ const Home = () => {
   const [data, setData] = useState('');
   useEffect(() => {
     // Fetch the CSV data from the server
-    fetch('https://raw.githubusercontent.com/cncf-tags/cloud-native-ai/main/cncf-youtube-channel-summarizer/data/sample_cncf_video_summary.csv')
+    fetch('https://raw.githubusercontent.com/cncf-tags/cloud-native-ai/main/cncf-youtube-channel-summarizer/data/cncf_video_summary_29.csv')
       .then((response) => response.text())
       .then((csvData) => setData(csvData));
   }, []);

src/styles/globals.css

@@ -26,6 +26,31 @@ body {
     rgb(var(--background-start-rgb));
 }
 
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  color: #333;
+  font-size: 2.5em;
+  margin-bottom: 10px;
+}
+
+p {
+  color: #666;
+  font-size: 1.2em;
+  line-height: 1.6;
+}
+
+p strong {
+  color: #000;
+}
+
 @layer utilities {
   .text-balance {
     text-wrap: balance;