diff --git a/package.json b/package.json index 776dc98..fb00a1c 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@fortawesome/react-fontawesome": "^0.2.2", "@mui/material": "^6.1.2", "aos": "^2.3.4", - "axios": "^1.7.7", + "axios": "^1.7.8", "classnames": "^2.5.1", "framer-motion": "^11.11.1", "lottie-react": "^2.4.0", @@ -75,4 +75,4 @@ "node": "20.x" }, "packageManager": "yarn@4.5.0" -} \ No newline at end of file +} diff --git a/src/components/PhotoGallery/PhotoGallery.styles.tsx b/src/components/PhotoGallery/PhotoGallery.styles.tsx deleted file mode 100644 index a44ce4f..0000000 --- a/src/components/PhotoGallery/PhotoGallery.styles.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import styled from "styled-components"; -import { motion } from "framer-motion"; - -export const PicturesContainer = styled.div` - // mobile - column-count: 1; - column-gap: 24; - max-width: 1024px; - margin: 2em auto; - - style= { - { - margin: "auto 2%"; - } - } - - // ipad - @media (min-width: 768px) { - column-count: 2; - } - - // desktop - @media (min-width: 1024px) { - column-count: 3; - } -`; - -export const Image = styled.img` - width: 100%; - height: auto; - margin-bottom: 24px; - background-color: grey; -`; - -export const PicturesHeader = styled(motion.div)` - data-aos="fade-up" - data-aos-offset="200" - data-aos-delay="50" - data-aos-duration="1000" - data-aos-easing="ease-in-out" - data-aos-mirror="true" - data-aos-once="false" - data-aos-anchor-placement="top" - color: white - min-height: 100vh; - `; diff --git a/src/components/PhotoGallery/PhotoGallery.tsx b/src/components/PhotoGallery/PhotoGallery.tsx index 71f3bcc..db9441a 100644 --- a/src/components/PhotoGallery/PhotoGallery.tsx +++ b/src/components/PhotoGallery/PhotoGallery.tsx @@ -1,66 +1,39 @@ -import axios from "axios"; -import { useCallback, useEffect, useState } from "react"; -import { PicturesContainer, PicturesHeader } from "./PhotoGallery.styles"; import { LazyLoadImage } from "react-lazy-load-image-component"; -import Loading from "../Loading"; import HoverButton from "../HoverButton/HoverButton"; import { ButtonMode } from "../HoverButton/HoverButton.styles"; -import * as S from "../../pageLayouts/GalleryPage.styles"; - -const PhotoGallery = () => { - const [photosURL, setPhotosURL] = useState([]); // photos will be an array of objects - //memoize a getAlbum to prevent unnecessary re-renders. - const getAlbum = useCallback(async () => { - const galleryPicsURL = process.env.REACT_APP_PIC_API_URL; - try { - if (!galleryPicsURL) { - throw new Error("URL is not defined"); - } - const { data } = await axios.get(`${galleryPicsURL}/gallery`); - - if (!data.length) { - throw new Error("No images found"); - } - setPhotosURL(data); - } catch (error) { - console.error( - `Error fetching images from the server on ${galleryPicsURL}`, - error, - ); - } - }, []); - - useEffect(() => { - getAlbum(); - }, [getAlbum]); +import { motion } from "framer-motion"; +interface PhotoProps { + picUrls: string[]; + className?: string; +} +const PhotoGallery = ({ picUrls }: PhotoProps) => { return ( <> - {photosURL.length === 0 ? ( - - ) : ( - - -

- Capturing the Memories: A Look Inside Tech Start!
{" "} - Interested in joining us? -

