Init: Reboot, not much pictures

.gitignore

+node_modules/
+.next/
+.git.old/
+
+# TODO: Video Content
+*.MOV
+*.mp4

README.md

+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

TODO.md

+# FIX
+- Support MOV (e.g. GABRIEL.mov)
+- Placeholder fleurs

components/Avatar.js

+import Image from 'next/image'
+
+function Avatar() {
+  return <Image src="/images/me.png" alt="me" width="64" height="64" />
+}
+
+export default Avatar

components/BackHome.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";
+
+
+function BackHome() {
+  return (
+    <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>);
+}
+
+export default BackHome

lib/api.js

+export const getCuratedPhotos = async () => {
+  const res = await fetch(
+    `https://api.pexels.com/v1/curated?page=11&per_page=18`,
+    {
+      headers: {
+        Authorization: API_KEY,
+      },
+    }
+  );
+  const responseJson = await res.json();
+  return responseJson.photos;
+};

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);
+}
+
+const photoDir = "img/Diaporama";
+
+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) => {
+    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);
+  const path = photoPath(fileNames[id - 1]);
+  let photo = { id: id,
+    path: path,
+    dimensions: photoDimensions(path),
+    prev: getPrevID(id),
+    next: getNextID(id),
+  }; // Photos are 1-indexed
+  console.log(`Photo ${photo.id} -> ${photo.prev} -> X -> ${photo.next}`);
+  return photo;
+}
+
+function getNextID(id) {
+  const contentDirectory = getContentDirectory(photoDir);
+  const count = fs.readdirSync(contentDirectory).length;
+  return ((count+id) % count)+1;
+}
+
+function getPrevID(id) {
+  const contentDirectory = getContentDirectory(photoDir);
+  const count = fs.readdirSync(contentDirectory).length;
+  return (id-1) % count || count;
+}
+
+
+
+export { getAllPhotos, getPhotoById, getNextID, getPrevID };

next.config.js

+// next.config.js
+module.exports = {
+  images: {
+      domains: [
+        'res.cloudinary.com'
+      ],
+  },
+}

package.json

+{
+  "name": "next-image-gallery",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 8000",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "^1.0.13",
+    "@chakra-ui/react": "^1.6.3",
+    "@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",
+    "react-dom": "17.0.2"
+  }
+}

pages/_app.js

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

pages/credits.js

+// pages/index.js
+import Head from "next/head";
+import {
+  Box,
+  Container,
+  Divider,
+  Spacer,
+  Text,
+  Card,
+  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 = [
+    {
+      title: "Famille et Amis",
+      text: "Pour avoir créé tous ces bons moments et avoir partagé leurs photos/vidéos",
+    },
+    {
+      title: "Vercel",
+      text: "Pour l'hébergement de ces pages",
+      link: "vercel.com",
+    },
+    {
+      title: "Next.JS",
+      text: "Utilisé pour construire le site",
+      link: "nextjs.org",
+    },
+  ];
+  return {
+    props: {
+      credits,
+    },
+  };
+}
+
+export default function Credits({ credits }) {
+  return (
+    <Box p="2rem" bg="gray.200" minH="100vh">
+      <Head>
+        <title>Crédits</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <BackHome />
+      <Divider my="1rem" />
+
+      <Container>
+        <Text
+          color="gray.700"
+          fontWeight="semibold"
+          m="1rem"
+          textAlign="center"
+          fontSize={["xl", "xl", "2xl", "3xl"]}
+        >
+          Philippe Bureau - Crédits
+        </Text>
+      </Container>
+
+      <Wrap px="1rem" spacing={"4px"} justify="space-around">
+        {credits.map((credit) => (
+          <WrapItem
+            key={"wrap-" + credit.title}
+            m={"30px"}
+            bg="white"
+            maxW="sm"
+            borderWidth="1px"
+            borderRadius={"10px"}
+          >
+              <Text
+                color="gray.700"
+                fontWeight="semibold"
+                fontSize="xl"
+                gravity="center"
+                m="1rem"
+                p={2}
+              >
+                {credit.title}
+              </Text>
+              <Text
+                color="gray.500"
+                fontWeight="semibold"
+                fontSize="sm"
+                m="1rem"
+                p={3}
+              >
+                {credit.text}
+              </Text>
+          </WrapItem>
+        ))}
+      </Wrap>
+    </Box>
+  );
+}

pages/index.js

