Closes #97: added lottie file support via strapi. Also added a backup…

… header image if the lottie file json is not available
Lilypad-Tech · Nov 11, 2024 · a3f3e11 · a3f3e11
1 parent 43106a4
commit a3f3e11
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 85 deletions.
diff --git a/apps/website/public/sitemap-0.xml b/apps/website/public/sitemap-0.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://lilypad.tech/about-us</loc><lastmod>2024-11-07T00:24:52.741Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://lilypad.tech</loc><lastmod>2024-11-07T00:24:52.743Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://lilypad.tech/team</loc><lastmod>2024-11-07T00:24:52.743Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://lilypad.tech/about-us</loc><lastmod>2024-11-11T04:33:04.331Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://lilypad.tech</loc><lastmod>2024-11-11T04:33:04.331Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://lilypad.tech/team</loc><lastmod>2024-11-11T04:33:04.331Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>
diff --git a/apps/website/src/app/hooks/strapi/UseStrapi.ts b/apps/website/src/app/hooks/strapi/UseStrapi.ts
@@ -18,9 +18,9 @@ function useStrapi({ pathname }: StrapiProps): StrapiResponse {
 							const homepageData = homepageInfoResp.value as HomePageCmsInfo;
 							setStrapi((prevState) => ({
 								...prevState,
-								...(homepageInfoResp.value as HomePageCmsInfo),
+								...homepageData,
 								trusted_bies: trustedByResp.value || [],
-								header_image_url: homepageData.header_image?.url,
+								header_lottie: homepageData.header_lottie || null,
 							}));
 						}
 					})

diff --git a/apps/website/src/app/hooks/strapi/requests.ts b/apps/website/src/app/hooks/strapi/requests.ts
@@ -5,18 +5,22 @@ const cms_home_url = cms_base_url?.replace("/api", "");
 
 export function getHomepageInfo() {
   return new Promise((resolve, reject) => {
-    fetch(`${cms_base_url}/website-homepage?populate[header_image][fields][0]=url`, {
-      headers: {
-        authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API}`,
-      },
-    })
+    fetch(
+      `${cms_base_url}/website-homepage?populate[header_image][fields][0]=url&populate[header_lottie][fields][0]=url`, 
+      {
+        headers: {
+          authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API}`,
+        },
+      }
+    )
       .then((data) => {
         data.json().then(({ data: info }) => {
           const homepageInfo = {
             ...info,
             header_image_url: info.header_image ? info.header_image.url : null,
+            header_lottie: info.header_lottie ? { url: info.header_lottie.url } : null,
           };
-          resolve(homepageInfo); // Return the full homepage info with header image URL
+          resolve(homepageInfo); // Return the updated homepage info with header image and Lottie file URLs
         });
       })
       .catch((err) => {
@@ -25,7 +29,6 @@ export function getHomepageInfo() {
   });
 }
 
-
 export function getTrustedBy() {
 	return new Promise((resolve, reject) => {
 		fetch(

diff --git a/apps/website/src/app/hooks/strapi/types.ts b/apps/website/src/app/hooks/strapi/types.ts
@@ -10,7 +10,8 @@ export interface HomePageCmsInfo {
   badge_text: string;
   mission_statement: string;
   header_image_alt: string;
-  header_image_url: string; 
+  header_image_url?: string | null;
+  header_lottie?: { url: string } | null;
   trusted_bies: {
     src: string;
     alt: string;

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
@@ -30,6 +30,7 @@ import useFade from "./hooks/UseFade";
 import useFadeInView from "./hooks/UseFadeInView";
 import { PageContext } from "./clientLayout";
 import { HomePageCmsInfo } from "./hooks/strapi/types";
+import { Player } from '@lottiefiles/react-lottie-player';
 
 export default function Home() {
 	const { strapi } = useContext(PageContext) as { strapi: HomePageCmsInfo };
@@ -347,17 +348,25 @@ export default function Home() {
 							style={fade}
 							className="relative w-full lg:w-1/2 lg:h-full max-w-2xl mr-auto pb-uui-7xl lg:pb-uui-none"
 						>
-						<Image
-							className="mr-auto lg:mx-auto lg:mr-0 lg:ml-auto object-cover w-full h-full"
-							width={500}
-							height={500}
-							alt={strapi?.header_image_alt}
-							src={
-								strapi?.header_image_url
-									? `https://webadmin.lilypad.team${strapi.header_image_url}`
-									: "/lilypad-fill.png" // Use a default image if none exists
-							}
-						/>
+						  {strapi?.header_lottie?.url ? (
+						    <Player
+						      autoplay
+						      loop
+						      src={`https://webadmin.lilypad.team${strapi.header_lottie.url}`}
+						      style={{ width: '100%', height: '100%' }}
+						    />
+						  ) : (
+						    <Image
+						      width={500}
+						      height={500}
+						      alt={strapi?.header_image_alt || "Default Image"}
+						      src={
+						        strapi?.header_image_url
+						          ? `https://webadmin.lilypad.team${strapi.header_image_url}`
+						          : "/lilypad-fill.png" // Default image if none exists
+						      }
+						    />
+						  )}
 						</animated.div>
 					</div>
 				</SectionContainer>

diff --git a/package.json b/package.json
@@ -12,5 +12,9 @@
 	},
 	"keywords": [],
 	"author": "",
-	"license": "ISC"
+	"license": "ISC",
+	"dependencies": {
+		"@lottiefiles/dotlottie-react": "^0.9.3",
+		"@lottiefiles/react-lottie-player": "^3.5.4"
+	}
 }