Merge pull request #49 from mbaraa/feat/pages-titles

Feat: pages' titles
mbaraa · May 26, 2024 · b376803 · b376803
2 parents e2d542a + 9f2b02a
commit b376803
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 32 deletions.
diff --git a/handlers/pages/pages.go b/handlers/pages/pages.go
@@ -64,22 +64,26 @@ func (p *pagesHandler) HandleHomePage(w http.ResponseWriter, r *http.Request) {
 	}
 
 	if handlers.IsNoLayoutPage(r) {
+		w.Header().Set("HX-Title", "Home")
+		w.Header().Set("HX-Push-Url", "/")
 		pages.Index(recentPlays).Render(r.Context(), w)
 		return
 	}
-	layouts.Default(pages.Index(recentPlays)).Render(r.Context(), w)
+	layouts.Default("Home", pages.Index(recentPlays)).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleAboutPage(w http.ResponseWriter, r *http.Request) {
 	if handlers.IsNoLayoutPage(r) {
+		w.Header().Set("HX-Title", "About")
+		w.Header().Set("HX-Push-Url", "/about")
 		pages.About().Render(r.Context(), w)
 		return
 	}
-	layouts.Default(pages.About()).Render(r.Context(), w)
+	layouts.Default("About", pages.About()).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleLoginPage(w http.ResponseWriter, r *http.Request) {
-	layouts.Raw(pages.Login()).Render(r.Context(), w)
+	layouts.Raw("Login", pages.Login()).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandlePlaylistsPage(w http.ResponseWriter, r *http.Request) {
@@ -95,10 +99,12 @@ func (p *pagesHandler) HandlePlaylistsPage(w http.ResponseWriter, r *http.Reques
 	}
 
 	if handlers.IsNoLayoutPage(r) {
+		w.Header().Set("HX-Title", "Playlists")
+		w.Header().Set("HX-Push-Url", "/playlists")
 		pages.Playlists(playlists).Render(r.Context(), w)
 		return
 	}
-	layouts.Default(pages.Playlists(playlists)).Render(r.Context(), w)
+	layouts.Default("Playlists", pages.Playlists(playlists)).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleSinglePlaylistPage(w http.ResponseWriter, r *http.Request) {
@@ -130,14 +136,16 @@ func (p *pagesHandler) HandleSinglePlaylistPage(w http.ResponseWriter, r *http.R
 	ctx := context.WithValue(r.Context(), handlers.PlaylistPermission, permission)
 
 	if handlers.IsNoLayoutPage(r) {
+		w.Header().Set("HX-Title", playlist.Title)
+		w.Header().Set("HX-Push-Url", "/playlist/"+playlist.PublicId)
 		pages.Playlist(playlist).Render(ctx, w)
 		return
 	}
-	layouts.Default(pages.Playlist(playlist)).Render(ctx, w)
+	layouts.Default(playlist.Title, pages.Playlist(playlist)).Render(ctx, w)
 }
 
 func (p *pagesHandler) HandlePrivacyPage(w http.ResponseWriter, r *http.Request) {
-	layouts.Default(pages.Privacy()).Render(r.Context(), w)
+	layouts.Default("Privacy", pages.Privacy()).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleProfilePage(w http.ResponseWriter, r *http.Request) {
@@ -158,10 +166,12 @@ func (p *pagesHandler) HandleProfilePage(w http.ResponseWriter, r *http.Request)
 		Username: dbProfile.Username,
 	}
 	if handlers.IsNoLayoutPage(r) {
+		w.Header().Set("HX-Title", "Profile")
+		w.Header().Set("HX-Push-Url", "/profile")
 		pages.Profile(profile).Render(r.Context(), w)
 		return
 	}
-	layouts.Default(pages.Profile(profile)).Render(r.Context(), w)
+	layouts.Default("Profile", pages.Profile(profile)).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleSearchResultsPage(w http.ResponseWriter, r *http.Request) {
@@ -187,12 +197,14 @@ func (p *pagesHandler) HandleSearchResultsPage(w http.ResponseWriter, r *http.Re
 	}
 
 	if handlers.IsNoLayoutPage(r) {
+		w.Header().Set("HX-Title", "Results for "+query)
+		w.Header().Set("HX-Push-Url", "/search?query="+query)
 		pages.SearchResults(results, playlists, songsInPlaylists).Render(r.Context(), w)
 		return
 	}
-	layouts.Default(pages.SearchResults(results, playlists, songsInPlaylists)).Render(r.Context(), w)
+	layouts.Default("Results for "+query, pages.SearchResults(results, playlists, songsInPlaylists)).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleSignupPage(w http.ResponseWriter, r *http.Request) {
-	layouts.Raw(pages.Signup()).Render(r.Context(), w)
+	layouts.Raw("Sign up", pages.Signup()).Render(r.Context(), w)
 }
diff --git a/services/youtube/search/suggestions/search_suggestion.go b/services/youtube/search/suggestions/search_suggestion.go
@@ -10,7 +10,7 @@ func SearchSuggestions(query string) (suggestions []string, err error) {
 	resp, err := http.Get("https://suggestqueries.google.com/complete/search?client=firefox&ds=yt&q=" +
 		url.QueryEscape(query))
 	if err != nil {
-		panic(err)
+		return nil, err
 	}
 
 	var results []any

diff --git a/static/js/router.js b/static/js/router.js
@@ -27,10 +27,13 @@ window.addEventListener("load", () => {
   updateActiveNavLink();
 });
 
-window.addEventListener("popstate", (e) => {
-  e.stopImmediatePropagation();
-  e.preventDefault();
-  window.open(window.location.prevPath, "_self");
+document.addEventListener("htmx:afterRequest", function (e) {
+  if (!!e.detail && !!e.detail.xhr) {
+    const newTitle = e.detail.xhr.getResponseHeader("HX-Title");
+    if (newTitle) {
+      document.title = newTitle + " - DankMuzikk";
+    }
+  }
 });
 
 window.Router = { updateActiveNavLink };
diff --git a/static/js/search.js b/static/js/search.js
@@ -11,12 +11,6 @@ function searchNoReload(searchQuery) {
   searchFormEl.blur();
   searchInputEl.blur();
   searchInputEl.value = searchQuery;
-  const query = encodeURIComponent(searchQuery);
-  const prevPath = window.location.href.substring(
-    (window.location.protocol + "//" + window.location.host).length,
-  );
-  window.location.prevPath = prevPath;
-  window.history.pushState({}, "", `/search?query=${query}`);
 }
 
 searchFormEl.addEventListener("submit", (e) => {
@@ -72,8 +66,6 @@ function moveToSuggestions() {
   searchSuggestionsEl.addEventListener("keydown", moveToNextSuggestion);
 }
 
-document.addEventListener("htmx:afterRequest", function (e) {});
-
 window.Search = {
   searchNoReload,
 };
diff --git a/views/components/navlink/navlink.templ b/views/components/navlink/navlink.templ
@@ -10,7 +10,7 @@ templ NavLink(title, imageUrl, path string, showTilte ...bool) {
 		hx-target="#main-contents"
 		hx-swap="innerHTML"
 		hx-trigger="click,submit"
-		hx-on::before-request={ updateHref(path) }
+		hx-on::after-request={ updateStyle() }
 	>
 		if imageUrl != "" {
 			<div class={ "flex", "gap-x-3", "items-center" }>
@@ -44,7 +44,7 @@ templ JustLink(path, title string, child templ.Component) {
 		hx-target="#main-contents"
 		hx-swap="innerHTML"
 		hx-trigger="click,submit"
-		hx-on::before-request={ updateHref(path) }
+		hx-on::after-request={ updateStyle() }
 	>
 		<div
 			id={ path }
@@ -55,9 +55,6 @@ templ JustLink(path, title string, child templ.Component) {
 	</a>
 }
 
-script updateHref(path string) {
-    const prevPath = window.location.href.substring((window.location.protocol+"//"+window.location.host).length);
-    window.location.prevPath = prevPath;
-    window.history.pushState({}, "", path)
+script updateStyle() {
     Router.updateActiveNavLink();
 }
diff --git a/views/layouts/default.templ b/views/layouts/default.templ
@@ -8,12 +8,12 @@ import (
 	"dankmuzikk/views/components/mobilenav"
 )
 
-templ Default(children ...templ.Component) {
+templ Default(title string, children ...templ.Component) {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
 			<meta charset="UTF-8"/>
-			<title>DankMuzikk</title>
+			<title>{ title } - DankMuzikk</title>
 			<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>
 			<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/>
 			<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/>

diff --git a/views/layouts/raw.templ b/views/layouts/raw.templ
@@ -5,12 +5,12 @@ import (
 	"fmt"
 )
 
-templ Raw(children ...templ.Component) {
+templ Raw(title string, children ...templ.Component) {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
 			<meta charset="UTF-8"/>
-			<title>DankMuzikk</title>
+			<title>{ title } - DankMuzikk</title>
 			<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>
 			<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/>
 			<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/>