fix: Minor errors post rebase

.gitignore

@@ -4,3 +4,5 @@ node_modules/
 # TODO: Video Content
 *.MOV
 *.mp4
+
+.vercel

components/BackHome.js

-import Image from "next/image";
-import { Text, Flex } from "@chakra-ui/react";
+import Link from "next/link";
+import { Button, Text, Flex } from "@chakra-ui/react";
 
 function BackHome() {
   return (

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 { Box, Link, Container, Text, Wrap, WrapItem } from "@chakra-ui/react";
 import Image from "next/image";
 import { getAllPhotos } from "../lib/utils";
-import Link from "next/link";
 import { getPlaiceholder } from "plaiceholder";
 
 export async function getStaticProps() {
-  let data = await getAllPhotos().slice(0, 10);
+  let data = await getAllPhotos();
   let placeholders = {};
   data.forEach((photo) => {
     try {
@@ -65,7 +64,7 @@ export default function Home({ data, placeholders }) {
                 m={3}
                 bg="white"
                 lineHeight="0"
-                _hover={{ boxShadow: "dark-lg", rounded:"20px" }}
+                _hover={{ boxShadow: "dark-lg", rounded: "20px" }}
               >
                 <Link href={`/photos/${photo.id}`}>
                   {/*<img
@@ -75,18 +74,19 @@ export default function Home({ data, placeholders }) {
                   width="80px"
                   color="gray.700"
                 />*/}
-                    <Image
-                      key={photo.path}
-                      src={photo.path}
-                      width={240}
-                      height={240}
-                      objectFit="cover"
-                      placeholder="blur"
-                      priority
-                      blurDataURL={`${placeholders[photo.id]}`}
-                    />
+                  <Image
+                    key={photo.path}
+                    src={photo.path}
+                    width={240}
+                    height={240}
+                    objectFit="cover"
+                    quality={20}
+                    placeholder="blur"
+                    priority
+                    blurDataURL={`${placeholders[photo.id]}`}
+                  />
 
-                    {/*<Image
+                  {/*<Image
                       key={"img-" + photo.path}
                       src={photo.path}
                       height="240px"

pages/photos/[id].js

@@ -6,11 +6,11 @@ import {
   Text,
   Flex,
   Spacer,
+  Link,
   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 { getPlaiceholder } from "plaiceholder";
 
@@ -30,12 +30,13 @@ export async function getStaticPaths() {
 
 export async function getStaticProps({ params }) {
   const photo = await getPhotoById(params.id);
-  let placeholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mPkqgcAAJkAi3T5YcEAAAAASUVORK5CYII=";
+  let placeholder =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mPkqgcAAJkAi3T5YcEAAAAASUVORK5CYII=";
 
   // getPlaiceholder(photo.path).then(({ base64 }) => {
-    // placeholder = base64;
-    // console.log("image", photo.id, ":", photo.path);
-    // console.log("blurDataURL:", placeholder);
+  // placeholder = base64;
+  // console.log("image", photo.id, ":", photo.path);
+  // console.log("blurDataURL:", placeholder);
   // });
 
   // Fix dimensions if really big picture
@@ -50,17 +51,22 @@ export async function getStaticProps({ params }) {
     photo.dimensions.height /= 2;
     console.log("Resized: ", photo.dimensions.width, photo.dimensions.height);
 
-  // Fix dimensions if really big picture
-  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 (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);
+    // Fix dimensions if really big picture
+    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 (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: {