veryroundbird.house
1{{ define "repo/fragments/diff" }}
2{{ $repo := index . 0 }}
3{{ $diff := index . 1 }}
4{{ $commit := $diff.Commit }}
5{{ $stat := $diff.Stat }}
6{{ $diff := $diff.Diff }}
7
8 {{ $this := $commit.This }}
9 {{ $parent := $commit.Parent }}
10
11 <section class="mt-6 p-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
12 <div class="diff-stat">
13 <div class="flex gap-2 items-center">
14 <strong class="text-sm uppercase dark:text-gray-200">Changed files</strong>
15 {{ block "statPill" $stat }} {{ end }}
16 </div>
17 <div class="overflow-x-auto">
18 {{ range $diff }}
19 <ul class="dark:text-gray-200">
20 {{ if .IsDelete }}
21 <li><a href="#file-{{ .Name.Old }}" class="dark:hover:text-gray-300">{{ .Name.Old }}</a></li>
22 {{ else }}
23 <li><a href="#file-{{ .Name.New }}" class="dark:hover:text-gray-300">{{ .Name.New }}</a></li>
24 {{ end }}
25 </ul>
26 {{ end }}
27 </div>
28 </div>
29 </section>
30
31 {{ $last := sub (len $diff) 1 }}
32 {{ range $idx, $hunk := $diff }}
33 {{ with $hunk }}
34 <section class="mt-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
35 <div id="file-{{ .Name.New }}">
36 <div id="diff-file">
37 <details open>
38 <summary class="list-none cursor-pointer sticky top-0">
39 <div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
40 <div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
41 <div class="flex gap-1 items-center" style="direction: ltr;">
42 {{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}
43 {{ if .IsNew }}
44 <span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">ADDED</span>
45 {{ else if .IsDelete }}
46 <span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">DELETED</span>
47 {{ else if .IsCopy }}
48 <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">COPIED</span>
49 {{ else if .IsRename }}
50 <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">RENAMED</span>
51 {{ else }}
52 <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">MODIFIED</span>
53 {{ end }}
54
55 {{ block "statPill" .Stats }} {{ end }}
56 </div>
57
58 <div class="flex gap-2 items-center overflow-x-auto" style="direction: rtl;">
59 {{ if .IsDelete }}
60 <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this }}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.Old }}"{{end}}>
61 {{ .Name.Old }}
62 </a>
63 {{ else if (or .IsCopy .IsRename) }}
64 <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $parent}}href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}"{{end}}>
65 {{ .Name.Old }}
66 </a>
67 {{ i "arrow-right" "w-4 h-4" }}
68 <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
69 {{ .Name.New }}
70 </a>
71 {{ else }}
72 <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
73 {{ .Name.New }}
74 </a>
75 {{ end }}
76 </div>
77 </div>
78
79 {{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }}
80 <div id="right-side-items" class="p-2 flex items-center">
81 <a title="top of file" href="#file-{{ .Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up-to-line" "w-4 h-4" }}</a>
82 {{ if gt $idx 0 }}
83 {{ $prev := index $diff (sub $idx 1) }}
84 <a title="previous file" href="#file-{{ $prev.Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up" "w-4 h-4" }}</a>
85 {{ end }}
86
87 {{ if lt $idx $last }}
88 {{ $next := index $diff (add $idx 1) }}
89 <a title="next file" href="#file-{{ $next.Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-down" "w-4 h-4" }}</a>
90 {{ end }}
91 </div>
92
93 </div>
94 </summary>
95
96 <div class="transition-all duration-700 ease-in-out">
97 {{ if .IsDelete }}
98 <p class="text-center text-gray-400 dark:text-gray-500 p-4">
99 This file has been deleted.
100 </p>
101 {{ else if .IsCopy }}
102 <p class="text-center text-gray-400 dark:text-gray-500 p-4">
103 This file has been copied.
104 </p>
105 {{ else if .IsRename }}
106 <p class="text-center text-gray-400 dark:text-gray-500 p-4">
107 This file has been renamed.
108 </p>
109 {{ else if .IsBinary }}
110 <p class="text-center text-gray-400 dark:text-gray-500 p-4">
111 This is a binary file and will not be displayed.
112 </p>
113 {{ else }}
114 {{ $name := .Name.New }}
115 <pre class="overflow-x-auto"><div class="overflow-x-auto"><div class="min-w-full inline-block">{{- range .TextFragments -}}<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</div>
116 {{- $oldStart := .OldPosition -}}
117 {{- $newStart := .NewPosition -}}
118 {{- $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800 scroll-mt-10 target:border target:border-amber-500 target:rounded " -}}
119 {{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}}
120 {{- $lineNrSepStyle1 := "" -}}
121 {{- $lineNrSepStyle2 := "pr-2" -}}
122 {{- range .Lines -}}
123 {{- if eq .Op.String "+" -}}
124 <div class="bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400 flex min-w-full items-center">
125 <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><span aria-hidden="true" class="invisible">{{$newStart}}</span></div>
126 <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div>
127 <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
128 <div class="px-2">{{ .Line }}</div>
129 </div>
130 {{- $newStart = add64 $newStart 1 -}}
131 {{- end -}}
132 {{- if eq .Op.String "-" -}}
133 <div class="bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 flex min-w-full items-center">
134 <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div>
135 <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><span aria-hidden="true" class="invisible">{{$oldStart}}</span></div>
136 <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
137 <div class="px-2">{{ .Line }}</div>
138 </div>
139 {{- $oldStart = add64 $oldStart 1 -}}
140 {{- end -}}
141 {{- if eq .Op.String " " -}}
142 <div class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 flex min-w-full items-center">
143 <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div>
144 <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div>
145 <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
146 <div class="px-2">{{ .Line }}</div>
147 </div>
148 {{- $newStart = add64 $newStart 1 -}}
149 {{- $oldStart = add64 $oldStart 1 -}}
150 {{- end -}}
151 {{- end -}}
152 {{- end -}}</div></div></pre>
153 {{- end -}}
154 </div>
155
156 </details>
157
158 </div>
159 </div>
160 </section>
161 {{ end }}
162 {{ end }}
163{{ end }}
164
165{{ define "statPill" }}
166 <div class="flex items-center font-mono text-sm">
167 {{ if and .Insertions .Deletions }}
168 <span class="rounded-l p-1 select-none bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400">+{{ .Insertions }}</span>
169 <span class="rounded-r p-1 select-none bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400">-{{ .Deletions }}</span>
170 {{ else if .Insertions }}
171 <span class="rounded p-1 select-none bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400">+{{ .Insertions }}</span>
172 {{ else if .Deletions }}
173 <span class="rounded p-1 select-none bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400">-{{ .Deletions }}</span>
174 {{ end }}
175 </div>
176{{ end }}