From f00e204ed8a4b9647b69eb4ed0eb0b2934355e7c Mon Sep 17 00:00:00 2001
From: Colin Lienard <colin.lienard87@gmail.com>
Date: Thu, 16 May 2024 23:15:23 +0200
Subject: [PATCH] feat: highlights

---
 app.vue                                       |   2 +-
 .../{InsightCard.vue => HighlightCard.vue}    |  40 +++-
 components/Layout.vue                         |  41 +---
 components/Navigation.vue                     |  25 +++
 composables/useLanguages.ts                   |   4 -
 composables/useSettings.ts                    |   8 -
 pages/{insights.vue => highlights.vue}        |   9 +-
 pages/index.vue                               | 190 +++++++++++-------
 server/api/{insights.ts => highlights.ts}     |   0
 9 files changed, 176 insertions(+), 143 deletions(-)
 rename components/{InsightCard.vue => HighlightCard.vue} (64%)
 create mode 100644 components/Navigation.vue
 delete mode 100644 composables/useLanguages.ts
 delete mode 100644 composables/useSettings.ts
 rename pages/{insights.vue => highlights.vue} (85%)
 rename server/api/{insights.ts => highlights.ts} (100%)

diff --git a/app.vue b/app.vue
index 814d558..137cec2 100644
--- a/app.vue
+++ b/app.vue
@@ -4,7 +4,7 @@
 			<Title>GitHundred • Top 100 starred GitHub repositories</Title>
 			<Meta
 				name="description"
-				content="Explore the world's top 100 most starred GitHub repositories, from frameworks to languages to learning resources, with an insightful chart."
+				content="Explore the world's top 100 most starred GitHub repositories, from frameworks to languages to learning resources, with a highlight section."
 			/>
 		</Head>
 		<Layout>
diff --git a/components/InsightCard.vue b/components/HighlightCard.vue
similarity index 64%
rename from components/InsightCard.vue
rename to components/HighlightCard.vue
index 1e83249..c832c06 100644
--- a/components/InsightCard.vue
+++ b/components/HighlightCard.vue
@@ -10,19 +10,28 @@ const { card, index } = defineProps<{ card: Card; index: number }>();
 
 const flippedCards = useFlippedCards();
 const flipped = computed(() => flippedCards.value.includes(card.title));
+const isFlipping = ref(false);
+
+watch(flipped, (newFlipped) => {
+	if (!newFlipped) return;
+	isFlipping.value = true;
+	setTimeout(() => {
+		isFlipping.value = false;
+	}, 1000);
+});
 
 const [translateX, translateY, rotate] = (() => {
 	switch (index) {
 		case 0:
-			return ['-1rem', '1rem', '-4deg'];
+			return ['1rem', '1rem', '4deg'];
 		case 1:
-			return ['0rem', '2rem', '2deg'];
+			return ['0', '1rem', '2deg'];
 		case 2:
-			return ['0rem', '0rem', '-2deg'];
+			return ['0', '0', '-2deg'];
 		case 3:
 			return ['1rem', '-2rem', '1deg'];
 		case 4:
-			return ['2rem', '2rem', '4deg'];
+			return ['1rem', '0', '-2deg'];
 		case 5:
 		default:
 			return ['1rem', '-2rem', '-6deg'];
@@ -32,12 +41,15 @@ const [translateX, translateY, rotate] = (() => {
 
 <template>
 	<li
-		class="[perspective:1000px] hover:z-10"
-		:style="{ transform: `translateX(${translateX}) translateY(${translateY}) rotate(${rotate})` }"
+		class="[perspective:1000px]"
+		:style="{
+			transform: `translateX(${translateX}) translateY(${translateY}) rotate(${rotate})`,
+			zIndex: isFlipping ? 10 : 0,
+		}"
 		@click="!flipped && flippedCards.value.push(card.title)"
 	>
 		<div
-			:class="`card ${flipped && 'flipped'} relative h-96 w-64 cursor-pointer rounded-lg border border-solid border-slate-200 bg-slate-50 text-center shadow-lg transition-all [transform-style:preserve-3d] *:absolute *:flex *:h-full *:w-full *:flex-col *:items-center *:justify-center *:gap-2 *:p-10 *:[backface-visibility:hidden]`"
+			:class="`card ${flipped && 'flipped'} relative h-96 w-64 cursor-pointer rounded-lg border border-solid border-slate-200 bg-slate-50 text-center transition-all [transform-style:preserve-3d] *:absolute *:flex *:h-full *:w-full *:flex-col *:items-center *:justify-center *:gap-2 *:p-10 *:[backface-visibility:hidden]`"
 			@click="!flipped && flippedCards.value.push(card.title)"
 		>
 			<div>
@@ -55,11 +67,18 @@ const [translateX, translateY, rotate] = (() => {
 </template>
 
 <style scoped>
+.card {
+	--shadow-color: rgba(100, 116, 139, 0.2);
+	--shadow--blur: 0.5rem;
+	box-shadow: 0.1rem 0.1rem var(--shadow--blur) var(--shadow-color);
+}
+
 .card:hover {
-	transform: scale(1.05);
+	transform: scale(1.02);
 }
 
 .card.flipped {
+	box-shadow: -0.1rem 0.1rem var(--shadow--blur) var(--shadow-color);
 	transform: rotateY(180deg);
 	animation: flip 1s cubic-bezier(0.6, 0, 0.8, 1);
 	cursor: default;
@@ -82,18 +101,21 @@ const [translateX, translateY, rotate] = (() => {
 @keyframes flip {
 	0% {
 		transform: scale(1) rotateY(0deg);
+		box-shadow: 0.1rem 0.1rem var(--shadow--blur) var(--shadow-color);
 	}
-	20% {
+	40% {
 		transform: scale(1.2) rotateY(140deg);
 	}
 	80% {
 		transform: scale(1.3) rotateY(170deg);
+		box-shadow: -5rem 5rem var(--shadow--blur) var(--shadow-color);
 	}
 	95% {
 		transform: scale(0.9) rotateY(180deg);
 	}
 	100% {
 		transform: scale(1) rotateY(180deg);
+		box-shadow: -0.1rem 0.1rem var(--shadow--blur) var(--shadow-color);
 	}
 }
 
diff --git a/components/Layout.vue b/components/Layout.vue
index cc87891..1a673d9 100644
--- a/components/Layout.vue
+++ b/components/Layout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ArrowPathIcon, CheckIcon, MagnifyingGlassIcon, XMarkIcon } from 'heroicons';
+import { ArrowPathIcon } from 'heroicons';
 
 const buildTime = useState(() => Date.now());
 const duration = Date.now() - buildTime.value;
@@ -7,8 +7,6 @@ const hours = Math.floor(duration / 60 / 60 / 1000);
 const lastUpdated = hours > 0 ? `${hours} hour${hours > 1 ? 's' : ''}` : 'less than an hour';
 
 const pointer = usePointer();
-const settings = useSettings();
-const languages = useLanguages();
 
 onMounted(() => {
 	window.addEventListener('mousemove', pointer.mousemove);
@@ -41,7 +39,7 @@ onUnmounted(() => {
 					GitHub
 				</NuxtLink>
 			</header>
-			<main class="flex w-full flex-col items-center *:max-md:px-6">
+			<main class="flex w-full flex-col items-center gap-12 *:max-md:px-6 md:gap-16">
 				<div class="relative flex w-full flex-col items-center gap-6">
 					<h2
 						class="max-w-96 text-center font-serif text-5xl font-semibold md:max-w-2xl md:text-6xl"
@@ -73,40 +71,7 @@ onUnmounted(() => {
 						<p class="text-sm">Last updated {{ lastUpdated }} ago</p>
 					</div>
 				</div>
-				<div class="flex gap-4">
-					<NuxtLink to="/">list</NuxtLink>
-					<NuxtLink to="/insights">insights</NuxtLink>
-				</div>
-				<div
-					class="mt-8 grid w-full grid-cols-[1fr_1fr] gap-2 py-8 [grid-template-areas:'a_a''b_b''c_d'] md:mt-16 md:flex"
-				>
-					<Input
-						v-model="settings.search"
-						placeholder="Search by name"
-						class="w-full [grid-area:a]"
-					>
-						<MagnifyingGlassIcon />
-					</Input>
-					<Select
-						v-model="settings.languages"
-						:options="languages.value"
-						placeholder="Languages"
-						class="w-full [grid-area:b]"
-					/>
-					<Button class="[grid-area:c]" @click="settings.showOwners = !settings.showOwners">
-						<CheckIcon v-if="settings.showOwners" />
-						<XMarkIcon v-else />
-						Show owners
-					</Button>
-					<Button
-						class="[grid-area:d]"
-						@click="settings.showFullDescription = !settings.showFullDescription"
-					>
-						<CheckIcon v-if="settings.showFullDescription" />
-						<XMarkIcon v-else />
-						Show full description
-					</Button>
-				</div>
+				<Navigation />
 				<div class="w-full max-md:overflow-auto">
 					<slot />
 				</div>
diff --git a/components/Navigation.vue b/components/Navigation.vue
new file mode 100644
index 0000000..8368567
--- /dev/null
+++ b/components/Navigation.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { LightBulbIcon, ListBulletIcon } from 'heroicons';
+
+const route = useRoute();
+const isHome = computed(() => route.path === '/');
+</script>
+
+<template>
+	<nav
+		class="relative flex rounded-full border-8 border-solid border-slate-100 bg-slate-200 *:z-10 *:flex *:w-32 *:items-center *:justify-center *:gap-1 *:p-3 *:text-center *:transition-all"
+	>
+		<NuxtLink to="/" :style="{ color: isHome ? 'white' : '' }">
+			<ListBulletIcon class="h-4" />
+			List
+		</NuxtLink>
+		<NuxtLink to="/highlights" :style="{ color: isHome ? '' : 'white' }">
+			<LightBulbIcon class="h-4" />
+			Highlights
+		</NuxtLink>
+		<div
+			class="absolute !z-0 h-full w-32 rounded-full bg-slate-800 transition-all"
+			:style="{ left: isHome ? '0' : '50%' }"
+		/>
+	</nav>
+</template>
diff --git a/composables/useLanguages.ts b/composables/useLanguages.ts
deleted file mode 100644
index e8a0bc2..0000000
--- a/composables/useLanguages.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const useLanguages = defineStore('languages', () => {
-	const value = ref<string[]>([]);
-	return { value };
-});
diff --git a/composables/useSettings.ts b/composables/useSettings.ts
deleted file mode 100644
index 7337584..0000000
--- a/composables/useSettings.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const useSettings = defineStore('settings', () => {
-	return reactive({
-		search: '',
-		languages: [] as string[],
-		showOwners: false,
-		showFullDescription: false,
-	});
-});
diff --git a/pages/insights.vue b/pages/highlights.vue
similarity index 85%
rename from pages/insights.vue
rename to pages/highlights.vue
index 5cb5187..ee04d71 100644
--- a/pages/insights.vue
+++ b/pages/highlights.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { Card } from '~/components/InsightCard.vue';
+import type { Card } from '~/components/HighlightCard.vue';
 
-const { data } = await useFetch('/api/insights');
+const { data } = await useFetch('/api/highlights');
 
 type Entries<T> = {
 	[K in keyof T]: [K, T[K]];
@@ -64,10 +64,9 @@ const flippedCards = useFlippedCards();
 <template>
 	<div class="flex flex-col items-center gap-6">
 		<h3 class="text-xl font-semibold">Across all these repositories...</h3>
-		<ul class="-gap-4 grid w-fit grid-cols-3">
-			<InsightCard v-for="(card, index) of cards" :key="card.title" :card="card" :index="index" />
+		<ul class="flex w-fit grid-cols-3 flex-col gap-8 md:grid md:gap-0">
+			<highlightCard v-for="(card, index) of cards" :key="card.title" :card="card" :index="index" />
 		</ul>
 		<Confetti v-if="flippedCards.value.length === 6" />
-		<button @click="flippedCards.value = []">reset</button>
 	</div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index cc6fbc6..fb84070 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { ArrowUpIcon, StarIcon } from 'heroicons';
+import { ArrowUpIcon, StarIcon, CheckIcon, MagnifyingGlassIcon, XMarkIcon } from 'heroicons';
 
 const { data } = await useFetch('/api/repositories');
 
-const settings = useSettings();
-const languages = useLanguages();
+const settings = reactive({
+	search: '',
+	languages: [] as string[],
+	showOwners: false,
+	showFullDescription: false,
+});
+const languages = ref<string[]>([]);
 const topOfTableRef = ref<HTMLElement>();
 const hasScrolled = ref(false);
 
@@ -69,91 +74,120 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<section class="table w-[64rem] table-fixed">
+	<section class="flex w-full flex-col">
 		<div
-			:class="`sticky top-0 z-10 table-header-group border-solid after:absolute after:inset-0 after:border-b after:border-slate-300 after:transition-shadow after:content-[''] ${hasScrolled && 'after:shadow-[0_1rem_1rem_-1.5rem_#94a3b8]'}`"
+			class="grid w-full grid-cols-[1fr_1fr] gap-2 py-8 [grid-template-areas:'a_a''b_b''c_d'] md:flex"
 		>
-			<div class="relative table-row bg-slate-50 text-slate-500 *:table-cell *:px-4 *:py-6">
-				<div class="w-[8%]">Rank</div>
-				<div class="w-[30%]">Name</div>
-				<div class="w-[12%]">Stars</div>
-				<div class="w-[30%]">Description</div>
-				<div class="w-[12%]">Language</div>
-				<div class="w-[8%]">Age</div>
-			</div>
+			<Input v-model="settings.search" placeholder="Search by name" class="w-full [grid-area:a]">
+				<MagnifyingGlassIcon />
+			</Input>
+			<Select
+				v-model="settings.languages"
+				:options="languages"
+				placeholder="Languages"
+				class="w-full [grid-area:b]"
+			/>
+			<Button class="[grid-area:c]" @click="settings.showOwners = !settings.showOwners">
+				<CheckIcon v-if="settings.showOwners" />
+				<XMarkIcon v-else />
+				Show owners
+			</Button>
+			<Button
+				class="[grid-area:d]"
+				@click="settings.showFullDescription = !settings.showFullDescription"
+			>
+				<CheckIcon v-if="settings.showFullDescription" />
+				<XMarkIcon v-else />
+				Show full description
+			</Button>
 		</div>
-		<div
-			v-if="repositories?.length"
-			class="relative table-row-group"
-			@mouseleave="hoverEffect.opacity = 0"
-		>
-			<div ref="topOfTableRef" class="w-[1200%]" />
+
+		<div class="table w-[64rem] table-fixed">
 			<div
-				class="absolute h-10 w-full bg-white transition-all"
-				:style="{
-					height: `${hoverEffect.height}px`,
-					top: `${hoverEffect.top}px`,
-					opacity: hoverEffect.opacity,
-				}"
-			/>
-			<NuxtLink
-				v-for="repo in repositories"
-				:key="repo.name"
-				:to="repo.url"
-				target="_blank"
-				class="relative table-row cursor-alias *:table-cell *:px-4 *:py-6 *:align-top after:absolute after:inset-0 after:h-[1px] after:content-[''] [&:not(:first-of-type):after]:bg-slate-300"
-				@mouseenter="onHoverEffectMouseEnter"
+				:class="`sticky top-0 z-10 table-header-group border-solid after:absolute after:inset-0 after:border-b after:border-slate-300 after:transition-shadow after:content-[''] ${hasScrolled && 'after:shadow-[0_1rem_1rem_-1.5rem_#94a3b8]'}`"
 			>
-				<div>
-					<div
-						class="relative w-8 text-center after:absolute after:inset-1/2 after:h-8 after:w-8 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:border after:border-solid after:border-slate-300 after:content-['']"
-					>
-						{{ repo.rank }}
-					</div>
+				<div class="relative table-row bg-slate-50 text-slate-500 *:table-cell *:px-4 *:py-6">
+					<div class="w-[8%]">Rank</div>
+					<div class="w-[30%]">Name</div>
+					<div class="w-[12%]">Stars</div>
+					<div class="w-[30%]">Description</div>
+					<div class="w-[12%]">Language</div>
+					<div class="w-[8%]">Age</div>
 				</div>
-				<div>
-					<div class="flex items-center gap-2">
-						<img :src="repo.image" :alt="`GitHub ${repo.ownerName} avatar`" class="h-6 rounded" />
-						<h3>
-							<span v-if="settings.showOwners" class="text-slate-500">{{ repo.ownerName }}/</span>
-							<span>{{ repo.name }}</span>
-						</h3>
+			</div>
+			<div
+				v-if="repositories?.length"
+				class="relative table-row-group"
+				@mouseleave="hoverEffect.opacity = 0"
+			>
+				<div ref="topOfTableRef" class="w-[1200%]" />
+				<div
+					class="absolute h-10 w-full bg-white transition-all"
+					:style="{
+						height: `${hoverEffect.height}px`,
+						top: `${hoverEffect.top}px`,
+						opacity: hoverEffect.opacity,
+					}"
+				/>
+				<NuxtLink
+					v-for="repo in repositories"
+					:key="repo.name"
+					:to="repo.url"
+					target="_blank"
+					class="relative table-row cursor-alias *:table-cell *:px-4 *:py-6 *:align-top after:absolute after:inset-0 after:h-[1px] after:content-[''] [&:not(:first-of-type):after]:bg-slate-300"
+					@mouseenter="onHoverEffectMouseEnter"
+				>
+					<div>
+						<div
+							class="relative w-8 text-center after:absolute after:inset-1/2 after:h-8 after:w-8 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:border after:border-solid after:border-slate-300 after:content-['']"
+						>
+							{{ repo.rank }}
+						</div>
 					</div>
-				</div>
-				<div>
-					<div class="flex items-center gap-1">
-						<StarIcon class="h-4" />
-						<span>{{ repo.stargazerCount.toLocaleString() }}</span>
+					<div>
+						<div class="flex items-center gap-2">
+							<img :src="repo.image" :alt="`GitHub ${repo.ownerName} avatar`" class="h-6 rounded" />
+							<h3>
+								<span v-if="settings.showOwners" class="text-slate-500">{{ repo.ownerName }}/</span>
+								<span>{{ repo.name }}</span>
+							</h3>
+						</div>
 					</div>
-				</div>
-				<div class="text-slate-500">
-					<p v-if="settings.showFullDescription">{{ repo.description }}</p>
-					<p v-else class="overflow-hidden text-ellipsis whitespace-nowrap">
-						{{ repo.description }}
-					</p>
-				</div>
-				<div>
-					<div v-if="repo.language" class="flex items-center gap-1">
-						<div class="h-2 w-2 rounded-full" :style="{ backgroundColor: repo.language.color }" />
-						{{ repo.language?.name }}
+					<div>
+						<div class="flex items-center gap-1">
+							<StarIcon class="h-4" />
+							<span>{{ repo.stargazerCount.toLocaleString() }}</span>
+						</div>
 					</div>
-					<span v-else>-</span>
-				</div>
-				<div>{{ formatDuration(repo.age) }}</div>
-			</NuxtLink>
+					<div class="text-slate-500">
+						<p v-if="settings.showFullDescription">{{ repo.description }}</p>
+						<p v-else class="overflow-hidden text-ellipsis whitespace-nowrap">
+							{{ repo.description }}
+						</p>
+					</div>
+					<div>
+						<div v-if="repo.language" class="flex items-center gap-1">
+							<div class="h-2 w-2 rounded-full" :style="{ backgroundColor: repo.language.color }" />
+							{{ repo.language?.name }}
+						</div>
+						<span v-else>-</span>
+					</div>
+					<div>{{ formatDuration(repo.age) }}</div>
+				</NuxtLink>
+			</div>
+			<div v-else class="text-nowrap px-4 pt-8 text-slate-500">No results for this search.</div>
+			<Teleport to="body">
+				<Transition>
+					<button
+						v-if="hasScrolled"
+						class="fixed bottom-4 right-4 z-50 rounded-full bg-slate-50 p-4"
+						@click="onClickScrollUp"
+					>
+						<ArrowUpIcon class="h-4" />
+					</button>
+				</Transition>
+			</Teleport>
 		</div>
-		<div v-else class="text-nowrap px-4 pt-8 text-slate-500">No results for this search.</div>
-		<Teleport to="body">
-			<Transition>
-				<button
-					v-if="hasScrolled"
-					class="fixed bottom-4 right-4 z-50 rounded-full bg-slate-50 p-4"
-					@click="onClickScrollUp"
-				>
-					<ArrowUpIcon class="h-4" />
-				</button>
-			</Transition>
-		</Teleport>
 	</section>
 </template>
 
diff --git a/server/api/insights.ts b/server/api/highlights.ts
similarity index 100%
rename from server/api/insights.ts
rename to server/api/highlights.ts