From f5a61a6c5b03cc8ecc540cc2440bc9d8787213f9 Mon Sep 17 00:00:00 2001
From: Dan Gibbs <daniel.gibbs@gmail.com>
Date: Fri, 8 May 2026 13:44:34 +0100
Subject: [PATCH 1/2] fix: improve gh component state when empty, move
 container wrapper classes to component

---
 src/components/Block/GithubActivityFeed.astro | 20 +++++++++++++--
 src/components/Block/GithubInsights.astro     | 25 ++++++++++++++++---
 src/pages/index.astro                         |  9 ++-----
 3 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/components/Block/GithubActivityFeed.astro b/src/components/Block/GithubActivityFeed.astro
index 18b72ca..7cf9b9d 100644
--- a/src/components/Block/GithubActivityFeed.astro
+++ b/src/components/Block/GithubActivityFeed.astro
@@ -1,5 +1,11 @@
 ---
 import '@styles/icons.css';
+
+interface Props {
+	containerClass: string;
+}
+
+const { containerClass = '' } = Astro.props;
 ---
 
 <section
@@ -7,6 +13,9 @@ import '@styles/icons.css';
 	x-intersect:once="boot"
 	x-on:x-activity-timeline.document="update($event)"
 	aria-label="GitHub activity timeline"
+	data-container-class={containerClass}
+	class="xat"
+	:class="show ? containerClass : ''"
 >
 	<div class="xat" x-show="show == true" x-cloak>
 		<template x-for="group in timeline">
@@ -51,16 +60,23 @@ import '@styles/icons.css';
 	document.addEventListener('alpine:init', () => {
 		Alpine.data('xat', () => {
 			return {
+				booted: false,
 				show: false,
 				timeline: {},
+				containerClass: '',
+
+				init() {
+					this.containerClass = this.$el.dataset.containerClass || '';
+				},
 
 				boot() {
-					this.show = true;
+					this.booted = true;
 				},
 
 				update(event) {
 					if (event?.detail && typeof event.detail === 'object') {
 						this.timeline = event.detail;
+						this.show = true;
 					} else {
 						this.timeline = {};
 					}
@@ -75,7 +91,7 @@ import '@styles/icons.css';
 		display: flex;
 		flex-direction: column;
 		font-size: small;
-		margin: var(--gap-xxl) 0;
+		margin-bottom: var(--gap-xxl);
 	}
 
 	.xat-group {
diff --git a/src/components/Block/GithubInsights.astro b/src/components/Block/GithubInsights.astro
index 530576d..4d56f97 100644
--- a/src/components/Block/GithubInsights.astro
+++ b/src/components/Block/GithubInsights.astro
@@ -1,10 +1,21 @@
 ---
 import { __ } from '@i18n/utils';
 import '@styles/vendor/github-language-colours.css';
+
+interface Props {
+	containerClass: string;
+}
+
+const { containerClass = '' } = Astro.props;
 ---
 
-<x-in x-data="xin" x-intersect:once="boot" x-on:x-insights.document="update($event)">
-	<div class="xin" x-show="show == true" x-cloak>
+<x-in
+	x-data="xin"
+	x-intersect:once="boot"
+	x-on:x-insights.document="update($event)"
+	data-container-class={containerClass}
+>
+	<div class="xin" :class="show ? containerClass : ''" x-show="show == true" x-cloak>
 		<section class="xin-panel">
 			<h3>{__('component.insights.heading.popularity')}</h3>
 
@@ -69,6 +80,7 @@ import '@styles/vendor/github-language-colours.css';
 	document.addEventListener('alpine:init', () => {
 		Alpine.data('xin', () => {
 			return {
+				booted: false,
 				show: false,
 				loading: true,
 				popularity: [],
@@ -88,7 +100,7 @@ import '@styles/vendor/github-language-colours.css';
 				languageColorCache: {},
 
 				boot() {
-					this.show = true;
+					this.booted = true;
 				},
 
 				get pieGradient() {
@@ -114,6 +126,7 @@ import '@styles/vendor/github-language-colours.css';
 				},
 
 				update(event) {
+					this.show = true;
 					this.loading = false;
 
 					if (!(event?.detail && typeof event.detail === 'object')) {
@@ -141,6 +154,12 @@ import '@styles/vendor/github-language-colours.css';
 					}
 				},
 
+				containerClass: '',
+
+				init() {
+					this.containerClass = this.$el.dataset.containerClass || '';
+				},
+
 				reset() {
 					this.popularity = [];
 					this.distribution = [];
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1745739..6b1fdf5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -26,13 +26,8 @@ const frontmatter = generateFrontmatter(page, 'Website');
 		</span>
 	</section>
 
-	<div class="container container-feed">
-		<GithubActivityFeed />
-	</div>
-
-	<div class="container">
-		<GithubInsights />
-	</div>
+	<GithubActivityFeed containerClass="container container-feed" />
+	<GithubInsights containerClass="container" />
 
 	<div class="container">
 		<TechStack />

From 1b50bbf8a462a9c85d6a9452e866310e4d01b1fa Mon Sep 17 00:00:00 2001
From: Dan Gibbs <daniel.gibbs@gmail.com>
Date: Fri, 8 May 2026 13:47:24 +0100
Subject: [PATCH 2/2] style: remove translate from animations

---
 src/components/Block/GithubActivityFeed.astro | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Block/GithubActivityFeed.astro b/src/components/Block/GithubActivityFeed.astro
index 7cf9b9d..98318a8 100644
--- a/src/components/Block/GithubActivityFeed.astro
+++ b/src/components/Block/GithubActivityFeed.astro
@@ -124,7 +124,7 @@ const { containerClass = '' } = Astro.props;
 		gap: var(--gap-xxs);
 		align-items: center;
 		animation-name: entryIn;
-		animation-duration: 600ms;
+		animation-duration: 500ms;
 		animation-delay: calc(var(--animation-order) * 120ms);
 		animation-fill-mode: both;
 		animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -203,12 +203,10 @@ const { containerClass = '' } = Astro.props;
 	@keyframes entryIn {
 		0% {
 			opacity: 0;
-			transform: translateX(-16px) translateY(-4px);
 		}
 
 		100% {
 			opacity: 1;
-			transform: translateX(0) translateY(0);
 		}
 	}
 </style>