feat: Modulated Links

TODO.md

-# FEAT
-- Pages detail
 # FIX
 - Support MOV (e.g. GABRIEL.mov)
 - Placeholder fleurs

lib/utils.js

 import path from "path";
 import fs from "fs";
+const sizeOf = require('image-size')
 
 function getContentDirectory(name) {
   return path.join(process.cwd(), "public", name);
@@ -11,23 +12,53 @@ function photoPath(fileName) {
   return "/" + photoDir + "/" + fileName;
 }
 
+function photoDimensions(fileName) {
+  return sizeOf("public/" + fileName);
+}
+
 function getAllPhotos() {
   const contentDirectory = getContentDirectory(photoDir);
   const fileNames = fs.readdirSync(contentDirectory);
   console.log(`gACD: total pictures: ${fileNames.length}`);
 
   return fileNames.map((f, i) => {
-    return {
-      id: i + 1, // Photos are 1-indexed
+    let id = i+1; // Photos are 1-indexed
+    let photo = {
+      id: id,
       path: photoPath(f),
+      dimensions: photoDimensions(photoPath(f)),
+      prev: getPrevID(id),
+      next: getNextID(id)
     };
+    console.log(`Photo ${photo.id} -> ${photo.prev} -> X -> ${photo.next}`);
+    return photo;
   });
 }
 
 function getPhotoById(id) {
   const contentDirectory = getContentDirectory(photoDir);
   const fileNames = fs.readdirSync(contentDirectory);
-  return { id: id, path: photoPath(fileNames[id - 1]) }; // Photos are 1-indexed
+  const path = photoPath(fileNames[id - 1]);
+  return { id: id,
+    path: path,
+    dimensions: photoDimensions(path),
+    prev: getPrevID(id),
+    next: getNextID(id)
+  }; // Photos are 1-indexed
+}
+
+function getNextID(id) {
+  const contentDirectory = getContentDirectory(photoDir);
+  const count = fs.readdirSync(contentDirectory).length;
+  return (id % count)+1;
 }
 
-export { getAllPhotos, getPhotoById };
+function getPrevID(id) {
+  const contentDirectory = getContentDirectory(photoDir);
+  const count = fs.readdirSync(contentDirectory).length;
+  return ((id+count-2) % count)+1;
+}
+
+
+
+export { getAllPhotos, getPhotoById, getNextID, getPrevID };

package.json

@@ -13,6 +13,7 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "framer-motion": "^4.1.17",
+    "image-size": "^1.0.0",
     "next": "10.2.3",
     "next-images": "^1.7.0",
     "react": "17.0.2",

pages/index.js

@@ -43,17 +43,17 @@ export default function Home({ data }) {
               Philippe Bureau - Galerie Photo
             </Text>
           </Container>
-          <Wrap px="2rem" spacing={"10px"} justify="center">
+          <Wrap px="1rem" spacing={"4px"} justify="center">
             {photos.map((photo) => (
               <WrapItem
                 key={"wrap-" + photo.id}
-                boxShadow="base"
+                boxShadow="dark-lg"
                 rounded="10px"
                 overflow="hidden"
                 m={3}
                 bg="white"
                 lineHeight="0"
-                _hover={{ boxShadow: "dark-lg" }}
+                _hover={{ boxShadow: "dark-lg", rounded:"20px" }}
               >
                 <Link href={`/photos/${photo.id}`}>
                   {/*<img

pages/photos/[id].js

@@ -30,6 +30,7 @@ export async function getStaticPaths() {
 }
 
 export async function getStaticProps({ params }) {
+<<<<<<< HEAD
   const photo = await getPhotoById(params.id);
   let placeholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mPkqgcAAJkAi3T5YcEAAAAASUVORK5CYII=";
 
@@ -50,6 +51,16 @@ export async function getStaticProps({ params }) {
     photo.dimensions.width /= 2;
     photo.dimensions.height /= 2;
     console.log("Resized: ", photo.dimensions.width, photo.dimensions.height);
+=======
+  const pic = await getPhotoById(params.id);
+
+  // Fix dimensions if really big picture
+  console.log("Pic dims: ", pic.dimensions.width, pic.dimensions.height);
+  if (pic.dimensions.width > 1000 || pic.dimensions.heigth > 1000) {
+    pic.dimensions.width = pic.dimensions.width / 2;
+    pic.dimensions.heigth = pic.dimensions.heigth / 2;
+    console.log("Resized: ", pic.dimensions.width, pic.dimensions.height);
+>>>>>>> 54109d5 (feat: Modulated Links)
   }
   return {
     props: {
@@ -67,6 +78,7 @@ export default function Photos({ photo, placeholder }) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
+<<<<<<< HEAD
       <BackHome />
       <Divider my="1rem" />
 
@@ -84,12 +96,44 @@ export default function Photos({ photo, placeholder }) {
             loading="eager"
           />
         </a>
+=======
+      <Flex px="1rem" justify="center" align="center">
+        <Link href={`/`}>
+          <Button
+            as="a"
+            borderRadius="full"
+            colorScheme="gray"
+            fontSize="lg"
+            size="lg"
+            cursor="pointer"
+          >
+            <a>🏠 Retour à la Galerie</a>
+          </Button>
+        </Link>
+      </Flex>
+      <Divider my="1rem" />
+
+      <Center>
+        <Image
+          src={pic.path}
+          width={pic.dimensions.width || 480}
+          height={pic.dimensions.height || 480}
+          // objectFit="cover"
+          quality={80}
+          priority
+          loading="eager"
+        />
+>>>>>>> 54109d5 (feat: Modulated Links)
       </Center>
       <Divider my="1rem" />
 
       <Center>
         <Box p="6">
+<<<<<<< HEAD
           <Link href={"/photos/" + photo.prev}>
+=======
+          <Link href={"/photos/" + pic.prev}>
+>>>>>>> 54109d5 (feat: Modulated Links)
             <Button
               as="a"
               borderRadius="full"
@@ -102,7 +146,11 @@ export default function Photos({ photo, placeholder }) {
               ⟸ Précédente
             </Button>
           </Link>
+<<<<<<< HEAD
           <Link href={"/photos/" + photo.next} m="15px">
+=======
+          <Link href={"/photos/" + pic.next} m="15px">
+>>>>>>> 54109d5 (feat: Modulated Links)
             <Button
               as="a"
               borderRadius="full"
@@ -112,9 +160,13 @@ export default function Photos({ photo, placeholder }) {
               cursor="pointer"
               m="15px"
             >
+<<<<<<< HEAD
               <p m="1">
                 {photo.next != 1 ? "Suivante  " : "Retour au début  "}
               </p>
+=======
+              <p m="1">{pic.next != 1 ? "Suivante  " : "Retour au début  "}</p>
+>>>>>>> 54109d5 (feat: Modulated Links)
               <p>⟹</p>
             </Button>
           </Link>

yarn.lock

@@ -1752,6 +1752,13 @@ ieee754@^1.1.4:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+image-size@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-1.0.0.tgz#58b31fe4743b1cec0a0ac26f5c914d3c5b2f0750"
+  integrity sha512-JLJ6OwBfO1KcA+TvJT+v8gbE6iWbj24LyDNFgFEN0lzegn6cC6a/p3NIDaepMsJjQjlUWqIC7wJv8lBFxPNjcw==
+  dependencies:
+    queue "6.0.2"
+
 import-fresh@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -2421,6 +2428,13 @@ querystring@^0.2.0:
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.1.tgz#40d77615bb09d16902a85c3e38aa8b5ed761c2dd"
   integrity sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==
 
+queue@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/queue/-/queue-6.0.2.tgz#b91525283e2315c7553d2efa18d83e76432fed65"
+  integrity sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==
+  dependencies:
+    inherits "~2.0.3"
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"