added blog page content

src/app.css

@@ -9,6 +9,11 @@
 	font-size: 17pt;
 }
 
+::selection {
+	background-color: var(--hover-color);
+	color: var(--fg-color);
+}
+
 body {
 	all: unset;
     background: rgb(20,21,25);

src/lib/Blog/Header.svelte

@@ -0,0 +1,12 @@
+<div>
+    <h2>
+        <slot/>
+    </h2>
+</div>
+
+<style>
+    div {
+        padding: 1em;
+        text-align: center;
+    }
+</style>

src/lib/Blog/TableOfContents.svelte

@@ -0,0 +1,22 @@
+<div class="table-of-contents">
+	<h3>Table of Contents</h3>
+	<slot />
+</div>
+
+<style>
+	.table-of-contents {
+		background-color: #141519;
+		padding: 2em;
+		width: 100vw;
+		border-top-left-radius: 2em;
+		border-bottom-left-radius: 2em;
+	}
+
+	.table-of-contents h3 {
+		text-align: center;
+	}
+
+	.table-of-contents li {
+		list-style: none;
+	}
+</style>

src/lib/BlogList.svelte

@@ -1,14 +1,22 @@
+<script lang="ts">
+	type Blog = {
+		title: string,
+		date: string,
+		href: string,
+	};
+
+	export let blogs: Blog[];
+</script>
+
 <div class="blog">
 	<h2>Blog</h2>
 	<div>
-		<a href="/">
-			<div class="blog-title">Poetry is a saner package manager</div>
-			<div class="blog-date">10 Oct 2022</div>
-		</a>
-		<a href="/">
-			<div class="blog-title">Setting up NeoVim for Godot</div>
-			<div class="blog-date">10 Oct 2023</div>
+		{#each blogs as blog}
+		<a href={blog.href}>
+			<div class="blog-title">{blog.title}</div>
+			<div class="blog-date">{blog.date}</div>
 		</a>
+		{/each}
 	</div>
 	<button>View More</button>
 </div>

src/lib/ContentRect.svelte

@@ -0,0 +1,11 @@
+<section class="main-content">
+    <slot />
+</section>
+
+<style>
+	.main-content {
+		background-color: #18191f;
+		margin: 1em;
+		border-radius: 2em;
+	}
+</style>

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script>
 	import BlogList from '../lib/BlogList.svelte';
 	import ProjectList from '../lib/ProjectList.svelte';
+	import ContentRect from '../lib/ContentRect.svelte';
 </script>
 
 <section class="info">
@@ -36,21 +37,24 @@
 	Scroll for more
 </div>
 
-<section class="main-content">
-	<BlogList />
-	<ProjectList />
-</section>
+<ContentRect>
+	<div class="main-content">
+		<BlogList
+			blogs={[
+				{ title: 'Poetry is a saner package manager for python', date: '10 Oct 2022', href: '/' },
+				{ title: 'Setting up NeoVim for Godot', date: '11 Nov 2022', href: '/' }
+			]}
+		/>
+		<ProjectList />
+	</div>
+</ContentRect>
 
 <style>
 	.main-content {
-		background-color: #18191f;
-		margin: 1em;
-		margin-top: 2em;
-		padding-top: 4em;
-		padding-bottom: 4em;
-		border-radius: 2em;
 		display: flex;
 		justify-content: center;
+		padding: 3em 0;
+		margin-top: 1em;
 		gap: 5em;
 	}
 

src/routes/blog/+page.svelte

@@ -0,0 +1,40 @@
+<script>
+	import Header from '../../lib/Blog/Header.svelte';
+	import TableOfContents from '../../lib/Blog/TableOfContents.svelte';
+	import ContentRect from '../../lib/ContentRect.svelte';
+</script>
+
+<Header>Setting up NeoVim for Godot</Header>
+<ContentRect>
+	<div class="content">
+		<TableOfContents>
+			<ul>
+				<li>1. asdfasdfasdfasdf</li>
+				<li>2. asdfasdfasdfasdf</li>
+				<li>3. asdfasdfasdfasdf</li>
+				<li>4. asdfasdfasdfasdf</li>
+			</ul>
+		</TableOfContents>
+		<div class="blog-text">
+			Recently I’ve been using Godot a bit to mess around with game development and I wanted to have
+			autocompletion working with CoC. I looked around and there were no extensions for the Godot
+			LSP. So, to use Godot with NeoVim I just had to connect to their LSP. Setting Up If you have
+			CoC working correctly already, open NeoVim and run :CocConfig, it’ll open the configuration
+			file for your CoC, then just add this to the JSON config: Additional steps You probably want
+			syntax highlighting, for that you have 2 options: you could install the sheerun/vim-polyglot
+			or use habamax/vim-godot (which provides syntax highlighting as well as a set of commands
+			allows you to run scenes through NeoVim). Setting up the editor
+		</div>
+	</div>
+</ContentRect>
+
+<style>
+	.content {
+		display: flex;
+		gap: 2em;
+	}
+
+	.blog-text {
+		padding: 3em;
+	}
+</style>