Add the ability to get badges for packages

This commit is contained in:
Elara 2023-05-16 12:42:36 -07:00
parent b5672f2e05
commit 8c023ab05c

View File

@ -5,58 +5,104 @@
import { LURE_WEB_API_URL } from '$env/static/public';
import { DoubleBounce } from 'svelte-loading-spinners';
import Header from "../../../header.svelte";
import Footer from "../../../footer.svelte";
import Header from '../../../header.svelte';
import Footer from '../../../footer.svelte';
import Icon from '@iconify/svelte';
import { onMount } from 'svelte';
client.baseURL = LURE_WEB_API_URL
client.prefix = ""
client.baseURL = LURE_WEB_API_URL;
client.prefix = '';
let currentURL = ``;
onMount(() => (currentURL = window.location.href));
function fullVer(pkg) {
let ver = `${pkg.version}-${pkg.release}`;
if (pkg.epoch != 0) {
ver = `${pkg.epoch}:${ver}`
ver = `${pkg.epoch}:${ver}`;
}
return ver
return ver;
}
function objToMap(o) {
return new Map(Object.entries(o))
return new Map(Object.entries(o));
}
let modalActive = false;
function showModal() {
modalActive = true;
}
function hideModal() {
modalActive = false;
}
</script>
<svelte:head>
<title>{$page.params.name} Package | LURE Web</title>
<meta name="description" content="Information about the {$page.params.name} LURE package.">
<meta name="description" content="Information about the {$page.params.name} LURE package." />
</svelte:head>
<Header />
<section class="container">
<a href="/pkgs"><Icon icon="material-symbols:arrow-back-rounded" inline=true/> Back</a>
<a href="/pkgs"><Icon icon="material-symbols:arrow-back-rounded" inline="true" /> Back</a>
{#await GetPkg({ name: $page.params.name, repository: $page.params.repo })}
<center><DoubleBounce color="#375a7f" /></center>
{:then pkg}
<div class="modal {modalActive ? 'is-active' : ''}">
<div class="modal-background"/>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Badge</p>
<button class="delete" aria-label="close" on:click={hideModal}/>
</header>
<section class="modal-card-body">
<img
src="{LURE_WEB_API_URL}/badge/{$page.params.repo}/{$page.params.name}"
alt="badge for {$page.params.name} package"
/>
<p>Markdown</p>
<input
class="input"
value="[![LURE badge for {$page.params.name} package]({LURE_WEB_API_URL}/badge/{$page.params.repo}/{$page.params.name})]({currentURL})"
readonly
/>
<p>HTML</p>
<input
class="input"
value='<a href="{currentURL}"><img src="{LURE_WEB_API_URL}/badge/{$page.params.repo}/{$page.params.name}" alt="LURE badge for {$page.params.name} package"></a>'
readonly
/>
</section>
<footer class="modal-card-foot">
<button class="button is-primary" on:click={hideModal}>Close</button>
</footer>
</div>
</div>
<p class="title">{pkg.name}</p>
<p class="subtitle mb-3">{fullVer(pkg)}</p>
<a href="/pkg/{pkg.repository}/{pkg.name}/lure.sh" class="button is-primary mb-5">View lure.sh</a>
<button href="/pkg/{pkg.repository}/{pkg.name}/lure.sh" class="button is-success mb-5 ml-1" on:click={showModal}>View badge</button>
<div class="box">
<table class="table is-hoverable is-fullwidth">
<tbody>
{#if pkg.description != ""}
{#if pkg.description != ''}
<tr>
<th>Description:</th>
<td>{pkg.description}</td>
</tr>
{/if}
{#if pkg.homepage != ""}
{#if pkg.homepage != ''}
<tr>
<th>Homepage:</th>
<td><a href="{pkg.homepage}">{pkg.homepage}</a></td>
<td><a href={pkg.homepage}>{pkg.homepage}</a></td>
</tr>
{/if}
{#if pkg.maintainer != ""}
{#if pkg.maintainer != ''}
<tr>
<th>Maintainer:</th>
<td>{pkg.maintainer}</td>
@ -70,7 +116,8 @@
{#if license.startsWith('custom')}
{license}{#if index + 1 < pkg.licenses.length},&nbsp{/if}
{:else}
<a href="https://spdx.org/licenses/{license}.html">{license}</a>{#if index+1 < pkg.licenses.length},&nbsp;{/if}
<a href="https://spdx.org/licenses/{license}.html">{license}</a
>{#if index + 1 < pkg.licenses.length},&nbsp;{/if}
{/if}
{/each}
</td>
@ -96,13 +143,13 @@
{/if}
{#each [...objToMap(pkg.depends)] as [override, pkgList]}
<tr>
<th>Depends ({override == "" ? "default" : override}):</th>
<th>Depends ({override == '' ? 'default' : override}):</th>
<td>{pkgList.entries.join(', ')}</td>
</tr>
{/each}
{#each [...objToMap(pkg.buildDepends)] as [override, pkgList]}
<tr>
<th>Build Depends ({override != "" ? override : "default"}):</th>
<th>Build Depends ({override != '' ? override : 'default'}):</th>
<td>{pkgList.entries.join(', ')}</td>
</tr>
{/each}