From b3fc12a1eaa9666ad720085614ea8850977b3d51 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Wed, 29 Oct 2025 15:19:40 -0400
Subject: [PATCH 01/14] add changelog stylin and elements

---
 package-lock.json                             | 211 +++++++++---------
 package.json                                  |   1 +
 .../ChangelogSnippet/ChangelogCard.astro      | 153 +++++++++++++
 .../ChangelogSnippet/ChangelogCard.module.css |  76 +++++++
 .../ChangelogSnippet/ChangelogSnippet.astro   |  40 ++++
 .../ChangelogSnippet.module.css               |  23 ++
 src/components/ChangelogSnippet/types.ts      |  41 ++++
 src/content/ccip/index.mdx                    |   1 +
 8 files changed, 441 insertions(+), 105 deletions(-)
 create mode 100644 src/components/ChangelogSnippet/ChangelogCard.astro
 create mode 100644 src/components/ChangelogSnippet/ChangelogCard.module.css
 create mode 100644 src/components/ChangelogSnippet/ChangelogSnippet.astro
 create mode 100644 src/components/ChangelogSnippet/ChangelogSnippet.module.css
 create mode 100644 src/components/ChangelogSnippet/types.ts

diff --git a/package-lock.json b/package-lock.json
index 3757697ad6a..6fa1e6ec6d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@11ty/eleventy-fetch": "^4.0.1",
+        "@algolia/client-search": "^5.41.0",
         "@apollo/client": "^3.14.0",
         "@astro-community/astro-embed-youtube": "^0.5.7",
         "@astrojs/mdx": "^4.3.6",
@@ -147,120 +148,120 @@
       "license": "MIT"
     },
     "node_modules/@algolia/abtesting": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.3.0.tgz",
-      "integrity": "sha512-KqPVLdVNfoJzX5BKNGM9bsW8saHeyax8kmPFXul5gejrSPN3qss7PgsFH5mMem7oR8tvjvNkia97ljEYPYCN8Q==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.7.0.tgz",
+      "integrity": "sha512-hOEItTFOvNLI6QX6TSGu7VE4XcUcdoKZT8NwDY+5mWwu87rGhkjlY7uesKTInlg6Sh8cyRkDBYRumxbkoBbBhA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.41.0",
+        "@algolia/requester-browser-xhr": "5.41.0",
+        "@algolia/requester-fetch": "5.41.0",
+        "@algolia/requester-node-http": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-abtesting": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.37.0.tgz",
-      "integrity": "sha512-Dp2Zq+x9qQFnuiQhVe91EeaaPxWBhzwQ6QnznZQnH9C1/ei3dvtmAFfFeaTxM6FzfJXDLvVnaQagTYFTQz3R5g==",
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.41.0.tgz",
+      "integrity": "sha512-iRuvbEyuHCAhIMkyzG3tfINLxTS7mSKo7q8mQF+FbQpWenlAlrXnfZTN19LRwnVjx0UtAdZq96ThMWGS6cQ61A==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.41.0",
+        "@algolia/requester-browser-xhr": "5.41.0",
+        "@algolia/requester-fetch": "5.41.0",
+        "@algolia/requester-node-http": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-analytics": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.37.0.tgz",
-      "integrity": "sha512-wyXODDOluKogTuZxRII6mtqhAq4+qUR3zIUJEKTiHLe8HMZFxfUEI4NO2qSu04noXZHbv/sRVdQQqzKh12SZuQ==",
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.41.0.tgz",
+      "integrity": "sha512-OIPVbGfx/AO8l1V70xYTPSeTt/GCXPEl6vQICLAXLCk9WOUbcLGcy6t8qv0rO7Z7/M/h9afY6Af8JcnI+FBFdQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.41.0",
+        "@algolia/requester-browser-xhr": "5.41.0",
+        "@algolia/requester-fetch": "5.41.0",
+        "@algolia/requester-node-http": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-common": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.37.0.tgz",
-      "integrity": "sha512-GylIFlPvLy9OMgFG8JkonIagv3zF+Dx3H401Uo2KpmfMVBBJiGfAb9oYfXtplpRMZnZPxF5FnkWaI/NpVJMC+g==",
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.41.0.tgz",
+      "integrity": "sha512-8Mc9niJvfuO8dudWN5vSUlYkz7U3M3X3m1crDLc9N7FZrIVoNGOUETPk3TTHviJIh9y6eKZKbq1hPGoGY9fqPA==",
       "license": "MIT",
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-insights": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.37.0.tgz",
-      "integrity": "sha512-T63afO2O69XHKw2+F7mfRoIbmXWGzgpZxgOFAdP3fR4laid7pWBt20P4eJ+Zn23wXS5kC9P2K7Bo3+rVjqnYiw==",
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.41.0.tgz",
+      "integrity": "sha512-vXzvCGZS6Ixxn+WyzGUVDeR3HO/QO5POeeWy1kjNJbEf6f+tZSI+OiIU9Ha+T3ntV8oXFyBEuweygw4OLmgfiQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.41.0",
+        "@algolia/requester-browser-xhr": "5.41.0",
+        "@algolia/requester-fetch": "5.41.0",
+        "@algolia/requester-node-http": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-personalization": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.37.0.tgz",
-      "integrity": "sha512-1zOIXM98O9zD8bYDCJiUJRC/qNUydGHK/zRK+WbLXrW1SqLFRXECsKZa5KoG166+o5q5upk96qguOtE8FTXDWQ==",
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.41.0.tgz",
+      "integrity": "sha512-tkymXhmlcc7w/HEvLRiHcpHxLFcUB+0PnE9FcG6hfFZ1ZXiWabH+sX+uukCVnluyhfysU9HRU2kUmUWfucx1Dg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.41.0",
+        "@algolia/requester-browser-xhr": "5.41.0",
+        "@algolia/requester-fetch": "5.41.0",
+        "@algolia/requester-node-http": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-query-suggestions": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.37.0.tgz",
-      "integrity": "sha512-31Nr2xOLBCYVal+OMZn1rp1H4lPs1914Tfr3a34wU/nsWJ+TB3vWjfkUUuuYhWoWBEArwuRzt3YNLn0F/KRVkg==",
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.41.0.tgz",
+      "integrity": "sha512-vyXDoz3kEZnosNeVQQwf0PbBt5IZJoHkozKRIsYfEVm+ylwSDFCW08qy2YIVSHdKy69/rWN6Ue/6W29GgVlmKQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.41.0",
+        "@algolia/requester-browser-xhr": "5.41.0",
+        "@algolia/requester-fetch": "5.41.0",
+        "@algolia/requester-node-http": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-search": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.37.0.tgz",
-      "integrity": "sha512-DAFVUvEg+u7jUs6BZiVz9zdaUebYULPiQ4LM2R4n8Nujzyj7BZzGr2DCd85ip4p/cx7nAZWKM8pLcGtkTRTdsg==",
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.41.0.tgz",
+      "integrity": "sha512-G9I2atg1ShtFp0t7zwleP6aPS4DcZvsV4uoQOripp16aR6VJzbEnKFPLW4OFXzX7avgZSpYeBAS+Zx4FOgmpPw==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.41.0",
+        "@algolia/requester-browser-xhr": "5.41.0",
+        "@algolia/requester-fetch": "5.41.0",
+        "@algolia/requester-node-http": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
@@ -273,84 +274,84 @@
       "license": "MIT"
     },
     "node_modules/@algolia/ingestion": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.37.0.tgz",
