feat: replace text/template with templ and refactor code
This commit is contained in:
rramiachraf
32
views/album.templ
Normal file
32
views/album.templ
Normal file
@ -0,0 +1,32 @@
|
||||
package views
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"github.com/rramiachraf/dumb/data"
|
||||
)
|
||||
|
||||
templ AlbumPage(a data.Album) {
|
||||
@layout(fmt.Sprintf("%s - %s", a.Artist, a.Name)) {
|
||||
<div id="container">
|
||||
<div id="metadata">
|
||||
<img id="album-artwork" src={ data.ExtractImageURL(a.Image) }/>
|
||||
<h2>{ a.Artist }</h2>
|
||||
<h1>{ a.Name }</h1>
|
||||
</div>
|
||||
<div id="album-tracklist">
|
||||
for _, t := range a.Tracks {
|
||||
<a href={ templ.URL(t.Url) }>
|
||||
<p>{ t.Title }</p>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
<div id="info">
|
||||
<div id="about">
|
||||
<h1 id="title">About</h1>
|
||||
<p class="hidden" id="full_about">{ a.About[0] }</p>
|
||||
<p id="summary">{ a.About[1] }</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{.Artist}} - {{.Name}}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/style.css" />
|
||||
<script type="text/javascript" src="/static/script.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
{{template "navbar"}}
|
||||
<div id="container">
|
||||
<div id="metadata">
|
||||
<img id="album-artwork" src="{{extractURL .Image}}"/>
|
||||
<h2>{{.Artist}}</h2>
|
||||
<h1>{{.Name}}</h1>
|
||||
</div>
|
||||
<div id="album-tracklist">
|
||||
{{range .Tracks}}
|
||||
<a href="{{.Url}}">
|
||||
<p>{{.Title}}</p>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
<div id="info">
|
||||
<div id="about">
|
||||
<h1 id="title">About</h1>
|
||||
<p class="hidden" id="full_about">{{index .About 0}}</p>
|
||||
<p id="summary">{{index .About 1}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "footer"}}
|
||||
</body>
|
||||
</html>
|
||||
12
views/error.templ
Normal file
12
views/error.templ
Normal file
@ -0,0 +1,12 @@
|
||||
package views
|
||||
|
||||
import "strconv"
|
||||
|
||||
templ ErrorPage(code int, display string) {
|
||||
@layout("Error - dumb") {
|
||||
<div id="error">
|
||||
<h1>{ strconv.Itoa(code) }</h1>
|
||||
<p>{ display }</p>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>dumb</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/style.css" />
|
||||
<link rel="icon" href="/static/logo.svg" type="image/svg+xml">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<main id="app">
|
||||
{{template "navbar"}}
|
||||
<div id="error">
|
||||
<h1>{{.Status}}</h1>
|
||||
<p>{{.Error}}</p>
|
||||
</div>
|
||||
{{template "footer"}}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
7
views/footer.templ
Normal file
7
views/footer.templ
Normal file
@ -0,0 +1,7 @@
|
||||
package views
|
||||
|
||||
templ footer() {
|
||||
<footer>
|
||||
<a rel="noopener noreferrer" target="_blank" href="https://github.com/rramiachraf/dumb">Source Code</a>
|
||||
</footer>
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
{{define "footer"}}
|
||||
<footer>
|
||||
<a rel="noopener noreferrer" target="_blank" href="https://github.com/rramiachraf/dumb">Source Code</a>
|
||||
</footer>
|
||||
{{end}}
|
||||
12
views/head.templ
Normal file
12
views/head.templ
Normal file
@ -0,0 +1,12 @@
|
||||
package views
|
||||
|
||||
templ head(title string) {
|
||||
<head>
|
||||
<title>{ title }</title>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/style.css"/>
|
||||
<link rel="icon" href="/static/logo.svg" type="image/svg+xml"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<script type="text/javascript" src="/static/script.js" defer></script>
|
||||
</head>
|
||||
}
|
||||
15
views/home.templ
Normal file
15
views/home.templ
Normal file
@ -0,0 +1,15 @@
|
||||
package views
|
||||
|
||||
templ HomePage() {
|
||||
@layout("dumb") {
|
||||
<div id="home">
|
||||
<div>
|
||||
<h1>Welcome to dumb</h1>
|
||||
<p>An alternative frontend for genius.com</p>
|
||||
</div>
|
||||
<form method="GET" action="/search">
|
||||
<input type="text" name="q" id="search-input" placeholder="Search..."/>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>dumb</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/style.css" />
|
||||
<link rel="icon" href="/static/logo.svg" type="image/svg+xml">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<main id="app">
|
||||
{{template "navbar"}}
|
||||
<div id="home">
|
||||
<div>
|
||||
<h1>Welcome to dumb</h1>
|
||||
<p>An alternative frontend for genius.com</p>
|
||||
</div>
|
||||
<form method="GET" action="/search">
|
||||
<input type="text" name="q" id="search-input" placeholder="Search..." />
|
||||
</form>
|
||||
|
||||
</div>
|
||||
{{template "footer"}}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
15
views/layout.templ
Normal file
15
views/layout.templ
Normal file
@ -0,0 +1,15 @@
|
||||
package views
|
||||
|
||||
templ layout(title string) {
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
@head(title)
|
||||
<body>
|
||||
<main id="app">
|
||||
@navbar()
|
||||
{ children... }
|
||||
@footer()
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
38
views/lyrics.templ
Normal file
38
views/lyrics.templ
Normal file
@ -0,0 +1,38 @@
|
||||
package views
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"github.com/rramiachraf/dumb/data"
|
||||
)
|
||||
|
||||
templ LyricsPage(s data.Song) {
|
||||
@layout(fmt.Sprintf("%s - %s lyrics", s.Artist, s.Title)) {
|
||||
<div id="container">
|
||||
<div id="metadata">
|
||||
<a href={ templ.URL(s.LinkToAlbum) }><img id="album-artwork" src={ data.ExtractImageURL(s.Image) }/></a>
|
||||
<h2>{ s.Artist }</h2>
|
||||
<h1>{ s.Title }</h1>
|
||||
<a href={ templ.URL(s.LinkToAlbum) }><h2>{ s.Album }</h2></a>
|
||||
</div>
|
||||
<div id="lyrics">
|
||||
@templ.Raw(s.Lyrics)
|
||||
</div>
|
||||
<div id="info">
|
||||
<div id="about">
|
||||
<h1 id="title">About</h1>
|
||||
<p class="hidden" id="full_about">{ s.About[0] }</p>
|
||||
<p id="summary">{ s.About[1] }</p>
|
||||
</div>
|
||||
<div id="credits">
|
||||
<h1 id="title">Credits</h1>
|
||||
for key, val := range s.Credits {
|
||||
<details>
|
||||
<summary>{ key }</summary>
|
||||
<p>{ val }</p>
|
||||
</details>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{.Artist}} - {{.Title}} lyrics</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/style.css" />
|
||||
<link rel="icon" href="/static/logo.svg" type="image/svg+xml">
|
||||
<script type="text/javascript" src="/static/script.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
{{template "navbar"}}
|
||||
<div id="container">
|
||||
<div id="metadata">
|
||||
<a href="{{.LinkToAlbum}}"><img id="album-artwork" src="{{extractURL .Image}}"/></a>
|
||||
<h2>{{.Artist}}</h2>
|
||||
<h1>{{.Title}}</h1>
|
||||
<a href="{{.LinkToAlbum}}"><h2>{{.Album}}</h2></a>
|
||||
</div>
|
||||
<div id="lyrics">{{.Lyrics}}</div>
|
||||
<div id="info">
|
||||
<div id="about">
|
||||
<h1 id="title">About</h1>
|
||||
<p class="hidden" id="full_about">{{index .About 0}}</p>
|
||||
<p id="summary">{{index .About 1}}</p>
|
||||
</div>
|
||||
<div id="credits">
|
||||
<h1 id="title">Credits</h1>
|
||||
{{range $key, $val := .Credits}}
|
||||
<details>
|
||||
<summary>{{$key}}</summary>
|
||||
<p>{{$val}}</p>
|
||||
</details>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "footer"}}
|
||||
</body>
|
||||
</html>
|
||||
7
views/navbar.templ
Normal file
7
views/navbar.templ
Normal file
@ -0,0 +1,7 @@
|
||||
package views
|
||||
|
||||
templ navbar() {
|
||||
<nav>
|
||||
<a href="/"><img src="/static/logo.svg"/></a>
|
||||
</nav>
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
{{define "navbar"}}
|
||||
<nav>
|
||||
<a href="/"><img src="/static/logo.svg" /></a>
|
||||
</nav>
|
||||
{{end}}
|
||||
29
views/search.templ
Normal file
29
views/search.templ
Normal file
@ -0,0 +1,29 @@
|
||||
package views
|
||||
|
||||
import "github.com/rramiachraf/dumb/data"
|
||||
|
||||
templ SearchPage(r data.SearchResults) {
|
||||
@layout("Search - dumb") {
|
||||
<div id="search-page" class="main">
|
||||
<form method="GET">
|
||||
<input type="text" name="q" id="search-input" placeholder="Search..." value={ r.Query }/>
|
||||
</form>
|
||||
<div id="search-results">
|
||||
for _, s := range r.Sections {
|
||||
if s.Type == "song" {
|
||||
<h1>Songs</h1>
|
||||
for _, s := range s.Hits {
|
||||
<a id="search-item" href={ templ.URL(s.Result.Path) }>
|
||||
<img src={ data.ExtractImageURL(s.Result.Thumbnail) }/>
|
||||
<div>
|
||||
<span>{ s.Result.ArtistNames }</span>
|
||||
<h2>{ s.Result.Title }</h2>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Search - dumb</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/style.css" />
|
||||
<link rel="icon" href="/static/logo.svg" type="image/svg+xml">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<main id="app">
|
||||
{{template "navbar"}}
|
||||
<div id="search-page" class="main">
|
||||
<form method="GET">
|
||||
<input type="text" name="q" id="search-input" placeholder="Search..." value="{{.Query}}" />
|
||||
</form>
|
||||
<div id="search-results">
|
||||
{{range .Sections}}
|
||||
{{if eq .Type "song"}}
|
||||
<h1>Songs</h1>
|
||||
{{range .Hits}}
|
||||
<a id="search-item" href="{{.Result.Path}}">
|
||||
<img src="{{extractURL .Result.Thumbnail}}"/>
|
||||
<div>
|
||||
<span>{{.Result.ArtistNames}}</span>
|
||||
<h2>{{.Result.Title}}</h2>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{template "footer"}}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user