Devrel 914/dynamic projects

.env.local.template

@@ -7,3 +7,16 @@ NEXT_PUBLIC_OTHER_COLLECTIONS_DOMAINS=
 KONTENT_PREVIEW_API_KEY=
 KONTENT_MANAGEMENT_API_KEY=
 
+# Domains you need to set either NEXT_PUBLIC_KONTENT_DOMAIN or all the specific domains
+NEXT_PUBLIC_KONTENT_DOMAIN=kontent.ai
+
+NEXT_PUBLIC_KONTENT_AUTH_DOMAIN=
+NEXT_PUBLIC_KONTENT_IAPI_DOMAIN=
+NEXT_PUBLIC_KONTENT_MAPI_DOMAIN=
+NEXT_PUBLIC_KONTENT_PREVIEW_DAPI_DOMAIN=
+NEXT_PUBLIC_KONTENT_DAPI_DOMAIN=
+
+
+# Variables used for login to the auth0 to allow dynamic projects
+AUTH0_WEBAUTH_CLIENT_ID=
+AUTH0_WEBAUTH_AUDIENCE=

README.md

@@ -62,13 +62,28 @@ yarn create next-app --example https://github.com/kontent-ai-bot/kontent-ai-new-
     ```
 
 🎉 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+> If you want to use your app inside [web spotlight](https://kontent.ai/features/webspotlight/), you will need to run the project under the `https` scheme.
+> To do that you can use a proxy like [Ngrok](https://ngrok.com/) or [write you own server](https://github.com/vercel/next.js/tree/canary/examples/custom-server).
 
 You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
 
-> By default, the content is loaded from a shared Kontent.ai project. If you want to use your own clone of the project so that you can customize it and experiment with Kontent, continue to the next section.
+> By default, the content is loaded from a shared Kontent.ai project.
+> If you want to use your own clone of the project so that you can customize it and experiment with Kontent, change the relevant settings in your `.env.local` file.
 
 To generate new models from Kontent.ai data, just run `npm run generateModels`. Make sure you have environment variables filled in properly.
 
+### Use codebase as a starter
+
+> ⚠ This project is not intended as a starter project. It is as a sample of the presentation channel showcasing Kontent.ai capabilities. The following hints help you to use this code base as a base for presentation channel for your project as a boilerplate. By doing it, you are accepting the fact you are changing the purpose of this code.
+
+The app contains code to dynamically handle different Kontent.ai projects (e.g. the environment route prefix). To adjust the code to be used to single project as a starter, you want to remove the logic that is used solely for showcasing the sample project during evaluation.
+
+Some of the parts responsible for handle different Kontent.ai projects that needs adjustments in case of transforming it into single-project setup.
+
+* `middleware.ts` - Getting the Kontent.ai environment ID and storing it in cookie. For single-project setup use only the environment variable with environment ID should be used.
+* `pages/callback.ts` & `pages/getPreviewApiKey.ts` & `constants/auth.ts` - Responsible for exchanging preview API keys for specified environment. For single-project setup use only the environment variable with preview API key should be used.
+* `pages/[envid]` - folder responsible for the [dynamic segment](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes) passing the environment ID for pages. For single-project setup remove the folder and move its content one level up.
+
 ## Create your own data source project in Kontent.ai
 
 TBD - raise the issue, if you want the project backup

components/landingPage/ui/heroImage.tsx

@@ -2,8 +2,8 @@ import Image from "next/image";
 import { FC, ReactNode } from "react";
 
 import { mainColorMdBgClass } from "../../../lib/constants/colors";
+import { siteCodename } from "../../../lib/utils/env";
 import { createItemSmartLink } from "../../../lib/utils/smartLinkUtils";
-import { useSiteCodename } from "../../shared/siteCodenameContext";
 
 type Props = Readonly<{
   url: string;
@@ -12,35 +12,29 @@ type Props = Readonly<{
   itemId?: string;
 }>;
 
-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)}
+export const HeroImage: FC<Props> = (props) => (
+  <>
+    <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`}
       >
-        <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>
-    </>
-  );
-};
+        {props.children}
+      </div>
+    </figure>
+  </>
+);
 
 HeroImage.displayName = "HeroImage";

components/listingPage/ArticleItem.tsx

@@ -4,7 +4,7 @@ import { FC } from "react";
 
 import { mainColorButtonClass, mainColorGroupHoverClass } from "../../lib/constants/colors";
 import { formatDate } from "../../lib/utils/dateTime";
