CCIP overview card

src/assets/role-icons/index.ts

@@ -0,0 +1,15 @@
+import conceptsIcon from "./concepts-icon.svg"
+import dappDevIcon from "./dapp-dev-icon.svg"
+import tokenDevIcon from "./token-dev-icon.svg"
+import referenceIcon from "./reference-icon.svg"
+import quickstartIcon from "./quickstart-icon.svg"
+import frontendDevIcon from "./frontend-dev-icon.svg"
+
+export const roleIconMap: Record<string, string> = {
+  concepts: conceptsIcon.src,
+  dappDev: dappDevIcon.src,
+  tokenDev: tokenDevIcon.src,
+  reference: referenceIcon.src,
+  quickstart: quickstartIcon.src,
+  frontendDev: frontendDevIcon.src,
+}

src/components/CCIP/Chain/Chain.astro

@@ -1,6 +1,5 @@
 ---
 import CcipLayout from "~/layouts/CcipLayout.astro"
-import { getEntry } from "astro:content"
 import {
   Environment,
   getAllNetworkLanes,
@@ -12,14 +11,28 @@ import {
 import ChainHero from "~/components/CCIP/ChainHero/ChainHero"
 import ChainTable from "~/components/CCIP/Tables/ChainTable"
 import { getTokenIconUrl } from "~/features/utils"
-import Drawer from "../Drawer/Drawer"
 import ChainTokenGrid from "./ChainTokenGrid"
+import { BaseFrontmatter } from "~/content/config"
+
+const { environment, network } = Astro.props
+
+// Define frontmatter and headings directly
+const frontmatter: BaseFrontmatter = {
+  title: `CCIP Supported Networks - ${network.name}`,
+  section: "ccip" as const,
+  metadata: {
+    description: `View supported tokens and lanes for ${network.name} on Chainlink CCIP.`,
+  },
+}
+
+const headings = [
+  {
+    depth: 1,
+    slug: "overview",
+    text: frontmatter.title,
+  },
+]
 
-// TODO: Add type for network
-const { environment, network } = Astro.props as { environment: Environment; network: any }
-
-const entry = await getEntry("ccip", "index")
-const { headings } = await entry.render()
 const networks = getAllNetworks({ filter: environment })
 
 const allTokens = getTokensOfChain({
@@ -46,14 +59,7 @@ const lanes = await getAllNetworkLanes({
 const searchLanes = getSearchLanes({ environment })
 ---
 
-<CcipLayout
-  frontmatter={{
-    title: `CCIP Supported Networks - ${network.name}`,
-    section: "ccip",
-  }}
-  {headings}
-  environment={environment}
->
+<CcipLayout frontmatter={frontmatter} {headings} environment={environment}>
   <ChainHero
     chains={networks}
     tokens={allTokens}

src/components/CCIP/Landing/ccip-landing.astro

@@ -1,6 +1,5 @@
 ---
 import CcipLayout from "~/layouts/CcipLayout.astro"
-import { getEntry } from "astro:content"
 import Hero from "~/components/CCIP/Hero/Hero"
 import {
   Environment,
@@ -13,13 +12,29 @@ import {
 import { getTokenIconUrl } from "~/features/utils"
 import NetworkGrid from "./NetworkGrid"
 import TokenGrid from "../TokenGrid/TokenGrid"
+import { BaseFrontmatter } from "~/content/config"
+
 export type Props = {
   environment: Environment
 }
 const { environment } = Astro.props as Props
 
-const entry = await getEntry("ccip", "index")
-const { headings } = await entry.render()
+const frontmatter: BaseFrontmatter = {
+  title: "CCIP Directory",
+  section: "ccip" as const,
+  metadata: {
+    description: "View all supported networks and tokens on Chainlink CCIP.",
+  },
+}
+
+const headings = [
+  {
+    depth: 1,
+    slug: "overview",
+    text: frontmatter.title,
+  },
+]
+
 const networks = getAllNetworks({ filter: environment })
 const supportedTokens = getAllSupportedTokens({
   environment: environment,
@@ -40,7 +55,7 @@ const allTokens = tokens.map((token) => {
 const searchLanes = getSearchLanes({ environment })
 ---
 
-<CcipLayout frontmatter={entry.data} {headings} environment={environment}>
+<CcipLayout frontmatter={frontmatter} {headings} environment={environment}>
   <Hero chains={networks} tokens={allTokens} environment={environment} client:load lanes={searchLanes} />
   <section class="layout">
     <div>

src/components/CCIP/Token/Token.astro

@@ -1,6 +1,5 @@
 ---
 import CcipLayout from "~/layouts/CcipLayout.astro"
-import { getEntry } from "astro:content"
 import {
   getAllNetworks,
   getAllSupportedTokens,
@@ -14,12 +13,25 @@ import {
 import ChainHero from "~/components/CCIP/ChainHero/ChainHero"
 import Table from "~/components/CCIP/Tables/TokenChainsTable"
 import { directoryToSupportedChain, getChainIcon, getExplorer, getTitle, getTokenIconUrl } from "~/features/utils"
-import Drawer from "~/components/CCIP/Drawer/Drawer"
 
 const { token, logo, environment } = Astro.props as { token: string; logo: string; environment: Environment }
 
-const entry = await getEntry("ccip", "index")
-const { headings } = await entry.render()
+const frontmatter = {
+  title: `CCIP Supported Tokens - ${token}`,
+  section: "ccip" as const,
+  metadata: {
+    description: `View supported blockchains and configurations for ${token} token on Chainlink CCIP.`,
+  },
+}
+
+const headings = [
+  {
+    depth: 1,
+    slug: "overview",
+    text: frontmatter.title,
+  },
+]
+
 const networks = getAllNetworks({ filter: environment })
 
 const supportedTokens = getAllSupportedTokens({
@@ -56,14 +68,7 @@ const tokenLanes = getAllTokenLanes({
 const searchLanes = getSearchLanes({ environment })
 ---
 
-<CcipLayout
-  frontmatter={{
-    title: `CCIP Supported Tokens - ${token}`,
-    section: "ccip",
-  }}
-  {headings}
-  environment={environment}
->
+<CcipLayout frontmatter={frontmatter} {headings} environment={environment}>
   <ChainHero
     chains={networks}
     tokens={allTokens}

src/config/roles/ccip.ts

@@ -0,0 +1,112 @@
+import type { ProductRoles } from "./types"
+
+export const ccipRoles: ProductRoles = {
+  productId: "ccip",
+  roles: [
+    {
+      id: "overview",
+      title: "Concepts",
+      description: "Learn about CCIP and its core concepts",
+      iconType: "concepts",
+      links: [
+        { type: "overview", title: "About CCIP", url: "/ccip/about" },
+        { type: "concept", title: "Core Concepts", url: "/ccip/concepts" },
+        { type: "concept", title: "Architecture", url: "/ccip/architecture" },
+        { type: "concept", title: "Execution Latency", url: "/ccip/concepts/ccip-execution-latency" },
+        { type: "concept", title: "Cross-Chain Tokens", url: "/ccip/concepts/cross-chain-tokens" },
+        { type: "concept", title: "Manual Execution", url: "/ccip/concepts/manual-execution" },
+        { type: "concept", title: "Billing", url: "/ccip/billing" },
+      ],
+    },
+    {
+      id: "getting-started",
+      title: "Get Started",
+      description: "Start building with CCIP",
+      iconType: "quickstart",
+      links: [
+        { type: "get-started", title: "Getting Started Guide", url: "/ccip/getting-started" },
+        { type: "guide", title: "Acquire Test Tokens", url: "/ccip/test-tokens" },
+        { type: "guide", title: "Transfer Tokens from Contract", url: "/ccip/tutorials/transfer-tokens-from-contract" },
+        { type: "guide", title: "Transfer Tokens (EOA)", url: "/ccip/tutorials/transfer-tokens-from-eoa" },
+        { type: "guide", title: "Send Arbitrary Data", url: "/ccip/tutorials/send-arbitrary-data" },
+        { type: "reference", title: "CCIP Directory", url: "/ccip/directory" },
+        { type: "reference", title: "CCIP Explorer", url: "https://ccip.chain.link" },
+      ],
+    },
+    {
+      id: "token-dev",
+      title: "You are a Token Developer",
+      description: "Leverage the Cross-Chain Token (CCT) Standard to register and manage tokens on CCIP",
+      iconType: "tokenDev",
+      links: [
+        { type: "concept", title: "Understanding Cross-Chain Tokens", url: "/ccip/concepts/cross-chain-tokens" },
+        {
+          type: "guide",
+          title: "Cross-Chain Token (CCT) guides",
+          url: "/ccip/tutorials/cross-chain-tokens",
+        },
+        { type: "guide", title: "Transfer Tokens from Contract", url: "/ccip/tutorials/transfer-tokens-from-contract" },
+        { type: "guide", title: "Transfer Tokens (EOA)", url: "/ccip/tutorials/transfer-tokens-from-eoa" },
+        { type: "reference", title: "CCIP Directory", url: "/ccip/directory" },
+        { type: "reference", title: "Service Responsibility", url: "/ccip/service-responsibility" },
+        { type: "reference", title: "API Reference", url: "/ccip/api-reference" },
+        { type: "reference", title: "Best Practices", url: "/ccip/best-practices" },
+      ],
+    },
+    {
+      id: "dapp-dev",
+      title: "You are a dApp Developer",
+      description: "Build cross-chain applications with CCIP",
+      iconType: "dappDev",
+      links: [
+        { type: "concept", title: "Manual Execution", url: "/ccip/concepts/manual-execution" },
+        { type: "guide", title: "Test CCIP Locally", url: "/ccip/tutorials/test-ccip-locally" },
+        { type: "guide", title: "Transfer Tokens with Data", url: "/ccip/tutorials/programmable-token-transfers" },
+        {
+          type: "guide",
+          title: "Transfer Tokens with Data (Defensive Programming)",
+          url: "/ccip/tutorials/programmable-token-transfers-defensive",
+        },
+        { type: "guide", title: "Handle Receipts", url: "/ccip/tutorials/send-arbitrary-data-receipt-acknowledgment" },
+        { type: "guide", title: "USDC Transfers", url: "/ccip/tutorials/usdc" },
+        { type: "guide", title: "Manual Execution", url: "/ccip/tutorials/manual-execution" },
+        { type: "guide", title: "Gas Limit Configuration", url: "/ccip/tutorials/ccipreceive-gaslimit" },
+        { type: "reference", title: "CCIP Directory", url: "/ccip/directory" },
+        { type: "reference", title: "CCIP Explorer", url: "https://ccip.chain.link" },
+        { type: "reference", title: "Service Responsibility", url: "/ccip/service-responsibility" },
+        { type: "reference", title: "API Reference", url: "/ccip/api-reference" },
+        { type: "reference", title: "Best Practices", url: "/ccip/best-practices" },
+      ],
+    },
+    {
+      id: "frontend-dev",
+      title: "You are a Frontend Developer",
+      description: "Build frontend applications that interact with CCIP",
+      iconType: "frontendDev",
+      links: [
+        { type: "guide", title: "JavaScript SDK", url: "/ccip/ccip-javascript-sdk" },
+        { type: "guide", title: "Off-chain Guides", url: "/ccip/tutorials/offchain" },
+        { type: "reference", title: "API Reference", url: "/ccip/api-reference" },
+        { type: "reference", title: "CCIP Explorer", url: "https://ccip.chain.link" },
+        { type: "reference", title: "CCIP Directory", url: "/ccip/directory" },
+        { type: "reference", title: "Best Practices", url: "/ccip/best-practices" },
+      ],
+    },
+    {
+      id: "reference",
+      title: "Reference",
+      description: "API documentation and technical details",
+      iconType: "reference",
+      links: [
+        { type: "guide", title: "JavaScript SDK", url: "/ccip/ccip-javascript-sdk" },
+        { type: "reference", title: "API Reference", url: "/ccip/api-reference" },
+        { type: "reference", title: "CCIP Directory", url: "/ccip/directory" },
+        { type: "reference", title: "CCIP Explorer", url: "https://ccip.chain.link" },
+        { type: "reference", title: "Service Limits", url: "/ccip/service-limits" },
+        { type: "reference", title: "Billing", url: "/ccip/billing" },
+        { type: "reference", title: "Service Responsibility", url: "/ccip/service-responsibility" },
+        { type: "reference", title: "Release Notes", url: "/ccip/release-notes" },
+      ],
+    },
+  ],
+}

src/config/roles/getRolesByProduct.ts

@@ -0,0 +1,7 @@
+import type { ProductRoles } from "./types"
+import { ccipRoles } from "./ccip"
+
+export const PRODUCT_CONFIGS: Record<string, ProductRoles> = {
+  ccip: ccipRoles,
+  // Add other products here when they're ready for the role-based layout
+}

src/config/roles/types.ts

@@ -0,0 +1,20 @@
+export type LinkType = "overview" | "concept" | "get-started" | "guide" | "reference"
+
+export interface RoleLink {
+  type: LinkType
+  title: string
+  url: string
+}
+
+export interface RoleConfig {
+  id: string
+  title: string
+  description: string
+  iconType: string
+  links: RoleLink[]
+}
+
+export interface ProductRoles {
+  productId: string
+  roles: RoleConfig[]
+}