better date since format, newscard styling, fix socials

src/lib/components/NewsCard.svelte

@@ -1,38 +1,18 @@
 <script lang="ts">
 	import { type NewsEntry } from '$lib/types/News';
+	import { SinceDate } from '$lib/types/Utils';
 	import SocialButton from './SocialButton.svelte';
 
 	let className: string = '';
 
 	export { className as class };
 	export let post: NewsEntry;
-
-	function formatTime(date: Date): string {
-		const seconds = Math.floor(((new Date() as any) - (date as any)) / 1000);
-		let interval = seconds / 31536000;
-
-		if (interval > 1) return Math.floor(interval) + ' year(s)';
-		interval = seconds / 2592000;
-
-		if (interval > 1) return Math.floor(interval) + ' month(s)';
-		interval = seconds / 86400;
-
-		if (interval > 1) return Math.floor(interval) + ' day(s)';
-		interval = seconds / 3600;
-
-		if (interval > 1) return Math.floor(interval) + ' hour(s)';
-		interval = seconds / 60;
-
-		if (interval > 1) return Math.floor(interval) + ' minute(s)';
-
-		return Math.floor(seconds) + ' second(s)';
-	}
 </script>
 
 {#if post}
 	<a
 		href={post.url}
-		class="relative aspect-video transition-all hover:scale-[102%] hover:cursor-pointer {className} flex"
+		class="relative aspect-video transition-all hover:scale-[102%] hover:cursor-pointer {className} flex font-poppins"
 		target="_blank"
 	>
 		<!-- Background -->
@@ -43,23 +23,23 @@
 
 		<!-- Inner content -->
 		<div class="relative flex w-full h-full p-5 justify-between flex-col">
-			<div class="flex flex-row items-center gap-2">
+			<div class="flex flex-row items-center gap-4">
 				<SocialButton href={post.url} clickDisabled={true} class="w-12 aspect-square" />
-				<div class="gap-2 h-full text-white items-center">
-					<p class="font-bold text-2xl">{post.source}</p>
-					<p class="text-1xl">{formatTime(post.date)} ago</p>
+				<div class="gap-2 text-white">
+					<p class="font-bold text-1xl">{post.source}</p>
+					<p class="text-md">{SinceDate(post.date)}</p>
 				</div>
 			</div>
 
 			<div class="flex flex-col">
 				{#if post.package}
-					<p class="font-bold text-1xl text-blue uppercase">
+					<p class="font-bold text-md hidden sm:flex text-blue uppercase">
 						{post.package}
 					</p>
 				{/if}
 
-				<p class="font-bold text-2xl text-white mb-1">{post.title}</p>
-				<p class="text-1xl text-white">{post.summary}</p>
+				<p class="font-bold text-1xl text-white mb-1 text-center sm:text-start">{post.title}</p>
+				<p class="text-md hidden sm:flex text-white">{post.summary}</p>
 			</div>
 		</div>
 	</a>

src/lib/types/Utils.ts

@@ -0,0 +1,47 @@
+export const SinceDate = function(time: Date) {
+    let time_formats: any = [
+        [60, 'seconds', 1], // 60
+        [120, '1 minute ago', '1 minute from now'], // 60*2
+        [3600, 'minutes', 60], // 60*60, 60
+        [7200, '1 hour ago', '1 hour from now'], // 60*60*2
+        [86400, 'hours', 3600], // 60*60*24, 60*60
+        [172800, 'Yesterday', 'Tomorrow'], // 60*60*24*2
+        [604800, 'days', 86400], // 60*60*24*7, 60*60*24
+        [1209600, 'Last week', 'Next week'], // 60*60*24*7*4*2
+        [2419200, 'weeks', 604800], // 60*60*24*7*4, 60*60*24*7
+        [4838400, 'Last month', 'Next month'], // 60*60*24*7*4*2
+        [29030400, 'months', 2419200], // 60*60*24*7*4*12, 60*60*24*7*4
+        [58060800, 'Last year', 'Next year'], // 60*60*24*7*4*12*2
+        [2903040000, 'years', 29030400], // 60*60*24*7*4*12*100, 60*60*24*7*4*12
+        [5806080000, 'Last century', 'Next century'], // 60*60*24*7*4*12*100*2
+        [58060800000, 'centuries', 2903040000] // 60*60*24*7*4*12*100*20, 60*60*24*7*4*12*100
+    ];
+
+    let seconds = ((new Date() as any) - (time as any)) / 1000,
+        token = 'ago',
+        list_choice = 1;
+
+    if (seconds == 0) {
+        return 'Just now'
+    }
+
+    if (seconds < 0) {
+        seconds = Math.abs(seconds);
+        token = 'from now';
+        list_choice = 2;
+    }
+
+    let i = 0, format;
+
+    while (format = time_formats[i++]) {
+        if (seconds < format[0]) {
+            if (typeof format[2] == 'string')
+                return format[list_choice];
+
+            return Math.floor(seconds / format[2]) + ' ' + format[1] + ' ' + token;
+        }
+    }
+
+    return time;
+};
+

src/routes/+page.svelte

@@ -125,7 +125,7 @@
 						"{Slogans[Math.floor(Math.random() * Slogans.length)]}"
 					</p>
 				</div>
-				<div class="flex justify-center gap-4">
+				<div class="flex justify-center gap-4 flex-wrap">
 					{#each socials as social}
 						<SocialButton href={social} showHoverTop={false} class="w-12" />
 					{/each}
@@ -170,11 +170,8 @@
 			<div
 				class="flex flex-row items-center md:px-20 px-5 gap-10 mb-20 w-full justify-center flex-wrap"
 			>
-				<!-- Show a maximum of 4 items. -->
 				{#each posts as post, i}
-					{#if i < 3}
-						<NewsCard {post} class="w-[30rem]" />
-					{/if}
+					<NewsCard {post} class="w-[30rem]" />
 				{/each}
 			</div>
 		{/if}