Skip to content

P
Philippe
Commit 2789b669 by PLN (Algolia)
Options

feat: Placeholders

parent f8ab3567
Showing with 68 additions and 103 deletions
components/BackHome.js
import Image from 'next/image' import Image from "next/image";
import { Text, Flex } from "@chakra-ui/react";
function BackHome() { function BackHome() {
return { return (
<Flex px="1rem" justify="center" align="center"> <Flex px="1rem" justify="center" align="center">
<Link href={`/`}> <Link href={`/`}>
<Button <Button
...@@ -16,7 +17,7 @@ function BackHome() { ...@@ -16,7 +17,7 @@ function BackHome() {
</Button> </Button>
</Link> </Link>
</Flex> </Flex>
} );
} }
export default BackHome export default BackHome;
next.config.js
// next.config.js // next.config.js
module.exports = {
const { withPlaiceholder } = require("@plaiceholder/next");
module.exports = withPlaiceholder({
// your Next.js config
images: { images: {
domains: [ domains: ["res.cloudinary.com"],
'res.cloudinary.com'
],
}, },
} });
package.json
...@@ -12,11 +12,18 @@ ...@@ -12,11 +12,18 @@
"@chakra-ui/react": "^1.6.3", "@chakra-ui/react": "^1.6.3",
"@emotion/react": "^11.4.0", "@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0", "@emotion/styled": "^11.3.0",
"@plaiceholder/next": "^2.1.0",
"framer-motion": "^4.1.17", "framer-motion": "^4.1.17",
"image-size": "^1.0.0", "image-size": "^1.0.0",
"next": "10.2.3", "next": "^11.0.0",
"next-images": "^1.7.0", "next-images": "^1.7.0",
"react": "17.0.2", "plaiceholder": "^2.0.1",
"react-dom": "17.0.2" "react": "^17.0.2",
"react-dom": "^17.0.2",
"sharp": "^0.28.3"
},
"devDependencies": {
"eslint": "^7.29.0",
"eslint-config-next": "^11.0.0"
} }
} }
pages/index.js
...@@ -4,19 +4,31 @@ import React, { useState } from "react"; ...@@ -4,19 +4,31 @@ import React, { useState } from "react";
import { Box, Container, Text, Wrap, WrapItem } from "@chakra-ui/react"; import { Box, Container, Text, Wrap, WrapItem } from "@chakra-ui/react";
import Image from "next/image"; import Image from "next/image";
import { getAllPhotos } from "../lib/utils"; import { getAllPhotos } from "../lib/utils";
import { Img } from "@chakra-ui/react";
import Link from "next/link"; import Link from "next/link";
import { getPlaiceholder } from "plaiceholder";
export async function getStaticProps() { export async function getStaticProps() {
let data = await getAllPhotos(); let data = await getAllPhotos().slice(0, 10);
let placeholders = {};
data.forEach((photo) => {
try {
getPlaiceholder(photo.path).then(({ base64 }) => {
placeholders[photo.id] = base64;
});
} catch (err) {
err;
}
});
return { return {
props: { props: {
data, data,
placeholders,
}, },
}; };
} }
export default function Home({ data }) { export default function Home({ data, placeholders }) {
const [photos, setPhotos] = useState(data); const [photos, setPhotos] = useState(data);
// TODO: Fallback with random flowers? fallbackSrc // TODO: Fallback with random flowers? fallbackSrc
return ( return (
...@@ -63,16 +75,27 @@ export default function Home({ data }) { ...@@ -63,16 +75,27 @@ export default function Home({ data }) {
width="80px" width="80px"
color="gray.700" color="gray.700"
/>*/} />*/}
<Img <Image
key={"img-" + photo.path} key={photo.path}
src={photo.path} src={photo.path}
height="240px" width={240}
width="240px" height={240}
objectFit="cover" objectFit="cover"
placeholder="img/Diaporama/f5b1d804-3860-4073-b280-69e54985c66f.jpg" placeholder="blur"
color="gray.700" priority
quality={100} blurDataURL={`${placeholders[photo.id]}`}
/> />
{/*<Image
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={50}
/>*/}
</Link> </Link>
</WrapItem> </WrapItem>
))} ))}
......
pages/photos/[id].js
...@@ -11,13 +11,8 @@ import { ...@@ -11,13 +11,8 @@ import {
import Image from "next/image"; import Image from "next/image";
import Head from "next/head"; import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
<<<<<<< HEAD
import BackHome from "../../components/BackHome"; import BackHome from "../../components/BackHome";
======= // import { getPlaiceholder } from "plaiceholder";
import BackHome from "components/Back";
>>>>>>> ad87045 (feat: Credits, BackHome wip)
import { InfoIcon, AtSignIcon } from "@chakra-ui/icons";
// import { getPlaiceholder } `from "plaiceholder";
export async function getStaticPaths() { export async function getStaticPaths() {
const photos = await getAllPhotos(); const photos = await getAllPhotos();
...@@ -34,7 +29,6 @@ export async function getStaticPaths() { ...@@ -34,7 +29,6 @@ export async function getStaticPaths() {
} }
export async function getStaticProps({ params }) { export async function getStaticProps({ params }) {
<<<<<<< HEAD
const photo = await getPhotoById(params.id); const photo = await getPhotoById(params.id);
let placeholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mPkqgcAAJkAi3T5YcEAAAAASUVORK5CYII="; let placeholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mPkqgcAAJkAi3T5YcEAAAAASUVORK5CYII=";
...@@ -55,21 +49,18 @@ export async function getStaticProps({ params }) { ...@@ -55,21 +49,18 @@ export async function getStaticProps({ params }) {
photo.dimensions.width /= 2; photo.dimensions.width /= 2;
photo.dimensions.height /= 2; photo.dimensions.height /= 2;
console.log("Resized: ", photo.dimensions.width, photo.dimensions.height); console.log("Resized: ", photo.dimensions.width, photo.dimensions.height);
=======
const pic = await getPhotoById(params.id);
// Fix dimensions if really big picture // Fix dimensions if really big picture
console.log("Pic dims: ", pic.dimensions.width, pic.dimensions.height); console.log("Pic dims: ", photo.dimensions.width, photo.dimensions.height);
if (pic.dimensions.widths > 1000 || pic.dimensions.heigth > 1000) { if (photo.dimensions.widths > 1000 || photo.dimensions.heigth > 1000) {
pic.dimensions.width /= 2; photo.dimensions.width /= 2;
pic.dimensions.height = 2; photo.dimensions.height = 2;
console.log("Resized: ", pic.dimensions.width, pic.dimensions.height); console.log("Resized:", photo.dimensions.width, photo.dimensions.height);
} }
if (pic.dimensions.width > 1000 || pic.dimensions.heigth > 1000) { if (photo.dimensions.width > 1000 || photo.dimensions.heigth > 1000) {
pic.dimensions.width /= 2; photo.dimensions.width /= 2;
pic.dimensions.height /= 2; photo.dimensions.height /= 2;
console.log("Resized: ", pic.dimensions.width, pic.dimensions.height); console.log("Resized 2:", photo.dimensions.width, photo.dimensions.height);
>>>>>>> 54109d5 (feat: Modulated Links)
} }
return { return {
props: { props: {
...@@ -87,8 +78,6 @@ export default function Photos({ photo, placeholder }) { ...@@ -87,8 +78,6 @@ export default function Photos({ photo, placeholder }) {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<<<<<<< HEAD
<<<<<<< HEAD
<BackHome /> <BackHome />
<Divider my="1rem" /> <Divider my="1rem" />
...@@ -106,61 +95,12 @@ export default function Photos({ photo, placeholder }) { ...@@ -106,61 +95,12 @@ export default function Photos({ photo, placeholder }) {
loading="eager" loading="eager"
/> />
</a> </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)
=======
<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>
>>>>>>> ad87045 (feat: Credits, BackHome wip)
</Center> </Center>
<Divider my="1rem" /> <Divider my="1rem" />
<Center> <Center>
<Box p="6"> <Box p="6">
<<<<<<< HEAD
<Link href={"/photos/" + photo.prev}> <Link href={"/photos/" + photo.prev}>
=======
<Link href={"/photos/" + pic.prev}>
>>>>>>> 54109d5 (feat: Modulated Links)
<Button <Button
as="a" as="a"
borderRadius="full" borderRadius="full"
...@@ -173,11 +113,7 @@ export default function Photos({ photo, placeholder }) { ...@@ -173,11 +113,7 @@ export default function Photos({ photo, placeholder }) {
⟸ Précédente ⟸ Précédente
</Button> </Button>
</Link> </Link>
<<<<<<< HEAD
<Link href={"/photos/" + photo.next} m="15px"> <Link href={"/photos/" + photo.next} m="15px">
=======
<Link href={"/photos/" + pic.next} m="15px">
>>>>>>> 54109d5 (feat: Modulated Links)
<Button <Button
as="a" as="a"
borderRadius="full" borderRadius="full"
...@@ -187,13 +123,9 @@ export default function Photos({ photo, placeholder }) { ...@@ -187,13 +123,9 @@ export default function Photos({ photo, placeholder }) {
cursor="pointer" cursor="pointer"
m="15px" m="15px"
> >
<<<<<<< HEAD
<p m="1"> <p m="1">
{photo.next != 1 ? "Suivante " : "Retour au début "} {photo.next != 1 ? "Suivante " : "Retour au début "}
</p> </p>
=======
<p m="1">{pic.next != 1 ? "Suivante " : "Retour au début "}</p>
>>>>>>> 54109d5 (feat: Modulated Links)
<p>⟹</p> <p>⟹</p>
</Button> </Button>
</Link> </Link>
......
yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment