feat: gh component improvements

src/components/Block/GithubActivityFeed.astro

@@ -1,12 +1,21 @@
 ---
 import '@styles/icons.css';
+
+interface Props {
+	containerClass: string;
+}
+
+const { containerClass = '' } = Astro.props;
 ---
 
 <section
 	x-data="xat"
 	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 {
@@ -108,7 +124,7 @@ import '@styles/icons.css';
 		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);
@@ -187,12 +203,10 @@ import '@styles/icons.css';
 	@keyframes entryIn {
 		0% {
 			opacity: 0;
-			transform: translateX(-16px) translateY(-4px);
 		}
 
 		100% {
 			opacity: 1;
-			transform: translateX(0) translateY(0);
 		}
 	}
 </style>

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 = [];

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