From 6d3c59038ab4bb685062441b8d9d113c666d655e Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 10 Feb 2025 23:51:07 +0530 Subject: [PATCH 1/4] refactor: images-loading --- frontend/src/app/layout.tsx | 16 ++++++++++++++++ frontend/src/queries/heros.ts | 29 +++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 frontend/src/queries/heros.ts diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 7ad4e63..8955954 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -8,6 +8,7 @@ import Navbar from "@/components/Navbar"; import { navbarQuery, NavbarQueryType } from "@/queries/navbar"; import "@/styles/globals.css"; import { request } from "@/utils/graphQLClient"; +import { HeroQueryType, herosQuery } from "@/queries/heros"; const urbanist = Urbanist({ weight: ["400", "500"], @@ -20,9 +21,24 @@ export default async function RootLayout({ children: React.ReactNode; }) { const navbarData = await request(navbarQuery); + const herosImgs = await request(herosQuery); return ( + + + +
diff --git a/frontend/src/queries/heros.ts b/frontend/src/queries/heros.ts new file mode 100644 index 0000000..2ee5357 --- /dev/null +++ b/frontend/src/queries/heros.ts @@ -0,0 +1,29 @@ +import { gql } from "graphql-request"; + +export const herosQuery = gql` + { + pnkTokenPageHero { + background { + url + } + } + earnPageHero { + background { + url + } + } + } +`; + +export type HeroQueryType = { + pnkTokenPageHero: { + background: { + url: string; + }; + }; + earnPageHero: { + background: { + url: string; + }; + }; +}; From f3859a5652a0dbf7a1d5a24770e444b51c0124cc Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 11 Feb 2025 12:22:03 +0530 Subject: [PATCH 2/4] refactor: add-cache-time --- frontend/next.config.mjs | 10 ++++++---- frontend/src/components/BrandAssets/Hero.tsx | 1 + frontend/src/components/Community/hero.tsx | 1 + frontend/src/components/ForBuilders/Hero.tsx | 1 + 4 files changed, 9 insertions(+), 4 deletions(-) diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs index 1c5e4f3..8228fa6 100644 --- a/frontend/next.config.mjs +++ b/frontend/next.config.mjs @@ -2,13 +2,15 @@ const nextConfig = { reactStrictMode: true, images: { + minimumCacheTTL: 31536, + deviceSizes: [640, 750, 828, 1080, 1200, 1920], remotePatterns: [ { protocol: "https", - hostname: "delicate-eggs-595f0e58b8.media.strapiapp.com" - } - ] - } + hostname: "delicate-eggs-595f0e58b8.media.strapiapp.com", + }, + ], + }, }; export default nextConfig; diff --git a/frontend/src/components/BrandAssets/Hero.tsx b/frontend/src/components/BrandAssets/Hero.tsx index 05b793a..779ce1a 100644 --- a/frontend/src/components/BrandAssets/Hero.tsx +++ b/frontend/src/components/BrandAssets/Hero.tsx @@ -32,6 +32,7 @@ const Hero: React.FC = ({ heroData }) => { alt="Hero Image Background" fill priority + sizes="100vw" className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/Community/hero.tsx b/frontend/src/components/Community/hero.tsx index 99e02bc..a8f7f8a 100644 --- a/frontend/src/components/Community/hero.tsx +++ b/frontend/src/components/Community/hero.tsx @@ -35,6 +35,7 @@ const Hero: React.FC = ({ heroData }) => { alt="Hero Image Background" fill priority + sizes="100vw" className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/ForBuilders/Hero.tsx b/frontend/src/components/ForBuilders/Hero.tsx index 91ed5d7..46051f4 100644 --- a/frontend/src/components/ForBuilders/Hero.tsx +++ b/frontend/src/components/ForBuilders/Hero.tsx @@ -47,6 +47,7 @@ const Hero: React.FC = ({ heroData }) => { alt="Hero Image Background" fill priority + sizes="100vw" className="absolute left-0 top-0 z-[-1] h-full object-cover" /> From 1c4a48015ece0480a2bb693deaf6dcef5a508503 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 11 Feb 2025 14:59:55 +0530 Subject: [PATCH 3/4] refactor: preload-image --- frontend/next.config.mjs | 2 +- frontend/src/app/for-lawyers/components/Hero.tsx | 1 + frontend/src/app/layout.tsx | 16 +++++++++------- frontend/src/components/Cooperative/hero.tsx | 1 + frontend/src/components/Earn/Hero.tsx | 1 + frontend/src/components/PNKToken/Hero.tsx | 1 + 6 files changed, 14 insertions(+), 8 deletions(-) diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs index 8228fa6..8bb052d 100644 --- a/frontend/next.config.mjs +++ b/frontend/next.config.mjs @@ -2,7 +2,7 @@ const nextConfig = { reactStrictMode: true, images: { - minimumCacheTTL: 31536, + minimumCacheTTL: 31536000, deviceSizes: [640, 750, 828, 1080, 1200, 1920], remotePatterns: [ { diff --git a/frontend/src/app/for-lawyers/components/Hero.tsx b/frontend/src/app/for-lawyers/components/Hero.tsx index de4efff..71af4f4 100644 --- a/frontend/src/app/for-lawyers/components/Hero.tsx +++ b/frontend/src/app/for-lawyers/components/Hero.tsx @@ -41,6 +41,7 @@ const Hero: React.FC = async () => { alt="Hero Image Background" fill priority + sizes="100vw" className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 8955954..d13babf 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -10,6 +10,8 @@ import "@/styles/globals.css"; import { request } from "@/utils/graphQLClient"; import { HeroQueryType, herosQuery } from "@/queries/heros"; +import { getImageProps } from "next/image"; + const urbanist = Urbanist({ weight: ["400", "500"], subsets: ["latin"], @@ -22,6 +24,12 @@ export default async function RootLayout({ }) { const navbarData = await request(navbarQuery); const herosImgs = await request(herosQuery); + const props = getImageProps({ + src: herosImgs.earnPageHero.background.url, + alt: "earn", + fill: true, + priority: true, + }); return ( @@ -29,13 +37,7 @@ export default async function RootLayout({ - diff --git a/frontend/src/components/Cooperative/hero.tsx b/frontend/src/components/Cooperative/hero.tsx index 0a90d6d..b6be6c9 100644 --- a/frontend/src/components/Cooperative/hero.tsx +++ b/frontend/src/components/Cooperative/hero.tsx @@ -43,6 +43,7 @@ const Hero: React.FC = ({ heroData }) => { alt="Hero Image Background" fill priority + sizes="100vw" className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/Earn/Hero.tsx b/frontend/src/components/Earn/Hero.tsx index 7203d8b..01a75ec 100644 --- a/frontend/src/components/Earn/Hero.tsx +++ b/frontend/src/components/Earn/Hero.tsx @@ -50,6 +50,7 @@ const Hero: React.FC = ({ heroData }) => { alt="Hero Image Background" fill priority + sizes="100vw" className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/PNKToken/Hero.tsx b/frontend/src/components/PNKToken/Hero.tsx index e4c165d..e80743c 100644 --- a/frontend/src/components/PNKToken/Hero.tsx +++ b/frontend/src/components/PNKToken/Hero.tsx @@ -36,6 +36,7 @@ const Hero: React.FC = ({ heroData }) => { alt="Hero Image Background" fill priority + sizes="100vw" className="absolute left-0 top-0 z-[-1] h-full object-cover" /> From 50916bc4b542a40baeeec4aff105cccbec68b123 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 11 Feb 2025 17:09:49 +0530 Subject: [PATCH 4/4] refactor: preload-hero-images --- .../src/app/for-lawyers/components/Hero.tsx | 3 +- frontend/src/app/layout.tsx | 30 ++++---- frontend/src/components/BrandAssets/Hero.tsx | 3 +- frontend/src/components/Community/hero.tsx | 3 +- frontend/src/components/Cooperative/hero.tsx | 3 +- frontend/src/components/Earn/Hero.tsx | 3 +- frontend/src/components/ForBuilders/Hero.tsx | 3 +- frontend/src/components/PNKToken/Hero.tsx | 3 +- .../components/ResearchDevelopment/Hero.tsx | 2 +- frontend/src/queries/heroImages.ts | 68 +++++++++++++++++++ frontend/src/queries/heros.ts | 29 -------- frontend/src/utils/getHeroImgsProps.ts | 17 +++++ 12 files changed, 107 insertions(+), 60 deletions(-) create mode 100644 frontend/src/queries/heroImages.ts delete mode 100644 frontend/src/queries/heros.ts create mode 100644 frontend/src/utils/getHeroImgsProps.ts diff --git a/frontend/src/app/for-lawyers/components/Hero.tsx b/frontend/src/app/for-lawyers/components/Hero.tsx index 71af4f4..78af22d 100644 --- a/frontend/src/app/for-lawyers/components/Hero.tsx +++ b/frontend/src/app/for-lawyers/components/Hero.tsx @@ -40,8 +40,7 @@ const Hero: React.FC = async () => { src={background.url} alt="Hero Image Background" fill - priority - sizes="100vw" + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index d13babf..1d79f5b 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -7,10 +7,9 @@ import Footer from "@/components/Footer"; import Navbar from "@/components/Navbar"; import { navbarQuery, NavbarQueryType } from "@/queries/navbar"; import "@/styles/globals.css"; +import { getHeroImgsProps } from "@/utils/getHeroImgsProps"; import { request } from "@/utils/graphQLClient"; -import { HeroQueryType, herosQuery } from "@/queries/heros"; - -import { getImageProps } from "next/image"; +import { HeroImagesQueryType, herosImagesQuery } from "@/queries/heroImages"; const urbanist = Urbanist({ weight: ["400", "500"], @@ -23,23 +22,22 @@ export default async function RootLayout({ children: React.ReactNode; }) { const navbarData = await request(navbarQuery); - const herosImgs = await request(herosQuery); - const props = getImageProps({ - src: herosImgs.earnPageHero.background.url, - alt: "earn", - fill: true, - priority: true, - }); + const herosImgs = await request(herosImagesQuery); + const props = getHeroImgsProps(herosImgs); return ( - + {props.map((prop) => ( + + ))}
diff --git a/frontend/src/components/BrandAssets/Hero.tsx b/frontend/src/components/BrandAssets/Hero.tsx index 779ce1a..43fb4dd 100644 --- a/frontend/src/components/BrandAssets/Hero.tsx +++ b/frontend/src/components/BrandAssets/Hero.tsx @@ -31,8 +31,7 @@ const Hero: React.FC = ({ heroData }) => { src={heroData.background.url} alt="Hero Image Background" fill - priority - sizes="100vw" + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/Community/hero.tsx b/frontend/src/components/Community/hero.tsx index a8f7f8a..f75d969 100644 --- a/frontend/src/components/Community/hero.tsx +++ b/frontend/src/components/Community/hero.tsx @@ -34,8 +34,7 @@ const Hero: React.FC = ({ heroData }) => { src={background.url} alt="Hero Image Background" fill - priority - sizes="100vw" + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/Cooperative/hero.tsx b/frontend/src/components/Cooperative/hero.tsx index b6be6c9..e61594d 100644 --- a/frontend/src/components/Cooperative/hero.tsx +++ b/frontend/src/components/Cooperative/hero.tsx @@ -42,8 +42,7 @@ const Hero: React.FC = ({ heroData }) => { src={background.url} alt="Hero Image Background" fill - priority - sizes="100vw" + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/Earn/Hero.tsx b/frontend/src/components/Earn/Hero.tsx index 01a75ec..28fcf67 100644 --- a/frontend/src/components/Earn/Hero.tsx +++ b/frontend/src/components/Earn/Hero.tsx @@ -49,8 +49,7 @@ const Hero: React.FC = ({ heroData }) => { src={background.url} alt="Hero Image Background" fill - priority - sizes="100vw" + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/ForBuilders/Hero.tsx b/frontend/src/components/ForBuilders/Hero.tsx index 46051f4..341b063 100644 --- a/frontend/src/components/ForBuilders/Hero.tsx +++ b/frontend/src/components/ForBuilders/Hero.tsx @@ -46,8 +46,7 @@ const Hero: React.FC = ({ heroData }) => { src={heroData.background.url} alt="Hero Image Background" fill - priority - sizes="100vw" + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/PNKToken/Hero.tsx b/frontend/src/components/PNKToken/Hero.tsx index e80743c..0db7e9a 100644 --- a/frontend/src/components/PNKToken/Hero.tsx +++ b/frontend/src/components/PNKToken/Hero.tsx @@ -35,8 +35,7 @@ const Hero: React.FC = ({ heroData }) => { src={background.url} alt="Hero Image Background" fill - priority - sizes="100vw" + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/components/ResearchDevelopment/Hero.tsx b/frontend/src/components/ResearchDevelopment/Hero.tsx index dda1c4f..219e5d2 100644 --- a/frontend/src/components/ResearchDevelopment/Hero.tsx +++ b/frontend/src/components/ResearchDevelopment/Hero.tsx @@ -48,7 +48,7 @@ const Hero: React.FC = ({ heroData }) => { src={background.url} alt="Hero Image Background" fill - priority + unoptimized className="absolute left-0 top-0 z-[-1] h-full object-cover" /> diff --git a/frontend/src/queries/heroImages.ts b/frontend/src/queries/heroImages.ts new file mode 100644 index 0000000..5ad5e08 --- /dev/null +++ b/frontend/src/queries/heroImages.ts @@ -0,0 +1,68 @@ +import { gql } from "graphql-request"; + +export const herosImagesQuery = gql` + { + earnPageHero { + background { + name + url + } + } + forBuildersPageHero { + background { + name + url + } + } + forLawyersPageHero { + background { + name + url + } + } + communityPageHero { + background { + name + url + } + } + cooperativePageHero { + background { + name + url + } + } + rAndDPageHero { + background { + name + url + } + } + brandAssetsPageHero { + background { + name + url + } + } + pnkTokenPageHero { + background { + name + url + } + } + } +`; +type Hero = { + background: { name: string; url: string }; +}; + +export type HeroImagesQueryType = { + earnPageHero: Hero; + forBuildersPageHero: Hero; + forLawyersPageHero: Hero; + communityPageHero: Hero; + cooperativePageHero: Hero; + rAndDPageHero: Hero; + brandAssetsPageHero: Hero; + pnkTokenPageHero: Hero; +}; diff --git a/frontend/src/queries/heros.ts b/frontend/src/queries/heros.ts deleted file mode 100644 index 2ee5357..0000000 --- a/frontend/src/queries/heros.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { gql } from "graphql-request"; - -export const herosQuery = gql` - { - pnkTokenPageHero { - background { - url - } - } - earnPageHero { - background { - url - } - } - } -`; - -export type HeroQueryType = { - pnkTokenPageHero: { - background: { - url: string; - }; - }; - earnPageHero: { - background: { - url: string; - }; - }; -}; diff --git a/frontend/src/utils/getHeroImgsProps.ts b/frontend/src/utils/getHeroImgsProps.ts new file mode 100644 index 0000000..6c1cedd --- /dev/null +++ b/frontend/src/utils/getHeroImgsProps.ts @@ -0,0 +1,17 @@ +import { getImageProps } from "next/image"; + +import { HeroImagesQueryType } from "@/queries/heroImages"; + +export const getHeroImgsProps = (data: HeroImagesQueryType) => { + type Keys = keyof HeroImagesQueryType; + const keys = Object.keys(data) as Keys[]; + return keys.map((key) => + getImageProps({ + // these should match the props we will define for Background Image in Heros.tsx + src: data[key].background.url, + alt: data[key].background.name, + fill: true, + unoptimized: true, + }), + ); +};