feat: Details

lib/utils.js

@@ -2,18 +2,32 @@ import path from "path";
 import fs from "fs";
 
 function getContentDirectory(name) {
-  return path.join(process.cwd(), "public", name)
+  return path.join(process.cwd(), "public", name);
 }
 
-  function getAllPhotos() {
-  const path = "img/Diaporama"
-  const contentDirectory = getContentDirectory(path);
+const photoDir = "img/Diaporama";
+
+function photoPath(fileName) {
+  return "/" + photoDir + "/" + fileName;
+}
+
+function getAllPhotos() {
+  const contentDirectory = getContentDirectory(photoDir);
   const fileNames = fs.readdirSync(contentDirectory);
   console.log(`gACD: total pictures: ${fileNames.length}`);
 
-  return fileNames.map(f => path + "/" + f);
+  return fileNames.map((f, i) => {
+    return {
+      id: i + 1, // Photos are 1-indexed
+      path: photoPath(f),
+    };
+  });
+}
+
+function getPhotoById(id) {
+  const contentDirectory = getContentDirectory(photoDir);
+  const fileNames = fs.readdirSync(contentDirectory);
+  return { id: id, path: photoPath(fileNames[id - 1]) }; // Photos are 1-indexed
 }
 
-export {
-  getAllPhotos
-};
+export { getAllPhotos, getPhotoById };

pages/index.js

@@ -5,10 +5,10 @@ import { Box, Container, Text, Wrap, WrapItem } from "@chakra-ui/react";
 import Image from "next/image";
 import { getAllPhotos } from "../lib/utils";
 import { Img } from "@chakra-ui/react";
+import Link from "next/link";
 
-export async function getServerSideProps() {
-  const data = await getAllPhotos();
-  console.log(data);
+export async function getStaticProps() {
+  let data = await getAllPhotos();
   return {
     props: {
       data,
@@ -17,7 +17,6 @@ export async function getServerSideProps() {
 }
 
 export default function Home({ data }) {
-  console.log(data);
   const [photos, setPhotos] = useState(data);
   // TODO: Fallback with random flowers? fallbackSrc
   return (
@@ -27,7 +26,12 @@ export default function Home({ data }) {
         <link rel="icon" href="/favicon.ico" />
         <Box overflow="hidden" bg="gray.100" minH="100vh">
           <Container>
-            <Image src="/img/signal-2021-06-09-200337_001.jpeg" alt="me" width="64" height="64" />
+            <Image
+              src="/img/signal-2021-06-09-200337_001.jpeg"
+              alt="me"
+              width="32"
+              height="32"
+            />
             <Text
               color="gray.700"
               fontWeight="semibold"
@@ -40,9 +44,9 @@ export default function Home({ data }) {
             </Text>
           </Container>
           <Wrap px="2rem" spacing={"10px"} justify="center">
-            {photos.map((path) => (
+            {photos.map((photo) => (
               <WrapItem
-                key={"wrap-" + path}
+                key={"wrap-" + photo.id}
                 boxShadow="base"
                 rounded="10px"
                 overflow="hidden"
@@ -51,21 +55,25 @@ export default function Home({ data }) {
                 lineHeight="0"
                 _hover={{ boxShadow: "dark-lg" }}
               >
-                {/*<img
+                <Link href={`/photos/${photo.id}`}>
+                  {/*<img
                   key={"img-" + path}
                   src={path}
                   height="200px"
                   width="80px"
                   color="gray.700"
                 />*/}
-                <Img
-                  key={"img-" + path}
-                  src={path}
-                  height="180px"
-                  width="120px"
-                  objectFit="cover"
-                  color="gray.700"
-                />
+                  <Img
+                    key={"img-" + photo.path}
+                    src={photo.path}
+                    height="240px"
+                    width="240px"
+                    objectFit="cover"
+                    placeholder="img/Diaporama/f5b1d804-3860-4073-b280-69e54985c66f.jpg"
+                    color="gray.700"
+                    quality={100}
+                  />
+                </Link>
               </WrapItem>
             ))}
           </Wrap>