alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv } from "tailwind-variants";
3
4 export const pipelineEmptyState = tv({
5 slots: {
6 root: "flex flex-col items-center gap-6 rounded-sm border border-border-default bg-background-default px-6 py-12 text-center",
7 icon: "size-16 text-foreground-disabled",
8 intro: "flex flex-col gap-2",
9 heading: "typography-paragraph-large font-semibold text-foreground-default",
10 body: "max-w-md typography-paragraph-small text-foreground-muted",
11 steps: "flex max-w-md flex-col gap-3 text-left",
12 step: "flex items-start gap-3",
13 badge:
14 "flex size-6 shrink-0 items-center justify-center rounded-full bg-background-inset typography-paragraph-small font-semibold text-foreground-default",
15 stepBody: "typography-paragraph-small text-foreground-muted",
16 link: "text-foreground-default underline hover:no-underline"
17 }
18 });
19</script>
20
21<script lang="ts">
22 import { resolve } from "$app/paths";
23 import Layers2 from "$icon/layers-2";
24 import type { Snippet } from "svelte";
25
26 interface Props {
27 ownerHandle: string;
28 repoName: string;
29 }
30
31 let { ownerHandle, repoName }: Props = $props();
32
33 const settingsHref = $derived(resolve(`/${ownerHandle}/${repoName}/settings/pipelines` as "/"));
34 const classes = pipelineEmptyState();
35</script>
36
37{#snippet step(index: number, body: Snippet)}
38 <li class={classes.step()}>
39 <span class={classes.badge()}>{index}</span>
40 <span class={classes.stepBody()}>{@render body()}</span>
41 </li>
42{/snippet}
43
44<!-- an empty tab almost always means CI was never set up, so show the setup steps -->
45<div class={classes.root()}>
46 <Layers2 class={classes.icon()} aria-hidden="true" />
47
48 <div class={classes.intro()}>
49 <p class={classes.heading()}>No pipelines have been run yet</p>
50 <p class={classes.body()}>Get started by configuring CI/CD for this repository.</p>
51 </div>
52
53 <ol class={classes.steps()}>
54 {@render step(1, spindle)}
55 {@render step(2, configure)}
56 {@render step(3, trigger)}
57 </ol>
58</div>
59
60{#snippet spindle()}
61 Choose a spindle in your <a href={settingsHref} class={classes.link()}>repository settings</a>
62{/snippet}
63
64{#snippet configure()}
65 <!-- plain anchor: Button's href only takes internal paths -->
66 Configure your CI/CD
67 <a
68 href="https://docs.tangled.org/spindles.html#pipelines"
69 target="_blank"
70 rel="noopener"
71 class={classes.link()}>pipeline</a
72 >
73{/snippet}
74
75{#snippet trigger()}
76 Trigger a workflow with a push or pull request
77{/snippet}