ngn/dumb
1
0
Fork 0
Code Issues 1 Pull Requests 3 Actions Packages Activity

perf: tackle lighthouse issues

Browse Source
This commit is contained in:
rramiachraf 2024-05-01 22:22:54 +01:00
parent 7e40892b1d
commit 59929bb891
7 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
handlers/handler.go
View File

@ -5,10 +5,10 @@ import (
"net/http" "net/http"
"github.com/a-h/templ" "github.com/a-h/templ"
gorillaHandlers "github.com/gorilla/handlers"
"github.com/gorilla/mux" "github.com/gorilla/mux"
"github.com/rramiachraf/dumb/views" "github.com/rramiachraf/dumb/views"
"github.com/sirupsen/logrus" "github.com/sirupsen/logrus"
gorillaHandlers "github.com/gorilla/handlers"
) )
func New(logger *logrus.Logger) *mux.Router { func New(logger *logrus.Logger) *mux.Router {
@ -18,6 +18,9 @@ func New(logger *logrus.Logger) *mux.Router {
r.Use(gorillaHandlers.CompressHandler) r.Use(gorillaHandlers.CompressHandler)
r.Handle("/", templ.Handler(views.HomePage())) r.Handle("/", templ.Handler(views.HomePage()))
r.HandleFunc("/robots.txt", func(w http.ResponseWriter, r *http.Request) {
w.Write([]byte("User-agent: *\nDisallow: /\n"))
})
r.HandleFunc("/albums/{artist}/{albumName}", album(logger)).Methods("GET") r.HandleFunc("/albums/{artist}/{albumName}", album(logger)).Methods("GET")
r.HandleFunc("/images/{filename}.{ext}", imageProxy(logger)).Methods("GET") r.HandleFunc("/images/{filename}.{ext}", imageProxy(logger)).Methods("GET")
r.HandleFunc("/search", search(logger)).Methods("GET") r.HandleFunc("/search", search(logger)).Methods("GET")

2
views/album.templ
View File

@ -9,7 +9,7 @@ templ AlbumPage(a data.Album) {
@layout(fmt.Sprintf("%s - %s", a.Artist, a.Name)) { @layout(fmt.Sprintf("%s - %s", a.Artist, a.Name)) {
<div id="container"> <div id="container">
<div id="metadata"> <div id="metadata">
<img id="album-artwork" src={ data.ExtractImageURL(a.Image) }/> <img id="album-artwork" src={ data.ExtractImageURL(a.Image) } alt="Album image"/>
<h2>{ a.Artist }</h2> <h2>{ a.Artist }</h2>
<h1>{ a.Name }</h1> <h1>{ a.Name }</h1>
</div> </div>

1
views/head.templ
View File

@ -8,5 +8,6 @@ templ head(title string) {
<link rel="icon" href="/static/logo.svg" type="image/svg+xml"/> <link rel="icon" href="/static/logo.svg" type="image/svg+xml"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="/static/script.js" defer></script> <script type="text/javascript" src="/static/script.js" defer></script>
<meta name="description" content="An alternative frontend for genius.com"/>
</head> </head>
} }

2
views/layout.templ
View File

@ -2,7 +2,7 @@ package views
templ layout(title string) { templ layout(title string) {
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
@head(title) @head(title)
<body> <body>
<main id="app"> <main id="app">

13
views/lyrics.templ
View File

@ -9,7 +9,11 @@ templ LyricsPage(s data.Song) {
@layout(fmt.Sprintf("%s - %s lyrics", s.Artist, s.Title)) { @layout(fmt.Sprintf("%s - %s lyrics", s.Artist, s.Title)) {
<div id="container"> <div id="container">
<div id="metadata"> <div id="metadata">
<img id="album-artwork" src={ data.ExtractImageURL(s.Image) }/> <img
id="album-artwork"
src={ data.ExtractImageURL(s.Image) }
alt="Song image"
/>
<div id="metadata-info"> <div id="metadata-info">
<h2>{ s.Artist }</h2> <h2>{ s.Artist }</h2>
<h1>{ s.Title }</h1> <h1>{ s.Title }</h1>
@ -41,7 +45,12 @@ templ LyricsPage(s data.Song) {
<div id="lyrics-album-container"> <div id="lyrics-album-container">
<h1 id="title">{ s.Album.Name }</h1> <h1 id="title">{ s.Album.Name }</h1>
<a href={ templ.URL(s.Album.URL) }> <a href={ templ.URL(s.Album.URL) }>
<img title={ "Album: " + s.Album.Name } id="album-artwork" src={ s.Album.Image }/> <img
title={ "Album: " + s.Album.Name }
id="album-artwork"
src={ s.Album.Image }
alt="Album image"
/>
</a> </a>
</div> </div>
} }

4
views/navbar.templ
View File

@ -3,7 +3,7 @@ package views
templ navbar() { templ navbar() {
<nav> <nav>
<div id="nav-container"> <div id="nav-container">
<a href="/"><img src="/static/logo.svg"/></a> <a href="/"><img src="/static/logo.svg" alt="Logo"/></a>
<div id="nav-icons"> <div id="nav-icons">
<a <a
title="Go to Genius.com" title="Go to Genius.com"
@ -17,7 +17,7 @@ templ navbar() {
<path stroke="#181d31" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"></path> <path stroke="#181d31" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"></path>
</svg> </svg>
</a> </a>
<button id="choose-theme" class="nav-icon"> <button id="choose-theme" class="nav-icon" type="button" aria-label="Change theme">
<svg <svg
width="25px" width="25px"
height="25px" height="25px"

10
views/search.templ
View File

@ -1,6 +1,9 @@
package views package views
import "github.com/rramiachraf/dumb/data" import (
"fmt"
"github.com/rramiachraf/dumb/data"
)
templ SearchPage(r data.SearchResults) { templ SearchPage(r data.SearchResults) {
@layout("Search - dumb") { @layout("Search - dumb") {
@ -14,7 +17,10 @@ templ SearchPage(r data.SearchResults) {
<h1>Songs</h1> <h1>Songs</h1>
for _, s := range s.Hits { for _, s := range s.Hits {
<a id="search-item" href={ templ.URL(s.Result.Path) }> <a id="search-item" href={ templ.URL(s.Result.Path) }>
<img src={ data.ExtractImageURL(s.Result.Thumbnail) }/> <img
src={ data.ExtractImageURL(s.Result.Thumbnail) }
alt={ fmt.Sprintf("%s image", s.Result.Title) }
/>
<div> <div>
<span>{ s.Result.ArtistNames }</span> <span>{ s.Result.ArtistNames }</span>
<h2>{ s.Result.Title }</h2> <h2>{ s.Result.Title }</h2>