+// pages/index.js
+import Head from "next/head";
+import React, { useState } from "react";
+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 getStaticProps() {
+  let data = await getAllPhotos();
+  return {
+    props: {
+      data,
+    },
+  };
+}
+
+export default function Home({ data }) {
+  const [photos, setPhotos] = useState(data);
+  // TODO: Fallback with random flowers? fallbackSrc
+  return (
+    <div>
+      <Head>
+        <title>Philippe Bureau - Galerie</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Box overflow="hidden" bg="gray.100" minH="100vh">
+        <Container>
+          <Text
+            color="gray.700"
+            fontWeight="semibold"
+            mx="2rem"
+            textAlign="center"
+            fontSize={["lg", "xl", "3xl", "3xl"]}
+          >
+            Philippe Bureau - Galerie Photo
+          </Text>
+        </Container>
+        <Wrap px="1rem" spacing={"4px"} justify="center">
+          {photos.map((photo) => (
+            <WrapItem
+              key={"wrap-" + photo.id}
+              boxShadow="dark-lg"
+              rounded="10px"
+              overflow="hidden"
+              m={"30px"}
+              bg="white"
+              lineHeight="0"
+              _hover={{ boxShadow: "dark-lg", rounded: "20px" }}
+            >
+              <a href={`/photos/${photo.id}`}>
+                {/*<img
+                  key={"img-" + path}
+                  src={path}
+                  height="200px"
+                  width="80px"
+                  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}
+                />
+              </a>
+            </WrapItem>
+          ))}
+        </Wrap>
+      </Box>
+    </div>
+  );
+}

pages/photos/[id].js

+import { getPhotoById, getAllPhotos } from "../../lib/utils";
+import {
+  Box,
+  Divider,
+  Center,
+  Text,
+  Flex,
+  Spacer,
+  Button,
+} from "@chakra-ui/react";
+import Image from "next/image";
+import Head from "next/head";
+import Link from "next/link";
+import BackHome from "../../components/BackHome";
+import { InfoIcon, AtSignIcon } from "@chakra-ui/icons";
+import { Img } from "@chakra-ui/react";
+
+export async function getStaticPaths() {
+  const photos = await getAllPhotos();
+
+  // Get the paths we want to pre-render based on posts
+  const paths = photos.map((photo) => ({
+    params: { id: "" + photo.id },
+  }));
+
+  return {
+    paths: paths, // render page for all photos
+    fallback: false, // ...and generate a 404 for other values
+  };
+}
+
+export async function getStaticProps({ params }) {
+  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.widths > 1000 || pic.dimensions.heigth > 1000) {
+    pic.dimensions.width /= 2;
+    pic.dimensions.height = 2;
+    console.log("Resized: ", pic.dimensions.width, pic.dimensions.height);
+  }
+  if (pic.dimensions.width > 1000 || pic.dimensions.heigth > 1000) {
+    pic.dimensions.width /= 2;
+    pic.dimensions.height /= 2;
+    console.log("Resized: ", pic.dimensions.width, pic.dimensions.height);
+  }
+  return {
+    props: {
+      pic,
+    },
+  };
+}
+
+export default function Photos({ pic }) {
+  return (
+    <Box p="2rem" bg="gray.200" minH="100vh">
+      <Head>
+        <title> Photo {pic.id}</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <BackHome />
+      <Divider my="1rem" />
+
+      <Center>
+        <a href={pic.path}>
+          <Image
+            src={pic.path}
+            width={pic.dimensions.width || 480}
+            height={pic.dimensions.height || 480}
+            // objectFit="cover"
+            quality={80}
+            priority
+            loading="eager"
+          />
+        </a>
+      </Center>
+      <Divider my="1rem" />
+
+      <Center>
+        <Box p="6">
+          <a href={"/photos/" + pic.prev}>
+            <Button
+              as="a"
+              borderRadius="full"
+              colorScheme="gray"
+              fontSize="xl"
+              size="lg"
+              cursor="pointer"
+              m="15px"
+            >
+              ⟸ Précédente
+            </Button>
+          </a>
+          <a href={"/photos/" + pic.next}>
+            <Button
+              as="a"
+              borderRadius="full"
+              colorScheme="gray"
+              fontSize="xl"
+              size="lg"
+              cursor="pointer"
+              m="15px"
+            >
+              <p m="1">{pic.next != 1 ? "Suivante  " : "Retour au début  "}</p>
+              <p>⟹</p>
+            </Button>
+          </a>
+        </Box>
+      </Center>
+    </Box>
+  );
+}

public/vercel.svg

+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>
\ No newline at end of file

theme.js

+// // theme.js
+// export default {
+//   colors: {
+//     transparent: "transparent",
+//     black: "#000",
+//     white: "#fff",
+//     gray: {
+//       50: "#f7fafc",
+//       // ...
+//       900: "#171923",
+//     },
+//     // ...
+//   },
+// }

webpack.config.js

+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+
+     {
+
+       test: /\.(png|svg|jpg|jpeg|gif)$/i,
+
+       type: 'asset/resource',
+
+     },
+    ],
+  },
+};