chore: updated node to 18 for deployment

package.json

@@ -19,7 +19,9 @@
     "@stencil/core": "^2.17.1",
     "@stencil/router": "^1.0.1",
     "@types/node": "^18.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.27.0",
     "dotenv": "^16.0.1",
+    "eslint": "^9.22.0",
     "eslint-plugin-react": "^7.30.1",
     "prettier": "2.7.1",
     "rollup-plugin-replace": "^2.2.0",
@@ -31,10 +33,10 @@
     "@contentstack/live-preview-utils": "^1.1.0",
     "@contentstack/utils": "^1.1.2",
     "@saasquatch/stencil-html-parser": "^1.0.2",
-    "@stencil/eslint-plugin": "^0.4.0",
+    "@stencil/eslint-plugin": "^1.0.0",
     "@stencil/helmet": "^0.3.3",
     "@stencil/store": "^2.0.0",
-    "@typescript-eslint/parser": "^4.0.0",
+    "@typescript-eslint/parser": "^8.27.0",
     "contentstack": "^3.15.2",
     "moment": "^2.29.4",
     "pretty-print-json": "^1.2.5",
@@ -53,6 +55,6 @@
     "url": "https://github.com/contentstack/starter-apps/stencil-js"
   },
   "engines": {
-    "node": "=16.16.0"
+    "node": ">=18.0.0"
   }
 }

src/components/about-section-bucket.tsx

@@ -30,21 +30,31 @@ type BucketProps = {
 }
 
 function bucketContent(bucket: Bucket, index: number) {
+
   return (
     <div class="mission-content-section" key={index}>
-      {bucket.icon && <img class="mission-icon" {...bucket.icon.$?.url} src={bucket.icon.url} alt="art work" />}
+      {bucket.icon && (
+        <img
+          class="mission-icon"
+          {...(typeof bucket.icon.$?.url === "object" ? bucket.icon.$.url : {})}
+          src={bucket.icon.url}
+          alt="art work"
+        />
+      )}
 
       <div class="mission-section-content">
-        {bucket.title_h3 && <h3 {...bucket.$?.title_h3}>{bucket.title_h3}</h3>}
-        <span {...bucket.$?.description}>{bucket.description && parse(bucket.description)}</span>
+        {bucket.title_h3 && <h3 {...(bucket.$?.title_h3 ?? {})}>{bucket.title_h3}</h3>}
+        <span {...(bucket.$?.description ?? {})}>
+          {bucket.description ? parse(bucket.description) : ""}
+        </span>
       </div>
     </div>
   );
 }
 
