From 698e4bca67991a8d0761217d2625c776f2e43dc3 Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Sun, 21 Apr 2024 06:48:39 -0400
Subject: [PATCH] BLOOOOOG

---
 src/lib/blog.json                             | 19 ++++++-
 src/lib/components/Blog/ListedPost.svelte     |  3 +-
 .../components/Blog/ScaffoldListedPost.svelte | 10 +++-
 src/routes/+page.svelte                       | 10 ++--
 src/routes/blog/+page.svelte                  | 52 +++++++++++++++----
 5 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/src/lib/blog.json b/src/lib/blog.json
index 6bc46ce..034abaf 100644
--- a/src/lib/blog.json
+++ b/src/lib/blog.json
@@ -1,5 +1,22 @@
 [
 	{ "id": 1, "title": "Hello, World!", "image": "/img/blogtest1.gif" },
 	{ "id": 2, "title": "Hardware", "image": "/img/blogtest2.gif" },
-	{ "id": 3, "title": "Test Post", "image": "/img/blogtest3.gif" }
+	{ "id": 3, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 4, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 5, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 6, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 7, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 8, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 9, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 10, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 11, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 12, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 13, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 14, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 15, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 16, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 17, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 18, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 19, "title": "Test Post", "image": "/img/blogtest3.gif" },
+	{ "id": 20, "title": "Test Post", "image": "/img/blogtest3.gif" }
 ]
diff --git a/src/lib/components/Blog/ListedPost.svelte b/src/lib/components/Blog/ListedPost.svelte
index 2711114..5bc833f 100644
--- a/src/lib/components/Blog/ListedPost.svelte
+++ b/src/lib/components/Blog/ListedPost.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <a
-	in:fade={{ delay: 50 * index }}
+	in:fade|global={{ delay: 50 * index }}
 	href="/blog/{post.id}"
 	class="shadow-lg transition-all focus:-translate-y-1 hover:-translate-y-1"
 >
@@ -18,7 +18,6 @@
         background-size: cover;"
 	>
 		<div class="flex w-full h-full bg-gradient-to-t from-black to-transparent rounded-lg">
-			<!-- <Image style="bg-black rounded-xl" src={post.image} alt="Blog post cover" /> -->
 			<p class="z-10 pb-2 mt-auto ml-2 text-2xl">
 				{post.title}
 			</p>
diff --git a/src/lib/components/Blog/ScaffoldListedPost.svelte b/src/lib/components/Blog/ScaffoldListedPost.svelte
index 2eb84b2..029f4ff 100644
--- a/src/lib/components/Blog/ScaffoldListedPost.svelte
+++ b/src/lib/components/Blog/ScaffoldListedPost.svelte
@@ -1,3 +1,9 @@
-<div class="p-4 rounded-2xl bg-gray-500/10">
-	<div class="mb-3 w-full h-full rounded-xl animate-pulse bg-neutral-200/20"></div>
+<script>
+	import { fade } from 'svelte/transition';
+
+	export let index = 0;
+</script>
+
+<div in:fade|global={{ delay: 50 * index }} class="shadow-lg">
+	<div class="w-full rounded-lg aspect-video bg-gray-500/10"></div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ae2ea63..bc3cf65 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -20,7 +20,7 @@
 <div class="hero w-full h-[calc(100vh-5.125rem)] rounded-lg mx-auto my-auto">
 	<div class="flex p-4 h-full rounded-lg">
 		<div class="my-auto md:w-fit md:mx-auto min-h-max">
-			<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg">
+			<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg shadow-lg">
 				<Image
 					style="mr-2 h-20 w-20 rounded-full md:h-24 md:w-24"
 					src="https://cdn.discordapp.com/avatars/{$page.data.discord.id}/{$page.data.discord
@@ -33,7 +33,7 @@
 			</div>
 
 			<div
-				class="md:w-[42rem] flex place-content-center space-x-2 text-xl p-2 bg-black/75 rounded-lg mt-1"
+				class="md:w-[42rem] flex place-content-center space-x-2 text-xl p-2 bg-black/75 rounded-lg mt-1 shadow-lg"
 			>
 				<a class="flex group" href="https://www.last.fm/user/{config.LASTFM}">
 					<div
@@ -79,7 +79,7 @@
 				</a>
 			</div>
 
-			<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1">
+			<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 shadow-lg">
 				<div class="flex space-x-2.5">
 					<Image
 						style="w-24 h-24"
@@ -99,7 +99,9 @@
 				</div>
 			</div>
 
-			<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 flex justify-center flex-wrap gap-2">
+			<div
+				class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 flex justify-center flex-wrap gap-2 shadow-lg"
+			>
 				<ImgButton href="https://cirroskais.xyz" src="/buttons/cirro.png"></ImgButton>
 				<ImgButton href="https://twitter.com/Porpss1" src="/buttons/rovin.png"></ImgButton>
 				<ImgButton href="https://split.pet" src="/buttons/split.png"></ImgButton>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 9290929..c55358e 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,5 +1,4 @@
 <script>
-	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { page } from '$app/stores';
 	import blog from '$lib/blog.json';
@@ -10,15 +9,30 @@
 	import ScaffoldListedPost from '$lib/components/Blog/ScaffoldListedPost.svelte';
 
 	/**  @type {any[]} */
-	let posts = [];
+	let posts = loadPosts(0);
+	let pages = Math.ceil(blog.length / 12);
 	let selectedPage = writable(0);
 
 	/** @param {number} index */
-	async function loadPosts(index) {
-		posts = blog;
+	function loadPosts(index) {
+		let page = Array.from(blog);
+		page.reverse();
+		page = page.slice(index * 12, (index + 1) * 12);
+
+		while (page.length < 12) {
+			page.push({
+				id: -1,
+				title: '',
+				image: ''
+			});
+		}
+
+		return page;
 	}
 
-	onMount(() => loadPosts(0));
+	selectedPage.subscribe((i) => {
+		posts = loadPosts(i);
+	});
 </script>
 
 <svelte:head>
@@ -29,12 +43,28 @@
 	<div
 		class="grid gap-2 md:grid-cols-2 md:grid-rows-5 lg:grid-cols-3 lg:grid-rows-4 xl:grid-cols-4 xl:grid-rows-3"
 	>
-		{#each posts as post, i}
-			<ListedPost {post} index={i}></ListedPost>
-		{:else}
-			{#each Array(12).fill('') as _}
-				<ScaffoldListedPost></ScaffoldListedPost>
+		{#key posts}
+			{#each posts as post, i}
+				{#if post.id === -1}
+					<ScaffoldListedPost index={i}></ScaffoldListedPost>
+				{:else}
+					<ListedPost {post} index={i}></ListedPost>
+				{/if}
 			{/each}
-		{/each}
+		{/key}
+	</div>
+	<div>
+		<p>{pages} pages</p>
+		<p>page {$selectedPage + 1}</p>
+		<button
+			on:click={() => {
+				$selectedPage -= 1;
+			}}>back</button
+		>
+		<button
+			on:click={() => {
+				$selectedPage += 1;
+			}}>forward</button
+		>
 	</div>
 </div>