forge/Anvil
1
0
Fork 0
Code Pull requests Activity

feat: turn Vervis information into markup

Browse source 
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
1 changed files with 84 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
src/lib/components/templates/Profile.svelte
View file

@ -13,7 +13,14 @@ You should have received a copy of the GNU Affero General Public License along w
<script>
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 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">
{$_('page.profile.projects.heading')}
</h2>
<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>
<div>
<p>The following is DEBUG information and will be removed in the near future.</p>
{#if data?.user}
<div>
<b>Person</b>
<pre>{JSON.stringify(data.user.person, null, 2)}</pre>
</div>
<div>
<b>Followings</b>
<pre>{JSON.stringify(data.user.followings, null, 2)}</pre>
</div>
<div>
<b>Followings mapped</b>
<p>These are the contents of the items in the previous dump.</p>
<pre>{JSON.stringify(data.user.followingsMap, null, 2)}</pre>
</div>
{/if}
</div>
{#if data?.user?.followingsMap}
<ul>
{#each data.user.followingsMap as following}
{#if following.type === 'Project'}
<li>
<div class="flex bg-white border border-surface-100 p-4">
<!-- Left -->
<div class="flex flex-col flex-grow ps-10">
<!-- Name + Icon -->
<div class="flex -ms-10">
<Repo24 fill="currentColor" />
{following.name}
</div>
<!-- Description -->
<!-- Compensate padding with negative margin -->
<div class="flex -ms-4">
{following.summary}
</div>
<!-- Tags -->
<div class="flex"></div>
</div>
<!-- Right -->
<div class="flex flex-col">
<!-- Star Fork Watch -->
<div class="flex gap-4">
<button type="button" class="btn-icon border rounded-none">
<RepoForked16 fill="currentColor" />
</button>
<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>
<!-- History -->