diff --git a/components/BackHome.js b/components/BackHome.js
index 90edebc..e2e3bfa 100644
--- a/components/BackHome.js
+++ b/components/BackHome.js
@@ -1,7 +1,8 @@
-import Image from 'next/image'
+import Image from "next/image";
+import { Text, Flex } from "@chakra-ui/react";
function BackHome() {
- return {
+ return (
- }
+ );
}
-export default BackHome
+export default BackHome;
diff --git a/next.config.js b/next.config.js
index 4e5dc94..6236e75 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,8 +1,10 @@
// next.config.js
-module.exports = {
+
+const { withPlaiceholder } = require("@plaiceholder/next");
+
+module.exports = withPlaiceholder({
+ // your Next.js config
images: {
- domains: [
- 'res.cloudinary.com'
- ],
+ domains: ["res.cloudinary.com"],
},
-}
+});
diff --git a/package.json b/package.json
index d1f056d..4a91dc3 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,18 @@
"@chakra-ui/react": "^1.6.3",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
+ "@plaiceholder/next": "^2.1.0",
"framer-motion": "^4.1.17",
"image-size": "^1.0.0",
- "next": "10.2.3",
+ "next": "^11.0.0",
"next-images": "^1.7.0",
- "react": "17.0.2",
- "react-dom": "17.0.2"
+ "plaiceholder": "^2.0.1",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "sharp": "^0.28.3"
+ },
+ "devDependencies": {
+ "eslint": "^7.29.0",
+ "eslint-config-next": "^11.0.0"
}
}
diff --git a/pages/index.js b/pages/index.js
index 4ad043e..afaff1d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -4,19 +4,31 @@ 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";
+import { getPlaiceholder } from "plaiceholder";
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 {
props: {
data,
+ placeholders,
},
};
}
-export default function Home({ data }) {
+export default function Home({ data, placeholders }) {
const [photos, setPhotos] = useState(data);
// TODO: Fallback with random flowers? fallbackSrc
return (
@@ -63,16 +75,27 @@ export default function Home({ data }) {
width="80px"
color="gray.700"
/>*/}
-
+
+
+ {/**/}
))}
diff --git a/pages/photos/[id].js b/pages/photos/[id].js
index 4e2e529..9682746 100644
--- a/pages/photos/[id].js
+++ b/pages/photos/[id].js
@@ -11,13 +11,8 @@ import {
import Image from "next/image";
import Head from "next/head";
import Link from "next/link";
-<<<<<<< HEAD
import BackHome from "../../components/BackHome";
-=======
-import BackHome from "components/Back";
->>>>>>> ad87045 (feat: Credits, BackHome wip)
-import { InfoIcon, AtSignIcon } from "@chakra-ui/icons";
-// import { getPlaiceholder } `from "plaiceholder";
+// import { getPlaiceholder } from "plaiceholder";
export async function getStaticPaths() {
const photos = await getAllPhotos();
@@ -34,7 +29,6 @@ export async function getStaticPaths() {
}
export async function getStaticProps({ params }) {
-<<<<<<< HEAD
const photo = await getPhotoById(params.id);
let placeholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mPkqgcAAJkAi3T5YcEAAAAASUVORK5CYII=";
@@ -55,21 +49,18 @@ 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.widths > 1000 || pic.dimensions.heigth > 1000) {
- pic.dimensions.width /= 2;
- pic.dimensions.height = 2;
- console.log("Resized: ", pic.dimensions.width, pic.dimensions.height);
+ console.log("Pic dims: ", photo.dimensions.width, photo.dimensions.height);
+ if (photo.dimensions.widths > 1000 || photo.dimensions.heigth > 1000) {
+ photo.dimensions.width /= 2;
+ photo.dimensions.height = 2;
+ console.log("Resized:", photo.dimensions.width, photo.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);
->>>>>>> 54109d5 (feat: Modulated Links)
+ if (photo.dimensions.width > 1000 || photo.dimensions.heigth > 1000) {
+ photo.dimensions.width /= 2;
+ photo.dimensions.height /= 2;
+ console.log("Resized 2:", photo.dimensions.width, photo.dimensions.height);
}
return {
props: {
@@ -87,8 +78,6 @@ export default function Photos({ photo, placeholder }) {
-<<<<<<< HEAD
-<<<<<<< HEAD
@@ -106,61 +95,12 @@ export default function Photos({ photo, placeholder }) {
loading="eager"
/>
-=======
-
-
-
-
-
-
-
-
-
->>>>>>> 54109d5 (feat: Modulated Links)
-=======
-
-
-
-
-
-
-
->>>>>>> ad87045 (feat: Credits, BackHome wip)
-<<<<<<< HEAD
-=======
-
->>>>>>> 54109d5 (feat: Modulated Links)