BradNut/weddingsite
1
0
Fork 0
mirror of https://github.com/BradNut/weddingsite synced 2025-09-08 17:40:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Bradley Shellnut 2022-01-28 14:54:47 -08:00
parent 8200c102cd
commit c9e5a804c3
10 changed files with 10117 additions and 3264 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/HomeContent.js
View file

@ -1,5 +1,5 @@
import Image from 'next/image';
import styled from 'styled-components'; import styled from 'styled-components';
import CustomNextImage from './CustomNextImage';
import Timeline from './Timeline'; import Timeline from './Timeline';
const HomeStyles = styled.div` const HomeStyles = styled.div`
@ -7,16 +7,10 @@ const HomeStyles = styled.div`
justify-items: center; justify-items: center;
`; `;
export default function HomeContent() { export default function HomeContent({ alt, imageProps }) {
return ( return (
<HomeStyles> <HomeStyles>
<CustomNextImage <Image {...imageProps} alt={alt} placeholder="blur" />
src="https://picsum.photos/1307/880"
height={880}
width={1307}
alt="Picture of Name and Name"
blur
/>
<Timeline /> <Timeline />
</HomeStyles> </HomeStyles>
); );

16
lib/events.json
View file

@ -1,18 +1,18 @@
[ [
{ {
"name": "Wedding Practicing", "name": "Rehearsal",
"date": "Sunday, June 2nd, 2030", "date": "Sunday, June 2nd, 2030",
"start": "", "start": "",
"end": "", "end": "",
"venueName": "", "venueName": "",
"attire": "", "attire": "",
"description": "Rehearsal & Rehearsal Dinner", "description": "Rehearsal & Rehearsal Dinner",
"openToAll": false, "openToAll": true,
"showSchedule": false, "showSchedule": false,
"scheduleEvents": [] "scheduleEvents": []
}, },
{ {
"name": "Wedding Saying Hello", "name": "Saying Hello",
"date": "Sunday, June 2nd, 2030", "date": "Sunday, June 2nd, 2030",
"start": "9:00 PM", "start": "9:00 PM",
"end": "", "end": "",
@ -24,7 +24,7 @@
"scheduleEvents": [] "scheduleEvents": []
}, },
{ {
"name": "Wedding Saying I Do", "name": "Saying I Do",
"date": "Monday, June 3rd, 2030", "date": "Monday, June 3rd, 2030",
"start": "5:00 PM", "start": "5:00 PM",
"end": "11:00 PM", "end": "11:00 PM",
@ -55,14 +55,14 @@
] ]
}, },
{ {
"name": "Wedding Saying Goodbye", "name": "Saying Goodbye",
"date": "Tuesday, June 4th, 2030", "date": "Tuesday, June 4th, 2030",
"start": "", "start": "9:00 AM",
"end": "", "end": "11:30 AM",
"venueName": "", "venueName": "",
"attire": "", "attire": "",
"description": "Farewell Brunch", "description": "Farewell Brunch",
"openToAll": false, "openToAll": true,
"showSchedule": false, "showSchedule": false,
"scheduleEvents": [] "scheduleEvents": []
} }

13016
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

12
package.json
View file

@ -9,6 +9,7 @@
"start": "next start" "start": "next start"
}, },
"dependencies": { "dependencies": {
"@plaiceholder/next": "^2.2.0",
"@reach/dialog": "^0.16.2", "@reach/dialog": "^0.16.2",
"@reach/portal": "^0.16.2", "@reach/portal": "^0.16.2",
"@reach/visually-hidden": "^0.16.0", "@reach/visually-hidden": "^0.16.0",
@ -26,21 +27,25 @@
"next-with-apollo": "^5.2.1", "next-with-apollo": "^5.2.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"plaiceholder": "^2.2.0",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"sharp": "^0.29.3",
"styled-components": "^5.3.3", "styled-components": "^5.3.3",
"swr": "^1.2.0", "swr": "^0.5.6",
"waait": "^1.0.5" "waait": "^1.0.5"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.16.12", "@babel/core": "^7.16.12",
"@babel/preset-env": "^7.16.11", "@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/eslint-plugin": "^5.10.1",
"@typescript-eslint/parser": "^5.10.1", "@typescript-eslint/parser": "^5.10.1",
"babel-eslint": "^10.1.0", "eslint": "^8.8.0",
"eslint": "^8.7.0",
"eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-config-wesbos": "^3.0.2", "eslint-config-wesbos": "^3.0.2",
@ -50,6 +55,7 @@
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.28.0", "eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-react-hooks": "^4.3.0",
"jest": "^27.4.7",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"typescript": "^4.5.5" "typescript": "^4.5.5"
}, },

22
pages/index.js
View file

@ -5,18 +5,21 @@ import HomeContent from '../components/HomeContent';
import connectDb from '../utils/db'; import connectDb from '../utils/db';
import Login from '../components/Login'; import Login from '../components/Login';
import Layout from '../components/Layout'; import Layout from '../components/Layout';
import buildBase64Data from '../utils/buildBase64Data';
const LandingStyles = styled.div` const LandingStyles = styled.div`
display: grid; display: grid;
`; `;
export default function Home() { export default function Home({ alt, imageProps }) {
const { user, mutateUser } = useUser(); const { user, mutateUser } = useUser();
if (!user) { if (!user) {
return ( return (
<Layout> <Layout>
<h1>Loading...</h1> <LandingStyles>
<h1>Loading...</h1>
</LandingStyles>
</Layout> </Layout>
); );
} }
@ -26,11 +29,20 @@ export default function Home() {
<Head> <Head>
<title key="title">N & N | Wedding</title> <title key="title">N & N | Wedding</title>
</Head> </Head>
{user && user.isLoggedIn === true ? <HomeContent /> : <Login />} {user && user.isLoggedIn === true ? (
<HomeContent alt={alt} imageProps={imageProps} />
) : (
<Login />
)}
</LandingStyles> </LandingStyles>
); );
} }
export async function getServerSideProps() { export async function getStaticProps() {
return { props: {} }; const src = 'https://picsum.photos/1307/880';
const data = await buildBase64Data(false, src, 'Picture of the couple');
return {
props: { ...data },
};
} }

115
pages/party.js
View file

@ -1,8 +1,10 @@
import Head from 'next/head'; import Head from 'next/head';
import styled from 'styled-components'; import styled from 'styled-components';
import Image from 'next/image';
import Layout from '../components/Layout'; import Layout from '../components/Layout';
import useUser from '../lib/useUser'; import useUser from '../lib/useUser';
import CustomNextImage from '../components/CustomNextImage'; import { weddingParty } from '../utils/imageData';
import buildBase64Data from '../utils/buildBase64Data';
const PartyPageStyles = styled.div` const PartyPageStyles = styled.div`
display: grid; display: grid;
@ -36,50 +38,7 @@ const PartyCard = styled.div`
} }
`; `;
const weddingParty = [ export default function PartyPage({ mainImage, officiantImage, partyImages }) {
{
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() {
const { user } = useUser({ redirectTo: '/login' }); const { user } = useUser({ redirectTo: '/login' });
if (!user || user.isLoggedIn === false) { if (!user || user.isLoggedIn === false) {
@ -97,11 +56,10 @@ export default function PartyPage() {
}} }}
> >
<h1 className="center">Meet our Wedding Party</h1> <h1 className="center">Meet our Wedding Party</h1>
<CustomNextImage <Image
src="https://picsum.photos/800/450" {...mainImage?.imageProps}
alt="Wedding Party" alt={mainImage?.alt}
height={450} placeholder="blur"
width={800}
/> />
</div> </div>
<h2 className="center">The Party</h2> <h2 className="center">The Party</h2>
@ -115,31 +73,56 @@ export default function PartyPage() {
> >
<PartyCard className="card"> <PartyCard className="card">
<h2 className="center">Officiant</h2> <h2 className="center">Officiant</h2>
<CustomNextImage <Image
src="https://picsum.photos/1200/1600" {...officiantImage?.imageProps}
alt="Wedding Officiant" alt={officiantImage?.alt}
objectFit="cover" placeholder="blur"
width="1200"
height="1600"
/> />
<h3 className="center">Wedding Officiant</h3> <h3 className="center">Wedding Officiant</h3>
</PartyCard> </PartyCard>
</div> </div>
<PartyStyles> <PartyStyles>
{weddingParty.map((party, index) => ( {partyImages.map((member, index) => (
<PartyCard className="card" key={index}> <PartyCard className="card" key={index}>
<h2 className="center">{party.name}</h2> <h2 className="center">{member.name}</h2>
<CustomNextImage <Image {...member.imageProps} alt={member.alt} placeholder="blur" />
src={party.imageUrl} <h3 className="center">{member.title}</h3>
alt={`${party.name} - ${party.title}`}
objectFit="cover"
width="1200"
height="1600"
/>
<h3 className="center">{party.title}</h3>
</PartyCard> </PartyCard>
))} ))}
</PartyStyles> </PartyStyles>
</PartyPageStyles> </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,
},
};
}

65
pages/photos.js
View file

@ -1,9 +1,11 @@
import Head from 'next/head'; import Head from 'next/head';
import Image from 'next/image';
import { RiExternalLinkLine } from 'react-icons/ri'; import { RiExternalLinkLine } from 'react-icons/ri';
import styled from 'styled-components'; import styled from 'styled-components';
import CustomNextImage from '../components/CustomNextImage';
import Layout from '../components/Layout'; import Layout from '../components/Layout';
import useUser from '../lib/useUser'; import useUser from '../lib/useUser';
import buildBase64Data from '../utils/buildBase64Data';
import { photos } from '../utils/imageData';
export const PhotoPageStyles = styled.div` export const PhotoPageStyles = styled.div`
display: grid; 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' }); const { user } = useUser({ redirectTo: '/login' });
if (!user || user.isLoggedIn === false) { if (!user || user.isLoggedIn === false) {
return <Layout>Loading...</Layout>; 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 ( return (
<div> <div>
<Head> <Head>
@ -88,13 +63,14 @@ export default function PhotosPage() {
Link to full photo gallery <RiExternalLinkLine /> Link to full photo gallery <RiExternalLinkLine />
</a> </a>
<PhotosStyles> <PhotosStyles>
{photos.map((photo) => ( {images.map((image) => (
<CustomNextImage <Image
key={photo.alt} {...image?.imageProps}
src={photo.url} alt={image?.alt}
alt={photo.alt} width={image.width}
height={1000} height={image.height}
width={1000} objectFit="cover"
placeholder="blur"
/> />
))} ))}
</PhotosStyles> </PhotosStyles>
@ -110,3 +86,20 @@ export default function PhotosPage() {
</div> </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,
},
};
}

21
pages/story.js
View file

@ -1,10 +1,11 @@
import Head from 'next/head'; import Head from 'next/head';
import CustomNextImage from '../components/CustomNextImage'; import Image from 'next/image';
import Layout from '../components/Layout'; import Layout from '../components/Layout';
import useUser from '../lib/useUser'; import useUser from '../lib/useUser';
import buildBase64Data from '../utils/buildBase64Data';
import { PhotoPageStyles } from './photos'; import { PhotoPageStyles } from './photos';
export default function StoryPage() { export default function StoryPage({ alt, imageProps }) {
const { user } = useUser({ redirectTo: '/login' }); const { user } = useUser({ redirectTo: '/login' });
if (!user || user.isLoggedIn === false) { if (!user || user.isLoggedIn === false) {
@ -18,12 +19,7 @@ export default function StoryPage() {
</Head> </Head>
<PhotoPageStyles className="center"> <PhotoPageStyles className="center">
<h1>Our Story</h1> <h1>Our Story</h1>
<CustomNextImage <Image {...imageProps} alt={alt} placeholder="blur" />
src="https://picsum.photos/800/450"
alt="Placeholder Our Story Image"
height={450}
width={800}
/>
<p> <p>
Our story Lorem ipsum dolor sit amet consectetur adipisicing elit. Our story Lorem ipsum dolor sit amet consectetur adipisicing elit.
Natus, illo. Vitae rerum officia, commodi atque reprehenderit tempore Natus, illo. Vitae rerum officia, commodi atque reprehenderit tempore
@ -34,3 +30,12 @@ export default function StoryPage() {
</div> </div>
); );
} }
export async function getStaticProps() {
const src = 'https://picsum.photos/800/450';
const data = await buildBase64Data(false, src, 'Picture of us');
return {
props: { ...data },
};
}

23
utils/buildBase64Data.js
View file

@ -2,20 +2,23 @@ import { getPlaiceholder } from 'plaiceholder';
import { buildUrl } from 'cloudinary-build-url'; import { buildUrl } from 'cloudinary-build-url';
export default async function buildBase64Data( export default async function buildBase64Data(
imageName, cloudinaryUrl,
imageSource,
alt, alt,
additionalProps = {} additionalProps = {}
) { ) {
const folderName = process.env.PUBLIC_FOLDER_NAME; let imagePath = imageSource;
const cloudName = process.env.PUBLIC_CLOUD_NAME; if (cloudinaryUrl) {
let imagePath; const folderName = process.env.PUBLIC_FOLDER_NAME;
const cloudName = process.env.PUBLIC_CLOUD_NAME;
if (imageName && alt && additionalProps) { if (imageSource && alt && additionalProps) {
imagePath = buildUrl(`${folderName}/${imageName}`, { imagePath = buildUrl(`${folderName}/${imageSource}`, {
cloud: { cloud: {
cloudName, cloudName,
}, },
}); });
}
} }
if (imagePath) { if (imagePath) {

77
utils/imageData.js Normal file
View file

@ -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',
},
];