A vibe coded tangled fork which supports pijul.
1{{ define "title" }}pipelines · {{ .RepoInfo.FullName }}{{ end }}
2
3{{ define "extrameta" }}
4 {{ $title := "pipelines"}}
5 {{ $url := printf "https://tangled.org/%s/pipelines" .RepoInfo.FullName }}
6 {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
7{{ end }}
8
9{{ define "repoContent" }}
10<div class="flex justify-between items-center gap-4 mb-4">
11 <div class="text-sm text-gray-600 dark:text-gray-400">
12 {{ len .Pipelines }} pipeline run{{ if ne (len .Pipelines) 1 }}s{{ end }}
13 </div>
14 <!-- Future: Add filter tabs here similar to issues/pulls -->
15</div>
16{{ end }}
17
18{{ define "repoAfter" }}
19{{ if .Pipelines }}
20 <div class="flex flex-col gap-2 mt-2">
21 {{ range .Pipelines }}
22 {{ template "pipelineCard" (dict "Root" $ "Pipeline" .) }}
23 {{ end }}
24 </div>
25{{ else }}
26 <div class="mt-2 py-12 flex flex-col items-center justify-center gap-6 text-center border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-900">
27 <div class="flex justify-center">
28 {{ i "package" "size-16 text-gray-300 dark:text-gray-700" }}
29 </div>
30
31 <div class="flex flex-col gap-2">
32 <p class="text-lg font-semibold dark:text-white">
33 No pipelines have been run yet
34 </p>
35 <p class="text-sm text-gray-600 dark:text-gray-400 max-w-md">
36 Get started by configuring CI/CD for this repository
37 </p>
38 </div>
39
40 <div class="flex flex-col gap-3 text-left max-w-md">
41 <div class="flex items-start gap-3">
42 <span class="mt-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded-full size-6 flex items-center justify-center font-semibold shrink-0">1</span>
43 <p class="text-sm text-gray-700 dark:text-gray-300">
44 Choose a spindle in your
45 <a href="/{{ .RepoInfo.FullName }}/settings?tab=pipelines" class="underline hover:no-underline">repository settings</a>
46 </p>
47 </div>
48 <div class="flex items-start gap-3">
49 <span class="mt-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded-full size-6 flex items-center justify-center font-semibold shrink-0">2</span>
50 <p class="text-sm text-gray-700 dark:text-gray-300">
51 Configure your CI/CD
52 <a href="https://docs.tangled.org/spindles.html#pipelines" class="underline hover:no-underline" target="_blank" rel="noopener">pipeline</a>
53 </p>
54 </div>
55 <div class="flex items-start gap-3">
56 <span class="mt-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded-full size-6 flex items-center justify-center font-semibold shrink-0">3</span>
57 <p class="text-sm text-gray-700 dark:text-gray-300">
58 Trigger a workflow with a push or pull request
59 </p>
60 </div>
61 </div>
62 </div>
63{{ end }}
64{{ end }}
65
66{{ define "pipelineCard" }}
67 {{ $root := .Root }}
68 {{ $p := .Pipeline }}
69 {{ with $p }}
70 <div class="relative rounded drop-shadow-sm bg-white px-6 py-4 dark:bg-gray-800">
71 <div class="grid grid-cols-[1fr_auto] md:grid-cols-[1fr_auto_9rem_7rem] gap-3 md:gap-4 items-start md:items-center">
72 <!-- Trigger info -->
73 <div class="flex items-center gap-2 flex-wrap">
74 {{ $target := .Trigger.TargetRef }}
75 {{ $workflows := .Workflows }}
76
77 <!-- Status icon with tooltip -->
78 <span class="relative z-50 mr-4">
79 {{ template "repo/pipelines/fragments/pipelineSymbolLong" (dict "Pipeline" . "RepoInfo" $root.RepoInfo) }}
80 </span>
81
82 {{ if .IsResponding }}
83 <a href="/{{ $root.RepoInfo.FullName }}/pipelines/{{ .Id }}/workflow/{{ index $workflows 0 }}" class="flex items-center gap-2 flex-wrap no-underline hover:underline">
84 {{ end }}
85 {{ if .Trigger.IsPush }}
86 {{ i "git-commit-horizontal" "size-4 text-gray-500 dark:text-gray-400 shrink-0" }}
87 <span class="text-sm text-gray-600 dark:text-gray-400">Push to</span>
88 <span class="font-semibold dark:text-white">{{ $target }}</span>
89 {{ else if .Trigger.IsPullRequest }}
90 {{ i "git-pull-request" "size-4 text-gray-500 dark:text-gray-400 shrink-0" }}
91 <span class="text-sm text-gray-600 dark:text-gray-400">Pull request</span>
92 <span class="font-semibold dark:text-white">{{ $target }}</span>
93 {{ i "arrow-left" "size-3 text-gray-500 dark:text-gray-400" }}
94 <span class="font-semibold dark:text-white">{{ .Trigger.PRSourceBranch }}</span>
95 {{ end }}
96 {{ if .IsResponding }}
97 </a>
98 {{ end }}
99 </div>
100
101 <!-- Metadata stacked on mobile, separate columns on desktop -->
102 <div class="flex flex-col gap-2 items-end md:contents">
103 <!-- Commit SHA -->
104 <div class="font-mono text-xs text-gray-500 dark:text-gray-400">
105 <a href="/{{ $root.RepoInfo.FullName }}/commit/{{ .Sha }}" class="text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900 no-underline hover:underline px-2 py-1 rounded">
106 {{ slice .Sha 0 8 }}
107 </a>
108 </div>
109
110 <!-- Time -->
111 <div class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap text-right">
112 {{ template "repo/fragments/time" .Created }}
113 </div>
114
115 <!-- Duration -->
116 <div class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap text-right">
117 {{ $t := .TimeTaken }}
118 {{ if $t }}
119 <span class="flex items-center gap-1">
120 {{ i "clock" "size-3" }}
121 <time title="{{ $t }}">{{ $t | durationFmt }}</time>
122 </span>
123 {{ else }}
124 <span class="text-gray-400 dark:text-gray-600">--</span>
125 {{ end }}
126 </div>
127 </div>
128 </div>
129 </div>
130 {{ end }}
131{{ end }}