From fae1d2ce13dfcdc704c426585a895e362d50dcd1 Mon Sep 17 00:00:00 2001
From: Akis <mavrommatisakis@gmail.com>
Date: Sun, 1 Jan 2023 10:22:26 +0200
Subject: [PATCH] use components on blog

---
 src/lib/BlogCard/Meta.svelte                  | 24 ++++++++++++
 src/lib/BlogCard/PostContent.svelte           |  7 ++++
 src/lib/BlogCard/PostOuter.svelte             |  3 ++
 src/lib/BlogCard/PostsContainer.svelte        |  7 ++++
 src/lib/BlogCard/ReadMore.svelte              |  6 +++
 src/lib/BlogCard/SingleWordLists.svelte       | 10 +++++
 src/lib/BlogCard/Title.svelte                 |  5 +++
 src/lib/BlogCard/TitleWithBackButton.svelte   |  5 +++
 src/lib/BlogCard/index.ts                     |  8 ++++
 src/routes/blog/+page.svelte                  | 34 ++++------------
 src/routes/blog/[title]/+page.svelte          | 34 ++++++----------
 src/routes/blog/authors/+page.svelte          | 13 ++++---
 src/routes/blog/authors/[author]/+page.svelte | 39 +++++++------------
 src/routes/blog/tags/+page.svelte             | 12 +++---
 src/routes/blog/tags/[tag]/+page.svelte       | 39 +++++++------------
 15 files changed, 135 insertions(+), 111 deletions(-)
 create mode 100644 src/lib/BlogCard/Meta.svelte
 create mode 100644 src/lib/BlogCard/PostContent.svelte
 create mode 100644 src/lib/BlogCard/PostOuter.svelte
 create mode 100644 src/lib/BlogCard/PostsContainer.svelte
 create mode 100644 src/lib/BlogCard/ReadMore.svelte
 create mode 100644 src/lib/BlogCard/SingleWordLists.svelte
 create mode 100644 src/lib/BlogCard/Title.svelte
 create mode 100644 src/lib/BlogCard/TitleWithBackButton.svelte
 create mode 100644 src/lib/BlogCard/index.ts

