From 27269d2476938358c9a6e15b1b324cf19a82bfca Mon Sep 17 00:00:00 2001
From: Akis <mavrommatisakis@gmail.com>
Date: Tue, 3 Jan 2023 10:47:39 +0200
Subject: [PATCH] changes to blog

---
 src/lib/BlogCard/Meta.svelte                |  5 +++--
 src/lib/BlogCard/PostContent.svelte         |  2 +-
 src/lib/BlogCard/PostOuter.svelte           |  3 ++-
 src/lib/BlogCard/PostsContainer.svelte      |  3 ++-
 src/lib/BlogCard/Title.svelte               |  8 +++++++-
 src/lib/BlogCard/TitleWithBackButton.svelte |  5 -----
 src/lib/BlogCard/index.ts                   |  1 -
 src/routes/blog/+page.svelte                |  2 +-
 src/routes/blog/[title]/+page.svelte        | 10 ++++++----
 9 files changed, 22 insertions(+), 17 deletions(-)
 delete mode 100644 src/lib/BlogCard/TitleWithBackButton.svelte

diff --git a/src/lib/BlogCard/Meta.svelte b/src/lib/BlogCard/Meta.svelte
index e40f770..312ccce 100644
--- a/src/lib/BlogCard/Meta.svelte
+++ b/src/lib/BlogCard/Meta.svelte
@@ -2,14 +2,15 @@
 	import dayjs from "dayjs";
 
 	export let post: any;
+	export let isPost: boolean = false;
 </script>
 
-<div class="flex flex-col md:(flex-row gap-4) gap-2">
+<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-fa6-solid:tags" />
 			{#each post.tags as tag}
-				<a href="/blog/tags/{tag.slug}" class="no-underline bg-primary rounded-2 p-1">{tag.name}</a>
+				<a href="/blog/tags/{tag.slug}" class="no-underline rounded-2 p-1 {isPost ? "bg-secondary" : "bg-primary"}">{tag.name}</a>
 			{/each}
 		</div>
 	{/if}
diff --git a/src/lib/BlogCard/PostContent.svelte b/src/lib/BlogCard/PostContent.svelte
index 3b35913..a661b04 100644
--- a/src/lib/BlogCard/PostContent.svelte
+++ b/src/lib/BlogCard/PostContent.svelte
@@ -2,6 +2,6 @@
 	export let data: any;
 </script>
 
-<div class="prose flex flex-col m-auto">
+<div class="prose flex flex-col text-justify m-auto">
 	{@html data.post.html}
 </div>
\ No newline at end of file
diff --git a/src/lib/BlogCard/PostOuter.svelte b/src/lib/BlogCard/PostOuter.svelte
index 94f563c..20b0653 100644
--- a/src/lib/BlogCard/PostOuter.svelte
+++ b/src/lib/BlogCard/PostOuter.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	export let url: string = "";
+	export let isPost: boolean = false;
 </script>
 
-<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
+<div class="flex flex-col gap-4 p-4 rounded-2 {isPost ? "" : "w-120 bg-secondary"}">
 	<slot />
 
 	{#if url}
diff --git a/src/lib/BlogCard/PostsContainer.svelte b/src/lib/BlogCard/PostsContainer.svelte
index 586d715..deede0b 100644
--- a/src/lib/BlogCard/PostsContainer.svelte
+++ b/src/lib/BlogCard/PostsContainer.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	export let hasMt: boolean = false;
+	export let isHome: boolean = false;
 </script>
 
-<div class="flex flex-col gap-10 {hasMt ? "mt-16" : ""}">
+<div class="flex flex-row flex-wrap gap-10 {hasMt ? "mt-16" : ""} {isHome ? "justify-center" : ""}">
 	<slot />
 </div>
\ No newline at end of file
diff --git a/src/lib/BlogCard/Title.svelte b/src/lib/BlogCard/Title.svelte
index a45dd91..be040cb 100644
--- a/src/lib/BlogCard/Title.svelte
+++ b/src/lib/BlogCard/Title.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
 	export let post: any;
+	export let isPost: boolean = false;
 </script>
 
-<span class="text-xl font-bold">{post.title}</span>
\ No newline at end of file
+{#if !isPost}
+	<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}
+
diff --git a/src/lib/BlogCard/TitleWithBackButton.svelte b/src/lib/BlogCard/TitleWithBackButton.svelte
deleted file mode 100644
index 96b0cdc..0000000
--- a/src/lib/BlogCard/TitleWithBackButton.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts">
-	export let data: any;
-</script>
-
-<span class="text-xl font-bold flex flex-row items-center gap-2"><a href="/blog" class="flex flex-row items-center gap-2"><div class="i-fa6-solid:arrow-left" /> Back</a> - {data.post.title}</span>
\ No newline at end of file
diff --git a/src/lib/BlogCard/index.ts b/src/lib/BlogCard/index.ts
index 2b1c33c..c019b6e 100644
--- a/src/lib/BlogCard/index.ts
+++ b/src/lib/BlogCard/index.ts
@@ -3,6 +3,5 @@ export { default as PostOuter } from "./PostOuter.svelte";
 export { default as Title } from "./Title.svelte";
 export { default as Meta } from "./Meta.svelte";
 export { default as ReadMore } from "./ReadMore.svelte";
-export { default as TitleWithBackButton } from "./TitleWithBackButton.svelte";
 export { default as PostContent } from "./PostContent.svelte";
 export { default as SingleWordLists } from "./SingleWordLists.svelte";
\ No newline at end of file
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index c118c8b..49867d9 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -39,7 +39,7 @@
 		/>
 	</div>
 </Hero>
-<PostsContainer hasMt>
+<PostsContainer hasMt isHome>
 	{#each data.posts as post}
 		<PostOuter>
 			<Title {post} />
diff --git a/src/routes/blog/[title]/+page.svelte b/src/routes/blog/[title]/+page.svelte
index 2233904..139306d 100644
--- a/src/routes/blog/[title]/+page.svelte
+++ b/src/routes/blog/[title]/+page.svelte
@@ -2,15 +2,17 @@
 	import type { PageData } from "./$types";
 	export let data: PageData;
 
-	import { PostOuter, TitleWithBackButton, Meta, PostContent } from "$lib/BlogCard";
+	import { PostOuter, Title, Meta, PostContent } from "$lib/BlogCard";
 </script>
 
 <svelte:head>
 	<title>{data.post.title} | Project Segfault Blog</title>
 </svelte:head>
 
-<PostOuter url={data.post.url}>
-	<TitleWithBackButton {data} />
-	<Meta post={data.post} />
+<PostOuter url={data.post.url} isPost>
+	<div class="text-center mt-4 flex flex-col items-center gap-4">
+		<Title post={data.post} isPost />
+		<Meta post={data.post} isPost />
+	</div>
 	<PostContent {data} />
 </PostOuter>
\ No newline at end of file