Fix homepage link issues

starknet-io · Sep 6, 2023 · c7a8e3a · c7a8e3a
1 parent 2c9e8f0
commit c7a8e3a
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 49 deletions.
diff --git a/_data/pages/home.yml b/_data/pages/home.yml
@@ -11,7 +11,8 @@ blocks:
     blocks:
       - type: page_header
         title: What do Ethereum + Starknet unlock?
-        description: "Together the networks unlock Ethereum’s vision for a fairer and
+        description:
+          "Together the networks unlock Ethereum’s vision for a fairer and
           more open internet. Decentralised financial systems. Digital assets.
           Trustless systems. "
         withMarginBottom: true
@@ -32,7 +33,8 @@ blocks:
         vertical1:
           img: /assets/superior-ux.png
           title: Superior UX
-          description: "Starknet offers efficient and user-friendly experiences by
+          description:
+            "Starknet offers efficient and user-friendly experiences by
             employing Native Account Abstraction.   All accounts are smart
             accounts: their behavior is determined by their developers rather
             than at the protocol level. This means unparalleled flexibility in
@@ -45,7 +47,8 @@ blocks:
         vertical2:
           img: /assets/thriving-ecosystem.png
           title: Thriving Ecosystem
-          description: Starknet's meteoric rise as a blockchain ecosystem is fueled by its
+          description:
+            Starknet's meteoric rise as a blockchain ecosystem is fueled by its
             passionate community of developers, users, and partners.   With the
             Starknet Stack evolving at an astounding pace, this vibrant
             collective has developed the most decentralized Rollup Stack,
@@ -72,60 +75,66 @@ blocks:
       - type: icon_link_card
         img: /assets/build-tutorials.svg
         title: Read the Docs
-        description: Read the official Starknet documentation to build your first
+        description:
+          Read the official Starknet documentation to build your first
           contracts and dapps.
         linkText: View ->
-        linkUrl: /tutorials/
+        linkUrl: https://docs.starknet.io/
         color: red
       - type: icon_link_card
         img: /assets/build_read_the_docs.svg
         title: Read the Starknet Book
-        description: Developed by the Starknet community, the Starknet book teaches
+        description:
+          Developed by the Starknet community, the Starknet book teaches
           Cairo programming and Starknet development. Start reading and conquer
           the Ethereum world.
         linkText: View ->
-        linkUrl: /documentation/
+        linkUrl: https://book.starknet.io/
         color: green
       - type: icon_link_card
         img: /assets/build_tools_resources.svg
         title: Set-up a Local Environment
-        description: Learn how to get your dev environment up and running so you can
+        description:
+          Learn how to get your dev environment up and running so you can
           start building.
         linkText: View ->
-        linkUrl: /developers/tools-and-resources/
+        linkUrl: https://docs.starknet.io/documentation/getting_started/environment_setup/
         color: blue
     heading_variant: h2
     base: 1
     md: 3
     type: flex_layout
     lg: 3
-    description: "Together the networks unlock Ethereum’s vision for a fairer and
+    description:
+      "Together the networks unlock Ethereum’s vision for a fairer and
       more open internet.  Decentralised financial systems. Digital assets.
       Trustless systems. "
   - type: ecosystem_block
     title: Projects exploring new ideas
     ctaText: Check out all the projects ->
-    ctakUrl: /ecosystem/dapps/
+    ctaUrl: /ecosystem/dapps/
   - type: social_block
     title: Join the biggest community of developers, enthusiasts and explorers
-    description: Join a community of developers, enthusiasts and explorers, working
+    description:
+      Join a community of developers, enthusiasts and explorers, working
       together to build Starknet and scale Ethereum.
   - type: flex_layout
     heading_variant: h2
     description_variant: sm
     blocks:
       - type: icon_link_card
         title: Starknet blog & media
-        description: Stay up to date with the latest thinking on all things Starknet via
+        description:
+          Stay up to date with the latest thinking on all things Starknet via
           articles, podcasts, and videos.
         linkText: Learn more ->
