From 18039fe3d1664b773892bfc794c79519c50fd26d Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Sun, 17 Mar 2024 15:14:07 +0200 Subject: [PATCH 01/19] push location --- workspaces/website/src/pages/(components)/Navbar.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/workspaces/website/src/pages/(components)/Navbar.tsx b/workspaces/website/src/pages/(components)/Navbar.tsx index bf7d63f10a..c149d1344b 100644 --- a/workspaces/website/src/pages/(components)/Navbar.tsx +++ b/workspaces/website/src/pages/(components)/Navbar.tsx @@ -1,4 +1,3 @@ - import * as NavAccordian from "@ui/Layout/Navbar/NavAccordion"; import type { MainMenu } from "@starknet-io/cms-data/src/settings/main-menu"; import { NavBar } from "@ui/Layout/Navbar/Navbar"; @@ -15,6 +14,7 @@ import { IconButton } from "@ui/IconButton"; import { SiDiscord, SiGithub, SiTwitter, SiYoutube } from "react-icons/si"; import { SEOTexts } from "@starknet-io/cms-data/src/seo"; import { usePageContext } from "src/renderer/PageContextProvider"; +import Tabs from "@chakra-ui/pro-theme/src/components/tabs"; export interface Props { readonly mainMenu: MainMenu; @@ -23,8 +23,8 @@ export interface Props { readonly ALGOLIA_APP_ID: string; readonly ALGOLIA_SEARCH_API_KEY: string; }; - readonly searchSEO: SEOTexts['search']; - readonly languageCenterSeo: SEOTexts['language']; + readonly searchSEO: SEOTexts["search"]; + readonly languageCenterSeo: SEOTexts["language"]; } export default function Navbar({ @@ -88,7 +88,9 @@ export default function Navbar({ ) : item.custom_icon === "SiTwitter" ? ( ) : item.custom_icon === "SiYoutube" ? ( - + + + ) : ( ) From 8ede4daac329df36cdc57e3b5e439ba6306fa548 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 18 Mar 2024 12:27:50 +0200 Subject: [PATCH 02/19] creating banner for homepage --- .../website/src/pages/(components)/Navbar.tsx | 284 +++++++++--------- .../NavbarBanner/NavbarBanner.tsx | 55 ++++ workspaces/website/src/style/theme.ts | 61 ++-- 3 files changed, 230 insertions(+), 170 deletions(-) create mode 100644 workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx diff --git a/workspaces/website/src/pages/(components)/Navbar.tsx b/workspaces/website/src/pages/(components)/Navbar.tsx index c149d1344b..44a51c60b0 100644 --- a/workspaces/website/src/pages/(components)/Navbar.tsx +++ b/workspaces/website/src/pages/(components)/Navbar.tsx @@ -8,13 +8,13 @@ import { NavbarHeading } from "@ui/Layout/Navbar/NavbarHeading"; import { Flex } from "@chakra-ui/react"; import { getComputedLinkData } from "src/utils/utils"; import { MainSearch } from "./MainSearch"; -import React, { Fragment } from "react"; +import React, { Fragment, useState } from "react"; import { Box, ButtonGroup } from "@chakra-ui/react"; import { IconButton } from "@ui/IconButton"; import { SiDiscord, SiGithub, SiTwitter, SiYoutube } from "react-icons/si"; import { SEOTexts } from "@starknet-io/cms-data/src/seo"; import { usePageContext } from "src/renderer/PageContextProvider"; -import Tabs from "@chakra-ui/pro-theme/src/components/tabs"; +import NavbarBanner from "./NavbarBanner/NavbarBanner"; export interface Props { readonly mainMenu: MainMenu; @@ -34,161 +34,165 @@ export default function Navbar({ languageCenterSeo, }: Props) { const { locale, urlPathname: pathname } = usePageContext(); + const [isOpen, setIsOpen] = useState(true); return ( - - - - - } - seo={languageCenterSeo} - desktopNavItems={mainMenu?.items?.map( - (mainMenuItem, mainMenuItemIndex) => ( - - + + + + + } + seo={languageCenterSeo} + desktopNavItems={mainMenu?.items?.map( + (mainMenuItem, mainMenuItemIndex) => ( + - {mainMenuItem.columns?.length && - mainMenuItem.columns?.map((column, columnIndex) => ( - - {column.blocks?.map((block, blockIndex) => { - const blocks = block.items?.map((item, itemIndex) => { - const { href, label } = getComputedLinkData( - locale, - item - ); + + {mainMenuItem.columns?.length && + mainMenuItem.columns?.map((column, columnIndex) => ( + + {column.blocks?.map((block, blockIndex) => { + const blocks = block.items?.map((item, itemIndex) => { + const { href, label } = getComputedLinkData( + locale, + item + ); + + if (!href) { + return {label}; + } - if (!href) { - return {label}; - } + if (item.custom_icon) { + return ( + + ) : item.custom_icon === "SiGithub" ? ( + + ) : item.custom_icon === "SiTwitter" ? ( + + ) : item.custom_icon === "SiYoutube" ? ( + + + + ) : ( + + ) + } + /> + ); + } - if (item.custom_icon) { return ( - - ) : item.custom_icon === "SiGithub" ? ( - - ) : item.custom_icon === "SiTwitter" ? ( - - ) : item.custom_icon === "SiYoutube" ? ( - - - - ) : ( - - ) - } - /> + href={href} + > + {label} + ); - } + }); - return ( - - {label} - + const iconsOnly = block.items?.every( + (b) => b.custom_icon ); - }); - const iconsOnly = block.items?.every( - (b) => b.custom_icon - ); - - return ( - - {block.title && ( - {block.title} - )} - {iconsOnly ? ( - - {blocks} - - ) : ( - blocks - )} - - ); - })} - - ))} - - - ) - )} - mobileNavItems={ - - {mainMenu?.items?.map((mainMenuItem, mainMenuItemIndex) => { - return ( - - - - {mainMenuItem.columns?.length && - mainMenuItem.columns?.map((column, columnIndex) => ( - - {column.blocks?.map((block, blockIndex) => ( - + return ( + {block.title && ( - - {block.title} - + {block.title} )} + {iconsOnly ? ( + + {blocks} + + ) : ( + blocks + )} + + ); + })} + + ))} + + + ) + )} + mobileNavItems={ + + {mainMenu?.items?.map((mainMenuItem, mainMenuItemIndex) => { + return ( + + + + {mainMenuItem.columns?.length && + mainMenuItem.columns?.map((column, columnIndex) => ( + + {column.blocks?.map((block, blockIndex) => ( + + {block.title && ( + + {block.title} + + )} - {block.items?.map((item, itemIndex) => { - const { href, label } = getComputedLinkData( - locale, - item - ); + {block.items?.map((item, itemIndex) => { + const { href, label } = getComputedLinkData( + locale, + item + ); - if (!href) { - return {label}; - } + if (!href) { + return {label}; + } - return ( - - {label} - {/* {item.custom_icon && ( + return ( + + {label} + {/* {item.custom_icon && ( )} */} - - ); - })} - - ))} - - ))} - - - ); - })} - - } - /> - + + ); + })} + + ))} + + ))} + + + ); + })} + + } + /> + {isOpen && } + + ); } diff --git a/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx b/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx new file mode 100644 index 0000000000..f0baeb69ac --- /dev/null +++ b/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx @@ -0,0 +1,55 @@ +import { Center, Text, Button, IconButton } from "@chakra-ui/react"; +import CloseIcon from "@ui/ProvisionsPopup/CloseIcon/CloseIcon"; +import { useState } from "react"; +const text = + "Starknet is the secure scaling technology bringing Ethereum’s benefits to the world."; + +interface NavbarBannerProps { + setIsOpen: React.Dispatch>; +} +const NavbarBanner = ({ setIsOpen }: NavbarBannerProps) => { + return ( +
+
+ + {text} + + +
+ setIsOpen((prev) => !prev)} + > + + +
+ ); +}; + +export default NavbarBanner; diff --git a/workspaces/website/src/style/theme.ts b/workspaces/website/src/style/theme.ts index 542d0d4a07..b405083f55 100644 --- a/workspaces/website/src/style/theme.ts +++ b/workspaces/website/src/style/theme.ts @@ -31,16 +31,16 @@ const theme = extendTheme(proTheme, { 100: "#80DCDA", 200: "#6DDAF5", 300: "#4B9EDA", - 400: "#261F63" + 400: "#261F63", }, orange: { sunfade: "#FF7E6D", - fanta: "#FF6450" + fanta: "#FF6450", }, yellowSunfade: "#FFCD9A", bg: { main: "#F6F6F6", - 200: "#FBFBFB" + 200: "#FBFBFB", }, grey: { morning: "#CCCCCC", @@ -49,41 +49,42 @@ const theme = extendTheme(proTheme, { coolerText: "#6B7280", coolText: "#6B7280", darkText: "#363636", - lineOnDark: "#313131" + lineOnDark: "#313131", }, darkMode: { card: "#1B1B1B", bg2: "#0B0B0B", - navGrey: "#121212" + navGrey: "#121212", }, snNavy: "#0C0C4F", selected: { main: "#5C94FF", 100: "#AFCAFF", 200: "#9EBFFF", - 300: "#B2CDFF" + 300: "#B2CDFF", }, notify: { dark: "#172726", green1: "#EFFBFA", - green2: "#C4E2E0" + green2: "#C4E2E0", }, note: { dark: "#171C27", main: "#4B9EDA", 100: "#EBF2FF", - 200: "#DEE3ED" + 200: "#DEE3ED", }, important: { dark: "#231F1A", 100: "#FFF5EB", - 200: "#E9E1DA" + 200: "#E9E1DA", }, warning: { dark: "#231B1A", 100: "#FFEDEB", - 200: "#E7D5D4" - } + 200: "#E7D5D4", + }, + accent: "#A4A4EA", }, components: { Accordion: accordionTheme, @@ -110,34 +111,35 @@ const theme = extendTheme(proTheme, { Link: linkTheme, Heading: { baseStyle: { - fontWeight: "300" + fontWeight: "300", }, variants: { - ...headingTheme + ...headingTheme, }, - sizes: null}, + sizes: null, + }, Text: textTheme, - Alert: alertTheme + Alert: alertTheme, }, fonts: { heading: "Inter, sans-serif", }, fontSizes: { - "h1": "5rem", - "h2": "3rem", - "h3": "1.5rem", - "h4": "1.125rem", - "h5": "1rem", - "h6": "0.875rem", + h1: "5rem", + h2: "3rem", + h3: "1.5rem", + h4: "1.125rem", + h5: "1rem", + h6: "0.875rem", }, lineHeights: { - "h1": "100%", - "h2": "3.625rem", - "h3": "100%", - "h4": "1.375rem", - "h5": "1.188rem", - "h6": "1.063rem", - "heading6": "1.063rem", + h1: "100%", + h2: "3.625rem", + h3: "100%", + h4: "1.375rem", + h5: "1.188rem", + h6: "1.063rem", + heading6: "1.063rem", }, breakpoints: { xs: "24em", @@ -145,8 +147,7 @@ const theme = extendTheme(proTheme, { md: "48em", lg: "62em", xl: "80em", - "2xl": "96em" + "2xl": "96em", }, - }); export default theme; From 97d407e217b95d0f891df9183ef2969a450dc082 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 18 Mar 2024 12:29:36 +0200 Subject: [PATCH 03/19] fixing transparent to use just chakra --- .../website/src/components/ProvisionsPopup/ProvisionsPopup.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx index d27cc88672..c6eb20ab81 100644 --- a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx +++ b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx @@ -74,7 +74,8 @@ const ProvisionsPopup = () => { top="10px" width="28px" height="28px" - style={{ backgroundColor: "transparent" }} + bgColor="transparent" + _dark={{ bgColor: "transparent" }} onClick={onClose} > From c8c06bc0dea0d3bd0a0c36f9c91d9196767e32db Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Tue, 19 Mar 2024 10:39:33 +0200 Subject: [PATCH 04/19] editing responsiveness --- .../(components)/NavbarBanner/NavbarBanner.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx b/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx index f0baeb69ac..757dfdb36d 100644 --- a/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx +++ b/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx @@ -1,6 +1,5 @@ import { Center, Text, Button, IconButton } from "@chakra-ui/react"; import CloseIcon from "@ui/ProvisionsPopup/CloseIcon/CloseIcon"; -import { useState } from "react"; const text = "Starknet is the secure scaling technology bringing Ethereum’s benefits to the world."; @@ -10,15 +9,20 @@ interface NavbarBannerProps { const NavbarBanner = ({ setIsOpen }: NavbarBannerProps) => { return (
-
- +
+ {text} From 840653f584bb1da79f1721ebf3cdfb21f763a572 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Tue, 19 Mar 2024 13:20:10 +0200 Subject: [PATCH 05/19] trying to render only in homepage --- .../src/pages/(components)/CMSPage.tsx | 83 +++++++++++-------- .../website/src/pages/(components)/Navbar.tsx | 2 - .../NavbarBanner/NavbarBanner.tsx | 1 + 3 files changed, 49 insertions(+), 37 deletions(-) diff --git a/workspaces/website/src/pages/(components)/CMSPage.tsx b/workspaces/website/src/pages/(components)/CMSPage.tsx index 100e6dfaa6..d203f868da 100644 --- a/workspaces/website/src/pages/(components)/CMSPage.tsx +++ b/workspaces/website/src/pages/(components)/CMSPage.tsx @@ -1,4 +1,8 @@ -import type { Page as PageType } from "@starknet-io/cms-data/src/pages"; +import type { + FlexLayoutBlock, + Page as PageType, + TopLevelBlock, +} from "@starknet-io/cms-data/src/pages"; import { PageLayout } from "@ui/Layout/PageLayout"; import moment from "moment"; import { Heading } from "@ui/Typography/Heading"; @@ -10,32 +14,34 @@ import { BreadcrumbItem, BreadcrumbLink, Flex, - Divider + Divider, } from "@chakra-ui/react"; -import '@ui/CodeHighlight/code-highlight-init' +import "@ui/CodeHighlight/code-highlight-init"; import { blocksToTOC } from "./TableOfContents/blocksToTOC"; import NotFound from "@ui/NotFound/NotFound"; - +import { useState } from "react"; +import NavbarBanner from "src/pages/(components)/NavbarBanner/NavbarBanner"; type CMSPageProps = { data: PageType; env: { CLOUDFLARE_RECAPTCHA_KEY: string; - } + }; locale: string; }; -export default function CMSPage({ - data, - env, - locale, -}: CMSPageProps) { +export default function CMSPage({ data, env, locale }: CMSPageProps) { const date = data?.gitlog?.date; + const [isOpen, setIsOpen] = useState(true); if (data?.hidden_page) { return ; } + const isTypeEqualsToGroup = data?.blocks?.some( + (block) => block.type === "group" + ); return ( + {isTypeEqualsToGroup && isOpen && } - {data.title} @@ -77,38 +82,46 @@ export default function CMSPage({ - {data.show_title ? <> - - - {data.title} - - - - : null} + {data.show_title ? ( + <> + + + {data.title} + + + + + ) : null} {data.blocks?.map((block, i) => { - return ( - - ); + return ; })} } rightAside={ data.template === "content" && !data.hideToc ? ( - + ) : null } /> diff --git a/workspaces/website/src/pages/(components)/Navbar.tsx b/workspaces/website/src/pages/(components)/Navbar.tsx index 44a51c60b0..ea56794220 100644 --- a/workspaces/website/src/pages/(components)/Navbar.tsx +++ b/workspaces/website/src/pages/(components)/Navbar.tsx @@ -34,7 +34,6 @@ export default function Navbar({ languageCenterSeo, }: Props) { const { locale, urlPathname: pathname } = usePageContext(); - const [isOpen, setIsOpen] = useState(true); return ( <> @@ -191,7 +190,6 @@ export default function Navbar({ } /> - {isOpen && } ); diff --git a/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx b/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx index 757dfdb36d..426650e4c5 100644 --- a/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx +++ b/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx @@ -10,6 +10,7 @@ const NavbarBanner = ({ setIsOpen }: NavbarBannerProps) => { return (
Date: Tue, 19 Mar 2024 13:57:31 +0200 Subject: [PATCH 06/19] Add Navbar Sticky Bannet to the CMS config --- workspaces/cms-config/src/blocks.ts | 213 ++++++++++-------- workspaces/cms-data/src/pages.ts | 10 + workspaces/website/src/blocks/Block.tsx | 61 +++-- .../src/pages/(components)/CMSPage.tsx | 13 +- .../website/src/pages/(components)/Navbar.tsx | 2 +- .../NavbarStickyBanner.tsx} | 24 +- 6 files changed, 178 insertions(+), 145 deletions(-) rename workspaces/website/src/pages/(components)/{NavbarBanner/NavbarBanner.tsx => NavbarStickyBanner/NavbarStickyBanner.tsx} (76%) diff --git a/workspaces/cms-config/src/blocks.ts b/workspaces/cms-config/src/blocks.ts index 993bd65ec8..52e3b6e86a 100644 --- a/workspaces/cms-config/src/blocks.ts +++ b/workspaces/cms-config/src/blocks.ts @@ -56,7 +56,7 @@ export const ambassadorTags = [ label: "Tag", name: "tag", widget: "select", - options: ["Content generator", "Event organizer", "Event speaker"] + options: ["Content generator", "Event organizer", "Event speaker"], }, ] satisfies CmsField[]; @@ -89,19 +89,19 @@ export const ambassador = [ label: "Website url", name: "website", widget: "string", - crowdin: false + crowdin: false, }, { label: "Twitter handle", name: "twitter", widget: "string", - crowdin: false + crowdin: false, }, { label: "Discord", name: "discord", widget: "string", - crowdin: false + crowdin: false, }, { label: "Tags", @@ -111,7 +111,7 @@ export const ambassador = [ crowdin: true, required: false, index_file: "", - meta: true + meta: true, }, ] satisfies CmsField[]; @@ -141,7 +141,7 @@ export const cardListItem = [ required: false, widget: "string", index_file: "", - meta: false + meta: false, }, { label: "Twitter", @@ -149,7 +149,7 @@ export const cardListItem = [ required: false, widget: "string", index_file: "", - meta: false + meta: false, }, { label: "Start date time", @@ -157,7 +157,7 @@ export const cardListItem = [ required: false, widget: "string", index_file: "", - meta: false + meta: false, }, { label: "Location", @@ -165,7 +165,7 @@ export const cardListItem = [ required: false, widget: "string", index_file: "", - meta: false + meta: false, }, { label: "City", @@ -173,7 +173,7 @@ export const cardListItem = [ required: false, widget: "string", index_file: "", - meta: false + meta: false, }, { label: "Country", @@ -181,7 +181,7 @@ export const cardListItem = [ required: false, widget: "string", index_file: "", - meta: false + meta: false, }, { label: "Discord", @@ -189,7 +189,7 @@ export const cardListItem = [ required: false, widget: "string", index_file: "", - meta: false + meta: false, }, { label: "Type list", @@ -208,7 +208,7 @@ export const cardListItem = [ name: "url", widget: "string", crowdin: false, - } + }, ], }, { @@ -217,7 +217,7 @@ export const cardListItem = [ required: false, widget: "string", index_file: "", - meta: false + meta: false, }, { label: "Recap", @@ -242,35 +242,35 @@ export const cardListItem = [ name: "isExternal", widget: "boolean", crowdin: false, - } + }, ], index_file: "", - meta: false + meta: false, }, ] satisfies CmsField[]; const videoChapterFields = [ { crowdin: true, - label: 'Title', - name: 'title', + label: "Title", + name: "title", required: true, - widget: 'string' + widget: "string", }, { crowdin: true, - label: 'Description', - name: 'description', + label: "Description", + name: "description", required: true, - widget: 'string' + widget: "string", }, { crowdin: true, - label: 'Content', - name: 'content', + label: "Content", + name: "content", required: true, - widget: 'markdown' - } + widget: "markdown", + }, ] satisfies CmsField[]; export const blocks = [ @@ -298,7 +298,7 @@ export const blocks = [ { name: "description", widget: "string", - crowdin: true + crowdin: true, }, ], }, @@ -332,7 +332,7 @@ export const blocks = [ { name: "title", widget: "string", - crowdin: true + crowdin: true, }, { name: "link", @@ -364,7 +364,7 @@ export const blocks = [ { label: "Icon link card", value: "icon_link_card" }, { label: "Dapp", value: "dapp" }, { label: "Large card", value: "large_card" }, - { label: "Community card", value: "community_card" } + { label: "Community card", value: "community_card" }, ], }, { @@ -375,7 +375,7 @@ export const blocks = [ required: false, options: [ { label: "Large", value: "large" }, - { label: "Small", value: "small" } + { label: "Small", value: "small" }, ], }, { @@ -388,12 +388,12 @@ export const blocks = [ { name: "title", widget: "string", - crowdin: true + crowdin: true, }, { name: "description", widget: "string", - crowdin: true + crowdin: true, }, { name: "link", @@ -402,7 +402,7 @@ export const blocks = [ }, { name: "icon", - widget: "image" + widget: "image", }, { name: "color", @@ -416,13 +416,14 @@ export const blocks = [ "cyan", "orange", "pink", - "grey" + "grey", ], default: "orange", }, { name: "columns", - label: "Columns (number of cards per row, works only for icon_link_card)", + label: + "Columns (number of cards per row, works only for icon_link_card)", widget: "select", default: "4", required: false, @@ -435,7 +436,7 @@ export const blocks = [ default: "left", required: false, options: ["left", "right", "vertical"], - } + }, ], }, { @@ -446,9 +447,9 @@ export const blocks = [ { name: "videoId", widget: "string", - crowdin: true - } - ] + crowdin: true, + }, + ], }, { name: "ambassadors_list", @@ -460,7 +461,7 @@ export const blocks = [ name: "title", required: false, widget: "string", - crowdin: true + crowdin: true, }, { label: "Ambassador", @@ -470,9 +471,9 @@ export const blocks = [ crowdin: true, required: true, index_file: "", - meta: true + meta: true, }, - ] + ], }, { name: "card_list", @@ -484,14 +485,14 @@ export const blocks = [ name: "title", required: false, widget: "string", - crowdin: true + crowdin: true, }, { label: "Description", name: "description", required: false, widget: "string", - crowdin: true + crowdin: true, }, { name: "randomize", @@ -508,9 +509,9 @@ export const blocks = [ crowdin: true, required: true, index_file: "", - meta: true + meta: true, }, - ] + ], }, { name: "hero", @@ -520,12 +521,12 @@ export const blocks = [ { name: "title", widget: "string", - crowdin: true + crowdin: true, }, { name: "description", widget: "string", - crowdin: true + crowdin: true, }, { name: "variant", @@ -549,21 +550,21 @@ export const blocks = [ label: "Button text", required: false, widget: "string", - crowdin: true + crowdin: true, }, { name: "buttonUrl", label: "Button url", required: false, widget: "string", - crowdin: false + crowdin: false, }, { name: "leftBoxMaxWidth", label: "Left box max width", required: false, widget: "number", - crowdin: false + crowdin: false, }, ], }, @@ -577,7 +578,7 @@ export const blocks = [ label: "Heading", required: false, widget: "string", - crowdin: true + crowdin: true, }, { name: "listSize", @@ -629,13 +630,13 @@ export const blocks = [ name: "label", label: "Label", widget: "string", - crowdin: true + crowdin: true, }, { name: "boldLabel", label: "Bold Label", widget: "string", - crowdin: true + crowdin: true, }, ], }, @@ -648,13 +649,13 @@ export const blocks = [ name: "url", label: "URL", widget: "string", - crowdin: false + crowdin: false, }, { name: "title", label: "Title", widget: "string", - crowdin: true + crowdin: true, }, { name: "displayTitle", @@ -678,7 +679,7 @@ export const blocks = [ label: "Heading", required: false, widget: "string", - crowdin: true + crowdin: true, }, { name: "blocks", @@ -689,7 +690,7 @@ export const blocks = [ name: "label", label: "Label", widget: "string", - crowdin: true + crowdin: true, }, { name: "body", @@ -699,7 +700,8 @@ export const blocks = [ ], }, ], - }, { + }, + { name: "video_section", label: "Education video section", widget: "object", @@ -720,52 +722,54 @@ export const blocks = [ }, { crowdin: true, - label: 'Chapter 1', - name: 'scaling-eth', - widget: 'object', - fields: videoChapterFields + label: "Chapter 1", + name: "scaling-eth", + widget: "object", + fields: videoChapterFields, }, { crowdin: true, - label: 'Chapter 2', - name: 'sequencer', - widget: 'object', - fields: videoChapterFields + label: "Chapter 2", + name: "sequencer", + widget: "object", + fields: videoChapterFields, }, { crowdin: true, - label: 'Chapter 3', - name: 'prover', - widget: 'object', - fields: videoChapterFields + label: "Chapter 3", + name: "prover", + widget: "object", + fields: videoChapterFields, }, { crowdin: true, - label: 'Chapter 4', - name: 'eth-settlement', - widget: 'object', - fields: videoChapterFields - } - ] - }, { + label: "Chapter 4", + name: "eth-settlement", + widget: "object", + fields: videoChapterFields, + }, + ], + }, + { name: "newsletter_popup", label: "Newsletter Popup", widget: "object", fields: [ { crowdin: true, - label: 'Title', - name: 'title', - widget: 'string' + label: "Title", + name: "title", + widget: "string", }, { crowdin: true, - label: 'Description', - name: 'description', - widget: 'string' + label: "Description", + name: "description", + widget: "string", }, - ] - }, { + ], + }, + { name: "ordered_block", label: "Ordered Block", widget: "object", @@ -778,7 +782,7 @@ export const blocks = [ { name: "title", widget: "string", - crowdin: true + crowdin: true, }, { name: "body", @@ -789,6 +793,33 @@ export const blocks = [ }, ], }, + { + name: "nav_sticky_banner", + label: "Sticky Banner Under Nav", + widget: "object", + fields: [ + { + name: "text", + widget: "string", + crowdin: true, + }, + { + name: "buttonText", + widget: "string", + crowdin: true, + }, + { + name: "buttonLink", + widget: "string", + crowdin: true, + }, + { + name: "isActive", + widget: "boolean", + default: false, + }, + ], + }, ] satisfies CmsFieldList["types"]; const flexLayout = { @@ -820,7 +851,7 @@ const flexLayout = { name: "heading", required: false, widget: "string", - crowdin: true + crowdin: true, }, { name: "heading_variant", @@ -882,15 +913,15 @@ export const topLevelBlocks = [ label: "Heading", name: "heading", widget: "string", - crowdin: true + crowdin: true, }, { label: "Heading variant", name: "heading_variant", widget: "select", options: ["h2", "h3", "h4", "h5", "h6"], - default: 'h2', - crowdin: false + default: "h2", + crowdin: false, }, { name: "blocks", diff --git a/workspaces/cms-data/src/pages.ts b/workspaces/cms-data/src/pages.ts index e156a25d72..44649706cd 100644 --- a/workspaces/cms-data/src/pages.ts +++ b/workspaces/cms-data/src/pages.ts @@ -133,6 +133,15 @@ export interface HomeHeroBlock { readonly heroText: string; }; } + +export interface NavStickyBannerBlock { + readonly type: "nav_sticky_banner"; + readonly text: string + readonly buttonText: string + readonly buttonLink: string + readonly isActive: boolean +} + export interface LinkListBlock { readonly type: "link_list"; readonly heading?: string; @@ -183,6 +192,7 @@ export type Block = | YoutubeBlock | HeroBlock | HomeHeroBlock + | NavStickyBannerBlock | LinkListBlock | PageHeaderBlock | AccordionBlock diff --git a/workspaces/website/src/blocks/Block.tsx b/workspaces/website/src/blocks/Block.tsx index e15714634a..5289c7e6b8 100644 --- a/workspaces/website/src/blocks/Block.tsx +++ b/workspaces/website/src/blocks/Block.tsx @@ -21,40 +21,41 @@ import { HeadingContainer } from "./HeadingContainer"; import VideoSectionBlock from "./VideoSectionBlock"; import { NewsletterCard } from "@ui/Card/NewsletterCard"; import { YoutubePlayer } from "@ui/YoutubePlayer/YoutubePlayer"; +import NavbarStickyBanner from "../pages/(components)/NavbarStickyBanner/NavbarStickyBanner"; interface Props { disallowH1?: boolean; readonly block: TopLevelBlock; env: { CLOUDFLARE_RECAPTCHA_KEY: string; - } + }; readonly locale: string; } -export function Block({ disallowH1, block, env, locale }: Props): JSX.Element | null { +export function Block({ + disallowH1, + block, + env, + locale, +}: Props): JSX.Element | null { if (block.type === "basic_card") { return ; } else if (block.type === "container") { return ( {block.blocks.map((block, i) => ( - + ))} ); } else if (block.type === "image_icon_link_card") { return ; } else if (block.type === "youtube") { - return + return ; } else if (block.type === "newsletter_popup") { return ; } else if (block.type === "markdown") { - return ; + return ; } else if (block.type === "ambassadors_list") { return ; } else if (block.type === "community_events") { @@ -76,12 +77,7 @@ export function Block({ disallowH1, block, env, locale }: Props): JSX.Element | headingVariant={block.heading_variant} > {block.blocks.map((block, i) => ( - + ))} ); @@ -121,25 +117,18 @@ export function Block({ disallowH1, block, env, locale }: Props): JSX.Element | return ( {block.blocks.map((block, i) => ( - + ))} ); - }else if (block.type === "heading_container") { + } else if (block.type === "heading_container") { return ( - + {block.blocks.map((block, i) => ( - + ))} ); @@ -161,6 +150,14 @@ export function Block({ disallowH1, block, env, locale }: Props): JSX.Element | ); return ; + } else if (block.type === "nav_sticky_banner") { + return block.isActive ? ( + + ) : null; } else if (block.type === "card_list") { return ( ); } else if (block.type === "video_section") { - return ( - - ) + return ; } else { // this will report type error if there is unhandled block.type block satisfies never; diff --git a/workspaces/website/src/pages/(components)/CMSPage.tsx b/workspaces/website/src/pages/(components)/CMSPage.tsx index d203f868da..90dee1cae8 100644 --- a/workspaces/website/src/pages/(components)/CMSPage.tsx +++ b/workspaces/website/src/pages/(components)/CMSPage.tsx @@ -1,8 +1,4 @@ -import type { - FlexLayoutBlock, - Page as PageType, - TopLevelBlock, -} from "@starknet-io/cms-data/src/pages"; +import type { Page as PageType } from "@starknet-io/cms-data/src/pages"; import { PageLayout } from "@ui/Layout/PageLayout"; import moment from "moment"; import { Heading } from "@ui/Typography/Heading"; @@ -19,8 +15,6 @@ import { import "@ui/CodeHighlight/code-highlight-init"; import { blocksToTOC } from "./TableOfContents/blocksToTOC"; import NotFound from "@ui/NotFound/NotFound"; -import { useState } from "react"; -import NavbarBanner from "src/pages/(components)/NavbarBanner/NavbarBanner"; type CMSPageProps = { data: PageType; env: { @@ -30,18 +24,13 @@ type CMSPageProps = { }; export default function CMSPage({ data, env, locale }: CMSPageProps) { const date = data?.gitlog?.date; - const [isOpen, setIsOpen] = useState(true); if (data?.hidden_page) { return ; } - const isTypeEqualsToGroup = data?.blocks?.some( - (block) => block.type === "group" - ); return ( - {isTypeEqualsToGroup && isOpen && } >; +interface NavbarStickyBannerProps { + text: string; + buttonText: string; + buttonLink: string; } -const NavbarBanner = ({ setIsOpen }: NavbarBannerProps) => { + +const NavbarStickyBanner = ({ + text, + buttonText, + buttonLink, +}: NavbarStickyBannerProps) => { return (
{ {text}
{ ); }; -export default NavbarBanner; +export default NavbarStickyBanner; From 4e8596a781ddad857978ca019e015e5609366e9d Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Tue, 19 Mar 2024 14:36:20 +0200 Subject: [PATCH 07/19] delete navBar changes --- .../website/src/pages/(components)/Navbar.tsx | 281 +++++++++--------- 1 file changed, 139 insertions(+), 142 deletions(-) diff --git a/workspaces/website/src/pages/(components)/Navbar.tsx b/workspaces/website/src/pages/(components)/Navbar.tsx index 12f1d0c20a..d34bd8d8f5 100644 --- a/workspaces/website/src/pages/(components)/Navbar.tsx +++ b/workspaces/website/src/pages/(components)/Navbar.tsx @@ -8,13 +8,12 @@ import { NavbarHeading } from "@ui/Layout/Navbar/NavbarHeading"; import { Flex } from "@chakra-ui/react"; import { getComputedLinkData } from "src/utils/utils"; import { MainSearch } from "./MainSearch"; -import React, { Fragment, useState } from "react"; +import React, { Fragment } from "react"; import { Box, ButtonGroup } from "@chakra-ui/react"; import { IconButton } from "@ui/IconButton"; import { SiDiscord, SiGithub, SiTwitter, SiYoutube } from "react-icons/si"; import { SEOTexts } from "@starknet-io/cms-data/src/seo"; import { usePageContext } from "src/renderer/PageContextProvider"; -import NavbarStickyBanner from "./NavbarStickyBanner/NavbarStickyBanner"; export interface Props { readonly mainMenu: MainMenu; @@ -36,161 +35,159 @@ export default function Navbar({ const { locale, urlPathname: pathname } = usePageContext(); return ( - <> - - - - - } - seo={languageCenterSeo} - desktopNavItems={mainMenu?.items?.map( - (mainMenuItem, mainMenuItemIndex) => ( - + + + + } + seo={languageCenterSeo} + desktopNavItems={mainMenu?.items?.map( + (mainMenuItem, mainMenuItemIndex) => ( + + - - {mainMenuItem.columns?.length && - mainMenuItem.columns?.map((column, columnIndex) => ( - - {column.blocks?.map((block, blockIndex) => { - const blocks = block.items?.map((item, itemIndex) => { - const { href, label } = getComputedLinkData( - locale, - item - ); - - if (!href) { - return {label}; - } + {mainMenuItem.columns?.length && + mainMenuItem.columns?.map((column, columnIndex) => ( + + {column.blocks?.map((block, blockIndex) => { + const blocks = block.items?.map((item, itemIndex) => { + const { href, label } = getComputedLinkData( + locale, + item + ); - if (item.custom_icon) { - return ( - - ) : item.custom_icon === "SiGithub" ? ( - - ) : item.custom_icon === "SiTwitter" ? ( - - ) : item.custom_icon === "SiYoutube" ? ( - - - - ) : ( - - ) - } - /> - ); - } + if (!href) { + return {label}; + } + if (item.custom_icon) { return ( - - {label} - + key={itemIndex} + as="a" + aria-label={label!} + icon={ + item.custom_icon === "SiDiscord" ? ( + + ) : item.custom_icon === "SiGithub" ? ( + + ) : item.custom_icon === "SiTwitter" ? ( + + ) : item.custom_icon === "SiYoutube" ? ( + + + + ) : ( + + ) + } + /> ); - }); + } - const iconsOnly = block.items?.every( - (b) => b.custom_icon + return ( + + {label} + ); + }); - return ( - + const iconsOnly = block.items?.every( + (b) => b.custom_icon + ); + + return ( + + {block.title && ( + {block.title} + )} + {iconsOnly ? ( + + {blocks} + + ) : ( + blocks + )} + + ); + })} + + ))} + + + ) + )} + mobileNavItems={ + + {mainMenu?.items?.map((mainMenuItem, mainMenuItemIndex) => { + return ( + + + + {mainMenuItem.columns?.length && + mainMenuItem.columns?.map((column, columnIndex) => ( + + {column.blocks?.map((block, blockIndex) => ( + {block.title && ( - {block.title} + + {block.title} + )} - {iconsOnly ? ( - - {blocks} - - ) : ( - blocks - )} - - ); - })} - - ))} - - - ) - )} - mobileNavItems={ - - {mainMenu?.items?.map((mainMenuItem, mainMenuItemIndex) => { - return ( - - - - {mainMenuItem.columns?.length && - mainMenuItem.columns?.map((column, columnIndex) => ( - - {column.blocks?.map((block, blockIndex) => ( - - {block.title && ( - - {block.title} - - )} - {block.items?.map((item, itemIndex) => { - const { href, label } = getComputedLinkData( - locale, - item - ); + {block.items?.map((item, itemIndex) => { + const { href, label } = getComputedLinkData( + locale, + item + ); - if (!href) { - return {label}; - } + if (!href) { + return {label}; + } - return ( - - {label} - {/* {item.custom_icon && ( + return ( + + {label} + {/* {item.custom_icon && ( )} */} - - ); - })} - - ))} - - ))} - - - ); - })} - - } - /> - - + + ); + })} + + ))} + + ))} + + + ); + })} + + } + /> + ); } From 81a8b774fff2e6d39431499c99d7a0efd88f4e34 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Tue, 19 Mar 2024 15:27:21 +0200 Subject: [PATCH 08/19] editing cms to homepage Navbar --- _data/pages/home.yml | 5 ++ workspaces/cms-config/src/blocks.ts | 6 ++- workspaces/cms-data/src/pages.ts | 47 +++++++++++-------- .../NavbarStickyBanner/NavbarStickyBanner.tsx | 7 ++- 4 files changed, 44 insertions(+), 21 deletions(-) diff --git a/_data/pages/home.yml b/_data/pages/home.yml index a3b5385ad5..76a26edff8 100644 --- a/_data/pages/home.yml +++ b/_data/pages/home.yml @@ -5,6 +5,11 @@ template: landing breadcrumbs: false page_last_updated: false blocks: + - type: nav_sticky_banner + text: Starknet is the secure scaling technology bringing Ethereum’s benefits to the world. + buttonText: see more + buttonLink: / + isActive: true - type: group blocks: - type: home_hero diff --git a/workspaces/cms-config/src/blocks.ts b/workspaces/cms-config/src/blocks.ts index 52e3b6e86a..3db225a132 100644 --- a/workspaces/cms-config/src/blocks.ts +++ b/workspaces/cms-config/src/blocks.ts @@ -800,23 +800,27 @@ export const blocks = [ fields: [ { name: "text", + label: "Text", widget: "string", crowdin: true, }, { name: "buttonText", + label: "ButtonText", widget: "string", crowdin: true, }, { name: "buttonLink", + label: "ButtonText", widget: "string", crowdin: true, }, { name: "isActive", + label: "IsActive", widget: "boolean", - default: false, + default: true, }, ], }, diff --git a/workspaces/cms-data/src/pages.ts b/workspaces/cms-data/src/pages.ts index 44649706cd..f29c8c230c 100644 --- a/workspaces/cms-data/src/pages.ts +++ b/workspaces/cms-data/src/pages.ts @@ -1,6 +1,10 @@ import { LinkData } from "./settings/main-menu"; import { defaultLocale } from "./i18n/config"; -import { getFirst, getJSON, getShuffledArray } from "@starknet-io/cms-utils/src/index"; +import { + getFirst, + getJSON, + getShuffledArray, +} from "@starknet-io/cms-utils/src/index"; import type { Meta } from "@starknet-io/cms-utils/src/index"; export interface MarkdownBlock { @@ -136,10 +140,10 @@ export interface HomeHeroBlock { export interface NavStickyBannerBlock { readonly type: "nav_sticky_banner"; - readonly text: string - readonly buttonText: string - readonly buttonLink: string - readonly isActive: boolean + readonly text: string; + readonly buttonText: string; + readonly buttonLink: string; + readonly isActive: boolean; } export interface LinkListBlock { @@ -161,17 +165,17 @@ export interface OrderedBlock { } export interface ChapterInfo { - content: MarkdownBlock['body']; + content: MarkdownBlock["body"]; subtitle: string; title: string; -}; +} export interface VideoSectionBlock { readonly type: "video_section"; - readonly 'scaling-eth': ChapterInfo; + readonly "scaling-eth": ChapterInfo; readonly sequencer: ChapterInfo; readonly prover: ChapterInfo; - readonly 'eth-settlement': ChapterInfo; + readonly "eth-settlement": ChapterInfo; readonly chapterDescriptionFullWidth: boolean; readonly playlistOnBottom: boolean; } @@ -228,7 +232,12 @@ export interface HeadingContainerBlock { readonly blocks: readonly Block[]; } -export type TopLevelBlock = Block | FlexLayoutBlock | GroupBlock | Container | HeadingContainerBlock; +export type TopLevelBlock = + | Block + | FlexLayoutBlock + | GroupBlock + | Container + | HeadingContainerBlock; export interface Page extends Meta { readonly id: string; @@ -248,20 +257,19 @@ export interface Page extends Meta { } const getPageWithRandomizedData = (data: Page): Page => { - const randomizedData = {...data} + const randomizedData = { ...data }; randomizedData.blocks?.forEach((block: TopLevelBlock) => { - - if (block.type === 'link_list' && block.randomize) { + if (block.type === "link_list" && block.randomize) { //@ts-expect-error block.blocks = getShuffledArray(block.blocks || []); - } else if (block.type === 'card_list' && block.randomize) { + } else if (block.type === "card_list" && block.randomize) { //@ts-expect-error block.card_list_items = getShuffledArray(block.card_list_items || []); } - }) + }); - return randomizedData -} + return randomizedData; +}; export async function getPageBySlug( slug: string, locale: string, @@ -275,7 +283,7 @@ export async function getPageBySlug( ) ); - return getPageWithRandomizedData(data) + return getPageWithRandomizedData(data); } catch (cause) { throw new Error(`Page not found! ${slug}`, { cause, @@ -291,7 +299,8 @@ export async function getPageById( try { return await getFirst( ...[locale, defaultLocale].map( - (value) => async () => getJSON("data/pages/" + value + "/" + id, context) + (value) => async () => + getJSON("data/pages/" + value + "/" + id, context) ) ); } catch (cause) { diff --git a/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx b/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx index 1bac899019..26cda8ce90 100644 --- a/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx +++ b/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx @@ -1,6 +1,7 @@ import { Center, Text, IconButton } from "@chakra-ui/react"; import { Button } from "@ui/Button"; import CloseIcon from "@ui/ProvisionsPopup/CloseIcon/CloseIcon"; +import { useState } from "react"; interface NavbarStickyBannerProps { text: string; @@ -13,13 +14,17 @@ const NavbarStickyBanner = ({ buttonText, buttonLink, }: NavbarStickyBannerProps) => { + const [isOpen, setIsOpen] = useState(true); return (
Date: Tue, 19 Mar 2024 15:43:13 +0200 Subject: [PATCH 09/19] change label --- workspaces/cms-config/src/blocks.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/workspaces/cms-config/src/blocks.ts b/workspaces/cms-config/src/blocks.ts index 3db225a132..9d06d6d221 100644 --- a/workspaces/cms-config/src/blocks.ts +++ b/workspaces/cms-config/src/blocks.ts @@ -812,7 +812,7 @@ export const blocks = [ }, { name: "buttonLink", - label: "ButtonText", + label: "buttonLink", widget: "string", crowdin: true, }, From a5474744c8210d0fe1219ea12193708d9266c970 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Wed, 20 Mar 2024 14:04:43 +0200 Subject: [PATCH 10/19] adding gmt event --- .../NavbarStickyBanner/NavbarStickyBanner.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx b/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx index 26cda8ce90..baae03a4ef 100644 --- a/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx +++ b/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx @@ -15,6 +15,18 @@ const NavbarStickyBanner = ({ buttonLink, }: NavbarStickyBannerProps) => { const [isOpen, setIsOpen] = useState(true); + const gtmEvent = (target: string) => + window.gtag?.("event", target, { event_category: "engagement" }); + + const onClose = (event: React.MouseEvent) => { + event.stopPropagation(); + gtmEvent("Navbar_banner_close"); + }; + + const onReadMore = (event: React.MouseEvent) => { + event.stopPropagation(); + gtmEvent("Navbar_banner_read_more"); + }; return (
@@ -79,10 +88,7 @@ const NavbarStickyBanner = ({ borderColor: "transparent", _hover: { bgColor: "transparent" }, }} - onClick={(e) => { - onClose(e); - setIsOpen((prev) => !prev); - }} + onClick={onClose} > From a458991dd132f378488ea96beb4fef8edb4d5150 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Wed, 20 Mar 2024 17:02:30 +0200 Subject: [PATCH 12/19] fixing with ref --- .../NavbarStickyBanner/NavbarStickyBanner.tsx | 97 ++++++++++--------- 1 file changed, 51 insertions(+), 46 deletions(-) diff --git a/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx b/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx index 9dc6be6a94..d80a918745 100644 --- a/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx +++ b/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx @@ -1,7 +1,7 @@ import { Center, Text, IconButton } from "@chakra-ui/react"; import { Button } from "@ui/Button"; import CloseIcon from "@ui/ProvisionsPopup/CloseIcon/CloseIcon"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; interface NavbarStickyBannerProps { text: string; @@ -15,7 +15,7 @@ const NavbarStickyBanner = ({ buttonLink, }: NavbarStickyBannerProps) => { const [isOpen, setIsOpen] = useState(true); - + const centerRef = useRef(null); const gtmEvent = (target: string) => window.gtag?.("event", target, { event_category: "engagement" }); @@ -32,11 +32,12 @@ const NavbarStickyBanner = ({ document.getElementById("navbar_banner")?.offsetHeight; const div = document.getElementById("home_hero"); if (!div || !componentHeight) return; - div.style.marginTop = `${componentHeight}`; - }, []); + div.style.marginTop = `${componentHeight}px`; + }, [centerRef]); return ( ); }; From ad85592bb9c218e129c4726b692cc0833dd1595f Mon Sep 17 00:00:00 2001 From: Igal Steklov Date: Thu, 21 Mar 2024 11:08:10 +0200 Subject: [PATCH 13/19] Move the Sticky Banner to the Nav, and make it able to render page's blocks with placement of Nav. --- workspaces/website/src/blocks/Block.tsx | 300 ++++++++++-------- .../src/components/Layout/Navbar/Navbar.tsx | 10 +- .../website/src/pages/(components)/Navbar.tsx | 19 +- .../NavbarStickyBanner/NavbarStickyBanner.tsx | 28 +- workspaces/website/src/renderer/PageShell.tsx | 4 + workspaces/website/src/renderer/types.ts | 13 +- 6 files changed, 211 insertions(+), 163 deletions(-) diff --git a/workspaces/website/src/blocks/Block.tsx b/workspaces/website/src/blocks/Block.tsx index 5289c7e6b8..431aaebca3 100644 --- a/workspaces/website/src/blocks/Block.tsx +++ b/workspaces/website/src/blocks/Block.tsx @@ -23,7 +23,13 @@ import { NewsletterCard } from "@ui/Card/NewsletterCard"; import { YoutubePlayer } from "@ui/YoutubePlayer/YoutubePlayer"; import NavbarStickyBanner from "../pages/(components)/NavbarStickyBanner/NavbarStickyBanner"; +export enum BlockPlacements { + DEFAULT = "DEFAULT", + NAVBAR = "NAVBAR", +} + interface Props { + placement?: BlockPlacements; disallowH1?: boolean; readonly block: TopLevelBlock; env: { @@ -33,145 +39,175 @@ interface Props { } export function Block({ + placement = BlockPlacements.DEFAULT, disallowH1, block, env, locale, }: Props): JSX.Element | null { - if (block.type === "basic_card") { - return ; - } else if (block.type === "container") { - return ( - - {block.blocks.map((block, i) => ( - - ))} - - ); - } else if (block.type === "image_icon_link_card") { - return ; - } else if (block.type === "youtube") { - return ; - } else if (block.type === "newsletter_popup") { - return ; - } else if (block.type === "markdown") { - return ; - } else if (block.type === "ambassadors_list") { - return ; - } else if (block.type === "community_events") { - return ( - - ); - } else if (block.type === "flex_layout") { - return ( - - {block.blocks.map((block, i) => ( - - ))} - - ); - } else if (block.type === "link_list") { - return ; - } else if (block.type === "accordion") { - return ( - - {block.blocks?.map((block, i) => ( - - - - ))} - - ); - } else if (block.type === "ordered_block") { - let blocks = Array.from(block.blocks || []).sort((a, b) => { - return a.title.localeCompare(b.title); - }); - - return ( - - {blocks.map((block: any, i: number) => { + switch (placement) { + case BlockPlacements.DEFAULT: + switch (block.type) { + case "basic_card": + return ; + + case "container": + return ( + + {block.blocks.map((block, i) => ( + + ))} + + ); + + case "image_icon_link_card": + return ; + + case "youtube": + return ; + + case "newsletter_popup": + return ; + + case "markdown": + return ; + + case "ambassadors_list": + return ; + + case "community_events": + return ( + + ); + + case "flex_layout": + return ( + + {block.blocks.map((block, i) => ( + + ))} + + ); + + case "link_list": + return ; + + case "accordion": + return ( + + {block.blocks?.map((block, i) => ( + + + + ))} + + ); + + case "ordered_block": + let blocks = Array.from(block.blocks || []).sort((a, b) => { + return a.title.localeCompare(b.title); + }); + return ( + + {blocks.map((block: any, i: number) => { + return ( + + + + ); + })} + + ); + + case "page_header": + return ( + + ); + + case "group": + return ( + + {block.blocks.map((block, i) => ( + + ))} + + ); + + case "heading_container": + return ( + + {block.blocks.map((block, i) => ( + + ))} + + ); + + case "hero": + return ( + + ); + + case "home_hero": + const pageContext = usePageContext(); + const homeSEO = useAsync(["getBlockExplorers", locale], () => + getHomeSEO(locale, pageContext.context) + ); + + return ; + + case "card_list": + return ( + + ); + case "video_section": + return ; + } + break; + + //======================================== + + case BlockPlacements.NAVBAR: + switch (block.type) { + case "nav_sticky_banner": + if (!block.isActive) return null; return ( - - - + ); - })} - - ); - } else if (block.type === "page_header") { - return ( - - ); - } else if (block.type === "group") { - return ( - - {block.blocks.map((block, i) => ( - - ))} - - ); - } else if (block.type === "heading_container") { - return ( - - {block.blocks.map((block, i) => ( - - ))} - - ); - } else if (block.type === "hero") { - return ( - - ); - } else if (block.type === "home_hero") { - const pageContext = usePageContext(); - const homeSEO = useAsync(["getBlockExplorers", locale], () => - getHomeSEO(locale, pageContext.context) - ); - - return ; - } else if (block.type === "nav_sticky_banner") { - return block.isActive ? ( - - ) : null; - } else if (block.type === "card_list") { - return ( - - ); - } else if (block.type === "video_section") { - return ; - } else { - // this will report type error if there is unhandled block.type - block satisfies never; + } + break; } return null; diff --git a/workspaces/website/src/components/Layout/Navbar/Navbar.tsx b/workspaces/website/src/components/Layout/Navbar/Navbar.tsx index 0a2363a85e..d0eb3017ff 100644 --- a/workspaces/website/src/components/Layout/Navbar/Navbar.tsx +++ b/workspaces/website/src/components/Layout/Navbar/Navbar.tsx @@ -23,7 +23,7 @@ type Props = { mobileNavItems?: React.ReactNode; languageSwitcher?: React.ReactNode; search?: React.ReactNode; - seo: SEOTexts['language']; + seo: SEOTexts["language"]; }; declare global { @@ -37,7 +37,7 @@ export const NavBar = ({ mobileNavItems, languageSwitcher, search, - seo + seo, }: Props) => { const { isOpen, onOpen, onClose } = useDisclosure(); const menuButtonRef = React.useRef(null); @@ -52,11 +52,11 @@ export const NavBar = ({ toggleColorMode(); if (typeof window !== "undefined" && window.gtag) { window.gtag("event", "theme_change", { - 'event_category': "engagement", - 'value': colorMode + event_category: "engagement", + value: colorMode, }); } - } + }; return ( diff --git a/workspaces/website/src/pages/(components)/Navbar.tsx b/workspaces/website/src/pages/(components)/Navbar.tsx index d34bd8d8f5..5bccfafbd5 100644 --- a/workspaces/website/src/pages/(components)/Navbar.tsx +++ b/workspaces/website/src/pages/(components)/Navbar.tsx @@ -5,15 +5,16 @@ import { MenuItemWithDropdown } from "@ui/Layout/Navbar/MenuItemWithDropdown"; import { NavbarContainer } from "@ui/Layout/Navbar/NavbarContainer"; import { NavBarLink } from "@ui/Layout/Navbar/NavBarLink"; import { NavbarHeading } from "@ui/Layout/Navbar/NavbarHeading"; -import { Flex } from "@chakra-ui/react"; +import { Box, ButtonGroup, Flex } from "@chakra-ui/react"; import { getComputedLinkData } from "src/utils/utils"; import { MainSearch } from "./MainSearch"; import React, { Fragment } from "react"; -import { Box, ButtonGroup } from "@chakra-ui/react"; import { IconButton } from "@ui/IconButton"; import { SiDiscord, SiGithub, SiTwitter, SiYoutube } from "react-icons/si"; import { SEOTexts } from "@starknet-io/cms-data/src/seo"; import { usePageContext } from "src/renderer/PageContextProvider"; +import type { TopLevelBlock } from "@starknet-io/cms-data/src/pages"; +import { Block, BlockPlacements } from "../../blocks/Block"; export interface Props { readonly mainMenu: MainMenu; @@ -21,9 +22,11 @@ export interface Props { readonly ALGOLIA_INDEX: string; readonly ALGOLIA_APP_ID: string; readonly ALGOLIA_SEARCH_API_KEY: string; + readonly CLOUDFLARE_RECAPTCHA_KEY: string; }; readonly searchSEO: SEOTexts["search"]; readonly languageCenterSeo: SEOTexts["language"]; + readonly pageBlocks?: TopLevelBlock[]; } export default function Navbar({ @@ -31,6 +34,7 @@ export default function Navbar({ env, searchSEO, languageCenterSeo, + pageBlocks, }: Props) { const { locale, urlPathname: pathname } = usePageContext(); @@ -188,6 +192,17 @@ export default function Navbar({ } /> + {pageBlocks?.map((block, i) => { + return ( + + ); + })} ); } diff --git a/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx b/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx index d80a918745..35650fe1a6 100644 --- a/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx +++ b/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx @@ -1,7 +1,7 @@ import { Center, Text, IconButton } from "@chakra-ui/react"; import { Button } from "@ui/Button"; import CloseIcon from "@ui/ProvisionsPopup/CloseIcon/CloseIcon"; -import { useEffect, useRef, useState } from "react"; +import { useState } from "react"; interface NavbarStickyBannerProps { text: string; @@ -15,35 +15,19 @@ const NavbarStickyBanner = ({ buttonLink, }: NavbarStickyBannerProps) => { const [isOpen, setIsOpen] = useState(true); - const centerRef = useRef(null); + const gtmEvent = (target: string) => window.gtag?.("event", target, { event_category: "engagement" }); - const onClose = (event: React.MouseEvent) => { + const onClose = () => { gtmEvent("Navbar_banner_close"); setIsOpen(false); }; - const onReadMore = (event: React.MouseEvent) => - gtmEvent("Navbar_banner_read_more"); - - useEffect(() => { - const componentHeight = - document.getElementById("navbar_banner")?.offsetHeight; - const div = document.getElementById("home_hero"); - if (!div || !componentHeight) return; - div.style.marginTop = `${componentHeight}px`; - }, [centerRef]); + const onReadMore = () => gtmEvent("Navbar_banner_read_more"); return (