+
 export default function AboutSectionBucket(props: BucketProps) {
   const { sectionWithBuckets } = props;
-
   return (
     <div class="member-main-section">
       <div class="member-head">

src/components/app-blog-post/app-blog-post.tsx

@@ -81,7 +81,11 @@ export class AppBlogPost {
           </div>
           <div class="blog-column-right">
             <div class="related-post">
-              {banner != {} && banner.page_components && <h2 {...banner.page_components[2].widget.$?.title_h2}>{banner.page_components[2].widget.title_h2}</h2>}
+            {Object.keys(banner).length > 0 && banner.page_components && 
+  <h2 {...(typeof banner.page_components[2].widget.$?.title_h2 === 'object' ? banner.page_components[2].widget.$?.title_h2 : {})}>
+    {banner.page_components[2].widget.title_h2}
+  </h2>
+}
               {result?.related_post && <ArchiveRelative blogs={result.related_post} />}
             </div>
           </div>

src/components/app-blog/app-blog.tsx

@@ -12,17 +12,17 @@ import { Image } from '../../typescript/action';
 
 type Result = {
   is_archived: boolean;
-}
+};
 
 type AdditionalParam = {
   title: {};
   date: {};
   body: {};
-}
+};
 
 type Author = {
   title: string;
-}
+};
 
 type BlogList = {
   featured_image: Image;
@@ -32,7 +32,7 @@ type BlogList = {
   body: string;
   author: Author[];
   $: AdditionalParam;
-}
+};
 
 @Component({
   tag: 'app-blog',
@@ -102,7 +102,7 @@ export class AppBlog {
       <div>
         <Helmet>{blog.seo && blog.seo.enable_search_indexing ? metaData(blog.seo) : null}</Helmet>
         {blog && <app-devtools page={blog} blogList={blogList.concat(archived)} />}
-        {blog !== {} && blog.page_components && <RenderComponents pageComponents={blog.page_components} blogsPage />}
+        {Object.keys(blog).length > 0 && blog.page_components && <RenderComponents pageComponents={blog.page_components} blogsPage />}
 
         <div class="blog-container">
           <div class="blog-column-left">
@@ -111,7 +111,12 @@ export class AppBlog {
                 <div class="blog-list" key={index}>
                   {bloglist.featured_image && (
                     <a href={bloglist.url}>
-                      <img alt="blog img" class="blog-list-img" {...bloglist.featured_image.$?.url} src={bloglist.featured_image.url} />
+                      <img
+                        alt="blog img"
+                        class="blog-list-img"
+                        {...(typeof bloglist.featured_image.$?.url === 'object' ? bloglist.featured_image.$?.url : {})}
+                        src={bloglist.featured_image.url}
+                      />
                     </a>
                   )}
                   <div class="blog-content">
@@ -136,7 +141,8 @@ export class AppBlog {
               ))}
           </div>
           <div class="blog-column-right">
-            {blog !== {} && blog.page_components && <h2>{blog.page_components[1].widget.title_h2}</h2>}
+            {Object.keys(blog).length > 0 && blog.page_components && <h2>{blog.page_components[1].widget.title_h2}</h2>}
+
             <ArchiveRelative blogs={archived} />
           </div>
         </div>

src/components/app-footer/app-footer.tsx

@@ -68,7 +68,7 @@ export class AppFooter {
             <nav>
               <ul class="nav-ul">
                 {footer.navigation?.link.map((menu: Menu) => (
-                  <li class="footer-nav-li" key={menu.title} {...menu?.$?.href}>
+                  <li class="footer-nav-li" key={menu.title} {...(typeof menu?.$?.href === 'object' ? menu.$?.href : {})}>
                     <stencil-route-link url={menu.href}>{menu.title}</stencil-route-link>
                   </li>
                 ))}
@@ -79,7 +79,7 @@ export class AppFooter {
             <div class="social-nav">
               {footer.social?.social_share.map((social: Social) => (
                 <a href={social.link.href} title={social.link.title} key={social.link.title}>
-                  {social.icon && <img {...social.icon?.$?.url} src={social.icon.url} alt={social.link.title} />}
+                  {social.icon && <img {...(typeof social.icon?.$?.url === 'object' ? social.icon.$?.url : {})} src={social.icon.url} alt={social.link.title} />}
                 </a>
               ))}
             </div>

src/components/app-header/app-header.tsx

@@ -91,8 +91,8 @@ export class AppHeader {
           <nav class="menu">
             <ul class="nav-ul header-ul">
               {header.navigation_menu?.map((list: HeaderMenu) => (
-                <li key={list.label} class="nav-li" {...list.page_reference[0]?.$?.url}>
-                  <stencil-route-link url={list.page_reference[0].url} exact activeClass={'active'}>
+                <li key={list.label} class="nav-li" {...(typeof list.page_reference[0]?.$?.url === 'object' ? list.page_reference[0].$?.url : {})}>
+                <stencil-route-link url={list.page_reference[0].url} exact activeClass={'active'}>
                     {list.label}
                   </stencil-route-link>
                 </li>

src/components/archive-relative.tsx

@@ -24,8 +24,8 @@ export default function ArchiveRelative(props: BlogListProps) {
   return (
     <Fragment>
       {blogs?.map((blog, idx: number) => (
-        <a href={blog.url} {...blog.$?.url} key={idx}>
-          <div>
+        <a href={blog.url} {...(typeof blog.$?.url === 'object' ? blog.$?.url : {})} key={idx}>
+        <div>
             <h4 {...blog.$?.title}>{blog.title}</h4>
             {<div {...blog.$?.body}>{parse(blog.body.slice(0, 80))}</div>}
           </div>

src/components/blog-section.tsx

@@ -10,7 +10,7 @@ import { FeaturedBlogData } from '../typescript/component';
 type FeaturedBlogProps = {
   blogs: FeaturedBlogData;
   key: string;
-}
+};
 
 export default function BlogSection(props: FeaturedBlogProps) {
   const fromBlog = props.blogs;
@@ -19,15 +19,17 @@ export default function BlogSection(props: FeaturedBlogProps) {
       <div class="community-head">
         {fromBlog.title_h2 && <h2 {...fromBlog.$?.title_h2}>{fromBlog.title_h2}</h2>}
         {fromBlog.view_articles && (
-          <a {...fromBlog.view_articles.$?.href} href={fromBlog.view_articles.href} class="btn secondary-btn article-btn">
+          <a {...(typeof fromBlog.view_articles.$?.href === 'object' ? fromBlog.view_articles.$?.href : {})} href={fromBlog.view_articles.href} class="btn secondary-btn article">
             {fromBlog.view_articles.title}
           </a>
         )}
       </div>
       <div class="home-featured-blogs">
         {fromBlog.featured_blogs.map((blog, index) => (
           <div class="featured-blog" key={index}>
-            {blog.featured_image && <img {...blog.featured_image.$?.url} src={blog.featured_image.url} alt={blog.featured_image.filename} class="blog-post-img" />}
+            {blog.featured_image && (
+              <img {...(typeof blog.featured_image.$?.url === 'object' ? blog.featured_image.$?.url : {})} src={blog.featured_image.url} alt={blog.featured_image.filename} />
+            )}
             <div class="featured-content">
               {blog.title && <h3 {...blog.$?.title}>{blog.title}</h3>}
               {blog.body && <span {...blog.$?.body}>{parse(blog.body.slice(0, 300))}</span>}

src/components/card-section.tsx

@@ -1,22 +1,22 @@
 import { h } from '@stencil/core';
-import { Action } from "../typescript/action";
+import { Action } from '../typescript/action';
 
 type AdditionalParam = {
   title_h3: {};
   description: {};
-}
+};
 
 type Data = {
   title_h3: string;
   description: string;
   call_to_action: Action;
   $: AdditionalParam;
-}
+};
 
 type CardProps = {
   cards: [Data];
   key: string;
-}
+};
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 export default function CardSection(props: CardProps) {
@@ -28,7 +28,7 @@ export default function CardSection(props: CardProps) {
           {card.description && <p {...card.$?.description}>{card.description}</p>}
           <div class="card-cta">
             {card.call_to_action.title && card.call_to_action.href && (
-              <a {...card.call_to_action.$?.href} href={card.call_to_action.href} class="btn primary-btn">
+              <a {...(typeof card.call_to_action.$?.href === 'object' ? card.call_to_action.$?.href : {})} href={card.call_to_action.href} class="btn primary-btn">
                 {card.call_to_action.title}
               </a>
             )}

src/components/hero-banner.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable eqeqeq */
 
 import { h } from '@stencil/core';
-import { Action, Image } from "../typescript/action";
+import { Action, Image } from '../typescript/action';
 
 type AdditionalParam = {
   banner_title: {};
   banner_description: {};
-}
+};
 
 type Data = {
   bg_color: string;
@@ -16,11 +16,11 @@ type Data = {
   call_to_action: Action;
   banner_image: Image;
   $: AdditionalParam;
-}
+};
 
 type BannerProps = {
   banner: Data;
-}
+};
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 export default function HeroBanner({ banner }: BannerProps) {
@@ -57,14 +57,14 @@ export default function HeroBanner({ banner }: BannerProps) {
           ''
         )}
         {banner.call_to_action.title && banner.call_to_action.href ? (
-          <a href={banner.call_to_action.href} {...banner.call_to_action.$?.href} class="btn tertiary-btn">
+          <a href={banner.call_to_action.href} {...(typeof banner.call_to_action.$?.href === 'object' ? banner.call_to_action.$?.href : {})} class="btn tertiary-btn">
             {banner.call_to_action.title}
           </a>
         ) : (
           ''
         )}
       </div>
-      {banner.banner_image ? <img alt={banner.banner_image.filename} src={banner.banner_image.url} {...banner.banner_image.$?.url} /> : ''}
+      <img alt={banner.banner_image.filename} src={banner.banner_image.url} {...(typeof banner.banner_image.$?.url === 'object' ? banner.banner_image.$?.url : {})} />
     </div>
   );
 }

src/components/section-bucket.tsx

@@ -6,26 +6,26 @@ type AdditionalParam = {
   title_h2: {};
   title_h3: {};
   description: {};
-}
+};
 
 type Bucket = {
   title_h3: string;
   icon: Image;
   description: string;
   call_to_action: Action;
-  $: AdditionalParam
-}
+  $: AdditionalParam;
+};
 
 type Data = {
   title_h2: string;
   description: string;
   buckets: [Bucket];
   $: AdditionalParam;
-}
+};
 
 type BucketProps = {
   section: Data;
-}
+};
 
 export default function SectionBucket({ section }: BucketProps) {
   return (
@@ -37,12 +37,15 @@ export default function SectionBucket({ section }: BucketProps) {
       <div class="member-section">
         {section.buckets?.map((bucket, index) => (
           <div class="content-section" key={index}>
-            {bucket.icon && <img {...bucket.icon.$?.url} src={bucket.icon.url} alt="bucket icon" />}
+            {bucket.icon && <img {...(typeof bucket.icon.$?.url === 'object' ? bucket.icon.$?.url : {})} src={bucket.icon.url} alt="bucket icon" />}
 
             {bucket.title_h3 ? <h3 {...bucket.$?.title_h3}>{bucket.title_h3}</h3> : ''}
             {bucket.description && <span {...bucket.$?.description}>{parse(bucket.description)}</span>}
             {bucket.call_to_action.title ? (
-              <a {...bucket.call_to_action.$?.href} href={bucket.call_to_action.href ? bucket.call_to_action.href : '#'}>{`${bucket.call_to_action.title} -->`}</a>
+              <a
+                {...(typeof bucket.call_to_action.$?.href === 'object' ? bucket.call_to_action.$?.href : {})}
+                href={bucket.call_to_action.href ? bucket.call_to_action.href : '#'}
+              >{`${bucket.call_to_action.title} -->`}</a>
             ) : (
               ''
             )}