forked from tangled.org/core
Monorepo for Tangled

appview/pages: add languages to repo index; show name and percentage on hover

This commit adds languages with their associated colour just below the
tabs on the repo index page. Hovering over the colours will display the
language name and file percentage within the repo.

Signed-off-by: BrookJeynes <jeynesbrook@gmail.com>

authored by brookjeynes.dev and committed by anirudh.fi c6c77c69 033cb439

Changed files
+40 -23
appview
pages
templates
layouts
repo
+26 -23
appview/pages/templates/layouts/repobase.html
··· 1 {{ define "title" }}{{ .RepoInfo.FullName }}{{ end }} 2 3 {{ define "content" }} 4 - <section id="repo-header" class="mb-4 py-2 px-6 dark:text-white"> 5 - {{ if .RepoInfo.Source }} 6 - <p class="text-sm"> 7 - <div class="flex items-center"> 8 - {{ i "git-fork" "w-3 h-3 mr-1"}} 9 - forked from 10 - {{ $sourceOwner := didOrHandle .RepoInfo.Source.Did .RepoInfo.SourceHandle }} 11 - <a class="ml-1 underline" href="/{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}">{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}</a> 12 - </div> 13 - </p> 14 - {{ end }} 15 - <div class="text-lg flex items-center justify-between"> 16 - <div> 17 - <a href="/{{ .RepoInfo.OwnerWithAt }}">{{ .RepoInfo.OwnerWithAt }}</a> 18 - <span class="select-none">/</span> 19 - <a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a> 20 - </div> 21 22 - {{ template "repo/fragments/repoActions" .RepoInfo }} 23 - </div> 24 - {{ template "repo/fragments/repoDescription" . }} 25 - </section> 26 - <section class="min-h-screen flex flex-col drop-shadow-sm"> 27 <nav class="w-full pl-4 overflow-auto"> 28 <div class="flex z-60"> 29 {{ $activeTabStyles := "-mb-px bg-white dark:bg-gray-800" }} ··· 61 </div> 62 </nav> 63 <section 64 - class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white" 65 > 66 {{ block "repoContent" . }}{{ end }} 67 </section>
··· 1 {{ define "title" }}{{ .RepoInfo.FullName }}{{ end }} 2 3 {{ define "content" }} 4 + <section id="repo-header" class="mb-4 py-2 px-6 dark:text-white"> 5 + {{ if .RepoInfo.Source }} 6 + <p class="text-sm"> 7 + <div class="flex items-center"> 8 + {{ i "git-fork" "w-3 h-3 mr-1"}} 9 + forked from 10 + {{ $sourceOwner := didOrHandle .RepoInfo.Source.Did .RepoInfo.SourceHandle }} 11 + <a class="ml-1 underline" href="/{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}">{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}</a> 12 + </div> 13 + </p> 14 + {{ end }} 15 + <div class="text-lg flex items-center justify-between"> 16 + <div> 17 + <a href="/{{ .RepoInfo.OwnerWithAt }}">{{ .RepoInfo.OwnerWithAt }}</a> 18 + <span class="select-none">/</span> 19 + <a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a> 20 + </div> 21 + 22 + {{ template "repo/fragments/repoActions" .RepoInfo }} 23 + </div> 24 + {{ template "repo/fragments/repoDescription" . }} 25 + </section> 26 27 + <section 28 + class="min-h-screen w-full flex flex-col drop-shadow-sm" 29 + > 30 <nav class="w-full pl-4 overflow-auto"> 31 <div class="flex z-60"> 32 {{ $activeTabStyles := "-mb-px bg-white dark:bg-gray-800" }} ··· 64 </div> 65 </nav> 66 <section 67 + class="bg-white dark:bg-gray-800 p-6 rounded relative w-full drop-shadow-sm dark:text-white" 68 > 69 {{ block "repoContent" . }}{{ end }} 70 </section>
+14
appview/pages/templates/repo/index.html
··· 7 {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo) }} 8 {{ end }} 9 10 11 {{ define "repoContent" }} 12 <main> 13 <div class="flex items-center justify-between pb-5"> 14 {{ block "branchSelector" . }}{{ end }} 15 <div class="flex md:hidden items-center gap-4">
··· 7 {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo) }} 8 {{ end }} 9 10 + {{ define "repoLanguages" }} 11 + <div class="flex gap-[3px] -m-6 mb-6 overflow-hidden rounded-t"> 12 + {{ range $value := .Languages }} 13 + <div 14 + title="{{ $value.Name }} {{ printf "%.1f" $value.Percentage }}%" 15 + class="h-2" 16 + style="background-color: {{ $value.Color }}; width: {{ $value.Percentage }}%" 17 + ></div> 18 + {{ end }} 19 + </div> 20 + {{ end }} 21 22 {{ define "repoContent" }} 23 <main> 24 + {{ if .Languages }} 25 + {{ block "repoLanguages" . }}{{ end }} 26 + {{ end }} 27 <div class="flex items-center justify-between pb-5"> 28 {{ block "branchSelector" . }}{{ end }} 29 <div class="flex md:hidden items-center gap-4">