Update dependencies

app/[envId]/[slug]/page.tsx

@@ -4,12 +4,13 @@ import { reservedListingSlugs } from "../../../lib/routing";
 import { parseFlatted, stringifyAsType } from "../../../lib/utils/circularityUtils";
 import { defaultEnvId } from "../../../lib/utils/env";
 import { createElementSmartLink, createFixedAddSmartLink } from "../../../lib/utils/smartLinkUtils";
-import { contentTypes, WSL_Page } from "../../../models";
+import { WSL_Page } from "../../../models/content-types";
 import { cookies, draftMode } from "next/headers";
 import { previewApiKeyCookieName } from "../../../lib/constants/cookies";
-import { AppPage } from "../../../components/shared/ui/newAppPage";
+import { AppPage } from "../../../components/shared/ui/appPage";
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { contentTypes } from "../../../models/environment";
 
 const TopLevelPage = async ({params}: { params: Promise<{envId: string, slug: string}> }) => {
   const envId = (await params).envId;
@@ -72,9 +73,9 @@ export const generateMetadata = async ({ params }: { params: Promise<{ envId: st
   }
 
   return {
-    description: defaultMetadata.elements.metadataDescription.value,
-    keywords: defaultMetadata.elements.metadataKeywords.value,
-    title: defaultMetadata.elements.metadataTitle.value 
+    description: defaultMetadata.elements.metadata__description.value,
+    keywords: defaultMetadata.elements.metadata__keywords.value,
+    title: defaultMetadata.elements.metadata__title.value 
   }
 }
 

app/[envId]/articles/[slug]/page.tsx

@@ -8,7 +8,7 @@ import { defaultEnvId } from "../../../../lib/utils/env";
 import { cookies, draftMode } from "next/headers";
 import { previewApiKeyCookieName } from "../../../../lib/constants/cookies";
 import { notFound } from "next/navigation";
-import { AppPage } from "../../../../components/shared/ui/newAppPage";
+import { AppPage } from "../../../../components/shared/ui/appPage";
 import { Metadata } from "next";
 
 const ArticlePage = async ({params}: {params: Promise<{envId: string, slug: string}>}) => {
@@ -29,7 +29,7 @@ const ArticlePage = async ({params}: {params: Promise<{envId: string, slug: stri
   return (
     <AppPage item={article}>
       <HeroImage
-        url={article.elements.heroImage.value[0]?.url || ""}
+        url={article.elements.hero_image.value[0]?.url || ""}
         itemId={article.system.id}
       >
         <div className="py-1 px-3 w-full md:w-fit bg-mainBackgroundColor opacity-90">
@@ -44,7 +44,7 @@ const ArticlePage = async ({params}: {params: Promise<{envId: string, slug: stri
       <div className="px-2 max-w-screen m-auto md:px-20">
         {article.elements.author.linkedItems[0] && <PersonHorizontal item={article.elements.author.linkedItems[0]} />}
         <div className="flex flex-col gap-2">
-          <div className="w-fit p-2 bg-gray-800 text-white opacity-90 font-semibold">{article.elements.publishingDate.value && formatDate(article.elements.publishingDate.value)}</div>
+          <div className="w-fit p-2 bg-gray-800 text-white opacity-90 font-semibold">{article.elements.publishing_date.value && formatDate(article.elements.publishing_date.value)}</div>
           <div className="flex gap-2" >
             {
               article.elements.type.value.map(type => (
@@ -88,9 +88,9 @@ export const generateMetadata = async ({ params }: { params: Promise<{ envId: st
   }
 
   return {
-    description: defaultMetadata.elements.metadataDescription.value,
-    keywords: defaultMetadata.elements.metadataKeywords.value,
-    title: defaultMetadata.elements.metadataTitle.value 
+    description: defaultMetadata.elements.metadata__description.value,
+    keywords: defaultMetadata.elements.metadata__keywords.value,
+    title: defaultMetadata.elements.metadata__title.value 
   }
 }
 

app/[envId]/articles/category/[category]/page/[page]/page.tsx

@@ -4,13 +4,14 @@ import { getArticlesCountByCategory, getArticlesForListing, getDefaultMetadata,
 import { ArticleTypeWithAll, categoryFilterSource, isArticleType } from "../../../../../../../lib/utils/articlesListing";
 import { parseFlatted,  stringifyAsType } from "../../../../../../../lib/utils/circularityUtils";
 import { defaultEnvId } from "../../../../../../../lib/utils/env";
-import { contentTypes, WSL_Page } from "../../../../../../../models";
+import { WSL_Page } from "../../../../../../../models/content-types";
 import { notFound } from "next/navigation";
 import { cookies, draftMode } from "next/headers";
 import { previewApiKeyCookieName } from "../../../../../../../lib/constants/cookies";
-import { AppPage } from "../../../../../../../components/shared/ui/newAppPage";
+import { AppPage } from "../../../../../../../components/shared/ui/appPage";
 import { ArticlesListing } from "../../../../../../../components/articles/ArticlesListing";
 import { Metadata } from "next";
+import { contentTypes } from "../../../../../../../models/environment";
 
 
 const ArticlesPagingPage = async ({params}: {params: Promise<{envId: string, page: string, category: string}>}) => {
@@ -90,9 +91,9 @@ export const generateMetadata = async ({ params }: { params: Promise<{ envId: st
   }
 
   return {
-    description: defaultMetadata.elements.metadataDescription.value,
-    keywords: defaultMetadata.elements.metadataKeywords.value,
-    title: defaultMetadata.elements.metadataTitle.value 
+    description: defaultMetadata.elements.metadata__description.value,
+    keywords: defaultMetadata.elements.metadata__keywords.value,
+    title: defaultMetadata.elements.metadata__title.value 
   }
 }
 

app/[envId]/layout.tsx

@@ -5,7 +5,7 @@ import { getSiteMenu } from "../../lib/kontentClient";
 import { cookies, draftMode } from 'next/headers';
 import { stringifyAsType, parseFlatted } from '../../lib/utils/circularityUtils';
 import { notFound } from "next/navigation";
-import { defaultEnvId } from "../../lib/utils/env";
+import { defaultEnvId, siteCodename } from "../../lib/utils/env";
 
 const PageLayout = async ({children, params}: {children: React.ReactNode, params: Promise<{envId: string}>}) => {
   const draft = await draftMode();
@@ -20,10 +20,10 @@ const PageLayout = async ({children, params}: {children: React.ReactNode, params
   const siteMenu = parseFlatted(stringifyAsType(siteMenuData));
 
   return (
-    <div className="min-h-full grow flex flex-col items-center overflow-hidden">
+    <div className="min-h-full flex flex-col items-center overflow-hidden" data-theme={siteCodename}>
       <Menu item={siteMenu} />
       {/* https://tailwindcss.com/docs/typography-plugin */}
-      <main>{children}</main>
+      <main className="grow">{children}</main>
       <Footer />
     </div>
   )

app/[envId]/page.tsx

@@ -5,7 +5,7 @@ import { previewApiKeyCookieName } from '../../lib/constants/cookies';
 import PreviewHomepage from '../../components/landingPage/ui/previewHomepage';
 import Homepage from '../../components/landingPage/ui/homepage';
 import { Metadata } from 'next';
-import { AppPage } from '../../components/shared/ui/newAppPage';
+import { AppPage } from '../../components/shared/ui/appPage';
 import { cache } from 'react';
 import { notFound } from 'next/navigation';
 
@@ -47,9 +47,9 @@ export async function generateMetadata(
   }
 
   return {
-    description: homepageData.elements.metadataDescription.value,
-    keywords: homepageData.elements.metadataKeywords.value,
-    title: homepageData.elements.metadataTitle.value 
+    description: homepageData.elements.metadata__description.value,
+    keywords: homepageData.elements.metadata__keywords.value,
+    title: homepageData.elements.metadata__title.value 
   }
 }
 

app/[envId]/products/[slug]/page.tsx

@@ -3,12 +3,12 @@ import Image from "next/image";
 import { getDefaultMetadata, getProductDetail, getProductItemsWithSlugs } from "../../../../lib/kontentClient";
 import { defaultEnvId } from "../../../../lib/utils/env";
 import { createElementSmartLink } from "../../../../lib/utils/smartLinkUtils";
-import { contentTypes } from "../../../../models";
 import { previewApiKeyCookieName } from "../../../../lib/constants/cookies";
 import { cookies, draftMode } from "next/headers";
 import { notFound } from "next/navigation";
-import { AppPage } from "../../../../components/shared/ui/newAppPage";
+import { AppPage } from "../../../../components/shared/ui/appPage";
 import { Metadata } from "next";
+import { contentTypes } from "../../../../models/environment";
 
 const widthLimit = 300;
 
@@ -27,42 +27,34 @@ const ProductDetail = async ({params}: {params: Promise<{envId: string, slug: st
 
   return ( 
     <AppPage item={product} >
-      <div className="bg-white pt-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex flex-col lg:flex-row -mx-4">
-            <div className="lg:flex-1 px-4 ">
-              <div className="h-64 lg:h-80 rounded-lg bg-gray-100 mb-4">
-                <div
-                  className="h-64 lg:h-80 rounded-lg bg-gray-100 mb-4 flex items-center justify-center"
-                >
-                  {
-                    product.elements.productBaseMainImage.value[0]
-                      ? (
-                        <Image
-                          src={product.elements.productBaseMainImage.value[0].url}
-                          alt={product.elements.productBaseMainImage.value[0].description || product.elements.productBaseMainImage.value[0].url.split('/').pop() || "Product image"}
-                          width={widthLimit}
-                          height={product.elements.productBaseMainImage.value[0].height || 200}
-                          className="object-cover"
-                          priority
-                          {...createElementSmartLink(contentTypes.product.elements.product_base__main_image.codename)}
-                        />
-                      )
-                      : <span>N/A</span>
-                  }
-                </div>
-              </div>
-            </div>
-            <div className="lg:flex-1 px-4">
+        <div className="max-w-7xl mt-20 mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:flex-row">
+          <figure className="lg:flex-1 rounded-lg flex items-center justify-center not-prose">
+              {
+                product.elements.product_base__main_image.value[0]
+                  ? (
+                    <Image
+                      src={product.elements.product_base__main_image.value[0].url}
+                      alt={product.elements.product_base__main_image.value[0].description || product.elements.product_base__main_image.value[0].url.split('/').pop() || "Product image"}
+                      width={widthLimit}
+                      height={product.elements.product_base__main_image.value[0].height || 200}
+                      className="object-cover"
+                      priority
+                      {...createElementSmartLink(contentTypes.product.elements.product_base__main_image.codename)}
+                    />
+                  )
+                  : <span>N/A</span>
+              }
+            </figure>
+            <div className="lg:flex-2 px-4 flex flex-col gap-0">
               <h1
-                className="mb-2 leading-tight tracking-tight font-bold text-gray-800 text-2xl lg:text-3xl"
+                className="leading-tight tracking-tight font-bold text-gray-800 text-2xl lg:text-3xl"
                 {...createElementSmartLink(contentTypes.product.elements.product_base__name.codename)}
               >
-                {product.elements.productBaseName.value}
+                {product.elements.product_base__name.value}
               </h1>
 
               <div
-                className="flex items-center space-x-4 my-4"
+                className="flex items-center space-x-4"
                 {...createElementSmartLink(contentTypes.product.elements.price.codename)}
               >
                 <div>
@@ -77,22 +69,18 @@ const ProductDetail = async ({params}: {params: Promise<{envId: string, slug: st
                 className="text-gray-500"
                 {...createElementSmartLink(contentTypes.product.elements.product_base__description.codename)}
               >
-                {product.elements.productBaseDescription.value}
+                {product.elements.product_base__description.value}
 
               </p>
 
-              <div className="flex py-4 space-x-4">
                 <button
                   type="button"
-                  className="hover:bg-mainHoverColor bg-mainButtonColor bottom-0 left-0 text-white font-bold mt-10 py-2 px-4 rounded"
+                  className="hover:bg-mainHoverColor bg-mainButtonColor text-white font-bold py-2 px-4 rounded"
                 >
                   Add to Cart
                 </button>
-              </div>
             </div>
           </div>
-        </div >
-      </div >
     </AppPage >
 )};
 
@@ -118,9 +106,9 @@ export const generateMetadata = async ({ params }: { params: Promise<{ envId: st
   }
 
   return {
-    description: defaultMetadata.elements.metadataDescription.value,
-    keywords: defaultMetadata.elements.metadataKeywords.value,
-    title: defaultMetadata.elements.metadataTitle.value 
+    description: defaultMetadata.elements.metadata__description.value,
+    keywords: defaultMetadata.elements.metadata__keywords.value,
+    title: defaultMetadata.elements.metadata__keywords.value 
   }
 }
 

app/[envId]/products/page.tsx

@@ -2,14 +2,15 @@ import { Content } from "../../../components/shared/Content";
 import { getDefaultMetadata, getItemBySlug } from "../../../lib/kontentClient";
 import { reservedListingSlugs } from "../../../lib/routing";
 import { parseFlatted, stringifyAsType } from "../../../lib/utils/circularityUtils";
-import { contentTypes, WSL_Page } from "../../../models";
+import { WSL_Page } from "../../../models/content-types";
 import { notFound } from "next/navigation";
-import { AppPage } from "../../../components/shared/ui/newAppPage";
+import { AppPage } from "../../../components/shared/ui/appPage";
 import { cookies, draftMode } from "next/headers";
 import { previewApiKeyCookieName } from "../../../lib/constants/cookies";
 import ProductsListing from "../../../components/products/ProductsListing";
 import { Metadata } from "next";
 import { Suspense } from "react";
+import { contentTypes } from "../../../models/environment";
 
 const ProductsPage = async ({params}: {params: Promise<{envId: string}>}) => {
   const envId = (await params).envId;
@@ -60,9 +61,9 @@ export const generateMetadata = async ({ params }: { params: Promise<{ envId: st
   }
 
   return {
-    description: defaultMetadata.elements.metadataDescription.value,
-    keywords: defaultMetadata.elements.metadataKeywords.value,
-    title: defaultMetadata.elements.metadataTitle.value 
+    description: defaultMetadata.elements.metadata__description.value,
+    keywords: defaultMetadata.elements.metadata__keywords.value,
+    title: defaultMetadata.elements.metadata__title.value 
   }
 }
 

app/[envId]/solutions/[slug]/page.tsx

@@ -6,11 +6,11 @@ import { getDefaultMetadata, getSolutionDetail, getSolutionsWithSlugs } from "..
 import { parseFlatted, stringifyAsType } from "../../../../lib/utils/circularityUtils";
 import { defaultEnvId } from "../../../../lib/utils/env";
 import { createElementSmartLink } from "../../../../lib/utils/smartLinkUtils";
-import { contentTypes } from "../../../../models";
 import { notFound } from "next/navigation";
 import { previewApiKeyCookieName } from "../../../../lib/constants/cookies";
 import { cookies, draftMode } from "next/headers";
-import { AppPage } from "../../../../components/shared/ui/newAppPage";
+import { AppPage } from "../../../../components/shared/ui/appPage";
+import { contentTypes } from "../../../../models/environment";
 
 const SolutionDetailPage = async ({params}: {params: Promise<{envId: string, slug: string}>}) => {
   const slug = (await params).slug;
@@ -34,7 +34,7 @@ const SolutionDetailPage = async ({params}: {params: Promise<{envId: string, slu
   return(
     <AppPage item={solution} >
       <HeroImage
-        url={solution.elements.productBaseMainImage.value[0]?.url || ""}
+        url={solution.elements.product_base__main_image.value[0]?.url || ""}
         itemId={solution.system.id}
       >
         <div
@@ -46,7 +46,7 @@ const SolutionDetailPage = async ({params}: {params: Promise<{envId: string, slu
             )}
             className="m-0 text-8xl text-white align-text-bottom max-w-2xl tracking-wide font-semibold"
           >
-            {solution.elements.productBaseName.value}
+            {solution.elements.product_base__name.value}
           </h1>
         </div>
       </HeroImage>
@@ -85,9 +85,9 @@ export const generateMetadata = async ({ params }: { params: Promise<{ envId: st
   }
 
   return {
-    description: defaultMetadata.elements.metadataDescription.value,
-    keywords: defaultMetadata.elements.metadataKeywords.value,
-    title: defaultMetadata.elements.metadataTitle.value 
+    description: defaultMetadata.elements.metadata__description.value,
+    keywords: defaultMetadata.elements.metadata__keywords.value,
+    title: defaultMetadata.elements.metadata__title.value 
   }
 }
 

app/callback/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { getCookie, setCookie } from "cookies-next";
+import { setCookie, getCookie } from "cookies-next/client";
 import { useEffect, useState } from "react";
 
 import { BuildError } from "../../components/shared/ui/BuildError";

components/articles/ArticlesListing.tsx

@@ -1,11 +1,12 @@
 'use client'
 import { ChevronDownIcon } from "@heroicons/react/24/solid";
-import { Article, taxonomies } from "../../models";
 import Link from "next/link";
 import { ResolutionContext, resolveUrlPath } from "../../lib/routing";
 import { FC, useState } from "react";
 import { ArticleItem } from "../listingPage/ArticleItem";
 import { ArticlePageSize } from "../../lib/constants/paging";
+import { taxonomies } from "../../models/environment/taxonomies";
+import { Article } from "../../models/content-types/article";
 
 type LinkButtonProps = {
   text: string;
@@ -70,7 +71,7 @@ const FilterOptions: FC<FilterOptionProps> = ({ options, category }) => {
             } as ResolutionContext)}
             onClick={() => setDropdownActive(!dropdownActive)}
             scroll={false}
-            className={`inline-flex items-center z-40 md:justify-between md:mr-4 md:w-max px-6 py-1 no-underline ${key === category ? ['bg-mainBackgroundColor', 'border-mainBorderColor', "text-white", "cursor-default"].join(" ") : `border-gray-200 bg-white hover:bg-mainColorHover hover:text-white cursor-pointer`} md:rounded-3xl`}
+            className={`inline-flex items-center z-40 md:justify-between md:mr-4 md:w-max px-6 py-1 no-underline ${key === category ? ['bg-mainBackgroundColor', 'border-mainBorderColor', "text-white", "cursor-default"].join(" ") : `border-gray-200 bg-slate-100 hover:bg-mainHoverColor hover:text-white cursor-pointer`} md:rounded-3xl`}
           >{value}
           </Link>
         ))}
@@ -118,8 +119,8 @@ export const ArticlesListing: FC<ArticlesLitingProps> = (props) => {
                     title={article.elements.title.value}
                     itemId={article.system.id}
                     description={article.elements.abstract.value}
-                    imageUrl={article.elements.heroImage.value[0]?.url || ""}
-                    publishingDate={article.elements.publishingDate.value}
+                    imageUrl={article.elements.hero_image.value[0]?.url || ""}
+                    publishingDate={article.elements.publishing_date.value}
                     detailUrl={resolveUrlPath({
                       type: "article",
                       slug: article.elements.slug.value