Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix landing page missing #2

Merged
merged 5 commits into from
Dec 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="description" content="Get started quickly with Kontent.ai using our Kickstart application template." />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="icon" type="image/svg+xml" href="/kaipurple.png" />
<link href="https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
<title>Kontent.ai Kickstart</title>
</head>
Expand Down
Binary file added public/kaipurple.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 13 additions & 1 deletion src/components/FeaturedArticle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import FeaturedComponentBase from "./FeaturedComponentBase";
import { Article } from "../model";
import { Replace } from "../utils/types";
import RenderElement from "./RenderElement";
import { contentTypes } from "../model/project";
import { articleLink } from "../constants/links";

type FeaturedArticleProps = Readonly<{
article: Replace<Article, { elements: Partial<Article["elements"]> }>;
Expand All @@ -15,7 +17,13 @@ const FeaturedArticle: React.FC<FeaturedArticleProps> = ({ article }) => {
<FeaturedComponentBase type="article" image={article.elements?.image}>
<>
<div>
<RenderElement element={article.elements.title} elementCodename="title" requiredElementType="text">
<RenderElement
element={article.elements.title}
elementCodename="title"
requiredElementType="text"
typeCodename={contentTypes.article.codename}
link={articleLink}
>
<h2 className="text-center xl:text-left text-5xl font-semibold text-burgundy">
{article.elements.title?.value}
</h2>
Expand All @@ -24,6 +32,8 @@ const FeaturedArticle: React.FC<FeaturedArticleProps> = ({ article }) => {
element={article.elements.publish_date}
elementCodename="publish_date"
requiredElementType="date_time"
typeCodename={contentTypes.article.codename}
link={articleLink}
>
<p className="text-center xl:text-left text-gray-light mt-6 text-lg">
{article.elements.publish_date?.value
Expand All @@ -40,6 +50,8 @@ const FeaturedArticle: React.FC<FeaturedArticleProps> = ({ article }) => {
element={article.elements.introduction}
elementCodename="introduction"
requiredElementType="text"
typeCodename={contentTypes.article.codename}
link={articleLink}
>
<p className="text-center xl:text-left text-gray-700 mt-4 text-xl">
{article.elements.introduction?.value}
Expand Down
10 changes: 9 additions & 1 deletion src/components/FeaturedComponentBase.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { Elements } from "@kontent-ai/delivery-sdk";
import { FC, PropsWithChildren } from "react";
import RenderElement from "./RenderElement";
import { contentTypes } from "../model/project";
import { articleLink, eventLink } from "../constants/links";

type FeaturedContentProps = PropsWithChildren<
Readonly<{
Expand All @@ -14,7 +16,13 @@ const FeaturedComponentBase: FC<FeaturedContentProps> = ({ type, image, children
return (
<div className="flex flex-col gap-5 xl:gap-16 xl:flex-row py-5 xl:py-[104px] items-center">
<div className="basis-1/3">
<RenderElement element={image} elementCodename="image" requiredElementType="asset">
<RenderElement
element={image}
elementCodename="image"
requiredElementType="asset"
typeCodename={type === "article" ? contentTypes.article.codename : contentTypes.event.codename}
link={type === "article" ? articleLink : eventLink}
>
{img && (
<>
<span className="px-3.5 py-1.5 absolute text-[12px] bg-azure text-white mt-4 ms-4 rounded-md font-bold">
Expand Down
14 changes: 13 additions & 1 deletion src/components/FeaturedEvent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { PortableText } from "@portabletext/react";
import { defaultPortableRichTextComponents } from "../utils/richtext";
import { Replace } from "../utils/types";
import RenderElement from "./RenderElement";
import { contentTypes } from "../model/project";
import { eventLink } from "../constants/links";

type FeaturedEventProps = Readonly<{
event: Replace<Event, { elements: Partial<Event["elements"]> }>;
Expand All @@ -26,7 +28,13 @@ const FeaturedEvent: FC<FeaturedEventProps> = ({ event }) => {
<FeaturedComponentBase image={event.elements.image} type="event">
<>
<div>
<RenderElement element={event.elements.name} elementCodename="name" requiredElementType="text">
<RenderElement
element={event.elements.name}
elementCodename="name"
requiredElementType="text"
link={eventLink}
typeCodename={contentTypes.event.codename}
>
<h2 className="text-center xl:text-left text-5xl font-semibold text-burgundy">
{event.elements.name?.value}
</h2>
Expand All @@ -35,6 +43,8 @@ const FeaturedEvent: FC<FeaturedEventProps> = ({ event }) => {
element={event.elements.start_date}
elementCodename="start_date"
requiredElementType="date_time"
link={eventLink}
typeCodename={contentTypes.event.codename}
>
<p className="text-center xl:text-left text-gray-light mt-6 text-lg">
{`${
Expand All @@ -56,6 +66,8 @@ const FeaturedEvent: FC<FeaturedEventProps> = ({ event }) => {
element={event.elements.description}
elementCodename="description"
requiredElementType="rich_text"
typeCodename={contentTypes.event.codename}
link={eventLink}
children={() => (
<div className="mt-4">
<PortableText
Expand Down
26 changes: 23 additions & 3 deletions src/components/HeroImage.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { Elements } from "@kontent-ai/delivery-sdk";
import { FC } from "react";
import RenderElement from "./RenderElement";
import { contentTypes } from "../model/project";
import { landingPageLink } from "../constants/links";

type HeroImageProps = Readonly<{
data: {
Expand All @@ -14,17 +16,35 @@ const HeroImage: FC<HeroImageProps> = ({ data }) => {
return (
<div className="flex flex-col xl:flex-row pt-10 xl:pt-[104px] pb-10 xl:pb-[160px] gap-5">
<div className="xl:basis-1/2">
<RenderElement element={data.headline} elementCodename="headline" requiredElementType="text">
<RenderElement
element={data.headline}
elementCodename="headline"
requiredElementType="text"
typeCodename={contentTypes.landing_page.codename}
link={landingPageLink}
>
<h1 className="text-center xl:text-left font-libre text-[64px] md:text-[94px] text-burgundy font-bold leading-[64px] md:leading-[78px]">
{data.headline?.value}
</h1>
</RenderElement>
<RenderElement element={data.subheadline} elementCodename="subheadline" requiredElementType="text">
<RenderElement
element={data.subheadline}
elementCodename="subheadline"
requiredElementType="text"
typeCodename={contentTypes.landing_page.codename}
link={landingPageLink}
>
<p className="text-center xl:text-left font-sans text-xl text-gray">{data.subheadline?.value}</p>
</RenderElement>
</div>
<div className="xl:basis-1/2">
<RenderElement element={data.heroImage} elementCodename="hero_image" requiredElementType="asset">
<RenderElement
element={data.heroImage}
elementCodename="hero_image"
requiredElementType="asset"
typeCodename={contentTypes.landing_page.codename}
link={landingPageLink}
>
{data.heroImage?.value[0]
? (
<img
Expand Down
13 changes: 13 additions & 0 deletions src/components/KontentComponentErrorMessage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { FC, PropsWithChildren } from "react";

type KontentComponentErrorMessageProps = PropsWithChildren<{
errorMessageClassName?: string;
}>;

const KontentComponentErrorMessage: FC<KontentComponentErrorMessageProps> = (props) => (
<p className={`text-balance font-sans text-xl text-gray ${props.errorMessageClassName ?? ""}`}>
{props.children}
</p>
);

export default KontentComponentErrorMessage;
13 changes: 13 additions & 0 deletions src/components/Layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { FC, PropsWithChildren } from "react";
import Footer from "./Footer";
import Header from "./Header";

const Layout: FC<PropsWithChildren> = ({ children }) => (
<div className="flex flex-col min-h-screen">
<Header />
{children}
<Footer />
</div>
);

export default Layout;
25 changes: 17 additions & 8 deletions src/components/RenderElement.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Elements } from "@kontent-ai/delivery-sdk";
import type { FC, ReactNode } from "react";
import { ElementCodenames } from "../model";
import { ContentTypeCodenames, ElementCodenames } from "../model";
import KontentComponentErrorMessage from "./KontentComponentErrorMessage";

type AllElementsUnion =
| Elements.TextElement
Expand Down Expand Up @@ -29,39 +30,47 @@ type ElementTypeUnion =
type RenderElementProps = {
element?: AllElementsUnion;
elementCodename: ElementCodenames;
typeCodename: ContentTypeCodenames;
requiredElementType: ElementTypeUnion;
errorMessageClassName?: string;
link: string | undefined;
children?: ReactNode | (() => ReactNode);
};

const RenderElement: FC<RenderElementProps> = (props) => {
const renderTypeCodenameLink = () => (
<a href={props.link} className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600">
{props.typeCodename} content type
</a>
);

if (!props.element) {
return (
<p className={`text-balance font-sans text-xl text-gray ${props.errorMessageClassName ?? ""}`}>
Missing or invalid element codename{" "}
<KontentComponentErrorMessage errorMessageClassName={props.errorMessageClassName}>
Missing element with the codename{" "}
<b>
<i>{props.elementCodename}</i>
</b>. To learn more about codenames refer to the{" "}
</b>. Ensure that your {renderTypeCodenameLink()} contains elements with correct names and{" "}
<a
href="https://kontent.ai/learn/docs/content-model/content-types#a-edit-codenames"
className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
>
Kontent.ai documentation
codenames
</a>.
</p>
</KontentComponentErrorMessage>
);
}

if (props.element.type !== props.requiredElementType) {
return (
<p className={`text-balance font-sans text-xl text-gray ${props.errorMessageClassName ?? ""}`}>
<KontentComponentErrorMessage errorMessageClassName={props.errorMessageClassName}>
Invalid type of element with codename{" "}
<b>
<i>{props.elementCodename}</i>
</b>
{". "}
Required type of element: <b>{props.requiredElementType}</b>. Actual type: <b>{props.element.type}</b>.
</p>
</KontentComponentErrorMessage>
);
}

Expand Down
34 changes: 30 additions & 4 deletions src/components/Video.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { FC } from "react";
import { Video as VideoType } from "../model";
import { Replace } from "../utils/types";
import RenderElement from "./RenderElement";
import { contentTypes } from "../model/project";
import { videoLink } from "../constants/links";

type VideoProps = {
video: Replace<VideoType, { elements: Partial<VideoType["elements"]> }>;
Expand All @@ -10,17 +12,35 @@ type VideoProps = {
const Video: FC<VideoProps> = ({ video }) => {
return (
<div className="flex flex-col items-center">
<RenderElement element={video.elements.headline} elementCodename="headline" requiredElementType="text">
<RenderElement
element={video.elements.headline}
elementCodename="headline"
requiredElementType="text"
typeCodename={contentTypes.video.codename}
link={videoLink}
>
<h2 className="text-azure text-[40px] md:text-[64px] leading-[54px] w-2/4 text-center">
{video.elements.headline?.value}
</h2>
</RenderElement>
<RenderElement element={video.elements.description} elementCodename="description" requiredElementType="text">
<RenderElement
element={video.elements.description}
elementCodename="description"
requiredElementType="text"
typeCodename={contentTypes.video.codename}
link={videoLink}
>
<p className="w-4/6 text-center text-xl pt-6 text-gray">
{video.elements.description?.value}
</p>
</RenderElement>
<RenderElement element={video.elements.video_link} elementCodename="video_link" requiredElementType="text">
<RenderElement
element={video.elements.video_link}
elementCodename="video_link"
requiredElementType="text"
typeCodename={contentTypes.video.codename}
link={videoLink}
>
{video.elements.video_link?.value
? (
<figure className="pt-20">
Expand All @@ -35,7 +55,13 @@ const Video: FC<VideoProps> = ({ video }) => {
referrerPolicy="strict-origin-when-cross-origin"
allow={"autoplay"}
/>
<RenderElement element={video.elements.caption} elementCodename="caption" requiredElementType="text">
<RenderElement
element={video.elements.caption}
elementCodename="caption"
requiredElementType="text"
typeCodename={contentTypes.video.codename}
link={videoLink}
>
<figcaption className="text-gray-light block m-auto w-fit text-xl pt-6">
{video.elements.caption?.value}
</figcaption>
Expand Down
11 changes: 11 additions & 0 deletions src/constants/links.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export const landingPageLink =
"https://kontent.ai/learn/try-kontent-ai/build-the-foundation/create-a-landing-page-structure#a-create-a-landing-page-content-type";

export const articleLink =
"https://kontent.ai/learn/try-kontent-ai/build-the-foundation/create-an-article-content-type#a-create-an-article-content-type";

export const eventLink =
"https://kontent.ai/learn/try-kontent-ai/enhance-your-landing-page/create-event-and-video-structures#a-create-an-event-content-type";

export const videoLink =
"https://kontent.ai/learn/try-kontent-ai/enhance-your-landing-page/create-event-and-video-structures#a-create-a-video-content-type";
Loading
Loading