refactor: loading starter app on build [ECO-1166]

components/about-section-bucket.tsx

@@ -38,18 +38,18 @@ export default function AboutSectionBucket({ sectionWithBuckets }: {sectionWithB
         {bucket.icon && (
           <img
             className='mission-icon'
-            {...bucket.icon.$?.url}
+            {...bucket.icon.$?.url as {}}
             src={bucket.icon.url}
             alt='art work'
           />
         )}
 
         <div className='mission-section-content'>
           {bucket.title_h3 && (
-            <h3 {...bucket.$?.title_h3}>{bucket.title_h3}</h3>
+            <h3 {...bucket.$?.title_h3 as {}}>{bucket.title_h3}</h3>
           )}
           {typeof bucket.description === 'string' && (
-            <div {...bucket.$?.description}> {parse(bucket.description)}</div>
+            <div {...bucket.$?.description as {}}> {parse(bucket.description)}</div>
           )}
         </div>
       </div>
@@ -60,7 +60,7 @@ export default function AboutSectionBucket({ sectionWithBuckets }: {sectionWithB
     <div className='member-main-section'>
       <div className='member-head'>
         {sectionWithBuckets.title_h2 && (
-          <h2 {...sectionWithBuckets.$?.title_h2}>
+          <h2 {...sectionWithBuckets.$?.title_h2 as {}}>
             {sectionWithBuckets.title_h2}
           </h2>
         )}

components/archive-relative.tsx

@@ -25,9 +25,9 @@ export default function ArchiveRelative({ blogs }: BlogListProps) {
         <Link href={blog.url} key={idx}>
           <a>
             <div>
-              <h4 {...blog.$?.title}>{blog.title}</h4>
+              <h4 {...blog.$?.title as {}}>{blog.title}</h4>
               {typeof blog.body === 'string' && (
-                <div {...blog.$?.body}>{parse(blog.body.slice(0, 80))}</div>
+                <div {...blog.$?.body as {}}>{parse(blog.body.slice(0, 80))}</div>
               )}
             </div>
           </a>

components/blog-banner.tsx

@@ -26,13 +26,13 @@ export default function BlogBanner({ blogBanner }: {blogBanner : BannerProps}) {
     >
       <div className='blog-page-content'>
         {blogBanner.banner_title && (
-          <h1 className='hero-title' {...blogBanner.$?.banner_title}>
+          <h1 className='hero-title' {...blogBanner.$?.banner_title as {}}>
             {blogBanner.banner_title}
           </h1>
         )}
 
         {blogBanner.banner_description && (
-          <p className='hero-description' {...blogBanner.$?.banner_description}>
+          <p className='hero-description' {...blogBanner.$?.banner_description as {}}>
             {blogBanner.banner_description}
           </p>
         )}

components/blog-list.tsx

@@ -42,7 +42,7 @@ function BlogList({ bloglist }: { bloglist: BloglistProps }) {
               className='blog-list-img'
               src={bloglist.featured_image.url}
               alt='blog img'
-              {...bloglist.featured_image.$?.url}
+              {...bloglist.featured_image.$?.url as {}}
             />
           </a>
         </Link>
@@ -56,15 +56,15 @@ function BlogList({ bloglist }: { bloglist: BloglistProps }) {
           </Link>
         )}
         <p>
-          <strong {...bloglist.$?.date}>
+          <strong {...bloglist.$?.date as {}}>
             {moment(bloglist.date).format('ddd, MMM D YYYY')}
           </strong>
           ,{" "}
           <strong {...bloglist.author[0].$?.title}>
             {bloglist.author[0].title}
           </strong>
         </p>
-        <div {...bloglist.$?.body}>{parse(body)}</div>
+        <div {...bloglist.$?.body as {}}>{parse(body)}</div>
         {bloglist.url ? (
           <Link href={bloglist.url}>
             <a>

components/blog-section.tsx

@@ -45,7 +45,7 @@ export default function BlogSection(props: FeaturedBlogProps) {
     <div className='community-section'>
       <div className='community-head'>
         {fromBlog.title_h2 && (
-          <h2 {...fromBlog.$?.title_h2}>{fromBlog.title_h2}</h2>
+          <h2 {...fromBlog.$?.title_h2 as {}}>{fromBlog.title_h2}</h2>
         )}
         {fromBlog.view_articles && (
           <Link href={fromBlog.view_articles.href}>
@@ -63,7 +63,7 @@ export default function BlogSection(props: FeaturedBlogProps) {
           <div className='featured-blog' key={index}>
             {blog.featured_image && (
               <img
-                {...blog.featured_image.$?.url}
+                {...blog.featured_image.$?.url as {}}
                 src={blog.featured_image.url}
                 alt={blog.featured_image.filename}
                 className='blog-post-img'

components/card-section.tsx

@@ -23,8 +23,8 @@ export default function CardSection({ cards }: CardProps) {
     <div className='demo-section'>
       {cards?.map((card, index) => (
         <div className='cards' key={index}>
-          {card.title_h3 && <h3 {...card.$?.title_h3}>{card.title_h3}</h3>}
-          {card.description && <p {...card.$?.description}>{card.description}</p>}
+          {card.title_h3 && <h3 {...card.$?.title_h3 as {}}>{card.title_h3}</h3>}
+          {card.description && <p {...card.$?.description as {}}>{card.description}</p>}
           <div className='card-cta'>
             {card.call_to_action.title && card.call_to_action.href && (
               <Link href={card.call_to_action.href}>

components/footer.tsx

@@ -58,7 +58,7 @@ export default function Footer({ footer, entries }: {footer: FooterProps, entrie
                   src={footerData.logo.url}
                   alt={footerData.title}
                   title={footerData.title}
-                  {...footer.logo.$?.url}
+                  {...footer.logo.$?.url as {}}
                   className='logo footer-logo'
                 />
               </a>
@@ -99,7 +99,7 @@ export default function Footer({ footer, entries }: {footer: FooterProps, entrie
                     <img
                       src={social.icon.url}
                       alt={social.link.title}
-                      {...social.icon.$?.url}
+                      {...social.icon.$?.url as {}}
                     />
                   )}
                 </a>
@@ -111,7 +111,7 @@ export default function Footer({ footer, entries }: {footer: FooterProps, entrie
         </div>
       </div>
       {footerData && typeof footerData.copyright === 'string' ? (
-        <div className='copyright' {...footer.$?.copyright}>
+        <div className='copyright' {...footer.$?.copyright as {}}>
           {parse(footerData.copyright)}
         </div>
       ) : (

components/header.tsx

@@ -58,7 +58,7 @@ export default function Header({ header, entries }: {header: HeaderProps, entrie
       <div className='note-div'>
         {headerData?.notification_bar.show_announcement ? (
           typeof headerData.notification_bar.announcement_text === 'string' && (
-            <div {...headerData.notification_bar.$?.announcement_text}>
+            <div {...headerData.notification_bar.$?.announcement_text as {}}>
               {parse(headerData.notification_bar.announcement_text)}
             </div>
           )
@@ -76,7 +76,7 @@ export default function Header({ header, entries }: {header: HeaderProps, entrie
                   src={headerData.logo.url}
                   alt={headerData.title}
                   title={headerData.title}
-                  {...headerData.logo.$?.url}
+                  {...headerData.logo.$?.url as {}}
                 />
               </a>
             </Link>
@@ -98,7 +98,7 @@ export default function Header({ header, entries }: {header: HeaderProps, entrie
                   <li
                     key={list.label}
                     className='nav-li'
-                    {...list.page_reference[0].$?.url}
+                    {...list.page_reference[0].$?.url as {}}
                   >
                     <Link href={list.page_reference[0].url}>
                       <a className={className}>{list.label}</a>

components/hero-banner.tsx

@@ -39,7 +39,7 @@ export default function HeroBanner(props: BannerProps) {
         }}
       >
         {banner.banner_title && (
-          <h1 className='hero-title' {...banner.$?.banner_title}>
+          <h1 className='hero-title' {...banner.$?.banner_title as {}}>
             {banner.banner_title}
           </h1>
         )}
@@ -49,7 +49,7 @@ export default function HeroBanner(props: BannerProps) {
             style={{
               color: banner?.text_color ? banner.text_color : '#222',
             }}
-            {...banner.$?.banner_description}
+            {...banner.$?.banner_description as {}}
           >
             {banner?.banner_description}
           </p>
@@ -70,7 +70,7 @@ export default function HeroBanner(props: BannerProps) {
         <img
           alt={banner.banner_image.filename}
           src={banner.banner_image.url}
-          {...banner.banner_image.$?.url}
+          {...banner.banner_image.$?.url as {}}
         />
       ) : (
         ''

components/section-bucket.tsx

@@ -33,30 +33,30 @@ export default function SectionBucket({ section }: {section: BucketProps}) {
     <div className='member-main-section'>
       <div className='member-head'>
         {section.title_h2 && (
-          <h2 {...section.$?.title_h2}>{section.title_h2}</h2>
+          <h2 {...section.$?.title_h2 as {}}>{section.title_h2}</h2>
         )}
         {section.description && (
-          <p {...section.$?.description}>{section.description}</p>
+          <p {...section.$?.description as {}}>{section.description}</p>
         )}
       </div>
       <div className='member-section'>
         {section.buckets?.map((bucket, index) => (
           <div className='content-section' key={index}>
             {bucket.icon && (
               <img
-                {...bucket.icon.$?.url}
+                {...bucket.icon.$?.url as {}}
                 src={bucket.icon.url}
                 alt='bucket icon'
               />
             )}
 
             {bucket.title_h3 ? (
-              <h3 {...bucket.$?.title_h3}>{bucket.title_h3}</h3>
+              <h3 {...bucket.$?.title_h3 as {}}>{bucket.title_h3}</h3>
             ) : (
               ''
             )}
             {typeof bucket.description === 'string' && (
-              <div {...bucket.$?.description}>{parse(bucket.description)}</div>
+              <div {...bucket.$?.description as {}}>{parse(bucket.description)}</div>
             )}
             {bucket.call_to_action.title ? (
               <Link

components/section-with-html-code.tsx

@@ -24,17 +24,17 @@ export default function SectionWithHtmlCode({ embedCode }: {embedCode : ObjectPr
       <div className='contact-page-section max-width'>
         <div className='contact-page-content'>
           {embedCode.title && (
-            <h1 {...embedCode.$?.title}>{embedCode.title}</h1>
+            <h1 {...embedCode.$?.title as {}}>{embedCode.title}</h1>
           )}
           {typeof embedCode.description === 'string' && (
-            <div {...embedCode.$?.description}>
+            <div {...embedCode.$?.description as {}}>
               {parse(embedCode.description)}
             </div>
           )}
         </div>
         <div className='contact-page-form'>
           {typeof embedCode.html_code === 'string' && (
-            <div {...embedCode.$?.html_code}>{parse(embedCode.html_code)}</div>
+            <div {...embedCode.$?.html_code as {}}>{parse(embedCode.html_code)}</div>
           )}
         </div>
       </div>
@@ -44,13 +44,13 @@ export default function SectionWithHtmlCode({ embedCode }: {embedCode : ObjectPr
     <div className='contact-maps-section max-width'>
       <div className='maps-details'>
         {typeof embedCode.html_code === 'string' && (
-          <div {...embedCode.$?.html_code}>{parse(embedCode.html_code)}</div>
+          <div {...embedCode.$?.html_code as {}}>{parse(embedCode.html_code)}</div>
         )}
       </div>
       <div className='contact-maps-content'>
         {embedCode.title ? <h2>{embedCode.title}</h2> : ''}
         {typeof embedCode.description === 'string' && (
-          <div {...embedCode.$?.description}>
+          <div {...embedCode.$?.description as {}}>
             {parse(embedCode.description)}
           </div>
         )}

components/section.tsx

@@ -26,10 +26,10 @@ export default function Section({ section }: {section : SectionProps}) {
     return (
       <div className='home-content' key={key}>
         {section.title_h2 && (
-          <h2 {...section.$?.title_h2}>{section.title_h2}</h2>
+          <h2 {...section.$?.title_h2 as {}}>{section.title_h2}</h2>
         )}
         {section.description && (
-          <p {...section.$?.description}>{section.description}</p>
+          <p {...section.$?.description as {}}>{section.description}</p>
         )}
         {section.call_to_action.title && section.call_to_action.href ? (
           <Link href={section.call_to_action.href}>
@@ -50,7 +50,7 @@ export default function Section({ section }: {section : SectionProps}) {
   function imageContent(key: any) {
     return (
       <img
-        {...section.image.$?.url}
+        {...section.image.$?.url as {}}
         src={section.image.url}
         alt={section.image.filename}
         key={key}

components/team-section.tsx

@@ -30,10 +30,10 @@ export default function TeamSection({ ourTeam }: {ourTeam : TeamProps}) {
     <div className='about-team-section'>
       <div className='team-head-section'>
         {ourTeam.title_h2 && (
-          <h2 {...ourTeam.$?.title_h2}>{ourTeam.title_h2}</h2>
+          <h2 {...ourTeam.$?.title_h2 as {}}>{ourTeam.title_h2}</h2>
         )}
         {ourTeam.description ? (
-          <p {...ourTeam.$?.description}>{ourTeam.description}</p>
+          <p {...ourTeam.$?.description as {}}>{ourTeam.description}</p>
         ) : (
           ''
         )}
@@ -45,13 +45,13 @@ export default function TeamSection({ ourTeam }: {ourTeam : TeamProps}) {
               <img
                 alt={employee.image.filename}
                 src={employee.image.url}
-                {...employee.image.$?.url}
+                {...employee.image.$?.url as {}}
               />
             )}
             <div className='team-details'>
-              {employee.name && <h3 {...employee.$?.name}>{employee.name}</h3>}
+              {employee.name && <h3 {...employee.$?.name as {}}>{employee.name}</h3>}
               {employee.designation && (
-                <p {...employee.$?.designation}>{employee.designation}</p>
+                <p {...employee.$?.designation as {}}>{employee.designation}</p>
               )}
             </div>
           </div>