Imported timelineItem in the codebase

web/src/lib/feeds/card.svelte

@@ -10,11 +10,11 @@
 
 <article>
 	<div>
-		<img src={feed.faviconUrl} alt={feed.title} />
-		<h3>{feed.title}</h3>
+		<img src={feed.faviconUrl} alt={feed.name} />
+		<h3>{feed.name}</h3>
 	</div>
 	<div>
-		<span>{feed.url}</span>
+		<span>{feed.link}</span>
 	</div>
 	{#if feed.submitter}
 		<div>

web/src/lib/posts/card.svelte

@@ -14,14 +14,16 @@
 >
 	<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>
-				|
+			<img src={post.feed.faviconUrl} alt={post.feed.name} />
+			<span>{post.feed.name}</span> |
+			{#if post.authors?.length}
+				{#each post.authors as author}
+					<div class="author">
+						<QuillPenLine />
+						<span>{author}</span>
+					</div>
+					|
+				{/each}
 			{/if}
 			<Time
 				timestamp={post.date}

web/src/lib/posts/timeline-item.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { twMerge } from "tailwind-merge";
+	import { getContext } from "svelte";
+	import Time, { dayjs } from "svelte-time";
+	import { P } from "flowbite-svelte";
+	import QuillPenLine from "virtual:icons/mingcute/quill-pen-line";
+	import type { Post } from "$lib/types";
+	export let title: string = "";
+	export let date: string = "";
+	export let post: Post;
+	export let svgClass: string =
+		"w-3 h-3 text-primary-600 dark:text-primary-400";
+
+	let order: "default" | "vertical" | "horizontal" | "activity" | "group" =
+		"default";
+	order = getContext("order");
+	const liClasses = {
+		default: "mb-10 ms-4",
+		vertical: "mb-10 ms-6",
+		horizontal: "relative mb-6 sm:mb-0",
+		activity: "mb-10 ms-6",
+		group: "",
+	};
+
+	const divClasses = {
+		default:
+			"absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700",
+		vertical:
+			"flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900",
+		horizontal: "flex items-center",
+		activity:
+			"flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900",
+		group:
+			"p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700",
+	};
+
+	const timeClasses = {
+		default:
+			"mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
+		vertical:
+			"block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
+		horizontal:
+			"block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
+		activity: "mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0",
+		group: "text-lg font-semibold text-gray-900 dark:text-white",
+	};
+
+	let liCls: string = twMerge(liClasses[order], $$props.classLi);
+	let divCls: string = twMerge(divClasses[order], $$props.classDiv);
+	let timeCls: string = twMerge(timeClasses[order], $$props.classTime);
+	const h3Cls = twMerge(
+		order === "vertical"
+			? "flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white"
+			: "text-lg font-semibold text-gray-900 dark:text-white",
+		$$props.classH3,
+	);
+</script>
+
+<li class={liCls}>
+	<div class={divCls} />
+	{#if order !== "default"}
+		<slot name="icon">
+			<svg
+				aria-hidden="true"
+				class={svgClass}
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</slot>
+	{:else if date}
+		<time class={timeCls}>{date}</time>
+	{/if}
+
+	{#if title}
+		<a href={post.link} target="_blank">
+			<h3 class={h3Cls}>
+				{title}
+			</h3>
+		</a>
+	{/if}
+
+	{#if order !== "default"}
+		<div class="font-light text-sm text-slate-500">
+			<span>{post.feed.name}</span> |
+			{#if post.authors?.length}
+				{#each post.authors as author}
+					<div class="author">
+						<QuillPenLine />
+						<span>{author}</span>
+					</div>
+					|
+				{/each}
+			{/if}
+			<Time
+				timestamp={post.date}
+				relative={true}
+				title={dayjs(post.date).locale("en").toString()}
+			/>
+		</div>
+	{/if}
+
+	<slot />
+</li>

web/src/lib/server/api.ts

@@ -33,5 +33,6 @@ export async function getPosts(token?: string) {
 	}
 	const r = await fetch(env.API_URL + '/entries', token ? opts : undefined);
 	const j = await r.json();
-	return j.posts as Post[];
+	console.log(j);
+	return j as Post[];
 }

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

@@ -2,8 +2,8 @@ import type { User } from "./user.type";
 
 export type Feed = {
 	id: string;
-	title: string;
-	url: string;
+	name: string;
+	link: string;
 	faviconUrl: string;
 	tags: string[];
 	submitterId: string;