Improved explore page

mixins/AnimeGrid.pixy

@@ -1,5 +1,6 @@
-component AnimeGrid(animeList []*arn.Anime)
+component AnimeGrid(animeList []*arn.Anime, user *arn.User)
 	.anime-grid
 		each anime in animeList
 			a.anime-grid-cell.ajax(href="/anime/" + toString(anime.ID))
-				img.anime-grid-image.lazy(data-src=anime.Image("medium"), data-webp="true", alt=anime.Title.Romaji, title=anime.Title.Romaji)
+				img.anime-grid-image.lazy(data-src=anime.Image("medium"), data-webp="true", alt=anime.Title.Romaji)
+				p.anime-grid-title= anime.Title.ByUser(user)

pages/best/best.go

@@ -1,13 +0,0 @@
-package best
-
-import (
-	"github.com/aerogo/aero"
-	"github.com/animenotifier/notify.moe/components"
-)
-
-const maxEntries = 7
-
-// Get search page.
-func Get(ctx *aero.Context) string {
-	return ctx.HTML(components.BestAnime(nil, nil, nil, nil, nil))
-}

pages/best/best.pixy

@@ -1,15 +0,0 @@
-component BestAnime(overall []*arn.Anime, story []*arn.Anime, visuals []*arn.Anime, soundtrack []*arn.Anime, airing []*arn.Anime)
-	h2 Currently Airing
-	AnimeGrid(airing)
-	
-	h2 Best Overall
-	AnimeGrid(overall)
-
-	h2 Best Story
-	AnimeGrid(story)
-
-	h2 Best Visuals
-	AnimeGrid(visuals)
-
-	h2 Best Soundtrack
-	AnimeGrid(soundtrack)

pages/explore/explore.go

@@ -7,6 +7,7 @@ import (
 	"github.com/aerogo/aero"
 	"github.com/animenotifier/arn"
 	"github.com/animenotifier/notify.moe/components"
+	"github.com/animenotifier/notify.moe/utils"
 )
 
 const (
@@ -26,8 +27,9 @@ func Get(ctx *aero.Context) string {
 	status := "current"
 	typ := "tv"
 	results := filterAnime(year, status, typ)
+	user := utils.GetUser(ctx)
 
-	return ctx.HTML(components.ExploreAnime(results, year, status, typ))
+	return ctx.HTML(components.ExploreAnime(results, year, status, typ, user))
 }
 
 // Filter ...
@@ -35,10 +37,11 @@ func Filter(ctx *aero.Context) string {
 	year := ctx.Get("year")
 	status := ctx.Get("status")
 	typ := ctx.Get("type")
+	user := utils.GetUser(ctx)
 
 	results := filterAnime(year, status, typ)
 
-	return ctx.HTML(components.ExploreAnime(results, year, status, typ))
+	return ctx.HTML(components.ExploreAnime(results, year, status, typ, user))
 }
 
 func filterAnime(year, status, typ string) []*arn.Anime {

pages/explore/explore.pixy

@@ -1,4 +1,4 @@
-component ExploreAnime(animeList []*arn.Anime, year string, status string, typ string)
+component ExploreAnime(animeList []*arn.Anime, year string, status string, typ string, user *arn.User)
 	ExploreFilters(year, status, typ)
 
 	h1.page-title Explore
@@ -6,7 +6,7 @@ component ExploreAnime(animeList []*arn.Anime, year string, status string, typ s
 	if len(animeList) == 0
 		p.no-data.mountable No anime found using the above filters.
 	else
-		AnimeGrid(animeList)
+		AnimeGrid(animeList, user)
 
 component ExploreFilters(year string, status string, typ string)
 	.explore-filters

pages/genre/genre.go

@@ -4,10 +4,12 @@ import (
 	"github.com/aerogo/aero"
 	"github.com/animenotifier/arn"
 	"github.com/animenotifier/notify.moe/components"
+	"github.com/animenotifier/notify.moe/utils"
 )
 
 // Get ...
 func Get(ctx *aero.Context) string {
+	user := utils.GetUser(ctx)
 	genreName := ctx.Get("name")
 	genre, err := arn.GetGenre(genreName)
 
@@ -15,5 +17,5 @@ func Get(ctx *aero.Context) string {
 		return ctx.Error(404, "Genre not found", err)
 	}
 
-	return ctx.HTML(components.Genre(genre))
+	return ctx.HTML(components.Genre(genre, user))
 }

pages/genre/genre.pixy

@@ -1,3 +1,3 @@
-component Genre(genre *arn.Genre)
+component Genre(genre *arn.Genre, user *arn.User)
 	h2(title=toString(len(genre.AnimeList)) + " anime")= arn.Capitalize(genre.ID)
-	AnimeGrid(genre.AnimeList)
+	AnimeGrid(genre.AnimeList, user)

styles/anime-grid.scarlet

@@ -6,5 +6,23 @@
 	saturate-up
 	shadow-up
 
+	:hover
+		.anime-grid-title
+			opacity 1
+
 .anime-grid-image
-	grid-image
+	grid-image
+
+.anime-grid-title
+	opacity 0
+	position absolute
+	bottom 0
+	left 0
+	width 100%
+	padding 0.5rem
+	font-size 90%
+	text-align center
+	background linear-gradient(to top, hsla(0, 0%, 0%, 0.5), hsla(0, 0%, 0%, 0))
+	color white
+	text-shadow 0 0 3px black
+	transition opacity transition-speed ease