#183 show file size, links, last_modified_at

modules/desktop/package.json

@@ -76,6 +76,7 @@
 		"axios": "^1.3.2",
 		"bcryptjs": "^2.4.3",
 		"buffer": "^6.0.3",
+		"dayjs": "^1.11.7",
 		"electron-context-menu": "^3.6.1",
 		"electron-log": "^4.4.8",
 		"electron-serve": "^1.1.0",

modules/desktop/src/routes/packages/[slug]/+page.svelte

@@ -75,7 +75,9 @@
 			<Tabs class="bg-black" {tabs} />
 		</div>
 		<div class="w-1/3">
+			{#if pkg}
 				<PackageMetas {pkg} />
+			{/if}
 		</div>
 	</section>
 	<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png">SNIPPETS</PageHeader>

modules/ui/src/PackageMetas/PackageMetas.svelte

@@ -1,87 +1,98 @@
 <script lang="ts">
 	import type { Package } from '../types';
+	import dayjs from 'dayjs';
+	import relativeTime from 'dayjs/plugin/relativeTime';
+
+	dayjs.extend(relativeTime);
 
 	export let pkg: Package;
-	const data = {
-		last_modified: new Date(), // convert this to time ago
-		license: 'MIT',
-		byte_size: 22700000,
-		homepage_url: 'homepage.org',
-		documentation_url: 'https://docs.org',
-		repo_url: 'https://github.orm/owner/repo',
-		contributors: [
-			{
-				login: 'optimus_prime',
-				avatar_url: '',
-				owner: true
-			},
-			{
-				login: 'batman_suparman',
-				avatar_url: '',
-				owner: false
+
+	const computeFileSize = (bytes: number): string => {
+		let n: number = bytes;
+		let unit = 'bytes';
+		let divisor = 1;
+
+		if (n > 1024 ** 3) {
+			unit = 'GB';
+			divisor = 1024 ** 3;
+		} else if (n > 1024 ** 2) {
+			unit = 'MB';
+			divisor = 1024 ** 2;
+		} else if (n > 1024) {
+			unit = 'KB';
+			divisor = 1024;
 		}
-		],
-		categories: [
-			{
-				name: 'utility'
-			},
-			{
-				name: 'design'
-			},
-			{
-				name: 'gaming'
-			}
-		]
+
+		return `${(n / divisor).toFixed(2)} ${unit}`;
 	};
 </script>
 
 <section class="bg-black">
 	<h1 class="border border-gray p-4 text-primary">METADATA</h1>
 	<ul class="border border-t-0 border-gray p-4">
+		{#if pkg?.bottles}
 			<li class="border border-gray p-4">
 				<i class="icon-calendar" />
-			<span class="ml-4">{data.last_modified}</span>
+				<span class="ml-4">{dayjs().to(dayjs(pkg?.bottles[0].last_modified_at))}</span>
 			</li>
+		{/if}
+		{#if pkg?.license}
 			<li class="border border-gray p-4">
 				<i class="icon-calendar" />
-			<span class="ml-4">{data.license}</span>
+				<span class="ml-4">{pkg.license}</span>
 			</li>
+		{/if}
+		{#if pkg?.bottles}
 			<li class="border border-gray p-4">
 				<i class="icon-calendar" />
-			<span class="ml-4">{data.byte_size}</span>
+				<span class="ml-4">{computeFileSize(pkg?.bottles[0].bytes)}</span>
 			</li>
+		{/if}
 	</ul>
 	<h1 class="border border-t-0 border-gray p-4 text-primary">HOMEPAGE</h1>
 	<ul class="border border-t-0 border-gray p-4">
 		<li class="border border-gray p-4">
 			<i class="icon-calendar" />
+			<a target="_blank" rel="noreferrer" href={pkg.homepage}>
 				<span class="ml-4">{pkg.homepage}</span>
+			</a>
 		</li>
 	</ul>
+	{#if pkg.documentation_url}
 		<h1 class="border border-t-0 border-gray p-4 text-primary">DOCUMENTATION</h1>
 		<ul class="border border-t-0 border-gray p-4">
 			<li class="border border-gray p-4">
 				<i class="icon-calendar" />
-			<span class="ml-4">{data.documentation_url}</span>
+				<span class="ml-4">{pkg.documentation_url}</span>
+				<a target="_blank" rel="noreferrer" href={pkg.documentation_url}>
+					<span class="ml-4">{pkg.documentation_url}</span>
+				</a>
 			</li>
 		</ul>
+	{/if}
+	{#if pkg.github}
 		<h1 class="border border-t-0 border-gray p-4 text-primary">GITHUB REPOSITORY</h1>
 		<ul class="border border-t-0 border-gray p-4">
 			<li class="border border-gray p-4">
 				<i class="icon-calendar" />
+				<a target="_blank" rel="noreferrer" href={`https://github.com/${pkg.github}`}>
 					<span class="ml-4">{pkg.github}</span>
+				</a>
 			</li>
 		</ul>
+	{/if}
 	{#if pkg.contributors}
 		<h1 class="border border-t-0 border-gray p-4 text-primary">CONTRIBUTORS</h1>
 		<ul class="border border-t-0 border-gray p-4">
 			{#each pkg.contributors as contributor}
+				<a href={`https://github.com/${contributor.login}`} rel="noreferrer" target="_blank">
 					<li class="flex items-center border border-gray p-4">
 						<figure class="h-5 w-5 bg-gray">
 							<img src={contributor.avatar_url} alt={contributor.login} />
 						</figure>
 						<span class="ml-4">{contributor.login}</span>
 					</li>
+				</a>
 			{/each}
 		</ul>
 	{/if}

modules/ui/src/Tabs/Tabs.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Tab } from '../types';
-	import { onMount, afterUpdate } from 'svelte';
+	import { afterUpdate } from 'svelte';
 
 	let clazz = '';
 

modules/ui/src/types.ts

@@ -60,6 +60,8 @@ export type Bottle = {
 	platform: string;
 	arch: string;
 	version: string;
+	bytes: number;
+	last_modified_at?: Date | string;
 };
 
 export type Tab = {

pnpm-lock.yaml

@@ -30,6 +30,7 @@ importers:
       buffer: ^6.0.3
       concurrently: ^7.6.0
       cross-env: ^7.0.3
+      dayjs: ^1.11.7
       electron: 22.1.0
       electron-builder: ^23.6.0
       electron-context-menu: ^3.6.1
@@ -72,6 +73,7 @@ importers:
       axios: 1.3.2
       bcryptjs: 2.4.3
       buffer: 6.0.3
+      dayjs: 1.11.7
       electron-context-menu: 3.6.1
       electron-log: 4.4.8
       electron-serve: 1.1.0
@@ -6283,6 +6285,10 @@ packages:
       time-zone: 1.0.0
     dev: true
 
+  /dayjs/1.11.7:
+    resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
+    dev: false
+
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies: