From aeeb67708fde07b739f7c5d2353082758765ec7e Mon Sep 17 00:00:00 2001
From: ak <a.kemalakcay@gmail.com>
Date: Tue, 8 Apr 2025 14:13:37 +0300
Subject: [PATCH 1/3] leverage css to control layout

---
 .../components/NetworkDetailsPage.tsx         |  20 +-
 .../components/ResourceCards.tsx              | 431 +++++++-----------
 2 files changed, 192 insertions(+), 259 deletions(-)

diff --git a/website/src/supportedNetworks/components/NetworkDetailsPage.tsx b/website/src/supportedNetworks/components/NetworkDetailsPage.tsx
index 22f3a18182a5..f27914b1c993 100644
--- a/website/src/supportedNetworks/components/NetworkDetailsPage.tsx
+++ b/website/src/supportedNetworks/components/NetworkDetailsPage.tsx
@@ -1,3 +1,4 @@
+import { Card, TimeIcon } from '@/components'
 import { useI18n } from '@/i18n'
 
 import { isEVMNetwork, type Network, type NetworkData, type ProcessedNetwork, supportsTokenAPI } from '../utils'
@@ -8,7 +9,6 @@ import {
   evmWithTokenAPICards,
   nonEvmNoTokenAPICards,
   nonEvmWithTokenAPICards,
-  ResourceCardsLayout,
 } from './ResourceCards'
 
 type NetworkDetailsPageProps = {
@@ -58,12 +58,24 @@ function NetworkDetailsPage({ network }: NetworkDetailsPageProps) {
   const { t } = useI18n()
   const isEVM = isEVMNetwork(network)
   const features = getNetworkFeatures(network)
-  const resourceCards = getResourceCardsConfig(isEVM, features)
+  const cards = getResourceCardsConfig(isEVM, features)
 
   return (
     <>
-      <h3 className="text-h18 mt-0">{t('index.supportedNetworks.guides')}</h3>
-      <ResourceCardsLayout {...resourceCards} />
+      <h3 className="text-h18">{t('index.supportedNetworks.guides')}</h3>
+      <div className="grid grid-cols-6 gap-4">
+        {cards.map((card) => (
+          <Card
+            key={t(card.titleKey as any)}
+            href={card.href}
+            title={t(card.titleKey as any)}
+            description={t(card.descriptionKey as any)}
+            slotAboveTitle={<TimeIcon variant="reading" minutes={card.minutes} />}
+            className="col-span-full [&:nth-child(-n+3)]:lg:col-span-2 [&:nth-child(-n+3)]:lg:min-h-64 [&:nth-child(n+4)]:lg:col-span-3"
+            icon={card.icon}
+          />
+        ))}
+      </div>
     </>
   )
 }
diff --git a/website/src/supportedNetworks/components/ResourceCards.tsx b/website/src/supportedNetworks/components/ResourceCards.tsx
index fc6ad02235c4..a647dd640efa 100644
--- a/website/src/supportedNetworks/components/ResourceCards.tsx
+++ b/website/src/supportedNetworks/components/ResourceCards.tsx
@@ -7,274 +7,195 @@ import {
   SubstreamsPoweredSubgraph,
 } from '@edgeandnode/gds/icons'
 
-import { Card, TimeIcon } from '@/components'
-import { useI18n } from '@/i18n'
-
-export type ResourceCard = {
+type Resource = {
   href: string
   titleKey: string
   descriptionKey: string
   minutes: number
   icon?: React.ReactNode
-  className?: string
-}
-
-type CardSectionProps = {
-  cards: ResourceCard[]
-  gridCols: string
-}
-
-function CardSection({ cards, gridCols }: CardSectionProps) {
-  const { t } = useI18n()
-
-  return (
-    <div className={`grid grid-cols-1 gap-4 ${gridCols}`}>
-      {cards.map((card, index) => (
-        <Card
-          key={index}
-          href={card.href}
-          title={t(card.titleKey as any)}
-          description={t(card.descriptionKey as any)}
-          slotAboveTitle={<TimeIcon variant="reading" minutes={card.minutes} />}
-          className={card.className ?? ''}
-          icon={card.icon}
-        />
-      ))}
-    </div>
-  )
-}
-
-export function ResourceCardsLayout({
-  topCards,
-  bottomCards,
-}: {
-  topCards: ResourceCard[]
-  bottomCards: ResourceCard[]
-}) {
-  return (
-    <div className="graph-docs-not-markdown mt-8 grid grid-cols-1 gap-4">
-      <CardSection cards={topCards} gridCols="sm:grid-cols-2 lg:grid-cols-3" />
-      <CardSection cards={bottomCards} gridCols="sm:grid-cols-2" />
-    </div>
-  )
 }
 
 // EVM + Subgraphs, Substreams and Token API
-export const evmWithTokenAPICards = {
-  topCards: [
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
-      titleKey: 'index.networkGuides.evm.subgraphQuickStart.title',
-      descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description',
-      minutes: 10,
-      icon: <Subgraph size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://docs.substreams.dev/',
-      titleKey: 'index.networkGuides.evm.substreamsQuickStart.title',
-      descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description',
-      minutes: 15,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://thegraph.com/docs/en/token-api/quick-start/',
-      titleKey: 'index.networkGuides.evm.tokenapi.title',
-      descriptionKey: 'index.networkGuides.evm.tokenapi.description',
-      minutes: 8,
-      icon: <APIToken size={6} />,
-      className: 'min-h-64',
-    },
-  ],
-  bottomCards: [
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
-      titleKey: 'index.networkGuides.evm.graphExplorer.title',
-      descriptionKey: 'index.networkGuides.evm.graphExplorer.description',
-      minutes: 12,
-    },
-    {
-      href: 'https://substreams.dev/',
-      titleKey: 'index.networkGuides.evm.substreamsDev.title',
-      descriptionKey: 'index.networkGuides.evm.substreamsDev.description',
-      minutes: 5,
-    },
-  ],
-}
+export const evmWithTokenAPICards: Resource[] = [
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
+    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title',
+    descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description',
+    minutes: 10,
+    icon: <Subgraph size={6} />,
+  },
+  {
+    href: 'https://docs.substreams.dev/',
+    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title',
+    descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description',
+    minutes: 15,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/token-api/quick-start/',
+    titleKey: 'index.networkGuides.evm.tokenapi.title',
+    descriptionKey: 'index.networkGuides.evm.tokenapi.description',
+    minutes: 8,
+    icon: <APIToken size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
+    titleKey: 'index.networkGuides.evm.graphExplorer.title',
+    descriptionKey: 'index.networkGuides.evm.graphExplorer.description',
+    minutes: 12,
+  },
+  {
+    href: 'https://substreams.dev/',
+    titleKey: 'index.networkGuides.evm.substreamsDev.title',
+    descriptionKey: 'index.networkGuides.evm.substreamsDev.description',
+    minutes: 5,
+  },
+]
 
 // EVM without Token API