-
- -
- - - {photosURL.map((photo, index) => ( + +
+

+ Capturing the Memories: A Look Inside Tech Start!
Interested + in joining us? +

+
+ +
+
+ {picUrls.length > 0 && ( +
+ {picUrls.map((photo: string, index: number) => ( { width="100%" /> ))} - - - )} +
+ )} + ); }; diff --git a/src/pageLayouts/GalleryPage.styles.ts b/src/pageLayouts/GalleryPage.styles.ts deleted file mode 100644 index 3554b87..0000000 --- a/src/pageLayouts/GalleryPage.styles.ts +++ /dev/null @@ -1,37 +0,0 @@ -import styled from "styled-components"; - -export const GalleryPage = styled.div` - scroll-behavior: smooth; - border: none; - box-sizing: border-box; - font-family: "Inter", Tahoma, sans-serif; - line-height: 1.5; - height: 100%; - padding: 0; - background: var(--dark-background); - white-space: normal; - overflow: hidden; - position: relative; -`; - -export const GalleryPageHeader = styled.div` - text-align: center; - color: white; - - & > h1 { - font-size: var(--title-size); - } - - & > p { - font-size: var(--babyHeading-size); - @media (max-width: 700px) { - font:size: var(--regular-font); - } - } - - & > div { - margin-top: 3vw; - justify-content: center; - display: flex; - } -`; diff --git a/src/pageLayouts/GalleryPage.tsx b/src/pageLayouts/GalleryPage.tsx index 9518d5a..673b138 100644 --- a/src/pageLayouts/GalleryPage.tsx +++ b/src/pageLayouts/GalleryPage.tsx @@ -1,13 +1,19 @@ import PhotoGallery from "../components/PhotoGallery/PhotoGallery"; import { motion } from "framer-motion"; -import * as S from "./GalleryPage.styles"; import dynamic from "next/dynamic"; const Blobbie = dynamic(() => import("../components/Blobbie"), { ssr: false }); +interface PhotoProps { + picUrls: string[]; + className?: string; +} -const GalleryPage = () => { +const GalleryPage = ({ picUrls }: PhotoProps) => { return ( - +
{ transform="translate(-10vw, 10vw)" width={250} /> - +
Gallery - - - - +
+ +
); }; diff --git a/src/pages/api/gallery.js b/src/pages/api/gallery.js new file mode 100644 index 0000000..f2db9e1 --- /dev/null +++ b/src/pages/api/gallery.js @@ -0,0 +1,21 @@ +import axios from "axios"; + +export async function getData() { + const albumUrl = process.env.GOOGLE_PHOTOS_URL; // Use environment variable + const response = await axios.get(albumUrl, { responseType: "text" }); + const photoLinks = extractPhotos(response.data); + return photoLinks; +} + + +function extractPhotos(content) { + const regex = /(https:\/\/lh3\.googleusercontent\.com\/pw\/[^"']+)["']/g; + const links = new Set(); + let match; + while ((match = regex.exec(content))) { + if (!match[1].includes("=w") && !match[1].includes("=s")) { + links.add(match[1]); + } + } + return Array.from(links); +} diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx new file mode 100644 index 0000000..7506df9 --- /dev/null +++ b/src/pages/gallery/index.tsx @@ -0,0 +1,22 @@ +import GalleryPage from "@/pageLayouts/GalleryPage"; +import { getData } from "../api/gallery"; + +export async function getServerSideProps({ req, res}) { + try { + const data = await getData(); + res.setHeader( + "Cache-Control", + "public, s-maxage=20, stale-while-revalidate=120", + ); + return { props: { picUrls: data || [] } }; + } catch (error) { + console.error("Error fetching photos:", error); + return { props: { picUrls: [] } }; // Provide an empty array as fallback + } +} +interface PhotoProps { + picUrls: string[]; +} +export default function Gallery({ picUrls }: PhotoProps) { + return ; +} diff --git a/tailwind.config.ts b/tailwind.config.ts index 66c1c82..13e229f 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -4,7 +4,23 @@ const config: Config = { content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"], plugins: [], theme: { - extend: {}, + extend: { + colors: { + "dark-background": "rgb(19, 19, 19)", + "dark-background-end": "rgb(26, 26, 26)", // turquoise green + }, + fontFamily: { + sans: ["Inter", "Tahoma", "sans-serif"], + }, + fontSize: { + "babyHeading-size": "1.6rem", + "regular-font": "1.2rem", + "title-size": "clamp(1.4rem, calc(15vw + 1rem), 8rem)", + }, + screens: { + "sm-max": { max: "43.75rem" }, + }, + }, }, }; diff --git a/yarn.lock b/yarn.lock index 068adb4..232f859 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1474,14 +1474,14 @@ __metadata: languageName: node linkType: hard -"axios@npm:^1.7.7": - version: 1.7.7 - resolution: "axios@npm:1.7.7" +"axios@npm:^1.7.8": + version: 1.7.8 + resolution: "axios@npm:1.7.8" dependencies: follow-redirects: "npm:^1.15.6" form-data: "npm:^4.0.0" proxy-from-env: "npm:^1.1.0" - checksum: 10c0/4499efc89e86b0b49ffddc018798de05fab26e3bf57913818266be73279a6418c3ce8f9e934c7d2d707ab8c095e837fc6c90608fb7715b94d357720b5f568af7 + checksum: 10c0/23ae2d0105aea9170c34ac9b6f30d9b2ab2fa8b1370205d2f7ce98b9f9510ab420148c13359ee837ea5a4bf2fb028ff225bd2fc92052fb0c478c6b4a836e2d5f languageName: node linkType: hard @@ -5162,7 +5162,7 @@ __metadata: "@typescript-eslint/parser": "npm:^7.4.0" aos: "npm:^2.3.4" autoprefixer: "npm:^10.4.20" - axios: "npm:^1.7.7" + axios: "npm:^1.7.8" classnames: "npm:^2.5.1" eslint: "npm:8.57.0" eslint-config-next: "npm:14.2.14"