-      "integrity": "sha512-pkCepBRRdcdd7dTLbFddnu886NyyxmhgqiRcHHaDunvX03Ij4WzvouWrQq7B7iYBjkMQrLS8wQqSP0REfA4W8g==",
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.41.0.tgz",
+      "integrity": "sha512-sxU/ggHbZtmrYzTkueTXXNyifn+ozsLP+Wi9S2hOBVhNWPZ8uRiDTDcFyL7cpCs1q72HxPuhzTP5vn4sUl74cQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.41.0",
+        "@algolia/requester-browser-xhr": "5.41.0",
+        "@algolia/requester-fetch": "5.41.0",
+        "@algolia/requester-node-http": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/monitoring": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.37.0.tgz",
-      "integrity": "sha512-fNw7pVdyZAAQQCJf1cc/ih4fwrRdQSgKwgor4gchsI/Q/ss9inmC6bl/69jvoRSzgZS9BX4elwHKdo0EfTli3w==",
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.41.0.tgz",
+      "integrity": "sha512-UQ86R6ixraHUpd0hn4vjgTHbViNO8+wA979gJmSIsRI3yli2v89QSFF/9pPcADR6PbtSio/99PmSNxhZy+CR3Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.41.0",
+        "@algolia/requester-browser-xhr": "5.41.0",
+        "@algolia/requester-fetch": "5.41.0",
+        "@algolia/requester-node-http": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/recommend": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.37.0.tgz",
-      "integrity": "sha512-U+FL5gzN2ldx3TYfQO5OAta2TBuIdabEdFwD5UVfWPsZE5nvOKkc/6BBqP54Z/adW/34c5ZrvvZhlhNTZujJXQ==",
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.41.0.tgz",
+      "integrity": "sha512-DxP9P8jJ8whJOnvmyA5mf1wv14jPuI0L25itGfOHSU6d4ZAjduVfPjTS3ROuUN5CJoTdlidYZE+DtfWHxJwyzQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@algolia/client-common": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+        "@algolia/client-common": "5.41.0",
+        "@algolia/requester-browser-xhr": "5.41.0",
+        "@algolia/requester-fetch": "5.41.0",
+        "@algolia/requester-node-http": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-browser-xhr": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.37.0.tgz",
-      "integrity": "sha512-Ao8GZo8WgWFABrU7iq+JAftXV0t+UcOtCDL4mzHHZ+rQeTTf1TZssr4d0vIuoqkVNnKt9iyZ7T4lQff4ydcTrw==",
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.41.0.tgz",
+      "integrity": "sha512-C21J+LYkE48fDwtLX7YXZd2Fn7Fe0/DOEtvohSfr/ODP8dGDhy9faaYeWB0n1AvmZltugjkjAXT7xk0CYNIXsQ==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.37.0"
+        "@algolia/client-common": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-fetch": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.37.0.tgz",
-      "integrity": "sha512-H7OJOXrFg5dLcGJ22uxx8eiFId0aB9b0UBhoOi4SMSuDBe6vjJJ/LeZyY25zPaSvkXNBN3vAM+ad6M0h6ha3AA==",
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.41.0.tgz",
+      "integrity": "sha512-FhJy/+QJhMx1Hajf2LL8og4J7SqOAHiAuUXq27cct4QnPhSIuIGROzeRpfDNH5BUbq22UlMuGd44SeD4HRAqvA==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.37.0"
+        "@algolia/client-common": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-node-http": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.37.0.tgz",
-      "integrity": "sha512-npZ9aeag4SGTx677eqPL3rkSPlQrnzx/8wNrl1P7GpWq9w/eTmRbOq+wKrJ2r78idlY0MMgmY/mld2tq6dc44g==",
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.41.0.tgz",
+      "integrity": "sha512-tYv3rGbhBS0eZ5D8oCgV88iuWILROiemk+tQ3YsAKZv2J4kKUNvKkrX/If/SreRy4MGP2uJzMlyKcfSfO2mrsQ==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.37.0"
+        "@algolia/client-common": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
@@ -27283,26 +27284,26 @@
       }
     },
     "node_modules/algoliasearch": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.37.0.tgz",