-export const evmNoTokenAPICards = {
-  topCards: [
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
-      titleKey: 'index.networkGuides.evm.subgraphQuickStart.title',
-      descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description',
-      minutes: 10,
-      icon: <Subgraph size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://thegraph.com/docs/en/substreams/quick-start/',
-      titleKey: 'index.networkGuides.evm.substreamsQuickStart.title',
-      descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description',
-      minutes: 15,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/billing/',
-      titleKey: 'index.networkGuides.evm.billing.title',
-      descriptionKey: 'index.networkGuides.evm.billing.description',
-      minutes: 5,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-  ],
-  bottomCards: [
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
-      titleKey: 'index.networkGuides.evm.graphExplorer.title',
-      descriptionKey: 'index.networkGuides.evm.graphExplorer.description',
-      minutes: 12,
-    },
-    {
-      href: 'https://substreams.dev/',
-      titleKey: 'index.networkGuides.evm.substreamsDev.title',
-      descriptionKey: 'index.networkGuides.evm.substreamsDev.description',
-      minutes: 5,
-    },
-  ],
-}
+export const evmNoTokenAPICards: Resource[] = [
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
+    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title',
+    descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description',
+    minutes: 10,
+    icon: <Subgraph size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/substreams/quick-start/',
+    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title',
+    descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description',
+    minutes: 15,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/billing/',
+    titleKey: 'index.networkGuides.evm.billing.title',
+    descriptionKey: 'index.networkGuides.evm.billing.description',
+    minutes: 5,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
+    titleKey: 'index.networkGuides.evm.graphExplorer.title',
+    descriptionKey: 'index.networkGuides.evm.graphExplorer.description',
+    minutes: 12,
+  },
+  {
+    href: 'https://substreams.dev/',
+    titleKey: 'index.networkGuides.evm.substreamsDev.title',
+    descriptionKey: 'index.networkGuides.evm.substreamsDev.description',
+    minutes: 5,
+  },
+]
 
 // EVM only Subgraphs
