Enhance: Improve performance

canopas · Sep 13, 2023 · 993ba5e · 993ba5e
1 parent 6a904d3
commit 993ba5e
Show file tree

Hide file tree

Showing 15 changed files with 92 additions and 84 deletions.
diff --git a/assets/css/global.css b/assets/css/global.css
@@ -240,7 +240,7 @@ code::after {
   :where(blockquote, blockquote i, blockquote i strong):not(
     :where([class~="not-prose"] *)
   ) {
-  @apply not-italic !text-[1.4rem] lg:!text-[1.755rem] !leading-[2.3rem] !text-black-core/[0.75] !font-extralight tracking-wide font-inter;
+  @apply not-italic !text-[1.4rem] lg:!text-[1.755rem] !leading-[2.3rem] !text-black-core/[0.75] !font-extralight !tracking-wide !font-inter;
 }
 
 .prose

diff --git a/components/authorDetails.js b/components/authorDetails.js
@@ -13,6 +13,7 @@ export default function AuthorDetails({ postData }) {
               className="absolute inset-x-5 !my-0 rounded-full object-cover"
               src={postData.authorImage}
               alt={postData.authorAltText}
+              loading="lazy"
             />
           </div>
           <div className="flex flex-col space-y-3 items-center">
@@ -39,6 +40,7 @@ export default function AuthorDetails({ postData }) {
               className="absolute lg:left-4 top-2 rounded-full object-cover"
               src={postData.authorImage}
               alt={postData.authorAltText}
+              loading="lazy"
             />
           </div>
           <div

diff --git a/components/comments/index.js b/components/comments/index.js
@@ -63,6 +63,7 @@ export default function Comment({ post }) {
                               objectFit="cover"
                               src={UserImage}
                               alt={"user-avatar"}
+                              loading="lazy"
                             />
                           </div>
                           {comment.attributes.user.data.map((user) => {
@@ -115,6 +116,7 @@ export default function Comment({ post }) {
                                             objectFit="cover"
                                             src={UserImage}
                                             alt={"user-avatar"}
+                                            loading="lazy"
                                           />
                                         </div>
                                         {threadComment.attributes.user.data.map(

diff --git a/components/cta/CTA2.js b/components/cta/CTA2.js
@@ -106,12 +106,14 @@ export default function CTA() {
           src={bg400}
           className="absolute w-full -z-[1]"
           alt="canopas-contact-footer"
+          loading="lazy"
         />
       ) : (
         <Image
           src={bg2400}
           className="absolute top-0 left-0 w-full h-full xl2:h-[unset] -z-[1] object-cover xl2:object-fill"
           alt="canopas-contact-footer"
+          loading="lazy"
         />
       )}
 
@@ -259,6 +261,7 @@ export default function CTA() {
                     src={loaderImage}
                     className="w-16 h-16"
                     alt="loader-image"
+                    loading="lazy"
                   />
                 ) : (
                   <div className="relative">

diff --git a/components/cta/CTA3.js b/components/cta/CTA3.js
@@ -256,6 +256,7 @@ export default function CTA() {
                       src={loaderImage}
                       className="w-16 h-16"
                       alt="loader-image"
+                      loading="lazy"
                     />
                   ) : (
                     <div className="relative">

diff --git a/components/cta/CTA5.js b/components/cta/CTA5.js
@@ -45,6 +45,7 @@ export default function CTA() {
               src={cta800}
               alt="cta-image"
               className="mt-4 w-[85%] h-[85%] sm:w-4/5 sm:h-4/5 md:w-full md:h-full md:mt-0 mx-[7.5%] sm:mx-[10%] md:mx-0"
+              loading="lazy"
             />
 
             <div className="gradient-border absolute bottom-4 left-2 h-[55px] border-l-[13px] md:hidden"></div>

diff --git a/components/partials/footer.js b/components/partials/footer.js
@@ -14,7 +14,7 @@ import {
   faYoutube,
 } from "@fortawesome/free-brands-svg-icons";
 import { faBell, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { faCopyright } from "@fortawesome/free-regular-svg-icons";
+import { faCopyright } from "@fortawesome/free-regular-svg-icons/faCopyright";
 import { isValidEmail } from "../../utils";
 
 export default function Footer({ mixpanel }) {
@@ -59,6 +59,7 @@ export default function Footer({ mixpanel }) {
           className="absolute top-[15px] sm:top-0 left-0 w-full h-full xl2:h-[unset] -z-[1] object-cover xl2:object-fill"
           src={bg}
           alt="canopas-footer"
+          loading="lazy"
         />
         <div className="container lg:px-20 2xl:px-32">
           <div className="grid grid-rows-2 xl:grid-rows-none xl:grid-cols-2 justify-items-stretch mt-7 md:mt-11 mb-8 md:mb-12 xl:mb-[60px]">

diff --git a/components/partials/header.js b/components/partials/header.js
@@ -68,7 +68,7 @@ export default function Header({ mixpanel }) {
                   src={Logo}
                   className="mt-1 w-[205px] h-[38.5px]"
                   alt="canopas-logo"
-                  loading="eager"
+                  loading="lazy"
                 />
               </Link>
             </div>
@@ -241,6 +241,7 @@ export default function Header({ mixpanel }) {
                           src={Logo}
                           className="mt-1 w-[190px] h-[34.5px]"
                           alt="canopas-logo"
+                          loading="lazy"
                         />
                       </Link>
                     </div>

diff --git a/components/posts/postsList.js b/components/posts/postsList.js
@@ -40,6 +40,7 @@ export default function PostsList({ postData, mixpanel }) {
                     className="absolute top-2/4 left-2/4 translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
                     src={post.authorImage}
                     alt={post.authorAltText}
+                    loading="lazy"
                   />
                 </div>
                 <span className="font-inter font-medium">

diff --git a/components/posts/recommandedPosts.js b/components/posts/recommandedPosts.js
@@ -36,6 +36,7 @@ export default function RecommandedPosts({ postData }) {
                           className="absolute top-2/4 left-2/4 translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
                           src={post.authorImage}
                           alt={post.authorAltText}
+                          loading="lazy"
                         />
                       </div>
                       <span className="font-inter font-medium tracking-wide">
@@ -73,7 +74,7 @@ export default function RecommandedPosts({ postData }) {
                       height={100}
                       src={post.image_url || ""}
                       alt={post.alternativeText || ""}
-                      loading="eager"
+                      loading="lazy"
                       className={`${
                         post.image.data == null
                           ? "w-auto h-4/5 mx-auto my-[5%] xl:my-[7%]"

diff --git a/pages/[slug].js b/pages/[slug].js
@@ -273,7 +273,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
                       height={200}
                       src={post.image_url || ""}
                       alt={post.alternativeText || ""}
-                      loading="eager"
+                      loading="lazy"
                       className={`${
                         post.image.data == null
                           ? "w-[45%] h-4/5 mx-auto my-[5%]"
@@ -326,6 +326,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
                             className="absolute top-2/4 left-2/4 translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
                             src={post.authorImage}
                             alt={post.authorAltText}
+                            loading="lazy"
                           />
                         </div>
                         <div className="text-base md:text-[1.09rem] xl:text-[1.125rem] tracking-wide">

diff --git a/pages/index.js b/pages/index.js
@@ -357,9 +357,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
                           height={100}
                           src={post.image_url || ""}
                           alt={post.alternativeText || ""}
-                          loading={
-                            i === 0 && count % 3 === 1 ? "eager" : "lazy"
-                          }
+                          loading="lazy"
                           className={`${
                             post.image.data == null
                               ? "w-[46%] h-4/5 mx-auto my-[5%]"
@@ -377,7 +375,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
                       <div
                         className={`text-[1.3125rem] leading-7 sm:text-[1.375rem] sm:leading-[1.875rem] tracking-none text-black-core/[0.87] hover:underline underline-offset-4 transition-all hover:scale-[0.96] font-inter font-semibold ${
                           i === 0 && count % 3 === 1
-                            ? "md:text-2xl xl:text-3xl md:font-bold xl:leading-10"
+                            ? "md:text-2xl xl:text-3xl xl:leading-10"
                             : "md:text-xl lg:text-[1.4375rem] lg:leading-8"
                         }`}
                       >

diff --git a/pages/resources.js b/pages/resources.js
@@ -357,9 +357,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
                           height={100}
                           src={post.image_url || ""}
                           alt={post.alternativeText || ""}
-                          loading={
-                            i === 0 && count % 3 === 1 ? "eager" : "lazy"
-                          }
+                          loading="lazy"
                           className={`${
                             post.image.data == null
                               ? "w-[46%] h-4/5 mx-auto my-[5%]"
@@ -377,7 +375,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
                       <div
                         className={`text-[1.3125rem] leading-7 sm:text-[1.375rem] sm:leading-[1.875rem] tracking-none text-black-core/[0.87] hover:underline underline-offset-4 transition-all hover:scale-[0.96] font-inter font-semibold ${
                           i === 0 && count % 3 === 1
-                            ? "md:text-2xl xl:text-3xl md:font-bold xl:leading-10"
+                            ? "md:text-2xl xl:text-3xl xl:leading-10"
                             : "md:text-xl lg:text-[1.4375rem] lg:leading-8"
                         }`}
                       >

diff --git a/pages/unsubscribe/index.js b/pages/unsubscribe/index.js
@@ -68,6 +68,7 @@ export default function Unsubscribe() {
               className="w-full h-full rounded-full object-cover inset-0"
               src={emailTemplate}
               alt="email"
+              loading="lazy"
             />
           </div>
 

diff --git a/utils.js b/utils.js
@@ -13,20 +13,19 @@ function getReadingTime(content) {
 
 // Formate date and time from millis
 function formateDate(date) {
-  if (!date) return [null, null];
-  const newDate = new Date(date);
-  const formattedDate = newDate.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  });
-
-  // time formate
-  const formattedTime = newDate.toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-  return [formattedDate, formattedTime];
+  return date
+    ? [
+        new Date(date).toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+          year: "numeric",
+        }),
+        new Date(date).toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        }),
+      ]
+    : [null, null];
 }
 
 function setPostFields(post, slug) {
@@ -67,80 +66,78 @@ function setPostFields(post, slug) {
 
 function calculateWeight(post, keyword) {
   let weight = 0;
-  if (post.attributes.title.toLowerCase().includes(keyword.toLowerCase())) {
-    weight = post.attributes.title
-      .toLowerCase()
-      .match(new RegExp(keyword.toLowerCase(), "g")).length;
-    weight *= 5;
+  const lowercaseKeyword = keyword.toLowerCase();
+
+  if (post.attributes.title.toLowerCase().includes(lowercaseKeyword)) {
+    weight +=
+      post.attributes.title
+        .toLowerCase()
+        .match(new RegExp(lowercaseKeyword, "g")).length * 5;
   }
-  if (post.attributes.content.toLowerCase().includes(keyword.toLowerCase())) {
-    weight = post.attributes.content
-      .toLowerCase()
-      .match(new RegExp(keyword.toLowerCase(), "g")).length;
-    weight *= 2;
+
+  if (post.attributes.content.toLowerCase().includes(lowercaseKeyword)) {
+    weight +=
+      post.attributes.content
+        .toLowerCase()
+        .match(new RegExp(lowercaseKeyword, "g")).length * 2;
   }
+
   if (post.attributes.tags) {
-    post.attributes.tags.map((tag) => {
-      if (tag.name.toLowerCase().includes(keyword.toLowerCase())) {
-        weight = tag.name
-          .toLowerCase()
-          .match(new RegExp(keyword.toLowerCase(), "g")).length;
-        weight *= 1;
+    weight += post.attributes.tags.reduce((acc, tag) => {
+      if (tag.name.toLowerCase().includes(lowercaseKeyword)) {
+        acc +=
+          tag.name.toLowerCase().match(new RegExp(lowercaseKeyword, "g"))
+            .length * 1;
       }
-    });
+      return acc;
+    }, 0);
   }
 
   return weight;
 }
 
-function filterPostsByCategory(post, keyword) {
-  return post.filter(
-    (result) =>
-      result.attributes.category.data != null &&
-      result.attributes.category.data.attributes.name == keyword,
+const filterPostsByCategory = (posts, keyword) =>
+  posts.filter(
+    (result) => result.attributes.category.data?.attributes.name === keyword,
   );
-}
 
-function isValidEmail(email) {
-  let emailRegx =
-    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-  return !emailRegx.test(email);
-}
-function isValidPhoneNumber(phonenumber) {
-  let NumberRegx =
-    /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;
-  return !NumberRegx.test(phonenumber);
-}
+const isValidEmail = (email) =>
+  !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+    email,
+  );
+
+const isValidPhoneNumber = (phonenumber) =>
+  !/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im.test(
+    phonenumber,
+  );
 
 function filterPostsByCategoryAndTag(post, posts) {
   const relatedPosts = [];
   const postTags = post?.tags.map((tag) => tag.name);
   const postCategoryName = post?.category.data?.attributes.name ?? null;
 
-  if (posts) {
-    if (postCategoryName || postTags?.length > 0) {
-      posts.forEach((post) => {
-        let index = 0;
-
-        const relatedTags = post.attributes.tags.map((tag) => tag.name);
-        const relatedCategoryName =
-          post.attributes.category.data?.attributes.name ?? null;
-
-        index +=
-          postCategoryName &&
-          relatedCategoryName &&
-          postCategoryName === relatedCategoryName
-            ? 3
-            : 0;
-
-        index += postTags.filter((tag) => relatedTags.includes(tag)).length;
-
-        if (index > 0) {
-          post.attributes.index = index;
-          relatedPosts.push(post);
-        }
-      });
-    }
+  if (posts && (postCategoryName || postTags?.length > 0)) {
+    posts.forEach((post) => {
+      let index = 0;
+
+      const relatedTags = post.attributes.tags.map((tag) => tag.name);
+      const relatedCategoryName =
+        post.attributes.category.data?.attributes.name ?? null;
+
+      index +=
+        postCategoryName &&
+        relatedCategoryName &&
+        postCategoryName === relatedCategoryName
+          ? 3
+          : 0;
+
+      index += postTags.filter((tag) => relatedTags.includes(tag)).length;
+
+      if (index > 0) {
+        post.attributes.index = index;
+        relatedPosts.push(post);
+      }
+    });
   }
   return relatedPosts;
 }