ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-06-08 00:00:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

#183 show file size, links, last_modified_at

Browse source
This commit is contained in:
neil 2023-02-10 09:14:43 +08:00
parent 99ba0a5540
commit e2a08a62dc
6 changed files with 87 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
modules/desktop/package.json
View file

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

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

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

137
modules/ui/src/PackageMetas/PackageMetas.svelte
View file

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

2
modules/ui/src/Tabs/Tabs.svelte
View file

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

2
modules/ui/src/types.ts
View file

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

6
pnpm-lock.yaml
View file

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