Skip to content
12 changes: 7 additions & 5 deletions src/components/ChangelogSnippet/ChangelogCard.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@
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
showBorder?: boolean
}

const { item } = Astro.props
const { item, showBorder = true } = Astro.props

// Format the date
const formatDate = (dateString: string) => {
Expand All @@ -22,14 +24,14 @@ const formatDate = (dateString: string) => {
const formattedDate = formatDate(item["date-of-release"])
---

<div class={styles.cardWrapper} data-expandable="wrapper">
<div class={clsx(styles.cardWrapper, showBorder && styles.withBorder)} data-expandable="wrapper">
<div class={styles.card} data-expandable="card">
<div class={styles.header}>
<div class={styles.metaSection}>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is missing extra info:
image

Do you need them in the algolia Index?

<Typography variant="body-semi">
<Typography variant="body-semi" className={styles.changelogType}>
{item.type}
</Typography>
<Typography variant="body-s" color="muted">
<Typography variant="body-s" color="muted" className={styles.date}>
{formattedDate}
</Typography>
</div>
Expand All @@ -46,7 +48,7 @@ const formattedDate = formatDate(item["date-of-release"])
</Typography>

<div class={styles.descriptionContent}>
{item["text-description"] && <div class="description" set:html={item["text-description"]} />}
{item["text-description"] && <div class={styles.description} set:html={item["text-description"]} />}
</div>
</div>
</div>
Expand Down
51 changes: 38 additions & 13 deletions src/components/ChangelogSnippet/ChangelogCard.module.css
Original file line number Diff line number Diff line change
@@ -1,27 +1,40 @@
/* Card Wrapper */
/* Card Wrapper used in Changelog page */

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mobile responsiveness missing. it should look like this:
image

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is also too much space between the items on mobile. (not sure if it is too much on desktop too)

.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);
}

& .card {
padding: var(--space-6x);
}
}

/* Used on individual pages like CCIP/DataFeeds */
.cardWrapper.withBorder {
border: 1px solid var(--border);

&:hover {
background-color: var(--muted);
}
}

/* Card Container */
.card {
display: flex;
gap: 82px;
padding: var(--space-6x);
}

.cardWrapper.expanded .card {
.cardWrapper.withBorder.expanded .card {
-webkit-mask-image: none;
mask-image: none;
}

.cardWrapper:hover {
background-color: var(--muted);

.cardWrapper.withBorder:hover {
& .contentFooter {
background: linear-gradient(to top, var(--muted) 50%, transparent);
}
Expand Down Expand Up @@ -54,11 +67,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;
}

Expand All @@ -68,7 +81,7 @@

.header {
display: flex;
width: 150px;
width: 160px;
}

.content {
Expand Down Expand Up @@ -119,16 +132,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 {
Expand Down
2 changes: 1 addition & 1 deletion src/components/ChangelogSnippet/ChangelogSnippet.astro
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ if (appId && apiKey) {
Changelog
</Typography>

<a href="https://dev.chain.link/changelog" class={styles.arrow}>
<a href="/changelog" class={styles.arrow}>
<SvgArrowRight2 height={12} width={12} />
</a>
</header>
Expand Down
11 changes: 8 additions & 3 deletions src/components/ChangelogSnippet/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const ProductNavigation = ({ setNavMenuOpen, showMegaMenu, isMegamenuOpen
</NavigationMenu.Link>
</Item>
<Item>
<NavigationMenu.Link className={styles.navLink} href="https://dev.chain.link/changelog">
<NavigationMenu.Link className={styles.navLink} href="/changelog">
Changelog
</NavigationMenu.Link>
</Item>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export function ProductNavigation() {
<a href="https://dev.chain.link/tools" className={styles.productContentLink}>
Tools
</a>
<a href="https://dev.chain.link/changelog" className={styles.productContentLink}>
<a href="/changelog" className={styles.productContentLink}>
Changelog
</a>
<a href="https://dev.chain.link/certification" className={styles.productContentLink}>
Expand Down
94 changes: 94 additions & 0 deletions src/pages/changelog.astro
Original file line number Diff line number Diff line change
@@ -0,0 +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
}
---

<BaseLayout title={formattedContentTitle}>
<main class="wrapper">
<header class="header">
<Typography className="tag">Changelog</Typography>
<Typography variant="h1" className="title">Never miss an update</Typography>
</header>

<section class="changelog-list">
{logs?.map((log) => <ChangelogCard showBorder={false} item={log} />)}
</section>
</main>
</BaseLayout>

<style is:global>
.changelog-list {
display: flex;
flex-direction: column;
gap: 60px;
}
.wrapper {
max-width: 1064px;
width: 100%;
margin: 0 auto;
padding: 100px var(--space-6x);
}

.tag {
font-weight: 500;
letter-spacing: 1.28px;
color: var(--grey-600);
margin-bottom: var(--space-4x);
text-transform: uppercase;
}

.header {
margin-bottom: var(--space-16x);
}

@media screen and (max-width: 768px) {
.tag {
font-size: 12px;
margin-bottom: var(--space-3x);
}
.title {
font-size: 2rem;
}
.header {
margin-bottom: var(--space-10x);
}

.wrapper {
padding: 60px var(--space-6x);
}
}
</style>
Loading