-      "integrity": "sha512-y7gau/ZOQDqoInTQp0IwTOjkrHc4Aq4R8JgpmCleFwiLl+PbN2DMWoDUWZnrK8AhNJwT++dn28Bt4NZYNLAmuA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@algolia/abtesting": "1.3.0",
-        "@algolia/client-abtesting": "5.37.0",
-        "@algolia/client-analytics": "5.37.0",
-        "@algolia/client-common": "5.37.0",
-        "@algolia/client-insights": "5.37.0",
-        "@algolia/client-personalization": "5.37.0",
-        "@algolia/client-query-suggestions": "5.37.0",
-        "@algolia/client-search": "5.37.0",
-        "@algolia/ingestion": "1.37.0",
-        "@algolia/monitoring": "1.37.0",
-        "@algolia/recommend": "5.37.0",
-        "@algolia/requester-browser-xhr": "5.37.0",
-        "@algolia/requester-fetch": "5.37.0",
-        "@algolia/requester-node-http": "5.37.0"
+      "version": "5.41.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.41.0.tgz",
+      "integrity": "sha512-9E4b3rJmYbBkn7e3aAPt1as+VVnRhsR4qwRRgOzpeyz4PAOuwKh0HI4AN6mTrqK0S0M9fCCSTOUnuJ8gPY/tvA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@algolia/abtesting": "1.7.0",
+        "@algolia/client-abtesting": "5.41.0",
+        "@algolia/client-analytics": "5.41.0",
+        "@algolia/client-common": "5.41.0",
+        "@algolia/client-insights": "5.41.0",
+        "@algolia/client-personalization": "5.41.0",
+        "@algolia/client-query-suggestions": "5.41.0",
+        "@algolia/client-search": "5.41.0",
+        "@algolia/ingestion": "1.41.0",
+        "@algolia/monitoring": "1.41.0",
+        "@algolia/recommend": "5.41.0",
+        "@algolia/requester-browser-xhr": "5.41.0",
+        "@algolia/requester-fetch": "5.41.0",
+        "@algolia/requester-node-http": "5.41.0"
       },
       "engines": {
         "node": ">= 14.0.0"
diff --git a/package.json b/package.json
index ee46f6b560e..eabee8e8559 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
   },
   "dependencies": {
     "@11ty/eleventy-fetch": "^4.0.1",
+    "@algolia/client-search": "^5.41.0",
     "@apollo/client": "^3.14.0",
     "@astro-community/astro-embed-youtube": "^0.5.7",
     "@astrojs/mdx": "^4.3.6",
diff --git a/src/components/ChangelogSnippet/ChangelogCard.astro b/src/components/ChangelogSnippet/ChangelogCard.astro
new file mode 100644
index 00000000000..8b4347ca3a3
--- /dev/null
+++ b/src/components/ChangelogSnippet/ChangelogCard.astro
@@ -0,0 +1,153 @@
+---
+import { Typography } from "@chainlink/blocks"
+import styles from "./ChangelogCard.module.css"
+import type { ChangelogItem } from "./types"
+
+interface Props {
+  item: ChangelogItem
+}
+
+const { item } = Astro.props
+
+// Format the date
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString)
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  })
+}
+
+const formattedDate = formatDate(item["date-of-release"])
+---
+
+<div class={styles.card}>
+  <div class={styles.header}>
+    <div class={styles.metaSection}>
+      <Typography variant="body-semi">
+        {item.type}
+      </Typography>
+      <Typography variant="body-s" color="muted">
+        {formattedDate}
+      </Typography>
+    </div>
+  </div>
+
+  <div class={styles.content}>
+    <Typography
+      variant="h6"
+      style={{
+        marginBottom: "var(--space-2x)",
+      }}
+    >
+      {item.name}
+    </Typography>
+
+    {item["text-description"] && <div class="description" set:html={item["text-description"]} />}
+  </div>
+</div>
+
+<style is:global>
+  /* Data Entry List */
+  .log-item__data-entry-list {
+    grid-column-gap: 4px;
+    grid-row-gap: 4px;
+    flex-flow: column;
+    display: flex;
+  }
+
+  /* Data Entry Item */
+  .log-item__data-entry {
+    justify-content: flex-start;
+    align-items: center;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    display: flex;
+  }
+
+  /* Images Container */
+  .log-item__data-entry-images {
+    margin-right: 8px;
+    position: relative;
+  }
+
+  /* Main Image */
+  .log-item__data-entry-img {
+    border-radius: 100%;
+    width: 24px;
+    height: 24px;
+  }
+
+  .log-item__data-entry-img.log-item__data-entry-img-round {
+    border-radius: 100%;
+  }
+
+  .description {
+    > p {
+      margin-bottom: var(--space-4x);
+      font-size: 14px;
+    }
+  }
+
+  /* Overlay Icon */
+  .log-item__data-entry-img-top {
+    background-color: #fff;
+    border: 1px solid #fff;
+    border-radius: 4px;
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    inset: auto 0% 0% auto;
+  }
+
+  /* Link Text */
+  .log-item__data-entry-info {
+    color: #2e7bff;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  /* Additional Info */
+  .log-item__data-entry-info2 {
+    display: none;
+  }
+
+  .log-item__description > p {
+    color: var(--muted);
+    margin-bottom: var(--space-4x);
+  }
+
+  /* Network Icons List */
+  .log-item__list-chains {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .log-item__img-chain {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  .log-item__more-chains {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: var(--muted);
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+  }
+
+  /* Hidden filter elements */
+  .log-item__list-chains .hidden {
+    display: none;
+  }
+</style>
diff --git a/src/components/ChangelogSnippet/ChangelogCard.module.css b/src/components/ChangelogSnippet/ChangelogCard.module.css
new file mode 100644
index 00000000000..d59ca4a7886
--- /dev/null
+++ b/src/components/ChangelogSnippet/ChangelogCard.module.css
@@ -0,0 +1,76 @@
+/* Card Container */
+.card {
+  display: flex;
+  gap: 82px;
+  padding: var(--space-6x);
+  border: 1px solid var(--border);
+  background-color: var(--background);
+}
+
+.card:hover {
+  background-color: var(--muted);
+}
+
+/* Header Section */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-4x);
+  margin-bottom: var(--space-3x);
+}
+
+.metaSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1x);
+  flex: 1;
+}
+
+/* Description Section */
+.description {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
+  line-height: 1.6;
+  margin-top: var(--space-3x);
+}
+
+.description p {
+  margin: 0;
+  color: var(--foreground);
+}
+
+.description a {
+  color: var(--color-blue-600);
+  text-decoration: none;
+}
+
+.description a:hover {
+  text-decoration: underline;
+}
+
+.header {
+  display: flex;
+  width: 150px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+  .card {
+    padding: var(--space-4x);
+  }
+
+  .header {
+    gap: var(--space-3x);
+  }
+
+  .metaSection {
+    gap: 4px;
+  }
+}
diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.astro b/src/components/ChangelogSnippet/ChangelogSnippet.astro
new file mode 100644
index 00000000000..fadce72a466
--- /dev/null
+++ b/src/components/ChangelogSnippet/ChangelogSnippet.astro
@@ -0,0 +1,40 @@
+---
+import { Typography } from "@chainlink/blocks"
+import { searchClient } from "@algolia/client-search"
+import ChangelogCard from "./ChangelogCard.astro"
+import { ALGOLIA_INDEX, type ChangelogItem } from "./types"
+import styles from "./ChangelogSnippet.module.css"
+
+type Results = {
+  results: {
+    hits: ChangelogItem[]
+  }[]
+}
+
+const appId = import.meta.env.PUBLIC_ALGOLIA_SEARCH_APP_ID
+const apiKey = import.meta.env.PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY
+
+const client = searchClient(appId, apiKey)
+
+const req = await client.search({
+  requests: [
+    {
+      indexName: ALGOLIA_INDEX.CHANGELOG,
+      query: "data feeds",
+    },
+  ],
+})
+const results = req.results[0].hits as ChangelogItem[]
+const latestLog = results[0] as ChangelogItem
+
+console.log(latestLog)
+---
+
+{
+  results.length > 0 && (
+    <section class={styles.container}>
+      <Typography variant="h1">Changelog</Typography>
+      <ChangelogCard item={latestLog} />
+    </section>
+  )
+}
diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.module.css b/src/components/ChangelogSnippet/ChangelogSnippet.module.css
new file mode 100644
index 00000000000..bfcd6ec9e59
--- /dev/null
+++ b/src/components/ChangelogSnippet/ChangelogSnippet.module.css
@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6x);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4x);
+}
+
+@media (max-width: 1024px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/components/ChangelogSnippet/types.ts b/src/components/ChangelogSnippet/types.ts
new file mode 100644
index 00000000000..39457f141cd
--- /dev/null
+++ b/src/components/ChangelogSnippet/types.ts
@@ -0,0 +1,41 @@
+export const ALGOLIA_INDEX = {
+  CCIP_CHAINS: "CCIP Network",
+  CCIP_LANES: "CCIP Lane",
+  CCIP_TOKENS: "CCIP Tokens",
+  CCIP_TOKENS_ON_NETWORK: "CCIP Tokens on Network",
+  LINK_TOKENS: "LINK Token",
+  DATA_FEED: "Data Feed",
+  DATA_STREAMS: "Data Stream",
+  DATA_STREAMS_NETWORK: "Data Stream Network",
+  FAUCET: "Faucet",
+  SITE: "Site",
+  DOCUMENTATION: "Documentation",
+  QUICKSTART: "Quickstart",
+  GUIDE: "Guide",
+  TUTORIAL: "Tutorial",
+  CHANGELOG: "Changelog",
+  BOOTCAMP: "Bootcamp",
+  BLOG_NEW: "blog_new",
+  VIDEO: "Video",
+} as const
+
+export interface ChangelogItem {
+  createdOn: string
+  "date-of-release": string
+  hash: string
+  id: string
+  lastPublished: string
+  lastUpdated: string
+  name: string
+  networks: string
+  slug: string
+  "text-description": string
+  topic: string
+  type: string
+  objectID: string
+  _highlightResult?: {
+    "date-of-release": Record<string, unknown>
+    name: Record<string, unknown>
+    "text-description": Record<string, unknown>
+  }
+}
diff --git a/src/content/ccip/index.mdx b/src/content/ccip/index.mdx
index 8982eb282a1..78f6feb1a50 100644
--- a/src/content/ccip/index.mdx
+++ b/src/content/ccip/index.mdx
@@ -20,6 +20,7 @@ import ToolsUtilitiesGrid from "@components/ToolsUtilitiesGrid/ToolsUtilitiesGri
 import MediaSection from "@components/MediaSection/MediaSection.astro"
 import CardsWrapper from "@components/Cards/CardsWrapper.astro"
 import OverviewWrapper from "@components/OverviewWrapper.astro"
+import ChangelogSnippet from "@components/ChangelogSnippet/ChangelogSnippet.astro"
 import {
   SvgEyeOptic,
   SvgTransactionRepeatRecurring,

From c8a7d0722de127a6d2ea82ae6153041e0b0bd81d Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Thu, 30 Oct 2025 13:13:48 -0400
Subject: [PATCH 02/14] Add footer masking

---
 .../ChangelogSnippet/ChangelogCard.astro      | 194 ++++++++++++++++--
 .../ChangelogSnippet/ChangelogCard.module.css |  79 ++++++-
 .../ChangelogSnippet/ChangelogSnippet.astro   |  19 +-
 .../ChangelogSnippet.module.css               |  16 ++
 4 files changed, 281 insertions(+), 27 deletions(-)

diff --git a/src/components/ChangelogSnippet/ChangelogCard.astro b/src/components/ChangelogSnippet/ChangelogCard.astro
index 8b4347ca3a3..f3975b51819 100644
--- a/src/components/ChangelogSnippet/ChangelogCard.astro
+++ b/src/components/ChangelogSnippet/ChangelogCard.astro
@@ -1,5 +1,5 @@
 ---
-import { Typography } from "@chainlink/blocks"
+import { SvgTaillessArrowDownSmall, Typography } from "@chainlink/blocks"
 import styles from "./ChangelogCard.module.css"
 import type { ChangelogItem } from "./types"
 
@@ -22,32 +22,186 @@ const formatDate = (dateString: string) => {
 const formattedDate = formatDate(item["date-of-release"])
 ---
 
-<div class={styles.card}>
-  <div class={styles.header}>
-    <div class={styles.metaSection}>
-      <Typography variant="body-semi">
-        {item.type}
-      </Typography>
-      <Typography variant="body-s" color="muted">
-        {formattedDate}
+<div class={styles.cardWrapper} data-expandable="wrapper">
+  <div class={styles.card} data-expandable="card">
+    <div class={styles.header}>
+      <div class={styles.metaSection}>
+        <Typography variant="body-semi">
+          {item.type}
+        </Typography>
+        <Typography variant="body-s" color="muted">
+          {formattedDate}
+        </Typography>
+      </div>
+    </div>
+
+    <div class={styles.content} data-expandable="content">
+      <Typography
+        variant="h6"
+        style={{
+          marginBottom: "var(--space-2x)",
+        }}
+      >
+        {item.name}
       </Typography>
+
+      <div class={styles.descriptionContent}>
+        {item["text-description"] && <div class="description" set:html={item["text-description"]} />}
+      </div>
     </div>
   </div>
 
-  <div class={styles.content}>
-    <Typography
-      variant="h6"
-      style={{
-        marginBottom: "var(--space-2x)",
-      }}
-    >
-      {item.name}
-    </Typography>
-
-    {item["text-description"] && <div class="description" set:html={item["text-description"]} />}
+  <div class={styles.contentFooter} data-expandable="footer">
+    <button class={styles.expandButton} data-expandable="button">
+      <span data-expandable="text">Show more</span>
+      <SvgTaillessArrowDownSmall color="muted" />
+    </button>
   </div>
 </div>
 
+<script>
+  function swapDataAttributeImages() {
+    // Find all images with data-token attribute and swap src
+    const tokenImages = document.querySelectorAll("img[data-token]")
+    tokenImages.forEach((img) => {
+      const tokenUrl = img.getAttribute("data-token")
+      const originalSrc = img.getAttribute("src")
+
+      if (tokenUrl && tokenUrl !== originalSrc) {
+        // Try to load the data-token image
+        img.setAttribute("src", tokenUrl)
+
+        // Fallback to original src if image fails to load
+        img.onerror = () => {
+          img.setAttribute("src", originalSrc!)
+          img.onerror = null // Remove handler to prevent infinite loop
+        }
+      }
+    })
+
+    // Find all images with data-network attribute and swap src
+    const networkImages = document.querySelectorAll("img[data-network]")
+    networkImages.forEach((img) => {
+      const networkUrl = img.getAttribute("data-network")
+      const originalSrc = img.getAttribute("src")
+
+      if (networkUrl && networkUrl !== originalSrc) {
+        // Try to load the data-network image
+        img.setAttribute("src", networkUrl)
+
+        // Fallback to original src if image fails to load
+        img.onerror = () => {
+          img.setAttribute("src", originalSrc!)
+          img.onerror = null // Remove handler to prevent infinite loop
+        }
+      }
+    })
+  }
+
+  function initExpandableCards() {
+    const wrappers = document.querySelectorAll('[data-expandable="wrapper"]')
+
+    wrappers.forEach((wrapper) => {
+      const card = wrapper.querySelector('[data-expandable="card"]') as HTMLElement
+      const content = wrapper.querySelector('[data-expandable="content"]') as HTMLElement
+      const footer = wrapper.querySelector('[data-expandable="footer"]') as HTMLElement
+      const button = wrapper.querySelector('[data-expandable="button"]') as HTMLElement
+      const text = button?.querySelector('[data-expandable="text"]')
+
+      if (!card || !content || !button) return
+
+      // Wait for images to load before checking height
+      const images = card.querySelectorAll("img")
+      let loadedImages = 0
+      const totalImages = images.length
+
+      const checkCardHeight = () => {
+        // Determine max height based on viewport
+        const isMobile = window.innerWidth <= 768
+        const wrapperMaxHeight = isMobile ? 300 : 400
+
+        // Check if card exceeds wrapper height
+        if (card.scrollHeight <= wrapperMaxHeight) {
+          // Card fits, hide the button and fade
+          footer.style.display = "none"
+        } else {
+          // Card exceeds wrapper, show button and fade
+          footer.style.display = "flex"
+        }
+      }
+
+      // Check height after each image loads
+      if (totalImages > 0) {
+        images.forEach((img) => {
+          if (img.complete) {
+            loadedImages++
+            if (loadedImages === totalImages) {
+              checkCardHeight()
+            }
+          } else {
+            img.addEventListener("load", () => {
+              loadedImages++
+              if (loadedImages === totalImages) {
+                checkCardHeight()
+              }
+            })
+            img.addEventListener("error", () => {
+              loadedImages++
+              if (loadedImages === totalImages) {
+                checkCardHeight()
+              }
+            })
+          }
+        })
+      } else {
+        // No images, check immediately
+        checkCardHeight()
+      }
+
+      let isExpanded = false
+
+      button.addEventListener("click", () => {
+        isExpanded = !isExpanded
+
+        if (isExpanded) {
+          // Expand wrapper to full card height
+          ;(wrapper as HTMLElement).style.maxHeight = card.scrollHeight + "px"
+          // Hide mask and footer
+          wrapper.classList.add("expanded")
+          footer.style.display = "none"
+          if (text) text.textContent = "Show less"
+        } else {
+          // Collapse wrapper back
+          ;(wrapper as HTMLElement).style.maxHeight = ""
+          // Show mask and footer
+          wrapper.classList.remove("expanded")
+          footer.style.display = "block"
+          if (text) text.textContent = "Show more"
+        }
+      })
+    })
+  }
+
+  // Initialize on page load
+  swapDataAttributeImages()
+  initExpandableCards()
+
+  // Re-initialize after navigation (for SPA-like behavior)
+  document.addEventListener("astro:page-load", () => {
+    swapDataAttributeImages()
+    initExpandableCards()
+  })
+
+  // Re-check on resize
+  let resizeTimer: ReturnType<typeof setTimeout>
+  window.addEventListener("resize", () => {
+    clearTimeout(resizeTimer)
+    resizeTimer = setTimeout(() => {
+      initExpandableCards()
+    }, 250)
+  })
+</script>
+
 <style is:global>
   /* Data Entry List */
   .log-item__data-entry-list {
diff --git a/src/components/ChangelogSnippet/ChangelogCard.module.css b/src/components/ChangelogSnippet/ChangelogCard.module.css
index d59ca4a7886..c69376df9f5 100644
--- a/src/components/ChangelogSnippet/ChangelogCard.module.css
+++ b/src/components/ChangelogSnippet/ChangelogCard.module.css
@@ -1,14 +1,30 @@
+/* Card Wrapper */
+.cardWrapper {
+  max-height: 400px;
+  overflow: hidden;
+  transition: max-height 0.5s ease;
+  position: relative;
+  border: 1px solid var(--border);
+}
+
 /* Card Container */
 .card {
   display: flex;
   gap: 82px;
   padding: var(--space-6x);
-  border: 1px solid var(--border);
-  background-color: var(--background);
 }
 
-.card:hover {
+.cardWrapper.expanded .card {
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+
+.cardWrapper:hover {
   background-color: var(--muted);
+
+  & .contentFooter {
+    background: linear-gradient(to top, var(--muted) 50%, transparent);
+  }
 }
 
 /* Header Section */
@@ -60,17 +76,74 @@
   flex-direction: column;
   flex: 1;
 }
+
+/* Description Content */
+.descriptionContent {
+  flex: 1;
+}
+
+/* Content Footer */
+.contentFooter {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  height: calc(var(--space-6x) + 68px);
+  display: flex;
+  align-items: end;
+  background: linear-gradient(to top, white 50%, transparent);
+}
+
+/* Expand Button */
+.expandButton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--foreground);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  margin-left: 256px;
+  margin-bottom: var(--space-6x);
+}
+
+.expandButton svg {
+  transition: transform 0.3s ease;
+}
 /* Responsive Design */
 @media (max-width: 768px) {
+  .cardWrapper {
+    max-height: 300px;
+  }
+
   .card {
     padding: var(--space-4x);
+    flex-direction: column;
+    gap: var(--space-4x);
+    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 100px), transparent 100%);
+    mask-image: linear-gradient(to bottom, black calc(100% - 100px), transparent 100%);
   }
 
   .header {
     gap: var(--space-3x);
+    width: 100%;
   }
 
   .metaSection {
     gap: 4px;
   }
+
+  .expandButton {
+    margin-left: 0;
+  }
+
+  .cardWrapper.expanded .card {
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
 }
diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.astro b/src/components/ChangelogSnippet/ChangelogSnippet.astro
index fadce72a466..bb317d6123b 100644
--- a/src/components/ChangelogSnippet/ChangelogSnippet.astro
+++ b/src/components/ChangelogSnippet/ChangelogSnippet.astro
@@ -1,5 +1,5 @@
 ---
-import { Typography } from "@chainlink/blocks"
+import { SvgArrowRight2, Typography } from "@chainlink/blocks"
 import { searchClient } from "@algolia/client-search"
 import ChangelogCard from "./ChangelogCard.astro"
 import { ALGOLIA_INDEX, type ChangelogItem } from "./types"
@@ -26,14 +26,25 @@ const req = await client.search({
 })
 const results = req.results[0].hits as ChangelogItem[]
 const latestLog = results[0] as ChangelogItem
-
-console.log(latestLog)
 ---
 
 {
   results.length > 0 && (
     <section class={styles.container}>
-      <Typography variant="h1">Changelog</Typography>
+      <header class={styles.sectionHeader}>
+        <Typography
+          variant="h2"
+          style={{
+            fontSize: "32px",
+          }}
+        >
+          Changelog
+        </Typography>
+
+        <a href="https://dev.chain.link/changelog" class={styles.arrow}>
+          <SvgArrowRight2 height={12} width={12} />
+        </a>
+      </header>
       <ChangelogCard item={latestLog} />
     </section>
   )
diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.module.css b/src/components/ChangelogSnippet/ChangelogSnippet.module.css
index bfcd6ec9e59..33a9c7d5ac0 100644
--- a/src/components/ChangelogSnippet/ChangelogSnippet.module.css
+++ b/src/components/ChangelogSnippet/ChangelogSnippet.module.css
@@ -10,6 +10,22 @@
   gap: var(--space-4x);
 }
 
+.sectionHeader {
+  display: flex;
+  gap: var(--space-4x);
+  align-items: end;
+}
+
+.arrow {
+  padding: 10px;
+  border: 1px solid var(--border);
+  height: fit-content;
+  cursor: default;
+  &:hover {
+    border: 1px solid var(--foreground);
+  }
+}
+
 @media (max-width: 1024px) {
   .grid {
     grid-template-columns: repeat(2, 1fr);

From bd461835defbce55474297fc3ef67cbb0af18d04 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Thu, 30 Oct 2025 13:16:39 -0400
Subject: [PATCH 03/14] Update ChangelogCard.module.css

---
 src/components/ChangelogSnippet/ChangelogCard.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ChangelogSnippet/ChangelogCard.module.css b/src/components/ChangelogSnippet/ChangelogCard.module.css
index c69376df9f5..cce9dbfc2b6 100644
--- a/src/components/ChangelogSnippet/ChangelogCard.module.css
+++ b/src/components/ChangelogSnippet/ChangelogCard.module.css
@@ -106,8 +106,8 @@
   color: var(--foreground);
   font-size: 14px;
   font-weight: 600;
-  cursor: pointer;
   transition: color 0.2s ease;
+  cursor: default;
   margin-left: 256px;
   margin-bottom: var(--space-6x);
 }

From c9c314e0eecf66f672ee15e29c37a91a256a3872 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Thu, 30 Oct 2025 13:44:16 -0400
Subject: [PATCH 04/14] mobile improvements

---
 .../ChangelogSnippet/ChangelogCard.module.css      | 10 ++++------
 .../ChangelogSnippet/ChangelogSnippet.astro        | 14 +++++---------
 .../ChangelogSnippet/ChangelogSnippet.module.css   |  7 +++++++
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/ChangelogSnippet/ChangelogCard.module.css b/src/components/ChangelogSnippet/ChangelogCard.module.css
index cce9dbfc2b6..bcde64f9ba9 100644
--- a/src/components/ChangelogSnippet/ChangelogCard.module.css
+++ b/src/components/ChangelogSnippet/ChangelogCard.module.css
@@ -117,16 +117,10 @@
 }
 /* Responsive Design */
 @media (max-width: 768px) {
-  .cardWrapper {
-    max-height: 300px;
-  }
-
   .card {
     padding: var(--space-4x);
     flex-direction: column;
     gap: var(--space-4x);
-    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 100px), transparent 100%);
-    mask-image: linear-gradient(to bottom, black calc(100% - 100px), transparent 100%);
   }
 
   .header {
@@ -146,4 +140,8 @@
     -webkit-mask-image: none;
     mask-image: none;
   }
+
+  .contentFooter {
+    padding-left: var(--space-4x);
+  }
 }
diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.astro b/src/components/ChangelogSnippet/ChangelogSnippet.astro
index bb317d6123b..1170b7a0826 100644
--- a/src/components/ChangelogSnippet/ChangelogSnippet.astro
+++ b/src/components/ChangelogSnippet/ChangelogSnippet.astro
@@ -5,12 +5,6 @@ import ChangelogCard from "./ChangelogCard.astro"
 import { ALGOLIA_INDEX, type ChangelogItem } from "./types"
 import styles from "./ChangelogSnippet.module.css"
 
-type Results = {
-  results: {
-    hits: ChangelogItem[]
-  }[]
-}
-
 const appId = import.meta.env.PUBLIC_ALGOLIA_SEARCH_APP_ID
 const apiKey = import.meta.env.PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY
 
@@ -20,12 +14,14 @@ const req = await client.search({
   requests: [
     {
       indexName: ALGOLIA_INDEX.CHANGELOG,
-      query: "data feeds",
+      query: "data-feeds",
     },
   ],
 })
-const results = req.results[0].hits as ChangelogItem[]
-const latestLog = results[0] as ChangelogItem
+
+const firstResult = req.results[0]
+const results = "hits" in firstResult ? (firstResult.hits as ChangelogItem[]) : []
+const latestLog = results[0]
 ---
 
 {
diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.module.css b/src/components/ChangelogSnippet/ChangelogSnippet.module.css
index 33a9c7d5ac0..d852a20cba5 100644
--- a/src/components/ChangelogSnippet/ChangelogSnippet.module.css
+++ b/src/components/ChangelogSnippet/ChangelogSnippet.module.css
@@ -37,3 +37,10 @@
     grid-template-columns: 1fr;
   }
 }
