Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145<script lang="ts"> import { resolve } from "$app/paths"; import type { CommitDetail } from "$lib/api/repo"; import Avatar from "$lib/components/ui/Avatar.svelte"; import Pending from "$lib/components/ui/Pending.svelte"; import TimeAgo from "$lib/components/ui/TimeAgo.svelte"; import { formatDateTime } from "$lib/format"; import type { CommitStatuses } from "$lib/api/commitStatuses"; import PipelineWorkflows from "./pipelines/PipelineWorkflows.svelte";
interface Props { ownerHandle: string; repoName: string; commit: CommitDetail; // empty for a root commit parent?: string; changeId?: string; pipelineStatuses?: Promise<CommitStatuses>; }
let { ownerHandle, repoName, commit, parent = "", changeId = "", pipelineStatuses }: Props = $props();
const base = $derived(`/${ownerHandle}/${repoName}`);
const showCommitter = $derived( commit.committerEmail !== "" && commit.committerEmail !== commit.authorEmail ); const parentShort = $derived(parent.slice(0, 8)); const changeIdShort = $derived(changeId.slice(0, 8));
const absoluteTime = $derived(formatDateTime(commit.committerWhen));</script>
<section class="text-foreground-default"> <div> <p class="pb-2 typography-paragraph-large">{commit.subject}</p> {#if commit.body} <p class="mt-1 cursor-text pb-2 typography-paragraph-regular whitespace-pre-wrap"> {commit.body} </p> {/if} </div>
{#snippet attribution(label: string, name: string, email: string)} <span class="inline-flex flex-wrap items-center"> <span class="w-24 text-foreground-subtle select-none">{label}</span> <!-- no email -> did mapping here, always the fallback form --> <span class="flex items-center gap-1"> <Avatar size="large" /> {#if email} <a href="mailto:{email}" class="no-underline hover:underline">{name}</a> {:else} <span>{name}</span> {/if} </span> </span> {/snippet}
<div class="flex flex-col gap-2 pt-4 typography-paragraph-regular"> <div class="flex flex-col gap-1 font-mono text-foreground-muted"> {@render attribution("author", commit.authorName, commit.authorEmail)}
{#each commit.coAuthors as coAuthor (coAuthor.email)} {@render attribution("co-author", coAuthor.name, coAuthor.email)} {/each}
{#if showCommitter} {@render attribution("committer", commit.committerName, commit.committerEmail)} {/if}
{#if commit.committerWhen} <span class="inline-flex flex-wrap items-center"> <span class="w-24 text-foreground-subtle select-none">date</span> <span class="inline-flex flex-wrap items-center gap-1"> <TimeAgo value={commit.committerWhen} variant="full" /> {#if absoluteTime} <span>({absoluteTime})</span> {/if} </span> </span> {/if}
{#if commit.hash} <span class="inline-flex flex-wrap items-center"> <span class="w-24 text-foreground-subtle select-none">commit</span> <a href={resolve(`${base}/commit/${commit.hash}` as "/")} class="break-all no-underline hover:underline" > <span class="md:hidden">{commit.shortHash}</span> <span class="hidden md:inline">{commit.hash}</span> </a> </span> {/if}
{#if parent} <span class="inline-flex flex-wrap items-center"> <span class="w-24 text-foreground-subtle select-none">parent</span> <a href={resolve(`${base}/commit/${parent}` as "/")} class="break-all no-underline hover:underline" > <span class="md:hidden">{parentShort}</span> <span class="hidden md:inline">{parent}</span> </a> </span> {/if}
{#if changeId} <span class="inline-flex flex-wrap items-center"> <span class="w-24 text-foreground-subtle select-none">change-id</span> <span class="break-all"> <span class="md:hidden">{changeIdShort}</span> <span class="hidden md:inline">{changeId}</span> </span> </span> {/if} </div> </div>
{#if pipelineStatuses} <Pending> {@const pipeline = (await pipelineStatuses)[commit.hash]} {#if pipeline} <div class="pt-4"> <PipelineWorkflows {ownerHandle} {repoName} {pipeline} variant="symbol" summary="long" /> </div> {/if} </Pending> {/if}</section>