-export const evmSubgraphsOnlyCards = {
-  topCards: [
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
-      titleKey: 'index.networkGuides.evm.subgraphQuickStart.title',
-      descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description',
-      minutes: 10,
-      icon: <Subgraph size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
-      titleKey: 'index.networkGuides.evm.graphExplorer.title',
-      descriptionKey: 'index.networkGuides.evm.graphExplorer.description',
-      minutes: 12,
-      icon: <GraphExplorer size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/billing/',
-      titleKey: 'index.networkGuides.evm.billing.title',
-      descriptionKey: 'index.networkGuides.evm.billing.description',
-      minutes: 5,
-      icon: <MoneyWavy alt="Money" size={6} />,
-      className: 'min-h-64',
-    },
-  ],
-  bottomCards: [
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/best-practices/timeseries/',
-      titleKey: 'index.networkGuides.evm.timeseries.title',
-      descriptionKey: 'index.networkGuides.evm.timeseries.description',
-      minutes: 5,
-    },
-    {
-      href: 'https://thegraph.com/docs/en/subgraphs/developing/creating/advanced/',
-      titleKey: 'index.networkGuides.evm.advancedFeatures.title',
-      descriptionKey: 'index.networkGuides.evm.advancedFeatures.description',
-      minutes: 7,
-    },
-  ],
-}
+export const evmSubgraphsOnlyCards: Resource[] = [
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
+    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title',
+    descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description',
+    minutes: 10,
+    icon: <Subgraph size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
+    titleKey: 'index.networkGuides.evm.graphExplorer.title',
+    descriptionKey: 'index.networkGuides.evm.graphExplorer.description',
+    minutes: 12,
+    icon: <GraphExplorer size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/billing/',
+    titleKey: 'index.networkGuides.evm.billing.title',
+    descriptionKey: 'index.networkGuides.evm.billing.description',
+    minutes: 5,
+    icon: <MoneyWavy alt="Money" size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/best-practices/timeseries/',
+    titleKey: 'index.networkGuides.evm.timeseries.title',
+    descriptionKey: 'index.networkGuides.evm.timeseries.description',
+    minutes: 5,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/subgraphs/developing/creating/advanced/',
+    titleKey: 'index.networkGuides.evm.advancedFeatures.title',
+    descriptionKey: 'index.networkGuides.evm.advancedFeatures.description',
+    minutes: 7,
+  },
+]
 
 // Non-EVM + Token API
