Started display of posts

2026-05-28 08:33:53 +00:00 · 2024-05-04 16:35:25 +02:00
parent 1dab30c13b
commit 55ac67b55c
12 changed files with 281 additions and 12 deletions
@@ -13,6 +13,7 @@
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
 				"svelte": "^4.2.7",
 				"svelte-check": "^3.6.0",
+				"svelte-time": "^0.9.0",
 				"tslib": "^2.4.1",
 				"typescript": "^5.0.0",
 				"vite": "^5.0.3"
@@ -963,6 +964,12 @@
 				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
 			}
 		},
+		"node_modules/dayjs": {
+			"version": "1.11.11",
+			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
+			"integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==",
+			"dev": true
+		},
 		"node_modules/debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1826,6 +1833,15 @@
 				}
 			}
 		},
+		"node_modules/svelte-time": {
+			"version": "0.9.0",
+			"resolved": "https://registry.npmjs.org/svelte-time/-/svelte-time-0.9.0.tgz",
+			"integrity": "sha512-XLEflTNZCjJM2ltCJL0NTpN9J2KBZXxupfl9S2sRFx+utSuQXbs3YIM14DIuENsjG1Qn5NtzRb0gviIB7lCMxQ==",
+			"dev": true,
+			"dependencies": {
+				"dayjs": "^1.11.10"
+			}
+		},
 		"node_modules/tiny-glob": {
 			"version": "0.2.9",
 			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -15,6 +15,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
+		"svelte-time": "^0.9.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3"
@@ -1,12 +1,26 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<style>
+		@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');
+	</style>
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+<style>
+	body {
+		font-family: 'Hanken Grotesk', sans-serif;
+		font-optical-sizing: auto;
+		font-weight: 400;
+		font-style: normal;
+	}
+</style>
+
+</html>
@@ -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>
@@ -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>
@@ -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>
@@ -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))
+    );
+};
@@ -0,0 +1,2 @@
+export type { Feed } from "./types/feed.type";
+export type { Post } from "./types/post.type";
@@ -0,0 +1,7 @@
+export type Feed = {
+	id: string;
+	title: string;
+	url: string;
+	faviconUrl: string;
+	tags: string[];
+}
@@ -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;
+}
@@ -0,0 +1,52 @@
+import type { Post } from "$lib/types";
+
+const data: Post[] = [
+	{
+		id: "1",
+		title: "The first post",
+		content: "This is the",
+		link: "https://example.com",
+		date: new Date(),
+		isRead: false,
+		isBookmarked: false,
+		isIgnored: false,
+		isReadLater: false,
+		author: "John Doe",
+		feed: {
+			id: "1",
+			title: "The first feed",
+			url: "https://example.com/feed",
+			faviconUrl: "https://kit.svelte.dev/favicon.png",
+			tags: ["tag1", "tag2"],
+		},
+	},
+	{
+		id: "2",
+		title: "Wine 9.8 Fixes Nearly 20 Year Old Bug For Installing Microsoft Office 97",
+		content: "Wine 9.8 is out today as the newest bi-weekly development release of this open-source software for enjoying Windows games/applications on Linux / Chrome OS, macOS, and other platforms...",
+		link: "https://example.com",
+		date: new Date(),
+		isRead: false,
+		isBookmarked: true,
+		isIgnored: false,
+		isReadLater: false,
+		feed: {
+			id: "2",
+			title: "Phoronix",
+			url: "https://www.phoronix.com",
+			faviconUrl: "https://www.phoronix.com/favicon.ico",
+			// put 50 tags in the array linked with linux world
+			tags: [
+				"linux", "kernel", "gnu", "gnu/linux", "gnu+linux", "gnu linux",
+				"wine", "winehq", "wine-staging", "wine-devel", "winehq-devel", "winehq-staging",
+				"mesa", "mesa3d", "mesa 3d", "mesa-3d", "mesa3d-devel", "mesa3d-staging",
+				"NVK"
+			],
+		},
+	}
+];
+
+export function load() {
+	return { data };
+}
+
@@ -1,2 +1,19 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+	export let data;
+	import List from "$lib/posts/list.svelte";
+</script>
+
+<main>
+	<h1>Welcome to SvelteKit</h1>
+	<p>
+		Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
+	</p>
+
+	<List posts={data.data} />
+</main>
+
+<style>
+	main {
+		margin-left: 10%;
+	}
+</style>