Updating deps, adding plaiceholder, converting pages to static images with base64 blur image.

2025-09-08 17:40:36 +00:00 · 2022-01-28 14:54:47 -08:00 · 2022-01-28 14:54:47 -08:00 · c9e5a804c3
commit c9e5a804c3
parent 8200c102cd
10 changed files with 10117 additions and 3264 deletions
--- a/components/HomeContent.js
+++ b/components/HomeContent.js
@ -1,5 +1,5 @@
+import Image from 'next/image';
 import styled from 'styled-components';
-import CustomNextImage from './CustomNextImage';
 import Timeline from './Timeline';

 const HomeStyles = styled.div`
@ -7,16 +7,10 @@ const HomeStyles = styled.div`
  justify-items: center;
 `;

-export default function HomeContent() {
+export default function HomeContent({ alt, imageProps }) {
  return (
    <HomeStyles>
-      <CustomNextImage
-        src="https://picsum.photos/1307/880"
-        height={880}
-        width={1307}
-        alt="Picture of Name and Name"
-        blur
-      />
+      <Image {...imageProps} alt={alt} placeholder="blur" />
      <Timeline />
    </HomeStyles>
  );
--- a/lib/events.json
+++ b/lib/events.json
@ -1,18 +1,18 @@
 [
  {
-    "name": "Wedding Practicing",
+    "name": "Rehearsal",
    "date": "Sunday, June 2nd, 2030",
    "start": "",
    "end": "",
    "venueName": "",
    "attire": "",
    "description": "Rehearsal & Rehearsal Dinner",
-    "openToAll": false,
+    "openToAll": true,
    "showSchedule": false,
    "scheduleEvents": []
  },
  {
-    "name": "Wedding Saying Hello",
+    "name": "Saying Hello",
    "date": "Sunday, June 2nd, 2030",
    "start": "9:00 PM",
    "end": "",
@ -24,7 +24,7 @@
    "scheduleEvents": []
  },
  {
-    "name": "Wedding Saying I Do",
+    "name": "Saying I Do",
    "date": "Monday, June 3rd, 2030",
    "start": "5:00 PM",
    "end": "11:00 PM",
@ -55,15 +55,15 @@
    ]
  },
  {
-    "name": "Wedding Saying Goodbye",
+    "name": "Saying Goodbye",
    "date": "Tuesday, June 4th, 2030",
-    "start": "",
-    "end": "",
+    "start": "9:00 AM",
+    "end": "11:30 AM",
    "venueName": "",
    "attire": "",
    "description": "Farewell Brunch",
-    "openToAll": false,
+    "openToAll": true,
    "showSchedule": false,
    "scheduleEvents": []
  }
-]
+]
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
    "start": "next start"
  },
  "dependencies": {
+    "@plaiceholder/next": "^2.2.0",
    "@reach/dialog": "^0.16.2",
    "@reach/portal": "^0.16.2",
    "@reach/visually-hidden": "^0.16.0",
@ -26,21 +27,25 @@
    "next-with-apollo": "^5.2.1",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
+    "plaiceholder": "^2.2.0",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
+    "sharp": "^0.29.3",
    "styled-components": "^5.3.3",
-    "swr": "^1.2.0",
+    "swr": "^0.5.6",
    "waait": "^1.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/preset-env": "^7.16.11",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
    "@typescript-eslint/eslint-plugin": "^5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^8.7.0",
+    "eslint": "^8.8.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-wesbos": "^3.0.2",
@ -50,6 +55,7 @@
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
+    "jest": "^27.4.7",
    "prettier": "^2.5.1",
    "typescript": "^4.5.5"
  },
--- a/pages/index.js
+++ b/pages/index.js
@ -5,18 +5,21 @@ import HomeContent from '../components/HomeContent';
 import connectDb from '../utils/db';
 import Login from '../components/Login';
 import Layout from '../components/Layout';
+import buildBase64Data from '../utils/buildBase64Data';

 const LandingStyles = styled.div`
  display: grid;
 `;

-export default function Home() {
+export default function Home({ alt, imageProps }) {
  const { user, mutateUser } = useUser();

  if (!user) {
    return (
      <Layout>
-        <h1>Loading...</h1>
+        <LandingStyles>
+          <h1>Loading...</h1>
+        </LandingStyles>
      </Layout>
    );
  }
@ -26,11 +29,20 @@ export default function Home() {
      <Head>
        <title key="title">N & N | Wedding</title>
      </Head>
-      {user && user.isLoggedIn === true ? <HomeContent /> : <Login />}
+      {user && user.isLoggedIn === true ? (
+        <HomeContent alt={alt} imageProps={imageProps} />
+      ) : (
+        <Login />
+      )}
    </LandingStyles>
  );
 }

-export async function getServerSideProps() {
-  return { props: {} };
+export async function getStaticProps() {
+  const src = 'https://picsum.photos/1307/880';
+  const data = await buildBase64Data(false, src, 'Picture of the couple');
+
+  return {
+    props: { ...data },
+  };
 }
--- a/pages/party.js
+++ b/pages/party.js
@ -1,8 +1,10 @@
 import Head from 'next/head';
 import styled from 'styled-components';
+import Image from 'next/image';
 import Layout from '../components/Layout';
 import useUser from '../lib/useUser';
-import CustomNextImage from '../components/CustomNextImage';
+import { weddingParty } from '../utils/imageData';
+import buildBase64Data from '../utils/buildBase64Data';

 const PartyPageStyles = styled.div`
  display: grid;
