yas

src/app.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html,
+body {
+	background-color: #171717;
+	color: white;
+}

src/app.d.ts

@@ -1,10 +1,19 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+interface PostsObject {
+	id: number;
+	title: string;
+	author: string;
+	image: string;
+}
+
 declare global {
 	namespace App {
 		// interface Error {}
 		// interface Locals {}
-		// interface PageData {}
+		interface PageData {
+			posts?: Array<PostsObject>;
+		}
 		// interface PageState {}
 		// interface Platform {}
 	}

src/lib/components/Footer.svelte

@@ -0,0 +1,3 @@
+<div class="shadow-lg bg-gray-500/10 h-full w-full">
+	<p class="text-center py-5 text-white/50">Made with SvelteKit & Tailwind CSS</p>
+</div>

src/lib/components/HeaderComponents/Header.svelte

@@ -0,0 +1,14 @@
+<script>
+	import HeaderLink from './HeaderLink.svelte';
+</script>
+
+<div class="shadow-lg bg-gray-500/10 h-full">
+	<div class="container flex h-full w-full">
+		<a href="/" class="font-bold text-xl my-auto tracking-wider">site name</a>
+		<div class="ml-auto flex space-x-4">
+			<HeaderLink href="/">Home</HeaderLink>
+			<HeaderLink href="/projects">Projects</HeaderLink>
+			<HeaderLink href="/blog">Blog</HeaderLink>
+		</div>
+	</div>
+</div>

src/lib/components/HeaderComponents/HeaderLink.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { page } from '$app/stores';
+
+	/** @type {string} */
+	export let href;
+
+	/** @type {boolean} */
+	let selected = false;
+
+	page.subscribe((pg) => {
+		selected = pg.url.pathname === href;
+	});
+</script>
+
+<a {href} class="my-auto text-lg transition-all {selected && 'font-bold tracking-wider'}">
+	<slot />
+</a>

src/lib/components/blog/ListedPost.svelte

@@ -0,0 +1,15 @@
+<script>
+	export let post = { id: 0, title: '', author: '', image: '' };
+</script>
+
+<a href="/blog/{post.id}">
+	<div class="bg-gray-500/10 p-4 rounded-2xl">
+		<img
+			class="aspect-video h-48 bg-black mx-auto rounded-xl mb-2"
+			src={post.image}
+			alt="Blog post cover"
+		/>
+		<p class="text-2xl">{post.title}</p>
+		<p class="text-white/50">By {post.author}</p>
+	</div>
+</a>

src/lib/components/icons/First.svelte

@@ -0,0 +1,14 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"
+	/>
+</svg>

src/lib/components/icons/Last.svelte

@@ -0,0 +1,14 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
+	/>
+</svg>

src/lib/config.js

@@ -0,0 +1,8 @@
+export default {
+	DISCORD: '000000000000000000',
+	LASTFM: 'lastfm',
+	BLUESKY: 'n',
+	TWITTER: 'dope',
+	FEDIVERSE: 'idfk',
+	NOSTR: 'forgot how that worked'
+};

src/routes/+layout.svelte

@@ -1,14 +1,23 @@
 <script>
 	import '../app.css';
+
+	import { page } from '$app/stores';
+	import { fade } from 'svelte/transition';
+
+	import Header from '$lib/components/HeaderComponents/Header.svelte';
+	import Footer from '$lib/components/Footer.svelte';
 </script>
 
-<div class="h-screen grid grid-cols-16 grid-rows-12">
-	<div class="col-span-8 bg-red-100"></div>
-	<div class="row-span-12 col-span-2 bg-black/50"></div>
-	<div class="col-span-4">
-		<slot />
-	</div>
-	<div class="row-span-12 col-span-2 bg-black/50"></div>
+<div class="w-screen h-[3rem]">
+	<Header></Header>
 </div>
 
-<div class="w-screen bg-blue-100">footer shit</div>
+{#key $page.url}
+	<div in:fade class="container mx-auto py-2 min-h-[calc(100vh-7rem)]">
+		<slot />
+	</div>
+{/key}
+
+<div class="w-screen h-[4rem]">
+	<Footer></Footer>
+</div>

src/routes/+page.svelte

@@ -1 +1 @@
-<h1 class="text-3xl font-bold underline">example page</h1>
+<h1 class="">hello world</h1>

src/routes/blog/+page.server.js

@@ -0,0 +1,23 @@
+const posts = [
+	{ id: 1, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
+	{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
+	{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
+	{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
+	{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
+	{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
+	{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
+	{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
+	{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
+	{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
+	{ id: 3, title: 'Some blog post', author: 'some author', image: '/blogpost.png' }
+];
+
+const totalPages = 66; //Math.ceil(posts.length / 9);
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({}) {
+	return {
+		posts: posts.slice(0, 9),
+		totalPages
+	};
+}

src/routes/blog/+page.svelte

@@ -0,0 +1,78 @@
+<script>
+	import { goto } from '$app/navigation';
+
+	/** @type {import("./$types").PageData} */
+	export let data;
+
+	import { page } from '$app/stores';
+	import ListedPost from '$lib/components/blog/ListedPost.svelte';
+	import First from '$lib/components/icons/First.svelte';
+	import Last from '$lib/components/icons/Last.svelte';
+
+	let currentPage = Number($page.url.hash.slice(1) || '1');
+	if (isNaN(currentPage)) currentPage = 1;
+	if (currentPage > data.totalPages) currentPage = data.totalPages;
+
+	console.log(currentPage);
+</script>
+
+<div class="">
+	<div class="grid grid-cols-3 grid-rows-3 gap-2">
+		{#each data.posts as post}
+			<ListedPost {post}></ListedPost>
+		{/each}
+	</div>
+
+	<div class="flex mt-2">
+		<div class="flex mx-auto space-x-2">
+			<button
+				class="py-2 px-3 bg-gray-500/10 rounded-lg"
+				on:click={() => {
+					goto('#1');
+				}}><First></First></button
+			>
+			<div class="bg-gray-500/10 rounded-lg">
+				{#if data.totalPages === 1}
+					<button class="py-2 px-4 bg-gray-500/30 rounded-lg">1</button>
+				{:else if data.totalPages === 2}
+					<button class="py-2 px-4 {currentPage === 1 && 'bg-gray-500/30 rounded-s-lg'}">1</button>
+					<button class="py-2 px-4 {currentPage === 2 && 'bg-gray-500/30 rounded-e-lg'}">2</button>
+				{:else if data.totalPages > 3}
+					<button class="py-2 px-4 {currentPage === 1 && 'bg-gray-500/30 rounded-s-lg'}">
+						{#if currentPage >= data.totalPages}
+							{currentPage - 2}
+						{:else}
+							{Math.max(1, currentPage - 1)}
+						{/if}
+					</button>
+					<button
+						class="py-2 px-4 {currentPage !== 1 &&
+							currentPage !== data.totalPages &&
+							'bg-gray-500/30'}"
+					>
+						{#if currentPage >= data.totalPages}
+							{currentPage - 1}
+						{:else}
+							{Math.max(2, currentPage)}
+						{/if}
+					</button>
+					<button
+						class="py-2 px-4 {currentPage === data.totalPages && 'bg-gray-500/30 rounded-e-lg'}"
+					>
+						{#if currentPage >= data.totalPages}
+							{currentPage}
+						{:else}
+							{Math.max(3, currentPage + 1)}
+						{/if}
+					</button>
+				{/if}
+			</div>
+			<button
+				class="py-2 px-3 bg-gray-500/10 rounded-lg"
+				on:click={() => {
+					goto('/blog#' + data.totalPages);
+				}}><Last></Last></button
+			>
+		</div>
+	</div>
+</div>

src/routes/projects/+page.svelte

@@ -0,0 +1 @@
+<p>projects</p>

tailwind.config.js

@@ -2,9 +2,19 @@
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
-		extend: {},
+		extend: {
+			container: {
+				center: true
+			}
+		},
 		container: {
-			center: true
+			padding: {
+				DEFAULT: '1rem',
+				sm: '2rem',
+				lg: '4rem',
+				xl: '5rem',
+				'2xl': '6rem'
+			}
 		}
 	},
 	plugins: []