curate top networks and tokens (#3754)

Author: gfletcher-cll

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

@@ -22,34 +22,107 @@ export type Props = {
 }
 const { environment } = Astro.props as Props
 
-const entry = await getEntry("ccip", "index")
-if (!entry) {
-  throw new Error('No "ccip/index" doc found! Please make sure it exists in src/content/ccip/index.mdx or .md.')
+// ----------------------
+// Featured (exact match)
+// ----------------------
+
+const FEATURED_NETWORK_RANK = {
+  Ethereum: 1,
+  Plasma: 2,
+  Solana: 3,
+  "BNB Chain": 4,
+  Base: 5,
+  "Arbitrum One": 6,
+  Avalanche: 7,
+  Monad: 8,
 }
 
+const FEATURED_TOKEN_RANK = {
+  LINK: 1,
+  USDC: 2,
+  USDT: 3,
+  WETH: 4,
+  syrupUSDC: 5,
+  syrupUSDT: 6,
+  GHO: 7,
+  cbBTC: 8,
+  SolvBTC: 9,
+  LBTC: 10,
+  USDF: 11,
+  FF: 12,
+  EDEN: 13,
+  USDO: 14,
+  UNIBTC: 15,
+  USD1: 16,
+  FLUID: 17,
+  USX: 18,
+}
+
+// ----------------------
+
+const entry = await getEntry("ccip", "index")
+if (!entry) throw new Error('No "ccip/index" doc found!')
+
 const { headings } = await render(entry)
 
-const networks = getAllNetworks({ filter: environment })
+// ----------------------
+// Networks
+// ----------------------
+
+const networksRaw = getAllNetworks({ filter: environment })
+
+const networks = networksRaw.map((n) => ({
+  ...n,
+  featuredRank: FEATURED_NETWORK_RANK[n.name],
+}))
+
+const orderedNetworks = [...networks].sort((a, b) => {
+  const aRank = a.featuredRank ?? Infinity
+  const bRank = b.featuredRank ?? Infinity
+  if (aRank !== bRank) return aRank - bRank
+  return a.name.localeCompare(b.name, undefined, { sensitivity: "base" })
+})
+
+// ----------------------
+// Tokens
+// ----------------------
+
 const supportedTokens = getAllSupportedTokens({
   environment,
   version: Version.V1_2_0,
 })
+
 const tokens = Object.keys(supportedTokens).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
+
 const allTokens = tokens.map((token) => {
   const logo = getTokenIconUrl(token) || ""
   return {
     id: token,
     logo,
     totalNetworks: getChainsOfToken({ token, filter: environment }).length,
+    featuredRank: FEATURED_TOKEN_RANK[token] ?? FEATURED_TOKEN_RANK[token.toUpperCase()],
   }
 })
+
+const orderedTokens = [...allTokens].sort((a, b) => {
+  const aRank = a.featuredRank ?? Infinity
+  const bRank = b.featuredRank ?? Infinity
+  if (aRank !== bRank) return aRank - bRank
+  return a.id.localeCompare(b.id, undefined, { sensitivity: "base" })
+})
+
+// ----------------------
+
 const searchLanes = getSearchLanes({ environment })
 
-// Generate directory-level structured data (DataCatalog/Dataset)
-// Use production base for canonical JSON-LD URLs (avoid local IPv6/port)
 const currentPath = new URL(Astro.request.url).pathname
 const canonicalForJsonLd = `${DOCS_BASE_URL}${currentPath}`
+
 const directoryStructuredData = generateDirectoryStructuredData(environment, networks, tokens, canonicalForJsonLd)
+
+// Hero uses curated slice
+const featuredNetworks = orderedNetworks.slice(0, 8)
+const featuredTokens = orderedTokens.slice(0, 18)
 ---
 
 <CcipDirectoryLayout
@@ -60,74 +133,49 @@ const directoryStructuredData = generateDirectoryStructuredData(environment, net
   pageTitleOverride={`CCIP Directory - ${environment === Environment.Mainnet ? "Mainnet" : "Testnet"}`}
   metadataOverride={{
     ...(entry.data.metadata || {}),
-    description: `Explore CCIP Directory for ${environment === Environment.Mainnet ? "Mainnet" : "Testnet"}: configuration data for supported blockchains and tokens, cross-chain lanes, contract addresses, rate limits, and operational status on ${environment === Environment.Mainnet ? "Mainnet" : "Testnet"}.`,
+    description: `Explore CCIP Directory for ${environment === Environment.Mainnet ? "Mainnet" : "Testnet"}.`,
     image: "/files/ccip-directory.jpg",
   }}
   suppressDefaultStructuredData={true}
 >
-  <Hero chains={networks} tokens={allTokens} environment={environment} client:visible lanes={searchLanes} />
+  <Hero
+    chains={featuredNetworks}
+    tokens={featuredTokens}
+    environment={environment}
+    client:visible
+    lanes={searchLanes}
+  />
+
   <section class="layout">
     <div>
       <div class="ccip-heading">
         <h2>Networks {environment} <span>({networks.length})</span></h2>
       </div>
-      <LazyNetworkGrid networks={networks} environment={environment} client:visible />
+      <LazyNetworkGrid networks={orderedNetworks} environment={environment} client:visible />
     </div>
+
     <div>
       <div class="ccip-heading">
         <h2>Tokens <span>({allTokens.length})</span></h2>
-        <a class="button secondary" href="/ccip/tutorials/evm/token-manager#verifying-your-token">Add my token</a>
+        <a class="button secondary" href="/ccip/tutorials/evm/token-manager#verifying-your-token"> Add my token </a>
       </div>
-      <LazyTokenGrid tokens={allTokens} environment={environment} client:visible />
+      <LazyTokenGrid tokens={orderedTokens} environment={environment} client:visible />
     </div>
   </section>
 </CcipDirectoryLayout>
 
 <style>
+  /* Restore original layout behavior */
+
   .layout {
-    --gutter: var(--space-10x);
-    --doc-padding: var(--space-6x);
-    margin: var(--space-8x) auto;
     display: flex;
     flex-direction: column;
-    gap: var(--gutter);
-    padding: var(--doc-padding);
-  }
-
-  .ccip-heading {
-    display: flex;
-    padding-bottom: var(--space-4x);
-    border-bottom: 1px solid var(--gray-200);
-    margin-bottom: var(--space-6x);
-    justify-content: space-between;
-  }
-
-  .layout h2 {
-    color: var(--gray-900);
-    font-size: 22px;
-    line-height: var(--space-10x);
-    margin-bottom: 0px;
-  }
-
-  .layout h2 span {
-    color: var(--gray-400);
-    font-weight: 600;
-    letter-spacing: 0.5px;
-  }
-
-  @media (min-width: 50em) {
-    .layout {
-      max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
-      padding: 0;
-    }
+    gap: var(--space-10x);
   }
 
   @media (min-width: 992px) {
     .layout {
-      --doc-padding: var(--space-10x);
       display: grid;
-      padding-top: var(--doc-padding);
-      padding-bottom: var(--doc-padding);
       grid-template-columns: 1fr 1fr;
       gap: var(--space-24x);
     }