Skip to content

Commit

Permalink
Merge pull request #748 from CodeForAfrica/feature/roboshield_hero_pa…
Browse files Browse the repository at this point in the history
…yload

@/Roboshield Move Hero  to Payload CMS
  • Loading branch information
m453h authored Jul 3, 2024
2 parents 33eec4c + db8ec1a commit 209b2f9
Show file tree
Hide file tree
Showing 6 changed files with 300 additions and 75 deletions.
21 changes: 21 additions & 0 deletions apps/roboshield/payload-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export interface Page {
blockName?: string | null;
blockType: "page-header";
}
| PageHero
| {
content?:
| (
Expand Down Expand Up @@ -248,6 +249,26 @@ export interface Page {
createdAt: string;
_status?: ("draft" | "published") | null;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "PageHero".
*/
export interface PageHero {
heroHeaders?:
| {
headingType?: ("largeHeading" | "subHeading" | "rotatingText") | null;
title?: string | null;
id?: string | null;
}[]
| null;
heroDescriptiveText: {
[k: string]: unknown;
}[];
heroButtonText?: string | null;
id?: string | null;
blockName?: string | null;
blockType: "page-hero";
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "users".
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@ import PageHeader from "@/roboshield/components/PageHeader";
import Content from "@/roboshield/components/Content";
import Statistics from "@/roboshield/components/Statistics";
import { Page } from "@/root/payload-types";
import Hero from "@/roboshield/components/Hero";
import RoboForm from "@/roboshield/components/RoboForm";
import { FC } from "react";

interface BlockRendererProps extends Pick<Page, "blocks"> {}

const components = {
"page-header": PageHeader,
"page-hero": Hero,
content: Content,
statistics: Statistics,
"robo-form": RoboForm,
Expand Down
160 changes: 86 additions & 74 deletions apps/roboshield/src/components/Hero/Hero.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import RichText from "@/roboshield/components/RichText";
import { Section } from "@commons-ui/core";
import { RichTypography } from "@commons-ui/next";
import { Box, Button, Typography } from "@mui/material";
import React from "react";
import ReactRotatingText from "react-rotating-text";
import { Theme } from "@mui/material";
import { PageHero } from "@/root/payload-types";

interface props {
scrolRef: React.RefObject<HTMLDivElement>;
}

const Hero = ({ scrolRef }: props) => {
const Hero = (props: PageHero) => {
return (
<Box
component="section"
Expand All @@ -22,84 +21,97 @@ const Hero = ({ scrolRef }: props) => {
}}
>
<Section>
<Typography
color="text.secondary"
gutterBottom
typography="h6"
variant="h2"
>
CONTROL YOUR DATA
</Typography>
{props.heroHeaders?.map((header) => (
<div key={header.id}>
{header.headingType === "subHeading" && (
<Typography
key={header.id}
color="text.secondary"
gutterBottom
typography="h6"
variant="h2"
>
{header.title}
</Typography>
)}
{header.headingType === "largeHeading" && (
<Typography
color="text.secondary"
gutterBottom
textAlign="center"
variant="h1"
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
>
{header.title}
</Typography>
)}
{header.headingType === "rotatingText" && (
<Typography
color="text.secondary"
gutterBottom
textAlign="center"
variant="h1"
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
>
<Box
component="span"
sx={{
backgroundColor: "red",
color: "text.secondary",
maxWidth: "fit-content",
p: "6px 20px",
textTransform: "capitalize",
}}
>
<ReactRotatingText
items={header?.title?.split(",").map((part) => part.trim())}
cursor={false}
eraseMode="overwrite"
/>
</Box>
</Typography>
)}
</div>
))}

<Typography
<RichText
color="text.secondary"
gutterBottom
my={{
xs: 3,
md: 5,
}}
textAlign="center"
variant="h1"
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
>
Guard Your
<Box
component="span"
sx={{
backgroundColor: "red",
typographyProps={{
LinkProps: {
color: "text.secondary",
maxWidth: "fit-content",
my: {
xs: 0.5,
md: 1,
sx: {
textDecorationColor: "text.secondary",
},
p: "6px 20px",
textTransform: "capitalize",
}}
>
<ReactRotatingText
items={["website", "blog", "content"]}
cursor={false}
eraseMode="overwrite"
/>
</Box>
Against AI Bots
</Typography>

<RichTypography
LinkProps={{
color: "text.secondary",
},
variant: "h6",
}}
color="text.secondary"
typography="h6"
variant="h3"
sx={{
"& .robots": {
sx={(theme: Theme) => ({
a: {
textDecoration: "none",
padding: "0.5em",
margin: "0.5em",
border: "1px solid",
borderColor: "text.secondary",
border: 1,
p: 0.5,
},
"& .robots:before": {
fill: "white",
content: "url('/icons/smarttoy-24-white.svg')",
display: "inline-block",
pr: 0.5,
height: "26.95px", // line-height of typography (h6)
verticalAlign: "middle",
},
}}
>
{`Generate a <a href="https://en.wikipedia.org/wiki/Robots.txt" class="robots">robots.txt</a> file tailored to the platform you use to publish your content online and blocks AI bots`}
</RichTypography>
mt: "2.5em",
})}
elements={props.heroDescriptiveText}
/>

<Button
onClick={() => {
scrolRef.current?.scrollIntoView({
const element = document.getElementById("robots-generator");
element?.scrollIntoView({
behavior: "smooth",
});
}}
Expand All @@ -112,7 +124,7 @@ const Hero = ({ scrolRef }: props) => {
},
}}
>
Get Started
{props.heroButtonText}
</Button>
</Section>
</Box>
Expand Down
120 changes: 120 additions & 0 deletions apps/roboshield/src/lib/data/payload.types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
interface TextNode {
children: TextNode | null;
text?: string;
}

interface BreadCrumbs {
doc: string;
url: string;
label: string;
id: string;
}

interface Document {
id: string;
title: string;
fullTitle: string;
slug: string;
blocks: any[];
meta: any;
breadcrumbs: BreadCrumbs[];
createdAt: string;
updatedAt: string;
}

interface Link {
label: string;
linkType: string;
doc: {
value: Document;
};
relationTo: string;
}

interface SocialMediaLink {
platform: string;
url: string;
id: string;
}

interface StayInTouchData {
title: string;
links: SocialMediaLink[];
}

interface HeroHeader {
headingType: string;
title: string;
id: string;
}

export interface MediaData {
id: string;
alt?: string | null;
prefix: string;
filename: string;
mimeType: string;
filesize: number;
width: number;
height: number;
createdAt: string;
updatedAt: string;
url: string | null;
src: string | null;
}

export interface Partner {
logo: MediaData;
name: string;
url: string;
}
export interface Settings {
title: string;
description: TextNode;
connect: StayInTouchData;
primaryLogo: MediaData;
secondaryLogo: MediaData;
primaryNavigation: {
menus: Link[];
connect: string;
};
secondaryNavigation: {
menus: Link[];
};
newsletter: {
title: string;
embedCode: string;
};
initiative: {
partners: Partner[];
title: string;
description: TextNode;
};
heroButtonText: string;
heroDescriptiveText: string;
heroHeaders: HeroHeader[];
}

export interface CollectionQuery {
collection: string;
depth: number;
page: number;
limit: number;
pagination: boolean;
where: Record<string, any>;
sort: string;
locale: string;
fallbackLocale: boolean | string;
user: string;
overrideAccess: boolean;
showHiddenFields: boolean;
}

export interface Api {
createCollection: (...args: any) => Promise<any>;
deleteCollection: (...args: any) => Promise<any>;
findGlobal: (...args: any) => Promise<any>;
findPage: (...args: any) => Promise<any>;
getCollection: (...args: any) => Promise<any>;
updateCollection: (...args: any) => Promise<any>;
}
Loading

0 comments on commit 209b2f9

Please sign in to comment.