Started display of posts

web/src/lib/posts/card.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Post } from "$lib/types";
+	import Time, { dayjs } from "svelte-time";
+	import TagList from "./tag-list.svelte";
+	export let post: Post;
+</script>
+
+<article>
+	<div class="origin">
+		<img src={post.feed.faviconUrl} alt={post.feed.title} />
+		<span>{post.feed.title}</span> |
+		<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>
+
+<style>
+	article {
+		border-radius: 5px;
+		/* box-shadow: 0px 0px 12px 9px rgba(0, 0, 0, 0.28); */
+		border: 1px solid #e0e0e0;
+		padding: 0.5rem;
+	}
+
+	.origin {
+		display: flex;
+		align-items: center;
+		border-top-left-radius: 5px;
+		border-top-right-radius: 5px;
+		gap: 6px;
+	}
+
+	img {
+		width: 20px;
+		height: 20px;
+		margin-right: 0.5rem;
+	}
+
+	h2 {
+		margin: 0.5rem;
+		font-size: 1.3rem;
+	}
+
+	p {
+		margin: 0.5rem;
+	}
+</style>

web/src/lib/posts/list.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Post } from "$lib/types";
+	import Card from "./card.svelte";
+	export let posts: Post[] = [];
+</script>
+
+<h1>Posts</h1>
+
+<ul>
+	{#each posts as post}
+		<li>
+			<Card {post} />
+		</li>
+	{/each}
+</ul>
+
+<style>
+	ul {
+		list-style: none;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+</style>

web/src/lib/posts/tag-list.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	export let tags: string[] = [];
+
+    const nbNonExpandedTags = 5;
+    let isExpanded = false;
+    $: tagsToDisplay = isExpanded ? tags : tags.slice(0, nbNonExpandedTags);
+</script>
+
+<div>
+	{#each tagsToDisplay as tag}
+		<span class="tag">{tag}</span>
+	{/each}
+    {#if tags.length > nbNonExpandedTags}
+        <button on:click={() => isExpanded = !isExpanded}>
+            {isExpanded ? "Show less" : "Show more"}
+        </button>
+    {/if}
+</div>
+
+<style>
+	div {
+		display: flex;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+	.tag {
+		background-color: #4d4c4c;
+		padding: 0.25rem 0.5rem;
+		border-radius: 5px;
+	}
+
+    button {
+        /* border-radius: 5px; */
+        padding: 0.25rem 0.5rem;
+        cursor: pointer;
+    }
+</style>

web/src/lib/stores/post.store.ts

@@ -0,0 +1,24 @@
+// /home/cbihan/Documents/front_stuff/vex/web/src/lib/stores/post.store.js
+import type { Post } from "$lib/types";
+import { writable } from 'svelte/store';
+
+// Initial state
+const initialState: Post[] = [];
+
+// Create the writable store
+export const postStore = writable<Post[]>(initialState);
+
+// Actions
+export const addPost = (post: Post) => {
+    postStore.update((posts) => [...posts, post]);
+};
+
+export const removePost = (postId: string) => {
+    postStore.update((posts) => posts.filter((post) => post.id !== postId));
+};
+
+export const updatePost = (postId: string, updatedPost: Post) => {
+    postStore.update((posts) =>
+        posts.map((post) => (post.id === postId ? updatedPost : post))
+    );
+};

web/src/lib/types.ts

@@ -0,0 +1,2 @@
+export type { Feed } from "./types/feed.type";
+export type { Post } from "./types/post.type";

web/src/lib/types/feed.type.ts

@@ -0,0 +1,7 @@
+export type Feed = {
+	id: string;
+	title: string;
+	url: string;
+	faviconUrl: string;
+	tags: string[];
+}

web/src/lib/types/post.type.ts

@@ -0,0 +1,16 @@
+import type { Feed } from "./feed.type";
+
+export type Post = {
+	id: string;
+	title: string;
+	content: string;
+	link: string;
+	date: Date;
+
+	author?: string;
+	isRead: boolean;
+	isBookmarked: boolean;
+	isIgnored: boolean;
+	isReadLater: boolean;
+	feed: Feed;
+}