Merge pull request #1717 from starknet-io/feature/add-newsletter-home…

…page

Add newsletter homepage and internal

_data/pages/home.yml

@@ -52,6 +52,9 @@ blocks:
           operates as a Validity-rollup (or ZK-rollup): it "bundles" many
           transactions and "rolls" them to Ethereum as a single transaction.'
         columns: "4"
+  - title: "Starknet newsletter. "
+    type: newsletter_popup
+    description: "Sign up to receive the latest news and updates from the Starknet ecosystem. "
   - type: flex_layout
     heading_variant: h3
     base: 1

_data/seo/newsletter.yml

@@ -0,0 +1,5 @@
+title: Starknet Newsletter ✨🗞️
+subtitle: Stay up to date with the latest news and updates from the Starknet ecosystem.
+description: Sign up to receive the latest news and updates from the Starknet ecosystem.
+  We'll send you emails with the latest news, updates, and resources
+  from the Starknet ecosystem.

public/robots.txt

@@ -7,3 +7,5 @@ Disallow: /fr/*
 Disallow: /ja/*
 Disallow: /ko/*
 Disallow: /pt/*
+Disallow: /*/subscribe-newsletter
+Disallow: /subscribe-newsletter

workspaces/cms-config/src/blocks.ts

@@ -721,8 +721,25 @@ export const blocks = [
         fields: videoChapterFields
       }
     ]
-  },
-  {
+  }, {
+    name: "newsletter_popup",
+    label: "Newsletter Popup",
+    widget: "object",
+    fields: [
+      {
+        crowdin: true,
+        label: 'Title',
+        name: 'title',
+        widget: 'string'
+      },
+      {
+        crowdin: true,
+        label: 'Description',
+        name: 'description',
+        widget: 'string'
+      },
+    ]
+  }, {
     name: "ordered_block",
     label: "Ordered Block",
     widget: "object",

workspaces/cms-config/src/collections/seo.ts

@@ -149,6 +149,31 @@ export const SEOCollectionConfig = {
           crowdin: true,
         },
       ],
+    }, {
+      label: "Starknet newsletter",
+      name: "newsletter",
+      file: `_data/seo/newsletter.yml`,
+      crowdin: true,
+      fields: [
+        {
+          label: "Title",
+          name: "title",
+          widget: "string",
+          crowdin: true,
+        },
+        {
+          label: "Sub Title",
+          name: "subtitle",
+          widget: "string",
+          crowdin: true,
+        },
+        {
+          label: "Description",
+          name: "description",
+          widget: "string",
+          crowdin: true,
+        }
+      ],
     },
   ],
 } satisfies CmsCollection;

workspaces/cms-data/src/pages.ts

@@ -160,6 +160,12 @@ export interface VideoSectionBlock {
   readonly 'eth-settlement': ChapterInfo;
 }
 
+export interface NewsletterBlock {
+  readonly type: "newsletter_popup";
+  readonly title: string;
+  readonly description: string;
+}
+
 export type HeadingVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
 export type Block =
@@ -175,7 +181,8 @@ export type Block =
   | OrderedBlock
   | ListCardItemsBlock
   | AmbassadorsListBlock
