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 {
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 {

View file

@ -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
}

View file

@ -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>

View file

@ -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>

View file

@ -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() {
if data.Error != nil {
@components.ErrorToast(data.Error.Error())
} else {
@home(c, data)
}
}
@HomeContent(c, data)
}
}
}
templ home(_ *views.Context, data Data) {
<div class="prose">
<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)
}
// HomeContent returns the main content of the home page.
//
// Use this template if request is HX-Boosted.
templ HomeContent(_ *views.Context, data Data) {
<main id="main" class="prose">
@components.Container() {
if data.Error != "" {
@components.ErrorToast(data.Error)
} 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>
<h1>Subreddits</h1>
for _, subreddit := range data.SubredditsList.Data {
<h3>{ subreddit.Name } - { utils.NextScheduleTime(subreddit.Schedule).Format(time.RubyDate) }</h3>
}
</section>
</div>
}
</main>
}

View file

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

View file

@ -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)
}

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.
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)
}