DEVREL-934 New model rewrite

.env.local.template

@@ -1,8 +1,8 @@
 APP_VERSION=$npm_package_version
 APP_NAME=$npm_package_name
 NEXT_PUBLIC_KONTENT_ENVIRONMENT_ID=2cedc519-a547-01ba-dde7-b01e00b909a1
-KONTENT_COLLECTION_CODENAME=ficto_healthtech_surgical
-# Domain for other collection links in format <COLLECTION_CODENAME>:<DOMAIN_WITOUHOUT_PROTOCOL> i.e. "ficto_healthtech_imaging:ficto-healthtech-imaging.vercel.app,ficto_healthtech_surgical:ficto-healthtech-surgical.vercel.app
+KONTENT_COLLECTION_CODENAME=ficto_surgical
+# Domain for other collection links in format <COLLECTION_CODENAME>:<DOMAIN_WITOUHOUT_PROTOCOL> i.e. "ficto_healthtech_imaging:ficto-healthtech-imaging.vercel.app,ficto_surgical:ficto-healthtech-surgical.vercel.app
 NEXT_PUBLIC_OTHER_COLLECTIONS_DOMAINS=
 KONTENT_PREVIEW_API_KEY=
 KONTENT_MANAGEMENT_API_KEY=

.github/workflows/lint.yml → .github/workflows/integrate.yml

@@ -1,4 +1,4 @@
-name: Lint
+name: Lint & Test
 
 on:
   push:
@@ -11,12 +11,12 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-
         id: nvm
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version-file: ".nvmrc"
       - run: npm ci
       - run: npm run lint
+      - run: npm run test
 

README.md

