Merge pull request #33 from nconrad/main

add photo gallery components/examples

.eslintrc.js

@@ -27,5 +27,6 @@ module.exports = {
   'globals': {
     'require': true,
     'module': true,
+    'gapi': true
   }
 }

docusaurus.config.js

@@ -44,13 +44,15 @@ module.exports = {
           to: '/team',
           label: 'Team',
           position: 'left'
-        },
-        {
+        }, /* {
+          to: '/photos',
+          label: 'Photos',
+          position: 'left'
+        },*/ {
           to: '/docs/about/overview',
           position: 'left',
           label: 'Docs'
-        },
-        {
+        }, {
           type: 'dropdown',
           position: 'right',
           className: 'header-github-link',
@@ -107,6 +109,12 @@ module.exports = {
     }
     */
   },
+  scripts: [
+    {
+      src: 'https://apis.google.com/js/api.js',
+      async: true,
+    },
+  ],
   presets: [
     [
       '@docusaurus/preset-classic',

news/2023-10-30-joann-blog-hawaii.md

@@ -12,12 +12,12 @@ My name is Joann Lenart and I am a current senior at Northwestern University. As
 
 <!--truncate-->
 
-While in Hawaii, I observed some societal patterns and themes that were interesting to me. One of the first examples was at the airport. Directions and announcements were first stated in Native Hawaiian, then in English. Having done research with Indigenous groups in the past, this small detail has a broader impact regarding their status in the state. 
+While in Hawaii, I observed some societal patterns and themes that were interesting to me. One of the first examples was at the airport. Directions and announcements were first stated in Native Hawaiian, then in English. Having done research with Indigenous groups in the past, this small detail has a broader impact regarding their status in the state.
 
-Additionally, the environmental laws passed in Hawaii are noticeable and prevalent in a positive way. To enter national parks, shoes need to be scrubbed to prevent invasives. Plastic bags are banned and the single-use cups and utensils are all eco friendly. Certain chemicals are banned from sunscreens. These laws work here but they are not seen on the mainland. It appears the key for these environmental laws to pass and function is the need from citizens to also want to help the environment. Helping the environment is a collective effort and there must be motivation from both parties to combat the effects of climate change.  
+Additionally, the environmental laws passed in Hawaii are noticeable and prevalent in a positive way. To enter national parks, shoes need to be scrubbed to prevent invasives. Plastic bags are banned and the single-use cups and utensils are all eco friendly. Certain chemicals are banned from sunscreens. These laws work here but they are not seen on the mainland. It appears the key for these environmental laws to pass and function is the need from citizens to also want to help the environment. Helping the environment is a collective effort and there must be motivation from both parties to combat the effects of climate change.
 
 On Day 6 of the trip, the research team went to a water treatment plant to survey the area since a new Sage Node will eventually be installed there on a weather tower. The tower overlooked the town of Lahaina which unfortunately was devastated by the wildfires earlier in August. This node will be used to detect smoke and track temperatures to see which area is most vulnerable to wildfires to try to prevent another disaster from occurring. The community members are still recovering and are still terrified months after this devastation. Once the sage node is up, the team will work with the local community by creating a dashboard with accessible information such as if the air quality is healthy. Additionally, after discussing with Chris, a hydrologist, about this data, there is potential to give this data to the government and council in charge to decide what policies to pass and to use this data in court cases to pass climate legislation and advance environmental justice. It is about being transparent and having the local community involved.
 
 Despite not being a computer scientist, there are many areas where the social sciences can be bridged with the computer sciences. It is about how you use the data collected with the community groups most impacted. On paper I may have been an outlier with my background, but during discussions with many other scientists and researchers, it did not feel as if there was a gap between our research. Many computer scientists want to bring in social sciences to their work and be more than just programmers. There is work to be done between these fields but it will bring in many benefits later on.
 
-This was an amazing opportunity and I am very grateful to have gone :)  
+This was an amazing opportunity and I am very grateful to have gone :)

src/components/PhotoGallery.tsx

@@ -0,0 +1,44 @@
+import React, {useEffect, useState} from 'react'
+
+
+type Props = {
+  driveFolderID: string
+}
+
+export default function PhotoGallery(props: Props) {
+  const {driveFolderID} = props;
+
+  const [imgIDs, setImgIDs] = useState<string[]>()
+
+  useEffect(() => {
+    function listFilesInFolder(folderId) {
+      gapi.load('client', init)
+
+      async function init() {
+        await gapi.client.init({
+          apiKey: 'AIzaSyD0xq74f1zILUzUGWqKrEgMca-HGwCDPgA',
+          discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
+        })
+
+        const request = await gapi.client.drive.files.list({
+          'q': '\'' + folderId + '\' in parents',
+          'fields': 'nextPageToken, files(id, name)'
+        })
+
+        const ids = request.result.files.map(o => o.id)
+        setImgIDs(ids)
+      }
+    }
+
+    listFilesInFolder(driveFolderID)
+  }, [driveFolderID])
+
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {imgIDs?.map((id) =>
+        <img key={id} src={`https://drive.google.com/uc?export=view&id=${id}`} />)
+      }
+    </div>
+  )
+}