+
+@media screen and (max-width: 480px) {
+  .sectionHeader {
+    justify-content: space-between;
+    width: 100%;
+  }
+}

From 0aa1a21534805c31462cdf9d0c07352f0cbec7b8 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Thu, 30 Oct 2025 13:45:40 -0400
Subject: [PATCH 05/14] Update ChangelogCard.astro

---
 .../ChangelogSnippet/ChangelogCard.astro      | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/ChangelogSnippet/ChangelogCard.astro b/src/components/ChangelogSnippet/ChangelogCard.astro
index f3975b51819..5d4c2852c11 100644
--- a/src/components/ChangelogSnippet/ChangelogCard.astro
+++ b/src/components/ChangelogSnippet/ChangelogCard.astro
@@ -64,17 +64,18 @@ const formattedDate = formatDate(item["date-of-release"])
     // Find all images with data-token attribute and swap src
     const tokenImages = document.querySelectorAll("img[data-token]")
     tokenImages.forEach((img) => {
-      const tokenUrl = img.getAttribute("data-token")
-      const originalSrc = img.getAttribute("src")
+      const imageEl = img as HTMLImageElement
+      const tokenUrl = imageEl.getAttribute("data-token")
+      const originalSrc = imageEl.getAttribute("src")
 
       if (tokenUrl && tokenUrl !== originalSrc) {
         // Try to load the data-token image
-        img.setAttribute("src", tokenUrl)
+        imageEl.setAttribute("src", tokenUrl)
 
         // Fallback to original src if image fails to load
-        img.onerror = () => {
-          img.setAttribute("src", originalSrc!)
-          img.onerror = null // Remove handler to prevent infinite loop
+        imageEl.onerror = () => {
+          imageEl.setAttribute("src", originalSrc!)
+          imageEl.onerror = null // Remove handler to prevent infinite loop
         }
       }
     })
@@ -82,17 +83,18 @@ const formattedDate = formatDate(item["date-of-release"])
     // Find all images with data-network attribute and swap src
     const networkImages = document.querySelectorAll("img[data-network]")
     networkImages.forEach((img) => {
-      const networkUrl = img.getAttribute("data-network")
-      const originalSrc = img.getAttribute("src")
+      const imageEl = img as HTMLImageElement
+      const networkUrl = imageEl.getAttribute("data-network")
+      const originalSrc = imageEl.getAttribute("src")
 
       if (networkUrl && networkUrl !== originalSrc) {
         // Try to load the data-network image
-        img.setAttribute("src", networkUrl)
+        imageEl.setAttribute("src", networkUrl)
 
         // Fallback to original src if image fails to load
-        img.onerror = () => {
-          img.setAttribute("src", originalSrc!)
-          img.onerror = null // Remove handler to prevent infinite loop
+        imageEl.onerror = () => {
+          imageEl.setAttribute("src", originalSrc!)
+          imageEl.onerror = null // Remove handler to prevent infinite loop
         }
       }
     })

From 29d5f9a3d34e300e837b6e317ae446bb990f8e38 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Thu, 30 Oct 2025 13:53:20 -0400
Subject: [PATCH 06/14] wrap up

---
 src/components/ChangelogSnippet/ChangelogCard.module.css | 2 +-
 src/components/ChangelogSnippet/ChangelogSnippet.astro   | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/ChangelogSnippet/ChangelogCard.module.css b/src/components/ChangelogSnippet/ChangelogCard.module.css
index bcde64f9ba9..c577afa22fd 100644
--- a/src/components/ChangelogSnippet/ChangelogCard.module.css
+++ b/src/components/ChangelogSnippet/ChangelogCard.module.css
@@ -115,7 +115,7 @@
 .expandButton svg {
   transition: transform 0.3s ease;
 }
-/* Responsive Design */
+
 @media (max-width: 768px) {
   .card {
     padding: var(--space-4x);
diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.astro b/src/components/ChangelogSnippet/ChangelogSnippet.astro
index 1170b7a0826..92f9bcf2dfe 100644
--- a/src/components/ChangelogSnippet/ChangelogSnippet.astro
+++ b/src/components/ChangelogSnippet/ChangelogSnippet.astro
@@ -14,13 +14,15 @@ const req = await client.search({
   requests: [
     {
       indexName: ALGOLIA_INDEX.CHANGELOG,
-      query: "data-feeds",
+      query: "ccip",
     },
   ],
 })
 
 const firstResult = req.results[0]
 const results = "hits" in firstResult ? (firstResult.hits as ChangelogItem[]) : []
+
+// logs are returned sorted by created_at DESC
 const latestLog = results[0]
 ---
 

From d579c05f3edfc3df7b01269acb8278d70733b58d Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Thu, 30 Oct 2025 13:57:15 -0400
Subject: [PATCH 07/14] add prop for query

---
 src/components/ChangelogSnippet/ChangelogSnippet.astro | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.astro b/src/components/ChangelogSnippet/ChangelogSnippet.astro
index 92f9bcf2dfe..901ff4848ac 100644
--- a/src/components/ChangelogSnippet/ChangelogSnippet.astro
+++ b/src/components/ChangelogSnippet/ChangelogSnippet.astro
@@ -5,6 +5,12 @@ import ChangelogCard from "./ChangelogCard.astro"
 import { ALGOLIA_INDEX, type ChangelogItem } from "./types"
 import styles from "./ChangelogSnippet.module.css"
 
+interface Props {
+  query: string
+}
+
+const { query } = Astro.props
+
 const appId = import.meta.env.PUBLIC_ALGOLIA_SEARCH_APP_ID
 const apiKey = import.meta.env.PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY
 
@@ -14,7 +20,7 @@ const req = await client.search({
   requests: [
     {
       indexName: ALGOLIA_INDEX.CHANGELOG,
-      query: "ccip",
+      query,
     },
   ],
 })

From a181e5a3afd73fed388deec72be796999c4e054d Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Thu, 30 Oct 2025 14:00:59 -0400
Subject: [PATCH 08/14] add README

---
 src/components/ChangelogSnippet/README.md | 37 +++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/components/ChangelogSnippet/README.md

diff --git a/src/components/ChangelogSnippet/README.md b/src/components/ChangelogSnippet/README.md
new file mode 100644
index 00000000000..bce2e2505ae
--- /dev/null
+++ b/src/components/ChangelogSnippet/README.md
@@ -0,0 +1,37 @@
+# ChangelogSnippet Component
+
+## What This Component Does
+
+The ChangelogSnippet component displays the most recent changelog entry for a specific product or topic. It searches through changelog entries and shows the latest update in a card format with an expandable description.
+
+## How to Use It
+
+Import the component into your MDX file and provide a search query:
+
+```astro
+import ChangelogSnippet from "@components/ChangelogSnippet/ChangelogSnippet.astro"
+
+<ChangelogSnippet query="ccip" />
+```
+
+## Props
+
+| Prop    | Type   | Required | Description                                                                                 |
+| ------- | ------ | -------- | ------------------------------------------------------------------------------------------- |
+| `query` | string | Yes      | The search term used to find relevant changelog entries (e.g., "ccip", "vrf", "automation") |
+
+## Complete Example
+
+Here's a full example of using the component in your documentation page:
+
+```astro
+---
+import ChangelogSnippet from "@components/ChangelogSnippet/ChangelogSnippet.astro"
+---
+
+# CCIP Documentation Learn about Cross-Chain Interoperability Protocol.
+
+<ChangelogSnippet query="ccip" />
+```
+
+This will display the latest CCIP-related changelog entry with a link to view the full changelog.

From fef98da71d061009a88dd592867b027a12dc455d Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Thu, 30 Oct 2025 14:08:17 -0400
Subject: [PATCH 09/14] add fade to show more

---
 src/components/ChangelogSnippet/ChangelogCard.astro  | 12 ++++++++----
 .../ChangelogSnippet/ChangelogCard.module.css        |  3 +++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/ChangelogSnippet/ChangelogCard.astro b/src/components/ChangelogSnippet/ChangelogCard.astro
index 5d4c2852c11..a22d05ad2bd 100644
--- a/src/components/ChangelogSnippet/ChangelogCard.astro
+++ b/src/components/ChangelogSnippet/ChangelogCard.astro
@@ -125,10 +125,12 @@ const formattedDate = formatDate(item["date-of-release"])
         // Check if card exceeds wrapper height
         if (card.scrollHeight <= wrapperMaxHeight) {
           // Card fits, hide the button and fade
-          footer.style.display = "none"
+          footer.style.opacity = "0"
+          footer.style.pointerEvents = "none"
         } else {
           // Card exceeds wrapper, show button and fade
-          footer.style.display = "flex"
+          footer.style.opacity = "1"
+          footer.style.pointerEvents = "auto"
         }
       }
 
@@ -170,14 +172,16 @@ const formattedDate = formatDate(item["date-of-release"])
           ;(wrapper as HTMLElement).style.maxHeight = card.scrollHeight + "px"
           // Hide mask and footer
           wrapper.classList.add("expanded")
-          footer.style.display = "none"
+          footer.style.opacity = "0"
+          footer.style.pointerEvents = "none"
           if (text) text.textContent = "Show less"
         } else {
           // Collapse wrapper back
           ;(wrapper as HTMLElement).style.maxHeight = ""
           // Show mask and footer
           wrapper.classList.remove("expanded")
-          footer.style.display = "block"
+          footer.style.opacity = "1"
+          footer.style.pointerEvents = "auto"
           if (text) text.textContent = "Show more"
         }
       })