-  | VideoSectionBlock;
+  | VideoSectionBlock
+  | NewsletterBlock;
 
 export interface Container {
   readonly type: "container";

workspaces/cms-data/src/seo/index.ts

@@ -21,6 +21,11 @@ export interface SEOTexts {
     subtitle: string;
     description: string;
   };
+  newsletter: {
+    title: string;
+    subtitle: string;
+    description: string;
+  };
   search: {
     search: string;
     cancel: string;

workspaces/cms-scripts/src/index.ts

@@ -87,6 +87,7 @@ const createSharedData = async () => {
     "jobs",
     "search",
     "language",
+    "newsletter"
   ];
 
   for (const locale of locales) {
@@ -160,6 +161,7 @@ const simpleFiles = [
   await getSimpleFiles("seo", "footer", true),
   await getSimpleFiles("seo", "home", true),
   await getSimpleFiles("seo", "language", true),
+  await getSimpleFiles("seo", "newsletter", true),
   await getSimpleFiles("seo", "search", true),
 ];
 
@@ -278,4 +280,4 @@ const redirects = await yaml("_data/settings/redirects.yml");
 await write(`workspaces/website/redirects.json`, redirects);
 await createRoadmapDetails()
 await createAnnouncementDetails()
-await createSharedData()
+await createSharedData()

workspaces/website/src/blocks/Block.tsx

@@ -19,20 +19,25 @@ import { useAsync } from "react-streaming";
 import { usePageContext } from "src/renderer/PageContextProvider";
 import { HeadingContainer } from "./HeadingContainer";
 import VideoSectionBlock from "./VideoSectionBlock";
+import { NewsletterCard } from "@ui/Card/NewsletterCard";
 
 interface Props {
   readonly block: TopLevelBlock;
+  env: {
+    CLOUDFLARE_RECAPTCHA_KEY: string;
+  }
   readonly locale: string;
 }
 
-export function Block({ block, locale }: Props): JSX.Element | null {
+export function Block({ block, env, locale }: Props): JSX.Element | null {
   if (block.type === "basic_card") {
     return <BasicCard {...block} locale={locale} />;
   } else if (block.type === "container") {
     return (
       <Container maxWidth={block.max_width}>
         {block.blocks.map((block, i) => (
           <Block
+            env={env}
             key={i}
             block={block}
             locale={locale}
@@ -42,6 +47,8 @@ export function Block({ block, locale }: Props): JSX.Element | null {
     );
   } else if (block.type === "image_icon_link_card") {
     return <ImageIconCard {...block} locale={locale} />;
+  } else if (block.type === "newsletter_popup") {
+    return <NewsletterCard {...block} env={env} locale={locale} />;
   } else if (block.type === "markdown") {
     return <MarkdownBlock body={block.body} /> ;
   } else if (block.type === "ambassadors_list") {
@@ -66,6 +73,7 @@ export function Block({ block, locale }: Props): JSX.Element | null {
       >
         {block.blocks.map((block, i) => (
           <Block
+            env={env}
             key={i}
             block={block}
             locale={locale}
@@ -110,6 +118,7 @@ export function Block({ block, locale }: Props): JSX.Element | null {
       <BlockGrouping>
         {block.blocks.map((block, i) => (
           <Block
+            env={env}
             key={i}
             block={block}
             locale={locale}
@@ -122,6 +131,7 @@ export function Block({ block, locale }: Props): JSX.Element | null {
       <HeadingContainer heading={block.heading} headingVariant={block.heading_variant}>
         {block.blocks.map((block, i) => (
           <Block
+            env={env}
             key={i}
             block={block}
             locale={locale}

workspaces/website/src/components/Card/ImageIconCard.tsx

@@ -37,6 +37,7 @@ type Props = {
   | "pink"
   | "grey",
   orientation?: "left" | "right"
+  onClick?: () => void;
 };
 
 type titleVariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
@@ -54,11 +55,12 @@ export const ImageIconCard = ({
   withIllustration = false,
   variant = "image_icon_link_card",
   columns = 4,
-  orientation = "left"
+  orientation = "left",
+  onClick
 }: Props) => {
-  const { href = 'test', label } = getComputedLinkData(locale, link ?? {
-      custom_title: 'dsa',
-      custom_internal_link: 'asd'
+  const { href , label } = getComputedLinkData(locale, link ?? {
+      custom_title: '',
+      custom_internal_link: ''
   });
   let titleVariant;
   let descriptionVariant;
@@ -101,9 +103,11 @@ export const ImageIconCard = ({
       descriptionVariant = size === "large" ? "body" : "cardBody";
       linkVariant = size === "large" ? "cardLink" : "smallCardLink";
   }
+
   return (
     <LinkBox
       sx={{ textDecoration: "none!important" }}
+      onClick={onClick}
     >
       <CardGradientBorder
         padding="0"
@@ -174,7 +178,7 @@ export const ImageIconCard = ({
                     lineHeight="24px"
                   >
                     {description}{" "}
-                    {variant === "community_card" && (
+                    {variant === "community_card" && href !== '#' && (
                       <CustomLink
                         variant={linkVariant as linkVariantType}
                         color="selected.main"

workspaces/website/src/components/Card/NewsletterCard.tsx

@@ -0,0 +1,56 @@
+/**
+ * Module dependencies.
+ */
+
+import { useState } from "react";
+import RoadmapSubscribeForm from "src/pages/(components)/roadmap/RoadmapSubscribeForm";
+import { ImageIconCard } from "./ImageIconCard";
+
+
+/**
+ * `Props` type.  
+ */
+
+type Props = {
+  description: string,
+  env: {
+    CLOUDFLARE_RECAPTCHA_KEY: string;
+  };
+  locale: string;
+  title: string;
+};
+
+/**
+ * Export `NewsletterCard` component.
+ */
+
+export const NewsletterCard = ({
+  description,
+  env,
+  locale,
+  title
+}: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <RoadmapSubscribeForm 
+        env={env}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+      />
+
+      <ImageIconCard 
+        columns={4}
+        description={description}
+        onClick={() => setIsOpen(true)}
+        orientation={'left'}
+        size={'large'}
+        title={title}
+        variant={'community_card'}
+        locale={locale}
+        withIllustration={false}
+      />
+    </>
+  );
+};

workspaces/website/src/pages/(components)/CMSPage.tsx

@@ -17,17 +17,21 @@ import { blocksToTOC } from "./TableOfContents/blocksToTOC";
 
 type CMSPageProps = {
   data: PageType;
+  env: {
+    CLOUDFLARE_RECAPTCHA_KEY: string;
+  }
   locale: string;
 };
 export default function CMSPage({
   data,
+  env,
   locale,
 }: CMSPageProps) {
   const date = data?.gitlog?.date;
   return (
     <Box>
       <PageLayout
-        contentMaxW={data.template === "narrow content" ? "846px" : null}
+        contentMaxW={data.template === "narrow content" ? "846px" : undefined}
         breadcrumbs={
           <>
             {data.breadcrumbs &&
@@ -87,6 +91,7 @@ export default function CMSPage({
             {data.blocks?.map((block, i) => {
               return (
                 <Block
+                  env={env}
                   key={i}
                   block={block}
                   locale={locale}