Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const commitHeader = tv({ slots: { root: "flex flex-col gap-4 text-foreground-default", header: "flex flex-col gap-2", headerSubject: "typography-paragraph-large", headerBody: "typography-monospace-regular whitespace-pre-wrap", commitDetails: "flex flex-col gap-2 typography-paragraph-regular", commitDetailsRow: "inline-flex flex-wrap items-center", commitDetailsTitle: "w-32 text-foreground-muted select-none" } });
export type CommitHeaderVariants = VariantProps<typeof commitHeader>;</script>
<script lang="ts"> import { resolve } from "$app/paths"; import type { CommitDetail } from "$lib/api/repo"; import Pending from "$lib/components/ui/Pending.svelte"; import User from "$lib/components/ui/User.svelte"; import TimeAgo from "$lib/components/ui/TimeAgo.svelte"; import { formatDateTime } from "$lib/format"; import type { CommitStatuses } from "$lib/api/commitStatuses"; import PipelineWorkflows from "$lib/components/repo/pipelines/PipelineWorkflows.svelte"; import Separator from "$lib/components/ui/Separator.svelte"; import Link from "$lib/components/ui/Link.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));
const styles = $derived(commitHeader());</script>
<section class={styles.root()}> <div class={styles.header()}> <span class="flex min-h-9 flex-row items-center justify-between"> <p class={styles.headerSubject()}> {commit.subject} <span class="ml-1 min-w-0 rounded-sm bg-background-inset px-1 typography-monospace-regular text-foreground-default" > <!-- todo: print actual branch/bookmark name --> master </span> </p> {#if pipelineStatuses} <Pending> {@const pipeline = (await pipelineStatuses)[commit.hash]} {#if pipeline} <PipelineWorkflows {ownerHandle} {repoName} {pipeline} variant="symbol" summary="long" /> {/if} </Pending> {/if} </span> {#if commit.body} <p class={styles.headerBody()}> {commit.body} </p> {/if} </div>
<Separator />
<div class={styles.commitDetails()}> {#snippet attribution( label: string, name: string, email: string, did?: string, handle?: string )} <span class={styles.commitDetailsRow()}> <span class={styles.commitDetailsTitle()}>{label}</span> {#if handle} <User {did} {handle} size="regular" link /> {:else} <User size="regular" handle={name} link {email} /> {/if} </span> {/snippet}
{@render attribution( "Author", commit.authorName, commit.authorEmail, commit.authorDid, commit.authorHandle )}
{#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={styles.commitDetailsRow()}> <span class={styles.commitDetailsTitle()}>Date</span> <span class="flex flex-row gap-1"> <TimeAgo value={commit.committerWhen} variant="full" /> {#if absoluteTime} <span class="hidden text-foreground-muted sm:inline">({absoluteTime})</span> {/if} </span> </span> {/if}
{#if commit.hash} <span class={styles.commitDetailsRow()}> <span class={styles.commitDetailsTitle()}>Commit</span> <Link href={resolve(`${base}/commit/${commit.hash}` as "/")} class="typography-monospace-regular" > <span class="sm:hidden">{commit.shortHash}</span> <span class="hidden sm:inline">{commit.hash}</span> </Link> </span> {/if}
{#if parent} <span class={styles.commitDetailsRow()}> <span class={styles.commitDetailsTitle()}>Parent</span> <Link href={resolve(`${base}/commit/${parent}` as "/")} class="typography-monospace-regular" > <span class="sm:hidden">{parentShort}</span> <span class="hidden sm:inline">{parent}</span> </Link> </span> {/if}
{#if changeId} <span class={styles.commitDetailsRow()}> <span class={styles.commitDetailsTitle()}>Change ID</span> <span class="typography-monospace-regular break-all"> <span class="sm:hidden">{changeIdShort}</span> <span class="hidden sm:inline">{changeId}</span> </span> </span> {/if} </div></section>