add language bar (#121)

#120

Co-authored-by: 諏訪子 <suwako@076.moe>
Reviewed-on: https://codeberg.org/gothub/gothub/pulls/121
Co-authored-by: TechnicalSuwako <technicalsuwako@noreply.codeberg.org>
Co-committed-by: TechnicalSuwako <technicalsuwako@noreply.codeberg.org>

pages/repo.go

@@ -11,6 +11,12 @@ import (
 	"github.com/gofiber/fiber/v2"
 )
 
+type Languages struct {
+  Name          string
+  Percent       string
+  Color         string
+}
+
 type Repo struct {
 	Fullname      string
 	Description   string
@@ -19,7 +25,7 @@ type Repo struct {
 	Forks         string
 	CommitsBehind string
 	Watchers      string
-	Language      []string
+  Language      []Languages
 	License       string
 	DefaultBranch string
 	Readme        string
@@ -90,7 +96,11 @@ func HandleRepo(c *fiber.Ctx) error {
 	})
 	sc.OnHTML("div.BorderGrid-cell ul.list-style-none", func(e *colly.HTMLElement) {
 		e.ForEach("li.d-inline .d-inline-flex", func(i int, el *colly.HTMLElement) {
-			Scrape.Language = append(Scrape.Language, el.ChildText("span.text-bold")+" "+el.ChildText("span:contains('%')"))
+      var lang Languages
+      lang.Name = el.ChildText("span.text-bold")
+      lang.Percent = el.ChildText("span:contains('%')")
+      lang.Color = strings.ReplaceAll(strings.ReplaceAll(el.ChildAttr("svg", "style"), "color:", ""), ";", "")
+      Scrape.Language = append(Scrape.Language, lang)
 		})
 	})
 	sc.OnHTML("div#repository-container-header", func(e *colly.HTMLElement) {

public/css/global.css

@@ -211,6 +211,20 @@ a:hover {
   color: var(--text);
 }
 
+.lang-bar:last-child {
+  margin-bottom: 0;
+}
+
+.lang-bar {
+  width: 100%;
+  display: inherit;
+  height: 10px;
+  border-radius:4px;
+  overflow: hidden; /* To force the corners to be round. */
+  user-select: none; /* Prevent the selection */
+  -webkit-user-select: none; /* Safari specific fix. */
+}
+
 /* URI: /:user/:repo */
 .button {
   background-color: var(--background);

views/repo.html

@@ -31,7 +31,15 @@
       {{.DefaultBranch}}
     </p>
     {{ end }} {{ if .Language }}
-    <p>🗒️ {{range .Language}} {{.}} {{end}}</p>
+    <p>
+      {{range $o := .Language}}{{$o.Name}} {{$o.Percent}}, {{end}}
+      <div class="lang-bar">{{range $i, $o := .Language}}
+        <span style="width: {{$o.Percent}}; background-color: {{$o.Color}}">
+          &nbsp;
+        </span>
+        {{end}}
+      </div>
+    </p>
     {{end}} {{ if .CommitsBehind }} This repository is {{.CommitsBehind}}
     commits behind its parent. {{end}}
   </div>