-        linkUrl: "#"
+        linkUrl: "/posts"
         img: /assets/blogandmedia.svg
       - type: icon_link_card
         title: Community Hub
         description: Explore opportunities with teams  building in the ecosystem.
         linkText: Learn more ->
-        linkUrl: "#"
+        linkUrl: "/community"
         img: /assets/community-2-.svg
         dark_img: /assets/community-dark.svg
     base: 1
@@ -139,19 +148,19 @@ blocks:
       - type: pattern_card
         title: View all questions
         pattern: viewallquestions
-        link: /learn/frequently-asked-questions
+        linkUrl: /learn/frequently-asked-questions
       - type: pattern_card
         title: What is Starknet?
-        link: /learn/what-is-starknet
+        linkUrl: /learn/what-is-starknet
         pattern: whatisstarknet
       - type: pattern_card
         title: How does Starknet work?
         pattern: howdoesitwork
-        link: "#"
+        linkUrl: "/education"
       - type: pattern_card
         title: What is Starkex?
         pattern: whatisstarkex
-        link: "#"
+        linkUrl: "https://starkware.co/starkex/"
     base: 1
     md: 2
     lg: 4

diff --git a/workspaces/cms-config/src/blocks.ts b/workspaces/cms-config/src/blocks.ts
@@ -456,7 +456,7 @@ export const blocks = [
         crowdin: true,
       },
       {
-        name: "link",
+        name: "linkUrl",
         widget: "string",
         label: "Link url",
         crowdin: true,
@@ -554,7 +554,7 @@ export const blocks = [
         crowdin: true,
       },
       {
-        name: "ctakUrl",
+        name: "ctaUrl",
         label: "CTA url",
         widget: "string",
         crowdin: true,

diff --git a/workspaces/cms-data/src/pages.ts b/workspaces/cms-data/src/pages.ts
@@ -117,7 +117,7 @@ export interface StatCardsBlock {
 export interface PatternCardBlock {
   readonly type: "pattern_card";
   readonly title: string;
-  readonly link: string;
+  readonly linkUrl: string;
   readonly pattern:
     | "viewallquestions"
     | "howdoesitwork"

diff --git a/workspaces/website/src/blocks/EcosystemHomepageBlock.tsx b/workspaces/website/src/blocks/EcosystemHomepageBlock.tsx
@@ -5,6 +5,7 @@ import "./OutlineCardsStyle.css";
 import { Button } from "@ui/Button";
 import { Heading } from "@ui/Typography/Heading";
 import { EcosystemBlock as EcosystemBlockType } from "@starknet-io/cms-data/src/pages";
+import { useCMSLink } from "src/utils/useCMSLink";
 
 type Project = {
   name: string;
@@ -83,6 +84,7 @@ interface EcosystemBlockProps extends EcosystemBlockType {}
 
 const EcosystemBlock = ({ title, ctaText, ctaUrl }: EcosystemBlockProps) => {
   const [projects, setProjects] = useState<Project[]>([]);
+  const { isAbsolute, href } = useCMSLink(ctaUrl);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -127,7 +129,7 @@ const EcosystemBlock = ({ title, ctaText, ctaUrl }: EcosystemBlockProps) => {
           backgroundImage: "url(/assets/outline-bg.svg)",
           backgroundSize: "130%",
           backgroundPosition: "center",
-          marginTop: { base: 0, lg: -100 }
+          marginTop: { base: 0, lg: -100 },
         }}
       >
         <Box
@@ -161,7 +163,8 @@ const EcosystemBlock = ({ title, ctaText, ctaUrl }: EcosystemBlockProps) => {
             variant="outline"
             mt="140px"
             bg="brand-secondary-comet-green-3"
-            href={ctaUrl}
+            href={href}
+            isExternal={isAbsolute}
           >
             {ctaText}
           </Button>

diff --git a/workspaces/website/src/blocks/IconLinkCardBlock.tsx b/workspaces/website/src/blocks/IconLinkCardBlock.tsx
@@ -3,11 +3,13 @@ import { IconLinkCardBlock as IconLinkCardBlockType } from "@starknet-io/cms-dat
 import { Card, CardBody, CardLink } from "@ui/Card/Card";
 import { Heading } from "@ui/Typography/Heading";
 import { Text } from "@ui/Typography/Text";
+import { useCMSLink } from "src/utils/useCMSLink";
 
 interface Props extends IconLinkCardBlockType, Omit<BoxProps, "color"> {}
 
 export const IconLinkCardBlock = (props: Props) => {
   const { img, dark_img, title, description, linkText, linkUrl, color } = props;
+  const { href, isAbsolute } = useCMSLink(linkUrl || "");
   const renderColorValues = (color: string) => {
     switch (color) {
       case "red":
@@ -34,7 +36,7 @@ export const IconLinkCardBlock = (props: Props) => {
   };
   const colorValues = renderColorValues(color as string);
   const { colorMode, toggleColorMode } = useColorMode();
-  const IconSrc = colorMode === 'light' ? img : dark_img ? dark_img : img;
+  const IconSrc = colorMode === "light" ? img : dark_img ? dark_img : img;
   return (
     <Card
       variant="iconLink"
@@ -58,7 +60,14 @@ export const IconLinkCardBlock = (props: Props) => {
       >
         <Flex direction="column" justifyContent="space-between" height="100%">
           <Box>
-            {img ? <img color="content.accent.value" src={IconSrc} style={{maxWidth: "60px", width: "100%", height: "60px"}}  alt="" /> : null}
+            {img ? (
+              <img
+                color="content.accent.value"
+                src={IconSrc}
+                style={{ maxWidth: "60px", width: "100%", height: "60px" }}
+                alt=""
+              />
+            ) : null}
             <Heading
               variant="h3"
               mt="12px"
@@ -76,8 +85,9 @@ export const IconLinkCardBlock = (props: Props) => {
           {linkText ? (
             <CardLink
               variant="iconLink"
-              href={linkUrl as string}
+              href={href}
               paddingTop="xl !important"
+              isExternal={isAbsolute}
             >
               {linkText}
             </CardLink>

diff --git a/workspaces/website/src/blocks/StatCardsBlock.tsx b/workspaces/website/src/blocks/StatCardsBlock.tsx
@@ -2,6 +2,28 @@ import { Grid, Box } from "@chakra-ui/react";
 import { StatCardsBlock as StatCardsBlockType } from "@starknet-io/cms-data/src/pages";
 import { StatsCard } from "@ui/Card/StatsCard";
 
+const statData = [
+  {
+    title: "TPS",
+    stat: "2.76",
+    tooltip: "TPS",
+  },
+  {
+    title: "Cumulative new addresses ",
+    stat: "67,505",
+    tooltip: "Cumulative new addresses ",
+  },
+  {
+    title: "Average block time",
+    stat: "2min",
+    tooltip: "Average block time",
+  },
+  {
+    title: "Value locked in bridge",
+    stat: "70.4M+",
+    tooltip: "Value locked in bridge",
+  },
+];
 export const StatCardsBlock = (_: StatCardsBlockType) => {
   return (
     <Box
@@ -46,14 +68,14 @@ export const StatCardsBlock = (_: StatCardsBlockType) => {
           width="100%"
           m="0 auto"
         >
-          <StatsCard title="TPS" stat="2.76" />
-          <StatsCard
-            title="Cumulative new addresses "
-            stat="67,505"
-            tooltip="I am a very long tooltip, longer than the box itself"
-          />
-          <StatsCard title="Average block time" stat="2min" />
-          <StatsCard title="Value locked in bridge" stat="70.4M+" />
+          {statData.map((stat) => (
+            <StatsCard
+              key={stat.title}
+              title={stat.title}
+              tooltip={stat.tooltip}
+              stat={stat.stat}
+            />
+          ))}
         </Grid>
       </Box>
     </Box>

diff --git a/workspaces/website/src/components/Card/AnalyticsCard.tsx b/workspaces/website/src/components/Card/AnalyticsCard.tsx
@@ -1,4 +1,10 @@
-import { Box, useBreakpointValue } from "@chakra-ui/react";
+import {
+  Box,
+  Link,
+  LinkBox,
+  LinkOverlay,
+  useBreakpointValue,
+} from "@chakra-ui/react";
 import { Heading } from "@ui/Typography/Heading";
 import { CardGradientBorder } from "./components/CardGradientBorder";
 import { useAsync } from "react-streaming";
@@ -26,27 +32,38 @@ export const AnalyticsCard = ({
   return (
     <CardGradientBorder
       display="inline-block"
-      maxWidth={{ base: "216px", lg: "288px"}}
+      maxWidth={{ base: "216px", lg: "288px" }}
       borderSx={{
         borderColor: "transparent",
-        boxShadow: "0px 60px 70px -2px rgba(0, 0, 0, 0.08), 0px 1px 47px -3px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.25)"
+        boxShadow:
+          "0px 60px 70px -2px rgba(0, 0, 0, 0.08), 0px 1px 47px -3px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
       }}
     >
-      <Box cursor="pointer" p={{ base: "xl", lg: "2xl" }} width={{ base: "216px", lg: "288px"}} height="100%" bg={bg} onClick={() => window.open(type === "twitter" ? "https://twitter.com/Starknet/" : "https://discord.com/invite/qypnmzkhbc", "_blank")}>
+      <LinkBox
+        cursor="pointer"
+        p={{ base: "xl", lg: "2xl" }}
+        width={{ base: "216px", lg: "288px" }}
+        height="100%"
+        bg={bg}
+      >
         <Box
           display="flex"
           flexDir="column"
           justifyContent="space-between"
           gap="26px"
         >
-          {type === "twitter" && (
-            <SiTwitter size={size} fill="#0C0C4F" />
-          )}
-          {type === "discord" && (
-            <SiDiscord size={size} fill="#0C0C4F" />
-          )}
+          {type === "twitter" && <SiTwitter size={size} fill="#0C0C4F" />}
+          {type === "discord" && <SiDiscord size={size} fill="#0C0C4F" />}
           <Box display="flex" flexDir="column" gap="4px">
             <Heading
+              as={LinkOverlay}
+              // @ts-ignore
+              isExternal
+              href={
+                type === "twitter"
+                  ? "https://twitter.com/Starknet/"
+                  : "https://discord.com/invite/qypnmzkhbc"
+              }
               variant="h5"
               fontSize={{ base: "40px", lg: "64px" }}
               lineHeight={{ base: "120%", lg: "80px" }}
@@ -66,7 +83,7 @@ export const AnalyticsCard = ({
             </Box>
           </Box>
         </Box>
-      </Box>
+      </LinkBox>
     </CardGradientBorder>
   );
 };
diff --git a/workspaces/website/src/components/Card/PatternCard.tsx b/workspaces/website/src/components/Card/PatternCard.tsx
@@ -3,13 +3,16 @@ import { Heading } from "@ui/Typography/Heading";
 import { HiOutlineArrowRight } from "react-icons/hi2";
 import { CardGradientBorder } from "./components/CardGradientBorder";
 import { PatternCardBlock as PatternCardBlockType } from "@starknet-io/cms-data/src/pages";
+import { useCMSLink } from "src/utils/useCMSLink";
 
 interface PatternCardProps extends PatternCardBlockType {}
 export const PatternCard = ({
   title,
-  link,
+  linkUrl,
   pattern = "viewallquestions",
 }: PatternCardProps) => {
+  const { isAbsolute, href } = useCMSLink(linkUrl);
+
   return (
     <CardGradientBorder display="inline-block">
       <Box
@@ -69,7 +72,8 @@ export const PatternCard = ({
             {title}
           </Heading>
           <Link
-            href={link}
+            isExternal={isAbsolute}
+            href={href}
             display="flex"
             gap="base"
             p="base"