Merge branch 'main' into gin/consistent-case

.env.example

@@ -1,3 +1,5 @@
 ALGOLIA_APP_ID=I9A62UQS9Z
 ALGOLIA_WRITE_API_KEY=
-ALGOLIA_INDEX_NAME=docs-test
+ALGOLIA_INDEX_NAME=docs-test
+PUBLIC_ALGOLIA_SEARCH_APP_ID=
+PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY=

.github/workflows/test.yml

@@ -2,27 +2,116 @@ name: Test
 on: [push, pull_request]
 
 jobs:
-  test:
-    name: Test
+  # Job 1: Check Solidity Compilation and Solhint
+  solidity:
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+        uses: actions/checkout@v4
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      
       - name: Install Dependencies
-        run: npm i
+        run: npm ci
+
       - name: Check Solidity Compilation
         run: npm run sol:compile
+
       - name: Check Solidity Solhint
         run: npm run lint-solc
-      - name: Check Eslint
+
+  # Job 2: Check ESLint
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Check ESLint
         run: npm run lint
-      - name: Build
-        run: npm run build
-      # TODO: fix css files throwing 404 errors
-      - name: Check internal links
+
+  # Job 3: Check Internal Links
+  linkcheck-internal:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Check Internal Links
         run: npm run linkcheck-internal
-      - name: Check types
-        run: npm run typecheck
+
+  # Job 4: Check Types
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Check Types
+        run: npm run typecheck
+
+  # Job 5: Run Jest Tests
+  jest:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Run Jest Tests
+        run: npm test
+
+      - name: Upload Test Coverage
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-report
+          path: coverage/
+          retention-days: 30

.gitignore

@@ -13,6 +13,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+server.log
 
 # environment variables
 .env

.prettierignore

@@ -1,6 +1,9 @@
 dist
 .cache
 .test
+.vercel
+.astro
+temp
 node_modules
 .github
 .changeset

CODEOWNERS

@@ -1 +1 @@
-*   @dwightjl @aelmanaa @thedriftofwords @khadni
+*   @gfletcher-cll @aelmanaa @thedriftofwords @khadni

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 SmartContract Chainlink Limited SEZC
+Copyright (c) 2025 SmartContract Chainlink Limited SEZC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

SIDE_BY_SIDE_CODE.md

