Blog and tags WIP

ARK-Builders · Nov 22, 2024 · d8b2a2e · d8b2a2e
1 parent 1cb2f04
commit d8b2a2e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 21 deletions.
diff --git a/src/lib/components/Blog.svelte b/src/lib/components/Blog.svelte
@@ -73,7 +73,7 @@
 					<div
 						class="divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y"
 					>
-						{#if post.tags}
+						<!-- {#if post.tags}
 							<div class="py-4 xl:py-8">
 								<h2 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
 									Tags
@@ -84,7 +84,7 @@
 									{/each}
 								</div>
 							</div>
-						{/if}
+						{/if} -->
 						{#if post.next || post.prev}
 							<div class="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8">
 								{#if post.prev}

diff --git a/src/lib/components/Blogs.svelte b/src/lib/components/Blogs.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import Tag from '$lib/components/Tag.svelte'
 	import Title from '$lib/components/Title.svelte'
 	import BlogItem from '$lib/components/elements/BlogItem.svelte'
 	import SearchBox from '$lib/components/SearchBox.svelte'
 	import { page } from '$app/stores'
 	import fuzzySearch from '$utils/search'
 	import { onMount } from 'svelte'
 	import type { Blog } from '$utils/constants'
-	import { base } from '$app/paths'
+	import TagList from '$lib/components/TagList.svelte'
 
 	export let title = ''
 	export let subtitle = ''
@@ -31,26 +30,17 @@
 
 <div class="mx-auto w-full max-w-7xl px-5 xl:px-0">
 	<div class="space-y-2 pb-8 pt-6 md:space-y-5">
-		<div class="flex w-full justify-center">
+		<div class="flex w-full flex-col items-center justify-center gap-5">
 			<Title {title} {subtitle} {h2} />
 
-			<div class="pl-4" class:border-l-2={search}>
+			<div class="w-full">
 				{#if search}
 					<SearchBox />
 				{/if}
 
-				{#if tags.length}
-					<div class="flex flex-wrap">
-						{#each tags as tag}
-							<div class="mr-5">
-								<Tag text={tag.text} size="text-xs" />
-								<p class="-ml-2 text-xs font-semibold uppercase text-gray-600 dark:text-gray-300">
-									{` (${tag.count})`}
-								</p>
-							</div>
-						{/each}
-					</div>
-				{/if}
+				<!-- {#if tags.length}
+					<TagList {tags} />
+				{/if} -->
 			</div>
 		</div>
 	</div>

diff --git a/src/lib/components/SearchBox.svelte b/src/lib/components/SearchBox.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { page } from '$app/stores'
 	import { goto } from '$app/navigation'
 	import { onMount } from 'svelte'

diff --git a/src/lib/components/TagList.svelte b/src/lib/components/TagList.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import Tag from '$lib/components/Tag.svelte'
+
+	export let tags
+</script>
+
+<div class="flex flex-wrap">
+	{#each tags as tag}
+		<div class="flex flex-row gap-1">
+			<Tag text={tag.text} size="text-xs" />
+			<p class="-ml-2 text-xs font-semibold uppercase text-gray-600 dark:text-gray-300">
+				{` (${tag.count})`}
+			</p>
+		</div>
+	{/each}
+</div>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
@@ -3,9 +3,9 @@
 	import Blogs from '$lib/components/Blogs.svelte'
 
 	export let data
-	const posts = data.posts
+	const { posts, tags } = data
 </script>
 
 <Head title="Blog" />
 
-<Blogs title="Blog" {posts} />
+<Blogs title="Blog" {posts} {tags} />