Show character ranking in info table

pages/character/character.pixy

@@ -60,18 +60,24 @@ component CharacterDetails(character *arn.Character, characterAnime []*arn.Anime
 
 component CharacterSidebar(character *arn.Character, friends []*arn.User, relevantCharacters []*arn.Character, user *arn.User)
 	.character-sidebar
-		if len(character.Attributes) > 0
-			h3.mountable(data-mountable-type="sidebar") Information
+		h3.mountable(data-mountable-type="sidebar") Information
 
-			table.character-attributes.mountable(data-mountable-type="sidebar")
-				each attribute in character.Attributes
-					tr.mountable(data-mountable-type="info")
-						td.character-attributes-name= attribute.Name + ":"
+		table.character-attributes.mountable(data-mountable-type="sidebar")
+			//- Ranking
+			tr.mountable(data-mountable-type="info")
+				td.character-attributes-name Ranking:
+				td.character-attributes-value
+					a.character-ranking(href="/characters/best", data-character-id=character.ID) View
 			
-						if strings.Contains(attribute.Value, "<")
-							td.character-attributes-value!= markdown.Render(attribute.Value)
-						else
-							td.character-attributes-value= attribute.Value
+			//- Attributes
+			each attribute in character.Attributes
+				tr.mountable(data-mountable-type="info")
+					td.character-attributes-name= attribute.Name + ":"
+
+					if strings.Contains(attribute.Value, "<")
+						td.character-attributes-value!= markdown.Render(attribute.Value)
+					else
+						td.character-attributes-value= attribute.Value
 		
 		if len(relevantCharacters) > 0
 			h3.mountable(data-mountable-type="sidebar") Relevant

pages/character/ranking.go

@@ -0,0 +1,33 @@
+package character
+
+import (
+	"net/http"
+	"strconv"
+
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/arn"
+)
+
+// Ranking returns the ranking information for the character via the API.
+func Ranking(ctx *aero.Context) string {
+	id := ctx.Get("id")
+	_, err := arn.GetCharacter(id)
+
+	if err != nil {
+		return ctx.Error(http.StatusNotFound, "Character not found", err)
+	}
+
+	characters := arn.FilterCharacters(func(character *arn.Character) bool {
+		return !character.IsDraft
+	})
+
+	arn.SortCharactersByLikes(characters)
+
+	for index, character := range characters {
+		if character.ID == id {
+			return strconv.Itoa(index + 1)
+		}
+	}
+
+	return ""
+}

pages/characters/best.go

@@ -1,22 +1,15 @@
 package characters
 
 import (
-	"sort"
-
 	"github.com/aerogo/aero"
+	"github.com/animenotifier/arn"
 )
 
 // Best characters.
 func Best(ctx *aero.Context) string {
 	characters := fetchAll()
 
-	sort.Slice(characters, func(i, j int) bool {
-		if len(characters[i].Likes) == len(characters[j].Likes) {
-			return characters[i].Name.Canonical < characters[j].Name.Canonical
-		}
-
-		return len(characters[i].Likes) > len(characters[j].Likes)
-	})
+	arn.SortCharactersByLikes(characters)
 
 	return render(ctx, characters)
 }

pages/index/apiroutes/apiroutes.go

@@ -10,6 +10,7 @@ import (
 	"github.com/animenotifier/notify.moe/pages/animeimport"
 	"github.com/animenotifier/notify.moe/pages/apiview"
 	"github.com/animenotifier/notify.moe/pages/apiview/apidocs"
+	"github.com/animenotifier/notify.moe/pages/character"
 	"github.com/animenotifier/notify.moe/pages/editor/jobs"
 	"github.com/animenotifier/notify.moe/pages/me"
 	"github.com/animenotifier/notify.moe/pages/notifications"
@@ -36,6 +37,7 @@ func Register(l *layout.Layout, app *aero.Application) {
 	app.Get("/api/user/:id/notifications/latest", notifications.Latest)
 	app.Get("/api/random/soundtrack", soundtrack.Random)
 	app.Get("/api/next/soundtrack", soundtrack.Next)
+	app.Get("/api/character/:id/ranking", character.Ranking)
 
 	// Upload
 	app.Post("/api/upload/avatar", upload.Avatar)

scripts/AnimeNotifier.ts

@@ -163,6 +163,7 @@ export default class AnimeNotifier {
 			Promise.resolve().then(() => this.updatePushUI()),
 			Promise.resolve().then(() => this.dragAndDrop()),
 			Promise.resolve().then(() => this.colorStripes()),
+			Promise.resolve().then(() => this.loadCharacterRanking()),
 			Promise.resolve().then(() => this.assignTooltipOffsets()),
 			Promise.resolve().then(() => this.countUp())
 		])
@@ -431,6 +432,26 @@ export default class AnimeNotifier {
 		}
 	}
 
+	loadCharacterRanking() {
+		if(!this.app.currentPath.includes("/character/")) {
+			return
+		}
+
+		for(let element of findAll("character-ranking")) {
+			fetch(`/api/character/${element.dataset.characterId}/ranking`).then(async response => {
+				let ranking = await response.text()
+
+				if(ranking.length === 0) {
+					return
+				}
+
+				Diff.mutations.queue(() => {
+					element.textContent = "#" + ranking
+				})
+			})
+		}
+	}
+
 	colorStripes() {
 		if(!this.app.currentPath.includes("/explore/color/")) {
 			return