@@ -18,7 +18,7 @@ Ficto Healthtech Imaging
 
 [![Vercel](https://therealsujitk-vercel-badge.vercel.app/?app=health-tech-imaging&style=for-the-badge&logo=false)](https://ficto-healthtech-imaging.vercel.app)
 
-Ficto Healthtech Surgical
+Ficto Surgical
 
 [![Vercel](https://therealsujitk-vercel-badge.vercel.app/?app=health-tech-surgical&style=for-the-badge&logo=false)](https://ficto-healthtech-surgical.vercel.app)
 

components/landingPage/ui/heroImage.tsx

@@ -1,7 +1,9 @@
-import Image from 'next/image';
+import Image from "next/image";
 import { FC, ReactNode } from "react";
 
+import { mainColorMdBgClass } from "../../../lib/constants/colors";
 import { createItemSmartLink } from "../../../lib/utils/smartLinkUtils";
+import { useSiteCodename } from "../../shared/siteCodenameContext";
 
 type Props = Readonly<{
   url: string;
@@ -10,23 +12,35 @@ type Props = Readonly<{
   itemId?: string;
 }>;
 
-export const HeroImage: FC<Props> = props => (
-  <figure
-    className={`relative m-0 w-full h-screen md:h-[36rem] ${props.className ?? ""}`}
-    {...createItemSmartLink(props.itemId)}
-  >
-    <Image
-      src={props.url}
-      alt="Hero image"
-      fill
-      className="object-cover"
-      sizes="(max-width: 1200px) 100vw, 80vw"
-      priority
-    />
-    <div className="relative w-fit h-full flex flex-col items-center md:items-start justify-end pb-32 md:pb-12 px-6">
-        {props.children}
-    </div>
-  </figure>
-);
+export const HeroImage: FC<Props> = (props) => {
+  const siteCodename = useSiteCodename();
+
+  return (
+    <>
+      <figure
+        className={`relative m-0 justify-start not-prose w-screen h-screen max-h-[1200px] ${
+          props.className ?? ""
+        }`}
+        {...createItemSmartLink(props.itemId)}
+      >
+        <div className="absolute inset-0 [margin-left:-38%]">
+          <Image
+            src={props.url}
+            alt="Hero image"
+            fill
+            className="object-cover"
+            sizes="(max-width: 1200px) 100vw, 80vw"
+            priority
+          />
+        </div>
+        <div
+          className={`${mainColorMdBgClass[siteCodename]} relative w-fit h-full flex max-w-3xl flex-col items-center md:items-start justify-end min-[900px]:justify-center pt-20 pb-32 md:pb-12 pr-6 min-[900px]:px-6`}
+        >
+          {props.children}
+        </div>
+      </figure>
+    </>
+  );
+};
 
 HeroImage.displayName = "HeroImage";

components/listingPage/ArticleItem.tsx

@@ -1,53 +1,55 @@
-import Image from "next/image"
-import Link from "next/link";
-import { FC } from "react";
-
-import { mainColorBgClass, mainColorTextClass } from "../../lib/constants/colors";
-import { formatDate } from "../../lib/utils/dateTime";
-import { useSiteCodename } from "../shared/siteCodenameContext";
-import { StandaloneSmartLinkButton } from "../shared/StandaloneSmartLinkButton";
-
-type Props = Readonly<{
-  imageUrl: string;
-  title: string;
-  detailUrl: string;
-  description: string,
-  publisingDate: string | null,
-  itemId?: string;
-}>;
-
-export const ArticleItem: FC<Props> = props => {
-  const siteCodename = useSiteCodename()
-
-  return (
-    <li className="m-0 p-0 relative md:rounded-lg shadow hover:shadow-xl transition-shadow border border-gray-200 cursor-pointer">
-      <Link
-        href={props.detailUrl}
-        className="no-underline"
-      >
-        <StandaloneSmartLinkButton itemId={props.itemId} />
-        <figure className="w-full relative m-0 h-40">
-          <Image
-            src={props.imageUrl}
-            alt={props.title}
-            fill
-            sizes="(max-width: 635px) 100vw, (max-width: 1275px) 50vw, 25vw"
-            className="object-cover h-full m-0 p-0 md:rounded-t-lg"
-          />
-        </figure>
-        {props.publisingDate && (
-          <div className="w-fit p-2 bg-gray-800 text-white opacity-90 font-normal line-clamp-6 absolute right-0 translate-y-[-100%]">
-            <p className="m-0 w-fit">{formatDate(props.publisingDate)}</p>
-          </div>
-        )}
-        <div className="p-5">
-          <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-900 no-underline line-clamp-2 ">{props.title}</h5>
-          <p className="mb-0 font-normal text-gray-700 line-clamp-6">{props.description}</p>
-        </div>
-        <button className={`${mainColorTextClass} block ml-auto w-fit mb-3 mr-4 font-semibold line-clamp-6 hover:bg-transparent border ${mainColorBgClass[siteCodename]} py-2 px-4 md:rounded`}>Continue reading</button>
-      </Link>
-    </li>
-  );
-}
-
+import Image from "next/image"
+import Link from "next/link";
+import { FC } from "react";
+
+import { mainColorButtonClass, mainColorGroupHoverClass } from "../../lib/constants/colors";
+import { formatDate } from "../../lib/utils/dateTime";
+import { useSiteCodename } from "../shared/siteCodenameContext";
+import { StandaloneSmartLinkButton } from "../shared/StandaloneSmartLinkButton";
+
+type Props = Readonly<{
+  imageUrl: string;
+  title: string;
+  detailUrl: string;
+  description: string,
+  publishingDate: string | null,
+  itemId?: string;
+}>;
+
+export const ArticleItem: FC<Props> = props => {
+  const siteCodename = useSiteCodename()
+
+  return (
+    <li className="m-0 p-0 relative md:rounded-lg shadow hover:shadow-xl transition-shadow border border-gray-200 cursor-pointer">
+      <Link
+        href={props.detailUrl}
+        className="no-underline group"
+      >
+        <StandaloneSmartLinkButton itemId={props.itemId} />
+        <figure className="w-full relative m-0 h-40">
+          <Image
+            src={props.imageUrl}
+            alt={props.title}
+            fill
+            sizes="(max-width: 635px) 100vw, (max-width: 1275px) 50vw, 25vw"
+            className="object-cover h-full m-0 p-0 md:rounded-t-lg"
+          />
+        </figure>
+        {props.publishingDate && (
+          <div className="w-fit p-2 bg-gray-800 text-white opacity-90 font-normal line-clamp-6 absolute right-0 translate-y-[-100%]">
+            <p className="m-0 w-fit">{formatDate(props.publishingDate)}</p>
+          </div>
+        )}
+        <div className="p-5">
+          <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-900 no-underline line-clamp-2 ">{props.title}</h5>
+          <p className="mb-0 font-normal text-gray-700 line-clamp-6">{props.description}</p>
+        </div>
+        <button className={`${mainColorGroupHoverClass[siteCodename]} ${mainColorButtonClass[siteCodename]} block ml-auto w-fit mb-3 mr-4 font-semibold line-clamp-6 border text-white py-2 px-4 md:rounded`}>
+          <span>Continue reading</span>
+        </button>
+      </Link>
+    </li>
+  );
+}
+
 ArticleItem.displayName = "ListItem";

components/listingPage/ProductItem.tsx

@@ -1,49 +1,49 @@
-import Image from "next/image"
-import Link from "next/link";
-import { FC } from "react";
-
-import { mainColorBgClass, mainColorTextClass } from "../../lib/constants/colors";
-import { useSiteCodename } from "../shared/siteCodenameContext";
-import { StandaloneSmartLinkButton } from "../shared/StandaloneSmartLinkButton";
-
-type Props = Readonly<{
-  imageUrl: string;
-  title: string;
-  detailUrl: string;
-  price: number | null;
-  category: string,
-  itemId?: string;
-}>;
-
-export const ProductItem: FC<Props> = props => {
-  const siteCodename = useSiteCodename()
-
-  return (
-    <li className="min-w-full m-0 p-0 relative rounded-lg shadow hover:shadow-xl transition-shadow border border-gray-200 cursor-pointer min-h-full">
-      <Link
-        href={props.detailUrl}
-        className="no-underline p-0 m-0"
-      >
-        <StandaloneSmartLinkButton itemId={props.itemId} />
-
-        <div className="flex flex-col gap-2">
-          <h5 className="px-4 pt-2 mt-2 text-center text-xl  tracking-wider font-semibold text-gray-900">{props.title}</h5>
-          <p className="m-0 text-center text-gray-500 text-base">{props.category}</p>
-          <figure className="w-full relative m-0 h-40">
-            <Image
-              src={props.imageUrl}
-              alt={props.title}
-              fill
-              sizes="(max-width: 635px) 100vw, (max-width: 1534px) 50vw, 25vw"
-              className="object-contain h-full w-full m-0 p-0 rounded-t-lg"
-            />
-          </figure>
-          {props.price && <p className="m-0 text-center text-xl font-normal pb-2">{`${props.price}€`}</p>}
-          <button className={`${mainColorTextClass} block ml-auto w-fit mb-3 mr-4 font-semibold line-clamp-6 hover:bg-transparent border ${mainColorBgClass[siteCodename]} py-2 px-4 rounded`}>Detail</button>
-        </div>
-      </Link>
-    </li>
-  );
-}
-
+import Image from "next/image"
+import Link from "next/link";
+import { FC } from "react";
+
+import { mainColorButtonClass, mainColorGroupHoverClass } from "../../lib/constants/colors";
+import { useSiteCodename } from "../shared/siteCodenameContext";
+import { StandaloneSmartLinkButton } from "../shared/StandaloneSmartLinkButton";
+
+type Props = Readonly<{
+  imageUrl: string;
+  title: string;
+  detailUrl: string;
+  price: number | null;
+  category: string,
+  itemId?: string;
+}>;
+
+export const ProductItem: FC<Props> = props => {
+  const siteCodename = useSiteCodename()
+
+  return (
+    <li className="min-w-full m-0 p-0 relative rounded-lg shadow hover:shadow-xl transition-shadow border border-gray-200 cursor-pointer min-h-full">
+      <Link
+        href={props.detailUrl}
+        className="group no-underline p-0 m-0"
+      >
+        <StandaloneSmartLinkButton itemId={props.itemId} />
+
+        <div className="flex flex-col gap-2">
+          <h5 className="px-4 pt-2 mt-2 text-center text-xl  tracking-wider font-semibold text-gray-900">{props.title}</h5>
+          <p className="m-0 text-center text-gray-500 text-base">{props.category}</p>
+          <figure className="w-full relative m-0 h-40">
+            <Image
+              src={props.imageUrl}
+              alt={props.title}
+              fill
+              sizes="(max-width: 635px) 100vw, (max-width: 1534px) 50vw, 25vw"
+              className="object-contain h-full w-full m-0 p-0 rounded-t-lg"
+            />
+          </figure>
+          {props.price && <p className="m-0 text-center text-xl font-normal pb-2">{`${props.price}€`}</p>}
+          <button className={`${mainColorGroupHoverClass[siteCodename]} ${mainColorButtonClass[siteCodename]} text-white block ml-auto w-fit mb-3 mr-4 font-semibold line-clamp-6 hover:bg-transparent border py-2 px-4 rounded`}>Detail</button>
+        </div>
+      </Link>
+    </li>
+  );
+}
+
 ProductItem.displayName = "ListItem";

components/shared/Content.tsx

@@ -1,9 +1,7 @@
 import { ComponentType, FC } from "react";
 
-import { Block_ContentChunk, Block_HeroUnit, Block_VisualContainer, contentTypes,Testimonial } from "../../models";
-import { HeroUnitComponent } from "./HeroUnit";
-import { RichTextContentComponent } from "./RichTextContent";
-import { TestimonialComponent } from "./Testimonial";
+import { Block_ContentChunk, Block_VisualContainer, contentTypes } from "../../models";
+import { ContentChunk as ContentChunk } from "./ContentChunk";
 import { VisualContainer } from "./visualContainer/VisualContainer";
 
 type AcceptedType = AcceptedTypesByCodename[keyof AcceptedTypesByCodename];
@@ -27,17 +25,13 @@ export const Content: FC<Props> = props => {
 }
 
 const componentMap: Readonly<{ [key in keyof AcceptedTypesByCodename]: ComponentType<Readonly<{ item: AcceptedTypesByCodename[key] }>> }> = {
-  hero_unit: HeroUnitComponent,
-  content_chunk: RichTextContentComponent,
-  testimonial: TestimonialComponent,
-  _visual_container: VisualContainer,
+  content_chunk: ContentChunk,
+  visual_container: VisualContainer,
 };
 
 // Unfortunately, we need to define the relationship manually, because the generator doesn't define it itself. :/
 type AcceptedTypesByCodename = {
-  [contentTypes.hero_unit.codename]: Block_HeroUnit;
   [contentTypes.content_chunk.codename]: Block_ContentChunk;
-  [contentTypes.testimonial.codename]: Testimonial;
-  [contentTypes._visual_container.codename]: Block_VisualContainer;
+  [contentTypes.visual_container.codename]: Block_VisualContainer;
 };
 

components/shared/ContentChunk.tsx

@@ -0,0 +1,33 @@
+import { FC } from "react";
+
+import {
+  createElementSmartLink,
+  createFixedAddSmartLink,
+  createItemSmartLink,
+} from "../../lib/utils/smartLinkUtils";
+import {
+  Block_ContentChunk,
+  contentTypes,
+} from "../../models";
+import { RichTextElement } from "./richText/RichTextElement";
+
+type Props = Readonly<{
+  item: Block_ContentChunk;
+}>;
+
+export const ContentChunk: FC<Props> = (props) => (
+  <div
+    className="px-10 py-5 vis-container"
+    {...createItemSmartLink(props.item.system.id)}
+    {...createElementSmartLink(
+      contentTypes.content_chunk.elements.content.codename
+    )}
+    {...createFixedAddSmartLink("end")}
+  >
+    <RichTextElement
+      element={props.item.elements.content}
+      isInsideTable={false}
+    />
+  </div>
+);
+