From 7d786c51329eb887282bc0143537447dd3519917 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 18 Mar 2024 11:20:59 +0200 Subject: [PATCH 01/34] creating UI for side banner --- _data/pages/latest-announcements.yml | 1 + package.json | 1 + .../LatestAnnouncementCard.tsx | 25 ++++++++ .../LatestAnnouncments.tsx | 52 ++++++++++++++++ .../src/components/Layout/PageLayout.tsx | 17 ++--- workspaces/website/src/style/theme.ts | 62 ++++++++++--------- yarn.lock | 25 ++++++++ 7 files changed, 145 insertions(+), 38 deletions(-) create mode 100644 _data/pages/latest-announcements.yml create mode 100644 workspaces/website/src/components/LatestAnnouncements/LatestAnnouncementCard/LatestAnnouncementCard.tsx create mode 100644 workspaces/website/src/components/LatestAnnouncements/LatestAnnouncments.tsx diff --git a/_data/pages/latest-announcements.yml b/_data/pages/latest-announcements.yml new file mode 100644 index 0000000000..2caca619a6 --- /dev/null +++ b/_data/pages/latest-announcements.yml @@ -0,0 +1 @@ +Title: Latest announcements \ No newline at end of file diff --git a/package.json b/package.json index 1660e7b6c2..bde0e81985 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@algolia/autocomplete-plugin-query-suggestions": "^1.9.2", "@algolia/autocomplete-plugin-recent-searches": "^1.9.2", "@algolia/autocomplete-theme-classic": "^1.9.2", + "@chakra-ui/icons": "^2.1.1", "@chakra-ui/pro-theme": "^0.0.66", "@chakra-ui/react": "^2.6.0", "@crowdin/cli": "^3.11.0", diff --git a/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncementCard/LatestAnnouncementCard.tsx b/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncementCard/LatestAnnouncementCard.tsx new file mode 100644 index 0000000000..932fdb56f0 --- /dev/null +++ b/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncementCard/LatestAnnouncementCard.tsx @@ -0,0 +1,25 @@ +import { Box, Text, Image } from "@chakra-ui/react"; +import { Link } from "@chakra-ui/react"; +import { ArrowForwardIcon } from "@chakra-ui/icons"; + +interface LatestAnnouncementCardProps { + announcement: any; +} +const LatestAnnouncementCard = ({ + announcement, +}: LatestAnnouncementCardProps) => { + const { image, title, buttonText, link } = announcement; + return ( + + {image} + + {title} + + + {buttonText} + + + ); +}; + +export default LatestAnnouncementCard; diff --git a/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncments.tsx b/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncments.tsx new file mode 100644 index 0000000000..8b49738ff1 --- /dev/null +++ b/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncments.tsx @@ -0,0 +1,52 @@ +import { Box, Heading } from "@chakra-ui/react"; +import LatestAnnouncementCard from "./LatestAnnouncementCard/LatestAnnouncementCard"; + +const array = [ + { + title: "What are onramps and cross rollup bridges?", + buttonText: "see more", + link: "", + image: + "https://s3-alpha-sig.figma.com/img/4f25/c2db/258212229ef560d9d1532f86afece898?Expires=1711929600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MNRLkOJFL7kX7dw3SFz9~oJT5-lOeiAaUN2K~hkoyIWl7~ywwXn-7H4QFYTPnfI2xuPlwFWq2PwE4nS13bCD--1LU9fn7Qvj5tVwQH2C4412u1KvAyDArz1B7RQKLISYU799PhMVyPHrMUJ875RGJJrG515m~b~pzoes0zLE96qkYJxdliOxXTbH0C5kz2ceD~er-6eUCx7eYeMWBWLgwgmIwpsxXx8-aceuuMzz9O6rN54fhiGMjMpXF-YfMdQSi1Mmng2q3lwH7pIAgRxgMlXFSZHRnea3VNm5gkL6PBtjdUx8kaROpx7ryVcYBiGuRe5Olvji9rLl8rqeUa9bdA__", + }, + { + title: "What are onramps and cross rollup bridges?", + buttonText: "see more", + link: "", + image: + "https://s3-alpha-sig.figma.com/img/4f25/c2db/258212229ef560d9d1532f86afece898?Expires=1711929600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MNRLkOJFL7kX7dw3SFz9~oJT5-lOeiAaUN2K~hkoyIWl7~ywwXn-7H4QFYTPnfI2xuPlwFWq2PwE4nS13bCD--1LU9fn7Qvj5tVwQH2C4412u1KvAyDArz1B7RQKLISYU799PhMVyPHrMUJ875RGJJrG515m~b~pzoes0zLE96qkYJxdliOxXTbH0C5kz2ceD~er-6eUCx7eYeMWBWLgwgmIwpsxXx8-aceuuMzz9O6rN54fhiGMjMpXF-YfMdQSi1Mmng2q3lwH7pIAgRxgMlXFSZHRnea3VNm5gkL6PBtjdUx8kaROpx7ryVcYBiGuRe5Olvji9rLl8rqeUa9bdA__", + }, +]; + +const LatestAnnouncements = () => { + return ( + + + Latest announcements + + + {array && + array.map((announcement) => ( + + ))} + + + ); +}; + +export default LatestAnnouncements; diff --git a/workspaces/website/src/components/Layout/PageLayout.tsx b/workspaces/website/src/components/Layout/PageLayout.tsx index 9130a626ec..ff863974ff 100644 --- a/workspaces/website/src/components/Layout/PageLayout.tsx +++ b/workspaces/website/src/components/Layout/PageLayout.tsx @@ -5,6 +5,7 @@ import { SectionHeader } from "@ui/SectionHeader/SectionHeader"; import { Text } from "@ui/Typography/Text"; // import { SummitPromo } from "./SummitPromo"; import React from "react"; +import LatestAnnouncements from "@ui/LatestAnnouncements/LatestAnnouncments"; type Props = { leftAside?: React.ReactNode; @@ -23,7 +24,12 @@ type Props = { export const PageLayout = (props: Props) => { return ( - + {props.breadcrumbs} @@ -57,13 +63,7 @@ export const PageLayout = (props: Props) => { )} - + {props.sectionHeaderTitle && ( { )} {/* */} + ); }; diff --git a/workspaces/website/src/style/theme.ts b/workspaces/website/src/style/theme.ts index 542d0d4a07..f69ba9dbd7 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,43 @@ 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", + }, + surface: "#EDF2F7", + Link: "#1061FF", }, components: { Accordion: accordionTheme, @@ -110,34 +112,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 +148,7 @@ const theme = extendTheme(proTheme, { md: "48em", lg: "62em", xl: "80em", - "2xl": "96em" + "2xl": "96em", }, - }); export default theme; diff --git a/yarn.lock b/yarn.lock index aa134bfe2f..d8ef19bcdb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2032,6 +2032,30 @@ __metadata: languageName: node linkType: hard +"@chakra-ui/icon@npm:3.2.0": + version: 3.2.0 + resolution: "@chakra-ui/icon@npm:3.2.0" + dependencies: + "@chakra-ui/shared-utils": 2.0.5 + peerDependencies: + "@chakra-ui/system": ">=2.0.0" + react: ">=18" + checksum: d417e2b343837d6862eb37739e3d02b8e8bbeeefa4c7e4f1d4a7fcfcdf1c7a4401de9094d7a08ba1419f73465ab30456427f8dbf2f2ffe29b77a14ad4b341b00 + languageName: node + linkType: hard + +"@chakra-ui/icons@npm:^2.1.1": + version: 2.1.1 + resolution: "@chakra-ui/icons@npm:2.1.1" + dependencies: + "@chakra-ui/icon": 3.2.0 + peerDependencies: + "@chakra-ui/system": ">=2.0.0" + react: ">=18" + checksum: b7acf209bcb8f40494e5be64195c1f6b6d31bd425342731892b577ded6b3d02bc0399be18c3c503cf19086d1b89bcda71a3570c797a5c1b09bd5de997cee359b + languageName: node + linkType: hard + "@chakra-ui/image@npm:2.0.16": version: 2.0.16 resolution: "@chakra-ui/image@npm:2.0.16" @@ -4768,6 +4792,7 @@ __metadata: "@algolia/autocomplete-plugin-recent-searches": ^1.9.2 "@algolia/autocomplete-theme-classic": ^1.9.2 "@chakra-ui/cli": ^2.4.0 + "@chakra-ui/icons": ^2.1.1 "@chakra-ui/pro-theme": ^0.0.66 "@chakra-ui/react": ^2.6.0 "@crowdin/cli": ^3.11.0 From 6cf338ebd902ae57cf156e8218453b82095a3908 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 18 Mar 2024 11:23:57 +0200 Subject: [PATCH 02/34] editing size to use just base and lg --- .../LatestAnnouncements/LatestAnnouncments.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncments.tsx b/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncments.tsx index 8b49738ff1..df871a40d7 100644 --- a/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncments.tsx +++ b/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncments.tsx @@ -21,25 +21,21 @@ const array = [ const LatestAnnouncements = () => { return ( Latest announcements - + {array && array.map((announcement) => ( From f6df7f25b64a1a09bc6bc974e164c85f8ee2ef4c Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Wed, 20 Mar 2024 10:10:25 +0200 Subject: [PATCH 03/34] adding cms to side sticky banner --- workspaces/cms-config/src/blocks.ts | 237 +++++++++++------- workspaces/cms-data/src/pages.ts | 56 +++-- workspaces/website/src/blocks/Block.tsx | 71 +++--- .../LatestAnnouncments.tsx | 48 ---- .../src/components/Layout/PageLayout.tsx | 4 - .../SideStickyBanner/SideStickyBanner.tsx | 48 ++++ .../SideStickyBannerCard.tsx} | 19 +- 7 files changed, 284 insertions(+), 199 deletions(-) delete mode 100644 workspaces/website/src/components/LatestAnnouncements/LatestAnnouncments.tsx create mode 100644 workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx rename workspaces/website/src/components/{LatestAnnouncements/LatestAnnouncementCard/LatestAnnouncementCard.tsx => SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx} (66%) diff --git a/workspaces/cms-config/src/blocks.ts b/workspaces/cms-config/src/blocks.ts index 993bd65ec8..6f893ab346 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", @@ -820,7 +824,7 @@ const flexLayout = { name: "heading", required: false, widget: "string", - crowdin: true + crowdin: true, }, { name: "heading_variant", @@ -836,6 +840,38 @@ const flexLayout = { types: blocks, default: [], }, + { + name: "side_sticky_banner_card", + label: "Side Sticky Banner Card", + widget: "object", + fields: [ + { + name: "text", + widget: "string", + crowdin: true, + }, + { + name: "buttonText", + widget: "string", + crowdin: true, + }, + { + name: "buttonLink", + widget: "string", + crowdin: true, + }, + { + name: "image", + widget: "string", + crowdin: true, + }, + { + name: "isActive", + widget: "boolean", + default: false, + }, + ], + }, ], } satisfies CmsField; @@ -882,15 +918,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", @@ -901,6 +937,25 @@ export const topLevelBlocks = [ }, ], }, + { + name: "side_sticky_banner", + label: "Side Sticky Banner", + widget: "object", + fields: [ + { + name: "blocks", + label: "Blocks", + widget: "list", + types: [...blocks, flexLayout], + default: [], + }, + { + name: "isActive", + widget: "boolean", + default: false, + }, + ], + }, flexLayout, ...blocks, ] satisfies CmsFieldList["types"]; diff --git a/workspaces/cms-data/src/pages.ts b/workspaces/cms-data/src/pages.ts index e156a25d72..5e13ee80c9 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 { @@ -152,17 +156,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; } @@ -190,7 +194,8 @@ export type Block = | ListCardItemsBlock | AmbassadorsListBlock | VideoSectionBlock - | NewsletterBlock; + | NewsletterBlock + | SideStickyBannerCardBlock; export interface Container { readonly type: "container"; @@ -207,10 +212,23 @@ export interface FlexLayoutBlock { readonly heading_variant?: HeadingVariant; readonly blocks: readonly Block[]; } +export interface SideStickyBannerCardBlock { + readonly type: "side_sticky_banner_card"; + readonly text: string; + readonly buttonText: string; + readonly buttonLink: string; + readonly image: string; + readonly isActive: boolean; +} export interface GroupBlock { readonly type: "group"; readonly blocks: readonly Block[]; } +export interface SideStickyBannerBlock { + readonly type: "side_sticky_banner"; + readonly blocks: readonly Block[]; + readonly isActive: boolean; +} export interface HeadingContainerBlock { readonly type: "heading_container"; readonly heading: string; @@ -218,7 +236,13 @@ export interface HeadingContainerBlock { readonly blocks: readonly Block[]; } -export type TopLevelBlock = Block | FlexLayoutBlock | GroupBlock | Container | HeadingContainerBlock; +export type TopLevelBlock = + | Block + | FlexLayoutBlock + | GroupBlock + | Container + | HeadingContainerBlock + | SideStickyBannerBlock; export interface Page extends Meta { readonly id: string; @@ -238,20 +262,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, @@ -265,7 +288,7 @@ export async function getPageBySlug( ) ); - return getPageWithRandomizedData(data) + return getPageWithRandomizedData(data); } catch (cause) { throw new Error(`Page not found! ${slug}`, { cause, @@ -281,7 +304,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/blocks/Block.tsx b/workspaces/website/src/blocks/Block.tsx index e15714634a..f7e693d07b 100644 --- a/workspaces/website/src/blocks/Block.tsx +++ b/workspaces/website/src/blocks/Block.tsx @@ -21,40 +21,42 @@ import { HeadingContainer } from "./HeadingContainer"; import VideoSectionBlock from "./VideoSectionBlock"; import { NewsletterCard } from "@ui/Card/NewsletterCard"; import { YoutubePlayer } from "@ui/YoutubePlayer/YoutubePlayer"; +import SideStickyBanner from "@ui/SideStickyBanner/SideStickyBanner"; +import SideStickyBannerCard from "@ui/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard"; 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 +78,7 @@ export function Block({ disallowH1, block, env, locale }: Props): JSX.Element | headingVariant={block.heading_variant} > {block.blocks.map((block, i) => ( - + ))} ); @@ -121,25 +118,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) => ( - + ))} ); @@ -170,10 +160,25 @@ export function Block({ disallowH1, block, env, locale }: Props): JSX.Element | }} /> ); + } else if (block.type === "side_sticky_banner") { + return block.isActive ? ( + + {block.blocks.map((block, i) => ( + + ))} + + ) : null; + } else if (block.type === "side_sticky_banner_card") { + return block.isActive ? ( + + ) : null; } 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/components/LatestAnnouncements/LatestAnnouncments.tsx b/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncments.tsx deleted file mode 100644 index df871a40d7..0000000000 --- a/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncments.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Box, Heading } from "@chakra-ui/react"; -import LatestAnnouncementCard from "./LatestAnnouncementCard/LatestAnnouncementCard"; - -const array = [ - { - title: "What are onramps and cross rollup bridges?", - buttonText: "see more", - link: "", - image: - "https://s3-alpha-sig.figma.com/img/4f25/c2db/258212229ef560d9d1532f86afece898?Expires=1711929600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MNRLkOJFL7kX7dw3SFz9~oJT5-lOeiAaUN2K~hkoyIWl7~ywwXn-7H4QFYTPnfI2xuPlwFWq2PwE4nS13bCD--1LU9fn7Qvj5tVwQH2C4412u1KvAyDArz1B7RQKLISYU799PhMVyPHrMUJ875RGJJrG515m~b~pzoes0zLE96qkYJxdliOxXTbH0C5kz2ceD~er-6eUCx7eYeMWBWLgwgmIwpsxXx8-aceuuMzz9O6rN54fhiGMjMpXF-YfMdQSi1Mmng2q3lwH7pIAgRxgMlXFSZHRnea3VNm5gkL6PBtjdUx8kaROpx7ryVcYBiGuRe5Olvji9rLl8rqeUa9bdA__", - }, - { - title: "What are onramps and cross rollup bridges?", - buttonText: "see more", - link: "", - image: - "https://s3-alpha-sig.figma.com/img/4f25/c2db/258212229ef560d9d1532f86afece898?Expires=1711929600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MNRLkOJFL7kX7dw3SFz9~oJT5-lOeiAaUN2K~hkoyIWl7~ywwXn-7H4QFYTPnfI2xuPlwFWq2PwE4nS13bCD--1LU9fn7Qvj5tVwQH2C4412u1KvAyDArz1B7RQKLISYU799PhMVyPHrMUJ875RGJJrG515m~b~pzoes0zLE96qkYJxdliOxXTbH0C5kz2ceD~er-6eUCx7eYeMWBWLgwgmIwpsxXx8-aceuuMzz9O6rN54fhiGMjMpXF-YfMdQSi1Mmng2q3lwH7pIAgRxgMlXFSZHRnea3VNm5gkL6PBtjdUx8kaROpx7ryVcYBiGuRe5Olvji9rLl8rqeUa9bdA__", - }, -]; - -const LatestAnnouncements = () => { - return ( - - - Latest announcements - - - {array && - array.map((announcement) => ( - - ))} - - - ); -}; - -export default LatestAnnouncements; diff --git a/workspaces/website/src/components/Layout/PageLayout.tsx b/workspaces/website/src/components/Layout/PageLayout.tsx index ff863974ff..5e7369585c 100644 --- a/workspaces/website/src/components/Layout/PageLayout.tsx +++ b/workspaces/website/src/components/Layout/PageLayout.tsx @@ -1,11 +1,8 @@ import { Box, Container, Flex, Spacer, Stack } from "@chakra-ui/react"; -import { useState, useEffect } from "react"; -import { useLocalStorage } from "react-use"; import { SectionHeader } from "@ui/SectionHeader/SectionHeader"; import { Text } from "@ui/Typography/Text"; // import { SummitPromo } from "./SummitPromo"; import React from "react"; -import LatestAnnouncements from "@ui/LatestAnnouncements/LatestAnnouncments"; type Props = { leftAside?: React.ReactNode; @@ -91,7 +88,6 @@ export const PageLayout = (props: Props) => { )} {/* */} - ); }; diff --git a/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx b/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx new file mode 100644 index 0000000000..a020aa7cd5 --- /dev/null +++ b/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx @@ -0,0 +1,48 @@ +import { Box, Heading } from "@chakra-ui/react"; +import { ReactNode } from "react"; + +// const array = [ +// { +// title: "What are onramps and cross rollup bridges?", +// buttonText: "see more", +// link: "", +// image: +// "https://s3-alpha-sig.figma.com/img/4f25/c2db/258212229ef560d9d1532f86afece898?Expires=1711929600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MNRLkOJFL7kX7dw3SFz9~oJT5-lOeiAaUN2K~hkoyIWl7~ywwXn-7H4QFYTPnfI2xuPlwFWq2PwE4nS13bCD--1LU9fn7Qvj5tVwQH2C4412u1KvAyDArz1B7RQKLISYU799PhMVyPHrMUJ875RGJJrG515m~b~pzoes0zLE96qkYJxdliOxXTbH0C5kz2ceD~er-6eUCx7eYeMWBWLgwgmIwpsxXx8-aceuuMzz9O6rN54fhiGMjMpXF-YfMdQSi1Mmng2q3lwH7pIAgRxgMlXFSZHRnea3VNm5gkL6PBtjdUx8kaROpx7ryVcYBiGuRe5Olvji9rLl8rqeUa9bdA__", +// }, +// { +// title: "What are onramps and cross rollup bridges?", +// buttonText: "see more", +// link: "", +// image: +// "https://s3-alpha-sig.figma.com/img/4f25/c2db/258212229ef560d9d1532f86afece898?Expires=1711929600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MNRLkOJFL7kX7dw3SFz9~oJT5-lOeiAaUN2K~hkoyIWl7~ywwXn-7H4QFYTPnfI2xuPlwFWq2PwE4nS13bCD--1LU9fn7Qvj5tVwQH2C4412u1KvAyDArz1B7RQKLISYU799PhMVyPHrMUJ875RGJJrG515m~b~pzoes0zLE96qkYJxdliOxXTbH0C5kz2ceD~er-6eUCx7eYeMWBWLgwgmIwpsxXx8-aceuuMzz9O6rN54fhiGMjMpXF-YfMdQSi1Mmng2q3lwH7pIAgRxgMlXFSZHRnea3VNm5gkL6PBtjdUx8kaROpx7ryVcYBiGuRe5Olvji9rLl8rqeUa9bdA__", +// }, +// ]; +interface NavbarStickyBannerProps { + children: ReactNode; +} + +const SideStickyBanner = ({ children }: NavbarStickyBannerProps) => { + return ( + + + Latest announcements + + + {children} + + + ); +}; + +export default SideStickyBanner; diff --git a/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncementCard/LatestAnnouncementCard.tsx b/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx similarity index 66% rename from workspaces/website/src/components/LatestAnnouncements/LatestAnnouncementCard/LatestAnnouncementCard.tsx rename to workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx index 932fdb56f0..d99932cb33 100644 --- a/workspaces/website/src/components/LatestAnnouncements/LatestAnnouncementCard/LatestAnnouncementCard.tsx +++ b/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx @@ -3,23 +3,28 @@ import { Link } from "@chakra-ui/react"; import { ArrowForwardIcon } from "@chakra-ui/icons"; interface LatestAnnouncementCardProps { - announcement: any; + image: string; + text: string; + buttonText: string; + buttonLink: string; } -const LatestAnnouncementCard = ({ - announcement, +const SideStickyBannerCard = ({ + image, + text, + buttonText, + buttonLink, }: LatestAnnouncementCardProps) => { - const { image, title, buttonText, link } = announcement; return ( {image} - {title} + {text} - + {buttonText} ); }; -export default LatestAnnouncementCard; +export default SideStickyBannerCard; From 66049a63d458d85c74c37df76ad54abaa29abe68 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Wed, 20 Mar 2024 10:41:58 +0200 Subject: [PATCH 04/34] fixing location in blocks --- workspaces/cms-config/src/blocks.ts | 64 ++++++++++++++--------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/workspaces/cms-config/src/blocks.ts b/workspaces/cms-config/src/blocks.ts index 6f893ab346..c1b6b2658e 100644 --- a/workspaces/cms-config/src/blocks.ts +++ b/workspaces/cms-config/src/blocks.ts @@ -793,6 +793,38 @@ export const blocks = [ }, ], }, + { + name: "side_sticky_banner_card", + label: "Side Sticky Banner Card", + widget: "object", + fields: [ + { + name: "text", + widget: "string", + crowdin: true, + }, + { + name: "buttonText", + widget: "string", + crowdin: true, + }, + { + name: "buttonLink", + widget: "string", + crowdin: true, + }, + { + name: "image", + widget: "string", + crowdin: true, + }, + { + name: "isActive", + widget: "boolean", + default: false, + }, + ], + }, ] satisfies CmsFieldList["types"]; const flexLayout = { @@ -840,38 +872,6 @@ const flexLayout = { types: blocks, default: [], }, - { - name: "side_sticky_banner_card", - label: "Side Sticky Banner Card", - widget: "object", - fields: [ - { - name: "text", - widget: "string", - crowdin: true, - }, - { - name: "buttonText", - widget: "string", - crowdin: true, - }, - { - name: "buttonLink", - widget: "string", - crowdin: true, - }, - { - name: "image", - widget: "string", - crowdin: true, - }, - { - name: "isActive", - widget: "boolean", - default: false, - }, - ], - }, ], } satisfies CmsField; From 87ceebde12bd05a9fd8590e00ad24885e164414d Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Wed, 20 Mar 2024 11:19:53 +0200 Subject: [PATCH 05/34] delete unused text --- .../SideStickyBanner/SideStickyBanner.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx b/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx index a020aa7cd5..7f92cb9734 100644 --- a/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx +++ b/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx @@ -1,22 +1,6 @@ import { Box, Heading } from "@chakra-ui/react"; import { ReactNode } from "react"; -// const array = [ -// { -// title: "What are onramps and cross rollup bridges?", -// buttonText: "see more", -// link: "", -// image: -// "https://s3-alpha-sig.figma.com/img/4f25/c2db/258212229ef560d9d1532f86afece898?Expires=1711929600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MNRLkOJFL7kX7dw3SFz9~oJT5-lOeiAaUN2K~hkoyIWl7~ywwXn-7H4QFYTPnfI2xuPlwFWq2PwE4nS13bCD--1LU9fn7Qvj5tVwQH2C4412u1KvAyDArz1B7RQKLISYU799PhMVyPHrMUJ875RGJJrG515m~b~pzoes0zLE96qkYJxdliOxXTbH0C5kz2ceD~er-6eUCx7eYeMWBWLgwgmIwpsxXx8-aceuuMzz9O6rN54fhiGMjMpXF-YfMdQSi1Mmng2q3lwH7pIAgRxgMlXFSZHRnea3VNm5gkL6PBtjdUx8kaROpx7ryVcYBiGuRe5Olvji9rLl8rqeUa9bdA__", -// }, -// { -// title: "What are onramps and cross rollup bridges?", -// buttonText: "see more", -// link: "", -// image: -// "https://s3-alpha-sig.figma.com/img/4f25/c2db/258212229ef560d9d1532f86afece898?Expires=1711929600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MNRLkOJFL7kX7dw3SFz9~oJT5-lOeiAaUN2K~hkoyIWl7~ywwXn-7H4QFYTPnfI2xuPlwFWq2PwE4nS13bCD--1LU9fn7Qvj5tVwQH2C4412u1KvAyDArz1B7RQKLISYU799PhMVyPHrMUJ875RGJJrG515m~b~pzoes0zLE96qkYJxdliOxXTbH0C5kz2ceD~er-6eUCx7eYeMWBWLgwgmIwpsxXx8-aceuuMzz9O6rN54fhiGMjMpXF-YfMdQSi1Mmng2q3lwH7pIAgRxgMlXFSZHRnea3VNm5gkL6PBtjdUx8kaROpx7ryVcYBiGuRe5Olvji9rLl8rqeUa9bdA__", -// }, -// ]; interface NavbarStickyBannerProps { children: ReactNode; } From f370816f5e43eb36447a13a12713b49d8b31722f Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Wed, 20 Mar 2024 14:02:38 +0200 Subject: [PATCH 06/34] adding gtm event --- .../SideStickyBannerCard/SideStickyBannerCard.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx b/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx index d99932cb33..b611f572cb 100644 --- a/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx +++ b/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx @@ -14,13 +14,19 @@ const SideStickyBannerCard = ({ buttonText, buttonLink, }: LatestAnnouncementCardProps) => { + const gtmEvent = (target: string) => + window.gtag?.("event", target, { event_category: "engagement" }); + const onReadMore = (event: React.MouseEvent) => { + event.stopPropagation(); + gtmEvent("Latest_announcement_read_more"); + }; return ( {image} {text} - + {buttonText} From b6fd8fb3bbb69e2d1a3e28fae6bafe83f186b104 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Thu, 21 Mar 2024 13:34:38 +0200 Subject: [PATCH 07/34] check changes in the build --- _data/settings/latest-announcements.yml | 9 ++ .../cms-config/src/collections/index.ts | 2 +- .../cms-config/src/collections/settings.ts | 98 +++++++++++++------ workspaces/cms-data/src/categories.ts | 2 + .../src/settings/latest-announcenents.ts | 24 +++++ workspaces/website/src/blocks/Block.tsx | 38 +++---- .../SideStickyBannerCard.tsx | 7 +- 7 files changed, 128 insertions(+), 52 deletions(-) create mode 100644 _data/settings/latest-announcements.yml create mode 100644 workspaces/cms-data/src/settings/latest-announcenents.ts diff --git a/_data/settings/latest-announcements.yml b/_data/settings/latest-announcements.yml new file mode 100644 index 0000000000..34f9186971 --- /dev/null +++ b/_data/settings/latest-announcements.yml @@ -0,0 +1,9 @@ +items: +- image: avi + text: tal + buttonText: tal + buttonLink: go +- image: gil + text: kobi + buttonText: dani + buttonLink: boy \ No newline at end of file diff --git a/workspaces/cms-config/src/collections/index.ts b/workspaces/cms-config/src/collections/index.ts index 1d088e599f..743f9ef951 100644 --- a/workspaces/cms-config/src/collections/index.ts +++ b/workspaces/cms-config/src/collections/index.ts @@ -24,5 +24,5 @@ export const collections: CmsConfig["collections"] = [ SEOCollectionConfig, roadmapPostsCollectionConfig, roadmapVersionsCollectionConfig, - announcementsCollectionConfig + announcementsCollectionConfig, ]; diff --git a/workspaces/cms-config/src/collections/settings.ts b/workspaces/cms-config/src/collections/settings.ts index 2b776261f4..18fdfdc7d4 100644 --- a/workspaces/cms-config/src/collections/settings.ts +++ b/workspaces/cms-config/src/collections/settings.ts @@ -1,7 +1,6 @@ import { linkFields } from "../blocks"; import { CmsCollection } from "../types"; - const permissionOptions = [ { label: "All", @@ -43,7 +42,7 @@ const permissionOptions = [ label: "Roadmap and Announcements", value: "roadmap", }, -] +]; export const settingsCollectionConfig = { crowdin: true, @@ -65,7 +64,7 @@ export const settingsCollectionConfig = { label: "Title", name: "title", widget: "string", - crowdin: true + crowdin: true, }, { label: "Columns", @@ -83,7 +82,7 @@ export const settingsCollectionConfig = { name: "title", required: false, widget: "string", - crowdin: true + crowdin: true, }, { label: "Menu Items", @@ -120,12 +119,12 @@ export const settingsCollectionConfig = { { name: "source", widget: "string", - crowdin: false + crowdin: false, }, { name: "destination", widget: "string", - crowdin: false + crowdin: false, }, ], }, @@ -143,14 +142,14 @@ export const settingsCollectionConfig = { widget: "list", fields: [ { - name: 'category', - label: 'Category', - widget: 'relation', - collection: 'categories', - search_fields: ['name'], - value_field: 'id', - display_fields: ['name'], - options_length: 300 + name: "category", + label: "Category", + widget: "relation", + collection: "categories", + search_fields: ["name"], + value_field: "id", + display_fields: ["name"], + options_length: 300, }, ], }, @@ -171,7 +170,7 @@ export const settingsCollectionConfig = { label: "Name", name: "name", widget: "string", - crowdin: true + crowdin: true, }, { label: "Type", @@ -202,19 +201,19 @@ export const settingsCollectionConfig = { label: "Twitter handle", name: "twitter", widget: "string", - crowdin: false + crowdin: false, }, { label: "Website url", name: "website_url", widget: "string", - crowdin: false + crowdin: false, }, { label: "Description", name: "body", widget: "string", - crowdin: true + crowdin: true, }, ], }, @@ -255,7 +254,7 @@ export const settingsCollectionConfig = { name: "title", label: "Title", widget: "string", - crowdin: true + crowdin: true, }, { name: "body", @@ -268,7 +267,7 @@ export const settingsCollectionConfig = { hint: "If page url is not specified (e.g. 'learn/glossary'), it will be used globally", required: false, widget: "string", - crowdin: false + crowdin: false, }, ], }, @@ -294,7 +293,7 @@ export const settingsCollectionConfig = { search_fields: ["title"], value_field: "id", display_fields: ["title"], - options_length: 300 + options_length: 300, }, ], }, @@ -315,36 +314,36 @@ export const settingsCollectionConfig = { label: "Hero banner title", widget: "string", required: true, - crowdin: true + crowdin: true, }, { name: "hero_description", label: "Hero description", widget: "string", required: true, - crowdin: true + crowdin: true, }, { name: "show_hero_cta", label: "Show hero banner CTA", widget: "boolean", default: true, - crowdin: true + crowdin: true, }, { name: "hero_cta_copy", label: "Hero banner CTA copy", widget: "string", required: false, - crowdin: true + crowdin: true, }, { name: "roadmap_post_ps", label: "Roadmap post p.s. copy", widget: "markdown", required: false, - crowdin: true - } + crowdin: true, + }, ], }, { @@ -369,14 +368,55 @@ export const settingsCollectionConfig = { label: "Name", widget: "string", crowdin: false, - required: false + required: false, }, { name: "access", label: "Access to collections", multiple: true, widget: "select", - options: permissionOptions + options: permissionOptions, + }, + ], + }, + ], + }, + { + label: "Latest Announcements", + name: "LatestAnnouncements", + file: `_data/settings/latestAnnouncements.yml`, + crowdin: false, + fields: [ + { + label: "announcements", + name: "announcements", + widget: "list", + fields: [ + { + name: "image", + widget: "string", + crowdin: false, + }, + { + name: "text", + widget: "string", + crowdin: false, + }, + { + name: "buttonText", + widget: "string", + crowdin: false, + }, + { + name: "buttonLink", + widget: "string", + crowdin: false, + }, + { + name: "isActive", + widget: "boolean", + default: true, + crowdin: false, }, ], }, diff --git a/workspaces/cms-data/src/categories.ts b/workspaces/cms-data/src/categories.ts index 28d51579c8..fc608a9f10 100644 --- a/workspaces/cms-data/src/categories.ts +++ b/workspaces/cms-data/src/categories.ts @@ -1,5 +1,6 @@ import { defaultLocale } from "./i18n/config"; import { getFirst, getJSON } from "@starknet-io/cms-utils/src/index"; +import { getLatestAnnouncements } from "./settings/latest-announcenents"; export interface Category { readonly id: string; @@ -16,6 +17,7 @@ export async function getCategories( context: EventContext<{}, any, Record> ): Promise { try { + getLatestAnnouncements(context); return await getFirst( ...[locale, defaultLocale].map( (value) => async () => getJSON("data/categories/" + value, context) diff --git a/workspaces/cms-data/src/settings/latest-announcenents.ts b/workspaces/cms-data/src/settings/latest-announcenents.ts new file mode 100644 index 0000000000..910b41d189 --- /dev/null +++ b/workspaces/cms-data/src/settings/latest-announcenents.ts @@ -0,0 +1,24 @@ +import { getJSON } from "@starknet-io/cms-utils/src/index"; + +export type FeaturedSections = string[]; + +/** + * Export `getFeaturedSections` function. + */ +export async function getLatestAnnouncements( + context: EventContext<{}, any, Record> +) { + try { + const sections = await getJSON( + "data/latest-announcements/latest-announcements", + context + ); + console.log("sections", sections); + return; + // return sections.items.map((item: { category: string }) => item.category); + } catch (cause) { + throw new Error("getFeaturedSection failed!", { + cause, + }); + } +} diff --git a/workspaces/website/src/blocks/Block.tsx b/workspaces/website/src/blocks/Block.tsx index f7e693d07b..ca2772c02f 100644 --- a/workspaces/website/src/blocks/Block.tsx +++ b/workspaces/website/src/blocks/Block.tsx @@ -160,24 +160,26 @@ export function Block({ }} /> ); - } else if (block.type === "side_sticky_banner") { - return block.isActive ? ( - - {block.blocks.map((block, i) => ( - - ))} - - ) : null; - } else if (block.type === "side_sticky_banner_card") { - return block.isActive ? ( - - ) : null; - } else if (block.type === "video_section") { + } + // else if (block.type === "side_sticky_banner") { + // return block.isActive ? ( + // + // {block.blocks.map((block, i) => ( + // + // ))} + // + // ) : null; + // } else if (block.type === "side_sticky_banner_card") { + // return block.isActive ? ( + // + // ) : null; + // } + else if (block.type === "video_section") { return ; } else { // this will report type error if there is unhandled block.type diff --git a/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx b/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx index b611f572cb..fac548fbc6 100644 --- a/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx +++ b/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx @@ -16,10 +16,9 @@ const SideStickyBannerCard = ({ }: LatestAnnouncementCardProps) => { const gtmEvent = (target: string) => window.gtag?.("event", target, { event_category: "engagement" }); - const onReadMore = (event: React.MouseEvent) => { - event.stopPropagation(); - gtmEvent("Latest_announcement_read_more"); - }; + + const onReadMore = () => gtmEvent("Latest_announcement_read_more"); + return ( {image} From d4dba53b8f15399afd9f597d62cbdcd0958d0838 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Thu, 21 Mar 2024 13:55:20 +0200 Subject: [PATCH 08/34] update page --- workspaces/cms-data/src/categories.ts | 2 - .../src/settings/latest-announcenents.ts | 10 ++- .../website/src/pages/content/PostsPage.tsx | 89 +++++++++---------- .../src/pages/content/index.page.server.ts | 21 +++-- 4 files changed, 62 insertions(+), 60 deletions(-) diff --git a/workspaces/cms-data/src/categories.ts b/workspaces/cms-data/src/categories.ts index fc608a9f10..28d51579c8 100644 --- a/workspaces/cms-data/src/categories.ts +++ b/workspaces/cms-data/src/categories.ts @@ -1,6 +1,5 @@ import { defaultLocale } from "./i18n/config"; import { getFirst, getJSON } from "@starknet-io/cms-utils/src/index"; -import { getLatestAnnouncements } from "./settings/latest-announcenents"; export interface Category { readonly id: string; @@ -17,7 +16,6 @@ export async function getCategories( context: EventContext<{}, any, Record> ): Promise { try { - getLatestAnnouncements(context); return await getFirst( ...[locale, defaultLocale].map( (value) => async () => getJSON("data/categories/" + value, context) diff --git a/workspaces/cms-data/src/settings/latest-announcenents.ts b/workspaces/cms-data/src/settings/latest-announcenents.ts index 910b41d189..549d12a001 100644 --- a/workspaces/cms-data/src/settings/latest-announcenents.ts +++ b/workspaces/cms-data/src/settings/latest-announcenents.ts @@ -1,6 +1,11 @@ import { getJSON } from "@starknet-io/cms-utils/src/index"; -export type FeaturedSections = string[]; +export type LatestAnnouncements = { + image: string; + text: string; + buttonText: string; + buttonLink: string; +}[]; /** * Export `getFeaturedSections` function. @@ -14,8 +19,7 @@ export async function getLatestAnnouncements( context ); console.log("sections", sections); - return; - // return sections.items.map((item: { category: string }) => item.category); + return sections; } catch (cause) { throw new Error("getFeaturedSection failed!", { cause, diff --git a/workspaces/website/src/pages/content/PostsPage.tsx b/workspaces/website/src/pages/content/PostsPage.tsx index c92d420de3..d5a8f2d160 100644 --- a/workspaces/website/src/pages/content/PostsPage.tsx +++ b/workspaces/website/src/pages/content/PostsPage.tsx @@ -8,10 +8,7 @@ import { import { useMemo } from "react"; import algoliasearch from "algoliasearch/lite"; -import { - InstantSearch, - Configure, -} from "react-instantsearch-hooks-web"; +import { InstantSearch, Configure } from "react-instantsearch-hooks-web"; import type { Category } from "@starknet-io/cms-data/src/categories"; import type { Topic } from "@starknet-io/cms-data/src/topics"; @@ -22,11 +19,13 @@ import { FilterButton } from "@ui/Blog/Filters/Button"; import { PostTypeFilter } from "@ui/Blog/Filters/PostType"; import qs from "qs"; import { TopicList } from "@ui/Blog/TopicsList"; +import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcenents"; export interface Props extends LocaleProps { readonly categories: readonly Category[]; readonly featuredSections: readonly string[]; readonly topics: readonly Topic[]; + readonly latestAnnouncementsSection: readonly LatestAnnouncements[]; readonly params: LocaleParams & { readonly postType?: string; readonly topicFilters?: readonly string[]; @@ -48,19 +47,21 @@ export function PostsPage({ const searchClient = useMemo(() => { return algoliasearch(env.ALGOLIA_APP_ID, env.ALGOLIA_SEARCH_API_KEY); }, [env.ALGOLIA_APP_ID, env.ALGOLIA_SEARCH_API_KEY]); - + const featuredCategories = useMemo(() => { - return categories.filter(category => featuredSections.includes(category.id)) + return categories.filter((category) => + featuredSections.includes(category.id) + ); }, [categories, featuredSections]); - const isMobile = useBreakpointValue({ base: true, lg: false }) + const isMobile = useBreakpointValue({ base: true, lg: false }); return ( {!isMobile && ( <> - {'Explore'} + {"Explore"} + display={"flex"} + columnGap={"12px"} + ml={"auto"} + buttonHref={(postType) => `/${params.locale}/content/category/all?${qs.stringify({ - postType + postType, })}` } /> @@ -121,32 +122,26 @@ export function PostsPage({ )} - + {!isMobile && ( - )} - + - {featuredCategories.map(category => ( + {featuredCategories.map((category) => ( @@ -172,11 +167,7 @@ export function PostsPage({ {isMobile && ( - + )} ); @@ -189,14 +180,14 @@ type VideoData = { snippet: object; contentDetails: { duration: string; - } -} + }; +}; type Video = { data: VideoData; url: string; id: string; -} +}; export type BlogHit = { readonly id: string; diff --git a/workspaces/website/src/pages/content/index.page.server.ts b/workspaces/website/src/pages/content/index.page.server.ts index 403232c654..cd765b68ee 100644 --- a/workspaces/website/src/pages/content/index.page.server.ts +++ b/workspaces/website/src/pages/content/index.page.server.ts @@ -5,16 +5,23 @@ import { Props } from "./PostsPage"; import { getDefaultPageContext } from "src/renderer/helpers"; import { getFeaturedSections } from "@starknet-io/cms-data/src/settings/featured-settings"; import qs from "qs"; +import { getLatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcenents"; export async function onBeforeRender(pageContext: PageContextServer) { const defaultPageContext = await getDefaultPageContext(pageContext); - const query = qs.parse((pageContext as any)._urlPristine?.split("?")[1] ?? ''); + const query = qs.parse( + (pageContext as any)._urlPristine?.split("?")[1] ?? "" + ); const { locale } = defaultPageContext; const featuredSections = await getFeaturedSections(pageContext.context); + const latestAnnouncementsSection = await getLatestAnnouncements( + pageContext.context + ); const pageProps: Props = { categories: await getCategories(locale, pageContext.context), featuredSections, + latestAnnouncementsSection, topics: await getTopics(locale, pageContext.context), env: { ALGOLIA_INDEX: import.meta.env.VITE_ALGOLIA_INDEX!, @@ -23,12 +30,14 @@ export async function onBeforeRender(pageContext: PageContextServer) { }, params: { locale, - ...query.postType && { + ...(query.postType && { postType: query.postType as string, - }, - ...!!query.topicFilters && { - topicFilters: (Array.isArray(query.topicFilters) ? query.topicFilters : [query.topicFilters]) as string[], - } + }), + ...(!!query.topicFilters && { + topicFilters: (Array.isArray(query.topicFilters) + ? query.topicFilters + : [query.topicFilters]) as string[], + }), }, }; From 9799d3ea13405b56d91f18de13eabf096bed8a63 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Thu, 21 Mar 2024 15:08:06 +0200 Subject: [PATCH 09/34] adding things --- workspaces/website/src/pages/content/PostsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/workspaces/website/src/pages/content/PostsPage.tsx b/workspaces/website/src/pages/content/PostsPage.tsx index d5a8f2d160..d85893aa18 100644 --- a/workspaces/website/src/pages/content/PostsPage.tsx +++ b/workspaces/website/src/pages/content/PostsPage.tsx @@ -42,6 +42,7 @@ export function PostsPage({ params, categories, featuredSections, + latestAnnouncementsSection, topics, }: Props): JSX.Element | null { const searchClient = useMemo(() => { @@ -140,7 +141,6 @@ export function PostsPage({ - {featuredCategories.map((category) => ( Date: Thu, 21 Mar 2024 17:25:27 +0200 Subject: [PATCH 10/34] fixing the data issue --- _data/settings/latest-announcements.yml | 19 +- .../cms-config/src/collections/settings.ts | 2 +- .../src/settings/latest-announcenents.ts | 13 +- workspaces/cms-scripts/src/index.ts | 88 ++++--- workspaces/cms-utils/src/index.ts | 8 +- .../SideStickyBanner/SideStickyBanner.tsx | 2 +- .../src/pages/content/@slug/PostPage.tsx | 218 +++++++++--------- .../website/src/pages/content/PostsPage.tsx | 19 +- .../(componnets)/LivePreivewPage.tsx | 103 +++++---- .../pages/live-preview/index.page.server.ts | 6 +- 10 files changed, 258 insertions(+), 220 deletions(-) diff --git a/_data/settings/latest-announcements.yml b/_data/settings/latest-announcements.yml index 34f9186971..e52b8f2d55 100644 --- a/_data/settings/latest-announcements.yml +++ b/_data/settings/latest-announcements.yml @@ -1,9 +1,10 @@ -items: -- image: avi - text: tal - buttonText: tal - buttonLink: go -- image: gil - text: kobi - buttonText: dani - buttonLink: boy \ No newline at end of file + - isActive: true + image: / + text: dfdf + buttonText: dfdf + buttonLink: / + - isActive: true + image: / + text: sdfgsdfsg + buttonText: sdfgsdfg + buttonLink: / \ No newline at end of file diff --git a/workspaces/cms-config/src/collections/settings.ts b/workspaces/cms-config/src/collections/settings.ts index 18fdfdc7d4..90ffd3ba95 100644 --- a/workspaces/cms-config/src/collections/settings.ts +++ b/workspaces/cms-config/src/collections/settings.ts @@ -384,7 +384,7 @@ export const settingsCollectionConfig = { { label: "Latest Announcements", name: "LatestAnnouncements", - file: `_data/settings/latestAnnouncements.yml`, + file: `_data/settings/latest-announcements.yml`, crowdin: false, fields: [ { diff --git a/workspaces/cms-data/src/settings/latest-announcenents.ts b/workspaces/cms-data/src/settings/latest-announcenents.ts index 549d12a001..3524c5bf42 100644 --- a/workspaces/cms-data/src/settings/latest-announcenents.ts +++ b/workspaces/cms-data/src/settings/latest-announcenents.ts @@ -5,21 +5,20 @@ export type LatestAnnouncements = { text: string; buttonText: string; buttonLink: string; -}[]; + isActive: boolean; +}; -/** - * Export `getFeaturedSections` function. - */ export async function getLatestAnnouncements( context: EventContext<{}, any, Record> ) { try { - const sections = await getJSON( + const latestAnnouncements = await getJSON( "data/latest-announcements/latest-announcements", context ); - console.log("sections", sections); - return sections; + console.log("latestAnnouncements", latestAnnouncements); + + return latestAnnouncements; } catch (cause) { throw new Error("getFeaturedSection failed!", { cause, diff --git a/workspaces/cms-scripts/src/index.ts b/workspaces/cms-scripts/src/index.ts index b6b7261235..841676b87e 100644 --- a/workspaces/cms-scripts/src/index.ts +++ b/workspaces/cms-scripts/src/index.ts @@ -24,58 +24,66 @@ import { import { translateFile } from "./crowdin"; const createRoadmapDetails = async () => { - await fs.mkdir(`public/data/roadmap-details`, {recursive: true}); + await fs.mkdir(`public/data/roadmap-details`, { recursive: true }); for (const locale of locales) { const roadmapPosts: RoadmapDetails[] = []; - const filesPath = path.join("public/data/roadmap-posts", locale) + const filesPath = path.join("public/data/roadmap-posts", locale); const filesInDir = await fs.readdir(filesPath); const jsonFilesInDir = filesInDir.filter((file) => file.endsWith(".json")); for (const fileName of jsonFilesInDir) { const fileData = await fs.readFile( - path.join( - process.cwd(), - "public/data/roadmap-posts", - locale, - fileName - ), + path.join(process.cwd(), "public/data/roadmap-posts", locale, fileName), "utf8" ); - const { blocks, gitlog, sourceFilepath, objectID, ...roadmapDetails }: RoadmapPost = JSON.parse(fileData.toString()); + const { + blocks, + gitlog, + sourceFilepath, + objectID, + ...roadmapDetails + }: RoadmapPost = JSON.parse(fileData.toString()); roadmapPosts.push(roadmapDetails); } - await write(path.join("public/data/roadmap-details", `${locale}.json`), roadmapPosts); + await write( + path.join("public/data/roadmap-details", `${locale}.json`), + roadmapPosts + ); } -} +}; const createAnnouncementDetails = async () => { - await fs.mkdir(`public/data/announcements-details`, {recursive: true}); + await fs.mkdir(`public/data/announcements-details`, { recursive: true }); for (const locale of locales) { const roadmapPosts: AnnouncementDetails[] = []; - const filesPath = path.join("public/data/announcements", locale) + const filesPath = path.join("public/data/announcements", locale); const filesInDir = await fs.readdir(filesPath); const jsonFilesInDir = filesInDir.filter((file) => file.endsWith(".json")); for (const fileName of jsonFilesInDir) { const fileData = await fs.readFile( - path.join( - process.cwd(), - "public/data/announcements", - locale, - fileName - ), + path.join(process.cwd(), "public/data/announcements", locale, fileName), "utf8" ); - const { blocks, gitlog, sourceFilepath, objectID, ...roadmapDetails }: AnnouncementsPost = JSON.parse(fileData.toString()); + const { + blocks, + gitlog, + sourceFilepath, + objectID, + ...roadmapDetails + }: AnnouncementsPost = JSON.parse(fileData.toString()); roadmapPosts.push(roadmapDetails); } - await write(path.join("public/data/announcements-details", `${locale}.json`), roadmapPosts); + await write( + path.join("public/data/announcements-details", `${locale}.json`), + roadmapPosts + ); } -} +}; const createSharedData = async () => { await fs.mkdir(`public/data/shared-data`, { recursive: true }); @@ -87,20 +95,20 @@ const createSharedData = async () => { "jobs", "search", "language", - "newsletter" + "newsletter", ]; for (const locale of locales) { - const seo: Record = {} + const seo: Record = {}; for (const fileName of seoFiles) { const fileData = await fs.readFile( path.join(process.cwd(), `public/data/seo/${fileName}/${locale}.json`), "utf8" ); - + const fileDataParsed = JSON.parse(fileData.toString()); - seo[fileName] = fileDataParsed + seo[fileName] = fileDataParsed; } const mainMenuData = await fs.readFile( @@ -117,7 +125,7 @@ const createSharedData = async () => { seo, mainMenu: JSON.parse(mainMenuData.toString()), alerts: JSON.parse(alertsData.toString()), - } + }; await write( path.join("public/data/shared-data", `${locale}.json`), @@ -226,9 +234,9 @@ for (const data of roadmapPosts.filenameMap.values()) { for (const data of announcements.filenameMap.values()) { await write( - `public/data/announcements/${data.locale}/${data.slug}.json`, - data -); + `public/data/announcements/${data.locale}/${data.slug}.json`, + data + ); } for (const locale of locales) { @@ -278,10 +286,22 @@ for (const locale of locales) { const redirects = await yaml("_data/settings/redirects.yml"); await write(`workspaces/website/redirects.json`, redirects); +await fs.mkdir("public/data/latest-announcements", { recursive: true }); +const latestAnnouncements = await yaml( + "_data/settings/latest-announcements.yml" +); +await write( + `public/data/latest-announcements/latest-announcements.json`, + latestAnnouncements +); + await fs.mkdir("public/data/featured-sections", { recursive: true }); const featuredSections = await yaml("_data/settings/featured-sections.yml"); -await write(`public/data/featured-sections/featured-sections.json`, featuredSections); +await write( + `public/data/featured-sections/featured-sections.json`, + featuredSections +); -await createRoadmapDetails() -await createAnnouncementDetails() -await createSharedData() +await createRoadmapDetails(); +await createAnnouncementDetails(); +await createSharedData(); diff --git a/workspaces/cms-utils/src/index.ts b/workspaces/cms-utils/src/index.ts index ff87adee9f..f419561dcf 100644 --- a/workspaces/cms-utils/src/index.ts +++ b/workspaces/cms-utils/src/index.ts @@ -10,7 +10,7 @@ export function youtubeVideoIdFromURL(url: string): string | undefined | void { if (obj.pathname.startsWith("/live/")) { return obj.pathname.replace("/live/", ""); } - if(obj.pathname.startsWith("/embed/")) { + if (obj.pathname.startsWith("/embed/")) { return obj.pathname.replace("/embed/", ""); } } else if (obj.hostname === "youtu.be") { @@ -64,9 +64,11 @@ export async function getJSON( ): Promise { if (import.meta.env.SSR || context) { if (context) { - const res = await context.env.ASSETS.fetch(new URL("/" + src + ".json", "http://localhost:3000")) + const res = await context.env.ASSETS.fetch( + new URL("/" + src + ".json", "http://localhost:3000") + ); - return res.json() + return res.json(); } else if (import.meta.env.DEV) { const fs = await import("node:fs/promises"); const path = await import("node:path"); diff --git a/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx b/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx index 7f92cb9734..cda07430b0 100644 --- a/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx +++ b/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx @@ -8,7 +8,7 @@ interface NavbarStickyBannerProps { const SideStickyBanner = ({ children }: NavbarStickyBannerProps) => { return ( post.category.includes(c.id)); const videoId = post.post_type !== "article" ? post.video?.id : undefined; - const shareUrl = `${env?.SITE_URL}/content/${slug}` + const shareUrl = `${env?.SITE_URL}/content/${slug}`; const isMobile = useBreakpointValue({ base: true, lg: false }); const searchClient = useMemo(() => { - return algoliasearch(env?.ALGOLIA_APP_ID ?? '', env?.ALGOLIA_SEARCH_API_KEY ?? ''); + return algoliasearch( + env?.ALGOLIA_APP_ID ?? "", + env?.ALGOLIA_SEARCH_API_KEY ?? "" + ); }, [env?.ALGOLIA_APP_ID, env?.ALGOLIA_SEARCH_API_KEY]); - + console.log(latestAnnouncements); + return ( - - {!!post.toc && !isMobile ? ( - ) : null} - + {post.post_type === "article" ? ( @@ -135,31 +151,31 @@ export function PostPage(props: Props): JSX.Element { borderRadius={"8px"} src={post.image} alt={post.title} - width={'100%'} + width={"100%"} /> @@ -171,7 +187,7 @@ export function PostPage(props: Props): JSX.Element { - + {`Page last updated ${moment( post?.gitlog?.date ).fromNow()}`} @@ -181,26 +197,21 @@ export function PostPage(props: Props): JSX.Element { ) : null} {post.title} {post.post_desc && ( - + {post.post_desc} )} - {post.post_type !== "article" && ( @@ -208,10 +219,10 @@ export function PostPage(props: Props): JSX.Element { @@ -223,7 +234,7 @@ export function PostPage(props: Props): JSX.Element { - + {`Page last updated ${moment( post?.gitlog?.date ).fromNow()}`} @@ -233,30 +244,21 @@ export function PostPage(props: Props): JSX.Element { )} {(post.blocks?.length ?? 0) > 0 && ( - + {post.blocks?.map((block, i) => ( - + ))} )} - + {post.topic?.map((topic, i) => ( ))} - - - Share this post: - - - - - - - - - - - - - - - + From 3d2a24d51fe5edfc31e0d643fbe1ad7ea8ae5012 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 25 Mar 2024 16:27:34 +0200 Subject: [PATCH 16/34] fix postPage --- .../src/pages/content/@slug/PostPage.tsx | 45 ++++++++++++++++++- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/workspaces/website/src/pages/content/@slug/PostPage.tsx b/workspaces/website/src/pages/content/@slug/PostPage.tsx index ff004ae2bb..b6b11774ca 100644 --- a/workspaces/website/src/pages/content/@slug/PostPage.tsx +++ b/workspaces/website/src/pages/content/@slug/PostPage.tsx @@ -10,6 +10,7 @@ import { Grid, HStack, Heading, + Icon, Img, useBreakpointValue, } from "@chakra-ui/react"; @@ -37,7 +38,16 @@ import { BlogBreadcrumbs } from "@ui/Blog/BlogBreadcrumbs"; import SideStickyBanner from "@ui/SideStickyBanner/SideStickyBanner"; import SideStickyBannerCard from "@ui/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard"; import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcenents"; -import SocialShare from "./SocialShare/SocialShare"; +import { + FacebookShareButton, + LinkedinShareButton, + TwitterShareButton, +} from "react-share"; +import { + AiFillFacebook, + AiFillLinkedin, + AiOutlineTwitter, +} from "react-icons/ai"; /** * Export `Props` type. @@ -252,7 +262,38 @@ export function PostPage(props: Props): JSX.Element { ))} - + + Share this post: + + + + + + + + + + + + + + + From 29e981781043e31d9141616e3daf8730fab9ac8c Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Tue, 26 Mar 2024 16:29:14 +0200 Subject: [PATCH 17/34] change files names --- .../{latest-announcenents.ts => latest-announcements.ts} | 1 + .../LivePreivewPage.tsx => components/LivePreviewPage.tsx} | 2 +- .../{(componnets) => components}/live-preview.css | 0 .../{(componnets) => components}/usePreviewData.ts | 0 .../website/src/pages/live-preview/index.page.server.ts | 4 ++-- workspaces/website/src/pages/live-preview/index.page.tsx | 2 +- 6 files changed, 5 insertions(+), 4 deletions(-) rename workspaces/cms-data/src/settings/{latest-announcenents.ts => latest-announcements.ts} (99%) rename workspaces/website/src/pages/live-preview/{(componnets)/LivePreivewPage.tsx => components/LivePreviewPage.tsx} (98%) rename workspaces/website/src/pages/live-preview/{(componnets) => components}/live-preview.css (100%) rename workspaces/website/src/pages/live-preview/{(componnets) => components}/usePreviewData.ts (100%) diff --git a/workspaces/cms-data/src/settings/latest-announcenents.ts b/workspaces/cms-data/src/settings/latest-announcements.ts similarity index 99% rename from workspaces/cms-data/src/settings/latest-announcenents.ts rename to workspaces/cms-data/src/settings/latest-announcements.ts index 603c7605ce..b0da342e68 100644 --- a/workspaces/cms-data/src/settings/latest-announcenents.ts +++ b/workspaces/cms-data/src/settings/latest-announcements.ts @@ -16,6 +16,7 @@ export async function getLatestAnnouncements( "data/latest-announcements/latest-announcements", context ); + return latestAnnouncements; } catch (cause) { throw new Error("getFeaturedSection failed!", { diff --git a/workspaces/website/src/pages/live-preview/(componnets)/LivePreivewPage.tsx b/workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx similarity index 98% rename from workspaces/website/src/pages/live-preview/(componnets)/LivePreivewPage.tsx rename to workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx index 9587c1724c..298c55cbcc 100644 --- a/workspaces/website/src/pages/live-preview/(componnets)/LivePreivewPage.tsx +++ b/workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx @@ -21,7 +21,7 @@ export interface Props { readonly roadmapVersions: readonly RoadmapVersion[]; } -export default function LivePreivewPage({ +export default function LivePreviewPage({ topics, categories, latestAnnouncements, diff --git a/workspaces/website/src/pages/live-preview/(componnets)/live-preview.css b/workspaces/website/src/pages/live-preview/components/live-preview.css similarity index 100% rename from workspaces/website/src/pages/live-preview/(componnets)/live-preview.css rename to workspaces/website/src/pages/live-preview/components/live-preview.css diff --git a/workspaces/website/src/pages/live-preview/(componnets)/usePreviewData.ts b/workspaces/website/src/pages/live-preview/components/usePreviewData.ts similarity index 100% rename from workspaces/website/src/pages/live-preview/(componnets)/usePreviewData.ts rename to workspaces/website/src/pages/live-preview/components/usePreviewData.ts diff --git a/workspaces/website/src/pages/live-preview/index.page.server.ts b/workspaces/website/src/pages/live-preview/index.page.server.ts index de2a7711d0..270155f22c 100644 --- a/workspaces/website/src/pages/live-preview/index.page.server.ts +++ b/workspaces/website/src/pages/live-preview/index.page.server.ts @@ -2,9 +2,9 @@ import { getCategories } from "@starknet-io/cms-data/src/categories"; import { getTopics } from "@starknet-io/cms-data/src/topics"; import { PageContextServer } from "src/renderer/types"; import { getDefaultPageContext } from "src/renderer/helpers"; -import { Props } from "./(componnets)/LivePreivewPage"; +import { Props } from "./components/LivePreviewPage"; import { getRoadmapVersions } from "@starknet-io/cms-data/src/roadmap"; -import { getLatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcenents"; +import { getLatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcements"; export async function onBeforeRender(pageContext: PageContextServer) { const defaultPageContext = await getDefaultPageContext(pageContext); diff --git a/workspaces/website/src/pages/live-preview/index.page.tsx b/workspaces/website/src/pages/live-preview/index.page.tsx index 733dca0e49..c2fce2455f 100644 --- a/workspaces/website/src/pages/live-preview/index.page.tsx +++ b/workspaces/website/src/pages/live-preview/index.page.tsx @@ -1 +1 @@ -export { default as Page } from "./(componnets)/LivePreivewPage"; \ No newline at end of file +export { default as Page } from "./components/LivePreviewPage"; From 16da690aad4b351224771ff618a54429912db1ee Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Tue, 26 Mar 2024 17:14:26 +0200 Subject: [PATCH 18/34] fixing stickySidebar --- _data/settings/latest-announcements.yml | 12 +- .../src/settings/latest-announcements.ts | 11 +- .../SideStickyBanner/SideStickyBanner.tsx | 1 + .../src/pages/(components)/CMSPage.tsx | 70 ++++++----- .../src/pages/content/@slug/PostPage.tsx | 22 ++-- .../pages/content/@slug/index.page.server.tsx | 6 +- .../components/LivePreviewPage.tsx | 4 +- .../@slug/(components)/RoadmapPost.tsx | 114 +++++++++++++----- 8 files changed, 152 insertions(+), 88 deletions(-) diff --git a/_data/settings/latest-announcements.yml b/_data/settings/latest-announcements.yml index e52b8f2d55..11fbf2ef27 100644 --- a/_data/settings/latest-announcements.yml +++ b/_data/settings/latest-announcements.yml @@ -1,10 +1,10 @@ - isActive: true - image: / - text: dfdf - buttonText: dfdf + image: https://s3-alpha-sig.figma.com/img/4f25/c2db/258212229ef560d9d1532f86afece898?Expires=1712534400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ao1axaEB3JqMVanh7MzyFZlST22jXH8441ELokTblRwulD~Q1IACgohvjJqQpekTgAoG4L9P4G~HZ0KD3l~kQjAXKpu8qhCjdCo2-l7ja-D-rQNyIUBO6i825yUjF~ufB6bxtI2nvQGAvPS5WeSlvqaWHhG7yqN~jIgOc6RALX0XPLAHMSjsNvztzP17pA6ru~9HcbylujwKoWJ66eIJX0d4FpiObXMGV7NwUdADh3A1yHlpnJG8XuqPYO8J9x~XMdBeq-l9tKiDVdJQxnZUjJRQ~PlGQGnuzhoi4h757vmHMGNvVbiUDPv6t952~1tzFrB06rwVI5Mxs6KJ3Bfmng__ + text: What are onramps and cross rollup bridges? + buttonText: See more buttonLink: / - isActive: true - image: / - text: sdfgsdfsg - buttonText: sdfgsdfg + image: https://s3-alpha-sig.figma.com/img/4f25/c2db/258212229ef560d9d1532f86afece898?Expires=1712534400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ao1axaEB3JqMVanh7MzyFZlST22jXH8441ELokTblRwulD~Q1IACgohvjJqQpekTgAoG4L9P4G~HZ0KD3l~kQjAXKpu8qhCjdCo2-l7ja-D-rQNyIUBO6i825yUjF~ufB6bxtI2nvQGAvPS5WeSlvqaWHhG7yqN~jIgOc6RALX0XPLAHMSjsNvztzP17pA6ru~9HcbylujwKoWJ66eIJX0d4FpiObXMGV7NwUdADh3A1yHlpnJG8XuqPYO8J9x~XMdBeq-l9tKiDVdJQxnZUjJRQ~PlGQGnuzhoi4h757vmHMGNvVbiUDPv6t952~1tzFrB06rwVI5Mxs6KJ3Bfmng__ + text: What are onramps and cross rollup bridges? + buttonText: See more buttonLink: / \ No newline at end of file diff --git a/workspaces/cms-data/src/settings/latest-announcements.ts b/workspaces/cms-data/src/settings/latest-announcements.ts index b0da342e68..927ea135ae 100644 --- a/workspaces/cms-data/src/settings/latest-announcements.ts +++ b/workspaces/cms-data/src/settings/latest-announcements.ts @@ -1,11 +1,11 @@ import { getJSON } from "@starknet-io/cms-utils/src/index"; export type LatestAnnouncements = { - image: string; - text: string; - buttonText: string; - buttonLink: string; - isActive: boolean; + readonly image: string; + readonly text: string; + readonly buttonText: string; + readonly buttonLink: string; + readonly isActive: boolean; }; export async function getLatestAnnouncements( @@ -16,6 +16,7 @@ export async function getLatestAnnouncements( "data/latest-announcements/latest-announcements", context ); + // console.log(latestAnnouncements); return latestAnnouncements; } catch (cause) { diff --git a/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx b/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx index cda07430b0..5adacf0931 100644 --- a/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx +++ b/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx @@ -13,6 +13,7 @@ const SideStickyBanner = ({ children }: NavbarStickyBannerProps) => { right={{ base: "unset", lg: "32px" }} width={{ base: "100%", lg: "225px" }} mt={{ base: 6, lg: "unset" }} + mb={{ base: 6, lg: "unset" }} p={3} gap={6} backgroundColor="surface" diff --git a/workspaces/website/src/pages/(components)/CMSPage.tsx b/workspaces/website/src/pages/(components)/CMSPage.tsx index 100e6dfaa6..b31a70267e 100644 --- a/workspaces/website/src/pages/(components)/CMSPage.tsx +++ b/workspaces/website/src/pages/(components)/CMSPage.tsx @@ -10,24 +10,20 @@ 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"; type CMSPageProps = { data: PageType; - env: { + 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; if (data?.hidden_page) { @@ -77,38 +73,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/content/@slug/PostPage.tsx b/workspaces/website/src/pages/content/@slug/PostPage.tsx index b6b11774ca..d695310942 100644 --- a/workspaces/website/src/pages/content/@slug/PostPage.tsx +++ b/workspaces/website/src/pages/content/@slug/PostPage.tsx @@ -37,7 +37,7 @@ import { BlogHit } from "../PostsPage"; import { BlogBreadcrumbs } from "@ui/Blog/BlogBreadcrumbs"; import SideStickyBanner from "@ui/SideStickyBanner/SideStickyBanner"; import SideStickyBannerCard from "@ui/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard"; -import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcenents"; +import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcements"; import { FacebookShareButton, LinkedinShareButton, @@ -59,7 +59,7 @@ export interface Props { }; readonly categories: readonly Category[]; readonly topics: readonly Topic[]; - readonly latestAnnouncements: LatestAnnouncements[]; + readonly latestAnnouncements: readonly LatestAnnouncements[]; readonly post: Post; readonly env?: { readonly ALGOLIA_INDEX: string; @@ -82,15 +82,14 @@ export interface MarkdownBlock { * Export `PostPage` component. */ -export function PostPage(props: Props): JSX.Element { - const { - params: { slug, locale }, - categories, - topics, - latestAnnouncements, - post, - env, - } = props; +export function PostPage({ + params: { slug, locale }, + categories, + topics, + latestAnnouncements, + post, + env, +}: Props): JSX.Element { const postCategories = categories.filter((c) => post.category.includes(c.id)); const videoId = post.post_type !== "article" ? post.video?.id : undefined; const shareUrl = `${env?.SITE_URL}/content/${slug}`; @@ -101,7 +100,6 @@ export function PostPage(props: Props): JSX.Element { env?.ALGOLIA_SEARCH_API_KEY ?? "" ); }, [env?.ALGOLIA_APP_ID, env?.ALGOLIA_SEARCH_API_KEY]); - console.log(latestAnnouncements, "latestAnnouncements"); return ( diff --git a/workspaces/website/src/pages/content/@slug/index.page.server.tsx b/workspaces/website/src/pages/content/@slug/index.page.server.tsx index 5fedb59ff5..4acb1ad868 100644 --- a/workspaces/website/src/pages/content/@slug/index.page.server.tsx +++ b/workspaces/website/src/pages/content/@slug/index.page.server.tsx @@ -8,6 +8,7 @@ import { getTopics } from "@starknet-io/cms-data/src/topics"; import { DocumentProps, PageContextServer } from "src/renderer/types"; import { Props } from "./PostPage"; import { getDefaultPageContext } from "src/renderer/helpers"; +import { getLatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcements"; /** * Export `onBeforeRender` function. @@ -21,10 +22,10 @@ export async function onBeforeRender(pageContext: PageContextServer) { pageContext.routeParams.slug, locale, pageContext.context - ) + ); const pageProps: Props = { - post , + post, categories: await getCategories(locale, pageContext.context), topics: await getTopics(locale, pageContext.context), env: { @@ -33,6 +34,7 @@ export async function onBeforeRender(pageContext: PageContextServer) { ALGOLIA_SEARCH_API_KEY: import.meta.env.VITE_ALGOLIA_SEARCH_API_KEY!, SITE_URL: import.meta.env.VITE_SITE_URL, }, + latestAnnouncements: await getLatestAnnouncements(pageContext.context), params: { locale, slug: pageContext.routeParams!.slug!, diff --git a/workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx b/workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx index 298c55cbcc..e54230c6fc 100644 --- a/workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx +++ b/workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx @@ -12,7 +12,7 @@ import RoadmapPost from "src/pages/roadmap/@slug/(components)/RoadmapPost"; import { RoadmapVersion } from "@starknet-io/cms-data/src/roadmap"; import RoadmapPostVersion from "src/pages/roadmap/(components)/RoadmapPostVersion"; import { PostPage } from "src/pages/content/@slug/PostPage"; -import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcenents"; +import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcements"; export interface Props { readonly categories: readonly Category[]; @@ -28,7 +28,7 @@ export default function LivePreviewPage({ roadmapVersions, }: Props) { const data = usePreviewData(); - + console.log(latestAnnouncements); return (
diff --git a/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx b/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx index 76bc6ce4d5..1130c527ea 100644 --- a/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx +++ b/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx @@ -23,48 +23,51 @@ import { RoadmapVersion, } from "@starknet-io/cms-data/src/roadmap"; import RoadmapPostVersion from "../../(components)/RoadmapPostVersion"; -import '@ui/CodeHighlight/code-highlight-init' +import "@ui/CodeHighlight/code-highlight-init"; interface KeyValuePairs { [key: string]: string; } const stages: KeyValuePairs = { - "completed": "Completed", + completed: "Completed", "building-now": "Building now", "building-next": "Building next", - "backlog": "Details are WIP", + backlog: "Details are WIP", }; export type RoadmapPostProps = { - env: { + env?: { CLOUDFLARE_RECAPTCHA_KEY: string; }; roadmapPost: RoadmapPostType; roadmapVersion?: RoadmapVersion; locale: string; psCopy?: string; -} +}; export default function RoadmapPost({ env, roadmapPost, locale, roadmapVersion, - psCopy + psCopy, }: RoadmapPostProps) { const [isOpen, setIsOpen] = useBoolean(false); useEffect(() => { const handleClick = (event: MouseEvent) => { const target = event.target as HTMLElement; - if (target.tagName === 'A' && (target as HTMLAnchorElement).getAttribute('href') === '#sendgrid') { + if ( + target.tagName === "A" && + (target as HTMLAnchorElement).getAttribute("href") === "#sendgrid" + ) { event.preventDefault(); - setIsOpen(true) + setIsOpen(true); } }; - document.addEventListener('click', handleClick); + document.addEventListener("click", handleClick); return () => { - document.removeEventListener('click', handleClick); + document.removeEventListener("click", handleClick); }; }, [setIsOpen]); @@ -73,11 +76,7 @@ export default function RoadmapPost({ breadcrumbs={ - + Home @@ -118,34 +117,93 @@ export default function RoadmapPost({ - + {roadmapPost.title} - + - STAGE: {stages[roadmapPost?.stage]} - - {roadmapPost.availability} + + STAGE: {stages[roadmapPost?.stage]} + + + {roadmapPost.availability} - {roadmapPost?.state ? {roadmapPost?.specific_info ? {roadmapPost?.specific_info} : null} : null} + {roadmapPost?.state ? ( + + {roadmapPost?.specific_info ? ( + + {roadmapPost?.specific_info} + + ) : null} + + ) : null} -
{roadmapPost?.state ? {roadmapPost?.state} : null}
+
+ {roadmapPost?.state ? ( + + {roadmapPost?.state} + + + ) : null} +
{roadmapPost.blocks?.map((block, i) => ( - + ))} - + } From 5d985e59b47bdfe20e75dc6e7592bccbeedeab51 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Tue, 26 Mar 2024 17:16:10 +0200 Subject: [PATCH 19/34] delete console.log --- workspaces/cms-data/src/settings/latest-announcements.ts | 1 - .../src/pages/live-preview/components/LivePreviewPage.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/workspaces/cms-data/src/settings/latest-announcements.ts b/workspaces/cms-data/src/settings/latest-announcements.ts index 927ea135ae..25b38e788f 100644 --- a/workspaces/cms-data/src/settings/latest-announcements.ts +++ b/workspaces/cms-data/src/settings/latest-announcements.ts @@ -16,7 +16,6 @@ export async function getLatestAnnouncements( "data/latest-announcements/latest-announcements", context ); - // console.log(latestAnnouncements); return latestAnnouncements; } catch (cause) { diff --git a/workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx b/workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx index e54230c6fc..220631ddd3 100644 --- a/workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx +++ b/workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx @@ -28,7 +28,7 @@ export default function LivePreviewPage({ roadmapVersions, }: Props) { const data = usePreviewData(); - console.log(latestAnnouncements); + return (
From 0e3b277c7facd05db20eae08517484f54bb6ba26 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Thu, 28 Mar 2024 14:25:51 +0200 Subject: [PATCH 20/34] fixing comments --- _data/pages/latest-announcements.yml | 1 - package.json | 1 - workspaces/cms-config/src/blocks.ts | 32 ------------ .../cms-config/src/collections/settings.ts | 2 +- .../src/settings/latest-announcements.ts | 2 +- workspaces/website/src/blocks/Block.tsx | 2 - .../LatestAnnouncementsBlock.tsx | 49 +++++++++++++++++++ .../SideStickyBanner/SideStickyBanner.tsx | 33 ------------- .../SideStickyBannerCard.tsx | 35 ------------- .../src/pages/content/@slug/PostPage.tsx | 16 +----- yarn.lock | 25 ---------- 11 files changed, 53 insertions(+), 145 deletions(-) delete mode 100644 _data/pages/latest-announcements.yml create mode 100644 workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx delete mode 100644 workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx delete mode 100644 workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx diff --git a/_data/pages/latest-announcements.yml b/_data/pages/latest-announcements.yml deleted file mode 100644 index 2caca619a6..0000000000 --- a/_data/pages/latest-announcements.yml +++ /dev/null @@ -1 +0,0 @@ -Title: Latest announcements \ No newline at end of file diff --git a/package.json b/package.json index bde0e81985..1660e7b6c2 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "@algolia/autocomplete-plugin-query-suggestions": "^1.9.2", "@algolia/autocomplete-plugin-recent-searches": "^1.9.2", "@algolia/autocomplete-theme-classic": "^1.9.2", - "@chakra-ui/icons": "^2.1.1", "@chakra-ui/pro-theme": "^0.0.66", "@chakra-ui/react": "^2.6.0", "@crowdin/cli": "^3.11.0", diff --git a/workspaces/cms-config/src/blocks.ts b/workspaces/cms-config/src/blocks.ts index c1b6b2658e..2dd846672d 100644 --- a/workspaces/cms-config/src/blocks.ts +++ b/workspaces/cms-config/src/blocks.ts @@ -793,38 +793,6 @@ export const blocks = [ }, ], }, - { - name: "side_sticky_banner_card", - label: "Side Sticky Banner Card", - widget: "object", - fields: [ - { - name: "text", - widget: "string", - crowdin: true, - }, - { - name: "buttonText", - widget: "string", - crowdin: true, - }, - { - name: "buttonLink", - widget: "string", - crowdin: true, - }, - { - name: "image", - widget: "string", - crowdin: true, - }, - { - name: "isActive", - widget: "boolean", - default: false, - }, - ], - }, ] satisfies CmsFieldList["types"]; const flexLayout = { diff --git a/workspaces/cms-config/src/collections/settings.ts b/workspaces/cms-config/src/collections/settings.ts index 90ffd3ba95..a5853f44ce 100644 --- a/workspaces/cms-config/src/collections/settings.ts +++ b/workspaces/cms-config/src/collections/settings.ts @@ -394,7 +394,7 @@ export const settingsCollectionConfig = { fields: [ { name: "image", - widget: "string", + widget: "image", crowdin: false, }, { diff --git a/workspaces/cms-data/src/settings/latest-announcements.ts b/workspaces/cms-data/src/settings/latest-announcements.ts index 25b38e788f..93c5879cfb 100644 --- a/workspaces/cms-data/src/settings/latest-announcements.ts +++ b/workspaces/cms-data/src/settings/latest-announcements.ts @@ -19,7 +19,7 @@ export async function getLatestAnnouncements( return latestAnnouncements; } catch (cause) { - throw new Error("getFeaturedSection failed!", { + throw new Error("getLatestAnnouncements failed!", { cause, }); } diff --git a/workspaces/website/src/blocks/Block.tsx b/workspaces/website/src/blocks/Block.tsx index 07c965b370..456c39706b 100644 --- a/workspaces/website/src/blocks/Block.tsx +++ b/workspaces/website/src/blocks/Block.tsx @@ -21,8 +21,6 @@ import { HeadingContainer } from "./HeadingContainer"; import VideoSectionBlock from "./VideoSectionBlock"; import { NewsletterCard } from "@ui/Card/NewsletterCard"; import { YoutubePlayer } from "@ui/YoutubePlayer/YoutubePlayer"; -import SideStickyBanner from "@ui/SideStickyBanner/SideStickyBanner"; -import SideStickyBannerCard from "@ui/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard"; interface Props { disallowH1?: boolean; diff --git a/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx b/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx new file mode 100644 index 0000000000..d572464749 --- /dev/null +++ b/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx @@ -0,0 +1,49 @@ +import { Box, Text, Image, Heading } from "@chakra-ui/react"; +import { Link } from "@chakra-ui/react"; + +import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcements"; + +interface NavbarStickyBannerProps { + readonly list: readonly LatestAnnouncements[]; +} + +const LatestAnnouncementsBlock = ({ list }: NavbarStickyBannerProps) => { + const gtmEvent = (target: string) => + window.gtag?.("event", target, { event_category: "engagement" }); + + const onReadMore = () => gtmEvent("Latest_announcement_read_more"); + return ( + + + Latest announcements + + + {list.map((item) => ( + + {item.image} + + {item.text} + + + {item.buttonText} -{">"} + + + ))} + + + ); +}; + +export default LatestAnnouncementsBlock; diff --git a/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx b/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx deleted file mode 100644 index 5adacf0931..0000000000 --- a/workspaces/website/src/components/SideStickyBanner/SideStickyBanner.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Box, Heading } from "@chakra-ui/react"; -import { ReactNode } from "react"; - -interface NavbarStickyBannerProps { - children: ReactNode; -} - -const SideStickyBanner = ({ children }: NavbarStickyBannerProps) => { - return ( - - - Latest announcements - - - {children} - - - ); -}; - -export default SideStickyBanner; diff --git a/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx b/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx deleted file mode 100644 index fac548fbc6..0000000000 --- a/workspaces/website/src/components/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Box, Text, Image } from "@chakra-ui/react"; -import { Link } from "@chakra-ui/react"; -import { ArrowForwardIcon } from "@chakra-ui/icons"; - -interface LatestAnnouncementCardProps { - image: string; - text: string; - buttonText: string; - buttonLink: string; -} -const SideStickyBannerCard = ({ - image, - text, - buttonText, - buttonLink, -}: LatestAnnouncementCardProps) => { - const gtmEvent = (target: string) => - window.gtag?.("event", target, { event_category: "engagement" }); - - const onReadMore = () => gtmEvent("Latest_announcement_read_more"); - - return ( - - {image} - - {text} - - - {buttonText} - - - ); -}; - -export default SideStickyBannerCard; diff --git a/workspaces/website/src/pages/content/@slug/PostPage.tsx b/workspaces/website/src/pages/content/@slug/PostPage.tsx index d695310942..de3980560c 100644 --- a/workspaces/website/src/pages/content/@slug/PostPage.tsx +++ b/workspaces/website/src/pages/content/@slug/PostPage.tsx @@ -35,8 +35,7 @@ import algoliasearch from "algoliasearch"; import { BlogCard } from "@ui/Blog/BlogCard"; import { BlogHit } from "../PostsPage"; import { BlogBreadcrumbs } from "@ui/Blog/BlogBreadcrumbs"; -import SideStickyBanner from "@ui/SideStickyBanner/SideStickyBanner"; -import SideStickyBannerCard from "@ui/SideStickyBanner/SideStickyBannerCard/SideStickyBannerCard"; +import LatestAnnouncementsBlock from "@ui/LatestAnnouncementsBlock/LatestAnnouncementsBlock"; import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcements"; import { FacebookShareButton, @@ -314,18 +313,7 @@ export function PostPage({ }} /> {latestAnnouncements && ( - - {latestAnnouncements.map((announcement) => - announcement.isActive ? ( - - ) : null - )} - + )} diff --git a/yarn.lock b/yarn.lock index d8ef19bcdb..aa134bfe2f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2032,30 +2032,6 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/icon@npm:3.2.0": - version: 3.2.0 - resolution: "@chakra-ui/icon@npm:3.2.0" - dependencies: - "@chakra-ui/shared-utils": 2.0.5 - peerDependencies: - "@chakra-ui/system": ">=2.0.0" - react: ">=18" - checksum: d417e2b343837d6862eb37739e3d02b8e8bbeeefa4c7e4f1d4a7fcfcdf1c7a4401de9094d7a08ba1419f73465ab30456427f8dbf2f2ffe29b77a14ad4b341b00 - languageName: node - linkType: hard - -"@chakra-ui/icons@npm:^2.1.1": - version: 2.1.1 - resolution: "@chakra-ui/icons@npm:2.1.1" - dependencies: - "@chakra-ui/icon": 3.2.0 - peerDependencies: - "@chakra-ui/system": ">=2.0.0" - react: ">=18" - checksum: b7acf209bcb8f40494e5be64195c1f6b6d31bd425342731892b577ded6b3d02bc0399be18c3c503cf19086d1b89bcda71a3570c797a5c1b09bd5de997cee359b - languageName: node - linkType: hard - "@chakra-ui/image@npm:2.0.16": version: 2.0.16 resolution: "@chakra-ui/image@npm:2.0.16" @@ -4792,7 +4768,6 @@ __metadata: "@algolia/autocomplete-plugin-recent-searches": ^1.9.2 "@algolia/autocomplete-theme-classic": ^1.9.2 "@chakra-ui/cli": ^2.4.0 - "@chakra-ui/icons": ^2.1.1 "@chakra-ui/pro-theme": ^0.0.66 "@chakra-ui/react": ^2.6.0 "@crowdin/cli": ^3.11.0 From a3ae8895be0c61eefea6367e804b0d550860469d Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Sun, 31 Mar 2024 21:10:57 +0300 Subject: [PATCH 21/34] fix id error. --- .../LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx b/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx index d572464749..b7c9280296 100644 --- a/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx +++ b/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx @@ -31,7 +31,7 @@ const LatestAnnouncementsBlock = ({ list }: NavbarStickyBannerProps) => { {list.map((item) => ( - + {item.image} {item.text} From 9139efd2c63d52dbb0f35c91061c02c7b3836092 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 1 Apr 2024 11:14:22 +0300 Subject: [PATCH 22/34] fixing UI --- .../LatestAnnouncementsBlock.tsx | 39 ++++++++++++++++--- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx b/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx index b7c9280296..23222deea9 100644 --- a/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx +++ b/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx @@ -15,7 +15,7 @@ const LatestAnnouncementsBlock = ({ list }: NavbarStickyBannerProps) => { return ( { borderRadius={8} zIndex={{ base: "unset", lg: 100 }} > - + Latest announcements {list.map((item) => ( - - {item.image} - + + {item.image} + {item.text} - + {item.buttonText} -{">"} From 110425b3af140be17ed3aedbcdea09838b9b1b02 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 1 Apr 2024 11:29:53 +0300 Subject: [PATCH 23/34] changing gtmEvent to generic function --- workspaces/website/functions/[[route]].ts | 94 +++++++++++-------- .../LatestAnnouncementsBlock.tsx | 5 +- .../ProvisionsPopup/ProvisionsPopup.tsx | 5 +- .../NavbarStickyBanner/NavbarStickyBanner.tsx | 4 +- 4 files changed, 56 insertions(+), 52 deletions(-) diff --git a/workspaces/website/functions/[[route]].ts b/workspaces/website/functions/[[route]].ts index 92e6eb19cc..c0d7c3ef29 100644 --- a/workspaces/website/functions/[[route]].ts +++ b/workspaces/website/functions/[[route]].ts @@ -10,11 +10,14 @@ router.all("/api/*", (req, context) => apiRouter.handle(req, context.env)); redirects.items.forEach(({ source, destination }) => { router.get( source, - (req: IRequest, context: EventContext<{}, any, Record>) => { - let src = destination + ( + req: IRequest, + context: EventContext<{}, any, Record> + ) => { + let src = destination; for (const [key, value] of Object.entries(req.params)) { - src = src.replace(new RegExp(`:${key}\\+?`), value) + src = src.replace(new RegExp(`:${key}\\+?`), value); } return Response.redirect(new URL(src, req.url), 301); @@ -27,30 +30,35 @@ redirects.items.forEach(({ source, destination }) => { */ router.get( - '/:locale?/posts/:category', + "/:locale?/posts/:category", (req: IRequest, _context: EventContext<{}, any, Record>) => { return Response.redirect( new URL( - `${req.params.locale ? `/${req.params.locale}` : ``}/content/category/${req.params.category}`, + `${req.params.locale ? `/${req.params.locale}` : ``}/content/category/${ + req.params.category + }`, req.url - ), - 301); + ), + 301 + ); } ); router.get( - '/:locale?/posts/:cat/:slug', + "/:locale?/posts/:cat/:slug", (req: IRequest, _context: EventContext<{}, any, Record>) => { return Response.redirect( new URL( - `${req.params.locale ? `/${req.params.locale}` : ``}/content/${req.params.slug}`, + `${req.params.locale ? `/${req.params.locale}` : ``}/content/${ + req.params.slug + }`, req.url ), - 301); + 301 + ); } ); - async function ittyAssetshandler( req: IRequest, context: EventContext<{}, any, Record> @@ -66,41 +74,45 @@ router.get("/assets/*", ittyAssetshandler); router.get("/sitemap.xml", ittyAssetshandler); router.all("/data/*", preflight); -router.get("/data/*", async (req, context: EventContext<{}, any, Record>) => { - return corsify(await context.env.ASSETS.fetch(req)); -}); - -router.all("*", async (req, context: EventContext<{}, any, Record>) => { - const userAgent = req.headers.get("User-Agent")!; - - const pageContextInit = { - context, - urlOriginal: req.url, - fetch, - userAgent, - }; - - const pageContext: any = await renderPage(pageContextInit); - - if (pageContext.redirectTo) { - return Response.redirect( - new URL(pageContext.redirectTo, req.url), - 301 - ); - } else if (pageContext.httpResponse != null) { - return new Response(pageContext.httpResponse.getReadableWebStream(), { - headers: { "content-type": pageContext.httpResponse.contentType }, - status: pageContext.httpResponse.statusCode, - }); +router.get( + "/data/*", + async (req, context: EventContext<{}, any, Record>) => { + return corsify(await context.env.ASSETS.fetch(req)); } +); - return context.env.ASSETS.fetch(req); -}); +router.all( + "*", + async (req, context: EventContext<{}, any, Record>) => { + const userAgent = req.headers.get("User-Agent")!; + + const pageContextInit = { + context, + urlOriginal: req.url, + fetch, + userAgent, + }; + + const pageContext: any = await renderPage(pageContextInit); + + if (pageContext.redirectTo) { + return Response.redirect(new URL(pageContext.redirectTo, req.url), 301); + } else if (pageContext.httpResponse != null) { + return new Response(pageContext.httpResponse.getReadableWebStream(), { + headers: { "content-type": pageContext.httpResponse.contentType }, + status: pageContext.httpResponse.statusCode, + }); + } + return context.env.ASSETS.fetch(req); + } +); export const onRequest: PagesFunction<{}> = async (context) => { return router.handle(context.request, context).catch((err) => { console.error(err); return new Response("Internal Error", { status: 500 }); - }) -} + }); +}; +export const gtmEvent = (target: string) => + window.gtag?.("event", target, { event_category: "engagement" }); diff --git a/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx b/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx index 23222deea9..dac44e1f94 100644 --- a/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx +++ b/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx @@ -1,16 +1,13 @@ import { Box, Text, Image, Heading } from "@chakra-ui/react"; import { Link } from "@chakra-ui/react"; - import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcements"; +import { gtmEvent } from "functions/[[route]]"; interface NavbarStickyBannerProps { readonly list: readonly LatestAnnouncements[]; } const LatestAnnouncementsBlock = ({ list }: NavbarStickyBannerProps) => { - const gtmEvent = (target: string) => - window.gtag?.("event", target, { event_category: "engagement" }); - const onReadMore = () => gtmEvent("Latest_announcement_read_more"); return ( { const isSsr = typeof window === "undefined"; @@ -13,10 +14,6 @@ const ProvisionsPopup = () => { "isProvisionsPopupOpen", !isSsr ); - - const gtmEvent = (target: string) => - window.gtag?.("event", target, { event_category: "engagement" }); - const onClose = (event: React.MouseEvent) => { event.stopPropagation(); gtmEvent("Provisions_popup_close"); diff --git a/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx b/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx index c39d807510..ed12dc5d3d 100644 --- a/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx +++ b/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx @@ -5,6 +5,7 @@ import { useMemo } from "react"; import { useLocalStorage } from "usehooks-ts"; import { sha256 } from "js-sha256"; import ClientOnly from "../ClientOnly"; +import { gtmEvent } from "functions/[[route]]"; interface NavbarStickyBannerProps { text: string; @@ -27,9 +28,6 @@ const NavbarStickyBanner = ({ true ); - const gtmEvent = (target: string) => - window.gtag?.("event", target, { event_category: "engagement" }); - const onClose = () => { gtmEvent("Navbar_banner_close"); setIsOpenStorage(false); From c8ec3be092e032fc1c225df05b5c7b70f5292de6 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 1 Apr 2024 12:17:02 +0300 Subject: [PATCH 24/34] changing gtm function location --- workspaces/website/functions/[[route]].ts | 2 -- .../LatestAnnouncementsBlock.tsx | 17 +++++++++++------ .../ProvisionsPopup/ProvisionsPopup.tsx | 2 +- .../NavbarStickyBanner/NavbarStickyBanner.tsx | 2 +- workspaces/website/src/utils/utils.ts | 10 ++++++---- 5 files changed, 19 insertions(+), 14 deletions(-) diff --git a/workspaces/website/functions/[[route]].ts b/workspaces/website/functions/[[route]].ts index c0d7c3ef29..449631fed0 100644 --- a/workspaces/website/functions/[[route]].ts +++ b/workspaces/website/functions/[[route]].ts @@ -114,5 +114,3 @@ export const onRequest: PagesFunction<{}> = async (context) => { return new Response("Internal Error", { status: 500 }); }); }; -export const gtmEvent = (target: string) => - window.gtag?.("event", target, { event_category: "engagement" }); diff --git a/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx b/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx index dac44e1f94..3c62fea0db 100644 --- a/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx +++ b/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx @@ -1,7 +1,7 @@ import { Box, Text, Image, Heading } from "@chakra-ui/react"; import { Link } from "@chakra-ui/react"; import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcements"; -import { gtmEvent } from "functions/[[route]]"; +import { gtmEvent } from "src/utils/utils"; interface NavbarStickyBannerProps { readonly list: readonly LatestAnnouncements[]; @@ -17,8 +17,8 @@ const LatestAnnouncementsBlock = ({ list }: NavbarStickyBannerProps) => { width={{ base: "100%", lg: "225px" }} mt={{ base: 6, lg: "unset" }} mb={{ base: 6, lg: "unset" }} - p={3} - gap={6} + p={{ base: 4, lg: 3 }} + gap={{ lg: 6 }} backgroundColor="surface" borderRadius={8} zIndex={{ base: "unset", lg: 100 }} @@ -34,15 +34,20 @@ const LatestAnnouncementsBlock = ({ list }: NavbarStickyBannerProps) => { > Latest announcements - + {list.map((item) => ( {item.image} { const isSsr = typeof window === "undefined"; diff --git a/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx b/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx index ed12dc5d3d..af38794071 100644 --- a/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx +++ b/workspaces/website/src/pages/(components)/NavbarStickyBanner/NavbarStickyBanner.tsx @@ -5,7 +5,7 @@ import { useMemo } from "react"; import { useLocalStorage } from "usehooks-ts"; import { sha256 } from "js-sha256"; import ClientOnly from "../ClientOnly"; -import { gtmEvent } from "functions/[[route]]"; +import { gtmEvent } from "src/utils/utils"; interface NavbarStickyBannerProps { text: string; diff --git a/workspaces/website/src/utils/utils.ts b/workspaces/website/src/utils/utils.ts index 2a2001ec0f..dcd1355421 100644 --- a/workspaces/website/src/utils/utils.ts +++ b/workspaces/website/src/utils/utils.ts @@ -10,8 +10,8 @@ export function getComputedLinkData( locale: string, link?: LinkData ): { href?: string; label?: string } { - if(!link){ - return {href: '', label: ''} + if (!link) { + return { href: "", label: "" }; } let href; @@ -28,8 +28,8 @@ export function getComputedLinkData( href = `/${locale}/content/${link.post_data.slug}`; } - if(!href){ - href = '#' + if (!href) { + href = "#"; } return { href, label }; @@ -49,3 +49,5 @@ export function loadScript(url: string) { head.appendChild(script); }); } +export const gtmEvent = (target: string) => + window.gtag?.("event", target, { event_category: "engagement" }); From b6348c4b01a0af09fdc8afc148ee89282f022f69 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 1 Apr 2024 14:54:10 +0300 Subject: [PATCH 25/34] fix comments --- .../LatestAnnouncement.tsx} | 6 ++++-- workspaces/website/src/pages/content/@slug/PostPage.tsx | 6 ++---- 2 files changed, 6 insertions(+), 6 deletions(-) rename workspaces/website/src/components/{LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx => LatestAnnouncement/LatestAnnouncement.tsx} (92%) diff --git a/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx b/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx similarity index 92% rename from workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx rename to workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx index 3c62fea0db..c56f7b1676 100644 --- a/workspaces/website/src/components/LatestAnnouncementsBlock/LatestAnnouncementsBlock.tsx +++ b/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx @@ -7,8 +7,10 @@ interface NavbarStickyBannerProps { readonly list: readonly LatestAnnouncements[]; } -const LatestAnnouncementsBlock = ({ list }: NavbarStickyBannerProps) => { +const LatestAnnouncement = ({ list }: NavbarStickyBannerProps) => { + if (!list.filter(({ isActive }) => !isActive).length) return null; const onReadMore = () => gtmEvent("Latest_announcement_read_more"); + return ( { ); }; -export default LatestAnnouncementsBlock; +export default LatestAnnouncement; diff --git a/workspaces/website/src/pages/content/@slug/PostPage.tsx b/workspaces/website/src/pages/content/@slug/PostPage.tsx index de3980560c..fb989efad0 100644 --- a/workspaces/website/src/pages/content/@slug/PostPage.tsx +++ b/workspaces/website/src/pages/content/@slug/PostPage.tsx @@ -35,7 +35,6 @@ import algoliasearch from "algoliasearch"; import { BlogCard } from "@ui/Blog/BlogCard"; import { BlogHit } from "../PostsPage"; import { BlogBreadcrumbs } from "@ui/Blog/BlogBreadcrumbs"; -import LatestAnnouncementsBlock from "@ui/LatestAnnouncementsBlock/LatestAnnouncementsBlock"; import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcements"; import { FacebookShareButton, @@ -47,6 +46,7 @@ import { AiFillLinkedin, AiOutlineTwitter, } from "react-icons/ai"; +import LatestAnnouncement from "@ui/LatestAnnouncement/LatestAnnouncement"; /** * Export `Props` type. @@ -312,9 +312,7 @@ export function PostPage({ locale: [locale], }} /> - {latestAnnouncements && ( - - )} + From 3caca4d2b638b7f7ef23790f95a6fe1a96f8a418 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 1 Apr 2024 14:55:07 +0300 Subject: [PATCH 26/34] return () --- .../{components => (components)}/LivePreviewPage.tsx | 0 .../live-preview/{components => (components)}/live-preview.css | 0 .../live-preview/{components => (components)}/usePreviewData.ts | 0 workspaces/website/src/pages/live-preview/index.page.server.ts | 2 +- workspaces/website/src/pages/live-preview/index.page.tsx | 2 +- 5 files changed, 2 insertions(+), 2 deletions(-) rename workspaces/website/src/pages/live-preview/{components => (components)}/LivePreviewPage.tsx (100%) rename workspaces/website/src/pages/live-preview/{components => (components)}/live-preview.css (100%) rename workspaces/website/src/pages/live-preview/{components => (components)}/usePreviewData.ts (100%) diff --git a/workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx b/workspaces/website/src/pages/live-preview/(components)/LivePreviewPage.tsx similarity index 100% rename from workspaces/website/src/pages/live-preview/components/LivePreviewPage.tsx rename to workspaces/website/src/pages/live-preview/(components)/LivePreviewPage.tsx diff --git a/workspaces/website/src/pages/live-preview/components/live-preview.css b/workspaces/website/src/pages/live-preview/(components)/live-preview.css similarity index 100% rename from workspaces/website/src/pages/live-preview/components/live-preview.css rename to workspaces/website/src/pages/live-preview/(components)/live-preview.css diff --git a/workspaces/website/src/pages/live-preview/components/usePreviewData.ts b/workspaces/website/src/pages/live-preview/(components)/usePreviewData.ts similarity index 100% rename from workspaces/website/src/pages/live-preview/components/usePreviewData.ts rename to workspaces/website/src/pages/live-preview/(components)/usePreviewData.ts diff --git a/workspaces/website/src/pages/live-preview/index.page.server.ts b/workspaces/website/src/pages/live-preview/index.page.server.ts index 270155f22c..fa5fb37ed7 100644 --- a/workspaces/website/src/pages/live-preview/index.page.server.ts +++ b/workspaces/website/src/pages/live-preview/index.page.server.ts @@ -2,7 +2,7 @@ import { getCategories } from "@starknet-io/cms-data/src/categories"; import { getTopics } from "@starknet-io/cms-data/src/topics"; import { PageContextServer } from "src/renderer/types"; import { getDefaultPageContext } from "src/renderer/helpers"; -import { Props } from "./components/LivePreviewPage"; +import { Props } from "./(components)/LivePreviewPage"; import { getRoadmapVersions } from "@starknet-io/cms-data/src/roadmap"; import { getLatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcements"; diff --git a/workspaces/website/src/pages/live-preview/index.page.tsx b/workspaces/website/src/pages/live-preview/index.page.tsx index c2fce2455f..77763ffeb7 100644 --- a/workspaces/website/src/pages/live-preview/index.page.tsx +++ b/workspaces/website/src/pages/live-preview/index.page.tsx @@ -1 +1 @@ -export { default as Page } from "./components/LivePreviewPage"; +export { default as Page } from "./(components)/LivePreviewPage"; From 9ec71e39b2e7e44d1af212aae4d170708bf00745 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 1 Apr 2024 15:30:31 +0300 Subject: [PATCH 27/34] fixing LatestAnnouncement layout --- _data/settings/latest-announcements.yml | 4 +-- .../LatestAnnouncement/LatestAnnouncement.tsx | 35 +++++++++++++------ .../src/pages/content/@slug/PostPage.tsx | 13 ++++--- 3 files changed, 35 insertions(+), 17 deletions(-) diff --git a/_data/settings/latest-announcements.yml b/_data/settings/latest-announcements.yml index 11fbf2ef27..68a2628fe8 100644 --- a/_data/settings/latest-announcements.yml +++ b/_data/settings/latest-announcements.yml @@ -1,10 +1,10 @@ - isActive: true - image: https://s3-alpha-sig.figma.com/img/4f25/c2db/258212229ef560d9d1532f86afece898?Expires=1712534400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ao1axaEB3JqMVanh7MzyFZlST22jXH8441ELokTblRwulD~Q1IACgohvjJqQpekTgAoG4L9P4G~HZ0KD3l~kQjAXKpu8qhCjdCo2-l7ja-D-rQNyIUBO6i825yUjF~ufB6bxtI2nvQGAvPS5WeSlvqaWHhG7yqN~jIgOc6RALX0XPLAHMSjsNvztzP17pA6ru~9HcbylujwKoWJ66eIJX0d4FpiObXMGV7NwUdADh3A1yHlpnJG8XuqPYO8J9x~XMdBeq-l9tKiDVdJQxnZUjJRQ~PlGQGnuzhoi4h757vmHMGNvVbiUDPv6t952~1tzFrB06rwVI5Mxs6KJ3Bfmng__ + image: public/assets/1_mrdbx-inf3bcska9lmnoya-1.png text: What are onramps and cross rollup bridges? buttonText: See more buttonLink: / - isActive: true - image: https://s3-alpha-sig.figma.com/img/4f25/c2db/258212229ef560d9d1532f86afece898?Expires=1712534400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ao1axaEB3JqMVanh7MzyFZlST22jXH8441ELokTblRwulD~Q1IACgohvjJqQpekTgAoG4L9P4G~HZ0KD3l~kQjAXKpu8qhCjdCo2-l7ja-D-rQNyIUBO6i825yUjF~ufB6bxtI2nvQGAvPS5WeSlvqaWHhG7yqN~jIgOc6RALX0XPLAHMSjsNvztzP17pA6ru~9HcbylujwKoWJ66eIJX0d4FpiObXMGV7NwUdADh3A1yHlpnJG8XuqPYO8J9x~XMdBeq-l9tKiDVdJQxnZUjJRQ~PlGQGnuzhoi4h757vmHMGNvVbiUDPv6t952~1tzFrB06rwVI5Mxs6KJ3Bfmng__ + image: public/assets/1_mrdbx-inf3bcska9lmnoya-1.png text: What are onramps and cross rollup bridges? buttonText: See more buttonLink: / \ No newline at end of file diff --git a/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx b/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx index c56f7b1676..44472224ef 100644 --- a/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx +++ b/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx @@ -1,21 +1,24 @@ -import { Box, Text, Image, Heading } from "@chakra-ui/react"; +import { Box, Text, Heading, FlexProps } from "@chakra-ui/react"; import { Link } from "@chakra-ui/react"; import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcements"; +import { Image } from "@ui/ArticleCard/ArticleCard"; import { gtmEvent } from "src/utils/utils"; -interface NavbarStickyBannerProps { +interface NavbarStickyBannerProps extends FlexProps { readonly list: readonly LatestAnnouncements[]; } -const LatestAnnouncement = ({ list }: NavbarStickyBannerProps) => { - if (!list.filter(({ isActive }) => !isActive).length) return null; +const LatestAnnouncement = ({ list, ...rest }: NavbarStickyBannerProps) => { + if (list.filter(({ isActive }) => !isActive).length) return null; + const onReadMore = () => gtmEvent("Latest_announcement_read_more"); return ( { gap={{ lg: 6 }} backgroundColor="surface" borderRadius={8} - zIndex={{ base: "unset", lg: 100 }} + {...rest} > { {list.map((item) => ( {item.image} + + - @@ -312,7 +316,6 @@ export function PostPage({ locale: [locale], }} /> - From bb472a3a6dde1594b4d47ae57a9032444ffd2282 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 1 Apr 2024 15:48:44 +0300 Subject: [PATCH 28/34] change images for demonstration --- _data/settings/latest-announcements.yml | 4 ++-- .../LatestAnnouncement/LatestAnnouncement.tsx | 12 ------------ 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/_data/settings/latest-announcements.yml b/_data/settings/latest-announcements.yml index 68a2628fe8..4c50ecbccc 100644 --- a/_data/settings/latest-announcements.yml +++ b/_data/settings/latest-announcements.yml @@ -1,10 +1,10 @@ - isActive: true - image: public/assets/1_mrdbx-inf3bcska9lmnoya-1.png + image: https://www.starknet.io/assets/final-.jpeg text: What are onramps and cross rollup bridges? buttonText: See more buttonLink: / - isActive: true - image: public/assets/1_mrdbx-inf3bcska9lmnoya-1.png + image: https://www.starknet.io/assets/guide-image-3-.jpg text: What are onramps and cross rollup bridges? buttonText: See more buttonLink: / \ No newline at end of file diff --git a/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx b/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx index 44472224ef..04bd0da4e4 100644 --- a/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx +++ b/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx @@ -53,18 +53,6 @@ const LatestAnnouncement = ({ list, ...rest }: NavbarStickyBannerProps) => { borderRadius={8} width={{ base: "375px", lg: "200px" }} height={{ base: "186px", lg: "100px" }} - sx={{ - img: { - aspectRatio: 16 / 9, - filter: "blur(6px)", - objectFit: "cover !important", - transform: "scale(1.05)", - transition: "transform 0.4s ease-in-out", - width: "100%", - minWidth: "100%", - zIndex: -1, - }, - }} /> Date: Mon, 1 Apr 2024 17:18:15 +0300 Subject: [PATCH 29/34] fixing issues with responsiveness --- .../LatestAnnouncement/LatestAnnouncement.tsx | 24 +++++++++++++------ .../src/pages/content/@slug/PostPage.tsx | 19 +++++++++------ 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx b/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx index 04bd0da4e4..4e95616ed6 100644 --- a/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx +++ b/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx @@ -2,17 +2,23 @@ import { Box, Text, Heading, FlexProps } from "@chakra-ui/react"; import { Link } from "@chakra-ui/react"; import { LatestAnnouncements } from "@starknet-io/cms-data/src/settings/latest-announcements"; import { Image } from "@ui/ArticleCard/ArticleCard"; +import { useMemo } from "react"; import { gtmEvent } from "src/utils/utils"; -interface NavbarStickyBannerProps extends FlexProps { +interface LatestAnnouncementProps extends FlexProps { readonly list: readonly LatestAnnouncements[]; } -const LatestAnnouncement = ({ list, ...rest }: NavbarStickyBannerProps) => { - if (list.filter(({ isActive }) => !isActive).length) return null; +const LatestAnnouncement = ({ list, ...rest }: LatestAnnouncementProps) => { + const LatestAnnouncementList = useMemo( + () => list.filter(({ isActive }) => isActive), + [] + ); const onReadMore = () => gtmEvent("Latest_announcement_read_more"); + if (!LatestAnnouncementList.length) return null; + return ( { - {list.map((item) => ( - + {LatestAnnouncementList.map((item) => ( + ) : null} - + {post.post_type === "article" ? ( @@ -296,7 +301,7 @@ export function PostPage({ From 6709f8326ac9d02687abadd7f23ffce393923583 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Tue, 2 Apr 2024 10:38:56 +0300 Subject: [PATCH 30/34] update UI --- .../LatestAnnouncement/LatestAnnouncement.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx b/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx index 4e95616ed6..88da1074f2 100644 --- a/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx +++ b/workspaces/website/src/components/LatestAnnouncement/LatestAnnouncement.tsx @@ -21,6 +21,7 @@ const LatestAnnouncement = ({ list, ...rest }: LatestAnnouncementProps) => { return ( { Latest announcements {LatestAnnouncementList.map((item) => ( Date: Tue, 2 Apr 2024 11:17:55 +0300 Subject: [PATCH 31/34] update UI --- .../src/pages/content/@slug/PostPage.tsx | 31 ++++++++++++++----- .../content/@slug/SocialShare/SocialShare.tsx | 18 +++++------ 2 files changed, 31 insertions(+), 18 deletions(-) diff --git a/workspaces/website/src/pages/content/@slug/PostPage.tsx b/workspaces/website/src/pages/content/@slug/PostPage.tsx index 17e6f47e88..5e1564d9e2 100644 --- a/workspaces/website/src/pages/content/@slug/PostPage.tsx +++ b/workspaces/website/src/pages/content/@slug/PostPage.tsx @@ -82,8 +82,8 @@ export function PostPage({ }: Props): JSX.Element { const postCategories = categories.filter((c) => post.category.includes(c.id)); const videoId = post.post_type !== "article" ? post.video?.id : undefined; - const shareUrl = `${env?.SITE_URL}/content/${slug}`; const isMobile = useBreakpointValue({ base: true, lg: false }); + const isTablet = useBreakpointValue({ base: true, xl: false }); const searchClient = useMemo(() => { return algoliasearch( env?.ALGOLIA_APP_ID ?? "", @@ -197,9 +197,11 @@ export function PostPage({ {post.post_desc} )} - - - + {isTablet && ( + + + + )} {post.post_type !== "article" && ( @@ -255,10 +257,23 @@ export function PostPage({ - + {!isTablet && ( + + + + + )} + {isTablet && ( + + )} diff --git a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx index 30e46fe3b7..8c7238e689 100644 --- a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx +++ b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx @@ -16,23 +16,21 @@ interface Props { const SocialShare = ({ params: { slug, locale } }: Props) => { const shareUrl = `${import.meta.env.VITE_SITE_URL}/${locale}/content/${slug}`; - const encodedUrl = encodeURIComponent(shareUrl); - const linkedinShareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`; - const handleLinkedinShare = () => window.open(linkedinShareUrl, "_blank"); return ( Share this post: @@ -45,8 +43,8 @@ const SocialShare = ({ params: { slug, locale } }: Props) => { { Date: Tue, 2 Apr 2024 11:36:11 +0300 Subject: [PATCH 32/34] push ui changes --- workspaces/website/src/pages/content/@slug/PostPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/workspaces/website/src/pages/content/@slug/PostPage.tsx b/workspaces/website/src/pages/content/@slug/PostPage.tsx index 5e1564d9e2..fcc1491396 100644 --- a/workspaces/website/src/pages/content/@slug/PostPage.tsx +++ b/workspaces/website/src/pages/content/@slug/PostPage.tsx @@ -259,7 +259,7 @@ export function PostPage({ {!isTablet && ( Date: Tue, 2 Apr 2024 11:39:20 +0300 Subject: [PATCH 33/34] fixing ui --- workspaces/website/src/pages/content/@slug/PostPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/workspaces/website/src/pages/content/@slug/PostPage.tsx b/workspaces/website/src/pages/content/@slug/PostPage.tsx index fcc1491396..978f16f529 100644 --- a/workspaces/website/src/pages/content/@slug/PostPage.tsx +++ b/workspaces/website/src/pages/content/@slug/PostPage.tsx @@ -259,7 +259,7 @@ export function PostPage({ {!isTablet && ( Date: Tue, 2 Apr 2024 16:58:16 +0300 Subject: [PATCH 34/34] fix Icons to be closer to the image --- workspaces/website/src/pages/content/@slug/PostPage.tsx | 6 +++--- .../src/pages/content/@slug/SocialShare/SocialShare.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/workspaces/website/src/pages/content/@slug/PostPage.tsx b/workspaces/website/src/pages/content/@slug/PostPage.tsx index 978f16f529..cb42d41b63 100644 --- a/workspaces/website/src/pages/content/@slug/PostPage.tsx +++ b/workspaces/website/src/pages/content/@slug/PostPage.tsx @@ -101,9 +101,9 @@ export function PostPage({ }} gridTemplateColumns={{ base: "1fr", - lg: "240px 1fr 240px", + lg: "240px 1fr 300px", }} - gridColumnGap={"105px"} + gridColumnGap={{ base: "105px", xl: "40px", "2xl": "80px" }} > {!isTablet && ( { top={{ base: "unset", lg: 100 }} mt={1} height="fit-content" - left={{ base: "unset", lg: "calc(100% - 460px)" }} + left={{ base: "unset", lg: "calc(100% - 600px)" }} > Share this post: