Monorepo for Tangled
tangled.org
tangled.org
1{{ define "repo/fragments/splitDiff" }}
2{{ $name := .Id }}
3{{- $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800" -}}
4{{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}}
5{{- $lineNrSepStyle := "pr-2 border-r border-gray-200 dark:border-gray-700" -}}
6{{- $containerStyle := "inline-flex w-full items-center target:border target:rounded-sm target:border-yellow-200 target:dark:border-yellow-700 scroll-mt-20" -}}
7{{- $emptyStyle := "bg-gray-200/30 dark:bg-gray-700/30" -}}
8{{- $addStyle := "bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400" -}}
9{{- $delStyle := "bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 " -}}
10{{- $ctxStyle := "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400" -}}
11{{- $opStyle := "w-5 flex-shrink-0 select-none text-center" -}}
12<div class="grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-700">
13<div class="overflow-x-auto col-span-1 font-mono leading-normal"><div class="overflow-x-auto"><div class="inline-flex flex-col min-w-full">{{- range .TextFragments -}}<span class="block bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</span>
14 {{- range .LeftLines -}}
15 {{- if .IsEmpty -}}
16 <span class="{{ $emptyStyle }} {{ $containerStyle }}">
17 <span class="{{$lineNrStyle}} {{$lineNrSepStyle}}"><span aria-hidden="true" class="invisible">{{.LineNumber}}</span></span>
18 <span class="{{ $opStyle }}"><span aria-hidden="true" class="invisible">{{ .Op.String }}</span></span>
19 <span class="px-2 invisible" aria-hidden="true">{{ .Content }}</span>
20 </span>
21 {{- else if eq .Op.String "-" -}}
22 <span class="{{ $delStyle }} {{ $containerStyle }}" id="{{$name}}-O{{.LineNumber}}">
23 <span class="{{ $lineNrStyle }} {{ $lineNrSepStyle }}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{.LineNumber}}">{{ .LineNumber }}</a></span>
24 <span class="{{ $opStyle }}">{{ .Op.String }}</span>
25 <span class="px-2 whitespace-pre">{{ .Content }}</span>
26 </span>
27 {{- else if eq .Op.String " " -}}
28 <span class="{{ $ctxStyle }} {{ $containerStyle }}" id="{{$name}}-O{{.LineNumber}}">
29 <span class="{{ $lineNrStyle }} {{ $lineNrSepStyle }}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{.LineNumber}}">{{ .LineNumber }}</a></span>
30 <span class="{{ $opStyle }}">{{ .Op.String }}</span>
31 <span class="px-2 whitespace-pre">{{ .Content }}</span>
32 </span>
33 {{- end -}}
34 {{- end -}}
35 {{- end -}}</div></div></div>
36
37<div class="overflow-x-auto col-span-1 font-mono leading-normal"><div class="overflow-x-auto"><div class="inline-flex flex-col min-w-full">{{- range .TextFragments -}}<span class="block bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</span>
38 {{- range .RightLines -}}
39 {{- if .IsEmpty -}}
40 <span class="{{ $emptyStyle }} {{ $containerStyle }}">
41 <span class="{{$lineNrStyle}} {{$lineNrSepStyle}}"><span aria-hidden="true" class="invisible">{{.LineNumber}}</span></span>
42 <span class="{{ $opStyle }}"><span aria-hidden="true" class="invisible">{{ .Op.String }}</span></span>
43 <span class="px-2 invisible" aria-hidden="true">{{ .Content }}</span>
44 </span>
45 {{- else if eq .Op.String "+" -}}
46 <span class="{{ $addStyle }} {{ $containerStyle }}" id="{{$name}}-N{{.LineNumber}}">
47 <span class="{{$lineNrStyle}} {{$lineNrSepStyle}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{.LineNumber}}">{{ .LineNumber }}</a></span>
48 <span class="{{ $opStyle }}">{{ .Op.String }}</span>
49 <span class="px-2 whitespace-pre">{{ .Content }}</span>
50 </span>
51 {{- else if eq .Op.String " " -}}
52 <span class="{{ $ctxStyle }} {{ $containerStyle }}" id="{{$name}}-N{{.LineNumber}}">
53 <span class="{{$lineNrStyle}} {{$lineNrSepStyle}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{.LineNumber}}">{{ .LineNumber }}</a> </span>
54 <span class="{{ $opStyle }}">{{ .Op.String }}</span>
55 <span class="px-2 whitespace-pre">{{ .Content }}</span>
56 </span>
57 {{- end -}}
58 {{- end -}}
59 {{- end -}}</div></div></div>
60</div>
61{{ end }}