styled code

lib/preferences/init.go

@@ -123,6 +123,7 @@ func setPrefs(c fiber.Ctx, p *cfg.Preferences) error {
 	cookie.SetExpire(time.Now().Add(400 * 24 * time.Hour))
 	cookie.SetHTTPOnly(true)
 	cookie.SetSameSite(fasthttp.CookieSameSiteStrictMode)
+	cookie.SetPath("/")
 	c.Response().Header.SetCookie(cookie)
 	fasthttp.ReleaseCookie(cookie)
 
@@ -251,6 +252,7 @@ func Load(r *fiber.App) {
 		cookie.SetExpire(time.Now().Add(400 * 24 * time.Hour))
 		cookie.SetHTTPOnly(true)
 		cookie.SetSameSite(fasthttp.CookieSameSiteStrictMode)
+		cookie.SetPath("/")
 		c.Response().Header.SetCookie(cookie)
 		fasthttp.ReleaseCookie(cookie)
 

templates/base.templ

@@ -11,11 +11,12 @@ templ Base(title string, content templ.Component, head templ.Component) {
 			<link rel="stylesheet" href="/_/static/global.css"/>
 			<link rel="stylesheet" href="/_/static/instance.css"/>
 			<link rel="icon" href="/_/static/favicon.ico"/>
-			if title != "" {
+			<title>
-				<title>{ title } ~ soundcloak</title>
+				if title != "" {
-			} else {
+					{ title } ~
-				<title>soundcloak</title>
+				}
-			}
+				soundcloak
+			</title>
 			if head != nil {
 				@head
 			}

templates/featured.templ

@@ -12,12 +12,11 @@ templ PlaylistOrUserItem(pl *sc.PlaylistOrUser) {
 			if pl.Kind == "user" {
 				img = pl.Avatar
 			}
+			if img == "" {
+				img = "/_/static/placeholder.jpg"
+			}
 		}}
-		if img != "" {
+		<img loading="lazy" fetchpriority="low" src={ img }/>
-			<img loading="lazy" fetchpriority="low" src={ img }/>
-		} else {
-			<img loading="lazy" fetchpriority="low" src="/_/static/placeholder.jpg"/>
-		}
 		<div class="meta">
 			if pl.Kind == "user" {
 				<h3>{ pl.Username }</h3>

templates/playlist.templ

@@ -22,11 +22,15 @@ func playlist(t sc.Track, p sc.Playlist) string {
 
 templ PlaylistItem(playlist *sc.Playlist, showUsername bool) {
 	<a class="listing" href={ templ.SafeURL(playlist.Href()) }>
+		<img 
+			loading="lazy" 
+			fetchpriority="low"
 		if playlist.Artwork != "" {
-			<img loading="lazy" fetchpriority="low" src={ playlist.Artwork }/>
+			src={ playlist.Artwork }
 		} else {
-			<img loading="lazy" fetchpriority="low" src="/_/static/placeholder.jpg"/>
+			src="/_/static/placeholder.jpg"
 		}
+		/>
 		<div class="meta">
 			<h3>{ playlist.Title }</h3>
 			if showUsername {
@@ -69,12 +73,8 @@ templ Playlist(prefs cfg.Preferences, p sc.Playlist) {
 		}
 		<p>{ strconv.FormatInt(p.Likes, 10) } likes</p>
 		<br/>
-		if p.CreatedAt != "" {
+		<p>Created: { p.CreatedAt }</p>
-			<p>Created: { p.CreatedAt }</p>
+		<p>Last modified: { p.LastModified }</p>
-		}
-		if p.LastModified != "" {
-			<p>Last modified: { p.LastModified }</p>
-		}
 	</div>
 }
 

templates/preferences.templ

@@ -3,11 +3,7 @@ package templates
 import "git.maid.zone/stuff/soundcloak/lib/cfg"
 
 templ checkbox(name string, checked bool) {
-	if checked {
+	<input name={ name } type="checkbox" autocomplete="off" checked?={ checked }/>
-		<input name={ name } type="checkbox" autocomplete="off" checked/>
-	} else {
-		<input name={ name } type="checkbox" autocomplete="off"/>
-	}
 }
 
 type option struct {
@@ -21,11 +17,11 @@ type option struct {
 templ sel(name string, options []option, selected string) {
 	<select name={ name } autocomplete="off">
 		for _, opt := range options {
-			if opt.value == selected {
+			<option 
-				<option value={ opt.value } selected>{ opt.desc }</option>
+				value={ opt.value }
-			} else {
+				selected?={ opt.value==selected }
-				<option value={ opt.value } disabled?={ opt.disabled }>{ opt.desc }</option>
+				disabled?={ opt.disabled }
-			}
+			>{ opt.desc }</option>
 		}
 	</select>
 }

templates/tags.templ

@@ -9,11 +9,14 @@ import (
 templ TagsButtons(current string, tag string) {
 	<div class="btns">
 		for _, b := range [...]btn{{"recent tracks", "", false, false},{"popular tracks", "/popular-tracks", false, false},{"playlists", "/playlists", false, false}} {
+			<a
 			if b.text == current {
-				<a class="btn active">{ b.text }</a>
+				class="btn active"
 			} else {
-				<a class="btn" href={ templ.SafeURL("/tags/" + tag + b.href) }>{ b.text }</a>
+				class="btn"
+				href={ templ.SafeURL("/tags/"+tag+b.href) }
 			}
+			>{ b.text }</a>
 		}
 	</div>
     <br/>

templates/track.templ

@@ -24,19 +24,23 @@ func toExt(audio string) string {
 templ TrackButtons(current string, track sc.Track) {
 	<div class="btns">
 		for _, b := range [...]btn{{"related tracks", "/recommended", false, false},{"in albums", "/albums", false, false},{"in playlists", "/sets", false, false},{"track station", "/discover/sets/"+track.Station, true, false},{"view on soundcloud", "https://soundcloud.com"+track.Href(), true, true}} {
+			<a
 			if b.text == current {
-				<a class="btn active">{ b.text }</a>
+				class="btn active"
 			} else {
-				if b.external {
+				class="btn"
-					<a class="btn" href={ templ.SafeURL(b.href) } referrerpolicy="no-referrer" rel="external nofollow noopener noreferrer" target="_blank">{ b.text }</a>
+				if b.override {
+					href={ templ.SafeURL(b.href) }
 				} else {
-					if b.override {
+					href={ templ.SafeURL(track.Href() + b.href) }
-						<a class="btn" href={ templ.SafeURL(b.href) }>{ b.text }</a>
+				}
-					} else {
+				if b.external {
-						<a class="btn" href={ templ.SafeURL(track.Href() + b.href) }>{ b.text }</a>
+					referrerpolicy="no-referrer" 
-					}
+					rel="external nofollow noopener noreferrer" 
+					target="_blank"
 				}
 			}
+			>{ b.text }</a>
 		}
 	</div>
 }
@@ -47,10 +51,8 @@ templ TrackHeader(prefs cfg.Preferences, t sc.Track, needPlayer bool) {
 	<meta name="og:description" content={ t.FormatDescription() }/>
 	<meta name="og:image" content={ t.Artwork }/>
 	<link rel="icon" type="image/x-icon" href={ t.Artwork }/>
-	if needPlayer {
+	if needPlayer && *prefs.Player == cfg.HLSPlayer {
-		if *prefs.Player == cfg.HLSPlayer {
+		<script src="/_/static/external/hls.light.min.js"></script>
-			<script src="/_/static/external/hls.light.min.js"></script>
-		}
 	}
 }
 
@@ -88,27 +90,42 @@ templ TrackPlayer(prefs cfg.Preferences, track sc.Track, stream string, displayE
 		{{ var audioPref *string }}
 		if cfg.Restream && *prefs.Player == cfg.RestreamPlayer {
 			{{ audioPref = prefs.RestreamAudio }}
+			<audio 
+				id="track" 
+				src={ "/_/restream" + track.Href() } 
+				controls 
+				autoplay?={ autoplay }
+			if nextTrack != nil {
+				data-next={ next(&track, nextTrack, playlist, mode, "") } 
+				volume={ volume }	
+			}
+			></audio>
 			if nextTrack != nil {
-				<audio id="track" src={ "/_/restream" + track.Href() } controls autoplay?={ autoplay } data-next={ next(&track, nextTrack, playlist, mode, "") } volume={ volume }></audio>
 				<script async src="/_/static/restream.js"></script>
-			} else {
-				<audio id="track" src={ "/_/restream" + track.Href() } controls autoplay?={ autoplay }></audio>
 			}
 			if *prefs.KeepPlayerFocus {
 				<script async src="/_/static/keepfocus.js"></script>
 			}
 		} else if stream != "" {
 			{{ audioPref = prefs.HLSAudio }}
+			<audio 
+				id="track" 
+				src={ stream } 
+				controls 
+				autoplay?={ autoplay }
 			if nextTrack != nil {
-				<audio id="track" src={ stream } controls autoplay?={ autoplay } data-next={ next(&track, nextTrack, playlist, mode, "") } volume={ volume }></audio>
+				data-next={ next(&track, nextTrack, playlist, mode, "") } 
-			} else {
+				volume={ volume }	
-				<audio id="track" src={ stream } controls autoplay?={ autoplay }></audio>
 			}
+			></audio>
+			<script
+				async
 			if *prefs.FullyPreloadTrack {
-				<script async src="/_/static/player_preload.js"></script>
+				src="/_/static/player_preload.js"
 			} else {
-				<script async src="/_/static/player.js"></script>
+				src="/_/static/player.js"
 			}
+			></script>
 			if *prefs.KeepPlayerFocus {
 				<script async src="/_/static/keepfocus.js"></script>
 			}
@@ -150,11 +167,15 @@ templ TrackItem(track *sc.Track, showUsername bool, overrideHref string) {
 			}
 		}}
 		<a class="listing" href={ templ.SafeURL(overrideHref) }>
+			<img 
+				loading="lazy" 
+				fetchpriority="low"
 			if track.Artwork != "" {
-				<img loading="lazy" fetchpriority="low" src={ track.Artwork }/>
+				src={ track.Artwork }
 			} else {
-				<img loading="lazy" fetchpriority="low" src="/_/static/placeholder.jpg"/>
+				src="/_/static/placeholder.jpg"
 			}
+			/>
 			<div class="meta">
 				<h3>{ track.Title }</h3>
 				if showUsername {
@@ -256,11 +277,13 @@ templ Track(prefs cfg.Preferences, t sc.Track, stream string, displayErr string,
 templ Comments(comments *sc.Paginated[*sc.Comment]) {
 	for _, c := range comments.Collection {
 		<div class="listing">
+			<img
 			if c.Author.Avatar != "" {
-				<img src={ c.Author.Avatar }/>
+				src={ c.Author.Avatar }
 			} else {
-				<img src="/_/static/placeholder.jpg"/>
+				src="/_/static/placeholder.jpg"
 			}
+			/>
 			<div class="comment">
 				<h3 class="link"><a href={ templ.SafeURL("/" + c.Author.Permalink) }>{ c.Author.Username }</a></h3>
 				<p>{ c.Body }</p>

templates/user.templ

@@ -17,11 +17,15 @@ templ UserHeader(u sc.User) {
 
 templ UserItem(user *sc.User) {
 	<a class="listing" href={ templ.SafeURL("/" + user.Permalink) }>
+		<img
+			loading="lazy"
+			fetchpriority="low"
 		if user.Avatar != "" {
-			<img loading="lazy" fetchpriority="low" src={ user.Avatar }/>
+			src={ user.Avatar }
 		} else {
-			<img loading="lazy" fetchpriority="low" src="/_/static/placeholder.jpg"/>
+			src="/_/static/placeholder.jpg"
 		}
+		/>
 		<div class="meta">
 			<h3>{ user.Username }</h3>
 			if user.FullName != "" {
@@ -34,11 +38,19 @@ templ UserItem(user *sc.User) {
 templ UserLinks(links []sc.Link) {
 	for _, link := range links {
 		if len(link.URL) > 0 {
-			if link.URL[0] == '/' {
+			<p>
-				<p><a class="link" href={ templ.SafeURL(link.URL) }>- { link.Title }</a></p>
+				<a
-			} else {
+					class="link"
-				<p><a class="link" href={ templ.URL(link.URL) } referrerpolicy="no-referrer" rel="external nofollow noopener noreferrer" target="_blank">- { link.Title }</a></p>
+					if link.URL[0] == '/' {
-			}
+						href={ templ.SafeURL(link.URL) }
+					} else {
+						href={ templ.URL(link.URL) }
+						referrerpolicy="no-referrer"
+						rel="external nofollow noopener noreferrer"
+						target="_blank"
+					}
+				>- { link.Title }</a>
+			</p>
 		}
 	}
 }
@@ -84,19 +96,21 @@ templ UserButtons(current string, user sc.User) {
 	<div class="btns">
 		//       this part is the tedious one now, because formatting breaks if i space the list out with newlines
 		for _, b := range [...]btn{{"tracks", "", false, false},{"popular tracks", "/popular-tracks", false, false},{"playlists", "/sets", false, false},{"albums", "/albums", false, false},{"reposts","/reposts", false, false},{"related", "/_/related", false, false},{"user station", "/discover/sets/"+user.Station, true, false},{"view on soundcloud", "https://soundcloud.com/"+user.Permalink, true, true}} {
+			<a
 			if b.text == current {
-				<a class="btn active">{ b.text }</a>
+				class="btn active"
 			} else {
-				if b.external {
+				class="btn"
-					<a class="btn" href={ templ.SafeURL(b.href) } referrerpolicy="no-referrer" rel="external nofollow noopener noreferrer" target="_blank">{ b.text }</a>
+				if b.override {
+					href={ templ.SafeURL(b.href) }
 				} else {
-					if b.override {
+					href={ templ.SafeURL("/" + user.Permalink + b.href) }
-						<a class="btn" href={ templ.SafeURL(b.href) }>{ b.text }</a>
+				}
-					} else {
+				if b.external {
-						<a class="btn" href={ templ.SafeURL("/" + user.Permalink + b.href) }>{ b.text }</a>
+					referrerpolicy="no-referrer" rel="external nofollow noopener noreferrer" target="_blank"
-					}
 				}
 			}
+			>{ b.text }</a>
 		}
 	</div>
 }