Merge pull request #830 from starknet-io/roadmap-tags

Adding roadmap availability state tag

_data/roadmap-posts/fetch-older-blocks-with-the-blockhash-syscall.yml

@@ -1,19 +1,19 @@
+month: undefined NaN
 id: 5ea43ca1-5ca8-4d55-bbc3-f7911c60b444
 title: "Fetch older blocks with the blockhash syscall "
 availability: Q3 2023
+state: testing now
+specific_info: (est. mid July 2023)
 version: ea637184-247a-4370-82bd-3059d1c988f0
 stage: building-now
 blocks:
   - type: markdown
     body: >-
-      **Estimation:** July 2023 on testnet.
-
-
-      0.12.0 brings an exciting addition to the system with the introduction of the blockhash syscall. 
+      0.12.0 brings an exciting addition to the system with the introduction of
+      the blockhash syscall. 
 
 
       This new syscall enables contracts to retrieve the block hashes of older blocks, akin to the functionality provided by the blockhash in [Solidity](https://docs.soliditylang.org/en/v0.8.11/units-and-global-variables.html#block-and-transaction-properties). By incorporating this feature, Starknet empowers developers to access past block information within a specified range, specifically from the current block-10 to the current block-1024.
 
 
       The blockhash syscall in version 0.12.0 offers developers increased flexibility and functionality in retrieving historical block data, opening up possibilities for more advanced contract interactions and data analysis within the Starknet ecosystem.
-month: undefined NaN

_data/roadmap-posts/rustbased-blockifier.yml

@@ -1,15 +1,17 @@
+month: undefined NaN
 id: 5ea43ca1-5ca8-4d55-bbc3-f7911c60b411
 title: Rust-based blockifier
 availability: Q3 2023
+state: testing now
+specific_info: (est. mid July 2023)
 version: 69ee8aba-95ec-4da9-9348-b8debe034a1a
 stage: building-now
 blocks:
   - type: markdown
     body: >-
-      **Estimation:** July 2023 on testnet.
-
-
-      The Rust-based Blockifier is a crucial component of Starknet's upcoming version, 0.12.0. It significantly improves throughput and latency by reducing block execution time.
+      The Rust-based Blockifier is a crucial component of Starknet's upcoming
+      version, 0.12.0. It significantly improves throughput and latency by
+      reducing block execution time.
 
 
       Developed by StarkWare as an open-source project, the new Blockifier utilizes the Rust programming language to implement an optimized block processing mechanism.
@@ -19,4 +21,3 @@ blocks:
 
 
       By implementing the Rust-based Blockifier, Starknet ensures reduced waiting times and improves transaction latency during everyday network conditions. Moreover, it establishes a foundation for future scalability and performance enhancements, allowing Starknet to handle increased traffic efficiently and reliably as the platform continues to grow.
-month: undefined NaN

_data/roadmap-posts/rustbased-cairo-vm.yml

@@ -1,17 +1,16 @@
 id: 5ea43ca1-5ca8-4d55-bbc3-f7911c60b422
 title: Rust-based Cairo VM
 availability: Q3 2023
+state: testing now
+specific_info: (est. mid July 2023)
 version: 69ee8aba-95ec-4da9-9348-b8debe034a1a
 stage: building-now
 blocks:
   - type: markdown
     body: >-
-      \
-
-      **Estimation:** July 2023 on testnet.
-
-
-      Developed by LambdaClass using the Rust programming language, the Rust-based Cairo Virtual Machine (VM) provides an efficient and optimized environment for executing Cairo contracts within the Starknet ecosystem.
+      Developed by LambdaClass using the Rust programming language, the
+      Rust-based Cairo Virtual Machine (VM) provides an efficient and optimized
+      environment for executing Cairo contracts within the Starknet ecosystem.
 
 
       The VM's efficiency and optimization result in reduced contract execution times, higher throughput, lower latency and improved overall performance. 

_data/roadmap-posts/rustbased-local-state-management-using-papyrus.yml

@@ -1,19 +1,20 @@
+month: undefined NaN
 id: 5ea43ca1-5ca8-4d55-bbc3-f7911c60b433
 title: Rust-based local state management using Papyrus
 availability: Q3 2023
+state: testing now
+specific_info: (est. mid July 2023)
 version: 69ee8aba-95ec-4da9-9348-b8debe034a1a
 stage: building-now
 blocks:
   - type: markdown
     body: >-
-      **Estimation:** July 2023 on testnet.
-
-
-      Papyrus, an open-source Rust implementation of a Starknet full node, revolutionizes local state management. It enhances performance and decentralization, paving the way for mass adoption of Starknet.
+      Papyrus, an open-source Rust implementation of a Starknet full node,
+      revolutionizes local state management. It enhances performance and
+      decentralization, paving the way for mass adoption of Starknet.
 
 
       In the upcoming 0.12.0 release, Papyrus will be integrated into Starknet's infrastructure. With efficient and reliable local storage mechanisms, Papyrus surpasses previous implementations. It optimizes the Sequencer by utilizing a local database and a flat key/value storage structure, eliminating the need for complex paths.
 
 
       Papyrus strengthens the ecosystem, adding decentralization and redundancy. It enables communication and synchronization among nodes, improving efficiency and sync times.
-month: undefined NaN

_data/roadmap-posts/updated-cairo-10-contract-syntax.yml

@@ -1,15 +1,19 @@
+month: undefined NaN
 id: 5ea43ca1-5ca8-4d55-bbc3-f7911c60b455
 title: Updated Cairo 1.0 contract syntax
 availability: Q3 2023
+state: testing now
+specific_info: (est. mid July 2023)
 version: 4e2b83da-0595-4975-bf6a-9dd19815c9f2
 stage: building-now
 blocks:
   - type: markdown
     body: >-
-      **Estimation:** July 2023 on testnet.
-
-
-      Starknet contracts are being improved with the added support from the latest addition to Cairo 1 syntax. These enhancements aim to improve safety and extensibility, particularly in contract interface, storage declaration, and event structure. By introducing these changes, developers can create more natural and secure smart contracts on Starknet.
+      Starknet contracts are being improved with the added support from the
+      latest addition to Cairo 1 syntax. These enhancements aim to improve
+      safety and extensibility, particularly in contract interface, storage
+      declaration, and event structure. By introducing these changes, developers
+      can create more natural and secure smart contracts on Starknet.
 
 
       The new syntax will be incorporated into the next version of Cairo, making it available on Starknet v0.12.0. Developers will have a six-month period to migrate to the new syntax, primarily impacting the outer layer of the contract. This transition is designed to be straightforward, and collaborative efforts with Cairo 1 auditors ensure a smooth re-auditing process.
@@ -19,4 +23,3 @@ blocks:
 
 
       Developers are empowered to easily build large, interacting projects while minimizing bugs and promoting explicit contract behavior with the new syntax. It provides a foundation for creating robust and scalable smart contracts on Starknet.
-month: undefined NaN

src/app/[locale]/roadmap/(components)/RoadmapPostCard.tsx

@@ -1,4 +1,4 @@
-import { Card, CardBody, CardHeader } from "@chakra-ui/react";
+import { Card, CardBody, CardHeader, Box, Flex } from "@chakra-ui/react";
 import { Heading } from "@ui/Typography/Heading";
 import { Text } from "@ui/Typography/Text";
 import { RoadmapPost, RoadmapVersion } from "workspaces/cms-data/src/roadmap";
@@ -29,15 +29,18 @@ export default function RoadmapPostCard({
         height="100%"
       >
         <CardHeader
-          height="194px"
+          minHeight="194px"
           background="btn-filter-bg"
           borderRadius="16px 16px 0px 0px"
           display="flex"
           flexDirection="column"
           justifyContent="space-between"
         >
-          <Heading variant="h3" color="heading-navy-fg" fontWeight={600} lineHeight="28px">{roadmapPost?.title}</Heading>
-          <Text variant="cardBody" color="heading-navy-fg">{roadmapPost?.availability}</Text>
+          <Heading variant="h3" pb="2" color="heading-navy-fg" fontWeight={600} lineHeight="28px">{roadmapPost?.title}</Heading>
+          <Flex direction="row" alignItems="center" justifyContent="space-between">
+            <Text variant="cardBody" color="heading-navy-fg">{roadmapPost?.availability}</Text>
+            {roadmapPost?.state ? <Text display="flex" alignItems="center" variant="cardBody" color="roadmap-availability-state-fg" height="32px" borderRadius="5px" padding="4px 12px" borderWidth="1px" borderStyle="solid" borderColor="roadmap-card-border-color" bg="roadmap-card-tag-bg">{roadmapPost?.state}<Box display="inline-block" bg={roadmapPost?.state === "on testnet" ? "#00815C" : "#EF5600"} borderRadius="50%" width="14px" height="14px" ml="2"></Box></Text> : null}
+          </Flex>
         </CardHeader>
         <CardBody padding="24px 16px 16px 16px">
           <RoadmapPostVersion roadmapVersion={roadmapVersion} />

src/app/[locale]/roadmap/[slug]/(components)/RoadmapPost.tsx

@@ -31,8 +31,8 @@ interface KeyValuePairs {
 }
 
 const stages: KeyValuePairs = {
-  "building-now": "Building Now",
-  "building-next": "Building Next",
+  "building-now": "Building now",
+  "building-next": "Building next",
   "backlog": "Backlog",
 };
 
@@ -122,9 +122,10 @@ export default function RoadmapPost({
             {roadmapPost.title}
           </Heading>
           <Text variant="cardBody" mt="6"><strong>STAGE:</strong> {stages[roadmapPost?.stage]}</Text>
-          <Heading variant="h4" mt="24px" mb="2rem" fontSize="sm">
+          <Heading variant="h4" mt="24px" mb="32px" fontSize="sm">
             {roadmapPost.availability}
           </Heading>
+          {roadmapPost?.state ? <Flex alignItems="center"mb="40px"><Text display="flex" alignItems="center" variant="cardBody" color="roadmap-availability-state-fg" height="32px" borderRadius="5px" padding="4px 12px" borderWidth="1px" borderStyle="solid" borderColor="roadmap-card-border-color" bg="roadmap-card-tag-bg">{roadmapPost?.state}<Box display="inline-block" bg={roadmapPost?.state === "on testnet" ? "#00815C" : "#EF5600"} borderRadius="50%" width="14px" height="14px" ml="2"></Box></Text>{roadmapPost?.specific_info ? <Text variant="cardBody" ml="2">{roadmapPost?.specific_info}</Text> : null}</Flex> : null}
           <Divider mt="8px" mb="32px" />
           <Flex direction="column" gap="32px">
             {roadmapPost.blocks?.map((block, i) => (

src/style/tokens.ts

@@ -87,7 +87,7 @@ export const tokens = {
       "nav-searchinput-hover-fg": "#5C94FF",
       "kbd-bg": "#cccccc",
       "kbd-fg": "#363636",
-
+      "roadmap-availability-state-fg": "#082817",
       "hero-gradient-gradient-a": "#FFDAD6",
       "hero-gradient-gradient-b": "#B6C6FF",
       "heading-hero-gradient-1a": "#0C0C4F",
@@ -194,7 +194,9 @@ export const tokens = {
       "gradient-blue-default-a": " #E9F2F8 ",
       "gradient-blue-default-b": "  #FBF6F1",
       "roadmap-card-border-color": "#CCCCCC",
+      "roadmap-card-tag-border-color": "#DDDDDD",
       "roadmap-card-bg-color": "#FFFFFF",
+      "roadmap-card-tag-bg": "#ffffff"
     },
 
     dark: {
@@ -285,6 +287,7 @@ export const tokens = {
       "nav-searchinput-hover-fg": "#AFCAFF",
       "kbd-bg": "#313131",
       "kbd-fg": "#CCCCCC",
+      "roadmap-availability-state-fg": "#FFFFFF",
       "heading-hero-gradient-1a": "#D672EF",
       "heading-hero-gradient-1b": "#EC796B",
       "hero-gradient-1a": "#171B31",
@@ -392,6 +395,8 @@ export const tokens = {
       "gradient-blue-default-a": " #252525 ",
       "gradient-blue-default-b": "  #1B1B1B",
       "roadmap-card-border-color": "#5C5C5C",
+      "roadmap-card-tag-border-color": "#5C5C5C",
+      "roadmap-card-tag-bg": "#313131"
     },
   },
 };
@@ -691,7 +696,10 @@ export const semanticTokens = {
       default: tokens.colors.light["kbd-fg"],
       _dark: tokens.colors.dark["kbd-fg"],
     },
-
+    "roadmap-availability-state-fg": {
+      default: tokens.colors.light["roadmap-availability-state-fg"],
+      _dark: tokens.colors.dark["roadmap-availability-state-fg"],
+    },
     "button-nav-bg": {
       default: tokens.colors.light["button-nav-bg"],
       _dark: tokens.colors.dark["button-nav-bg"],
@@ -1160,6 +1168,14 @@ export const semanticTokens = {
       default: tokens.colors.light["roadmap-card-border-color"],
       _dark: tokens.colors.dark["roadmap-card-border-color"],
     },
+    "roadmap-card-tag-border-color": {
+      default: tokens.colors.light["roadmap-card-tag-border-color"],
+      _dark: tokens.colors.dark["roadmap-card-tag-border-color"],
+    },
+    "roadmap-card-tag-bg": {
+      default: tokens.colors.light["roadmap-card-tag-bg"],
+      _dark: tokens.colors.dark["roadmap-card-tag-bg"],
+    },
     "roadmap-card-bg-color": {
       default: tokens.colors.light["roadmap-card-bg-color"],
       _dark: tokens.colors.dark["roadmap-card-bg-color"],

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

@@ -43,11 +43,11 @@ export const announcementsCollectionConfig = {
       widget: "select",
       options: [
         {
-          label: "Building Now",
+          label: "Building now",
           value: "building-now",
         },
         {
-          label: "Building Next",
+          label: "Building next",
           value: "building-next",
         },
         {

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

@@ -5,12 +5,12 @@ import { AiOutlineAppstore } from "react-icons/ai";
 
 export const roadmapStagesFields = [
   {
-    label: "Building Now",
+    label: "Building now",
     value: "building-now",
     icon: BiWrench
   },
   {
-    label: "Building Next",
+    label: "Building next",
     value: "building-next",
     icon: BiBullseye
   },
@@ -65,6 +65,24 @@ export const roadmapPostsCollectionConfig = {
         "Q4 2025",
       ],
     },
+    {
+      name: "state",
+      label: "Availability state",
+      widget: "select",
+      options: [
+        "on testnet",
+        "testing now"
+      ],
+      required: false,
+    },
+    {
+      name: "specific_info",
+      label: "Specific info",
+      widget: "string",
+      required: false,
+      index_file: "",
+      meta: false
+    },
     {
       name: "version",
       label: "Version",

workspaces/cms-data/src/roadmap.ts

@@ -11,6 +11,8 @@ export interface RoadmapPost extends Meta {
   readonly version: string;
   readonly stage: string;
   readonly availability: string;
+  readonly specific_info?: string;
+  readonly state?: string;
   readonly blocks: readonly TopLevelBlock[];
 }
 

workspaces/cms-scripts/src/data.ts

@@ -42,6 +42,8 @@ export interface RoadmapPost extends Meta {
   readonly version: string;
   readonly stage: string;
   readonly availability: string;
+  readonly specific_info?: string;
+  readonly state?: string;
   blocks: readonly any[];
 }
 
@@ -159,6 +161,8 @@ export async function fileToRoadmapPost(
     image: data.image,
     version: data.version,
     availability: data.availability,
+    specific_info: data.specific_info,
+    state: data.state,
     stage: data.stage,
     blocks: data.blocks ?? [],
     locale,