web: removed hx-boost

server/routes/page_home.go

@@ -38,15 +38,17 @@ func (routes *Routes) PageHome(rw http.ResponseWriter, r *http.Request) {
 	if err != nil {
 		log.New(ctx).Err(err).Error("failed to list subreddits")
 		code, message := errs.HTTPMessage(err)
+		data := homeview.Data{Error: message}
 		rw.WriteHeader(code)
-		_ = json.NewEncoder(rw).Encode(map[string]string{"error": message})
+		if err := homeview.Home(vc, data).Render(ctx, rw); err != nil {
+			log.New(ctx).Err(err).Error("failed to render home view")
+		}
 		return
 	}
 
 	data := homeview.Data{
 		SubredditsList:      list,
 		RecentlyAddedImages: homeview.NewRecentlyAddedImages(imageList.Images),
-		Error:               err,
 	}
 
 	if err := homeview.Home(vc, data).Render(ctx, rw); err != nil {

server/server.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"errors"
 	"io/fs"
+	"net"
 	"net/http"
 
 	"github.com/go-chi/chi/v5"
@@ -25,7 +26,10 @@ func (srv *Server) Start(exit <-chan struct{}) error {
 	errch := make(chan error, 1)
 	caller := caller.New(3)
 	go func() {
-		log.New(context.Background()).Caller(caller).Info("starting http server", "address", "http://"+srv.server.Addr)
+		log.New(context.Background()).Caller(caller).Info(
+			"starting http server", "address", "http://"+srv.server.Addr,
+			"outbound_ip", "http://"+GetOutboundIP().String()+":"+srv.config.String("http.port"),
+		)
 		errch <- srv.server.ListenAndServe()
 	}()
 
@@ -61,3 +65,16 @@ func New(cfg *config.Config, api *api.API, publicDir fs.FS) *Server {
 
 	return &Server{server: server, config: cfg}
 }
+
+// Get preferred outbound ip of this machine
+func GetOutboundIP() net.IP {
+	conn, err := net.Dial("udp", "8.8.8.8:80")
+	if err != nil {
+		panic(err)
+	}
+	defer conn.Close()
+
+	localAddr := conn.LocalAddr().(*net.UDPAddr)
+
+	return localAddr.IP
+}

views/components/body.templ

@@ -7,9 +7,9 @@ templ Body(c *views.Context) {
 		@Navigation(c) {
 			<div class="flex">
 				@Navbar(c)
-				<main class="flex-1">
+				<div class="flex-1">
 					{ children... }
-				</main>
+				</div>
 			</div>
 		}
 	</body>

views/components/navigation.templ

@@ -24,7 +24,7 @@ templ Navigation(c *views.Context) {
 			</header>
 			{ children... }
 		</div>
-		<nav class="drawer-side" hx-boost="true">
+		<nav class="drawer-side">
 			<label for="drawer-toggle" class="drawer-overlay"></label>
 			<div class="menu py-4 min-w-[15rem] min-h-full bg-base-200 text-base-content">
 				<div class="flex flex-col items-center min-w-[180px] max-w-[280px]">
@@ -87,7 +87,7 @@ templ Navbar(c *views.Context) {
 				<span class="font-bold">Redmage</span>
 			</div>
 			<div class="divider"></div>
-			<nav class="pt-4" hx-boost="true">
+			<nav class="pt-4">
 				<ul class="flex flex-col flex-wrap">
 					<a href="/" class={ classForNavItem(c, "/") }>
 						<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Home</li>

views/homeview/homeview.templ

@@ -9,34 +9,40 @@ templ Home(c *views.Context, data Data) {
 	@components.Doctype() {
 		@components.Head(c, components.HeadTitle("Redmage - Home"))
 		@components.Body(c) {
-			@components.Container() {
+			@HomeContent(c, data)
-				if data.Error != nil {
-					@components.ErrorToast(data.Error.Error())
-				} else {
-					@home(c, data)
-				}
-			}
 		}
 	}
 }
 
-templ home(_ *views.Context, data Data) {
+// HomeContent returns the main content of the home page.
-	<div class="prose">
+//
-		<section class="mb-4 mx-auto">
+// Use this template if request is HX-Boosted.
-			<h1>Recently Added</h1>
+templ HomeContent(_ *views.Context, data Data) {
-			for _, recently := range data.RecentlyAddedImages {
+	<main id="main" class="prose">
-				<h2>{ recently.Device.Name }</h2>
+		@components.Container() {
-				for _, subreddit := range recently.Subreddits {
+			if data.Error != "" {
-					<h4>{ subreddit.Subreddit.Name }</h4>
+				@components.ErrorToast(data.Error)
-					@RecentlyAddedImageList(subreddit.Images, 0)
+			} else {
-				}
+				<section class="mb-4 mx-auto">
+					<h1>Recently Added</h1>
+					for _, recently := range data.RecentlyAddedImages {
+						<h2>{ recently.Device.Name }</h2>
+						for _, subreddit := range recently.Subreddits {
+							<h4>{ subreddit.Subreddit.Name }</h4>
+							@RecentlyAddedImageList(subreddit.Images, 0)
+						}
+					}
+				</section>
+				<section>
+					<h1>Subreddits</h1>
+					for _, subreddit := range data.SubredditsList.Data {
+						<h3>
+							{ subreddit.Name } - 
+							@utils.RelativeTimeNode(subreddit.Name, utils.NextScheduleTime(subreddit.Schedule).Format(time.RFC3339))
+						</h3>
+					}
+				</section>
 			}
-		</section>
+		}
-		<section>
+	</main>
-			<h1>Subreddits</h1>
-			for _, subreddit := range data.SubredditsList.Data {
-				<h3>{ subreddit.Name } - { utils.NextScheduleTime(subreddit.Schedule).Format(time.RubyDate) }</h3>
-			}
-		</section>
-	</div>
 }

views/homeview/homeview_data.go

@@ -11,7 +11,7 @@ import (
 type Data struct {
 	SubredditsList      api.ListSubredditsResult
 	RecentlyAddedImages RecentlyAddedImages
-	Error               error
+	Error               string
 }
 
 type RecentlyAddedImages = []RecentlyAddedImage

views/homeview/recently_added_image.templ

@@ -57,7 +57,7 @@ templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
 }
 
 templ RecentlyAddedImageList(images models.ImageSlice, opts ImageCardOption) {
-	<div class="w-[100vw] lg:w-[80vw] overflow-x-scroll flex gap-4 p-8 shadow-inner bg-base-300">
+	<div class="w-[80vw] overflow-x-scroll flex gap-4 p-8 shadow-inner bg-base-300">
 		for _, data := range images {
 			@RecentlyAddedImageCard(data, opts)
 		}

views/utils/relative_schedule_time.templ

@@ -6,7 +6,7 @@ import "strings"
 //
 // Every second it updates the text content to be the relative time text of the input string.
 
-script RelativeFromTimeText(id string, time string) {
+script RelativeFromTimeText(id string, time string, inter int) {
     const el = document.getElementById(id)
 
     const timeText = dayjs(time).fromNow()
@@ -15,6 +15,31 @@ script RelativeFromTimeText(id string, time string) {
     const interval = setInterval(() => {
         const timeText = dayjs(time).fromNow()
         el.textContent = timeText
+    }, inter)
+
+    const obs = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            for (const removed of mutation.removedNodes) {
+                if (el === removed) {
+                    clearInterval(interval)
+                    obs.disconnect()
+                }
+            }
+        }
+    })
+
+    obs.observe(el.parentNode, { childList: true })
+}
+
+script RelativeTimeToNowText(id, time string, inter int) {
+    const el = document.getElementById(id)
+
+    const timeText = dayjs(time).toNow()
+    el.textContent = timeText
+
+    const interval = setInterval(() => {
+        const timeText = dayjs(time).toNow()
+        el.textContent = timeText
     }, 1000)
 
     const obs = new MutationObserver((mutations) => {
@@ -36,5 +61,13 @@ templ RelativeTimeNode(id string, time string, class ...string) {
 		id={ id }
 		class={ strings.Join(class, " ") }
 	>{ time }</span>
-	@RelativeFromTimeText(id, time)
+	@RelativeFromTimeText(id, time, 10000)
+}
+
+templ RelativeTimeToNowNode(id, time string, class ...string) {
+	<span
+		id={ id }
+		class={ strings.Join(class, " ") }
+	>{ time }</span>
+	@RelativeTimeToNowText(id, time, 10000)
 }