src/components/PhotoIndex.tsx

@@ -0,0 +1,148 @@
+import React, {useEffect, useState} from 'react'
+import styled from 'styled-components'
+import { Link, useLocation } from 'react-router-dom'
+
+
+import Card from '@mui/material/Card'
+
+
+
+async function listAllFiles(gapi, folderId) {
+  const query = `'${folderId}' in parents`
+  const fields = 'nextPageToken, files(id, name, mimeType)'
+  let files = []
+  let nextPageToken = null
+  do {
+    const response = await gapi.client.drive.files.list({
+      q: query,
+      fields: fields,
+      pageToken: nextPageToken,
+      pageSize: 1000,
+    })
+    files = files.concat(response.result.files);
+    nextPageToken = response.result.nextPageToken;
+  } while (nextPageToken)
+
+  const filesByDir = {}
+  for (const file of files) {
+    const {id, name, mimeType} = file
+
+    if (!(name in filesByDir)) {
+      filesByDir[name] = []
+    }
+
+    if (mimeType === 'application/vnd.google-apps.folder') {
+      filesByDir[name] = await listAllFiles(gapi, id)
+    } else {
+      filesByDir[name] = file
+    }
+  }
+  return filesByDir
+}
+
+
+
+type LinkCardProps = {
+  title: string
+  src: string
+  link: string
+  description?: string
+}
+
+export function LinkCard(props: LinkCardProps) {
+  const {title, src, link} = 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]" />
+      <h3 className="text-white absolute left-4 bottom-0 z-10">{title}</h3>
+    </Card>
+  )
+}
+
+
+type Props = {
+  driveFolderID: string
+}
+
+export default function FileIndex(props: Props) {
+  const {driveFolderID} = props
+
+  const params = new URLSearchParams(useLocation().search)
+  const collection = params.get('collection')
+
+  const [files, setFiles] = useState<string[]>()
+
+  useEffect(() => {
+    function listIndex(folderId) {
+      gapi.load('client', init)
+
+      async function init() {
+        await gapi.client.init({
+          apiKey: 'AIzaSyD0xq74f1zILUzUGWqKrEgMca-HGwCDPgA',
+          discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
+        })
+
+        const files = await listAllFiles(gapi, folderId)
+        console.log('files', files)
+
+        setFiles(files)
+      }
+    }
+    listIndex(driveFolderID)
+  }, [collection, driveFolderID])
+
+
+  return (
+    <Root className="flex flex-wrap gap-2">
+      {!collection && files &&
+        Object.keys(files).map(folderName => {
+          const filesByName = files[folderName]
+          const {id} = Object.values(filesByName)[0]
+
+          return (
+            <LinkCard
+              key={id}
+              title={folderName}
+              link={`/photos?collection=${folderName}`}
+              src={`https://drive.google.com/uc?export=view&id=${id}`}
+            />
+          )
+        })
+      }
+
+      {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}`} />)
+          }
+        </div>
+      }
+    </Root>
+  )
+}
+
+
+const Root = styled.div`
+  img {
+    max-height: 200px;
+  }
+
+  .card::after {
+    display: block;
+    position: relative;
+    background-image: linear-gradient(to bottom, transparent 0%, black 100%);
+    margin-top: -110px;
+    height: 110px;
+    width: 100%;
+    content: '';
+  }
+
+  .card:hover h3 {
+    color: rgb(0, 128, 199);
+    text-decoration: underline;
+  }
+`

src/components/home/StatusChart.tsx

@@ -15,18 +15,7 @@ import config from '../../config'
 
 
 const notShown = {
-  Scotland: ['W06B'],
-  Australia: [
-    'W04B',
-    'W04C',
-    'W04D',
-    'W04E',
-    'W04F',
-    'W050',
-    'W052',
-    'W053',
-    'W054'
-  ]
+  'Scotland': ['W06B']
 }
 
 const notShownVSNs = [].concat(...Object.values(notShown))

src/pages/Photos.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import Layout from '@theme/Layout'
+import { useLocation } from 'react-router-dom'
+
+import PhotoIndex from '../components/PhotoIndex'
+
+
+
+export default function Photos() {
+  const params = new URLSearchParams(useLocation().search)
+  const collection = params.get('collection')
+
+  return (
+    <Layout
+      title="Photo Gallery"
+      description="Photos of Node deployements, 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>
+        </div>
+      </div>
+    </Layout>
+  )
+}
+
+

src/theme/partners/CustomPartnerSidebar/index.tsx

@@ -26,8 +26,10 @@ export default function CustomPartnerSidebar() {
   const partner = partners.find(obj => obj.id == project_id)
   const {url} = partner || {}
 
+
   return (
     <div className="ml-8 my-8">
+
       {url &&
         <div className="mb-12">
           <h3>Website</h3>