Add CCIP TON

src/components/github-card/GitHubCard.module.css

@@ -0,0 +1,94 @@
+.card {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3x);
+  padding: var(--space-4x);
+  min-height: 96px;
+  border-radius: 10px;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-background-primary);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.card:hover {
+  background: var(--theme-bg-hover);
+  border-color: var(--gray-300);
+  box-shadow:
+    0 2px 6px rgba(0, 0, 0, 0.06),
+    0 6px 20px rgba(0, 0, 0, 0.04);
+  transform: translateY(-1px);
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--theme-accent);
+  outline-offset: 2px;
+}
+
+.icon {
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  border: 1px solid var(--gray-200);
+  background: var(--gray-50);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon > :global(svg),
+.icon > :global(img) {
+  width: 22px;
+  height: 22px;
+  display: block;
+}
+
+.icon > :global(img) {
+  border-radius: 999px;
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1x);
+}
+
+.title {
+  font-size: 16px;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-heading);
+  line-height: 1.4;
+  padding-bottom: 1px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+  padding-bottom: 1px;
+}
+
+.arrow {
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+  transition:
+    transform 0.15s ease,
+    color 0.15s ease;
+}
+
+.card:hover .arrow,
+.card:focus-visible .arrow {
+  transform: translateX(3px);
+  color: var(--color-text-primary);
+}

src/components/github-card/GitHubCard.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react"
+import styles from "./GitHubCard.module.css"
+import { clsx } from "~/lib/clsx/clsx.ts"
+import { cardIcons, type CardIconName } from "./icons/index.js"
+
+type GitHubCardProps = {
+  title: string
+  href: string
+  icon?: ReactNode
+  iconName?: CardIconName | string
+  children?: ReactNode
+  className?: string
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "className">
+
+export function GitHubCard({ title, href, icon, iconName, children, className, ...props }: GitHubCardProps) {
+  const iconFromName = iconName ? cardIcons[iconName as CardIconName] : undefined
+  const resolvedIcon = icon ?? (iconFromName ? <img src={iconFromName.src} alt="" aria-hidden="true" /> : null)
+
+  return (
+    <a href={href} className={clsx(styles.card, className)} {...props}>
+      {resolvedIcon ? <span className={styles.icon}>{resolvedIcon}</span> : null}
+      <span className={styles.content}>
+        <span className={styles.title} title={title}>
+          {title}
+        </span>
+        {children ? <span className={styles.description}>{children}</span> : null}
+      </span>
+      <span className={styles.arrow} aria-hidden="true">
+        →
+      </span>
+    </a>
+  )
+}

src/components/github-card/icons/index.ts

@@ -0,0 +1,7 @@
+import githubSvgCard from "./github-svg-card.svg"
+
+export const cardIcons = {
+  "github-svg-card": githubSvgCard,
+} as const
+
+export type CardIconName = keyof typeof cardIcons

src/components/github-card/index.ts

@@ -0,0 +1,3 @@
+export { GitHubCard } from "./GitHubCard.tsx"
+export { cardIcons } from "./icons/index.js"
+export type { CardIconName } from "./icons/index.js"

src/components/index.ts

@@ -22,3 +22,4 @@ export { default as SideBySideCode } from "./SideBySideCode/SideBySideCode.astro
 export { default as CodeHighlightBlock } from "./CodeHighlightBlock/CodeHighlightBlock.astro"
 export { default as CodeHighlightBlockMulti } from "./CodeHighlightBlockMulti/CodeHighlightBlockMulti.astro"
 export { Callout } from "./Callout/Callout.tsx"
+export { GitHubCard } from "./github-card/index.ts"

src/config/chainTypes.ts

@@ -84,9 +84,9 @@ export const CHAIN_TYPE_CONFIGS: Record<ChainType, ChainTypeConfig> = {
 
 /**
  * Chain types supported in CCIP
- * Currently: EVM, Solana, Aptos
+ * Currently: EVM, Solana, Aptos, TON
  */
-export const CCIP_SUPPORTED_CHAINS: ChainType[] = ["evm", "solana", "aptos"]
+export const CCIP_SUPPORTED_CHAINS: ChainType[] = ["evm", "solana", "aptos", "ton"]
 
 /**
  * Sections that support chain type filtering (OPT-IN)