Skip to content

WIP - Adjust content UI #267

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.

Sign up for GitHub

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

Open
NoeliaEle wants to merge 6 commits into
base: main
Choose a base branch
from
Open

WIP - Adjust content UI #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
827ef80
run contentful codegen
NoeliaEle Apr 12, 2024
d1db1e7
Add video alignment prop on video content item
NoeliaEle Apr 12, 2024
6cd9878
display only video if no content is received
NoeliaEle Apr 12, 2024
f100ccb
remove comment
NoeliaEle Apr 12, 2024
67163aa
Add basic banner UI
NoeliaEle Apr 12, 2024
8ceacb9
adjust color of banner
NoeliaEle May 10, 2024
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
95 changes: 95 additions & 0 deletions @types/generated/contentful.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,33 @@
import { Asset, Entry } from "contentful";
import { Document } from "@contentful/rich-text-types";

export interface IBannerFields {
/** text in banner */
textInBanner: Document;

/** action */
action?: string | undefined;
}

/** A banner to display timely-relevant information */

export interface IBanner extends Entry<IBannerFields> {
sys: {
id: string;
type: string;
createdAt: string;
updatedAt: string;
locale: string;
contentType: {
sys: {
id: "banner";
linkType: "ContentType";
type: "Link";
};
};
};
}

export interface IBlogpostFields {
/** Titel */
title?: string | undefined;
Expand Down Expand Up @@ -634,6 +661,7 @@ export interface IPageFields {
| ITrackingGa
| IBlogPreview
| ITeamSection
| IBanner
)[];

/** seo */
Expand Down Expand Up @@ -776,6 +804,64 @@ export interface ITeamSection extends Entry<ITeamSectionFields> {
};
}

export interface ITestimonialsFields {
/** image */
image?: Asset | undefined;

/** link */
link?: string | undefined;

/** testimonialText */
testimonialText?: string | undefined;

/** author */
author?: string | undefined;
}

export interface ITestimonials extends Entry<ITestimonialsFields> {
sys: {
id: string;
type: string;
createdAt: string;
updatedAt: string;
locale: string;
contentType: {
sys: {
id: "testimonials";
linkType: "ContentType";
type: "Link";
};
};
};
}

export interface ITestimonialSectionFields {
/** Title */
title: string;

/** Testimonials */
testimonials: ITestimonials[];
}

/** Here you can find the testimonials grouped */

export interface ITestimonialSection extends Entry<ITestimonialSectionFields> {
sys: {
id: string;
type: string;
createdAt: string;
updatedAt: string;
locale: string;
contentType: {
sys: {
id: "testimonialSection";
linkType: "ContentType";
type: "Link";
};
};
};
}

