style commit view
@@ -11,17 +11,19 @@ <script src="/static/htmx.min.js"></script><link href="/static/tw.css" rel="stylesheet" type="text/css" /><title>{{ block "title" . }}tangled{{ end }}</title></head>- <body class="container mx-auto px-10">+ <body><header>{{ block "topbar" . }}{{ template "layouts/topbar" . }}{{ end }}</header>+ <div class="container mx-auto px-10"><main class="content">{{ block "content" . }}{{ end }}</main><script src="/static/lucide.min.js"></script><script>lucide.createIcons();</script>+ </div></body></html>{{ end }}
@@ -39,10 +39,10 @@ {{ end}}</div></nav><section- class="bg-white p-6 min-h-[200px] border-l border-r border-b border-black relative z-20 w-full mx-auto"- >+ class="bg-white p-6 min-h-[200px] border-l border-r border-b border-black relative z-20 w-full mx-auto">{{ block "repoContent" . }}{{ end }}</section>+ {{ block "repoAfter" . }} {{ end }}</section>{{ end }}
@@ -1,6 +1,6 @@{{ define "layouts/topbar" }}{{ with .LoggedInUser }}- <nav class="flex items-center justify-center space-x-4 text-sm mb-4 border-b border-l border-r border-black">+ <nav class="flex items-center justify-center space-x-4 mb-4 py-2 border-b border-l border-r border-black"><ahref="/"hx-boost="true"
@@ -43,58 +43,89 @@ <br><strong>jump to</strong>{{ range $diff }}<ul>- <li><a href="#{{ .Name.New }}">{{ .Name.New }}</a></li>+ <li><a href="#file-{{ .Name.New }}">{{ .Name.New }}</a></li></ul>{{ end }}</div></section>-<section>++{{end}}++{{ define "repoAfter" }}++{{ $repo := .RepoInfo.FullName }}+{{ $commit := .Diff.Commit }}+{{ $stat := .Diff.Stat }}+{{ $diff := .Diff.Diff }}+{{ $this := $commit.This }}{{ $parent := $commit.Parent }}+{{ range $diff }}- <div id="{{ .Name.New }}">- <div class="diff">- {{ if .IsNew }}- <span class="diff-type">A</span>- {{ end }}- {{ if .IsDelete }}- <span class="diff-type">D</span>- {{ end }}- {{ if not (or .IsNew .IsDelete) }}- <span class="diff-type">M</span>- {{ end }}- {{ if .Name.Old }}- <a href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}">{{ .Name.Old }}</a>- {{ if .Name.New }}- →- <a href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}">{{ .Name.New }}</a>- {{ end }}- {{ else }}- <a href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}">{{ .Name.New }}</a>- {{- end -}}- {{ if .IsBinary }}- <p>Not showing binary file.</p>- {{ else }}- <pre class="overflow-auto">- {{- range .TextFragments -}}- <p>{{- .Header -}}</p>- {{- range .Lines -}}- {{- if eq .Op.String "+" -}}- <span class="diff-add">{{ .String }}</span>- {{- end -}}- {{- if eq .Op.String "-" -}}- <span class="diff-del">{{ .String }}</span>- {{- end -}}- {{- if eq .Op.String " " -}}- <span class="diff-noop">{{ .String }}</span>- {{- end -}}- {{- end -}}- {{- end -}}- {{- end -}}- </pre>+ <section class="mt-4 border border-black w-full mx-auto">+ <div id="file-{{ .Name.New }}">+ <div id="diff-file">+ <details open>+ <summary class="list-none cursor-pointer sticky top-0">+ <div id="diff-file-header" class="border-b cursor-pointer bg-white border-black flex justify-between">+ <div id="left-side-items" class="p-2">+ {{ if .IsNew }}+ <span class="diff-type">A</span>+ {{ end }}+ {{ if .IsDelete }}+ <span class="diff-type">D</span>+ {{ end }}+ {{ if not (or .IsNew .IsDelete) }}+ <span class="diff-type">M</span>+ {{ end }}++ {{ if .Name.Old }}+ <a href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}" class="no-underline hover:underline">{{ .Name.Old }}</a>+ {{ if .Name.New }}+ →+ <a href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}" class="no-underline hover:underline">{{ .Name.New }}</a>+ {{ end }}+ {{ else }}+ <a href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}" class="no-underline hover:underline">{{ .Name.New }}</a>+ {{- end -}}+ </div>++ <div id="right-side-items" class="p-2">+ <a href="#file-{{ .Name.New }}" class="no-underline hover:underline">to top of file</a>+ </div>++ </div>+ </summary>++ {{ if .IsBinary }}+ <p>Not showing binary file.</p>+ {{ else }}+ <pre class="overflow-auto">+ {{- range .TextFragments -}}+ <div class="bg-gray-100 text-gray-500">{{ .Header }}</div>+ {{- range .Lines -}}+ {{- if eq .Op.String "+" -}}+ <div class="bg-green-100 text-green-700">{{ .String }}</div>+ {{- end -}}++ {{- if eq .Op.String "-" -}}+ <div class="bg-red-100 text-red-700">{{ .String }}</div>+ {{- end -}}++ {{- if eq .Op.String " " -}}+ <div class="text-gray-500">{{ .String }}</div>+ {{- end -}}++ {{- end -}}+ {{- end -}}+ </pre>+ {{- end -}}++ </details>++ </div></div>- </div>+ </section>{{ end }}-</section>{{end}}
@@ -1,100 +1,99 @@{{ define "repoContent" }}- <main>- {{- if .IsEmpty }}- this repo is empty- {{ else }}- <div class="flex gap-4">- <div id="file-tree" class="w-1/2">- {{ $containerstyle := "py-1" }}- {{ $linkstyle := "no-underline hover:underline" }}+<main>+ {{- if .IsEmpty }}+ this repo is empty+ {{ else }}+ <div class="flex gap-4">+ <div id="file-tree" class="w-1/2">+ {{ $containerstyle := "py-1" }}+ {{ $linkstyle := "no-underline hover:underline" }}- <div class="flex justify-end">- <select- onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + this.value"- class="p-1 border border-gray-500 bg-white"- >- <optgroup label="branches" class="uppercase bold text-sm">- {{ range .Branches }}- <option- value="{{ .Reference.Name }}"- class="py-1"- {{if eq .Reference.Name $.Ref}}selected{{end}}- >- {{ .Reference.Name }}- </option>- {{ end }}- </optgroup>- <optgroup label="tags" class="uppercase bold text-sm">- {{ range .Tags }}- <option- value="{{ .Reference.Name }}"- class="py-1"- {{if eq .Reference.Name $.Ref}}selected{{end}}- >- {{ .Reference.Name }}- </option>- {{ end }}- </optgroup>- </select>- </div>+ <div class="flex justify-end">+ <select+ onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + this.value"+ class="p-1 border border-gray-500 bg-white"+ >+ <optgroup label="branches" class="uppercase bold text-sm">+ {{ range .Branches }}+ <option+ value="{{ .Reference.Name }}"+ class="py-1"+ {{if eq .Reference.Name $.Ref}}selected{{end}}+ >+ {{ .Reference.Name }}+ </option>+ {{ end }}+ </optgroup>+ <optgroup label="tags" class="uppercase bold text-sm">+ {{ range .Tags }}+ <option+ value="{{ .Reference.Name }}"+ class="py-1"+ {{if eq .Reference.Name $.Ref}}selected{{end}}+ >+ {{ .Reference.Name }}+ </option>+ {{ end }}+ </optgroup>+ </select>+ </div>- <section id="repo-content">- {{ range .Files }}- {{ if not .IsFile }}- <div class="{{ $containerstyle }}">- <a- href="/{{ $.RepoInfo.FullName }}/tree/{{ $.Ref }}/{{ .Name }}"- class="{{ $linkstyle }}"- >- <div class="flex items-center gap-2">- <i- class="w-3 h-3 fill-current"- data-lucide="folder"- ></i- >{{ .Name }}/- </div>- </a>- </div>- {{ end }}- {{ end }}+ {{ range .Files }}+ {{ if not .IsFile }}+ <div class="{{ $containerstyle }}">+ <a+ href="/{{ $.RepoInfo.FullName }}/tree/{{ $.Ref }}/{{ .Name }}"+ class="{{ $linkstyle }}"+ >+ <div class="flex items-center gap-2">+ <i+ class="w-3 h-3 fill-current"+ data-lucide="folder"+ ></i+ >{{ .Name }}/+ </div>+ </a>+ </div>+ {{ end }}+ {{ end }}- {{ range .Files }}- {{ if .IsFile }}- <div class="{{ $containerstyle }}">- <a- href="/{{ $.RepoInfo.FullName }}/blob/{{ $.Ref }}/{{ .Name }}"- class="{{ $linkstyle }}"- >- <div class="flex items-center gap-2">- <i- class="w-3 h-3"- data-lucide="file"- ></i- >{{ .Name }}- </div>- </a>- </div>- {{ end }}- {{ end }}- </div>- <div id="commit-log" class="flex-1">- {{ range .Commits }}- <div- class="relative- px-4- py-4- border-l- border-black- before:content-['']- before:absolute- before:w-1- before:h-1- before:bg-black- before:rounded-full- before:left-[-2.2px]- before:top-1/2- before:-translate-y-1/2- ">+ {{ range .Files }}+ {{ if .IsFile }}+ <div class="{{ $containerstyle }}">+ <a+ href="/{{ $.RepoInfo.FullName }}/blob/{{ $.Ref }}/{{ .Name }}"+ class="{{ $linkstyle }}"+ >+ <div class="flex items-center gap-2">+ <i+ class="w-3 h-3"+ data-lucide="file"+ ></i+ >{{ .Name }}+ </div>+ </a>+ </div>+ {{ end }}+ {{ end }}+ </div>+ <div id="commit-log" class="flex-1">+ {{ range .Commits }}+ <div+ class="relative+ px-4+ py-4+ border-l+ border-black+ before:content-['']+ before:absolute+ before:w-1+ before:h-1+ before:bg-black+ before:rounded-full+ before:left-[-2.2px]+ before:top-1/2+ before:-translate-y-1/2+ "><div id="commit-message">{{ $messageParts := splitN .Message "\n\n" 2 }}@@ -104,7 +103,7 @@ <div class="flex items-center gap-1"><a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}" class="inline no-underline hover:underline">{{ index $messageParts 0 }}</a>{{ if gt (len $messageParts) 1 }}<button class="text-sm inline rounded-sm bg-gray-300 text-gray-700 px-1 w-fit hover:bg-gray-400"- hx-on:click="this.parentElement.nextElementSibling.classList.toggle('hidden')">…</button>+ hx-on:click="this.parentElement.nextElementSibling.classList.toggle('hidden')">…</button>{{ end }}</div>{{ if gt (len $messageParts) 1 }}@@ -114,44 +113,45 @@ </div></div></div>- <div class="text-xs text-gray-500">- <span class="font-mono">- <a- href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"- class="text-gray-500 no-underline hover:underline"- >{{ slice .Hash.String 0 8 }}</a- >- </span>- · - <span>- <a- href="mailto:{{ .Author.Email }}"- class="text-gray-500 no-underline hover:underline"- >{{ .Author.Name }}</a- >- </span>- · - <span>{{ timeFmt .Author.When }}</span>- </div>- </div>- {{ end }}- </div>- </div>- </section>- {{- if .Readme }}- <article class="readme">- {{- .Readme -}}- </article>- {{- end -}}- {{- end -}}+ <div class="text-xs text-gray-500">+ <span class="font-mono">+ <a+ href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"+ class="text-gray-500 no-underline hover:underline"+ >{{ slice .Hash.String 0 8 }}</a+ >+ </span>+ · + <span>+ <a+ href="mailto:{{ .Author.Email }}"+ class="text-gray-500 no-underline hover:underline"+ >{{ .Author.Name }}</a+ >+ </span>+ · + <span>{{ timeFmt .Author.When }}</span>+ </div>+ </div>+ {{ end }}+ </div>+ </div>+ {{- end -}}+</main>+{{ end }}- <div class="clone-url">- <strong>clone</strong>- <pre>-git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}- </pre- >- </div>- </main>+{{ define "repoAfter" }}+{{- if .Readme }}+<section class="mt-4 p-6 border border-black w-full mx-auto">+ <article class="readme">+ {{- .Readme -}}+ </article>+</section>+{{- end -}}++<section class="mt-4 p-6 border border-black w-full mx-auto">+ <strong>clone</strong>+ <pre> git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }} </pre>+</section>{{ end }}