feat: add Photos page

- Added Photos page and linked it to routes and navigation
- Removed News page
- Implemented logic to fetch and parse Photos data from Google Sheets (photos.json)
- Added PHOTOS_GOOGLE_SHEET_URL to .env

Author: SeongilHeo

.env

@@ -4,4 +4,5 @@ RESEARCH_SHEET=https://docs.google.com/spreadsheets/d/1CPDVN579fjmiVVpo1qVcCeDRU
 PUBLICATIONS_SHEET=https://docs.google.com/spreadsheets/d/1CPDVN579fjmiVVpo1qVcCeDRUN1BEw_P8n_X12rXVBY/export?format=tsv&gid=698372256
 VIDEOS_SHEET=https://docs.google.com/spreadsheets/d/1CPDVN579fjmiVVpo1qVcCeDRUN1BEw_P8n_X12rXVBY/export?format=tsv&gid=889428793
 NEWS_SHEET=https://docs.google.com/spreadsheets/d/1CPDVN579fjmiVVpo1qVcCeDRUN1BEw_P8n_X12rXVBY/export?format=tsv&gid=1018366792
+PHOTOS_SHEET=https://docs.google.com/spreadsheets/d/1CPDVN579fjmiVVpo1qVcCeDRUN1BEw_P8n_X12rXVBY/export?format=tsv&gid=1578379541
 GDRIVE_UA=aria-gdrive-downloader/1.0

scripts/fetch-sheet.js