export interface ITrackingGaFields {
/** Title */
title: string;
Expand Down Expand Up @@ -854,6 +940,9 @@ export interface IVideoPlayerFields {

/** Show only on german page */
showOnlyOnGermanPage?: boolean | undefined;

/** video alignment */
videoAlignment?: boolean | undefined;
}

/** Component to display videos */
Expand All @@ -876,6 +965,7 @@ export interface IVideoPlayer extends Entry<IVideoPlayerFields> {
}

export type CONTENT_TYPE =
| "banner"
| "blogpost"
| "BlogPreview"
| "centeredContent"
Expand All @@ -899,11 +989,14 @@ export type CONTENT_TYPE =
| "supporter"
| "tag"
| "teamSection"
| "testimonials"
| "testimonialSection"
| "trackingGa"
| "twoImages"
| "videoPlayer";

export type IEntry =
| IBanner
| IBlogpost
| IBlogPreview
| ICenteredContent
Expand All @@ -927,6 +1020,8 @@ export type IEntry =
| ISupporter
| ITag
| ITeamSection
| ITestimonials
| ITestimonialSection
| ITrackingGa
| ITwoImages
| IVideoPlayer;
Expand Down
16 changes: 15 additions & 1 deletion app/components/ContentBlocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type {
IBannerFields,
IBlogpostFields,
ICenteredContentFields,
IContentImageBgFields,
Expand All @@ -13,6 +14,7 @@ import type {
IVideoPlayerFields,
LOCALE_CODE,
} from "../../@types/generated/contentful";
import Banner from "./ContentBlocks/Banner";
import ContentBlockBlogPreview from "./ContentBlocks/BlogPreview";
import ContentBlockCentered from "./ContentBlocks/Centered";
import ContentBlockImageCollection from "./ContentBlocks/ContentBlockImageCollection";
Expand Down Expand Up @@ -123,7 +125,7 @@ export default function ContentBlocks({ content, locale }: ContentBlockProps) {
}

if (id === "videoPlayer") {
const { videoId, content, showOnlyOnGermanPage } =
const { videoId, content, showOnlyOnGermanPage, videoAlignment } =
item.fields as IVideoPlayerFields;
if (
!showOnlyOnGermanPage ||
Expand All @@ -134,6 +136,7 @@ export default function ContentBlocks({ content, locale }: ContentBlockProps) {
key={item.sys.id}
videoId={videoId}
content={content}
videoAlignment={videoAlignment}
/>
);
}
Expand Down Expand Up @@ -182,6 +185,17 @@ export default function ContentBlocks({ content, locale }: ContentBlockProps) {
);
}

if (id === "banner") {
const { textInBanner, action } = item.fields as IBannerFields;
return (
<Banner
key={item.sys.id}
textInBanner={textInBanner}
action={action}
/>
);
}

if (id === "coachList") {
return null;
} else {
Expand Down
12 changes: 12 additions & 0 deletions app/components/ContentBlocks/Banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import type { IBannerFields } from "../../../@types/generated/contentful";
import ContentfulRichText from "../ContentfulRichText";

export default function Banner({ textInBanner, action }: IBannerFields) {
return (
<section className="flex items-center justify-center fixed bottom-0 w-full py-2 px-4 bg-gradient-to-b to-orange-400 from-orange-500 shadow-[rgba(0,0,15,0.5)_5px_5px_5px_6px] z-10 text-center">
<a href={action}>
<ContentfulRichText content={textInBanner}></ContentfulRichText>
</a>
</section>
);
}
35 changes: 29 additions & 6 deletions app/components/ContentBlocks/VideoPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,36 @@
import type { IVideoPlayerFields } from "../../../@types/generated/contentful";
import ContentfulRichText from "../ContentfulRichText";

export default function VideoPlayer({ videoId, content }: IVideoPlayerFields) {
export default function VideoPlayer({
videoId,
content,
videoAlignment,
}: IVideoPlayerFields) {
return (
<section className="my-1 grid w-screen max-w-full grid-cols-1 lg:grid-cols-2">
<div className=" flex-grid self-center py-8 px-4 lg:row-start-1 lg:ml-auto lg:max-w-[70ch] lg:px-12 lg:pt-24 lg:pb-12">
{content && <ContentfulRichText content={content} />}
</div>
<div className="row-start-2 h-auto w-full lg:col-start-2 lg:row-start-1 lg:max-h-max lg:p-4">
<section
className={`my-1 w-screen grid-cols-1 ${
content ? "grid lg:grid-cols-2" : "max-w-4xl mx-auto"
}`}
>
{content && (
<div
className={`flex self-center py-8 px-4 lg:row-start-1 lg:max-w-[70ch] lg:px-12 lg:pt-24 lg:pb-12 ${
videoAlignment ? "lg:mr-auto lg:col-start-2" : "lg:ml-auto"
} `}
>
<ContentfulRichText content={content} />
</div>
)}
<div
className={`lg:p-4 ${
content
? "row-start-2 lg:row-start-1 h-auto w-full lg:max-h-max " &&
videoAlignment
? "lg:col-start-1 "
: "lg:col-start-2 "
: "mx-auto"
}`}
>
<iframe
title="video"
loading="lazy"
Expand Down