From 21641eeb8c5473a93b52f673fe6782553311d55e Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Tue, 18 Nov 2025 11:56:18 -0500 Subject: [PATCH 01/12] add page --- .../ProductNavigation/Desktop/ProductNavigation.tsx | 2 +- .../Nav/ProductNavigation/Mobile/ProductNavigation.tsx | 2 +- src/pages/changelog.astro | 10 ++++++++++ 3 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 src/pages/changelog.astro diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx index 9f9cfe6853c..5c9979f9a7c 100644 --- a/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx +++ b/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx @@ -68,7 +68,7 @@ export const ProductNavigation = ({ setNavMenuOpen, showMegaMenu, isMegamenuOpen - + Changelog diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx index b00ccb80fb2..5520d7817df 100644 --- a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx +++ b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx @@ -83,7 +83,7 @@ export function ProductNavigation() { Tools - + Changelog diff --git a/src/pages/changelog.astro b/src/pages/changelog.astro new file mode 100644 index 00000000000..f9f33f31a19 --- /dev/null +++ b/src/pages/changelog.astro @@ -0,0 +1,10 @@ +--- +import BaseLayout from "~/layouts/BaseLayout.astro" +import * as CONFIG from "../config" + +const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}` +--- + + +
+ From 2cf2029fc66d1e9e18f872fade51eb8e7c47f6d4 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Tue, 18 Nov 2025 13:49:38 -0500 Subject: [PATCH 02/12] add changelog page --- .../ChangelogSnippet/ChangelogCard.astro | 11 +-- .../ChangelogSnippet/ChangelogCard.module.css | 54 +++++++++--- .../ChangelogSnippet/ChangelogSnippet.astro | 2 +- src/components/ChangelogSnippet/README.md | 11 ++- src/pages/changelog.astro | 86 ++++++++++++++++++- 5 files changed, 141 insertions(+), 23 deletions(-) diff --git a/src/components/ChangelogSnippet/ChangelogCard.astro b/src/components/ChangelogSnippet/ChangelogCard.astro index a22d05ad2bd..5f5fc99dea5 100644 --- a/src/components/ChangelogSnippet/ChangelogCard.astro +++ b/src/components/ChangelogSnippet/ChangelogCard.astro @@ -5,9 +5,10 @@ import type { ChangelogItem } from "./types" interface Props { item: ChangelogItem + showBorder?: boolean } -const { item } = Astro.props +const { item, showBorder = true } = Astro.props // Format the date const formatDate = (dateString: string) => { @@ -22,14 +23,14 @@ const formatDate = (dateString: string) => { const formattedDate = formatDate(item["date-of-release"]) --- -
+
- + {item.type} - + {formattedDate}
@@ -46,7 +47,7 @@ const formattedDate = formatDate(item["date-of-release"])
- {item["text-description"] &&
} + {item["text-description"] &&
}
diff --git a/src/components/ChangelogSnippet/ChangelogCard.module.css b/src/components/ChangelogSnippet/ChangelogCard.module.css index 7e3dda0edeb..7ac29270209 100644 --- a/src/components/ChangelogSnippet/ChangelogCard.module.css +++ b/src/components/ChangelogSnippet/ChangelogCard.module.css @@ -1,27 +1,43 @@ -/* Card Wrapper */ +/* Card Wrapper used in Changelog page */ .cardWrapper { max-height: 400px; overflow: hidden; - transition: max-height 0.5s ease; + transition: all 0.5s ease; position: relative; + + &:hover { + background-color: var(--gray-50); + } +} + +.cardWrapper, +.cardWrapperWithBorder { + & .card { + padding: var(--space-6x); + } +} + +/* Used on individual pages like CCIP/DataFeeds */ +.cardWrapperWithBorder { border: 1px solid var(--border); + + &:hover { + background-color: var(--muted); + } } /* Card Container */ .card { display: flex; gap: 82px; - padding: var(--space-6x); } -.cardWrapper.expanded .card { +.cardWrapperWithBorder.expanded .card { -webkit-mask-image: none; mask-image: none; } -.cardWrapper:hover { - background-color: var(--muted); - +.cardWrapperWithBorder:hover { & .contentFooter { background: linear-gradient(to top, var(--muted) 50%, transparent); } @@ -54,11 +70,11 @@ .description p { margin: 0; - color: var(--foreground); + color: var(--muted-foreground); } .description a { - color: var(--color-blue-600); + color: var(--link); text-decoration: none; } @@ -68,7 +84,7 @@ .header { display: flex; - width: 150px; + width: 160px; } .content { @@ -119,16 +135,28 @@ transition: transform 0.3s ease; } -@media (max-width: 768px) { +@media screen and (max-width: 425px) { .card { - padding: var(--space-4x); flex-direction: column; + } + + .changelogType { + font-size: 14px; + } + + .metaSection { + gap: 0 !important; + } +} + +@media screen and (max-width: 768px) { + .card { + padding: var(--space-4x); gap: var(--space-4x); } .header { gap: var(--space-3x); - width: 100%; } .metaSection { diff --git a/src/components/ChangelogSnippet/ChangelogSnippet.astro b/src/components/ChangelogSnippet/ChangelogSnippet.astro index aa2930cb346..7c251b503ac 100644 --- a/src/components/ChangelogSnippet/ChangelogSnippet.astro +++ b/src/components/ChangelogSnippet/ChangelogSnippet.astro @@ -55,7 +55,7 @@ if (appId && apiKey) { Changelog - + diff --git a/src/components/ChangelogSnippet/README.md b/src/components/ChangelogSnippet/README.md index bce2e2505ae..c594abf7bf2 100644 --- a/src/components/ChangelogSnippet/README.md +++ b/src/components/ChangelogSnippet/README.md @@ -4,6 +4,10 @@ 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. +## Notes + +On pages like "CCIP" (individual product pages), the changelog card has a border and has slightly different styling than the component shown on the Changelog page. This component has no border and some different hover effects. This styling is controlled by the "showBorder" prop. The showBorder prop when set to true (true is the default value) is what you see on individual product pages. This will be the default styling when using the changelog components. On the Changelog page you can see the styling when showBorder is set to false. + ## How to Use It Import the component into your MDX file and provide a search query: @@ -16,9 +20,10 @@ import ChangelogSnippet from "@components/ChangelogSnippet/ChangelogSnippet.astr ## Props -| Prop | Type | Required | Description | -| ------- | ------ | -------- | ------------------------------------------------------------------------------------------- | -| `query` | string | Yes | The search term used to find relevant changelog entries (e.g., "ccip", "vrf", "automation") | +| Prop | Type | Required | Description | +| ------------ | ------- | -------- | ------------------------------------------------------------------------------------------- | +| `query` | string | Yes | The search term used to find relevant changelog entries (e.g., "ccip", "vrf", "automation") | +| `showBorder` | boolean | No | Whether to show a border around the card. Defaults to true. | ## Complete Example diff --git a/src/pages/changelog.astro b/src/pages/changelog.astro index f9f33f31a19..a5301884c34 100644 --- a/src/pages/changelog.astro +++ b/src/pages/changelog.astro @@ -1,10 +1,94 @@ --- import BaseLayout from "~/layouts/BaseLayout.astro" import * as CONFIG from "../config" +import { Typography } from "@chainlink/blocks" +import { getSecret } from "astro:env/server" +import { searchClient, SearchClient } from "@algolia/client-search" +import { ChangelogItem } from "~/components/ChangelogSnippet/types" +import ChangelogCard from "~/components/ChangelogSnippet/ChangelogCard.astro" const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}` + +const appId = getSecret("ALGOLIA_APP_ID") +const apiKey = getSecret("PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY") + +let client: SearchClient +let logs: 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"], + }, + ], + }) + + const firstResult = req.results[0] + const results = "hits" in firstResult ? (firstResult.hits as ChangelogItem[]) : [] + + // logs are returned sorted by created_at DESC + logs = results +} --- -
+
+
+ Changelog + Never miss an update +
+ +
+ {logs?.map((log) => )} +
+
+ + From b97ed64b3bbf18fa4f49dcb328445667dc1dcbf0 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Tue, 18 Nov 2025 13:55:47 -0500 Subject: [PATCH 03/12] adjust tyling --- src/components/ChangelogSnippet/ChangelogCard.astro | 3 ++- src/components/ChangelogSnippet/ChangelogCard.module.css | 9 +++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/ChangelogSnippet/ChangelogCard.astro b/src/components/ChangelogSnippet/ChangelogCard.astro index 5f5fc99dea5..087bcbbf03a 100644 --- a/src/components/ChangelogSnippet/ChangelogCard.astro +++ b/src/components/ChangelogSnippet/ChangelogCard.astro @@ -2,6 +2,7 @@ import { SvgTaillessArrowDownSmall, Typography } from "@chainlink/blocks" import styles from "./ChangelogCard.module.css" import type { ChangelogItem } from "./types" +import { clsx } from "~/lib/clsx/clsx" interface Props { item: ChangelogItem @@ -23,7 +24,7 @@ const formatDate = (dateString: string) => { const formattedDate = formatDate(item["date-of-release"]) --- -
+
diff --git a/src/components/ChangelogSnippet/ChangelogCard.module.css b/src/components/ChangelogSnippet/ChangelogCard.module.css index 7ac29270209..56437e6fb33 100644 --- a/src/components/ChangelogSnippet/ChangelogCard.module.css +++ b/src/components/ChangelogSnippet/ChangelogCard.module.css @@ -8,17 +8,14 @@ &:hover { background-color: var(--gray-50); } -} -.cardWrapper, -.cardWrapperWithBorder { & .card { padding: var(--space-6x); } } /* Used on individual pages like CCIP/DataFeeds */ -.cardWrapperWithBorder { +.cardWrapper.withBorder { border: 1px solid var(--border); &:hover { @@ -32,12 +29,12 @@ gap: 82px; } -.cardWrapperWithBorder.expanded .card { +.cardWrapper.withBorder.expanded .card { -webkit-mask-image: none; mask-image: none; } -.cardWrapperWithBorder:hover { +.cardWrapper.withBorder:hover { & .contentFooter { background: linear-gradient(to top, var(--muted) 50%, transparent); } From 678348a3341d5a32e312633ade677f6f6573cdeb Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Tue, 18 Nov 2025 15:11:23 -0500 Subject: [PATCH 04/12] copy button --- .../ChangelogSnippet/ChangelogCard.astro | 3 + .../ChangelogSnippet/ChangelogCard.module.css | 63 ++++++++++++++++- .../ChangelogSnippet/CopyButton.tsx | 67 +++++++++++++++++++ src/pages/changelog/[...id].astro | 0 .../index.astro} | 2 +- 5 files changed, 131 insertions(+), 4 deletions(-) create mode 100644 src/components/ChangelogSnippet/CopyButton.tsx create mode 100644 src/pages/changelog/[...id].astro rename src/pages/{changelog.astro => changelog/index.astro} (98%) diff --git a/src/components/ChangelogSnippet/ChangelogCard.astro b/src/components/ChangelogSnippet/ChangelogCard.astro index 087bcbbf03a..2e36501f5b9 100644 --- a/src/components/ChangelogSnippet/ChangelogCard.astro +++ b/src/components/ChangelogSnippet/ChangelogCard.astro @@ -3,6 +3,7 @@ import { SvgTaillessArrowDownSmall, Typography } from "@chainlink/blocks" import styles from "./ChangelogCard.module.css" import type { ChangelogItem } from "./types" import { clsx } from "~/lib/clsx/clsx" +import CopyButton from "./CopyButton.tsx" interface Props { item: ChangelogItem @@ -51,6 +52,8 @@ const formattedDate = formatDate(item["date-of-release"]) {item["text-description"] &&
}
+ +
diff --git a/src/components/ChangelogSnippet/ChangelogCard.module.css b/src/components/ChangelogSnippet/ChangelogCard.module.css index 56437e6fb33..536a5c22f0e 100644 --- a/src/components/ChangelogSnippet/ChangelogCard.module.css +++ b/src/components/ChangelogSnippet/ChangelogCard.module.css @@ -9,6 +9,10 @@ background-color: var(--gray-50); } + &:hover .copyButton { + opacity: 1; + } + & .card { padding: var(--space-6x); } @@ -132,11 +136,40 @@ transition: transform 0.3s ease; } -@media screen and (max-width: 425px) { - .card { - flex-direction: column; +.copyButton { + display: flex; + height: fit-content; + gap: var(--space-2x); + border-radius: var(--space-1x); + border: 1px solid var(--border); + width: 118px; + justify-content: center; + align-items: center; + padding: var(--space-2x) 0; + transition: all 0.2s ease; + opacity: 0; + + & > svg { + color: var(--muted-foreground); + } + + &:hover { + border: 1px solid var(--foreground); } +} +.checkmark { + stroke: var(--success-foreground); +} +.copyIconMobile { + display: none; +} + +.copyIconDesktop { + display: block; +} + +@media screen and (max-width: 425px) { .changelogType { font-size: 14px; } @@ -150,6 +183,7 @@ .card { padding: var(--space-4x); gap: var(--space-4x); + flex-direction: column; } .header { @@ -172,4 +206,27 @@ .contentFooter { padding-left: var(--space-4x); } + + .copyIconDesktop { + display: none; + } + + .copyIconMobile { + display: block; + } + .copyText { + display: none; + } + + .copyButton { + width: 32px; + } +} + +@media screen and (max-width: 990px) { + .copyButton { + position: absolute; + right: var(--space-4x); + top: var(--space-4x); + } } diff --git a/src/components/ChangelogSnippet/CopyButton.tsx b/src/components/ChangelogSnippet/CopyButton.tsx new file mode 100644 index 00000000000..5fabe5dfdd2 --- /dev/null +++ b/src/components/ChangelogSnippet/CopyButton.tsx @@ -0,0 +1,67 @@ +import { SvgCopy, Typography } from "@chainlink/blocks" +import styles from "./ChangelogCard.module.css" +import { useState } from "react" + +export default function CopyButton({ url }: { url: string }) { + const [isCopied, setIsCopied] = useState(false) + + const copyToClipboard = () => { + navigator.clipboard.writeText(`/changelog/${url}`) + setIsCopied(true) + setTimeout(() => setIsCopied(false), 2000) + } + + return ( + + ) +} diff --git a/src/pages/changelog/[...id].astro b/src/pages/changelog/[...id].astro new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/pages/changelog.astro b/src/pages/changelog/index.astro similarity index 98% rename from src/pages/changelog.astro rename to src/pages/changelog/index.astro index a5301884c34..74c1207b4b4 100644 --- a/src/pages/changelog.astro +++ b/src/pages/changelog/index.astro @@ -1,6 +1,6 @@ --- import BaseLayout from "~/layouts/BaseLayout.astro" -import * as CONFIG from "../config" +import * as CONFIG from "../../config" import { Typography } from "@chainlink/blocks" import { getSecret } from "astro:env/server" From 8d8b35df8f404ac41a9d710c5cd8e8f7769b40b7 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Tue, 18 Nov 2025 15:35:04 -0500 Subject: [PATCH 05/12] add individual changelog page --- .../ChangelogSnippet/CopyButton.tsx | 3 +- src/pages/changelog/[...id].astro | 52 +++++++++++++++++++ 2 files changed, 54 insertions(+), 1 deletion(-) diff --git a/src/components/ChangelogSnippet/CopyButton.tsx b/src/components/ChangelogSnippet/CopyButton.tsx index 5fabe5dfdd2..d52f32aa96f 100644 --- a/src/components/ChangelogSnippet/CopyButton.tsx +++ b/src/components/ChangelogSnippet/CopyButton.tsx @@ -6,7 +6,8 @@ export default function CopyButton({ url }: { url: string }) { const [isCopied, setIsCopied] = useState(false) const copyToClipboard = () => { - navigator.clipboard.writeText(`/changelog/${url}`) + const mode = import.meta.env.MODE === "development" ? "http://localhost:4321" : "https://dev.chain.link" + navigator.clipboard.writeText(`${mode}/changelog/${url}`) setIsCopied(true) setTimeout(() => setIsCopied(false), 2000) } diff --git a/src/pages/changelog/[...id].astro b/src/pages/changelog/[...id].astro index e69de29bb2d..346768182ee 100644 --- a/src/pages/changelog/[...id].astro +++ b/src/pages/changelog/[...id].astro @@ -0,0 +1,52 @@ +--- +import BaseLayout from "~/layouts/BaseLayout.astro" +import * as CONFIG from "../../config" +import { getSecret } from "astro:env/server" +import { searchClient, SearchClient } from "@algolia/client-search" +import { ChangelogItem } from "~/components/ChangelogSnippet/types" + +export const prerender = false + +const { id } = Astro.params + +console.log(id) + +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: ["slug"], + query: id, + hitsPerPage: 1, + }, + ], + }) + + console.log(req) + + 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] +} + +console.log(latestLog) + +const formattedContentTitle = `Changelog and Releases | ${CONFIG.SITE.title}` +--- + + +
+ From 825c4cf11df4abb5c687ee2f56cb76c6d5607028 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 19 Nov 2025 13:41:24 -0500 Subject: [PATCH 06/12] styling --- .../ChangelogSnippet/ChangelogCard.astro | 21 ++- src/pages/changelog/[...id].astro | 144 +++++++++++++----- 2 files changed, 129 insertions(+), 36 deletions(-) diff --git a/src/components/ChangelogSnippet/ChangelogCard.astro b/src/components/ChangelogSnippet/ChangelogCard.astro index 2e36501f5b9..cf0f6242cab 100644 --- a/src/components/ChangelogSnippet/ChangelogCard.astro +++ b/src/components/ChangelogSnippet/ChangelogCard.astro @@ -8,9 +8,10 @@ import CopyButton from "./CopyButton.tsx" interface Props { item: ChangelogItem showBorder?: boolean + autoExpand?: boolean } -const { item, showBorder = true } = Astro.props +const { item, showBorder = true, autoExpand = false } = Astro.props // Format the date const formatDate = (dateString: string) => { @@ -25,7 +26,11 @@ const formatDate = (dateString: string) => { const formattedDate = formatDate(item["date-of-release"]) --- -
+
@@ -117,6 +122,18 @@ const formattedDate = formatDate(item["date-of-release"]) if (!card || !content || !button) return + // Check if auto-expand is enabled + const autoExpand = (wrapper as HTMLElement).dataset.autoExpand === "true" + + if (autoExpand) { + // Auto-expand: set to full height and hide footer + ;(wrapper as HTMLElement).style.maxHeight = "none" + wrapper.classList.add("expanded") + footer.style.opacity = "0" + footer.style.pointerEvents = "none" + return // Skip the rest of the logic + } + // Wait for images to load before checking height const images = card.querySelectorAll("img") let loadedImages = 0 diff --git a/src/pages/changelog/[...id].astro b/src/pages/changelog/[...id].astro index 346768182ee..073966b1283 100644 --- a/src/pages/changelog/[...id].astro +++ b/src/pages/changelog/[...id].astro @@ -2,51 +2,127 @@ import BaseLayout from "~/layouts/BaseLayout.astro" import * as CONFIG from "../../config" import { getSecret } from "astro:env/server" -import { searchClient, SearchClient } from "@algolia/client-search" +import { searchClient } from "@algolia/client-search" import { ChangelogItem } from "~/components/ChangelogSnippet/types" +import ChangelogCard from "~/components/ChangelogSnippet/ChangelogCard.astro" +import { SvgArrowLeft, SvgArrowLeft2, SvgTaillessArrowLeftSmall, Typography } from "@chainlink/blocks" -export const prerender = false +export async function getStaticPaths() { + const appId = getSecret("ALGOLIA_APP_ID") + const apiKey = getSecret("PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY") -const { id } = Astro.params + // Return empty array if credentials are not available (CI/CD environments) + if (!appId || !apiKey) { + console.warn("Algolia credentials not available, skipping changelog static generation") + return [] + } -console.log(id) + const client = searchClient(appId, apiKey) -const appId = getSecret("ALGOLIA_APP_ID") -const apiKey = getSecret("PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY") + try { + // Fetch all changelog items from Algolia + const req = await client.search({ + requests: [ + { + indexName: "Changelog", + hitsPerPage: 1000, // Adjust based on expected total number of changelog items + }, + ], + }) -let client: SearchClient -let latestLog: ChangelogItem | undefined = undefined + console.log(req) + const firstResult = req.results[0] + const logs = "hits" in firstResult ? (firstResult.hits as ChangelogItem[]) : [] -// 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: ["slug"], - query: id, - hitsPerPage: 1, - }, - ], - }) - - console.log(req) - - const firstResult = req.results[0] - const results = "hits" in firstResult ? (firstResult.hits as ChangelogItem[]) : [] + // Generate static paths for each changelog item + return logs.map((log) => ({ + params: { id: log.slug }, + props: { log }, + })) + } catch (error) { + console.error("Error fetching changelog items:", error) + return [] + } +} - // logs are returned sorted by created_at DESC - latestLog = results[0] +interface Props { + log: ChangelogItem } -console.log(latestLog) +const { log } = Astro.props -const formattedContentTitle = `Changelog and Releases | ${CONFIG.SITE.title}` +const pageTitle = `Changelog and Releases | ${CONFIG.SITE.title}` --- - -
+ +
+
+ + + Back to Changelog + + + Integration +
+ +
+ +
+
+ + From 7dec2c2c956fb1da49cca20645dd74929a80d035 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 19 Nov 2025 13:51:47 -0500 Subject: [PATCH 07/12] make individual page for changelog item --- .../ChangelogSnippet/ChangelogCard.astro | 24 ++++++++- src/components/ChangelogSnippet/README.md | 51 +++++++++++++++++++ src/pages/changelog/[...id].astro | 2 +- 3 files changed, 74 insertions(+), 3 deletions(-) diff --git a/src/components/ChangelogSnippet/ChangelogCard.astro b/src/components/ChangelogSnippet/ChangelogCard.astro index cf0f6242cab..f53563a7a4c 100644 --- a/src/components/ChangelogSnippet/ChangelogCard.astro +++ b/src/components/ChangelogSnippet/ChangelogCard.astro @@ -9,9 +9,11 @@ interface Props { item: ChangelogItem showBorder?: boolean autoExpand?: boolean + showCopyButton?: boolean + disableHover?: boolean } -const { item, showBorder = true, autoExpand = false } = Astro.props +const { item, showBorder = true, autoExpand = false, showCopyButton = true, disableHover = false } = Astro.props // Format the date const formatDate = (dateString: string) => { @@ -30,6 +32,7 @@ const formattedDate = formatDate(item["date-of-release"]) class={clsx(styles.cardWrapper, showBorder && styles.withBorder)} data-expandable="wrapper" data-auto-expand={autoExpand} + data-disable-hover={disableHover} >
@@ -58,7 +61,7 @@ const formattedDate = formatDate(item["date-of-release"])
- + {showCopyButton && }
@@ -332,4 +335,21 @@ const formattedDate = formatDate(item["date-of-release"]) .log-item__list-chains .hidden { display: none; } + + /* Disable hover effects when data-disable-hover is true */ + [data-disable-hover="true"]:hover { + background-color: transparent !important; + } + + [data-disable-hover="true"]:hover .copyButton { + opacity: 0 !important; + } + + [data-disable-hover="true"].withBorder:hover { + background-color: transparent !important; + } + + [data-disable-hover="true"].withBorder:hover .contentFooter { + background: none !important; + } diff --git a/src/components/ChangelogSnippet/README.md b/src/components/ChangelogSnippet/README.md index c594abf7bf2..484eb334cd8 100644 --- a/src/components/ChangelogSnippet/README.md +++ b/src/components/ChangelogSnippet/README.md @@ -40,3 +40,54 @@ import ChangelogSnippet from "@components/ChangelogSnippet/ChangelogSnippet.astr ``` This will display the latest CCIP-related changelog entry with a link to view the full changelog. + +--- + +# ChangelogCard Component + +## What This Component Does + +The ChangelogCard component displays a single changelog item in a card format. It shows the changelog entry's type, date, title, and description with optional expand/collapse functionality. + +## How to Use It + +Import the component and pass a changelog item: + +```astro +import ChangelogCard from "@components/ChangelogSnippet/ChangelogCard.astro" import type {ChangelogItem} from "@components/ChangelogSnippet/types" +const item: ChangelogItem = { + // ... changelog item data +} + + +``` + +## Props + +| Prop | Type | Required | Default | Description | +| ---------------- | ------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------- | +| `item` | ChangelogItem | Yes | - | The changelog item to display | +| `showBorder` | boolean | No | `true` | Whether to show a border around the card | +| `autoExpand` | boolean | No | `false` | Whether to automatically expand the card to full height (skips height restrictions and hides expand/collapse button) | +| `showCopyButton` | boolean | No | `true` | Whether to show the "Copy URL" button | +| `disableHover` | boolean | No | `false` | Whether to disable hover effects (background color change) | + +## Usage Examples + +### Default Card (with border and interactions) + +```astro + +``` + +### Card without border (like on main changelog page) + +```astro + +``` + +### Fully expanded card without interactions (like on individual pages) + +```astro + +``` diff --git a/src/pages/changelog/[...id].astro b/src/pages/changelog/[...id].astro index 073966b1283..728f9cdc588 100644 --- a/src/pages/changelog/[...id].astro +++ b/src/pages/changelog/[...id].astro @@ -66,7 +66,7 @@ const pageTitle = `Changelog and Releases | ${CONFIG.SITE.title}`
- +
From ce7d5d072ee36bed4f190d8f41eb863a0d03a1ca Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 19 Nov 2025 14:33:53 -0500 Subject: [PATCH 08/12] add pagination --- src/pages/changelog/[...id].astro | 49 +++++++++++++++++++++---------- 1 file changed, 34 insertions(+), 15 deletions(-) diff --git a/src/pages/changelog/[...id].astro b/src/pages/changelog/[...id].astro index 728f9cdc588..d9dad29635c 100644 --- a/src/pages/changelog/[...id].astro +++ b/src/pages/changelog/[...id].astro @@ -5,7 +5,7 @@ import { getSecret } from "astro:env/server" import { searchClient } from "@algolia/client-search" import { ChangelogItem } from "~/components/ChangelogSnippet/types" import ChangelogCard from "~/components/ChangelogSnippet/ChangelogCard.astro" -import { SvgArrowLeft, SvgArrowLeft2, SvgTaillessArrowLeftSmall, Typography } from "@chainlink/blocks" +import { SvgArrowLeft2, Typography } from "@chainlink/blocks" export async function getStaticPaths() { const appId = getSecret("ALGOLIA_APP_ID") @@ -20,22 +20,41 @@ export async function getStaticPaths() { const client = searchClient(appId, apiKey) try { - // Fetch all changelog items from Algolia - const req = await client.search({ - requests: [ - { - indexName: "Changelog", - hitsPerPage: 1000, // Adjust based on expected total number of changelog items - }, - ], - }) - - console.log(req) - const firstResult = req.results[0] - const logs = "hits" in firstResult ? (firstResult.hits as ChangelogItem[]) : [] + const records: ChangelogItem[] = [] + let currentPage = 0 + let nbPages = 1 + const hitsPerPage = 1000 // Maximum allowed by Algolia + + // Fetch all changelog items from Algolia with pagination + while (currentPage < nbPages) { + const req = await client.search({ + requests: [ + { + indexName: "Changelog", + hitsPerPage, + page: currentPage, + }, + ], + }) + + const firstResult = req.results[0] + + if ("hits" in firstResult) { + // Add hits from current page to records + const hits = firstResult.hits as ChangelogItem[] + records.push(...hits) + + // Update nbPages from the response + if ("nbPages" in firstResult) { + nbPages = firstResult.nbPages as number + } + } + + currentPage++ + } // Generate static paths for each changelog item - return logs.map((log) => ({ + return records.map((log) => ({ params: { id: log.slug }, props: { log }, })) From bf8dc2c9d31e07d6f7a48943042f8a90a6252bdb Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 19 Nov 2025 14:50:48 -0500 Subject: [PATCH 09/12] Update [...id].astro --- src/pages/changelog/[...id].astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/changelog/[...id].astro b/src/pages/changelog/[...id].astro index d9dad29635c..f5e2b5d7eb6 100644 --- a/src/pages/changelog/[...id].astro +++ b/src/pages/changelog/[...id].astro @@ -99,8 +99,8 @@ const pageTitle = `Changelog and Releases | ${CONFIG.SITE.title}` } .changelog-header { - margin-bottom: var(--space-6x); - padding: 0 var(--space-8x); + margin-bottom: var(--space-8x); + padding: 0 var(--space-6x); } .back-link { From 181685eaaea0bc9b3436c277ca36b244027453a9 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 26 Nov 2025 13:30:06 -0500 Subject: [PATCH 10/12] add networks --- .../ChangelogSnippet/ChangelogCard.astro | 40 ++++++++++++++++--- .../ChangelogSnippet/ChangelogCard.module.css | 16 ++++++-- src/pages/changelog/[...id].astro | 9 ++++- src/pages/changelog/index.astro | 15 +++++-- 4 files changed, 67 insertions(+), 13 deletions(-) diff --git a/src/components/ChangelogSnippet/ChangelogCard.astro b/src/components/ChangelogSnippet/ChangelogCard.astro index f53563a7a4c..589bfb6e280 100644 --- a/src/components/ChangelogSnippet/ChangelogCard.astro +++ b/src/components/ChangelogSnippet/ChangelogCard.astro @@ -11,9 +11,17 @@ interface Props { autoExpand?: boolean showCopyButton?: boolean disableHover?: boolean + showNetworksAndTopic?: boolean } -const { item, showBorder = true, autoExpand = false, showCopyButton = true, disableHover = false } = Astro.props +const { + item, + showBorder = true, + autoExpand = false, + showCopyButton = true, + disableHover = false, + showNetworksAndTopic = false, +} = Astro.props // Format the date const formatDate = (dateString: string) => { @@ -47,6 +55,15 @@ const formattedDate = formatDate(item["date-of-release"])
+ { + showNetworksAndTopic && (item.networks || item.topic) && ( +
+ {item.networks &&
} + {item.topic && {item.topic}} +
+ ) + } +
- +
diff --git a/src/pages/changelog/index.astro b/src/pages/changelog/index.astro index 74c1207b4b4..bd5a13d790d 100644 --- a/src/pages/changelog/index.astro +++ b/src/pages/changelog/index.astro @@ -31,7 +31,7 @@ if (appId && apiKey) { const firstResult = req.results[0] const results = "hits" in firstResult ? (firstResult.hits as ChangelogItem[]) : [] - + console.log(results[1]) // logs are returned sorted by created_at DESC logs = results } @@ -45,7 +45,7 @@ if (appId && apiKey) {
- {logs?.map((log) => )} + {logs?.map((log) => )}
@@ -75,13 +75,22 @@ if (appId && apiKey) { margin-bottom: var(--space-16x); } + @media screen and (max-width: 428px) { + .title { + font-size: 2rem !important; + } + } + @media screen and (max-width: 768px) { + .changelog-list { + gap: var(--space-12x); + } .tag { font-size: 12px; margin-bottom: var(--space-3x); } .title { - font-size: 2rem; + font-size: 2.5rem; } .header { margin-bottom: var(--space-10x); From 6ae0d12bf8b9494a1acb1899e4cd8220b0e8b537 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 26 Nov 2025 14:08:09 -0500 Subject: [PATCH 11/12] fix some styling --- .../ChangelogSnippet/ChangelogCard.module.css | 14 ++++++++++++++ src/pages/changelog/[...id].astro | 5 ++--- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/ChangelogSnippet/ChangelogCard.module.css b/src/components/ChangelogSnippet/ChangelogCard.module.css index ca8c73be4ed..631d86ed1b3 100644 --- a/src/components/ChangelogSnippet/ChangelogCard.module.css +++ b/src/components/ChangelogSnippet/ChangelogCard.module.css @@ -27,6 +27,20 @@ } } +/* Disable hover background when disableHover is true */ +.cardWrapper[data-disable-hover="true"]:hover { + background-color: transparent !important; +} + +.cardWrapper.withBorder[data-disable-hover="true"]:hover { + background-color: transparent !important; +} + +/* Remove padding when disableHover is true */ +.cardWrapper[data-disable-hover="true"] .card { + padding: 0 !important; +} + /* Card Container */ .card { display: flex; diff --git a/src/pages/changelog/[...id].astro b/src/pages/changelog/[...id].astro index 16796cc14be..5ce2f8ddd24 100644 --- a/src/pages/changelog/[...id].astro +++ b/src/pages/changelog/[...id].astro @@ -102,12 +102,11 @@ const pageTitle = `Changelog and Releases | ${CONFIG.SITE.title}` max-width: 1264px; width: 100%; margin: 0 auto; - padding: 100px 0; + padding: 100px var(--space-6x); } .changelog-header { - margin-bottom: var(--space-8x); - padding: 0 var(--space-6x); + margin-bottom: var(--space-16x); } .back-link { From 2aa65f83a400cc302b5c9e8a4736f5e6fde40d68 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Wed, 26 Nov 2025 14:09:55 -0500 Subject: [PATCH 12/12] Update README.md --- src/components/ChangelogSnippet/README.md | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/components/ChangelogSnippet/README.md b/src/components/ChangelogSnippet/README.md index 484eb334cd8..eab5afed7c6 100644 --- a/src/components/ChangelogSnippet/README.md +++ b/src/components/ChangelogSnippet/README.md @@ -64,13 +64,14 @@ const item: ChangelogItem = { ## Props -| Prop | Type | Required | Default | Description | -| ---------------- | ------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------- | -| `item` | ChangelogItem | Yes | - | The changelog item to display | -| `showBorder` | boolean | No | `true` | Whether to show a border around the card | -| `autoExpand` | boolean | No | `false` | Whether to automatically expand the card to full height (skips height restrictions and hides expand/collapse button) | -| `showCopyButton` | boolean | No | `true` | Whether to show the "Copy URL" button | -| `disableHover` | boolean | No | `false` | Whether to disable hover effects (background color change) | +| Prop | Type | Required | Default | Description | +| ---------------------- | ------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------- | +| `item` | ChangelogItem | Yes | - | The changelog item to display | +| `showBorder` | boolean | No | `true` | Whether to show a border around the card | +| `autoExpand` | boolean | No | `false` | Whether to automatically expand the card to full height (skips height restrictions and hides expand/collapse button) | +| `showCopyButton` | boolean | No | `true` | Whether to show the "Copy URL" button | +| `disableHover` | boolean | No | `false` | Whether to disable hover effects (background color change and card padding) | +| `showNetworksAndTopic` | boolean | No | `false` | Whether to show the networks icons and topic chip above the title | ## Usage Examples @@ -91,3 +92,9 @@ const item: ChangelogItem = { ```astro ``` + +### Card with networks and topic displayed + +```astro + +```