@@ -69,7 +69,7 @@ function preHome(allRecords) {
 
   allRecords.forEach(item => {
     if (item.Id === 'BannerImage') {
-      const filename = path.join("/images/banner", item.Filename)
+      const filename = path.join("/images/photos", item.Filename)
       BannerImages.push(filename);
       imageArchive.push({ link: String(item.Url).trim(), out: filename });
     } else {
@@ -170,6 +170,18 @@ function preVideos(allRecords) {
   return allRecords;
 }
 
+function prePhotos(allRecords) {
+  allRecords.forEach(item => {
+    if (!item.Image) return;
+    // Set Image path
+    item.Image = path.join("/images/photos", item.Filename);
+    // Collect image archive entry
+    imageArchive.push({ link: String(item.Url).trim(), out: item.Image });
+  });
+
+  return allRecords;
+}
+
 function processHome() {
   const tsvPath = path.resolve(__dirname, '../home.tsv');
   const outPath = path.resolve(__dirname, '../src/data/home.json');
@@ -218,7 +230,6 @@ function processResearch() {
   console.log(`Deleted TSV file: ${tsvPath}`);
 }
 
-
 function processVideos() {
   const tsvPath = path.resolve(__dirname, '../videos.tsv');
   const outPath = path.resolve(__dirname, '../src/data/videos.json');
@@ -266,19 +277,41 @@ function processNews() {
   console.log(`Deleted TSV file: ${tsvPath}`);
 }
 
+function processPhotos() {
+  const tsvPath = path.resolve(__dirname, '../photos.tsv');
+  const outPath = path.resolve(__dirname, '../src/data/photos.json');
+  const url = process.env.PHOTOS_SHEET;
+  if (!url) {
+    console.error('Environment variable PHOTOS_SHEET not set');
+    process.exit(1);
+  }
+  execSync(`curl -L "${url}" -o "${tsvPath}"`, { stdio: 'inherit' });
+  const allRecords = parseTsv(tsvPath);
+  const data = prePhotos(allRecords);
+  writeJson(outPath, data);
+  fs.unlinkSync(tsvPath);
+  console.log(`Deleted TSV file: ${tsvPath}`);
+}
+
 function main() {
   processHome();
   processPeople();
   processResearch();
   processVideos();
   processPublications();
   processNews();
+  processPhotos();
 
-
-  // Write aggregated image archive (if any)
-  if (imageArchive.length > 0) {
-    const archivePath = path.resolve(__dirname, 'image-archive.json');
-    writeJson(archivePath, imageArchive);
+  const archivePath = path.resolve(__dirname, 'image-archive.json');
+  // Remove duplicate entries from imageArchive based on 'link' and 'out'
+  const uniqueArchive = Array.from(
+    new Map(imageArchive.map(item => [`${item.link}|${item.out}`, item])).values()
+  );
+  
+  
+  // Write aggregated image archive
+  if (uniqueArchive.length > 0) {
+    writeJson(archivePath, uniqueArchive);
   } else {
     console.log('No image archive entries found.');
   }

src/data/index.jsx

@@ -4,13 +4,15 @@ import research from './research.json';
 import publications from './publications.json';
 import videos from './videos.json';
 import news from './news.json';
+import photos from './photos.json';
 
 export { 
     home,
     people,
     research,
     publications,
     videos,
-    news
+    news,
+    photos
 };
 

src/pages/Home.jsx

@@ -1,4 +1,3 @@
-import { Link } from 'react-router-dom';
 import { home, news } from '@/data';
 import { Carousel } from '@/components';
 
@@ -11,7 +10,7 @@ const Home = () => {
             {/* Banner */}
             <section>
                 <h1 className="text-center" >{home.Title}</h1>
-                <Carousel imgList={home.BannerImages}/>
+                <Carousel imgList={home.BannerImages} />
             </section>
 
             {/* About Us */}
@@ -22,15 +21,14 @@ const Home = () => {
 
             {/* News */}
             <section>
-                <Link to="/news" ><h2>Recent News</h2>
-                    <ul className="space-y-sm ml-8 list-disc">
-                        {topNews.map((item, index) => (
-                            <li key={`news-${index}`}>
-                                {item.Content}
-                            </li>
-                        ))}
-                    </ul>
-                </Link>
+                <h2>Recent News</h2>
+                <ul className="space-y-sm ml-8 list-disc">
+                    {topNews.map((item, index) => (
+                        <li key={`news-${index}`}>
+                            {item.Content}
+                        </li>
+                    ))}
+                </ul>
             </section>
         </div>
     );

src/pages/News.jsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react';
+import { Title } from '@/components';
+import { photos } from '@/data';
+
+const data = photos.reverse();
+
+const Image = ({ id, path }) => {
+    const placeholder = '/images/placeholder.png';
+    const src = path || placeholder;
+
+    return (
+        <img
+            src={src}
+            alt={`photo-image-${id}`}
+            className="aspect-video object-cover rounded-xl"
+            onError={e => {
+                e.currentTarget.onError = null;
+                e.currentTarget.src = "/images/placeholder.png";
+            }}
+        />
+    );
+}
+
+const formatDate = (dateStr) => {
+    if (!dateStr) return '';
+    const date = new Date(dateStr);
+    if (isNaN(date)) return dateStr;
+    const hasDay = dateStr.match(/\d{4}-\d{2}-\d{2}/);
+    const options = hasDay
+        ? { year: 'numeric', month: 'long', day: 'numeric' }
+        : { year: 'numeric', month: 'long' };
+    return date.toLocaleDateString('en-US', options);
+};
+
+const Photos = () => {
+    const [selectedImage, setSelectedImage] = useState(null);
+
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                setSelectedImage(null);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [selectedImage]);
+
+    return (
+        <div className="pages">
+            <Title name='Photos' />
+            {/* Photos */}
+            <ul className="grid grid-cols-1 md:grid-cols-2 gap-md">
+                {data.map((item, index) => (
+                    <li key={`photos-${index}`} className="text-sm flex flex-col space-y-sm">
+                        <div onClick={() => setSelectedImage(item.Image)} className="cursor-pointer">
+                            <Image id={item.Id} path={item.Image} />
+                        </div>
+                        {item.Description && <p>{item.Description}</p>}
+                        {item.Date && <p className="italic">{formatDate(item.Date)}</p>}
+                    </li>
+                ))}
+            </ul>
+            {selectedImage && (
+                <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50" onClick={() => setSelectedImage(null)}>
+                    <img src={selectedImage} alt="selected" className="max-h-6/10 max-w-6/10 rounded-xl" />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Photos;

src/pages/Photos.jsx

@@ -26,8 +26,8 @@ export const navigation = [
         to: "/videos",
     },
     {
-        title: "News",
-        key: "news",
-        to: "/news",
+        title: "Photos",
+        key: "photos",
+        to: "/photos",
     }
 ]

src/routes/navigation.jsx

@@ -5,7 +5,7 @@ const People = React.lazy(() => import('@/pages/People'));
 const Research = React.lazy(() => import('@/pages/Research'));
 const Publications = React.lazy(() => import('@/pages/Publications'));
 const Videos = React.lazy(() => import('@/pages/Videos'));
-const News = React.lazy(() => import('@/pages/News'));
+const Photos = React.lazy(() => import('@/pages/Photos'));
 
 
 export const routes = [
@@ -14,5 +14,5 @@ export const routes = [
   { path: '/research', element: Research, title: "Research" },
   { path: '/publications', element: Publications, title: "Publications" },
   { path: '/videos', element: Videos, title: "Videos" },
-  { path: '/news', element: News,title: "News" },
+  { path: '/photos', element: Photos, title: "Photos" },
 ];