From d3a28ab560260866f4c47f020cc20d95167dd039 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 22 Oct 2025 14:17:31 -0400 Subject: [PATCH 1/8] add grid --- public/images/ccip-logo.svg | 3 + public/images/direct-stacking-logo.svg | 8 ++ public/images/foundry-logo.svg | 11 +++ public/images/hardhat-logo.svg | 20 +++++ public/images/js-logo.svg | 4 + public/images/npm-logo.png | Bin 0 -> 493 bytes public/images/ts-logo.svg | 5 ++ .../ToolsUtilitiesGrid/ToolItem.astro | 28 +++++++ .../ToolsUtilitiesGrid.astro | 21 ++++++ .../toolsUtilities.module.css | 45 ++++++++++++ src/components/ToolsUtilitiesGrid/types.ts | 7 ++ src/layouts/DocsV3Layout/DocsV3Layout.astro | 69 ++++++++++++++++++ 12 files changed, 221 insertions(+) create mode 100644 public/images/ccip-logo.svg create mode 100644 public/images/direct-stacking-logo.svg create mode 100644 public/images/foundry-logo.svg create mode 100644 public/images/hardhat-logo.svg create mode 100644 public/images/js-logo.svg create mode 100644 public/images/npm-logo.png create mode 100644 public/images/ts-logo.svg create mode 100644 src/components/ToolsUtilitiesGrid/ToolItem.astro create mode 100644 src/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro create mode 100644 src/components/ToolsUtilitiesGrid/toolsUtilities.module.css create mode 100644 src/components/ToolsUtilitiesGrid/types.ts diff --git a/public/images/ccip-logo.svg b/public/images/ccip-logo.svg new file mode 100644 index 00000000000..79f05e8a605 --- /dev/null +++ b/public/images/ccip-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/direct-stacking-logo.svg b/public/images/direct-stacking-logo.svg new file mode 100644 index 00000000000..1814e384a6a --- /dev/null +++ b/public/images/direct-stacking-logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/foundry-logo.svg b/public/images/foundry-logo.svg new file mode 100644 index 00000000000..2315253caf3 --- /dev/null +++ b/public/images/foundry-logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/hardhat-logo.svg b/public/images/hardhat-logo.svg new file mode 100644 index 00000000000..6077c84afae --- /dev/null +++ b/public/images/hardhat-logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/js-logo.svg b/public/images/js-logo.svg new file mode 100644 index 00000000000..a4baee9a679 --- /dev/null +++ b/public/images/js-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/npm-logo.png b/public/images/npm-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..481f9493e8d47536b76f4d4d400813b387d1b52a GIT binary patch literal 493 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?3oVGw3ym^DWND9BhG zw`pVf?%sCc$yExwc%~82#b}jRM$Er60p7~W8F|8cB<+ma|PJA+$Vq^XFk3&pZ zMCCstW218dO1*B{_tk58E_q-0FtLC|OWSw$&O0S@A3X}Kc<1!cxoJvRYl+9N6C(Gm zZ4aJ)$5*nvS0(r}_lz62+{#MNn(u9UH_QK)NlDl=!F%@(us*5$pr>~>b%9;puAn^& zZ#Tz1(zftpDwxc0=hB8LC!bI3jeGn-jO9hx>ag<>>@)7(Z;sbVl8IU>BzMhx&Af?* z2Yi_de%D`KvG#gZZA$br@nw%UvhV0$cJ#T|)6=!Ve;$1mt@Ap@V9p6r2Q*U!!CWJ5 zvNxmk>s_YQDRp1cuWB5ge|hcIgzOCm1<#y4pj!9Yux>iobfB((4h&9zyq$yPViL<< zvtPd;^8TfdoJ?Joht_A;*^AlQ_`c5E-EO;R-ej&&$C=97&zd?;6*%5`x-u!tZ0mmJ Yi1O0QY3X09fU(2i>FVdQ&MBb@0LCEG5dZ)H literal 0 HcmV?d00001 diff --git a/public/images/ts-logo.svg b/public/images/ts-logo.svg new file mode 100644 index 00000000000..047caf543cc --- /dev/null +++ b/public/images/ts-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/ToolsUtilitiesGrid/ToolItem.astro b/src/components/ToolsUtilitiesGrid/ToolItem.astro new file mode 100644 index 00000000000..cb96ce61a26 --- /dev/null +++ b/src/components/ToolsUtilitiesGrid/ToolItem.astro @@ -0,0 +1,28 @@ +--- +import { Typography } from "@chainlink/blocks" +import styles from "./toolsUtilities.module.css" +import { Link } from "./types" + +type Props = Link + +const { description, image, imageAlt, label, link } = Astro.props +--- + + +
{imageAlt}
+ +
+
+ {label} + {description} +
+ + +
+ diff --git a/src/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro b/src/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro new file mode 100644 index 00000000000..d38f9ef37e0 --- /dev/null +++ b/src/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro @@ -0,0 +1,21 @@ +--- +import styles from "./toolsUtilities.module.css" + +import { Link } from "./types" +import ToolItem from "./ToolItem.astro" +import { Typography } from "@chainlink/blocks" + +interface Props { + links: Link[] +} + +const { links } = Astro.props +--- + +
+ Tools & Utilities + +
+ {links.map((link) => )} +
+
diff --git a/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css b/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css new file mode 100644 index 00000000000..eb07391541c --- /dev/null +++ b/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css @@ -0,0 +1,45 @@ +.wrapper { + padding: 56px 0; +} +.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + margin-top: var(--space-8x); +} + +.card { + padding: var(--space-6x); + display: flex; + gap: var(--space-4x); + align-items: start; +} + +.card:hover { + background: var(--muted); + & .arrow { + opacity: 1; + } +} + +.imageContainer { + min-width: 48px; + height: 48px; + background: var(--background-alt); + border: 1px solid var(--border); + border-radius: var(--space-1x); + display: flex; + align-items: center; + justify-content: center; +} + +.content { + display: flex; + + & > img { + align-self: end; + } +} + +.arrow { + opacity: 0; +} diff --git a/src/components/ToolsUtilitiesGrid/types.ts b/src/components/ToolsUtilitiesGrid/types.ts new file mode 100644 index 00000000000..2c645744a9f --- /dev/null +++ b/src/components/ToolsUtilitiesGrid/types.ts @@ -0,0 +1,7 @@ +export interface Link { + image: string + imageAlt: string + label: string + link: string + description: string +} diff --git a/src/layouts/DocsV3Layout/DocsV3Layout.astro b/src/layouts/DocsV3Layout/DocsV3Layout.astro index 4eb6a1b23fb..1e4f8d31bf0 100644 --- a/src/layouts/DocsV3Layout/DocsV3Layout.astro +++ b/src/layouts/DocsV3Layout/DocsV3Layout.astro @@ -8,6 +8,7 @@ import LeftSidebar from "~/components/LeftSidebar/LeftSidebar.astro" import PageContent from "~/components/PageContent/PageContent.astro" import { TabGrid } from "~/components/TabGrid/TabGrid" import LayoutHero from "~/components/LayoutHero/LayoutHero.astro" +import ToolsUtilitiesGrid from "~/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro" interface Props { frontmatter: BaseFrontmatter @@ -30,6 +31,63 @@ const currentPage = new URL(Astro.request.url).pathname const includeLinkToWalletScript = !!Astro.props.frontmatter.metadata?.linkToWallet +// Tools and utilities data +const toolsAndUtilities = [ + { + image: "ccip-logo.svg", + imageAlt: "CCIP API icon", + label: "CCIP API", + link: "/ccip/api", + description: "An API for message retrieval and lane latency information.", + }, + { + image: "js-logo.svg", + imageAlt: "JavaScript SDK icon", + label: "Javascript SDK", + link: "/ccip/tutorials/js-sdk", + description: "Integrate CCIP functionality directly into your web applications for EVM-compatible chains.", + }, + { + image: "ts-logo.svg", + imageAlt: "CLI icon", + label: "CLI", + link: "/ccip/tutorials/cli", + description: "TypeScript command-line interface and library designed for interacting with deployed CCIP contracts.", + }, + { + image: "hardhat-logo.svg", + imageAlt: "Hardhat icon", + label: "Hardhat Starter Kit", + link: "https://github.com/smartcontractkit/hardhat-starter-kit", + description: + "Ready-to-go boilerplate for basic CCIP use cases that help you get started building quickly with Hardhat.", + }, + { + image: "foundry-logo.svg", + imageAlt: "Foundry icon", + label: "Foundry Starter Kit", + link: "https://github.com/smartcontractkit/foundry-starter-kit", + description: + "Ready-to-go boilerplate for basic CCIP use cases that help you get started building quickly with Foundry.", + }, + { + image: "npm-logo.png", + imageAlt: "NPM icon", + label: "CCIP Contracts NPM", + link: "https://www.npmjs.com/package/@chainlink/contracts-ccip", + description: + "An npm package providing Solidity smart contract implementations to integrate CCIP into your EVM-based project.", + }, + { + image: "direct-stacking-logo.svg", + imageAlt: "Direct Staking icon", + label: "Direct Staking", + link: "/staking", + description: + "Stake native tokens on supported L2 networks and receive liquid staked tokens directly on the same chain.", + }, +] + // Example tutorial data const exampleTutorials = [ { @@ -135,6 +193,11 @@ const exampleTutorials = [
+<<<<<<< HEAD +======= +<<<<<<< HEAD +======= +>>>>>>> 91667168 (add grid) +<<<<<<< HEAD +======= + + +>>>>>>> b2ee97c7 (add grid) +>>>>>>> 91667168 (add grid) From 45dbfaf88015214162d27683182de379a29608e3 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 22 Oct 2025 14:24:04 -0400 Subject: [PATCH 2/8] Update DocsV3Layout.astro --- src/layouts/DocsV3Layout/DocsV3Layout.astro | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/layouts/DocsV3Layout/DocsV3Layout.astro b/src/layouts/DocsV3Layout/DocsV3Layout.astro index 1e4f8d31bf0..732175f26b4 100644 --- a/src/layouts/DocsV3Layout/DocsV3Layout.astro +++ b/src/layouts/DocsV3Layout/DocsV3Layout.astro @@ -193,11 +193,6 @@ const exampleTutorials = [
-<<<<<<< HEAD -======= -<<<<<<< HEAD -======= ->>>>>>> 91667168 (add grid) -<<<<<<< HEAD -======= ->>>>>>> b2ee97c7 (add grid) ->>>>>>> 91667168 (add grid) + From 4b6610060412505d1c17627f5482432b7febc89a Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 22 Oct 2025 14:27:53 -0400 Subject: [PATCH 3/8] Update DocsV3Layout.astro --- src/layouts/DocsV3Layout/DocsV3Layout.astro | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/layouts/DocsV3Layout/DocsV3Layout.astro b/src/layouts/DocsV3Layout/DocsV3Layout.astro index 732175f26b4..238b153c8ad 100644 --- a/src/layouts/DocsV3Layout/DocsV3Layout.astro +++ b/src/layouts/DocsV3Layout/DocsV3Layout.astro @@ -7,7 +7,6 @@ import * as CONFIG from "~/config" import LeftSidebar from "~/components/LeftSidebar/LeftSidebar.astro" import PageContent from "~/components/PageContent/PageContent.astro" import { TabGrid } from "~/components/TabGrid/TabGrid" -import LayoutHero from "~/components/LayoutHero/LayoutHero.astro" import ToolsUtilitiesGrid from "~/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro" interface Props { @@ -193,16 +192,6 @@ const exampleTutorials = [
- - From bb941ed9fa545b4583ef19579737c1cf22fe8209 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 22 Oct 2025 14:31:03 -0400 Subject: [PATCH 4/8] rwd --- .../ToolsUtilitiesGrid/toolsUtilities.module.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css b/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css index eb07391541c..577dc45dbe2 100644 --- a/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css +++ b/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css @@ -43,3 +43,15 @@ .arrow { opacity: 0; } + +@media screen and (max-width: 1135px) { + .container { + grid-template-columns: repeat(2, 1fr); + } +} + +@media screen and (max-width: 525px) { + .container { + grid-template-columns: repeat(1, 1fr); + } +} From 922f3b041a9a9d59e602ada6ebee647006327027 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 22 Oct 2025 14:39:36 -0400 Subject: [PATCH 5/8] Update DocsV3Layout.astro --- src/layouts/DocsV3Layout/DocsV3Layout.astro | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/layouts/DocsV3Layout/DocsV3Layout.astro b/src/layouts/DocsV3Layout/DocsV3Layout.astro index 238b153c8ad..2f967a1d010 100644 --- a/src/layouts/DocsV3Layout/DocsV3Layout.astro +++ b/src/layouts/DocsV3Layout/DocsV3Layout.astro @@ -43,14 +43,14 @@ const toolsAndUtilities = [ image: "js-logo.svg", imageAlt: "JavaScript SDK icon", label: "Javascript SDK", - link: "/ccip/tutorials/js-sdk", + link: "https://github.com/smartcontractkit/ccip-javascript-sdk", description: "Integrate CCIP functionality directly into your web applications for EVM-compatible chains.", }, { image: "ts-logo.svg", imageAlt: "CLI icon", label: "CLI", - link: "/ccip/tutorials/cli", + link: "https://github.com/smartcontractkit/ccip-tools-ts", description: "TypeScript command-line interface and library designed for interacting with deployed CCIP contracts.", }, { @@ -81,7 +81,7 @@ const toolsAndUtilities = [ image: "direct-stacking-logo.svg", imageAlt: "Direct Staking icon", label: "Direct Staking", - link: "/staking", + link: "https://github.com/Aphyla/chainlink-csr", description: "Stake native tokens on supported L2 networks and receive liquid staked tokens directly on the same chain.", }, From 3cff399685edaffaa6bceae30d3911f6ce03dd6e Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 22 Oct 2025 14:40:54 -0400 Subject: [PATCH 6/8] Update DocsV3Layout.astro --- src/layouts/DocsV3Layout/DocsV3Layout.astro | 1 - 1 file changed, 1 deletion(-) diff --git a/src/layouts/DocsV3Layout/DocsV3Layout.astro b/src/layouts/DocsV3Layout/DocsV3Layout.astro index 2f967a1d010..1aea6aba909 100644 --- a/src/layouts/DocsV3Layout/DocsV3Layout.astro +++ b/src/layouts/DocsV3Layout/DocsV3Layout.astro @@ -30,7 +30,6 @@ const currentPage = new URL(Astro.request.url).pathname const includeLinkToWalletScript = !!Astro.props.frontmatter.metadata?.linkToWallet -// Tools and utilities data const toolsAndUtilities = [ { image: "ccip-logo.svg", From 206f1ae70730efa65c4c63f2e7b2f15d43d71084 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 22 Oct 2025 15:38:16 -0400 Subject: [PATCH 7/8] Update ToolsUtilitiesGrid.astro --- src/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro b/src/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro index d38f9ef37e0..fa875b286c8 100644 --- a/src/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro +++ b/src/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro @@ -13,7 +13,12 @@ const { links } = Astro.props ---
- Tools & Utilities + Tools & Utilities
{links.map((link) => )} From 5f33d52aefe6ef499309b21dbf1f0eb033db99b1 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Thu, 23 Oct 2025 12:41:04 -0400 Subject: [PATCH 8/8] add readme --- src/components/ToolsUtilitiesGrid/README.md | 82 +++++++++++++++++++ .../ToolsUtilitiesGrid/ToolItem.astro | 2 +- 2 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 src/components/ToolsUtilitiesGrid/README.md diff --git a/src/components/ToolsUtilitiesGrid/README.md b/src/components/ToolsUtilitiesGrid/README.md new file mode 100644 index 00000000000..550b5ae7de0 --- /dev/null +++ b/src/components/ToolsUtilitiesGrid/README.md @@ -0,0 +1,82 @@ +# ToolsUtilitiesGrid + +## What it does + +This component displays a grid of clickable cards that showcase tools and utilities. Each card includes an icon, title, description, and link. It's perfect for creating a visual directory of resources, tools, or utilities that users can browse and click through to. + +## How to use it + +1. Import the component in your Astro layout or page: + +```astro +import ToolsUtilitiesGrid from "~/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro" +``` + +2. Create an array of links with the information for each tool/utility you want to display + +3. Add the component to your page and pass in the links: + +```astro + +``` + +## Example + +Here's a complete example showing how to use the component: + +```astro +--- +import ToolsUtilitiesGrid from "~/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro" + +const toolsAndUtilities = [ + { + image: "/images/ccip-logo.svg", + imageAlt: "CCIP API icon", + label: "CCIP API", + link: "/ccip/api", + description: "An API for message retrieval and lane latency information.", + }, + { + image: "/images/js-logo.svg", + imageAlt: "JavaScript SDK icon", + label: "Javascript SDK", + link: "https://github.com/smartcontractkit/ccip-javascript-sdk", + description: "Integrate CCIP functionality directly into your web applications for EVM-compatible chains.", + }, + { + image: "/images/hardhat-logo.svg", + imageAlt: "Hardhat icon", + label: "Hardhat Starter Kit", + link: "https://github.com/smartcontractkit/hardhat-starter-kit", + description: + "Ready-to-go boilerplate for basic CCIP use cases that help you get started building quickly with Hardhat.", + }, +] +--- + + +``` + +## What you need to provide + +Each item in your `links` array needs these fields: + +| Field | What it is | Example | +| --------------- | ----------------------------------------------------------- | -------------------------------------------------------------- | +| **image** | The full path to the icon/logo image | `"/images/ccip-logo.svg"` | +| **imageAlt** | Description of the image for accessibility | `"CCIP API icon"` | +| **label** | The title/name of the tool or utility | `"CCIP API"` | +| **link** | Where the card should link to (can be internal or external) | `"/ccip/api"` or `"https://github.com/..."` | +| **description** | A short description explaining what the tool does | `"An API for message retrieval and lane latency information."` | + +## Where to put images + +Place your icon/logo images in the `/public/images/` directory, and reference them with the full path starting with `/images/`. + +For example, if you use `image: "/images/my-tool-logo.svg"`, the actual file should be at: + +``` +/public/images/my-tool-logo.svg +``` + +You can also use images from other locations by providing the full path (e.g., `"/assets/logos/my-logo.png"`). diff --git a/src/components/ToolsUtilitiesGrid/ToolItem.astro b/src/components/ToolsUtilitiesGrid/ToolItem.astro index cb96ce61a26..eb5b7f590c7 100644 --- a/src/components/ToolsUtilitiesGrid/ToolItem.astro +++ b/src/components/ToolsUtilitiesGrid/ToolItem.astro @@ -9,7 +9,7 @@ const { description, image, imageAlt, label, link } = Astro.props --- -
{imageAlt}
+
{imageAlt}