-export const nonEvmWithTokenAPICards = {
-  topCards: [
-    {
-      href: 'https://docs.substreams.dev/',
-      titleKey: 'index.networkGuides.nonEvm.officialDocs.title',
-      descriptionKey: 'index.networkGuides.nonEvm.officialDocs.description',
-      minutes: 15,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://thegraph.com/docs/en/sps/introduction/',
-      titleKey: 'index.networkGuides.nonEvm.spsIntro.title',
-      descriptionKey: 'index.networkGuides.nonEvm.spsIntro.description',
-      minutes: 8,
-      icon: <SubstreamsPoweredSubgraph size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://substreams.dev/',
-      titleKey: 'index.networkGuides.nonEvm.substreamsDev.title',
-      descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description',
-      minutes: 10,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-  ],
-  bottomCards: [
-    {
-      href: 'https://github.com/streamingfast/substreams-starter',
-      titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title',
-      descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description',
-      minutes: 5,
-    },
-    {
-      href: 'https://github.com/streamingfast/substreams',
-      titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title',
-      descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description',
-      minutes: 7,
-    },
-  ],
-}
+export const nonEvmWithTokenAPICards: Resource[] = [
+  {
+    href: 'https://docs.substreams.dev/',
+    titleKey: 'index.networkGuides.nonEvm.officialDocs.title',
+    descriptionKey: 'index.networkGuides.nonEvm.officialDocs.description',
+    minutes: 15,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://thegraph.com/docs/en/sps/introduction/',
+    titleKey: 'index.networkGuides.nonEvm.spsIntro.title',
+    descriptionKey: 'index.networkGuides.nonEvm.spsIntro.description',
+    minutes: 8,
+    icon: <SubstreamsPoweredSubgraph size={6} />,
+  },
+  {
+    href: 'https://substreams.dev/',
+    titleKey: 'index.networkGuides.nonEvm.substreamsDev.title',
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description',
+    minutes: 10,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://github.com/streamingfast/substreams-starter',
+    titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title',
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description',
+    minutes: 5,
+  },
+  {
+    href: 'https://github.com/streamingfast/substreams',
+    titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title',
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description',
+    minutes: 7,
+  },
+]
 
 // Non-EVM without Token API
-export const nonEvmNoTokenAPICards = {
-  topCards: [
-    {
-      href: 'https://thegraph.com/docs/en/substreams/quick-start/',
-      titleKey: 'index.networkGuides.evm.substreamsQuickStart.title',
-      descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description',
-      minutes: 15,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://substreams.dev/',
-      titleKey: 'index.networkGuides.nonEvm.substreamsDev.title',
-      descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description',
-      minutes: 10,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-    {
-      href: 'https://docs.substreams.dev/how-to-guides/sinks',
-      titleKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.title',
-      descriptionKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.description',
-      minutes: 8,
-      icon: <Substreams size={6} />,
-      className: 'min-h-64',
-    },
-  ],
-  bottomCards: [
-    {
-      href: 'https://github.com/streamingfast/substreams-starter',
-      titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title',
-      descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description',
-      minutes: 5,
-    },
-    {
-      href: 'https://github.com/streamingfast/substreams',
-      titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title',
-      descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description',
-      minutes: 7,
-    },
-  ],
-}
+export const nonEvmNoTokenAPICards: Resource[] = [
+  {
+    href: 'https://thegraph.com/docs/en/substreams/quick-start/',
+    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title',
+    descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description',
+    minutes: 15,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://substreams.dev/',
+    titleKey: 'index.networkGuides.nonEvm.substreamsDev.title',
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description',
+    minutes: 10,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://docs.substreams.dev/how-to-guides/sinks',
+    titleKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.title',
+    descriptionKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.description',
+    minutes: 8,
+    icon: <Substreams size={6} />,
+  },
+  {
+    href: 'https://github.com/streamingfast/substreams-starter',
+    titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title',
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description',
+    minutes: 5,
+  },
+  {
+    href: 'https://github.com/streamingfast/substreams',
+    titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title',
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description',
+    minutes: 7,
+  },
+]

From 2699307621a89c858a1da220214539b013bef121 Mon Sep 17 00:00:00 2001
From: ak <a.kemalakcay@gmail.com>
Date: Tue, 8 Apr 2025 19:19:33 +0300
Subject: [PATCH 2/3] replace use of as any

---
 .../components/NetworkDetailsPage.tsx         |   6 +-
 .../components/ResourceCards.tsx              | 116 +++++++++---------
 2 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/website/src/supportedNetworks/components/NetworkDetailsPage.tsx b/website/src/supportedNetworks/components/NetworkDetailsPage.tsx
index f27914b1c993..d78786407d48 100644
--- a/website/src/supportedNetworks/components/NetworkDetailsPage.tsx
+++ b/website/src/supportedNetworks/components/NetworkDetailsPage.tsx
@@ -66,10 +66,10 @@ function NetworkDetailsPage({ network }: NetworkDetailsPageProps) {
       <div className="grid grid-cols-6 gap-4">
         {cards.map((card) => (
           <Card
-            key={t(card.titleKey as any)}
+            key={t(card.titleKey)}
             href={card.href}
-            title={t(card.titleKey as any)}
-            description={t(card.descriptionKey as any)}
+            title={t(card.titleKey)}
+            description={t(card.descriptionKey)}
             slotAboveTitle={<TimeIcon variant="reading" minutes={card.minutes} />}
             className="col-span-full [&:nth-child(-n+3)]:lg:col-span-2 [&:nth-child(-n+3)]:lg:min-h-64 [&:nth-child(n+4)]:lg:col-span-3"
             icon={card.icon}
diff --git a/website/src/supportedNetworks/components/ResourceCards.tsx b/website/src/supportedNetworks/components/ResourceCards.tsx
index a647dd640efa..eeaa1ba737f4 100644
--- a/website/src/supportedNetworks/components/ResourceCards.tsx
+++ b/website/src/supportedNetworks/components/ResourceCards.tsx
@@ -9,193 +9,193 @@ import {
 
 type Resource = {
   href: string
-  titleKey: string
+  titleKey: string 
   descriptionKey: string
   minutes: number
   icon?: React.ReactNode
 }
 
 // EVM + Subgraphs, Substreams and Token API
-export const evmWithTokenAPICards: Resource[] = [
+export const evmWithTokenAPICards = [
   {
     href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
-    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title',
-    descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description',
+    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description' as const,
     minutes: 10,
     icon: <Subgraph size={6} />,
-  },
+  } ,
   {
     href: 'https://docs.substreams.dev/',
-    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title',
-    descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description',
+    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description' as const,
     minutes: 15,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/token-api/quick-start/',
-    titleKey: 'index.networkGuides.evm.tokenapi.title',
-    descriptionKey: 'index.networkGuides.evm.tokenapi.description',
+    titleKey: 'index.networkGuides.evm.tokenapi.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.tokenapi.description' as const,
     minutes: 8,
     icon: <APIToken size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
-    titleKey: 'index.networkGuides.evm.graphExplorer.title',
-    descriptionKey: 'index.networkGuides.evm.graphExplorer.description',
+    titleKey: 'index.networkGuides.evm.graphExplorer.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.graphExplorer.description' as const,
     minutes: 12,
   },
   {
     href: 'https://substreams.dev/',
-    titleKey: 'index.networkGuides.evm.substreamsDev.title',
-    descriptionKey: 'index.networkGuides.evm.substreamsDev.description',
+    titleKey: 'index.networkGuides.evm.substreamsDev.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.substreamsDev.description' as const,
     minutes: 5,
   },
-]
+] satisfies Resource[]
 
 // EVM without Token API
-export const evmNoTokenAPICards: Resource[] = [
+export const evmNoTokenAPICards = [
   {
     href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
-    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title',
-    descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description',
+    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description' as const,
     minutes: 10,
     icon: <Subgraph size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/substreams/quick-start/',
-    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title',
-    descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description',
+    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description' as const,
     minutes: 15,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/billing/',
-    titleKey: 'index.networkGuides.evm.billing.title',
-    descriptionKey: 'index.networkGuides.evm.billing.description',
+    titleKey: 'index.networkGuides.evm.billing.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.billing.description' as const,
     minutes: 5,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
-    titleKey: 'index.networkGuides.evm.graphExplorer.title',
-    descriptionKey: 'index.networkGuides.evm.graphExplorer.description',
+    titleKey: 'index.networkGuides.evm.graphExplorer.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.graphExplorer.description' as const,
     minutes: 12,
   },
   {
     href: 'https://substreams.dev/',
-    titleKey: 'index.networkGuides.evm.substreamsDev.title',
-    descriptionKey: 'index.networkGuides.evm.substreamsDev.description',
+    titleKey: 'index.networkGuides.evm.substreamsDev.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.substreamsDev.description' as const,
     minutes: 5,
   },
 ]
 
 // EVM only Subgraphs
-export const evmSubgraphsOnlyCards: Resource[] = [
+export const evmSubgraphsOnlyCards = [
   {
     href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
-    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title',
-    descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description',
+    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description' as const,
     minutes: 10,
     icon: <Subgraph size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
-    titleKey: 'index.networkGuides.evm.graphExplorer.title',
-    descriptionKey: 'index.networkGuides.evm.graphExplorer.description',
+    titleKey: 'index.networkGuides.evm.graphExplorer.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.graphExplorer.description' as const,
     minutes: 12,
     icon: <GraphExplorer size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/billing/',
-    titleKey: 'index.networkGuides.evm.billing.title',
-    descriptionKey: 'index.networkGuides.evm.billing.description',
+    titleKey: 'index.networkGuides.evm.billing.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.billing.description' as const,
     minutes: 5,
     icon: <MoneyWavy alt="Money" size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/best-practices/timeseries/',
-    titleKey: 'index.networkGuides.evm.timeseries.title',
-    descriptionKey: 'index.networkGuides.evm.timeseries.description',
+    titleKey: 'index.networkGuides.evm.timeseries.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.timeseries.description' as const,
     minutes: 5,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/developing/creating/advanced/',
-    titleKey: 'index.networkGuides.evm.advancedFeatures.title',
-    descriptionKey: 'index.networkGuides.evm.advancedFeatures.description',
+    titleKey: 'index.networkGuides.evm.advancedFeatures.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.advancedFeatures.description' as const,
     minutes: 7,
   },
 ]
 
 // Non-EVM + Token API
-export const nonEvmWithTokenAPICards: Resource[] = [
+export const nonEvmWithTokenAPICards = [
   {
     href: 'https://docs.substreams.dev/',
-    titleKey: 'index.networkGuides.nonEvm.officialDocs.title',
-    descriptionKey: 'index.networkGuides.nonEvm.officialDocs.description',
+    titleKey: 'index.networkGuides.nonEvm.officialDocs.title' as const, 
+    descriptionKey: 'index.networkGuides.nonEvm.officialDocs.description' as const,
     minutes: 15,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/sps/introduction/',
-    titleKey: 'index.networkGuides.nonEvm.spsIntro.title',
-    descriptionKey: 'index.networkGuides.nonEvm.spsIntro.description',
+    titleKey: 'index.networkGuides.nonEvm.spsIntro.title' as const, 
+    descriptionKey: 'index.networkGuides.nonEvm.spsIntro.description' as const,
     minutes: 8,
     icon: <SubstreamsPoweredSubgraph size={6} />,
   },
   {
     href: 'https://substreams.dev/',
-    titleKey: 'index.networkGuides.nonEvm.substreamsDev.title',
-    descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description',
+    titleKey: 'index.networkGuides.nonEvm.substreamsDev.title' as const, 
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description' as const,
     minutes: 10,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://github.com/streamingfast/substreams-starter',
-    titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title',
-    descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description',
+    titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title' as const, 
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description' as const,
     minutes: 5,
   },
   {
     href: 'https://github.com/streamingfast/substreams',
-    titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title',
-    descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description',
+    titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title' as const, 
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description' as const,
     minutes: 7,
   },
 ]
 
 // Non-EVM without Token API
-export const nonEvmNoTokenAPICards: Resource[] = [
+export const nonEvmNoTokenAPICards = [
   {
     href: 'https://thegraph.com/docs/en/substreams/quick-start/',
-    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title',
-    descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description',
+    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title' as const, 
+    descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description' as const,
     minutes: 15,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://substreams.dev/',
-    titleKey: 'index.networkGuides.nonEvm.substreamsDev.title',
-    descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description',
+    titleKey: 'index.networkGuides.nonEvm.substreamsDev.title' as const, 
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description' as const,
     minutes: 10,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://docs.substreams.dev/how-to-guides/sinks',
-    titleKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.title',
-    descriptionKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.description',
+    titleKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.title' as const, 
+    descriptionKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.description' as const,
     minutes: 8,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://github.com/streamingfast/substreams-starter',
-    titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title',
-    descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description',
+    titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title' as const, 
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description' as const,
     minutes: 5,
   },
   {
     href: 'https://github.com/streamingfast/substreams',
-    titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title',
-    descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description',
+    titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title' as const, 
+    descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description' as const,
     minutes: 7,
   },
 ]

From 201221a635b43f8363f397c23f62c81ac6e83864 Mon Sep 17 00:00:00 2001
From: ak <a.kemalakcay@gmail.com>
Date: Tue, 8 Apr 2025 19:20:11 +0300
Subject: [PATCH 3/3] lint

---
 .../components/ResourceCards.tsx              | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/website/src/supportedNetworks/components/ResourceCards.tsx b/website/src/supportedNetworks/components/ResourceCards.tsx
index eeaa1ba737f4..7c000b4f0b06 100644
--- a/website/src/supportedNetworks/components/ResourceCards.tsx
+++ b/website/src/supportedNetworks/components/ResourceCards.tsx
@@ -9,7 +9,7 @@ import {
 
 type Resource = {
   href: string
-  titleKey: string 
+  titleKey: string
   descriptionKey: string
   minutes: number
   icon?: React.ReactNode
@@ -19,34 +19,34 @@ type Resource = {
 export const evmWithTokenAPICards = [
   {
     href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
-    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title' as const, 
+    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title' as const,
     descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description' as const,
     minutes: 10,
     icon: <Subgraph size={6} />,
-  } ,
+  },
   {
     href: 'https://docs.substreams.dev/',
-    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title' as const, 
+    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title' as const,
     descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description' as const,
     minutes: 15,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/token-api/quick-start/',
-    titleKey: 'index.networkGuides.evm.tokenapi.title' as const, 
+    titleKey: 'index.networkGuides.evm.tokenapi.title' as const,
     descriptionKey: 'index.networkGuides.evm.tokenapi.description' as const,
     minutes: 8,
     icon: <APIToken size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
-    titleKey: 'index.networkGuides.evm.graphExplorer.title' as const, 
+    titleKey: 'index.networkGuides.evm.graphExplorer.title' as const,
     descriptionKey: 'index.networkGuides.evm.graphExplorer.description' as const,
     minutes: 12,
   },
   {
     href: 'https://substreams.dev/',
-    titleKey: 'index.networkGuides.evm.substreamsDev.title' as const, 
+    titleKey: 'index.networkGuides.evm.substreamsDev.title' as const,
     descriptionKey: 'index.networkGuides.evm.substreamsDev.description' as const,
     minutes: 5,
   },
@@ -56,34 +56,34 @@ export const evmWithTokenAPICards = [
 export const evmNoTokenAPICards = [
   {
     href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
-    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title' as const, 
+    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title' as const,
     descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description' as const,
     minutes: 10,
     icon: <Subgraph size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/substreams/quick-start/',
-    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title' as const, 
+    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title' as const,
     descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description' as const,
     minutes: 15,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/billing/',
-    titleKey: 'index.networkGuides.evm.billing.title' as const, 
+    titleKey: 'index.networkGuides.evm.billing.title' as const,
     descriptionKey: 'index.networkGuides.evm.billing.description' as const,
     minutes: 5,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
-    titleKey: 'index.networkGuides.evm.graphExplorer.title' as const, 
+    titleKey: 'index.networkGuides.evm.graphExplorer.title' as const,
     descriptionKey: 'index.networkGuides.evm.graphExplorer.description' as const,
     minutes: 12,
   },
   {
     href: 'https://substreams.dev/',
-    titleKey: 'index.networkGuides.evm.substreamsDev.title' as const, 
+    titleKey: 'index.networkGuides.evm.substreamsDev.title' as const,
     descriptionKey: 'index.networkGuides.evm.substreamsDev.description' as const,
     minutes: 5,
   },
@@ -93,34 +93,34 @@ export const evmNoTokenAPICards = [
 export const evmSubgraphsOnlyCards = [
   {
     href: 'https://thegraph.com/docs/en/subgraphs/quick-start/',
-    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title' as const, 
+    titleKey: 'index.networkGuides.evm.subgraphQuickStart.title' as const,
     descriptionKey: 'index.networkGuides.evm.subgraphQuickStart.description' as const,
     minutes: 10,
     icon: <Subgraph size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/explorer/',
-    titleKey: 'index.networkGuides.evm.graphExplorer.title' as const, 
+    titleKey: 'index.networkGuides.evm.graphExplorer.title' as const,
     descriptionKey: 'index.networkGuides.evm.graphExplorer.description' as const,
     minutes: 12,
     icon: <GraphExplorer size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/billing/',
-    titleKey: 'index.networkGuides.evm.billing.title' as const, 
+    titleKey: 'index.networkGuides.evm.billing.title' as const,
     descriptionKey: 'index.networkGuides.evm.billing.description' as const,
     minutes: 5,
     icon: <MoneyWavy alt="Money" size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/best-practices/timeseries/',
-    titleKey: 'index.networkGuides.evm.timeseries.title' as const, 
+    titleKey: 'index.networkGuides.evm.timeseries.title' as const,
     descriptionKey: 'index.networkGuides.evm.timeseries.description' as const,
     minutes: 5,
   },
   {
     href: 'https://thegraph.com/docs/en/subgraphs/developing/creating/advanced/',
-    titleKey: 'index.networkGuides.evm.advancedFeatures.title' as const, 
+    titleKey: 'index.networkGuides.evm.advancedFeatures.title' as const,
     descriptionKey: 'index.networkGuides.evm.advancedFeatures.description' as const,
     minutes: 7,
   },
@@ -130,34 +130,34 @@ export const evmSubgraphsOnlyCards = [
 export const nonEvmWithTokenAPICards = [
   {
     href: 'https://docs.substreams.dev/',
-    titleKey: 'index.networkGuides.nonEvm.officialDocs.title' as const, 
+    titleKey: 'index.networkGuides.nonEvm.officialDocs.title' as const,
     descriptionKey: 'index.networkGuides.nonEvm.officialDocs.description' as const,
     minutes: 15,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://thegraph.com/docs/en/sps/introduction/',
-    titleKey: 'index.networkGuides.nonEvm.spsIntro.title' as const, 
+    titleKey: 'index.networkGuides.nonEvm.spsIntro.title' as const,
     descriptionKey: 'index.networkGuides.nonEvm.spsIntro.description' as const,
     minutes: 8,
     icon: <SubstreamsPoweredSubgraph size={6} />,
   },
   {
     href: 'https://substreams.dev/',
-    titleKey: 'index.networkGuides.nonEvm.substreamsDev.title' as const, 
+    titleKey: 'index.networkGuides.nonEvm.substreamsDev.title' as const,
     descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description' as const,
     minutes: 10,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://github.com/streamingfast/substreams-starter',
-    titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title' as const, 
+    titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title' as const,
     descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description' as const,
     minutes: 5,
   },
   {
     href: 'https://github.com/streamingfast/substreams',
-    titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title' as const, 
+    titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title' as const,
     descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description' as const,
     minutes: 7,
   },
@@ -167,34 +167,34 @@ export const nonEvmWithTokenAPICards = [
 export const nonEvmNoTokenAPICards = [
   {
     href: 'https://thegraph.com/docs/en/substreams/quick-start/',
-    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title' as const, 
+    titleKey: 'index.networkGuides.evm.substreamsQuickStart.title' as const,
     descriptionKey: 'index.networkGuides.evm.substreamsQuickStart.description' as const,
     minutes: 15,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://substreams.dev/',
-    titleKey: 'index.networkGuides.nonEvm.substreamsDev.title' as const, 
+    titleKey: 'index.networkGuides.nonEvm.substreamsDev.title' as const,
     descriptionKey: 'index.networkGuides.nonEvm.substreamsDev.description' as const,
     minutes: 10,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://docs.substreams.dev/how-to-guides/sinks',
-    titleKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.title' as const, 
+    titleKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.title' as const,
     descriptionKey: 'index.networkGuides.nonEvm.customSubstreamsSinks.description' as const,
     minutes: 8,
     icon: <Substreams size={6} />,
   },
   {
     href: 'https://github.com/streamingfast/substreams-starter',
-    titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title' as const, 
+    titleKey: 'index.networkGuides.nonEvm.substreamsStarter.title' as const,
     descriptionKey: 'index.networkGuides.nonEvm.substreamsStarter.description' as const,
     minutes: 5,
   },
   {
     href: 'https://github.com/streamingfast/substreams',
-    titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title' as const, 
+    titleKey: 'index.networkGuides.nonEvm.substreamsRepo.title' as const,
     descriptionKey: 'index.networkGuides.nonEvm.substreamsRepo.description' as const,
     minutes: 7,
   },