diff --git a/src/lib/BlogCard/Meta.svelte b/src/lib/BlogCard/Meta.svelte
new file mode 100644
index 0000000..01da437
--- /dev/null
+++ b/src/lib/BlogCard/Meta.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import dayjs from "dayjs";
+
+	export let post: any;
+</script>
+
+<div class="flex flex-col md:(flex-row gap-4) gap-2">
+	{#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">{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-fa6-solid:user" />{author.name}</a>
+	{/each}
+	<span class="flex items-center gap-2"><div class="i-fa6-solid:calendar" /> {dayjs
+		(post.published_at)
+		.format("ddd, DD MMM YYYY HH:mm")}</span>
+	<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {post.plaintext.trim().split(/\s+/).length} words</span>
+	<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {post.reading_time} minute read</span>
+</div>
\ No newline at end of file
diff --git a/src/lib/BlogCard/PostContent.svelte b/src/lib/BlogCard/PostContent.svelte
new file mode 100644
index 0000000..3b35913
--- /dev/null
+++ b/src/lib/BlogCard/PostContent.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let data: any;
+</script>
+
+<div class="prose flex flex-col 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
new file mode 100644
index 0000000..1178810
--- /dev/null
+++ b/src/lib/BlogCard/PostOuter.svelte
@@ -0,0 +1,3 @@
+<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
+	<slot />
+</div>
\ No newline at end of file
diff --git a/src/lib/BlogCard/PostsContainer.svelte b/src/lib/BlogCard/PostsContainer.svelte
new file mode 100644
index 0000000..586d715
--- /dev/null
+++ b/src/lib/BlogCard/PostsContainer.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let hasMt: boolean = false;
+</script>
+
+<div class="flex flex-col gap-10 {hasMt ? "mt-16" : ""}">
+	<slot />
+</div>
\ No newline at end of file
diff --git a/src/lib/BlogCard/ReadMore.svelte b/src/lib/BlogCard/ReadMore.svelte
new file mode 100644
index 0000000..22f10aa
--- /dev/null
+++ b/src/lib/BlogCard/ReadMore.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let post: any;
+</script>
+
+<span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
+<a href="/blog/{post.slug}">Read more...</a>
\ No newline at end of file
diff --git a/src/lib/BlogCard/SingleWordLists.svelte b/src/lib/BlogCard/SingleWordLists.svelte
new file mode 100644
index 0000000..b343f83
--- /dev/null
+++ b/src/lib/BlogCard/SingleWordLists.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let items: any;
+</script>
+
+
+<div class="flex flex-col gap-4">
+	{#each items as item}
+		<a href="/blog/authors/{item.slug}" class="bg-secondary w-fit p-2 rounded-2 no-underline">{item.name}</a>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/src/lib/BlogCard/Title.svelte b/src/lib/BlogCard/Title.svelte
new file mode 100644
index 0000000..a45dd91
--- /dev/null
+++ b/src/lib/BlogCard/Title.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let post: any;
+</script>
+
+<span class="text-xl font-bold">{post.title}</span>
\ No newline at end of file
diff --git a/src/lib/BlogCard/TitleWithBackButton.svelte b/src/lib/BlogCard/TitleWithBackButton.svelte
new file mode 100644
index 0000000..96b0cdc
--- /dev/null
+++ b/src/lib/BlogCard/TitleWithBackButton.svelte
@@ -0,0 +1,5 @@
+<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
new file mode 100644
index 0000000..2b1c33c
--- /dev/null
+++ b/src/lib/BlogCard/index.ts
@@ -0,0 +1,8 @@
+export { default as PostsContainer } from "./PostsContainer.svelte";
+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 5a46f80..374b0ed 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import dayjs from "dayjs";
 	import Hero from "$lib/Hero.svelte";
 	import LinkButton from "$lib/LinkButton.svelte";
 	import type { PageData } from "./$types";
 	export let data: PageData;
+	import { PostsContainer, PostOuter, Title, Meta, ReadMore } from "$lib/BlogCard";
 </script>
 
 <svelte:head>
@@ -34,30 +34,12 @@
 	</div>
 </Hero>
 
-<div class="flex flex-col gap-10 mt-16">
+<PostsContainer hasMt>
 	{#each data.posts as post}
-		<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
-			<span class="text-xl font-bold">{post.title}</span>
-			<div class="flex flex-col md:(flex-row gap-4) gap-2">
-				{#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">{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-fa6-solid:user" />{author.name}</a>
-				{/each}
-				<span class="flex items-center gap-2"><div class="i-fa6-solid:calendar" /> {dayjs
-					(post.published_at)
-					.format("ddd, DD MMM YYYY HH:mm")}</span>
-				<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {post.plaintext.trim().split(/\s+/).length} words</span>
-				<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {post.reading_time} minute read</span>
-			</div>
-			<span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
-			<a href="/blog/{post.slug}">Read more...</a>
-		</div>
+		<PostOuter>
+			<Title {post} />
+			<Meta {post} />
+			<ReadMore {post} />
+		</PostOuter>
 	{/each}
-</div>
\ No newline at end of file
+</PostsContainer>
\ No newline at end of file
diff --git a/src/routes/blog/[title]/+page.svelte b/src/routes/blog/[title]/+page.svelte
index 7c36c99..f3d748c 100644
--- a/src/routes/blog/[title]/+page.svelte
+++ b/src/routes/blog/[title]/+page.svelte
@@ -1,28 +1,16 @@
 <script lang="ts">
-	import dayjs from "dayjs";
 	import type { PageData } from "./$types";
 	export let data: PageData;
+
+	import { PostOuter, TitleWithBackButton, Meta, PostContent } from "$lib/BlogCard";
 </script>
 
-<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
-	<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>
-	<div class="flex flex-col md:(flex-row gap-4) gap-2">
-		{#if data.post.tags.length > 0}
-			<div class="flex flex-row items-center gap-2">
-				<div class="i-fa6-solid:tags" />
-				{#each data.post.tags as tag}
-					<a href="/blog/tags/{tag.slug}" class="no-underline">{tag.name}</a>
-				{/each}
-			</div>
-		{/if}
-		{#each data.post.authors as author}
-			<a href="/blog/authors/{author.slug}" class="flex items-center gap-2 no-underline"><div class="i-fa6-solid:user" />{author.name}</a>
-		{/each}
-		<span class="flex items-center gap-2"><div class="i-fa6-solid:calendar" /> {dayjs
-			(data.post.published_at)
-			.format("ddd, DD MMM YYYY HH:mm")}</span>
-		<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {data.post.plaintext.trim().split(/\s+/).length} words</span>
-		<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {data.post.reading_time} minute read</span>
-	</div>
-	{@html data.post.html}
-</div>
\ No newline at end of file
+<svelte:head>
+	<title>{data.post.title} | Project Segfault Blog</title>
+</svelte:head>
+
+<PostOuter>
+	<TitleWithBackButton {data} />
+	<Meta post={data.post} />
+	<PostContent {data} />
+</PostOuter>
\ No newline at end of file
diff --git a/src/routes/blog/authors/+page.svelte b/src/routes/blog/authors/+page.svelte
index 2e8eed2..2f948a2 100644
--- a/src/routes/blog/authors/+page.svelte
+++ b/src/routes/blog/authors/+page.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
 	import type { PageData } from "./$types";
 	export let data: PageData;
+
+	import { SingleWordLists } from "$lib/BlogCard";
 </script>
 
+<svelte:head>
+	<title>Blog authors | Project Segfault Blog</title>
+</svelte:head>
+
 <h1>Blog authors</h1>
 
-<div class="flex flex-col gap-4">
-	{#each data.authors as author}
-		<a href="/blog/authors/{author.slug}" class="bg-secondary w-fit p-2 rounded-2 no-underline">{author.name}</a>
-	{/each}
-</div>
\ No newline at end of file
+<SingleWordLists items={data.authors} />
+
diff --git a/src/routes/blog/authors/[author]/+page.svelte b/src/routes/blog/authors/[author]/+page.svelte
index b3b83c9..1ba5b88 100644
--- a/src/routes/blog/authors/[author]/+page.svelte
+++ b/src/routes/blog/authors/[author]/+page.svelte
@@ -1,35 +1,22 @@
 <script lang="ts">
-	import dayjs from "dayjs";
 	import type { PageData } from "./$types";
 	export let data: PageData;
+
+	import { PostsContainer, PostOuter, Title, Meta, ReadMore } from "$lib/BlogCard";
 </script>
 
+<svelte:head>
+	<title>Blog author {data.authorName} | Project Segfault Blog</title>
+</svelte:head>
+
 <h1>Blog author {data.authorName}</h1>
 
-<div class="flex flex-col gap-10">
+<PostsContainer>
 	{#each data.posts as post}
-		<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
-			<span class="text-xl font-bold">{post.title}</span>
-			<div class="flex flex-col md:(flex-row gap-4) gap-2">
-				{#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">{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-fa6-solid:user" />{author.name}</a>
-				{/each}
-				<span class="flex items-center gap-2"><div class="i-fa6-solid:calendar" /> {dayjs
-					(post.published_at)
-					.format("ddd, DD MMM YYYY HH:mm")}</span>
-				<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {post.plaintext.trim().split(/\s+/).length} words</span>
-				<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {post.reading_time} minute read</span>
-			</div>
-			<span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
-			<a href="/blog/{post.slug}">Read more...</a>
-		</div>
+		<PostOuter>
+			<Title {post} />
+			<Meta {post} />
+			<ReadMore {post} />
+		</PostOuter>
 	{/each}
-</div>
\ No newline at end of file
+</PostsContainer>
\ No newline at end of file
diff --git a/src/routes/blog/tags/+page.svelte b/src/routes/blog/tags/+page.svelte
index d9e0655..2ef3e5e 100644
--- a/src/routes/blog/tags/+page.svelte
+++ b/src/routes/blog/tags/+page.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import type { PageData } from "./$types";
 	export let data: PageData;
+
+	import { SingleWordLists } from "$lib/BlogCard";
 </script>
 
+<svelte:head>
+	<title>Blog tags | Project Segfault Blog</title>
+</svelte:head>
+
 <h1>Blog tags</h1>
 
-<div class="flex flex-col gap-4">
-	{#each data.tags as tag}
-		<a href="/blog/tags/{tag.slug}" class="bg-secondary w-fit p-2 rounded-2 no-underline">{tag.name}</a>
-	{/each}
-</div>
\ No newline at end of file
+<SingleWordLists items={data.tags} />
\ No newline at end of file
diff --git a/src/routes/blog/tags/[tag]/+page.svelte b/src/routes/blog/tags/[tag]/+page.svelte
index 3938ff7..ed8050d 100644
--- a/src/routes/blog/tags/[tag]/+page.svelte
+++ b/src/routes/blog/tags/[tag]/+page.svelte
@@ -1,35 +1,22 @@
 <script lang="ts">
-	import dayjs from "dayjs";
 	import type { PageData } from "./$types";
 	export let data: PageData;
+
+	import { PostsContainer, PostOuter, Title, Meta, ReadMore } from "$lib/BlogCard";
 </script>
 
+<svelte:head>
+	<title>Blog tag {data.tagName} | Project Segfault Blog</title>
+</svelte:head>
+
 <h1>Blog tag {data.tagName}</h1>
 
-<div class="flex flex-col gap-10">
+<PostsContainer>
 	{#each data.posts as post}
-		<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
-			<span class="text-xl font-bold">{post.title}</span>
-			<div class="flex flex-col md:(flex-row gap-4) gap-2">
-				{#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">{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-fa6-solid:user" />{author.name}</a>
-				{/each}
-				<span class="flex items-center gap-2"><div class="i-fa6-solid:calendar" /> {dayjs
-					(post.published_at)
-					.format("ddd, DD MMM YYYY HH:mm")}</span>
-				<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {post.plaintext.trim().split(/\s+/).length} words</span>
-				<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {post.reading_time} minute read</span>
-			</div>
-			<span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
-			<a href="/blog/{post.slug}">Read more...</a>
-		</div>
+		<PostOuter>
+			<Title {post} />
+			<Meta {post} />
+			<ReadMore {post} />
+		</PostOuter>
 	{/each}
-</div>
\ No newline at end of file
+</PostsContainer>
\ No newline at end of file