From e2a08a62dc217a8629cbfd4238ad30826507e77a Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Fri, 10 Feb 2023 09:14:43 +0800
Subject: [PATCH] #183 show file size, links, last_modified_at

---
 modules/desktop/package.json                  |   1 +
 .../src/routes/packages/[slug]/+page.svelte   |   4 +-
 .../ui/src/PackageMetas/PackageMetas.svelte   | 137 ++++++++++--------
 modules/ui/src/Tabs/Tabs.svelte               |   2 +-
 modules/ui/src/types.ts                       |   2 +
 pnpm-lock.yaml                                |   6 +
 6 files changed, 87 insertions(+), 65 deletions(-)

diff --git a/modules/desktop/package.json b/modules/desktop/package.json
index 855be47..1c80466 100644
--- a/modules/desktop/package.json
+++ b/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",
diff --git a/modules/desktop/src/routes/packages/[slug]/+page.svelte b/modules/desktop/src/routes/packages/[slug]/+page.svelte
index 4f9f0e3..9a8a662 100644
--- a/modules/desktop/src/routes/packages/[slug]/+page.svelte
+++ b/modules/desktop/src/routes/packages/[slug]/+page.svelte
@@ -75,7 +75,9 @@
 			<Tabs class="bg-black" {tabs} />
 		</div>
 		<div class="w-1/3">
-			<PackageMetas {pkg} />
+			{#if pkg}
+				<PackageMetas {pkg} />
+			{/if}
 		</div>
 	</section>
 	<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png">SNIPPETS</PageHeader>
diff --git a/modules/ui/src/PackageMetas/PackageMetas.svelte b/modules/ui/src/PackageMetas/PackageMetas.svelte
index 0614238..8b08803 100644
--- a/modules/ui/src/PackageMetas/PackageMetas.svelte
+++ b/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
-			}
-		],
-		categories: [
-			{
-				name: 'utility'
-			},
-			{
-				name: 'design'
-			},
-			{
-				name: 'gaming'
-			}
-		]
+
+	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;
+		}
+
+		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">
-		<li class="border border-gray p-4">
-			<i class="icon-calendar" />
-			<span class="ml-4">{data.last_modified}</span>
-		</li>
-		<li class="border border-gray p-4">
-			<i class="icon-calendar" />
-			<span class="ml-4">{data.license}</span>
-		</li>
-		<li class="border border-gray p-4">
-			<i class="icon-calendar" />
-			<span class="ml-4">{data.byte_size}</span>
-		</li>
+		{#if pkg?.bottles}
+			<li class="border border-gray p-4">
+				<i class="icon-calendar" />
+				<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">{pkg.license}</span>
+			</li>
+		{/if}
+		{#if pkg?.bottles}
+			<li class="border border-gray p-4">
+				<i class="icon-calendar" />
+				<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" />
-			<span class="ml-4">{pkg.homepage}</span>
-		</li>
-	</ul>
-	<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>
-		</li>
-	</ul>
-	<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" />
-			<span class="ml-4">{pkg.github}</span>
+			<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">{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}
-				<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 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}
diff --git a/modules/ui/src/Tabs/Tabs.svelte b/modules/ui/src/Tabs/Tabs.svelte
index f70f750..d85a33b 100644
--- a/modules/ui/src/Tabs/Tabs.svelte
+++ b/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 = '';
 
diff --git a/modules/ui/src/types.ts b/modules/ui/src/types.ts
index f24f124..1568e02 100644
--- a/modules/ui/src/types.ts
+++ b/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 = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aecf878..c7d915d 100644
--- a/pnpm-lock.yaml
+++ b/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: