add networks

Author: tyrelchambers

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"])
     </div>
 
     <div class={styles.content} data-expandable="content">
+      {
+        showNetworksAndTopic && (item.networks || item.topic) && (
+          <div class={styles.networksAndTopicSection}>
+            {item.networks && <div set:html={item.networks} />}
+            {item.topic && <span class="prod-chip">{item.topic}</span>}
+          </div>
+        )
+      }
+
       <Typography
         variant="h6"
         style={{
@@ -308,13 +325,12 @@ const formattedDate = formatDate(item["date-of-release"])
   .log-item__list-chains {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-1x);
   }
 
   .log-item__img-chain {
     width: 24px;
     height: 24px;
-    border-radius: 50%;
     object-fit: cover;
   }
 
@@ -324,11 +340,11 @@ const formattedDate = formatDate(item["date-of-release"])
     justify-content: center;
     width: 24px;
     height: 24px;
-    border-radius: 50%;
-    background-color: var(--muted);
+    background-color: var(--gray-950);
     font-size: 10px;
     font-weight: 600;
-    color: var(--color-text-secondary);
+    color: var(--white);
+    border-radius: 3px;
   }
 
   /* Hidden filter elements */
@@ -352,4 +368,16 @@ const formattedDate = formatDate(item["date-of-release"])
   [data-disable-hover="true"].withBorder:hover .contentFooter {
     background: none !important;
   }
+
+  /* Product Chip */
+  .prod-chip {
+    background-color: var(--muted-more);
+    color: var(--mirage);
+    border-radius: 4px;
+    margin-bottom: 0;
+    padding: var(--space-1x) var(--space-2x);
+    font-size: 12px;
+    line-height: 16px;
+    display: inline-block;
+  }
 </style>

src/components/ChangelogSnippet/ChangelogCard.module.css

@@ -14,7 +14,7 @@
   }
 
   & .card {
-    padding: var(--space-6x);
+    padding: var(--space-4x);
   }
 }
 
@@ -99,6 +99,15 @@
   flex: 1;
 }
 
+/* Networks and Topic Section */
+.networksAndTopicSection {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3x);
+  margin-bottom: var(--space-4x);
+  flex-wrap: wrap;
+}
+
 /* Content Footer */
 .contentFooter {
   position: absolute;
@@ -181,8 +190,8 @@
 
 @media screen and (max-width: 768px) {
   .card {
-    padding: var(--space-4x);
-    gap: var(--space-4x);
+    padding: 0 !important;
+    gap: 0;
     flex-direction: column;
   }
 
@@ -220,6 +229,7 @@
 
   .copyButton {
     width: 32px;
+    opacity: 1;
   }
 }
 

src/pages/changelog/[...id].astro

@@ -85,7 +85,14 @@ const pageTitle = `Changelog and Releases | ${CONFIG.SITE.title}`
     </div>
 
     <div class="changelog-content">
-      <ChangelogCard item={log} showBorder={false} autoExpand={true} showCopyButton={false} disableHover={true} />
+      <ChangelogCard
+        showNetworksAndTopic
+        item={log}
+        showBorder={false}
+        autoExpand={true}
+        showCopyButton={false}
+        disableHover={true}
+      />
     </div>
   </main>
 </BaseLayout>

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) {
     </header>
 
     <section class="changelog-list">
-      {logs?.map((log) => <ChangelogCard showBorder={false} item={log} />)}
+      {logs?.map((log) => <ChangelogCard showNetworksAndTopic showBorder={false} item={log} />)}
     </section>
   </main>
 </BaseLayout>
@@ -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);