Restore the blog. Now fully working.

src/lib/blog/+post.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import * as Components from '$lib/blog/components.svelte';
+	export { Components };
+</script>
+
+<div class="blog mt-8 leading-loose text-lg text-gray-700 dark:text-gray-300">
+	<slot />
+</div>
+
+<style uno-safelist>
+	/* I HATE OVERWRITING STYLES  I HATE OVERWRITING STYLES */
+	.blog :global(h1) {
+		@apply text-5xl font-bold;
+	}
+	.blog :global(h2) {
+		@apply text-4xl font-bold;
+	}
+	.blog :global(h3) {
+		@apply text-3xl font-bold;
+	}
+	.blog :global(h4) {
+		@apply text-2xl font-bold;
+	}
+	.blog :global(h5) {
+		@apply text-xl font-bold;
+	}
+	.blog :global(h6) {
+		@apply text-lg font-bold;
+	}
+	.blog :global(p) {
+		@apply text-lg py-2;
+	}
+	.blog :global(a) {
+		@apply text-blue-500;
+	}
+	.blog :global(a:hover) {
+		@apply text-blue-700;
+	}
+	.blog :global(ul) {
+		@apply list-disc list-inside;
+	}
+	.blog :global(ol) {
+		@apply list-decimal list-inside display-inline-block;
+	}
+	.blog :global(ul > li) {
+		@apply ml-4;
+	}
+	.blog :global(ol > li > p) {
+		@apply inline;
+	}
+	.blog :global(ol > li) {
+		@apply ml-4;
+	}
+	.blog :global(blockquote) {
+		@apply border-gray-600 pl-4;
+		@apply border-l-4 'dark:border-gray-300';
+	}
+	.blog :global(pre) {
+		@apply overflow-x-auto;
+	}
+	.blog :global(table) {
+		@apply w-full border-collapse;
+	}
+	.blog :global(th) {
+		@apply text-left p-2 border border-gray-600;
+	}
+	.blog :global(td) {
+		@apply p-2 border border-gray-600 'dark:border-gray-700';
+	}
+	.blog :global(hr) {
+		@apply my-4 border-gray-600 'dark:border-gray-700';
+	}
+	.blog :global(img) {
+		@apply w-full;
+	}
+	.blog :global(code) {
+		@apply text-gray-200;
+		background-color: #282a36;
+	}
+	.blog :global(code) {
+		@apply rounded-1 p-2;
+	}
+	.blog :global(kbd) {
+		@apply rounded-1 p-2;
+	}
+	.blog :global(samp) {
+		@apply rounded-1 p-2;
+	}
+	.blog :global(pre) {
+		@apply rounded-1 p-2;
+	}
+	.blog :global(.prose) {
+		@apply prose;
+	}
+	.blog::-webkit-scrollbar {
+		display: none;
+	}
+	.blog {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+	/* Force dark mode as it is ignored. */
+	:global(.dark, blockquote.dark) {
+		@apply dark;
+	}
+</style>

src/lib/blog/codeblock.css

@@ -0,0 +1,122 @@
+/**
+ * Dracula Theme originally by Zeno Rocha [@zenorocha]
+ * https://draculatheme.com/
+ *
+ * Ported for PrismJS by Albert Vallverdu [@byverdu]
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+	background: #282a36;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #6272a4;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.namespace {
+	opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #ff79c6;
+}
+
+.token.boolean,
+.token.number {
+	color: #bd93f9;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #50fa7b;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: #f1fa8c;
+}
+
+.token.keyword {
+	color: #8be9fd;
+}
+
+.token.regex,
+.token.important {
+	color: #ffb86c;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}

src/lib/blog/components.svelte

@@ -0,0 +1,3 @@
+<h1 class="text-5xl">
+	<slot />
+</h1>

src/lib/navi.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import ThemeToggle from '$lib/ThemeToggle.svelte';
     import { fade, fly, slide } from 'svelte/transition';
 
 
@@ -34,7 +33,6 @@
             </div>
         </div>
         <div class="flex-1 justify-center content-center float-right mr-6 my-4 h-7 w-7 md:my-5">
-        <ThemeToggle/> 
         </div>
     </div>
 </div>

src/lib/types.ts

@@ -0,0 +1,10 @@
+export type Categories = 'sveltekit' | 'svelte';
+
+export type Post = {
+	title: string;
+	slug: string;
+	description: string;
+	date: string;
+	categories: Categories[];
+	published: boolean;
+};

src/lib/utils.js

@@ -0,0 +1,19 @@
+export const convertDate = (published) => {
+	const months = {
+		1: 'Jan',
+		2: 'Feb',
+		3: 'Mar',
+		4: 'Apr',
+		5: 'May',
+		6: 'Jun',
+		7: 'Jul',
+		8: 'Aug',
+		9: 'Sep',
+		10: 'Oct',
+		11: 'Nov',
+		12: 'Dec'
+	};
+	const date = published.substring(0, 10);
+	const [year, month, day] = date.split('-');
+	return `${day}-${months[parseInt(month)]}-${year}`;
+};