@ -36,50 +38,7 @@ const PartyCard = styled.div`
  }
 `;

-const weddingParty = [
-  {
-    name: 'Best Man',
-    title: 'Best Man',
-    imageUrl: 'https://picsum.photos/1200/1600',
-  },
-  {
-    name: 'Man/Maid of Honor',
-    title: 'Man/Maid of Honor',
-    imageUrl: 'https://picsum.photos/1200/1601',
-  },
-  {
-    name: 'Groomsman',
-    title: 'Groomsman',
-    imageUrl: 'https://picsum.photos/1200/1602',
-  },
-  {
-    name: 'Bridesmaid',
-    title: 'Bridesmaid',
-    imageUrl: 'https://picsum.photos/1200/1603',
-  },
-  {
-    name: 'Groomsman',
-    title: 'Groomsman',
-    imageUrl: 'https://picsum.photos/1200/1604',
-  },
-  {
-    name: 'Bridesmaid',
-    title: 'Bridesmaid',
-    imageUrl: 'https://picsum.photos/1200/1605',
-  },
-  {
-    name: 'Groomsman',
-    title: 'Groomsman',
-    imageUrl: 'https://picsum.photos/1200/1606',
-  },
-  {
-    name: 'Bridesmaid',
-    title: 'Bridesmaid',
-    imageUrl: 'https://picsum.photos/200/308',
-  },
-];
-
-export default function PartyPage() {
+export default function PartyPage({ mainImage, officiantImage, partyImages }) {
  const { user } = useUser({ redirectTo: '/login' });

  if (!user || user.isLoggedIn === false) {
@ -97,11 +56,10 @@ export default function PartyPage() {
        }}
      >
        <h1 className="center">Meet our Wedding Party</h1>
-        <CustomNextImage
-          src="https://picsum.photos/800/450"
-          alt="Wedding Party"
-          height={450}
-          width={800}
+        <Image
+          {...mainImage?.imageProps}
+          alt={mainImage?.alt}
+          placeholder="blur"
        />
      </div>
      <h2 className="center">The Party</h2>
@ -115,31 +73,56 @@ export default function PartyPage() {
      >
        <PartyCard className="card">
          <h2 className="center">Officiant</h2>
-          <CustomNextImage
-            src="https://picsum.photos/1200/1600"
-            alt="Wedding Officiant"
-            objectFit="cover"
-            width="1200"
-            height="1600"
+          <Image
+            {...officiantImage?.imageProps}
+            alt={officiantImage?.alt}
+            placeholder="blur"
          />
          <h3 className="center">Wedding Officiant</h3>
        </PartyCard>
      </div>
      <PartyStyles>
-        {weddingParty.map((party, index) => (
+        {partyImages.map((member, index) => (
          <PartyCard className="card" key={index}>
-            <h2 className="center">{party.name}</h2>
-            <CustomNextImage
-              src={party.imageUrl}
-              alt={`${party.name} - ${party.title}`}
-              objectFit="cover"
-              width="1200"
-              height="1600"
-            />
-            <h3 className="center">{party.title}</h3>
+            <h2 className="center">{member.name}</h2>
+            <Image {...member.imageProps} alt={member.alt} placeholder="blur" />
+            <h3 className="center">{member.title}</h3>
          </PartyCard>
        ))}
      </PartyStyles>
    </PartyPageStyles>
  );
 }
+
+export async function getStaticProps() {
+  const partyImages = [];
+  for (const member of weddingParty) {
+    const imageData = await buildBase64Data(false, member.url, member.alt, {
+      name: member.name,
+      title: member.title,
+    });
+    partyImages.push(imageData);
+  }
+
+  const mainImage = await buildBase64Data(
+    false,
+    'https://picsum.photos/800/450',
+    'Wedding Party',
+    {}
+  );
+
+  const officiantImage = await buildBase64Data(
+    false,
+    'https://picsum.photos/1200/1600',
+    'Wedding Officiant',
+    {}
+  );
+
+  return {
+    props: {
+      mainImage,
+      officiantImage,
+      partyImages,
+    },
+  };
+}
--- a/pages/photos.js
+++ b/pages/photos.js
@ -1,9 +1,11 @@
 import Head from 'next/head';
+import Image from 'next/image';
 import { RiExternalLinkLine } from 'react-icons/ri';
 import styled from 'styled-components';
-import CustomNextImage from '../components/CustomNextImage';
 import Layout from '../components/Layout';
 import useUser from '../lib/useUser';
+import buildBase64Data from '../utils/buildBase64Data';
+import { photos } from '../utils/imageData';

 export const PhotoPageStyles = styled.div`
  display: grid;
@ -38,40 +40,13 @@ export const PhotosStyles = styled.div`
  }
 `;

-export default function PhotosPage() {
+export default function PhotosPage({ images }) {
  const { user } = useUser({ redirectTo: '/login' });

  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>;
  }

-  const photos = [
-    {
-      url: 'https://picsum.photos/1000/1000',
-      alt: 'Photo 1',
-    },
-    {
-      url: 'https://picsum.photos/1000/1002',
-      alt: 'Photo 2',
-    },
-    {
-      url: 'https://picsum.photos/1000/1003',
-      alt: 'Photo 3',
-    },
-    {
-      url: 'https://picsum.photos/1000/1004',
-      alt: 'Photo 4',
-    },
-    {
-      url: 'https://picsum.photos/1000/1005',
-      alt: 'Photo 5',
-    },
-    {
-      url: 'https://picsum.photos/1000/1006',
-      alt: 'Photo 6',
-    },
-  ];
-
  return (
    <div>
      <Head>
@ -88,13 +63,14 @@ export default function PhotosPage() {
          Link to full photo gallery <RiExternalLinkLine />
        </a>
        <PhotosStyles>
-          {photos.map((photo) => (
-            <CustomNextImage
-              key={photo.alt}
-              src={photo.url}
-              alt={photo.alt}
-              height={1000}
-              width={1000}
+          {images.map((image) => (
+            <Image
+              {...image?.imageProps}
+              alt={image?.alt}
+              width={image.width}
+              height={image.height}
+              objectFit="cover"
+              placeholder="blur"
            />
          ))}
        </PhotosStyles>
@ -110,3 +86,20 @@ export default function PhotosPage() {
    </div>
  );
 }
+
+export async function getStaticProps() {
+  const images = [];
+  for (const photo of photos) {
+    const imageData = await buildBase64Data(false, photo.url, photo.alt, {
+      width: 1000,
+      height: 1000,
+    });
+    images.push(imageData);
+  }
+
+  return {
+    props: {
+      images,
+    },
+  };
+}
--- a/pages/story.js
+++ b/pages/story.js
@ -1,10 +1,11 @@
 import Head from 'next/head';
-import CustomNextImage from '../components/CustomNextImage';
+import Image from 'next/image';
 import Layout from '../components/Layout';
 import useUser from '../lib/useUser';
+import buildBase64Data from '../utils/buildBase64Data';
 import { PhotoPageStyles } from './photos';

-export default function StoryPage() {
+export default function StoryPage({ alt, imageProps }) {
  const { user } = useUser({ redirectTo: '/login' });

  if (!user || user.isLoggedIn === false) {
@ -18,12 +19,7 @@ export default function StoryPage() {
      </Head>
      <PhotoPageStyles className="center">
        <h1>Our Story</h1>
-        <CustomNextImage
-          src="https://picsum.photos/800/450"
-          alt="Placeholder Our Story Image"
-          height={450}
-          width={800}
-        />
+        <Image {...imageProps} alt={alt} placeholder="blur" />
        <p>
          Our story Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Natus, illo. Vitae rerum officia, commodi atque reprehenderit tempore
@ -34,3 +30,12 @@ export default function StoryPage() {
    </div>
  );
 }
+
+export async function getStaticProps() {
+  const src = 'https://picsum.photos/800/450';
+  const data = await buildBase64Data(false, src, 'Picture of us');
+
+  return {
+    props: { ...data },
+  };
+}
--- a/utils/buildBase64Data.js
+++ b/utils/buildBase64Data.js
@ -2,20 +2,23 @@ import { getPlaiceholder } from 'plaiceholder';
 import { buildUrl } from 'cloudinary-build-url';

 export default async function buildBase64Data(
-  imageName,
+  cloudinaryUrl,
+  imageSource,
  alt,
  additionalProps = {}
 ) {
-  const folderName = process.env.PUBLIC_FOLDER_NAME;
-  const cloudName = process.env.PUBLIC_CLOUD_NAME;
-  let imagePath;
+  let imagePath = imageSource;
+  if (cloudinaryUrl) {
+    const folderName = process.env.PUBLIC_FOLDER_NAME;
+    const cloudName = process.env.PUBLIC_CLOUD_NAME;

-  if (imageName && alt && additionalProps) {
-    imagePath = buildUrl(`${folderName}/${imageName}`, {
-      cloud: {
-        cloudName,
-      },
-    });
+    if (imageSource && alt && additionalProps) {
+      imagePath = buildUrl(`${folderName}/${imageSource}`, {
+        cloud: {
+          cloudName,
+        },
+      });
+    }
  }

  if (imagePath) {
--- a/utils/imageData.js
+++ b/utils/imageData.js
@ -0,0 +1,77 @@
+export const weddingParty = [
+  {
+    name: 'Best Man',
+    title: 'Best Man',
+    url: 'https://picsum.photos/1200/1600',
+    alt: 'Best Man',
+  },
+  {
+    name: 'Man/Maid of Honor',
+    title: 'Man/Maid of Honor',
+    url: 'https://picsum.photos/1200/1601',
+    alt: 'Man/Maid of Honor',
+  },
+  {
+    name: 'Groomsman',
+    title: 'Groomsman',
+    url: 'https://picsum.photos/1200/1602',
+    alt: 'Groomsman',
+  },
+  {
+    name: 'Bridesmaid',
+    title: 'Bridesmaid',
+    url: 'https://picsum.photos/1200/1603',
+    alt: 'Bridesmaid',
+  },
+  {
+    name: 'Groomsman',
+    title: 'Groomsman',
+    url: 'https://picsum.photos/1200/1604',
+    alt: 'Groomsman',
+  },
+  {
+    name: 'Bridesmaid',
+    title: 'Bridesmaid',
+    url: 'https://picsum.photos/1200/1605',
+    alt: 'Bridesmaid',
+  },
+  {
+    name: 'Groomsman',
+    title: 'Groomsman',
+    url: 'https://picsum.photos/1200/1606',
+    alt: 'Groomsman',
+  },
+  {
+    name: 'Bridesmaid',
+    title: 'Bridesmaid',
+    url: 'https://picsum.photos/200/308',
+    alt: 'Bridesmaid',
+  },
+];
+
+export const photos = [
+  {
+    url: 'https://picsum.photos/1000/1000',
+    alt: 'Photo 1',
+  },
+  {
+    url: 'https://picsum.photos/1000/1002',
+    alt: 'Photo 2',
+  },
+  {
+    url: 'https://picsum.photos/1000/1003',
+    alt: 'Photo 3',
+  },
+  {
+    url: 'https://picsum.photos/1000/1004',
+    alt: 'Photo 4',
+  },
+  {
+    url: 'https://picsum.photos/1000/1005',
+    alt: 'Photo 5',
+  },
+  {
+    url: 'https://picsum.photos/1000/1006',
+    alt: 'Photo 6',
+  },
+];