diff --git a/src/components/ChangelogSnippet/ChangelogCard.module.css b/src/components/ChangelogSnippet/ChangelogCard.module.css
index c577afa22fd..dab678ef605 100644
--- a/src/components/ChangelogSnippet/ChangelogCard.module.css
+++ b/src/components/ChangelogSnippet/ChangelogCard.module.css
@@ -93,6 +93,9 @@
   display: flex;
   align-items: end;
   background: linear-gradient(to top, white 50%, transparent);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
 }
 
 /* Expand Button */

From fb677f069c85b1063f4aefdc88a29f7143eb7f95 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Thu, 30 Oct 2025 15:44:35 -0400
Subject: [PATCH 10/14] Update ChangelogSnippet.astro

---
 src/components/ChangelogSnippet/ChangelogSnippet.astro | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.astro b/src/components/ChangelogSnippet/ChangelogSnippet.astro
index 901ff4848ac..482e191e498 100644
--- a/src/components/ChangelogSnippet/ChangelogSnippet.astro
+++ b/src/components/ChangelogSnippet/ChangelogSnippet.astro
@@ -4,6 +4,7 @@ import { searchClient } from "@algolia/client-search"
 import ChangelogCard from "./ChangelogCard.astro"
 import { ALGOLIA_INDEX, type ChangelogItem } from "./types"
 import styles from "./ChangelogSnippet.module.css"
