better navbar

src/lib/BlogCard/Meta.svelte

@@ -5,21 +5,38 @@
 	export let isPost: boolean = false;
 </script>
 
-<div class="flex flex-col gap-2 flex-1 {isPost ? "nav:(flex-row gap-4)" : ""}">
+<div class="flex flex-col gap-2 flex-1 {isPost ? 'nav:(flex-row gap-4)' : ''}">
 	{#if post.tags.length > 0}
 		<div class="flex flex-row items-center gap-2">
 			<div class="i-ic:outline-bookmarks text-xl -ml-1" />
 			{#each post.tags as tag}
-				<a href="/blog/tags/{tag.slug}" class="no-underline rounded p-1 {isPost ? "bg-secondary" : "bg-primary"}">{tag.name}</a>
+				<a
+					href="/blog/tags/{tag.slug}"
+					class="no-underline rounded p-1 {isPost
+						? 'bg-secondary'
+						: 'bg-primary'}">{tag.name}</a
+				>
 			{/each}
 		</div>
 	{/if}
 	{#each post.authors as author}
-		<a href="/blog/authors/{author.slug}" class="flex items-center gap-2 no-underline"><div class="i-ic:outline-person text-xl -ml-1" />{author.name}</a>
+		<a
+			href="/blog/authors/{author.slug}"
+			class="flex items-center gap-2 no-underline"
+			><div class="i-ic:outline-person text-xl -ml-1" />
+			{author.name}</a
+		>
 	{/each}
-	<span class="flex items-center gap-2"><div class="i-ic:outline-calendar-month text-xl -ml-1" /> {dayjs
-		(post.published_at)
-		.format("ddd, DD MMM YYYY HH:mm")}</span>
-	<span class="flex items-center gap-2"><div class="i-ic:outline-edit text-2xl -ml-1" /> {post.plaintext.trim().split(/\s+/).length} words</span>
-	<span class="flex items-center gap-2"><div class="i-ic:outline-import-contacts text-xl -ml-1" /> {post.reading_time} minute read</span>
-</div>
+	<span class="flex items-center gap-2"
+		><div class="i-ic:outline-calendar-month text-xl -ml-1" />
+		{dayjs(post.published_at).format("ddd, DD MMM YYYY HH:mm")}</span
+	>
+	<span class="flex items-center gap-2"
+		><div class="i-ic:outline-edit text-2xl -ml-1" />
+		{post.plaintext.trim().split(/\s+/).length} words</span
+	>
+	<span class="flex items-center gap-2"
+		><div class="i-ic:outline-import-contacts text-xl -ml-1" />
+		{post.reading_time} minute read</span
+	>
+</div>

src/lib/BlogCard/PostContent.svelte

@@ -3,6 +3,10 @@
 </script>
 
 <div class="prose flex flex-col text-justify m-auto">
-	<img src={data.post.feature_image} alt="{data.post.title} image" class="rounded">
+	<img
+		src={data.post.feature_image}
+		alt="{data.post.title} image"
+		class="rounded"
+	/>
 	{@html data.post.html}
-</div>
+</div>

src/lib/BlogCard/PostOuter.svelte

@@ -3,10 +3,15 @@
 	export let isPost: boolean = false;
 </script>
 
-<div class="flex flex-col gap-4 p-4 rounded {isPost ? "" : "w-110 bg-secondary"}">
+<div
+	class="flex flex-col gap-4 p-4 rounded {isPost ? '' : 'w-110 bg-secondary'}"
+>
 	<slot />
 
 	{#if url}
-		<a href={url} class="text-center">View on Ghost</a>
+		<a
+			href={url}
+			class="text-center">View on Ghost</a
+		>
 	{/if}
-</div>
+</div>

src/lib/BlogCard/PostsContainer.svelte

@@ -1,3 +1,3 @@
 <div class="flex flex-row flex-wrap gap-4">
 	<slot />
-</div>
+</div>

src/lib/BlogCard/ReadMore.svelte

@@ -3,4 +3,4 @@
 </script>
 
 <span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
-<a href="/blog/{post.slug}">Read more...</a>
+<a href="/blog/{post.slug}">Read more...</a>

src/lib/BlogCard/SingleWordLists.svelte

@@ -3,9 +3,11 @@
 	export let name: string;
 </script>
 
-
 <div class="flex flex-col gap-4">
 	{#each items as item}
-		<a href="/blog/{name}/{item.slug}" class="bg-secondary sm:w-md p-2 rounded no-underline">{item.name}</a>
+		<a
+			href="/blog/{name}/{item.slug}"
+			class="bg-secondary sm:w-md p-2 rounded no-underline">{item.name}</a
+		>
 	{/each}
-</div>
+</div>

src/lib/BlogCard/Title.svelte

@@ -5,10 +5,17 @@
 
 {#if !isPost}
 	{#if post.feature_image}
-		<img src={post.feature_image} alt="{post.title} image" class="rounded">
+		<img
+			src={post.feature_image}
+			alt="{post.title} image"
+			class="rounded"
+		/>
 	{/if}
-	<a href="/blog/{post.slug}" class="text-text no-underline hover:underline"><span class="text-xl font-bold">{post.title}</span></a>
+	<a
+		href="/blog/{post.slug}"
+		class="text-text no-underline hover:underline"
+		><span class="text-xl font-bold">{post.title}</span></a
+	>
 {:else}
 	<span class="text-xl font-bold">{post.title}</span>
 {/if}
-

src/lib/BlogCard/index.ts

@@ -4,4 +4,4 @@ export { default as Title } from "./Title.svelte";
 export { default as Meta } from "./Meta.svelte";
 export { default as ReadMore } from "./ReadMore.svelte";
 export { default as PostContent } from "./PostContent.svelte";
-export { default as SingleWordLists } from "./SingleWordLists.svelte";
+export { default as SingleWordLists } from "./SingleWordLists.svelte";