add changelog page

Author: tyrelchambers

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"])
 ---
 
-<div class={styles.cardWrapper} data-expandable="wrapper">
+<div class={showBorder ? styles.cardWrapperWithBorder : styles.cardWrapper} data-expandable="wrapper">
   <div class={styles.card} data-expandable="card">
     <div class={styles.header}>
       <div class={styles.metaSection}>
-        <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>
@@ -46,7 +47,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>

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 {

src/components/ChangelogSnippet/ChangelogSnippet.astro

@@ -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>

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
 

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
+}
 ---
 
 <BaseLayout title={formattedContentTitle}>
-  <main></main>
+  <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>