feat: turn Vervis information into markup

This comes close to the design specification already. But I lack some
information in the Vervis responses.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-06-15 11:59:49 +02:00
parent 311e5123e7
commit 662dc71ede
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854

View file

@ -13,7 +13,14 @@ You should have received a copy of the GNU Affero General Public License along w
<script> <script>
import { _, date } from 'svelte-i18n'; import { _, date } from 'svelte-i18n';
import { NorthStar24, Star16 } from 'svelte-octicons'; import {
EyeClosed16,
NorthStar24,
Repo24,
RepoForked16,
Star16,
TriangleDown16
} from 'svelte-octicons';
import Avatar from '../atoms/Avatar.svelte'; import Avatar from '../atoms/Avatar.svelte';
import BlockOrReport from '../atoms/BlockOrReport.svelte'; import BlockOrReport from '../atoms/BlockOrReport.svelte';
@ -85,35 +92,82 @@ You should have received a copy of the GNU Affero General Public License along w
<h2 class="h2 font-semibold leading-tight text-base px-4"> <h2 class="h2 font-semibold leading-tight text-base px-4">
{$_('page.profile.projects.heading')} {$_('page.profile.projects.heading')}
</h2> </h2>
<p class="px-4"> {#if data?.user?.followingsMap}
{$_('page.profile.projects.empty')} <ul>
{@html $_('page.profile.projects.add_or_import', { {#each data.user.followingsMap as following}
values: { {#if following.type === 'Project'}
addElementOpen: '<a class="anchor" href="#">', <li>
addElementClose: '</a>', <div class="flex bg-white border border-surface-100 p-4">
importElementOpen: `<a class="anchor" href="/projects/import/" data-sb-kind=${sb}>`, <!-- Left -->
importElementClose: '</a>' <div class="flex flex-col flex-grow ps-10">
} <!-- Name + Icon -->
})} <div class="flex -ms-10">
</p> <Repo24 fill="currentColor" />
<div> {following.name}
<p>The following is DEBUG information and will be removed in the near future.</p> </div>
{#if data?.user} <!-- Description -->
<div> <!-- Compensate padding with negative margin -->
<b>Person</b> <div class="flex -ms-4">
<pre>{JSON.stringify(data.user.person, null, 2)}</pre> {following.summary}
</div> </div>
<div> <!-- Tags -->
<b>Followings</b> <div class="flex"></div>
<pre>{JSON.stringify(data.user.followings, null, 2)}</pre> </div>
</div> <!-- Right -->
<div> <div class="flex flex-col">
<b>Followings mapped</b> <!-- Star Fork Watch -->
<p>These are the contents of the items in the previous dump.</p> <div class="flex gap-4">
<pre>{JSON.stringify(data.user.followingsMap, null, 2)}</pre> <button type="button" class="btn-icon border rounded-none">
</div> <RepoForked16 fill="currentColor" />
{/if} </button>
</div> <button type="button" class="btn-icon border rounded-none">
<Star16 fill="currentColor" />
</button>
<button type="button" class="btn-icon border rounded-none">
<EyeClosed16 fill="currentColor" />
<TriangleDown16 fill="currentColor" />
</button>
</div>
<!-- FIXME: Mark up as translatable once I figured out the
timestamp needed here -->
<div class="self-end">Updated somewhen</div>
</div>
</div>
</li>
{/if}
{/each}
</ul>
<div>
<p>The following is DEBUG information and will be removed in the near future.</p>
{#if data?.user}
<details>
<summary>Person</summary>
<pre>{JSON.stringify(data.user.person, null, 2)}</pre>
</details>
<details>
<summary>Followings</summary>
<pre>{JSON.stringify(data.user.followings, null, 2)}</pre>
</details>
<details>
<summary>Followings mapped</summary>
<p>These are the contents of the items in the previous dump.</p>
<pre>{JSON.stringify(data.user.followingsMap, null, 2)}</pre>
</details>
{/if}
</div>
{:else}
<p class="px-4">
{$_('page.profile.projects.empty')}
{@html $_('page.profile.projects.add_or_import', {
values: {
addElementOpen: '<a class="anchor" href="#">',
addElementClose: '</a>',
importElementOpen: `<a class="anchor" href="/projects/import/" data-sb-kind=${sb}>`,
importElementClose: '</a>'
}
})}
</p>
{/if}
</div> </div>
</div> </div>
<!-- History --> <!-- History -->