Hide duplicate commits from In the Code module

Show scroll arrows on either side of the card list, and hide them below 900px.
Add postcss.config.js to de-nest the nested CSS.
Remove box-shadow from In the News cards.
Add hover effect and sharp corners to In the Code cards.

postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "postcss-nesting": {},
+  },
+};

src/components/NewsSummaryItem.astro

@@ -43,6 +43,7 @@ const dateString = formatShortMDY(date);
 		border-radius: 0;
 		overflow: hidden;
 		position: relative;
+		box-shadow: none;
 	}
 
 	article > a {

src/components/react/GitHubEventCard.module.css

@@ -16,11 +16,14 @@
 	justify-content: space-between;
 	background: #f9f9f9;
 	border: 1px solid #ddd;
-	border-radius: var(--pico-border-radius);
-	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	transition: background 0.3s ease;
 	scroll-snap-align: start;
 	overflow: hidden;
 
+	&:hover {
+		background: rgb(241, 241, 241);
+	}
+
 	img {
 		width: calc(3 * var(--sp2));
 		height: calc(3 * var(--sp2));

src/components/react/GitHubEvents.module.css

@@ -1,7 +1,8 @@
 .github-events-container {
 	position: relative;
 	width: 100%;
-	overflow: hidden;
+	display: flex;
+	align-items: center;
 }
 
 .event-list {
@@ -26,10 +27,10 @@
 }
 
 .scroll-button {
+	--button-size: 2rem;
 	position: absolute;
-	top: 0;
-	width: 2rem;
-	height: 2rem;
+	width: var(--button-size);
+	height: var(--button-size);
 	padding: 0;
 	color: hsla(0, 0%, 10%, .25);
 	transition: color 0.3s ease;
@@ -51,10 +52,14 @@
 	}
 
 	&.left {
-		left: 0;
+		left: calc(var(--button-size) * -1 - var(--pico-grid-column-gap));
 	}
 
 	&.right {
-		right: 0;
+		left: calc(100% + var(--pico-grid-column-gap));
+	}
+
+	@media (max-width: 900px) {
+		display: none;
 	}
 }

src/components/react/GitHubEvents.tsx

@@ -103,23 +103,27 @@ export default function GitHubEvents({
 
 	return (
 		<div className={styles.githubEventsContainer}>
+			{canScrollLeft &&
+				<ScrollButton
+					direction="left"
+					onClick={scrollByPage}
+				/>
+			}
 			<div className={styles.eventList} ref={containerRef}>
-				{events.map((event) => <GitHubEventCard event={event} now={now} />)}
-			</div>
-			<div className={styles.buttonContainer}>
-				{canScrollLeft &&
-					<ScrollButton
-						direction="left"
-						onClick={scrollByPage}
+				{events.map((event) =>
+					<GitHubEventCard
+						key={event.link}
+						event={event}
+						now={now}
 					/>
-				}
-				{canScrollRight &&
-					<ScrollButton
-						direction="right"
-						onClick={scrollByPage}
-					/>
-				}
+				)}
 			</div>
+			{canScrollRight &&
+				<ScrollButton
+					direction="right"
+					onClick={scrollByPage}
+				/>
+			}
 		</div>
 	);
 }

src/components/react/ghEventsAPI.ts

@@ -22,6 +22,7 @@ export async function getRecentEvents(
 	}
 
 	const events = await response.json();
+	const eventKeys = new Set<string>();
 	const filteredEvents: GitHubEvent[] = events
 		.filter((event: any) =>
 			(event.type === "PushEvent" || event.type === "PullRequestEvent")
@@ -58,7 +59,19 @@ export async function getRecentEvents(
 				};
 			}
 		})
-		.flat();
+		.flat()
+		.filter((event: GitHubEvent) => {
+			const key = `${event.repoName}-${event.handle}-${event.message}`;
+
+			if (eventKeys.has(key)) {
+				// we've already seen a newer version of this event, so filter it out
+				return false;
+			}
+
+			eventKeys.add(key);
+
+			return true;
+		});
 
 	return filteredEvents;
 }