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..a22d05ad2bd --- /dev/null +++ b/src/components/ChangelogSnippet/ChangelogCard.astro @@ -0,0 +1,313 @@ +--- +import { SvgTaillessArrowDownSmall, 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"]) +--- + +
+
+
+
+ + {item.type} + + + {formattedDate} + +
+
+ +
+ + {item.name} + + +
+ {item["text-description"] &&
} +
+
+
+ +
+ +
+
+ + + + diff --git a/src/components/ChangelogSnippet/ChangelogCard.module.css b/src/components/ChangelogSnippet/ChangelogCard.module.css new file mode 100644 index 00000000000..7e3dda0edeb --- /dev/null +++ b/src/components/ChangelogSnippet/ChangelogCard.module.css @@ -0,0 +1,150 @@ +/* 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); +} + +.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 */ +.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; +} + +/* 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); + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease-in-out; +} + +/* 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; + transition: color 0.2s ease; + cursor: default; + margin-left: 256px; + margin-bottom: var(--space-6x); +} + +.expandButton svg { + transition: transform 0.3s ease; +} + +@media (max-width: 768px) { + .card { + padding: var(--space-4x); + flex-direction: column; + gap: var(--space-4x); + } + + .header { + gap: var(--space-3x); + width: 100%; + } + + .metaSection { + gap: var(--space-1x); + } + + .expandButton { + margin-left: 0; + } + + .cardWrapper.expanded .card { + -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 new file mode 100644 index 00000000000..aa2930cb346 --- /dev/null +++ b/src/components/ChangelogSnippet/ChangelogSnippet.astro @@ -0,0 +1,65 @@ +--- +import { SvgArrowRight2, Typography } from "@chainlink/blocks" +import { SearchClient, searchClient } from "@algolia/client-search" +import ChangelogCard from "./ChangelogCard.astro" +import { AlgoliaQuery, type ChangelogItem } from "./types" +import styles from "./ChangelogSnippet.module.css" +import { getSecret } from "astro:env/server" + +interface Props { + query: AlgoliaQuery +} + +const { query } = Astro.props + +const appId = getSecret("ALGOLIA_APP_ID") +const apiKey = getSecret("PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY") + +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 (satisfies linkcheck-internal) +if (appId && apiKey) { + client = searchClient(appId, apiKey) + + 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[]) : [] + + // logs are returned sorted by created_at DESC + latestLog = results[0] +} +--- + +{ + latestLog && ( +
+
+ + Changelog + + + + + +
+ +
+ ) +} diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.module.css b/src/components/ChangelogSnippet/ChangelogSnippet.module.css new file mode 100644 index 00000000000..d852a20cba5 --- /dev/null +++ b/src/components/ChangelogSnippet/ChangelogSnippet.module.css @@ -0,0 +1,46 @@ +.container { + display: flex; + flex-direction: column; + gap: var(--space-6x); +} + +.grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + 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); + } +} + +@media (max-width: 768px) { + .grid { + grid-template-columns: 1fr; + } +} + +@media screen and (max-width: 480px) { + .sectionHeader { + justify-content: space-between; + width: 100%; + } +} 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" + + +``` + +## 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. + + +``` + +This will display the latest CCIP-related changelog entry with a link to view the full changelog. diff --git a/src/components/ChangelogSnippet/types.ts b/src/components/ChangelogSnippet/types.ts new file mode 100644 index 00000000000..870c3afd23b --- /dev/null +++ b/src/components/ChangelogSnippet/types.ts @@ -0,0 +1,31 @@ +export type AlgoliaQuery = + | "ccip" + | "data-streams" + | "smart-data" + | "nodes" + | "data-feeds" + | "functions" + | "automation" + | "vrf" + | "general" + +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 + name: Record + "text-description": Record + } +} diff --git a/src/content/ccip/index.mdx b/src/content/ccip/index.mdx index 8982eb282a1..d9021dec296 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, @@ -300,6 +301,8 @@ export const cardLinks = [ + +