From ee9966d1fbaa9dac42e91e13eb0283cb3b16c4e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Sun, 5 May 2024 13:14:04 +0200
Subject: [PATCH] Post card now is clickable

---
 web/src/app.html              |  2 +-
 web/src/lib/posts/card.svelte | 64 +++++++++++++++++------------------
 web/src/lib/posts/list.svelte | 23 ++++++-------
 web/src/routes/+layout.svelte | 24 ++++++++++++-
 web/src/routes/+page.svelte   | 27 ++-------------
 5 files changed, 70 insertions(+), 70 deletions(-)

diff --git a/web/src/app.html b/web/src/app.html
index 03bd927..1541929 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -16,7 +16,7 @@
 </body>
 <style>
 	body {
-		margin-right: 10%;
+		padding: 40px;
 		font-family: 'Hanken Grotesk', sans-serif;
 		font-optical-sizing: auto;
 		font-weight: 400;
diff --git a/web/src/lib/posts/card.svelte b/web/src/lib/posts/card.svelte
index f5ab67f..5cb3a23 100644
--- a/web/src/lib/posts/card.svelte
+++ b/web/src/lib/posts/card.svelte
@@ -1,46 +1,45 @@
 <script lang="ts">
 	import type { Post } from "$lib/types";
 	import Time, { dayjs } from "svelte-time";
-	import TagList from "./tag-list.svelte";
 	import QuillPenLine from "virtual:icons/mingcute/quill-pen-line";
 	export let post: Post;
 </script>
 
-<article>
-	<div class="origin">
-		<img src={post.feed.faviconUrl} alt={post.feed.title} />
-		<span>{post.feed.title}</span> |
-		{#if post.author}
-			<div class="author">
-				<QuillPenLine />
-				<span>{post.author}</span>
-			</div>
-			|
-		{/if}
-		<Time
-			timestamp={post.date}
-			relative={true}
-			title={dayjs(post.date).locale("en").toString()}
-		/>
-	</div>
-	<content>
-		<h2>{post.title}</h2>
-		<p>{post.content}</p>
-	</content>
-	<!-- <footer>
+<a
+	href={post.link}
+	target="_blank"
+	on:click={() => {
+		console.log("clicked");
+	}}
+>
+	<article>
+		<div class="origin">
+			<img src={post.feed.faviconUrl} alt={post.feed.title} />
+			<span>{post.feed.title}</span> |
+			{#if post.author}
+				<div class="author">
+					<QuillPenLine />
+					<span>{post.author}</span>
+				</div>
+				|
+			{/if}
+			<Time
+				timestamp={post.date}
+				relative={true}
+				title={dayjs(post.date).locale("en").toString()}
+			/>
+		</div>
+		<content>
+			<h2>{post.title}</h2>
+			<p>{post.content}</p>
+		</content>
+		<!-- <footer>
 		<TagList tags={post.feed.tags} />
 	</footer> -->
-</article>
+	</article>
+</a>
 
 <style>
-	article {
-		/* border-radius: 10px;
-		box-shadow: 0px 0px 12px 9px rgba(0, 0, 0, 0.28);
-		border: 1px solid #e0e0e0;
-		padding: 0.7rem;
-		background-color: rgb(220, 220, 220); */
-	}
-
 	.origin {
 		display: flex;
 		align-items: center;
@@ -58,6 +57,7 @@
 	h2 {
 		margin: 0.5rem;
 		font-size: 1.3rem;
+		font-weight: 600;
 	}
 
 	p {
diff --git a/web/src/lib/posts/list.svelte b/web/src/lib/posts/list.svelte
index df1643c..52de904 100644
--- a/web/src/lib/posts/list.svelte
+++ b/web/src/lib/posts/list.svelte
@@ -4,24 +4,23 @@
 	export let posts: Post[] = [];
 </script>
 
-<div>
-	<h1>Posts</h1>
-
-	<ul>
-		{#each posts as post}
-			<li>
-				<Card {post} />
-			</li>
-			<hr>
-		{/each}
-	</ul>
-</div>
+<ul>
+	{#each posts as post, index}
+		<li>
+			<Card {post} />
+		</li>
+		{#if index !== posts.length - 1}
+			<hr />
+		{/if}
+	{/each}
+</ul>
 
 <style>
 	ul {
 		list-style: none;
 		padding: 0;
 		display: flex;
+		gap: 1rem;
 		flex-direction: column;
 	}
 </style>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index f67d7ab..f5637a5 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1 +1,23 @@
-<script>import "../app.pcss";</script><slot></slot>
\ No newline at end of file
+<script>
+	import "../app.pcss";
+
+	import { BottomNav, BottomNavItem } from "flowbite-svelte";
+	import { HomeSolid, UserCircleSolid } from "flowbite-svelte-icons";
+</script>
+
+<slot></slot>
+
+<footer>
+	<BottomNav position="absolute" classInner="grid-cols-2">
+		<BottomNavItem btnName="Posts">
+			<HomeSolid
+				class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+			/>
+		</BottomNavItem>
+		<BottomNavItem btnName="Profile">
+			<UserCircleSolid
+				class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+			/>
+		</BottomNavItem>
+	</BottomNav>
+</footer>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 8c569fd..bd8cd9b 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -6,7 +6,7 @@
 		Skeleton,
 		ImagePlaceholder,
 	} from "flowbite-svelte";
-    import List from "$lib/posts/list.svelte";
+	import List from "$lib/posts/list.svelte";
 	import {
 		HomeSolid,
 		WalletSolid,
@@ -16,33 +16,12 @@
 </script>
 
 <main>
-	<section>
-        <List posts={data.posts} />
-    </section>
-	<footer>
-		<BottomNav position="absolute" classInner="grid-cols-2">
-			<BottomNavItem btnName="Posts">
-				<HomeSolid
-					class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
-				/>
-			</BottomNavItem>
-			<BottomNavItem btnName="Profile">
-				<UserCircleSolid
-					class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
-				/>
-			</BottomNavItem>
-		</BottomNav>
-	</footer>
+	<List posts={data.posts} />
 </main>
 
 <style>
 	main {
 		display: flex;
-	}
-	.sidebar {
-		display: flex;
-		flex-direction: column-reverse;
-		width: 400px;
-		height: 100vh;
+		justify-content: center;
 	}
 </style>