fix: solve remaining regressions

components/BackHome.js

@@ -13,7 +13,7 @@ function BackHome() {
           size="lg"
           cursor="pointer"
         >
-          <a>🏠 Retour à la Galerie</a>
+          🏠 Retour à la Galerie
         </Button>
       </Link>
     </Flex>

components/NavLinks.js

 import Image from "next/image";
-import {
-  Box,
-  Divider,
-  Center,
-  Text,
-  Flex,
-  Spacer,
-  Button,
-} from "@chakra-ui/react";
-import Head from "next/head";
-import Link from "next/link";
+import { Center, Text, Link, Button } from "@chakra-ui/react";
 
 function NavLinks({ prev, next }) {
   let prevText = next == 2 ? "Dernière" : "Précédente";
@@ -18,13 +8,13 @@ function NavLinks({ prev, next }) {
     <Center p="6" justify="space-between">
       <Link href={"/photos/" + prev}>
         <Button
-          as="a"
           borderRadius="full"
           colorScheme="gray"
           fontSize={["sm", "md", "xl"]}
           size="lg"
           mx={2}
           cursor="pointer"
+          textDecoration="none"
         >
           <Text mr={2}>⟸</Text>
           <Text>{prevText}</Text>
@@ -32,13 +22,13 @@ function NavLinks({ prev, next }) {
       </Link>
       <Link href={"/photos/" + next}>
         <Button
-          as="a"
           borderRadius="full"
           colorScheme="gray"
           fontSize={["sm", "md", "xl"]}
           size="lg"
           mx={2}
           cursor="pointer"
+          textDecoration="none"
         >
           <Text>{nextText}</Text>
           <Text ml={2}>⟹</Text>

lib/utils.js

 import path from "path";
 import fs from "fs";
-const sizeOf = require('image-size')
+const sizeOf = require("image-size");
 
 function getContentDirectory(name) {
   return path.join(process.cwd(), "public", name);
@@ -22,13 +22,13 @@ function getAllPhotos() {
   console.log(`gACD: total pictures: ${fileNames.length}`);
 
   return fileNames.map((f, i) => {
-    let 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)
+      next: getNextID(id),
     };
     console.log(`Photo ${photo.id} -> ${photo.prev} -> X -> ${photo.next}`);
     return photo;
@@ -39,26 +39,25 @@ function getPhotoById(id) {
   const contentDirectory = getContentDirectory(photoDir);
   const fileNames = fs.readdirSync(contentDirectory);
   const path = photoPath(fileNames[id - 1]);
-  return { id: id,
+  return {
+    id: id,
     path: path,
     dimensions: photoDimensions(path),
     prev: getPrevID(id),
-    next: getNextID(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;
+  return ((count + id) % count) + 1;
 }
 
 function getPrevID(id) {
   const contentDirectory = getContentDirectory(photoDir);
   const count = fs.readdirSync(contentDirectory).length;
-  return ((id+count-2) % count)+1;
+  return ((id - 1) % count) || count;
 }
 
-
-
 export { getAllPhotos, getPhotoById, getNextID, getPrevID };

pages/_app.js

 // pages/_app.js
-import { ChakraProvider, Divider, Box, Text } from "@chakra-ui/react";
-import Link from "next/link";
+import {
+  ChakraProvider,
+  Container,
+  Divider,
+  Box,
+  Text,
+  Link,
+  Stack,
+} from "@chakra-ui/react";
 
 function MyApp({ Component, pageProps }) {
   return (
     <ChakraProvider>
       <Component {...pageProps} />
       <Divider />
-      <Box m="2">
+      <Container
+        as={Stack}
+        maxW={"6xl"}
+        py={4}
+        direction={{ base: "column", md: "row" }}
+        spacing={2}
+        justify="center"
+        align={{ md: "center" }}
+      >
         <Text fontSize="sm" textAlign="center">
           Conçu par{" "}
           <Link
             href="https://me.plnech.fr"
+            isExternal
             _hover={{ textDecoration: "underline" }}
           >
-            Paul-Louis Nech
+            Paul-Louis
           </Link>{" "}
-          grace aux contenus partagés par les proches de Philippe -{" "}
-          <Link href="/credits">
-            <u>Crédits</u>
+          grace aux contenus partagés par les proches de Philippe.
+        </Text>
+        <Text fontSize="sm" >
+          <Link href="/credits" >
+            Crédits
           </Link>
         </Text>
-      </Box>
+      </Container>
     </ChakraProvider>
   );
 }

pages/credits.js

 // pages/index.js
 import Head from "next/head";
-import { Box, Container, Divider, Text, Wrap, WrapItem } from "@chakra-ui/react";
+import {
+  Box,
+  Container,
+  Divider,
+  Text,
+  Wrap,
+  WrapItem,
+} from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
+import BackHome from "../components/BackHome";
 
 export async function getStaticProps() {
   let credits = [
@@ -15,7 +23,11 @@ export async function getStaticProps() {
       text: "Pour l'hébergement de ces pages",
       link: "vercel.com",
     },
-    { title: "Next.JS", text: "Utilisé pour construire le site", link: "nextjs.org" },
+    {
+      title: "Next.JS",
+      text: "Utilisé pour construire le site",
+      link: "nextjs.org",
+    },
   ];
   return {
     props: {
@@ -26,11 +38,12 @@ export async function getStaticProps() {
 
 export default function Credits({ credits }) {
   return (
-    <div>
+    <Box p="2rem" bg="gray.200" minH="100vh">
       <Head>
         <title>Philippe Bureau - Crédits</title>
         <link rel="icon" href="/favicon.ico" />
-        <Box overflow="hidden" bg="gray.100" minH="100vh">
+      </Head>
+      <BackHome mt="10px" />
       <Container>
         <Text
           color="gray.700"
@@ -38,18 +51,18 @@ export default function Credits({ credits }) {
           m="1rem"
           textAlign="center"
           textDecoration="underline"
-              fontSize={["5xl", "5xl", "6xl", "6xl"]}
+          fontSize={["xl", "3xl", "4xl", "5xl"]}
         >
           Philippe Bureau - Crédits
         </Text>
       </Container>
-          <Wrap px="1rem" spacing={"4px"} justify="center">
+      <Wrap px="1rem" spacing={"4px"} justify="space-around">
         {credits.map((credit) => (
           <WrapItem
             key={"wrap-" + credit.title}
             m={"30px"}
             bg="white"
-                lineHeight="0"
+            // lineHeight="0"
             maxW="sm"
             borderWidth="1px"
             borderRadius={"10px"}
@@ -63,19 +76,12 @@ export default function Credits({ credits }) {
               {credit.title}
             </Text>
             <br />
-                <Text
-                  color="gray.500"
-                  fontWeight="semibold"
-                  fontSize="sm"
-                  m="1rem"
-                >
+            <Text color="gray.500" fontWeight="semibold" fontSize="sm" m="1rem">
               {credit.text}
             </Text>
           </WrapItem>
         ))}
       </Wrap>
     </Box>
-      </Head>
-    </div>
   );
 }

pages/index.js

@@ -71,7 +71,7 @@ export default function Home({ data, placeholders }) {
                     quality={20}
                     // placeholder="blur"
                     priority
-                    // blurDataURL={`${placeholders[photo.id]}`}
+                    blurDataURL={`${placeholders[photo.id]}`}
                   />
                 </Link>
               </WrapItem>

pages/photos/[id].js

@@ -70,7 +70,7 @@ export default function Photos({ photo, placeholder }) {
       </Head>
 
       <BackHome />
-      <NavLinks prev={pic.prev} next={pic.next} />
+      <NavLinks prev={photo.prev} next={photo.next} />
 
       <Center>
         <Link href={photo.path}>
@@ -89,7 +89,7 @@ export default function Photos({ photo, placeholder }) {
       </Center>
 
       <Divider my="1rem" />
-      <NavLinks prev={pic.prev} next={pic.next} />
+      <NavLinks prev={photo.prev} next={photo.next} />
     </Box>
   );
 }