-import { useSiteCodename } from "../shared/siteCodenameContext";
+import { siteCodename } from "../../lib/utils/env";
 import { StandaloneSmartLinkButton } from "../shared/StandaloneSmartLinkButton";
 
 type Props = Readonly<{
@@ -16,40 +16,36 @@ type Props = Readonly<{
   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>
+export const ArticleItem: FC<Props> = props => (
+  <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>
-        <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>
-  );
-}
+      )}
+      <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";
+ArticleItem.displayName = "ListItem";

components/listingPage/ProductItem.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { FC } from "react";
 
 import { mainColorButtonClass, mainColorGroupHoverClass } from "../../lib/constants/colors";
-import { useSiteCodename } from "../shared/siteCodenameContext";
+import { siteCodename } from "../../lib/utils/env";
 import { StandaloneSmartLinkButton } from "../shared/StandaloneSmartLinkButton";
 
 type Props = Readonly<{
@@ -15,35 +15,31 @@ type Props = Readonly<{
   itemId?: string;
 }>;
 
-export const ProductItem: FC<Props> = props => {
-  const siteCodename = useSiteCodename()
+export const ProductItem: FC<Props> = props => (
+  <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} />
 
-  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>
+)
 
-        <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";
+ProductItem.displayName = "ListItem";

components/shared/Fact.tsx

@@ -2,13 +2,13 @@ import Image from "next/image";
 import { FC } from "react";
 
 import { mainColorAfterBgClass } from "../../lib/constants/colors";
+import { siteCodename } from "../../lib/utils/env";
 import {
   createElementSmartLink,
   createItemSmartLink,
 } from "../../lib/utils/smartLinkUtils";
 import { contentTypes, Fact } from "../../models";
 import { CTAButton } from "./internalLinks/CTAButton";
-import { useSiteCodename } from "./siteCodenameContext";
 
 type Props = Readonly<{
   item: Fact;
@@ -17,7 +17,6 @@ type Props = Readonly<{
 
 export const FactComponent: FC<Props> = (props) => {
   const image = props.item.elements.image.value[0];
-  const siteCodename = useSiteCodename();
   const authorElements = props.item.elements.author.linkedItems[0]?.elements;
   const { firstName, lastName, occupation } = authorElements ?? {};
 

components/shared/internalLinks/CTAButton.tsx

@@ -6,18 +6,17 @@ import {
   mainColorHoverClass,
 } from "../../../lib/constants/colors";
 import { resolveReference } from "../../../lib/routing";
+import { siteCodename } from "../../../lib/utils/env";
 import { Action, Fact, Nav_NavigationItem } from "../../../models";
-import { useSiteCodename } from "../siteCodenameContext";
 
 type Props = {
   reference: Fact | Action | Nav_NavigationItem;
 };
 
 export const CTAButton = (props: Props) => {
-  const siteCodename = useSiteCodename();
   const factUrl =
     props.reference.elements.referenceExternalUri.value ||
-    props.reference.elements.referenceContentItemLink.linkedItems.length > 0
+      props.reference.elements.referenceContentItemLink.linkedItems.length > 0
       ? resolveReference(props.reference)
       : null;
   return (

components/shared/richText/Callout.tsx

@@ -9,31 +9,27 @@ import {
   calloutTypeColor,
   mainColorBorderClass,
 } from "../../../lib/constants/colors";
+import { siteCodename } from "../../../lib/utils/env";
 import { Component_Callout } from "../../../models";
-import { useSiteCodename } from "../siteCodenameContext";
 import { RichTextElement } from "./RichTextElement";
 
 type Props = Readonly<{
   item: Component_Callout;
 }>;
 
-export const CalloutComponent: FC<Props> = (props) => {
-  const siteCodename = useSiteCodename();
-
-  return (
-    <div
-      className={`p-5 border-2 rounded-3xl ${mainColorBorderClass[siteCodename]}`}
-    >
-      <div className={`w-5 ${createIconColor(props.item)}`}>
-        {renderTypeIcon(props.item)}
-      </div>
-      <RichTextElement
-        element={props.item.elements.content}
-        isInsideTable={false}
-      />
+export const CalloutComponent: FC<Props> = (props) => (
+  <div
+    className={`p-5 border-2 rounded-3xl ${mainColorBorderClass[siteCodename]}`}
+  >
+    <div className={`w-5 ${createIconColor(props.item)}`}>
+      {renderTypeIcon(props.item)}
     </div>
-  );
-};
+    <RichTextElement
+      element={props.item.elements.content}
+      isInsideTable={false}
+    />
+  </div>
+);
 
 const renderTypeIcon = (callout: Component_Callout) => {
   switch (callout.elements.type.value[0]?.codename) {