web: removed hx-boost

This commit is contained in:
Tigor Hutasuhut 2024-04-29 15:18:23 +07:00
parent f4b5e0a5de
commit 6c973cdf1f
8 changed files with 94 additions and 36 deletions

View file

@ -38,15 +38,17 @@ func (routes *Routes) PageHome(rw http.ResponseWriter, r *http.Request) {
if err != nil { if err != nil {
log.New(ctx).Err(err).Error("failed to list subreddits") log.New(ctx).Err(err).Error("failed to list subreddits")
code, message := errs.HTTPMessage(err) code, message := errs.HTTPMessage(err)
data := homeview.Data{Error: message}
rw.WriteHeader(code) 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 return
} }
data := homeview.Data{ data := homeview.Data{
SubredditsList: list, SubredditsList: list,
RecentlyAddedImages: homeview.NewRecentlyAddedImages(imageList.Images), RecentlyAddedImages: homeview.NewRecentlyAddedImages(imageList.Images),
Error: err,
} }
if err := homeview.Home(vc, data).Render(ctx, rw); err != nil { if err := homeview.Home(vc, data).Render(ctx, rw); err != nil {

View file

@ -4,6 +4,7 @@ import (
"context" "context"
"errors" "errors"
"io/fs" "io/fs"
"net"
"net/http" "net/http"
"github.com/go-chi/chi/v5" "github.com/go-chi/chi/v5"
@ -25,7 +26,10 @@ func (srv *Server) Start(exit <-chan struct{}) error {
errch := make(chan error, 1) errch := make(chan error, 1)
caller := caller.New(3) caller := caller.New(3)
go func() { 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() 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} 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
}

View file

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

View file

@ -24,7 +24,7 @@ templ Navigation(c *views.Context) {
</header> </header>
{ children... } { children... }
</div> </div>
<nav class="drawer-side" hx-boost="true"> <nav class="drawer-side">
<label for="drawer-toggle" class="drawer-overlay"></label> <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="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]"> <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> <span class="font-bold">Redmage</span>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<nav class="pt-4" hx-boost="true"> <nav class="pt-4">
<ul class="flex flex-col flex-wrap"> <ul class="flex flex-col flex-wrap">
<a href="/" class={ classForNavItem(c, "/") }> <a href="/" class={ classForNavItem(c, "/") }>
<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Home</li> <li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Home</li>

View file

@ -9,34 +9,40 @@ templ Home(c *views.Context, data Data) {
@components.Doctype() { @components.Doctype() {
@components.Head(c, components.HeadTitle("Redmage - Home")) @components.Head(c, components.HeadTitle("Redmage - Home"))
@components.Body(c) { @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>
} }

View file

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

View file

@ -57,7 +57,7 @@ templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
} }
templ RecentlyAddedImageList(images models.ImageSlice, 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 { for _, data := range images {
@RecentlyAddedImageCard(data, opts) @RecentlyAddedImageCard(data, opts)
} }

View file

@ -6,7 +6,7 @@ import "strings"
// //
// Every second it updates the text content to be the relative time text of the input string. // 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 el = document.getElementById(id)
const timeText = dayjs(time).fromNow() const timeText = dayjs(time).fromNow()
@ -15,6 +15,31 @@ script RelativeFromTimeText(id string, time string) {
const interval = setInterval(() => { const interval = setInterval(() => {
const timeText = dayjs(time).fromNow() const timeText = dayjs(time).fromNow()
el.textContent = timeText 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) }, 1000)
const obs = new MutationObserver((mutations) => { const obs = new MutationObserver((mutations) => {
@ -36,5 +61,13 @@ templ RelativeTimeNode(id string, time string, class ...string) {
id={ id } id={ id }
class={ strings.Join(class, " ") } class={ strings.Join(class, " ") }
>{ time }</span> >{ 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)
} }