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 00000000000..481f9493e8d Binary files /dev/null and b/public/images/npm-logo.png differ 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/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 new file mode 100644 index 00000000000..eb5b7f590c7 --- /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..fa875b286c8 --- /dev/null +++ b/src/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro @@ -0,0 +1,26 @@ +--- +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..577dc45dbe2 --- /dev/null +++ b/src/components/ToolsUtilitiesGrid/toolsUtilities.module.css @@ -0,0 +1,57 @@ +.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; +} + +@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); + } +} 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 e22c08c265b..98a6989283e 100644 --- a/src/layouts/DocsV3Layout/DocsV3Layout.astro +++ b/src/layouts/DocsV3Layout/DocsV3Layout.astro @@ -7,6 +7,8 @@ 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 ToolsUtilitiesGrid from "~/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro" import LayoutHero from "~/components/LayoutHero/LayoutHero.astro" import ResourceSection from "~/components/Resource/ResourceSection.astro" import MediaSection from "~/components/MediaSection/MediaSection.astro" @@ -41,6 +43,61 @@ const currentPage = new URL(Astro.request.url).pathname const includeLinkToWalletScript = !!Astro.props.frontmatter.metadata?.linkToWallet +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: "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: "https://github.com/smartcontractkit/ccip-tools-ts", + 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: "https://github.com/Aphyla/chainlink-csr", + description: + "Stake native tokens on supported L2 networks and receive liquid staked tokens directly on the same chain.", + }, +] // Example resources data const exampleResources = [ { @@ -205,6 +262,7 @@ const quickLinks = [
+ +