use components on blog

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>

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>

src/lib/BlogCard/PostOuter.svelte

@@ -0,0 +1,3 @@
+<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
+	<slot />
+</div>

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>

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>

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>

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>

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>

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";

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">
+		<PostOuter>
-			<span class="text-xl font-bold">{post.title}</span>
+			<Title {post} />
-			<div class="flex flex-col md:(flex-row gap-4) gap-2">
+			<Meta {post} />
-				{#if post.tags.length > 0}
+			<ReadMore {post} />
-					<div class="flex flex-row items-center gap-2">
+		</PostOuter>
-						<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>
 	{/each}
-</div>
+</PostsContainer>

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">
+<svelte:head>
-	<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>
+	<title>{data.post.title} | Project Segfault Blog</title>
-	<div class="flex flex-col md:(flex-row gap-4) gap-2">
+</svelte:head>
-		{#if data.post.tags.length > 0}
+
-			<div class="flex flex-row items-center gap-2">
+<PostOuter>
-				<div class="i-fa6-solid:tags" />
+	<TitleWithBackButton {data} />
-				{#each data.post.tags as tag}
+	<Meta post={data.post} />
-					<a href="/blog/tags/{tag.slug}" class="no-underline">{tag.name}</a>
+	<PostContent {data} />
-				{/each}
+</PostOuter>
-			</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>

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">
+<SingleWordLists items={data.authors} />
-	{#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>

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">
+		<PostOuter>
-			<span class="text-xl font-bold">{post.title}</span>
+			<Title {post} />
-			<div class="flex flex-col md:(flex-row gap-4) gap-2">
+			<Meta {post} />
-				{#if post.tags.length > 0}
+			<ReadMore {post} />
-					<div class="flex flex-row items-center gap-2">
+		</PostOuter>
-						<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>
 	{/each}
-</div>
+</PostsContainer>

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">
+<SingleWordLists items={data.tags} />
-	{#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>

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">
+		<PostOuter>
-			<span class="text-xl font-bold">{post.title}</span>
+			<Title {post} />
-			<div class="flex flex-col md:(flex-row gap-4) gap-2">
+			<Meta {post} />
-				{#if post.tags.length > 0}
+			<ReadMore {post} />
-					<div class="flex flex-row items-center gap-2">
+		</PostOuter>
-						<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>
 	{/each}
-</div>
+</PostsContainer>