+import { getSecret } from "astro:env/server"
 
 interface Props {
   query: string
@@ -11,8 +12,12 @@ interface Props {
 
 const { query } = Astro.props
 
-const appId = import.meta.env.PUBLIC_ALGOLIA_SEARCH_APP_ID
-const apiKey = import.meta.env.PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY
+const appId = getSecret("ALGOLIA_APP_ID")
+const apiKey = getSecret("PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY")
+
+if (!appId || !apiKey) {
+  throw new Error("Missing Algolia credentials")
+}
 
 const client = searchClient(appId, apiKey)
 

From df908a5d518b978e84b7a65711b0504a992c9052 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Mon, 3 Nov 2025 12:12:18 -0500
Subject: [PATCH 11/14] add query types

---
 .../ChangelogSnippet/ChangelogCard.module.css |  2 +-
 .../ChangelogSnippet/ChangelogSnippet.astro   |  8 +++--
 src/components/ChangelogSnippet/types.ts      | 30 +++++++------------
 3 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/components/ChangelogSnippet/ChangelogCard.module.css b/src/components/ChangelogSnippet/ChangelogCard.module.css
index dab678ef605..7e3dda0edeb 100644
--- a/src/components/ChangelogSnippet/ChangelogCard.module.css
+++ b/src/components/ChangelogSnippet/ChangelogCard.module.css
@@ -132,7 +132,7 @@
   }
 
   .metaSection {
-    gap: 4px;
+    gap: var(--space-1x);
   }
 
   .expandButton {
diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.astro b/src/components/ChangelogSnippet/ChangelogSnippet.astro
index 482e191e498..af7819869f0 100644
--- a/src/components/ChangelogSnippet/ChangelogSnippet.astro
+++ b/src/components/ChangelogSnippet/ChangelogSnippet.astro
@@ -2,12 +2,12 @@
 import { SvgArrowRight2, Typography } from "@chainlink/blocks"
 import { searchClient } from "@algolia/client-search"
 import ChangelogCard from "./ChangelogCard.astro"
-import { ALGOLIA_INDEX, type ChangelogItem } from "./types"
+import { AlgoliaQuery, type ChangelogItem } from "./types"
 import styles from "./ChangelogSnippet.module.css"
 import { getSecret } from "astro:env/server"
 
 interface Props {
-  query: string
+  query: AlgoliaQuery
 }
 
 const { query } = Astro.props
@@ -24,8 +24,10 @@ const client = searchClient(appId, apiKey)
 const req = await client.search({
   requests: [
     {
-      indexName: ALGOLIA_INDEX.CHANGELOG,
+      indexName: "Changelog",
+      restrictSearchableAttributes: ["topic"],
       query,
+      hitsPerPage: 1,
     },
   ],
 })
diff --git a/src/components/ChangelogSnippet/types.ts b/src/components/ChangelogSnippet/types.ts
index 39457f141cd..870c3afd23b 100644
--- a/src/components/ChangelogSnippet/types.ts
+++ b/src/components/ChangelogSnippet/types.ts
@@ -1,23 +1,13 @@
-export const ALGOLIA_INDEX = {
-  CCIP_CHAINS: "CCIP Network",
-  CCIP_LANES: "CCIP Lane",
-  CCIP_TOKENS: "CCIP Tokens",
-  CCIP_TOKENS_ON_NETWORK: "CCIP Tokens on Network",
-  LINK_TOKENS: "LINK Token",
-  DATA_FEED: "Data Feed",
-  DATA_STREAMS: "Data Stream",
-  DATA_STREAMS_NETWORK: "Data Stream Network",
-  FAUCET: "Faucet",
-  SITE: "Site",
-  DOCUMENTATION: "Documentation",
-  QUICKSTART: "Quickstart",
-  GUIDE: "Guide",
-  TUTORIAL: "Tutorial",
-  CHANGELOG: "Changelog",
-  BOOTCAMP: "Bootcamp",
-  BLOG_NEW: "blog_new",
-  VIDEO: "Video",
-} as const
+export type AlgoliaQuery =
+  | "ccip"
+  | "data-streams"
+  | "smart-data"
+  | "nodes"
+  | "data-feeds"
+  | "functions"
+  | "automation"
+  | "vrf"
+  | "general"
 
 export interface ChangelogItem {
   createdOn: string

From 646f35e9777a40e78ec2d0f38426c73fe01825bb Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Mon, 3 Nov 2025 12:56:32 -0500
Subject: [PATCH 12/14] fix merge conflicts

---
 src/content/ccip/index.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/content/ccip/index.mdx b/src/content/ccip/index.mdx
index 78f6feb1a50..d9021dec296 100644
--- a/src/content/ccip/index.mdx
+++ b/src/content/ccip/index.mdx
@@ -301,6 +301,8 @@ export const cardLinks = [
   <QuickLinkCard links={quickLinks} />
   <ToolsUtilitiesGrid links={toolsAndUtilities} />
   <ResourceSection title="Resources" resources={exampleResources} />
+  <ChangelogSnippet query="ccip" />
+
   <MediaSection
     heading="High-level architecture"
     description="CCIP delivers cross-chain messages from a source chain to a destination chain by combining offchain consensus and onchain execution components."

From 1a5729ffa9cf9ff733f48a2b099e12dd86f1207c Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Tue, 4 Nov 2025 12:27:28 -0500
Subject: [PATCH 13/14] Update ChangelogSnippet.astro

---
 .../ChangelogSnippet/ChangelogSnippet.astro   | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.astro b/src/components/ChangelogSnippet/ChangelogSnippet.astro
index af7819869f0..06a9d4288d6 100644
--- a/src/components/ChangelogSnippet/ChangelogSnippet.astro
+++ b/src/components/ChangelogSnippet/ChangelogSnippet.astro
@@ -1,6 +1,6 @@
 ---
 import { SvgArrowRight2, Typography } from "@chainlink/blocks"
-import { searchClient } from "@algolia/client-search"
+import { SearchClient, searchClient } from "@algolia/client-search"
 import ChangelogCard from "./ChangelogCard.astro"
 import { AlgoliaQuery, type ChangelogItem } from "./types"
 import styles from "./ChangelogSnippet.module.css"
@@ -15,32 +15,35 @@ const { query } = Astro.props
 const appId = getSecret("ALGOLIA_APP_ID")
 const apiKey = getSecret("PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY")
 
-if (!appId || !apiKey) {
-  throw new Error("Missing Algolia credentials")
-}
+let client: SearchClient
+let latestLog: ChangelogItem | undefined = undefined
 
-const client = searchClient(appId, apiKey)
+// Initialize client if appId and apiKey are available to avoid needing to update
+// the github actions with the new keys
+if (appId && apiKey) {
+  client = searchClient(appId, apiKey)
 
-const req = await client.search({
-  requests: [
-    {
-      indexName: "Changelog",
-      restrictSearchableAttributes: ["topic"],
-      query,
-      hitsPerPage: 1,
-    },
-  ],
-})
+  const req = await client.search({
+    requests: [
+      {
+        indexName: "Changelog",
+        restrictSearchableAttributes: ["topic"],
+        query,
+        hitsPerPage: 1,
+      },
+    ],
+  })
 
-const firstResult = req.results[0]
-const results = "hits" in firstResult ? (firstResult.hits as ChangelogItem[]) : []
+  const firstResult = req.results[0]
+  const results = "hits" in firstResult ? (firstResult.hits as ChangelogItem[]) : []
 
-// logs are returned sorted by created_at DESC
-const latestLog = results[0]
+  // logs are returned sorted by created_at DESC
+  latestLog = results[0]
+}
 ---
 
 {
-  results.length > 0 && (
+  latestLog && (
     <section class={styles.container}>
       <header class={styles.sectionHeader}>
         <Typography

From 39a63f69b1f5c02df6020d22366f2704773c04db Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Tue, 4 Nov 2025 12:35:51 -0500
Subject: [PATCH 14/14] clarify comment

---
 src/components/ChangelogSnippet/ChangelogSnippet.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.astro b/src/components/ChangelogSnippet/ChangelogSnippet.astro
index 06a9d4288d6..aa2930cb346 100644
--- a/src/components/ChangelogSnippet/ChangelogSnippet.astro
+++ b/src/components/ChangelogSnippet/ChangelogSnippet.astro
@@ -19,7 +19,7 @@ let client: SearchClient
 let latestLog: ChangelogItem | undefined = undefined
 
 // Initialize client if appId and apiKey are available to avoid needing to update
-// the github actions with the new keys
+// the github actions with the new keys (satisfies linkcheck-internal)
 if (appId && apiKey) {
   client = searchClient(appId, apiKey)