From 6f7d3f807bb206e9f64845220f51a58240d570dd Mon Sep 17 00:00:00 2001
From: nconrad <1194246+nconrad@users.noreply.github.com>
Date: Mon, 6 Nov 2023 21:21:02 -0600
Subject: [PATCH] use photo thumbnails instead of full res; minor edits

---
 src/components/PhotoIndex.tsx        | 20 ++++++++++----------
 src/pages/Photos.tsx                 | 22 +++++++++-------------
 src/pages/Science.tsx                |  2 +-
 src/pages/science/smoke-detection.md |  2 +-
 4 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/PhotoIndex.tsx b/src/components/PhotoIndex.tsx
index 0e1f218b..afea0231 100644
--- a/src/components/PhotoIndex.tsx
+++ b/src/components/PhotoIndex.tsx
@@ -2,7 +2,6 @@ import React, {useEffect, useState} from 'react'
 import styled from 'styled-components'
 import { Link, useLocation } from 'react-router-dom'
 
-
 import Card from '@mui/material/Card'
 
 
@@ -46,18 +45,19 @@ type LinkCardProps = {
   title: string
   src: string
   link: string
+  alt?: string
   description?: string
 }
 
 export function LinkCard(props: LinkCardProps) {
-  const {title, src, link} = props
+  const {title, src, link, alt} = props
   return (
     <Card
       className="card z-0 relative"
       component={Link}
       to={link}
     >
-      <img src={src} className="max-w-[256px] md:max-w-[220px] md:max-h-[220px]" />
+      <img src={src} alt={alt} className="max-w-[256px] md:max-w-[220px] md:max-h-[220px]" />
       <h3 className="text-white absolute left-4 bottom-0 z-10">{title}</h3>
     </Card>
   )
@@ -87,7 +87,6 @@ export default function FileIndex(props: Props) {
         })
 
         const files = await listAllFiles(gapi, folderId)
-        console.log('files', files)
 
         setFiles(files)
       }
@@ -97,18 +96,19 @@ export default function FileIndex(props: Props) {
 
 
   return (
-    <Root className="flex flex-wrap gap-2">
+    <Root className="flex flex-wrap gap-2 mx-auto">
       {!collection && files &&
         Object.keys(files).map(folderName => {
           const filesByName = files[folderName]
-          const {id} = Object.values(filesByName)[0]
+          const {id, name} = Object.values(filesByName)[0]
 
           return (
             <LinkCard
               key={id}
               title={folderName}
               link={`/photos?collection=${folderName}`}
-              src={`https://drive.google.com/uc?export=view&id=${id}`}
+              src={`https://drive.google.com/thumbnail?id=${id}`}
+              alt={name}
             />
           )
         })
@@ -116,9 +116,9 @@ export default function FileIndex(props: Props) {
 
       {collection && files &&
         <div className="flex flex-wrap gap-2">
-          {Object.values(files[collection]).map(({id}) =>
-            <img key={id} src={`https://drive.google.com/uc?export=view&id=${id}`} />)
-          }
+          {Object.values(files[collection]).map(({id, name}) =>
+            <img key={id} src={`https://drive.google.com/thumbnail?id=${id}`} alt={name} />
+          )}
         </div>
       }
     </Root>
diff --git a/src/pages/Photos.tsx b/src/pages/Photos.tsx
index d9c88ddb..1782b013 100644
--- a/src/pages/Photos.tsx
+++ b/src/pages/Photos.tsx
@@ -13,21 +13,17 @@ export default function Photos() {
   return (
     <Layout
       title="Photo Gallery"
-      description="Photos of Node deployements, student activities, and more"
+      description="Photos of Node deployments, student activities, and more"
     >
       <div className="md:max-w-screen-md lg:max-w-screen-lg mx-auto my-10">
-        <div className="flex">
-          <div>
-            <h1>
-              {collection ?
-                <><a href="/photos">Photos</a> / {collection}</> :
-                'Photo Galleries'
-              }
-            </h1>
-            <div>
-              <PhotoIndex driveFolderID="1zGnN-9HC_g180EimPgoBu9x5zYqpnKvQ" />
-            </div>
-          </div>
+        <h1>
+          {collection ?
+            <><a href="/photos">Photos</a> / {collection}</> :
+            'Photo Galleries'
+          }
+        </h1>
+        <div>
+          <PhotoIndex driveFolderID="1zGnN-9HC_g180EimPgoBu9x5zYqpnKvQ" />
         </div>
       </div>
     </Layout>
diff --git a/src/pages/Science.tsx b/src/pages/Science.tsx
index fffd6c44..8b159b2f 100644
--- a/src/pages/Science.tsx
+++ b/src/pages/Science.tsx
@@ -68,7 +68,7 @@ export default function Science() {
             src={require('@site/static/img/science/snow-detection.jpg').default}
           />
           <LinkCard
-            title="Scalable Edge Computing at APS"
+            title="Scalable AI@Edge computing at Argonne APS"
             link="/science/scalable-ci-in-aps"
             src={require('@site/static/img/science/scalable-ci-in-aps-icon.png').default}
           />
diff --git a/src/pages/science/smoke-detection.md b/src/pages/science/smoke-detection.md
index 9a5970e3..575011c7 100644
--- a/src/pages/science/smoke-detection.md
+++ b/src/pages/science/smoke-detection.md
@@ -1,4 +1,4 @@
-# Wildfire classifier
+# Wildfire Classifier
 
 ![](imgs/smoke_wildfire.jpg)