@@ -0,0 +1,187 @@
+# SideBySideCode Component
+
+A modern, accessible component for displaying code alongside explanatory content. Perfect for documentation, tutorials, and educational content.
+
+## Features
+
+- 🎯 Side-by-side display of code and explanations
+- 🔍 Syntax highlighting with Shiki
+- 📍 Interactive line highlighting
+- 📋 One-click code copying
+- 🌐 Load code from local files or URLs
+- 📱 Responsive design
+- ♿ WCAG AA compliant
+
+## Basic Usage
+
+```mdx
+import { SideBySideCode } from "@components"
+
+<SideBySideCode language="solidity" codeSrc="/samples/example.sol" title="Example.sol">
+  This is where you put your explanation text. It will appear alongside the code.
+</SideBySideCode>
+```
+
+## Loading Code
+
+The component supports two methods for loading code:
+
+### 1. Local Files
+
+Place your code files in the `public/samples` directory and reference them with a relative path:
+
+```mdx
+<SideBySideCode language="javascript" codeSrc="/samples/example.js" title="Example.js">
+  Explanation goes here...
+</SideBySideCode>
+```
+
+### 2. Remote URLs
+
+Load code directly from any HTTP(S) URL:
+
+```mdx
+<SideBySideCode
+  language="python"
+  codeSrc="https://raw.githubusercontent.com/user/repo/main/example.py"
+  title="Example.py"
+>
+  Explanation goes here...
+</SideBySideCode>
+```
+
+## Interactive Line Highlighting
+
+Highlight specific lines of code to draw attention to important sections:
+
+```mdx
+<SideBySideCode
+  language="typescript"
+  codeSrc="/samples/example.ts"
+  title="Example.ts"
+  highlights={[
+    {
+      lines: [1, 2, 3],
+      label: "Imports",
+      description: "Import required dependencies",
+    },
+    {
+      lines: [5, 6, 7],
+      label: "Configuration",
+      description: "Set up the configuration object",
+    },
+  ]}
+>
+  The highlights will create interactive cards that, when clicked, will highlight the corresponding lines of code.
+</SideBySideCode>
+```
+
+## Props Reference
+
+| Prop         | Type        | Required | Description                                                            |
+| ------------ | ----------- | -------- | ---------------------------------------------------------------------- |
+| `language`   | `string`    | No       | Programming language for syntax highlighting. Defaults to "plaintext". |
+| `codeSrc`    | `string`    | Yes      | Path to local file (in public/samples) or HTTP(S) URL.                 |
+| `title`      | `string`    | No       | Title displayed in the code header.                                    |
+| `highlights` | `Array`     | No       | Array of line highlights (see structure below).                        |
+| `children`   | `ReactNode` | No       | Explanatory content to display alongside the code.                     |
+
+### Highlight Structure
+
+```typescript
+interface LineHighlight {
+  lines: number[] // Array of line numbers to highlight
+  label: string // Short label for the highlight
+  description: string // Detailed description
+}
+```
+
+## Supported Languages
+
+The component supports syntax highlighting for:
+
+- JavaScript/TypeScript
+- Solidity
+- Python
+- And many more...
+
+For a complete list, refer to [Shiki's supported languages](https://github.com/shikijs/shiki/blob/main/docs/languages.md).
+
+## Best Practices
+
+1. **Concise Explanations**
+
+   - Keep explanations clear and focused
+   - Use bullet points for better readability
+   - Highlight only the most important code sections
+
+2. **Responsive Design**
+
+   - Component automatically adjusts for different screen sizes
+   - Code and explanation stack vertically on mobile
+   - Maintains readability across devices
+
+3. **Accessibility**
+   - Use descriptive labels for highlights
+   - Ensure good color contrast in explanations
+   - Provide meaningful titles for code sections
+
+## Examples
+
+### Basic Example
+
+```mdx
+<SideBySideCode language="javascript" codeSrc="/samples/hello.js" title="Hello World">
+  A simple hello world example in JavaScript.
+</SideBySideCode>
+```
+
+### With Highlights
+
+```mdx
+<SideBySideCode
+  language="solidity"
+  codeSrc="/samples/contract.sol"
+  title="Smart Contract"
+  highlights={[
+    {
+      lines: [1, 2],
+      label: "SPDX License",
+      description: "Specify the license for the contract",
+    },
+  ]}
+>
+  This smart contract demonstrates basic functionality. Click on the highlight cards to focus on specific sections.
+</SideBySideCode>
+```
+
+### Loading from URL
+
+```mdx
+<SideBySideCode language="python" codeSrc="https://api.example.com/code/script.py" title="Python Script">
+  This code is loaded directly from a URL.
+</SideBySideCode>
+```
+
+## Troubleshooting
+
+1. **Code Not Loading**
+
+   - For local files: Ensure the file exists in `public/samples`
+   - For URLs: Verify the URL is accessible and returns raw code
+   - Check file permissions and CORS settings
+
+2. **Syntax Highlighting Issues**
+
+   - Verify the language is supported
+   - Check the language identifier is correct
+   - Ensure code is properly formatted
+
+3. **Layout Problems**
+   - Clear any conflicting CSS
+   - Ensure parent container allows for proper width
+   - Check for proper MDX import syntax
+
+## Contributing
+
+We welcome contributions! Please see our contributing guidelines for more details.

astro.config.ts

@@ -9,6 +9,7 @@ import rehypeWrapAll from "rehype-wrap-all"
 import sitemap from "@astrojs/sitemap"
 import { RehypePlugins } from "@astrojs/markdown-remark"
 import yaml from "@rollup/plugin-yaml"
+import { ccipRedirects } from "./src/config/redirects/ccip"
 
 // https://astro.build/config
 export default defineConfig({
@@ -18,6 +19,7 @@ export default defineConfig({
     "/ccip/supported-networks": "/ccip/directory/mainnet",
     "/getting-started": "/getting-started/conceptual-overview",
     "/resources": "/resources/link-token-contracts",
+    ...ccipRedirects,
   },
   integrations: [
     preact({

jest.config.js

@@ -7,6 +7,21 @@ module.exports = {
   moduleNameMapper: {
     "\\.(css)$": "<rootDir>/src/__mocks__/styleMock.ts",
     "^~/(.*)$": "<rootDir>/src/$1",
+    "^@components$": "<rootDir>/src/components/index.ts",
+    "^@components/(.*)$": "<rootDir>/src/components/$1",
+    "^@config$": "<rootDir>/src/config",
+    "^@config/(.*)$": "<rootDir>/src/config/$1",
+    "^@features/(.*)$": "<rootDir>/src/features/$1",
+    "^@graphql$": "<rootDir>/src/graphql",
+    "^@graphql/(.*)$": "<rootDir>/src/graphql/$1",
+    "^@stores/(.*)$": "<rootDir>/src/stores/$1",
+    "^@utils$": "<rootDir>/src/utils",
+    "^@utils/(.*)$": "<rootDir>/src/utils/$1",
+    "^@variables$": "<rootDir>/src/config/markdown-variables.ts",
+    "^@abi$": "<rootDir>/src/features/abi/index.ts",
+    "^src/(.*)$": "<rootDir>/src/$1",
+    "\\.ya?ml$": "<rootDir>/src/__mocks__/yamlMock.ts",
   },
   transformIgnorePatterns: ["<rootDir>/node_modules/"],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
 }